Cards Demo 3

1"use client";
2import { animate, motion } from "motion/react";
3import React, { useEffect, useState } from "react";
4import { cn } from "@/lib/utils";
5import { GoCopilot } from "react-icons/go";
6 
7export default function CardDemo() {
8  return (
9    <Card>
10      <CardSkeletonContainer>
11        <Skeleton />
12      </CardSkeletonContainer>
13      <CardTitle>Damn good card</CardTitle>
14      <CardDescription>
15        A card that showcases a set of tools that you use to create your
16        product.
17      </CardDescription>
18    </Card>
19  );
20}
21 
22const Skeleton = () => {
23  const scale = [1, 1.1, 1];
24  const transform = ["translateY(0px)", "translateY(-4px)", "translateY(0px)"];
25  const sequence = [
26    [
27      ".circle-1",
28      {
29        scale,
30        transform,
31      },
32      { duration: 0.8 },
33    ],
34    [
35      ".circle-2",
36      {
37        scale,
38        transform,
39      },
40      { duration: 0.8 },
41    ],
42    [
43      ".circle-3",
44      {
45        scale,
46        transform,
47      },
48      { duration: 0.8 },
49    ],
50    [
51      ".circle-4",
52      {
53        scale,
54        transform,
55      },
56      { duration: 0.8 },
57    ],
58    [
59      ".circle-5",
60      {
61        scale,
62        transform,
63      },
64      { duration: 0.8 },
65    ],
66  ];
67 
68  useEffect(() => {
69    animate(sequence, {
70      // @ts-ignore
71      repeat: Infinity,
72      repeatDelay: 1,
73    });
74  }, []);
75  return (
76    <div className="p-8 overflow-hidden h-full relative flex items-center justify-center">
77      <div className="flex flex-row shrink-0 justify-center items-center gap-2">
78        <Container className="h-8 w-8 circle-1">
79          <ClaudeLogo className="h-4 w-4 " />
80        </Container>
81        <Container className="h-12 w-12 circle-2">
82          <GoCopilot className="h-6 w-6 dark:text-white" />
83        </Container>
84        <Container className="circle-3">
85          <OpenAILogo className="h-8 w-8 dark:text-white" />
86        </Container>
87        <Container className="h-12 w-12 circle-4">
88          <MetaIconOutline className="h-6 w-6 " />
89        </Container>
90        <Container className="h-8 w-8 circle-5">
91          <GeminiLogo className="h-4 w-4 " />
92        </Container>
93      </div>
94 
95      <div className="h-40 w-px absolute top-20 m-auto z-40 bg-gradient-to-b from-transparent via-cyan-500 to-transparent animate-move">
96        <div className="w-10 h-32 top-1/2 -translate-y-1/2 absolute -left-10">
97          <Sparkles />
98        </div>
99      </div>
100    </div>
101  );
102};
103const Sparkles = () => {
104// … truncated