animated-frameworks

1"use client"
2 
3import { useEffect, useState } from "react"
4 
5import { cn } from "@/lib/utils"
6import { Icons } from "@/components/icons"
7 
8type AnimatedFrameworksProps = {
9  cardTitle?: string
10  cardDescription?: string
11}
12 
13const AnimatedFrameworks = ({
14  cardTitle = "Universal Compatibility",
15  cardDescription = "Works seamlessly with Next.js, React, HTML, Apple, GitHub, OpenAI, and more fits everywhere.",
16}: AnimatedFrameworksProps) => {
17  return (
18    <div
19      className={cn(
20        "relative",
21        "flex flex-col justify-between",
22        "h-[20rem] space-y-4",
23        "rounded-md border bg-white shadow-sm",
24        "dark:border-neutral-800/50 dark:bg-[#171717]",
25        "border-neutral-200"
26      )}
27    >
28      <FrameworkCard />
29      <div className="px-4 pb-4">
30        <div className="text-sm font-semibold text-neutral-900 dark:text-white">
31          {cardTitle}
32        </div>
33        <div className="mt-2 text-xs text-neutral-600 dark:text-neutral-400">
34          {cardDescription}
35        </div>
36      </div>
37    </div>
38  )
39}
40 
41export default AnimatedFrameworks
42 
43const FrameworkCard = () => {
44  const [nextJsTransform, setNextJsTransform] = useState("none")
45  const [reactTransform, setReactTransform] = useState("none")
46  const [htmlTransform, setHtmlTransform] = useState("none")
47 
48  useEffect(() => {
49    const cycleAnimations = async () => {
50      const upStyle = "translateY(-3.71px) rotateX(10.71deg) translateZ(20px)"
51      const downStyle = "none"
52 
53      const transitionDuration = 1100
54 
55      const durationOfUpState = 1200
56      const delayBetweenCards = 600
57 
58      while (true) {
59        setReactTransform(upStyle)
60        await new Promise((resolve) => setTimeout(resolve, durationOfUpState))
61        setReactTransform(downStyle)
62        await new Promise((resolve) =>
63          setTimeout(resolve, transitionDuration + delayBetweenCards)
64        )
65 
66        setNextJsTransform(upStyle)
67        await new Promise((resolve) => setTimeout(resolve, durationOfUpState))
68        setNextJsTransform(downStyle)
69        await new Promise((resolve) =>
70          setTimeout(resolve, transitionDuration + delayBetweenCards)
71        )
72 
73        setHtmlTransform(upStyle)
74        await new Promise((resolve) => setTimeout(resolve, durationOfUpState))
75        setHtmlTransform(downStyle)
76        await new Promise((resolve) =>
77          setTimeout(resolve, transitionDuration + delayBetweenCards)
78        )
79      }
80    }
81 
82    cycleAnimations()
83  }, [])
84 
85  const cardClasses =
86// … truncated