{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "svg-shapes-animated-demo",
  "type": "registry:component",
  "registryDependencies": [
    "svg-shapes-animated"
  ],
  "files": [
    {
      "path": "registry/default/example/svg-shapes-animated-demo.tsx",
      "content": "\"use client\"\n\nimport { useState, type ReactNode } from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n  ArrowPentagonShapeSvg,\n  ChevronShapeSvg,\n  CircleShapeSvg,\n  CrossShapeSvg,\n  CubeWireframeSvg,\n  DiamondShapeSvg,\n  DodecahedronWireframeSvg,\n  DoubleNotchTechShapeSvg,\n  EllipseShapeSvg,\n  FlowerOfLifeSvg,\n  GoldenSpiralSvg,\n  GothicArchPanelSvg,\n  HourglassBowtiePanelSvg,\n  IcosahedronWireframeSvg,\n  InvertedArchPanelSvg,\n  KiteShapeSvg,\n  MetatronsCubeSvg,\n  OctagonShapeSvg,\n  OctahedronWireframeSvg,\n  OgeeOnionDomePanelSvg,\n  ParallelogramShapeSvg,\n  PennantShapeSvg,\n  PillShapeSvg,\n  QuarterCircleShapeSvg,\n  RibbonBannerShapeSvg,\n  RightTriangleShapeSvg,\n  RoundedRectCornerBiteShapeSvg,\n  RoundedSquareShapeSvg,\n  RoundedTriangleShapeSvg,\n  ScallopedTopPanelSvg,\n  SeedOfLifeSvg,\n  SemicircleShapeSvg,\n  SquircleShapeSvg,\n  SriYantraSvg,\n  TetrahedronWireframeSvg,\n  TorusTubeSvg,\n  TrapezoidShapeSvg,\n  TriangleShapeSvg,\n  VesicaPiscisSvg,\n} from \"@/registry/default/ui/svg-shapes-animated\"\n\nfunction DemoSection({\n  title,\n  children,\n}: {\n  title: string\n  children: ReactNode\n}) {\n  return (\n    <section className=\"w-full space-y-4\">\n      <h3 className=\"text-foreground text-sm font-semibold tracking-tight\">\n        {title}\n      </h3>\n      <div className=\"grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-3\">\n        {children}\n      </div>\n    </section>\n  )\n}\n\nfunction ShapeTile({\n  label,\n  tall,\n  children,\n}: {\n  label: string\n  tall?: boolean\n  children: ReactNode\n}) {\n  return (\n    <div className=\"bg-muted/30 flex flex-col gap-2 rounded-lg border p-3\">\n      <p className=\"text-muted-foreground text-xs font-medium\">{label}</p>\n      <div\n        className={`flex items-center justify-center [&_svg]:w-full ${\n          tall ? \"min-h-28 [&_svg]:max-h-28\" : \"min-h-20 [&_svg]:max-h-20\"\n        }`}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport default function SvgShapesAnimatedDemo() {\n  const [replayKey, setReplayKey] = useState(0)\n\n  return (\n    <div className=\"flex flex-col items-center gap-12 rounded-md px-4 py-6 md:px-0 dark:bg-stone-950\">\n      <div className=\"max-w-2xl space-y-4 text-center\">\n        <h2 className=\"text-foreground text-2xl font-bold tracking-tight\">\n          SVG shapes (animated)\n        </h2>\n        <p className=\"text-muted-foreground text-sm\">\n          Same wide viewBox geometry as the static set, with paths drawn via{\" \"}\n          <code className=\"bg-muted rounded px-1 py-0.5 text-xs\">\n            motion/react\n          </code>{\" \"}\n          when each graphic scrolls into view. Respects{\" \"}\n          <code className=\"bg-muted rounded px-1 py-0.5 text-xs\">\n            prefers-reduced-motion\n          </code>\n          .\n        </p>\n        <div className=\"flex justify-center\">\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={() => setReplayKey((k) => k + 1)}\n          >\n            Replay animations\n          </Button>\n        </div>\n      </div>\n\n      <div key={replayKey} className=\"flex w-full max-w-5xl flex-col gap-10\">\n        <DemoSection title=\"Polygons and curves\">\n          <ShapeTile label=\"Triangle\">\n            <TriangleShapeSvg />\n          </ShapeTile>\n          <ShapeTile label=\"Circle\">\n            <CircleShapeSvg />\n          </ShapeTile>\n          <ShapeTile label=\"Ellipse\">\n            <EllipseShapeSvg />\n          </ShapeTile>\n          <ShapeTile label=\"Semicircle (D panel)\">\n            <SemicircleShapeSvg />\n          </ShapeTile>\n          <ShapeTile label=\"Right triangle\">\n            <RightTriangleShapeSvg />\n          </ShapeTile>\n          <ShapeTile label=\"Kite\">\n            <KiteShapeSvg />\n          </ShapeTile>\n          <ShapeTile label=\"Pennant\">\n            <PennantShapeSvg />\n          </ShapeTile>\n          <ShapeTile label=\"Quarter circle\">\n            <QuarterCircleShapeSvg />\n          </ShapeTile>\n        </DemoSection>\n\n        <div className=\"flex justify-center\">\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={() => setReplayKey((k) => k + 1)}\n          >\n            Replay animations\n          </Button>\n        </div>\n\n        <DemoSection title=\"Rounded and architectural\">\n          <ShapeTile label=\"Rounded square\">\n            <RoundedSquareShapeSvg />\n          </ShapeTile>\n          <ShapeTile label=\"Rounded triangle\">\n            <RoundedTriangleShapeSvg />\n          </ShapeTile>\n          <ShapeTile label=\"Squircle\">\n            <SquircleShapeSvg />\n          </ShapeTile>\n          <ShapeTile label=\"Gothic arch panel\">\n            <GothicArchPanelSvg />\n          </ShapeTile>\n          <ShapeTile label=\"Inverted arch panel\">\n            <InvertedArchPanelSvg />\n          </ShapeTile>\n          <ShapeTile label=\"Arrow pentagon\">\n            <ArrowPentagonShapeSvg />\n          </ShapeTile>\n        </DemoSection>\n\n        <div className=\"flex justify-center\">\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={() => setReplayKey((k) => k + 1)}\n          >\n            Replay animations\n          </Button>\n        </div>\n\n        <DemoSection title=\"Primitives\">\n          <ShapeTile label=\"Diamond\">\n            <DiamondShapeSvg />\n          </ShapeTile>\n          <ShapeTile label=\"Trapezoid\">\n            <TrapezoidShapeSvg />\n          </ShapeTile>\n          <ShapeTile label=\"Octagon\">\n            <OctagonShapeSvg />\n          </ShapeTile>\n          <ShapeTile label=\"Parallelogram\">\n            <ParallelogramShapeSvg />\n          </ShapeTile>\n          <ShapeTile label=\"Chevron\">\n            <ChevronShapeSvg />\n          </ShapeTile>\n          <ShapeTile label=\"Cross\">\n            <CrossShapeSvg />\n          </ShapeTile>\n          <ShapeTile label=\"Pill\">\n            <PillShapeSvg />\n          </ShapeTile>\n        </DemoSection>\n\n        <div className=\"flex justify-center\">\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={() => setReplayKey((k) => k + 1)}\n          >\n            Replay animations\n          </Button>\n        </div>\n\n        <DemoSection title=\"Panels\">\n          <ShapeTile label=\"Ribbon banner\">\n            <RibbonBannerShapeSvg />\n          </ShapeTile>\n          <ShapeTile label=\"Hourglass / bowtie\">\n            <HourglassBowtiePanelSvg />\n          </ShapeTile>\n          <ShapeTile label=\"Scalloped top\">\n            <ScallopedTopPanelSvg />\n          </ShapeTile>\n          <ShapeTile label=\"Corner bite\">\n            <RoundedRectCornerBiteShapeSvg />\n          </ShapeTile>\n          <ShapeTile label=\"Double notch\">\n            <DoubleNotchTechShapeSvg />\n          </ShapeTile>\n          <ShapeTile label=\"Ogee onion dome\">\n            <OgeeOnionDomePanelSvg />\n          </ShapeTile>\n        </DemoSection>\n\n        <div className=\"flex justify-center\">\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={() => setReplayKey((k) => k + 1)}\n          >\n            Replay animations\n          </Button>\n        </div>\n\n        <DemoSection title=\"Sacred geometry\">\n          <ShapeTile label=\"Vesica piscis\" tall>\n            <VesicaPiscisSvg />\n          </ShapeTile>\n          <ShapeTile label=\"Seed of life\" tall>\n            <SeedOfLifeSvg />\n          </ShapeTile>\n          <ShapeTile label=\"Flower of life\" tall>\n            <FlowerOfLifeSvg />\n          </ShapeTile>\n          <ShapeTile label=\"Metatron cube\" tall>\n            <MetatronsCubeSvg />\n          </ShapeTile>\n          <ShapeTile label=\"Sri Yantra\" tall>\n            <SriYantraSvg />\n          </ShapeTile>\n          <ShapeTile label=\"Golden spiral\" tall>\n            <GoldenSpiralSvg />\n          </ShapeTile>\n          <ShapeTile label=\"Torus tube\" tall>\n            <TorusTubeSvg />\n          </ShapeTile>\n        </DemoSection>\n\n        <div className=\"flex justify-center\">\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={() => setReplayKey((k) => k + 1)}\n          >\n            Replay animations\n          </Button>\n        </div>\n\n        <DemoSection title=\"Platonic solids (wireframe)\">\n          <ShapeTile label=\"Tetrahedron\">\n            <TetrahedronWireframeSvg />\n          </ShapeTile>\n          <ShapeTile label=\"Cube\">\n            <CubeWireframeSvg />\n          </ShapeTile>\n          <ShapeTile label=\"Octahedron\">\n            <OctahedronWireframeSvg />\n          </ShapeTile>\n          <ShapeTile label=\"Icosahedron\">\n            <IcosahedronWireframeSvg />\n          </ShapeTile>\n          <ShapeTile label=\"Dodecahedron\">\n            <DodecahedronWireframeSvg />\n          </ShapeTile>\n        </DemoSection>\n\n        <section className=\"w-full space-y-4\">\n          <h3 className=\"text-foreground text-sm font-semibold tracking-tight\">\n            Flip prop\n          </h3>\n          <div className=\"grid grid-cols-2 gap-3 sm:grid-cols-4\">\n            {(\n              [\n                [\"none\", \"none\"],\n                [\"vertical\", \"vertical\"],\n                [\"horizontal\", \"horizontal\"],\n                [\"both axes\", \"both\"],\n              ] as const\n            ).map(([label, flip]) => (\n              <ShapeTile key={flip} label={label}>\n                <PennantShapeSvg flip={flip} />\n              </ShapeTile>\n            ))}\n          </div>\n        </section>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}