"use client" import { useEffect, useState } from "react" import { cn } from "@/lib/utils" import { Icons } from "@/components/icons" type AnimatedFrameworksProps = { cardTitle?: string cardDescription?: string } const AnimatedFrameworks = ({ cardTitle = "Universal Compatibility", cardDescription = "Works seamlessly with Next.js, React, HTML, Apple, GitHub, OpenAI, and more fits everywhere.", }: AnimatedFrameworksProps) => { return (

{cardTitle}

{cardDescription}

) } export default AnimatedFrameworks const FrameworkCard = () => { const [nextJsTransform, setNextJsTransform] = useState("none") const [reactTransform, setReactTransform] = useState("none") const [htmlTransform, setHtmlTransform] = useState("none") useEffect(() => { const cycleAnimations = async () => { const upStyle = "translateY(-3.71px) rotateX(10.71deg) translateZ(20px)" const downStyle = "none" const transitionDuration = 1100 const durationOfUpState = 1200 const delayBetweenCards = 600 while (true) { setReactTransform(upStyle) await new Promise((resolve) => setTimeout(resolve, durationOfUpState)) setReactTransform(downStyle) await new Promise((resolve) => setTimeout(resolve, transitionDuration + delayBetweenCards) ) setNextJsTransform(upStyle) await new Promise((resolve) => setTimeout(resolve, durationOfUpState)) setNextJsTransform(downStyle) await new Promise((resolve) => setTimeout(resolve, transitionDuration + delayBetweenCards) ) setHtmlTransform(upStyle) await new Promise((resolve) => setTimeout(resolve, durationOfUpState)) setHtmlTransform(downStyle) await new Promise((resolve) => setTimeout(resolve, transitionDuration + delayBetweenCards) ) } } cycleAnimations() }, []) const cardClasses = "flex aspect-square items-center justify-center rounded-md border bg-gradient-to-b from-neutral-50 to-neutral-100 p-4 " + "dark:border-neutral-800 dark:from-[#272727] dark:to-[#3d3d3d] " + "border-neutral-300 shadow-[0_8px_30px_rgb(0,0,0,0.12)] " + "[@media(min-width:320px)]:h-20 [@media(min-width:500px)]:h-36 " + "transition-transform duration-1000 ease-out will-change-transform" return ( <>

) }

animated-frameworks

Instalação

Dependências

Registry dependencies