{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-frameworks",
  "title": "animated-frameworks",
  "description": "An animated frameworks component.",
  "dependencies": [
    "motion",
    "react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/eldoraui/animated-frameworks.tsx",
      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icons } from \"@/components/icons\"\n\ntype AnimatedFrameworksProps = {\n  cardTitle?: string\n  cardDescription?: string\n}\n\nconst AnimatedFrameworks = ({\n  cardTitle = \"Universal Compatibility\",\n  cardDescription = \"Works seamlessly with Next.js, React, HTML, Apple, GitHub, OpenAI, and more fits everywhere.\",\n}: AnimatedFrameworksProps) => {\n  return (\n    <div\n      className={cn(\n        \"relative\",\n        \"flex flex-col justify-between\",\n        \"h-[20rem] space-y-4\",\n        \"rounded-md border bg-white shadow-sm\",\n        \"dark:border-neutral-800/50 dark:bg-[#171717]\",\n        \"border-neutral-200\"\n      )}\n    >\n      <FrameworkCard />\n      <div className=\"px-4 pb-4\">\n        <div className=\"text-sm font-semibold text-neutral-900 dark:text-white\">\n          {cardTitle}\n        </div>\n        <div className=\"mt-2 text-xs text-neutral-600 dark:text-neutral-400\">\n          {cardDescription}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default AnimatedFrameworks\n\nconst FrameworkCard = () => {\n  const [nextJsTransform, setNextJsTransform] = useState(\"none\")\n  const [reactTransform, setReactTransform] = useState(\"none\")\n  const [htmlTransform, setHtmlTransform] = useState(\"none\")\n\n  useEffect(() => {\n    const cycleAnimations = async () => {\n      const upStyle = \"translateY(-3.71px) rotateX(10.71deg) translateZ(20px)\"\n      const downStyle = \"none\"\n\n      const transitionDuration = 1100\n\n      const durationOfUpState = 1200\n      const delayBetweenCards = 600\n\n      while (true) {\n        setReactTransform(upStyle)\n        await new Promise((resolve) => setTimeout(resolve, durationOfUpState))\n        setReactTransform(downStyle)\n        await new Promise((resolve) =>\n          setTimeout(resolve, transitionDuration + delayBetweenCards)\n        )\n\n        setNextJsTransform(upStyle)\n        await new Promise((resolve) => setTimeout(resolve, durationOfUpState))\n        setNextJsTransform(downStyle)\n        await new Promise((resolve) =>\n          setTimeout(resolve, transitionDuration + delayBetweenCards)\n        )\n\n        setHtmlTransform(upStyle)\n        await new Promise((resolve) => setTimeout(resolve, durationOfUpState))\n        setHtmlTransform(downStyle)\n        await new Promise((resolve) =>\n          setTimeout(resolve, transitionDuration + delayBetweenCards)\n        )\n      }\n    }\n\n    cycleAnimations()\n  }, [])\n\n  const cardClasses =\n    \"flex aspect-square items-center justify-center rounded-md border bg-gradient-to-b from-neutral-50 to-neutral-100 p-4 \" +\n    \"dark:border-neutral-800 dark:from-[#272727] dark:to-[#3d3d3d] \" +\n    \"border-neutral-300 shadow-[0_8px_30px_rgb(0,0,0,0.12)] \" +\n    \"[@media(min-width:320px)]:h-20 [@media(min-width:500px)]:h-36 \" +\n    \"transition-transform duration-1000 ease-out will-change-transform\"\n\n  return (\n    <>\n      <div\n        className={cn(\n          \"relative\",\n          \"flex flex-col items-center justify-center gap-1\",\n          \"h-[14.5rem] w-full\"\n        )}\n      >\n        <div className=\"absolute flex h-full w-full items-center justify-center\">\n          <div className=\"h-full w-[15rem]\">\n            <svg\n              className=\"h-full w-full\"\n              width=\"100%\"\n              height=\"100%\"\n              viewBox=\"0 0 100 100\"\n              fill=\"none\"\n            >\n              <g\n                stroke=\"currentColor\"\n                strokeWidth=\"0.1\"\n                className=\"text-neutral-400 dark:text-neutral-600\"\n              >\n                <path d=\"M 1 0 v 5 q 0 5 5 5 h 39 q 5 0 5 5 v 71 q 0 5 5 5 h 39 q 5 0 5 5 v 5\" />\n              </g>\n              <g mask=\"url(#framework-mask)\">\n                <circle\n                  className=\"frameworkline framework-line\"\n                  cx=\"0\"\n                  cy=\"0\"\n                  r=\"12\"\n                  fill=\"url(#framework-blue-grad)\"\n                />\n              </g>\n              <defs>\n                <mask id=\"framework-mask\">\n                  <path\n                    d=\"M 1 0 v 5 q 0 5 5 5 h 39 q 5 0 5 5 v 71 q 0 5 5 5 h 39 q 5 0 5 5 v 5\"\n                    strokeWidth=\"0.3\"\n                    stroke=\"white\"\n                  />\n                </mask>\n                <radialGradient id=\"framework-blue-grad\" fx=\"1\">\n                  <stop offset=\"0%\" stopColor={\"#3b82f6\"} />\n                  <stop offset=\"100%\" stopColor=\"transparent\" />\n                </radialGradient>\n              </defs>\n            </svg>\n          </div>\n        </div>\n        <div\n          className={cn(\n            \"flex items-center justify-center gap-4\",\n            \"[perspective:1000px] [transform-style:preserve-3d]\"\n          )}\n        >\n          <div className={cardClasses} style={{ transform: reactTransform }}>\n            <Icons.apple className=\"size-6 text-neutral-700 dark:text-neutral-100 [@media(min-width:500px)]:size-9\" />\n          </div>\n          <div className={cardClasses} style={{ transform: nextJsTransform }}>\n            <Icons.gitHub className=\"size-6 text-neutral-700 dark:text-neutral-100 [@media(min-width:500px)]:size-9\" />\n          </div>\n          <div className={cardClasses} style={{ transform: htmlTransform }}>\n            <Icons.openai className=\"size-6 text-neutral-700 dark:text-neutral-100 [@media(min-width:500px)]:size-9\" />\n          </div>\n        </div>\n\n        <div className=\"absolute bottom-0 left-0 h-3 w-full bg-gradient-to-t from-white to-transparent dark:from-[#171717]\" />\n      </div>\n    </>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}