{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "floating-elements-infinite-demo",
  "title": "Floating Elements Infinite Demo",
  "description": "Demo showing infinite floating elements component.",
  "registryDependencies": [
    "https://systaliko-ui.vercel.app/r/floating-elements"
  ],
  "files": [
    {
      "path": "registry/demo/blocks/floating-elements-infinite/index.tsx",
      "content": "'use client';\n\nimport {\n  FloatingElements,\n  InfiniteFloatingItem,\n} from '@/components/systaliko-ui/blocks/floating-elements';\nimport { Label } from '@/components/systaliko-ui/shadcn/label';\nimport { Slider } from '@/components/systaliko-ui/shadcn/slider';\nimport { useState } from 'react';\n\nconst ELEMENTS = [\n  { id: 'inf-1', className: 'bg-violet-500 top-[10%] left-[15%]', phase: 0 },\n  {\n    id: 'inf-2',\n    className: 'bg-emerald-500 bottom-[12%] left-[25%]',\n    phase: Math.PI / 3,\n  },\n  {\n    id: 'inf-3',\n    className: 'bg-yellow-500 top-[40%] right-[12%]',\n    phase: Math.PI,\n  },\n  {\n    id: 'inf-4',\n    className: 'bg-rose-500 top-[15%] right-[30%]',\n    phase: Math.PI / 2,\n  },\n  {\n    id: 'inf-5',\n    className: 'bg-sky-500 bottom-[20%] right-[20%]',\n    phase: (Math.PI * 5) / 4,\n  },\n  {\n    id: 'inf-6',\n    className: 'bg-orange-500 top-[60%] left-[8%]',\n    phase: (Math.PI * 3) / 2,\n  },\n];\n\nexport function FloatingElementsInfiniteDemo() {\n  const [depth, setDepth] = useState(0.03);\n  const [amplitude, setAmplitude] = useState(12);\n  const [speed, setSpeed] = useState(1);\n  const [stiffness, setStiffness] = useState(80);\n  const [damping, setDamping] = useState(20);\n\n  return (\n    <div className=\"flex h-screen flex-col\">\n      <div className=\"border-b bg-background/80 backdrop-blur-sm p-4 z-10\">\n        <div className=\"flex flex-wrap items-end gap-6\">\n          <div className=\"flex flex-col gap-2 min-w-[160px]\">\n            <Label className=\"text-sm font-medium\">\n              Depth: {depth.toFixed(2)}\n            </Label>\n            <Slider\n              value={[depth * 100]}\n              onValueChange={([v]) => setDepth(v / 100)}\n              min={0}\n              max={15}\n              step={1}\n            />\n          </div>\n\n          <div className=\"flex flex-col gap-2 min-w-[160px]\">\n            <Label className=\"text-sm font-medium\">\n              Amplitude: {amplitude}px\n            </Label>\n            <Slider\n              value={[amplitude]}\n              onValueChange={([v]) => setAmplitude(v)}\n              min={1}\n              max={60}\n              step={1}\n            />\n          </div>\n\n          <div className=\"flex flex-col gap-2 min-w-[160px]\">\n            <Label className=\"text-sm font-medium\">\n              Speed: {speed.toFixed(1)}\n            </Label>\n            <Slider\n              value={[speed * 10]}\n              onValueChange={([v]) => setSpeed(v / 10)}\n              min={1}\n              max={40}\n              step={1}\n            />\n          </div>\n\n          <div className=\"flex flex-col gap-2 min-w-[160px]\">\n            <Label className=\"text-sm font-medium\">\n              Stiffness: {stiffness}\n            </Label>\n            <Slider\n              value={[stiffness]}\n              onValueChange={([v]) => setStiffness(v)}\n              min={10}\n              max={300}\n              step={10}\n            />\n          </div>\n\n          <div className=\"flex flex-col gap-2 min-w-[160px]\">\n            <Label className=\"text-sm font-medium\">Damping: {damping}</Label>\n            <Slider\n              value={[damping]}\n              onValueChange={([v]) => setDamping(v)}\n              min={1}\n              max={60}\n              step={1}\n            />\n          </div>\n        </div>\n      </div>\n\n      <FloatingElements className=\"bg-secondary flex-1\">\n        {ELEMENTS.map((el) => (\n          <InfiniteFloatingItem\n            className={`absolute rounded shadow-[4px_4px_#000] size-20 ${el.className}`}\n            key={el.id}\n            depth={depth}\n            amplitude={amplitude}\n            speed={speed}\n            phase={el.phase}\n            stiffness={stiffness}\n            damping={damping}\n          />\n        ))}\n      </FloatingElements>\n    </div>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/systaliko-ui/demo/floating-elements-infinite.tsx"
    }
  ],
  "type": "registry:block"
}