{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "svg-shapes-animated",
  "type": "registry:ui",
  "description": "Scroll-triggered stroke-draw animations for wide SVG shapes and panels using Motion",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/default/ui/svg-shapes-animated.tsx",
      "content": "\"use client\"\n\nimport { motion, useReducedMotion } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\n// const shapeSvgClass = \"w-full fill-background/35 text-foreground/15\";\nconst shapeSvgClass = \"w-full  text-foreground/70 stroke-2\"\n\nconst flipClasses = {\n  none: \"\",\n  /** Center origin keeps flips inside the viewBox; edge origins mirror the path out of shape. */\n  vertical: \"origin-center -scale-y-100\",\n  horizontal: \"origin-center -scale-x-100\",\n  both: \"origin-center -scale-x-100 -scale-y-100\",\n} as const\n\nexport type ShapeShapeFlip = keyof typeof flipClasses\n\nexport interface ShapeSvgProps {\n  className?: string\n  flip?: ShapeShapeFlip\n}\n\nfunction frameSvgClassName(\n  flip: ShapeShapeFlip | undefined,\n  className: string | undefined\n) {\n  return cn(shapeSvgClass, flip ? flipClasses[flip] : null, className)\n}\n\n/** Line-art frames: no fill tint (stroke-only reads correctly). */\nfunction lineArtShapeSvgClassName(\n  flip: ShapeShapeFlip | undefined,\n  className: string | undefined\n) {\n  return cn(\n    \"text-foreground/70 w-full fill-none stroke-2\",\n    flip ? flipClasses[flip] : null,\n    className\n  )\n}\n\nconst SACRED_DRAW_EASE = [0.22, 1, 0.36, 1] as const\n\n/** When ~25% of each stroked shape intersects the viewport, draw runs once (re-run if remounted). */\nconst SACRED_IN_VIEW = { amount: 0.25, once: true } as const\n\nfunction sacredStrokeTransition(\n  reduceMotion: boolean | null,\n  staggerIndex: number,\n  duration = 0.72\n) {\n  if (reduceMotion) {\n    return { pathLength: { duration: 0 } as const }\n  }\n  return {\n    pathLength: {\n      duration,\n      delay: staggerIndex * 0.009,\n      ease: SACRED_DRAW_EASE,\n    },\n  }\n}\n\nfunction strokeDrawProps(\n  reduceMotion: boolean | null,\n  staggerIndex: number,\n  duration = 0.72\n) {\n  return {\n    initial: { pathLength: reduceMotion ? 1 : 0 } as const,\n    transition: sacredStrokeTransition(reduceMotion, staggerIndex, duration),\n    viewport: SACRED_IN_VIEW,\n    whileInView: { pathLength: 1 } as const,\n  }\n}\n\nexport interface CrosshairReticleSvgProps extends ShapeSvgProps {\n  /** When true, draws the 50px-radius center ring. Default true. */\n  showCenterCircle?: boolean\n}\n\n/* ------------------------------------------------------------------ */\n/*  BASIC GEOMETRY                                                  */\n/* ------------------------------------------------------------------ */\n\n/* ------------------------------------------------------------------ */\n/*  FUNDAMENTAL POLYGONS                                              */\n/* ------------------------------------------------------------------ */\n\n/**\n * Shape: equilateral triangle — point at top center, flat base.\n */\nexport function TriangleShapeSvg({ className, flip = \"none\" }: ShapeSvgProps) {\n  const reduceMotion = useReducedMotion()\n\n  return (\n    <svg\n      className={frameSvgClassName(flip, className)}\n      fill=\"none\"\n      viewBox=\"0 0 2400 1000\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title>Equilateral triangle shape</title>\n      <motion.path\n        {...strokeDrawProps(reduceMotion, 0)}\n        d=\"M1200 2L2398 998H2Z\"\n        stroke=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\n/**\n * Shape: circle.\n */\nexport function CircleShapeSvg({ className, flip = \"none\" }: ShapeSvgProps) {\n  const reduceMotion = useReducedMotion()\n\n  return (\n    <svg\n      className={frameSvgClassName(flip, className)}\n      fill=\"none\"\n      viewBox=\"0 0 2400 1000\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title>Circular shape</title>\n      <motion.circle\n        {...strokeDrawProps(reduceMotion, 0)}\n        cx={1200}\n        cy={500}\n        r={498}\n        stroke=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\n/**\n * Shape: horizontal ellipse / oval.\n */\nexport function EllipseShapeSvg({ className, flip = \"none\" }: ShapeSvgProps) {\n  const reduceMotion = useReducedMotion()\n\n  return (\n    <svg\n      className={frameSvgClassName(flip, className)}\n      fill=\"none\"\n      viewBox=\"0 0 2400 800\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title>Horizontal ellipse shape</title>\n      <motion.ellipse\n        {...strokeDrawProps(reduceMotion, 0)}\n        cx={1200}\n        cy={400}\n        rx={1000}\n        ry={398}\n        stroke=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\n/**\n * Panel: semicircle / D-shape — flat left side, arc on the right. Flip horizontally for the opposite.\n */\nexport function SemicircleShapeSvg({\n  className,\n  flip = \"none\",\n}: ShapeSvgProps) {\n  const reduceMotion = useReducedMotion()\n\n  return (\n    <svg\n      className={frameSvgClassName(flip, className)}\n      fill=\"none\"\n      viewBox=\"0 0 2400 1000\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title>Semicircle D-shape with flat left edge</title>\n      <motion.path\n        {...strokeDrawProps(reduceMotion, 0)}\n        d=\"M1 2H1200A498 498 0 0 1 1200 998H1Z\"\n        stroke=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  TRIANGLE VARIANTS                                                 */\n/* ------------------------------------------------------------------ */\n\n/**\n * Shape: right triangle — right angle at bottom-left, hypotenuse from top-left to bottom-right.\n */\nexport function RightTriangleShapeSvg({\n  className,\n  flip = \"none\",\n}: ShapeSvgProps) {\n  const reduceMotion = useReducedMotion()\n\n  return (\n    <svg\n      className={frameSvgClassName(flip, className)}\n      fill=\"none\"\n      viewBox=\"0 0 2400 1000\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title>Right triangle shape</title>\n      <motion.path\n        {...strokeDrawProps(reduceMotion, 0)}\n        d=\"M2 2L2398 998H2Z\"\n        stroke=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\n/**\n * Shape: kite — diamond variant, taller above center than below.\n * Top vertex at y=2, bottom at y=750, left/right at y=350.\n */\nexport function KiteShapeSvg({ className, flip = \"none\" }: ShapeSvgProps) {\n  const reduceMotion = useReducedMotion()\n\n  return (\n    <svg\n      className={frameSvgClassName(flip, className)}\n      fill=\"none\"\n      viewBox=\"0 0 2400 1000\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title>Kite shape</title>\n      <motion.path\n        {...strokeDrawProps(reduceMotion, 0)}\n        d=\"M1200 2L1700 400L1200 998L700 400Z\"\n        stroke=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\n/**\n * Shape: pennant / tapered flag — rectangle on the left that tapers to a point on the right.\n */\nexport function PennantShapeSvg({ className, flip = \"none\" }: ShapeSvgProps) {\n  const reduceMotion = useReducedMotion()\n\n  return (\n    <svg\n      className={frameSvgClassName(flip, className)}\n      fill=\"none\"\n      viewBox=\"0 0 2400 600\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title>Pennant flag shape tapering to a point</title>\n      <motion.path\n        {...strokeDrawProps(reduceMotion, 0)}\n        d=\"M1 1H1800L2399 300L1800 599H1Z\"\n        stroke=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  ROUNDED VARIANTS                                                  */\n/* ------------------------------------------------------------------ */\n\n/**\n * Shape: rounded square — uniform large corner radius (rx=80).\n */\nexport function RoundedSquareShapeSvg({\n  className,\n  flip = \"none\",\n}: ShapeSvgProps) {\n  const reduceMotion = useReducedMotion()\n\n  return (\n    <svg\n      className={frameSvgClassName(flip, className)}\n      fill=\"none\"\n      viewBox=\"0 0 2400 900\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title>Rounded square shape</title>\n      <motion.rect\n        {...strokeDrawProps(reduceMotion, 0)}\n        fill=\"none\"\n        height={898}\n        rx={80}\n        stroke=\"currentColor\"\n        width={2398}\n        x={1}\n        y={1}\n      />\n    </svg>\n  )\n}\n\n/**\n * Shape: rounded triangle — equilateral triangle with heavily rounded corners (~60px radius beziers).\n */\nexport function RoundedTriangleShapeSvg({\n  className,\n  flip = \"none\",\n}: ShapeSvgProps) {\n  const reduceMotion = useReducedMotion()\n  // Equilateral triangle vertices: top center, bottom-left, bottom-right\n  // With corner softening via cubic beziers (radius ~80px)\n  return (\n    <svg\n      className={frameSvgClassName(flip, className)}\n      fill=\"none\"\n      viewBox=\"0 0 2400 1000\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title>Rounded triangle shape</title>\n      <motion.path\n        {...strokeDrawProps(reduceMotion, 0)}\n        d=\"M1200 42\n         C1210 22 1220 12 1240 32\n         L2340 940\n         C2360 970 2355 988 2330 988\n         H70\n         C45 988 40 970 60 940\n         L1160 32\n         C1180 12 1190 22 1200 42Z\"\n        stroke=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\n/**\n * Shape: squircle / superellipse — the iOS icon shape, between a circle and a rounded square.\n * Uses cubic beziers to approximate a superellipse (n≈4).\n */\nexport function SquircleShapeSvg({ className, flip = \"none\" }: ShapeSvgProps) {\n  // Centered at 1200,450 with ~440px half-width and ~440px half-height\n  // Superellipse approximation: control points at ~85% of the half-dimension\n  const cx = 1200\n  const cy = 450\n  const hw = 440 // half width\n  const hh = 440 // half height\n  const k = 0.85 // control point ratio (higher = more square)\n\n  const t = cy - hh\n  const b = cy + hh\n  const l = cx - hw\n  const r = cx + hw\n  const kw = hw * k\n  const kh = hh * k\n  const reduceMotion = useReducedMotion()\n\n  return (\n    <svg\n      className={frameSvgClassName(flip, className)}\n      fill=\"none\"\n      viewBox=\"0 0 2400 900\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title>Squircle superellipse shape</title>\n      <motion.path\n        {...strokeDrawProps(reduceMotion, 0)}\n        d={`M${cx} ${t}\n            C${cx + kw} ${t} ${r} ${cy - kh} ${r} ${cy}\n            C${r} ${cy + kh} ${cx + kw} ${b} ${cx} ${b}\n            C${cx - kw} ${b} ${l} ${cy + kh} ${l} ${cy}\n            C${l} ${cy - kh} ${cx - kw} ${t} ${cx} ${t}Z`}\n        stroke=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  ARCHITECTURAL                                                     */\n/* ------------------------------------------------------------------ */\n\n/**\n * Panel: gothic / pointed arch — rectangular body with a pointed arch top (two curved sides meeting at a peak).\n */\nexport function GothicArchPanelSvg({\n  className,\n  flip = \"none\",\n}: ShapeSvgProps) {\n  const reduceMotion = useReducedMotion()\n\n  return (\n    <svg\n      className={frameSvgClassName(flip, className)}\n      fill=\"none\"\n      viewBox=\"0 0 2400 1200\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title>Gothic pointed arch panel</title>\n      <motion.path\n        {...strokeDrawProps(reduceMotion, 0)}\n        d=\"M1 1199V500\n         C1 200 600 2 1200 2\n         C1800 2 2399 200 2399 500\n         V1199H1Z\"\n        stroke=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\n/**\n * Shape: quarter circle / fan — a 90° wedge anchored at bottom-left corner.\n */\nexport function QuarterCircleShapeSvg({\n  className,\n  flip = \"none\",\n}: ShapeSvgProps) {\n  const reduceMotion = useReducedMotion()\n\n  return (\n    <svg\n      className={frameSvgClassName(flip, className)}\n      fill=\"none\"\n      viewBox=\"0 0 2400 1000\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title>Quarter circle fan wedge</title>\n      <motion.path\n        {...strokeDrawProps(reduceMotion, 0)}\n        d=\"M2 998V2A996 996 0 0 1 998 998Z\"\n        stroke=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  COMPOUND                                                          */\n/* ------------------------------------------------------------------ */\n\n/**\n * Shape: arrow / pentagon — flat left edge, pointed right edge. Like a flowchart arrow block.\n */\nexport function ArrowPentagonShapeSvg({\n  className,\n  flip = \"none\",\n}: ShapeSvgProps) {\n  const reduceMotion = useReducedMotion()\n\n  return (\n    <svg\n      className={frameSvgClassName(flip, className)}\n      fill=\"none\"\n      viewBox=\"0 0 2400 600\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title>Arrow pentagon shape</title>\n      <motion.path\n        {...strokeDrawProps(reduceMotion, 0)}\n        d=\"M1 1H2000L2399 300L2000 599H1Z\"\n        stroke=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\n/**\n * Shape: diamond / rhombus — all four sides diagonal, vertices at edge midpoints.\n */\nexport function DiamondShapeSvg({ className, flip = \"none\" }: ShapeSvgProps) {\n  const reduceMotion = useReducedMotion()\n\n  return (\n    <svg\n      className={frameSvgClassName(flip, className)}\n      fill=\"none\"\n      viewBox=\"0 0 2400 1000\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title>Diamond rhombus shape</title>\n      <motion.path\n        {...strokeDrawProps(reduceMotion, 0)}\n        d=\"M1200 2L2398 500L1200 998L2 500Z\"\n        stroke=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\n/**\n * Shape: trapezoid — wider at base, narrower at top. Symmetric inset of 300px per side.\n */\nexport function TrapezoidShapeSvg({ className, flip = \"none\" }: ShapeSvgProps) {\n  const reduceMotion = useReducedMotion()\n\n  return (\n    <svg\n      className={frameSvgClassName(flip, className)}\n      fill=\"none\"\n      viewBox=\"0 0 2400 900\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title>Trapezoid shape wider at base</title>\n      <motion.path\n        {...strokeDrawProps(reduceMotion, 0)}\n        d=\"M1 899H2399L2099 1H301Z\"\n        stroke=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\n/**\n * Shape: regular octagon — all eight corners clipped equally (200px legs).\n */\nexport function OctagonShapeSvg({ className, flip = \"none\" }: ShapeSvgProps) {\n  const reduceMotion = useReducedMotion()\n\n  return (\n    <svg\n      className={frameSvgClassName(flip, className)}\n      fill=\"none\"\n      viewBox=\"0 0 2400 1000\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title>Octagonal shape</title>\n      <motion.path\n        {...strokeDrawProps(reduceMotion, 0)}\n        d=\"M201 2H2199L2398 201V799L2199 998H201L2 799V201Z\"\n        stroke=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\n/**\n * Shape: parallelogram — sheared rectangle, offset 200px at top.\n */\nexport function ParallelogramShapeSvg({\n  className,\n  flip = \"none\",\n}: ShapeSvgProps) {\n  const reduceMotion = useReducedMotion()\n\n  return (\n    <svg\n      className={frameSvgClassName(flip, className)}\n      fill=\"none\"\n      viewBox=\"0 0 2400 800\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title>Parallelogram shape with softened corners</title>\n      <motion.path\n        {...strokeDrawProps(reduceMotion, 0)}\n        d=\"M1 799L195 7C197 4 199 2 203 2H2393C2396 2 2398 4 2399 7L2205 793C2203 796 2201 799 2197 799H7C4 799 2 797 1 793Z\"\n        stroke=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\n/**\n * Panel: ribbon / banner — flat top and bottom with inward V-notches on both short ends (100px depth).\n */\nexport function RibbonBannerShapeSvg({\n  className,\n  flip = \"none\",\n}: ShapeSvgProps) {\n  const reduceMotion = useReducedMotion()\n\n  return (\n    <svg\n      className={frameSvgClassName(flip, className)}\n      fill=\"none\"\n      viewBox=\"0 0 2400 400\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title>Ribbon banner with softened end notches</title>\n      <motion.path\n        {...strokeDrawProps(reduceMotion, 0)}\n        d=\"M1 1H2399L2294 194C2292 197 2292 200 2292 200C2292 200 2292 203 2294 206L2399 399H1L106 206C108 203 108 200 108 200C108 200 108 197 106 194L1 1Z\"\n        stroke=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\n/**\n * Panel: hourglass / bowtie — full width at top and bottom, pinched waist at center (800px wide).\n */\nexport function HourglassBowtiePanelSvg({\n  className,\n  flip = \"none\",\n}: ShapeSvgProps) {\n  const reduceMotion = useReducedMotion()\n\n  return (\n    <svg\n      className={frameSvgClassName(flip, className)}\n      fill=\"none\"\n      viewBox=\"0 0 2400 1000\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title>Hourglass panel with softened waist</title>\n      <motion.path\n        {...strokeDrawProps(reduceMotion, 0)}\n        d=\"M1 1H2399L1606 494C1603 497 1601 500 1603 503L2399 999H1L797 503C800 500 798 497 797 494L1 1Z\"\n        stroke=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\n/**\n * Panel: scalloped top — twelve semicircular bumps along the top edge (r=100), flat bottom.\n */\nexport function ScallopedTopPanelSvg({\n  className,\n  flip = \"none\",\n}: ShapeSvgProps) {\n  const reduceMotion = useReducedMotion()\n\n  return (\n    <svg\n      className={frameSvgClassName(flip, className)}\n      fill=\"none\"\n      viewBox=\"0 0 2400 900\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title>Rectangular panel with scalloped top edge</title>\n      <motion.path\n        {...strokeDrawProps(reduceMotion, 0)}\n        d=\"M1 899V101A100 100 0 0 1 200 101A100 100 0 0 1 400 101A100 100 0 0 1 600 101A100 100 0 0 1 800 101A100 100 0 0 1 1000 101A100 100 0 0 1 1200 101A100 100 0 0 1 1400 101A100 100 0 0 1 1600 101A100 100 0 0 1 1800 101A100 100 0 0 1 2000 101A100 100 0 0 1 2200 101A100 100 0 0 1 2399 101V899H1Z\"\n        stroke=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\n/**\n * Shape: rounded rectangle with a large concave quarter-circle bite at the bottom-right (badge cutout).\n */\nexport function RoundedRectCornerBiteShapeSvg({\n  className,\n  flip = \"none\",\n}: ShapeSvgProps) {\n  const reduceMotion = useReducedMotion()\n\n  return (\n    <svg\n      className={frameSvgClassName(flip, className)}\n      fill=\"none\"\n      viewBox=\"0 0 2400 900\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title>Rounded rectangle with bottom-right circular bite</title>\n      <motion.path\n        {...strokeDrawProps(reduceMotion, 0)}\n        d=\"M31 1H2369C2386 1 2399 14 2399 31V699A200 200 0 0 0 2199 899H31C14 899 1 886 1 869V31C1 14 14 1 31 1Z\"\n        stroke=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\n/**\n * Shape: HUD-style outer rectangle with twin softened V-notches on the top and stepped side walls.\n */\nexport function DoubleNotchTechShapeSvg({\n  className,\n  flip = \"none\",\n}: ShapeSvgProps) {\n  const reduceMotion = useReducedMotion()\n\n  return (\n    <svg\n      className={frameSvgClassName(flip, className)}\n      fill=\"none\"\n      viewBox=\"0 0 2400 1000\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title>Tech shape with double top notches and side steps</title>\n      <motion.path\n        {...strokeDrawProps(reduceMotion, 0)}\n        d=\"M6 1H556C558 1 560 2 561 4L596 46C598 49 602 49 604 46L639 4C640 2 642 1 644 1H1756C1758 1 1760 2 1761 4L1796 46C1798 49 1802 49 1804 46L1839 4C1840 2 1842 1 1844 1H2394C2397 1 2399 3 2399 6V244C2399 247 2397 250 2394 250H2366C2363 250 2361 252 2361 255V745C2361 748 2363 750 2366 750H2394C2397 750 2399 752 2399 756V994C2399 997 2397 999 2394 999H6C3 999 1 997 1 994V756C1 752 3 750 6 750H34C37 750 39 748 39 745V255C39 252 37 250 34 250H6C3 250 1 247 1 244V6C1 3 3 1 6 1Z\"\n        stroke=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\n/**\n * Panel: ogee / onion dome — rectangular body plus mirrored S-curved arch to a top peak.\n */\nexport function OgeeOnionDomePanelSvg({\n  className,\n  flip = \"none\",\n}: ShapeSvgProps) {\n  const reduceMotion = useReducedMotion()\n\n  return (\n    <svg\n      className={frameSvgClassName(flip, className)}\n      fill=\"none\"\n      viewBox=\"0 0 2400 1200\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title>Ogee arch panel with pointed crest</title>\n      <motion.path\n        {...strokeDrawProps(reduceMotion, 0)}\n        d=\"M1 1199V400C1 280 300 180 600 80C900 -20 1100 2 1200 2C1300 2 1500 -20 1800 80C2100 180 2399 280 2399 400V1199H1Z\"\n        stroke=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\n/**\n * Shape: chevron / arrow — horizontal band with pointed right end and notched left end.\n */\nexport function ChevronShapeSvg({ className, flip = \"none\" }: ShapeSvgProps) {\n  const reduceMotion = useReducedMotion()\n\n  return (\n    <svg\n      className={frameSvgClassName(flip, className)}\n      fill=\"none\"\n      viewBox=\"0 0 2400 600\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title>Chevron arrow shape</title>\n      <motion.path\n        {...strokeDrawProps(reduceMotion, 0)}\n        d=\"M1 1H2100L2399 300L2100 599H1L300 300Z\"\n        stroke=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\n/**\n * Shape: cross / plus — equal-armed cross shape, arms 33% of total width/height.\n */\nexport function CrossShapeSvg({ className, flip = \"none\" }: ShapeSvgProps) {\n  const reduceMotion = useReducedMotion()\n\n  return (\n    <svg\n      className={frameSvgClassName(flip, className)}\n      fill=\"none\"\n      viewBox=\"0 0 2400 1000\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title>Cross plus shape</title>\n      <motion.path\n        {...strokeDrawProps(reduceMotion, 0)}\n        d=\"M800 2H1600V333H2398V667H1600V998H800V667H2V333H800Z\"\n        stroke=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\n/**\n * Panel: pill / stadium — fully rounded rectangle with semicircular ends on left and right.\n */\nexport function PillShapeSvg({ className, flip = \"none\" }: ShapeSvgProps) {\n  const reduceMotion = useReducedMotion()\n\n  return (\n    <svg\n      className={frameSvgClassName(flip, className)}\n      fill=\"none\"\n      viewBox=\"0 0 2400 800\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title>Pill or stadium rounded rectangle shape</title>\n      <motion.path\n        {...strokeDrawProps(reduceMotion, 0)}\n        d=\"M400 2H2000A398 398 0 0 1 2000 798H400A398 398 0 0 1 400 2Z\"\n        stroke=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\n/**\n * Panel: inverted arch — flat top, concave arc on bottom edge.\n */\nexport function InvertedArchPanelSvg({\n  className,\n  flip = \"none\",\n}: ShapeSvgProps) {\n  const reduceMotion = useReducedMotion()\n\n  return (\n    <svg\n      className={frameSvgClassName(flip, className)}\n      fill=\"none\"\n      viewBox=\"0 0 2400 1000\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title>Inverted arch panel with concave bottom</title>\n      <motion.path\n        {...strokeDrawProps(reduceMotion, 0)}\n        d=\"M1 1H2399V700A1200 300 0 0 1 1 700Z\"\n        stroke=\"currentColor\"\n      />\n    </svg>\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  SACRED GEOMETRY                                                  */\n/* ------------------------------------------------------------------ */\n\n/* ------------------------------------------------------------------ */\n/*  1. Vesica Piscis                                                  */\n/*  Two overlapping circles whose intersection forms an almond shape. */\n/* ------------------------------------------------------------------ */\n\nexport function VesicaPiscisSvg({ className, flip = \"none\" }: ShapeSvgProps) {\n  const cx = 1200\n  const cy = 500\n  const r = 300\n  const offset = r / 2 // circles overlap by one radius\n  const reduceMotion = useReducedMotion()\n\n  return (\n    <svg\n      className={lineArtShapeSvgClassName(flip, className)}\n      fill=\"none\"\n      viewBox=\"0 0 2400 1000\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title>Vesica Piscis — two overlapping circles</title>\n      <motion.circle\n        cx={cx - offset}\n        cy={cy}\n        initial={{ pathLength: reduceMotion ? 1 : 0 }}\n        r={r}\n        stroke=\"currentColor\"\n        transition={sacredStrokeTransition(reduceMotion, 0)}\n        viewport={SACRED_IN_VIEW}\n        whileInView={{ pathLength: 1 }}\n      />\n      <motion.circle\n        cx={cx + offset}\n        cy={cy}\n        initial={{ pathLength: reduceMotion ? 1 : 0 }}\n        r={r}\n        stroke=\"currentColor\"\n        transition={sacredStrokeTransition(reduceMotion, 1)}\n        viewport={SACRED_IN_VIEW}\n        whileInView={{ pathLength: 1 }}\n      />\n    </svg>\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  2. Seed of Life                                                   */\n/*  Seven circles: one center + six surrounding at 60° intervals.     */\n/* ------------------------------------------------------------------ */\n\nexport function SeedOfLifeSvg({ className, flip = \"none\" }: ShapeSvgProps) {\n  const cx = 1200\n  const cy = 500\n  const r = 200\n  const reduceMotion = useReducedMotion()\n\n  const petals = Array.from({ length: 6 }, (_, i) => {\n    const angle = (i * 60 * Math.PI) / 180\n    return { x: cx + r * Math.cos(angle), y: cy + r * Math.sin(angle) }\n  })\n\n  return (\n    <svg\n      className={lineArtShapeSvgClassName(flip, className)}\n      fill=\"none\"\n      viewBox=\"0 0 2400 1000\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title>Seed of Life — seven overlapping circles</title>\n      <motion.circle\n        cx={cx}\n        cy={cy}\n        initial={{ pathLength: reduceMotion ? 1 : 0 }}\n        r={r}\n        stroke=\"currentColor\"\n        transition={sacredStrokeTransition(reduceMotion, 0)}\n        viewport={SACRED_IN_VIEW}\n        whileInView={{ pathLength: 1 }}\n      />\n      {petals.map((p, i) => (\n        <motion.circle\n          cx={p.x}\n          cy={p.y}\n          initial={{ pathLength: reduceMotion ? 1 : 0 }}\n          key={`seed-petal-${p.x}-${p.y}`}\n          r={r}\n          stroke=\"currentColor\"\n          transition={sacredStrokeTransition(reduceMotion, i + 1)}\n          viewport={SACRED_IN_VIEW}\n          whileInView={{ pathLength: 1 }}\n        />\n      ))}\n    </svg>\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  3. Flower of Life                                                 */\n/*  19 circles: Seed of Life + 12 outer petals on second ring.        */\n/* ------------------------------------------------------------------ */\n\nexport function FlowerOfLifeSvg({ className, flip = \"none\" }: ShapeSvgProps) {\n  const cx = 1200\n  const cy = 500\n  const r = 150\n\n  // Ring 1: 6 circles at distance r\n  const ring1 = Array.from({ length: 6 }, (_, i) => {\n    const angle = (i * 60 * Math.PI) / 180\n    return { x: cx + r * Math.cos(angle), y: cy + r * Math.sin(angle) }\n  })\n\n  // Ring 2: 6 circles at distance 2r (aligned) + 6 at distance r√3 (offset 30°)\n  const ring2a = Array.from({ length: 6 }, (_, i) => {\n    const angle = (i * 60 * Math.PI) / 180\n    return { x: cx + 2 * r * Math.cos(angle), y: cy + 2 * r * Math.sin(angle) }\n  })\n  const ring2b = Array.from({ length: 6 }, (_, i) => {\n    const angle = ((i * 60 + 30) * Math.PI) / 180\n    const d = r * Math.sqrt(3)\n    return { x: cx + d * Math.cos(angle), y: cy + d * Math.sin(angle) }\n  })\n\n  const allCircles = [{ x: cx, y: cy }, ...ring1, ...ring2a, ...ring2b]\n\n  // Bounding circle\n  const outerR = 2 * r + r * 0.15\n  const reduceMotion = useReducedMotion()\n\n  return (\n    <svg\n      className={lineArtShapeSvgClassName(flip, className)}\n      fill=\"none\"\n      viewBox=\"0 0 2400 1000\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title>Flower of Life — 19 overlapping circles</title>\n      <motion.circle\n        cx={cx}\n        cy={cy}\n        initial={{ pathLength: reduceMotion ? 1 : 0 }}\n        r={outerR}\n        stroke=\"currentColor\"\n        transition={sacredStrokeTransition(reduceMotion, 0)}\n        viewport={SACRED_IN_VIEW}\n        whileInView={{ pathLength: 1 }}\n      />\n      {allCircles.map((p, i) => (\n        <motion.circle\n          cx={p.x}\n          cy={p.y}\n          initial={{ pathLength: reduceMotion ? 1 : 0 }}\n          key={`fol-${p.x}-${p.y}`}\n          r={r}\n          stroke=\"currentColor\"\n          transition={sacredStrokeTransition(reduceMotion, i + 1)}\n          viewport={SACRED_IN_VIEW}\n          whileInView={{ pathLength: 1 }}\n        />\n      ))}\n    </svg>\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  4. Metatron's Cube                                                */\n/*  13 circles (Fruit of Life) connected by straight lines.           */\n/* ------------------------------------------------------------------ */\n\nexport function MetatronsCubeSvg({ className, flip = \"none\" }: ShapeSvgProps) {\n  const cx = 1200\n  const cy = 500\n  const r = 60\n  const ringR = 200\n\n  // Center + ring 1 (6) + ring 2 (6)\n  const center = { x: cx, y: cy }\n  const ring1 = Array.from({ length: 6 }, (_, i) => {\n    const angle = (i * 60 * Math.PI) / 180 - Math.PI / 2\n    return { x: cx + ringR * Math.cos(angle), y: cy + ringR * Math.sin(angle) }\n  })\n  const ring2 = Array.from({ length: 6 }, (_, i) => {\n    const angle = (i * 60 * Math.PI) / 180 - Math.PI / 2\n    return {\n      x: cx + 2 * ringR * Math.cos(angle),\n      y: cy + 2 * ringR * Math.sin(angle),\n    }\n  })\n\n  const nodes = [center, ...ring1, ...ring2]\n\n  // Connect every node to every other node\n  const lines: { x1: number; y1: number; x2: number; y2: number }[] = []\n  for (let i = 0; i < nodes.length; i++) {\n    for (let j = i + 1; j < nodes.length; j++) {\n      lines.push({\n        x1: nodes[i].x,\n        y1: nodes[i].y,\n        x2: nodes[j].x,\n        y2: nodes[j].y,\n      })\n    }\n  }\n\n  const reduceMotion = useReducedMotion()\n\n  return (\n    <svg\n      className={lineArtShapeSvgClassName(flip, className)}\n      fill=\"none\"\n      viewBox=\"0 0 2400 1000\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title>Metatron&apos;s Cube — 13 circles connected by lines</title>\n      {lines.map((l, i) => (\n        <motion.line\n          initial={{ pathLength: reduceMotion ? 1 : 0 }}\n          key={`mline-${l.x1}-${l.y1}-${l.x2}-${l.y2}`}\n          stroke=\"currentColor\"\n          strokeOpacity={0.5}\n          transition={sacredStrokeTransition(reduceMotion, i, 0.45)}\n          viewport={SACRED_IN_VIEW}\n          whileInView={{ pathLength: 1 }}\n          x1={l.x1}\n          x2={l.x2}\n          y1={l.y1}\n          y2={l.y2}\n        />\n      ))}\n      {nodes.map((n, i) => (\n        <motion.circle\n          cx={n.x}\n          cy={n.y}\n          initial={{ pathLength: reduceMotion ? 1 : 0 }}\n          key={`mnode-${n.x}-${n.y}`}\n          r={r}\n          stroke=\"currentColor\"\n          transition={sacredStrokeTransition(\n            reduceMotion,\n            lines.length + i,\n            0.55\n          )}\n          viewport={SACRED_IN_VIEW}\n          whileInView={{ pathLength: 1 }}\n        />\n      ))}\n    </svg>\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  5. Sri Yantra                                                     */\n/*  9 interlocking triangles (4 up, 5 down) inside concentric rings.  */\n/* ------------------------------------------------------------------ */\n\nexport function SriYantraSvg({ className, flip = \"none\" }: ShapeSvgProps) {\n  const cx = 1200\n  const cy = 500\n\n  // Simplified Sri Yantra: 4 upward triangles + 5 downward triangles\n  // Heights are canonical proportions (normalized to outer radius 320)\n  const outerR = 320\n\n  // Upward-pointing triangles (apex at top): base y, apex y\n  const upTriangles = [\n    { baseY: cy + 280, apexY: cy - 310, halfW: 310 },\n    { baseY: cy + 220, apexY: cy - 240, halfW: 250 },\n    { baseY: cy + 140, apexY: cy - 160, halfW: 175 },\n    { baseY: cy + 70, apexY: cy - 80, halfW: 100 },\n  ]\n\n  // Downward-pointing triangles (apex at bottom)\n  const downTriangles = [\n    { baseY: cy - 280, apexY: cy + 310, halfW: 310 },\n    { baseY: cy - 230, apexY: cy + 250, halfW: 260 },\n    { baseY: cy - 170, apexY: cy + 180, halfW: 195 },\n    { baseY: cy - 110, apexY: cy + 110, halfW: 135 },\n    { baseY: cy - 50, apexY: cy + 50, halfW: 70 },\n  ]\n\n  const reduceMotion = useReducedMotion()\n  let sriStagger = 0\n\n  return (\n    <svg\n      className={lineArtShapeSvgClassName(flip, className)}\n      fill=\"none\"\n      viewBox=\"0 0 2400 1000\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title>Sri Yantra — nine interlocking triangles</title>\n      {/* Outer circles */}\n      <motion.circle\n        cx={cx}\n        cy={cy}\n        initial={{ pathLength: reduceMotion ? 1 : 0 }}\n        r={outerR + 20}\n        stroke=\"currentColor\"\n        transition={sacredStrokeTransition(reduceMotion, sriStagger++)}\n        viewport={SACRED_IN_VIEW}\n        whileInView={{ pathLength: 1 }}\n      />\n      <motion.circle\n        cx={cx}\n        cy={cy}\n        initial={{ pathLength: reduceMotion ? 1 : 0 }}\n        r={outerR + 35}\n        stroke=\"currentColor\"\n        transition={sacredStrokeTransition(reduceMotion, sriStagger++)}\n        viewport={SACRED_IN_VIEW}\n        whileInView={{ pathLength: 1 }}\n      />\n\n      {/* Upward triangles */}\n      {upTriangles.map((t) => (\n        <motion.polygon\n          fill=\"none\"\n          initial={{ pathLength: reduceMotion ? 1 : 0 }}\n          key={`sri-up-${t.baseY}-${t.apexY}-${t.halfW}`}\n          points={`${cx},${t.apexY} ${cx - t.halfW},${t.baseY} ${cx + t.halfW},${t.baseY}`}\n          stroke=\"currentColor\"\n          transition={sacredStrokeTransition(reduceMotion, sriStagger++)}\n          viewport={SACRED_IN_VIEW}\n          whileInView={{ pathLength: 1 }}\n        />\n      ))}\n\n      {/* Downward triangles */}\n      {downTriangles.map((t) => (\n        <motion.polygon\n          fill=\"none\"\n          initial={{ pathLength: reduceMotion ? 1 : 0 }}\n          key={`sri-down-${t.baseY}-${t.apexY}-${t.halfW}`}\n          points={`${cx},${t.apexY} ${cx - t.halfW},${t.baseY} ${cx + t.halfW},${t.baseY}`}\n          stroke=\"currentColor\"\n          transition={sacredStrokeTransition(reduceMotion, sriStagger++)}\n          viewport={SACRED_IN_VIEW}\n          whileInView={{ pathLength: 1 }}\n        />\n      ))}\n\n      {/* Bindu (center dot) */}\n      <motion.circle\n        cx={cx}\n        cy={cy}\n        fill=\"currentColor\"\n        initial={{ opacity: reduceMotion ? 1 : 0 }}\n        r={4}\n        stroke=\"none\"\n        transition={\n          reduceMotion\n            ? { duration: 0 }\n            : {\n                delay: sriStagger * 0.009,\n                duration: 0.28,\n                ease: SACRED_DRAW_EASE,\n              }\n        }\n        viewport={SACRED_IN_VIEW}\n        whileInView={{ opacity: 1 }}\n      />\n    </svg>\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  6. Platonic Solids — Wireframe 2D Projections                     */\n/*  All five solids as flat orthographic projections.                  */\n/* ------------------------------------------------------------------ */\n\n/** Tetrahedron — 4 vertices, 6 edges. Projected as triangle with center. */\nexport function TetrahedronWireframeSvg({\n  className,\n  flip = \"none\",\n}: ShapeSvgProps) {\n  const cx = 1200\n  const cy = 500\n  const r = 280\n\n  // 3 outer vertices (equilateral triangle) + 1 center\n  const verts = Array.from({ length: 3 }, (_, i) => {\n    const angle = (i * 120 * Math.PI) / 180 - Math.PI / 2\n    return { x: cx + r * Math.cos(angle), y: cy + r * Math.sin(angle) }\n  })\n  const center = { x: cx, y: cy }\n  const reduceMotion = useReducedMotion()\n\n  return (\n    <svg\n      className={lineArtShapeSvgClassName(flip, className)}\n      fill=\"none\"\n      viewBox=\"0 0 2400 1000\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title>Tetrahedron wireframe projection</title>\n      {/* Outer triangle */}\n      <motion.polygon\n        fill=\"none\"\n        initial={{ pathLength: reduceMotion ? 1 : 0 }}\n        points={verts.map((v) => `${v.x},${v.y}`).join(\" \")}\n        stroke=\"currentColor\"\n        transition={sacredStrokeTransition(reduceMotion, 0)}\n        viewport={SACRED_IN_VIEW}\n        whileInView={{ pathLength: 1 }}\n      />\n      {/* Lines from center to each vertex */}\n      {verts.map((v, i) => (\n        <motion.line\n          initial={{ pathLength: reduceMotion ? 1 : 0 }}\n          key={`tetra-spoke-${v.x}-${v.y}`}\n          stroke=\"currentColor\"\n          transition={sacredStrokeTransition(reduceMotion, i + 1)}\n          viewport={SACRED_IN_VIEW}\n          whileInView={{ pathLength: 1 }}\n          x1={center.x}\n          x2={v.x}\n          y1={center.y}\n          y2={v.y}\n        />\n      ))}\n    </svg>\n  )\n}\n\n/** Cube (Hexahedron) — projected as nested squares rotated 45°. */\nexport function CubeWireframeSvg({ className, flip = \"none\" }: ShapeSvgProps) {\n  const cx = 1200\n  const cy = 500\n  const outer = 260\n  const inner = 150\n\n  const outerVerts = Array.from({ length: 4 }, (_, i) => {\n    const angle = (i * 90 * Math.PI) / 180 - Math.PI / 4\n    return { x: cx + outer * Math.cos(angle), y: cy + outer * Math.sin(angle) }\n  })\n  const innerVerts = Array.from({ length: 4 }, (_, i) => {\n    const angle = (i * 90 * Math.PI) / 180\n    return { x: cx + inner * Math.cos(angle), y: cy + inner * Math.sin(angle) }\n  })\n\n  const reduceMotion = useReducedMotion()\n\n  return (\n    <svg\n      className={lineArtShapeSvgClassName(flip, className)}\n      fill=\"none\"\n      viewBox=\"0 0 2400 1000\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title>Cube wireframe projection</title>\n      <motion.polygon\n        fill=\"none\"\n        initial={{ pathLength: reduceMotion ? 1 : 0 }}\n        points={outerVerts.map((v) => `${v.x},${v.y}`).join(\" \")}\n        stroke=\"currentColor\"\n        transition={sacredStrokeTransition(reduceMotion, 0)}\n        viewport={SACRED_IN_VIEW}\n        whileInView={{ pathLength: 1 }}\n      />\n      <motion.polygon\n        fill=\"none\"\n        initial={{ pathLength: reduceMotion ? 1 : 0 }}\n        points={innerVerts.map((v) => `${v.x},${v.y}`).join(\" \")}\n        stroke=\"currentColor\"\n        transition={sacredStrokeTransition(reduceMotion, 1)}\n        viewport={SACRED_IN_VIEW}\n        whileInView={{ pathLength: 1 }}\n      />\n      {outerVerts.map((v, i) => (\n        <motion.line\n          initial={{ pathLength: reduceMotion ? 1 : 0 }}\n          key={`cube-${v.x}-${v.y}-${innerVerts[i].x}-${innerVerts[i].y}`}\n          stroke=\"currentColor\"\n          transition={sacredStrokeTransition(reduceMotion, i + 2)}\n          viewport={SACRED_IN_VIEW}\n          whileInView={{ pathLength: 1 }}\n          x1={v.x}\n          x2={innerVerts[i].x}\n          y1={v.y}\n          y2={innerVerts[i].y}\n        />\n      ))}\n    </svg>\n  )\n}\n\n/** Octahedron — 6 vertices, projected as a square with both diagonals and a center diamond. */\nexport function OctahedronWireframeSvg({\n  className,\n  flip = \"none\",\n}: ShapeSvgProps) {\n  const cx = 1200\n  const cy = 500\n  const r = 280\n\n  // 4 equatorial vertices (square) + top + bottom\n  const eq = Array.from({ length: 4 }, (_, i) => {\n    const angle = (i * 90 * Math.PI) / 180\n    return { x: cx + r * Math.cos(angle), y: cy + r * Math.sin(angle) }\n  })\n  const top = { x: cx, y: cy - r }\n  const bottom = { x: cx, y: cy + r }\n  const reduceMotion = useReducedMotion()\n\n  return (\n    <svg\n      className={lineArtShapeSvgClassName(flip, className)}\n      fill=\"none\"\n      viewBox=\"0 0 2400 1000\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title>Octahedron wireframe projection</title>\n      {/* Equatorial square */}\n      <motion.polygon\n        fill=\"none\"\n        initial={{ pathLength: reduceMotion ? 1 : 0 }}\n        points={eq.map((v) => `${v.x},${v.y}`).join(\" \")}\n        stroke=\"currentColor\"\n        transition={sacredStrokeTransition(reduceMotion, 0)}\n        viewport={SACRED_IN_VIEW}\n        whileInView={{ pathLength: 1 }}\n      />\n      {/* Edges from top and bottom to each equatorial vertex */}\n      {eq.map((v, i) => (\n        <g key={`oct-eq-${v.x}-${v.y}`}>\n          <motion.line\n            initial={{ pathLength: reduceMotion ? 1 : 0 }}\n            stroke=\"currentColor\"\n            transition={sacredStrokeTransition(reduceMotion, 1 + i * 2)}\n            viewport={SACRED_IN_VIEW}\n            whileInView={{ pathLength: 1 }}\n            x1={top.x}\n            x2={v.x}\n            y1={top.y}\n            y2={v.y}\n          />\n          <motion.line\n            initial={{ pathLength: reduceMotion ? 1 : 0 }}\n            stroke=\"currentColor\"\n            transition={sacredStrokeTransition(reduceMotion, 2 + i * 2)}\n            viewport={SACRED_IN_VIEW}\n            whileInView={{ pathLength: 1 }}\n            x1={bottom.x}\n            x2={v.x}\n            y1={bottom.y}\n            y2={v.y}\n          />\n        </g>\n      ))}\n    </svg>\n  )\n}\n\n/** Icosahedron — 12 vertices, 30 edges. Simplified front-face projection. */\nexport function IcosahedronWireframeSvg({\n  className,\n  flip = \"none\",\n}: ShapeSvgProps) {\n  const cx = 1200\n  const cy = 500\n  const outerR = 280\n  const innerR = 130\n\n  // Outer ring of 5 vertices + inner ring of 5 (rotated 36°) + top + bottom\n  const outer = Array.from({ length: 5 }, (_, i) => {\n    const angle = (i * 72 * Math.PI) / 180 - Math.PI / 2\n    return {\n      x: cx + outerR * Math.cos(angle),\n      y: cy + outerR * Math.sin(angle),\n    }\n  })\n  const inner = Array.from({ length: 5 }, (_, i) => {\n    const angle = ((i * 72 + 36) * Math.PI) / 180 - Math.PI / 2\n    return {\n      x: cx + innerR * Math.cos(angle),\n      y: cy + innerR * Math.sin(angle),\n    }\n  })\n  const top = { x: cx, y: cy - outerR - 20 }\n  const bottom = { x: cx, y: cy + outerR + 20 }\n  const reduceMotion = useReducedMotion()\n  let icoStagger = 0\n\n  return (\n    <svg\n      className={lineArtShapeSvgClassName(flip, className)}\n      fill=\"none\"\n      viewBox=\"0 0 2400 1000\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title>Icosahedron wireframe projection</title>\n      {/* Outer pentagon */}\n      <motion.polygon\n        fill=\"none\"\n        initial={{ pathLength: reduceMotion ? 1 : 0 }}\n        points={outer.map((v) => `${v.x},${v.y}`).join(\" \")}\n        stroke=\"currentColor\"\n        transition={sacredStrokeTransition(reduceMotion, icoStagger++)}\n        viewport={SACRED_IN_VIEW}\n        whileInView={{ pathLength: 1 }}\n      />\n      {/* Inner pentagon */}\n      <motion.polygon\n        fill=\"none\"\n        initial={{ pathLength: reduceMotion ? 1 : 0 }}\n        points={inner.map((v) => `${v.x},${v.y}`).join(\" \")}\n        stroke=\"currentColor\"\n        transition={sacredStrokeTransition(reduceMotion, icoStagger++)}\n        viewport={SACRED_IN_VIEW}\n        whileInView={{ pathLength: 1 }}\n      />\n      {/* Connections outer ↔ inner */}\n      {outer.map((v, i) => (\n        <g key={`ico-pair-${v.x}-${v.y}-${inner[i].x}-${inner[i].y}`}>\n          <motion.line\n            initial={{ pathLength: reduceMotion ? 1 : 0 }}\n            stroke=\"currentColor\"\n            transition={sacredStrokeTransition(reduceMotion, icoStagger++)}\n            viewport={SACRED_IN_VIEW}\n            whileInView={{ pathLength: 1 }}\n            x1={v.x}\n            x2={inner[i].x}\n            y1={v.y}\n            y2={inner[i].y}\n          />\n          <motion.line\n            initial={{ pathLength: reduceMotion ? 1 : 0 }}\n            stroke=\"currentColor\"\n            transition={sacredStrokeTransition(reduceMotion, icoStagger++)}\n            viewport={SACRED_IN_VIEW}\n            whileInView={{ pathLength: 1 }}\n            x1={v.x}\n            x2={inner[(i + 4) % 5].x}\n            y1={v.y}\n            y2={inner[(i + 4) % 5].y}\n          />\n        </g>\n      ))}\n      {/* Top/bottom poles to outer ring */}\n      {outer.map((v, i) =>\n        i < 3 ? (\n          <motion.line\n            initial={{ pathLength: reduceMotion ? 1 : 0 }}\n            key={`ico-top-${v.x}-${v.y}`}\n            stroke=\"currentColor\"\n            transition={sacredStrokeTransition(reduceMotion, icoStagger++)}\n            viewport={SACRED_IN_VIEW}\n            whileInView={{ pathLength: 1 }}\n            x1={top.x}\n            x2={v.x}\n            y1={top.y}\n            y2={v.y}\n          />\n        ) : (\n          <motion.line\n            initial={{ pathLength: reduceMotion ? 1 : 0 }}\n            key={`ico-bot-${v.x}-${v.y}`}\n            stroke=\"currentColor\"\n            transition={sacredStrokeTransition(reduceMotion, icoStagger++)}\n            viewport={SACRED_IN_VIEW}\n            whileInView={{ pathLength: 1 }}\n            x1={bottom.x}\n            x2={v.x}\n            y1={bottom.y}\n            y2={v.y}\n          />\n        )\n      )}\n    </svg>\n  )\n}\n\n/** Dodecahedron — 20 vertices, 30 edges. Projected as nested pentagons. */\nexport function DodecahedronWireframeSvg({\n  className,\n  flip = \"none\",\n}: ShapeSvgProps) {\n  const cx = 1200\n  const cy = 500\n  const r1 = 280\n  const r2 = 180\n  const r3 = 110\n\n  const ring = (r: number, offsetDeg = 0) =>\n    Array.from({ length: 5 }, (_, i) => {\n      const angle = ((i * 72 + offsetDeg) * Math.PI) / 180 - Math.PI / 2\n      return { x: cx + r * Math.cos(angle), y: cy + r * Math.sin(angle) }\n    })\n\n  const outerRing = ring(r1, 0)\n  const midRing = ring(r2, 36)\n  const innerRing = ring(r3, 0)\n  const reduceMotion = useReducedMotion()\n  let dodeStagger = 0\n\n  return (\n    <svg\n      className={lineArtShapeSvgClassName(flip, className)}\n      fill=\"none\"\n      viewBox=\"0 0 2400 1000\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title>Dodecahedron wireframe projection</title>\n      {/* Three concentric pentagons */}\n      <motion.polygon\n        fill=\"none\"\n        initial={{ pathLength: reduceMotion ? 1 : 0 }}\n        points={outerRing.map((v) => `${v.x},${v.y}`).join(\" \")}\n        stroke=\"currentColor\"\n        transition={sacredStrokeTransition(reduceMotion, dodeStagger++)}\n        viewport={SACRED_IN_VIEW}\n        whileInView={{ pathLength: 1 }}\n      />\n      <motion.polygon\n        fill=\"none\"\n        initial={{ pathLength: reduceMotion ? 1 : 0 }}\n        points={midRing.map((v) => `${v.x},${v.y}`).join(\" \")}\n        stroke=\"currentColor\"\n        transition={sacredStrokeTransition(reduceMotion, dodeStagger++)}\n        viewport={SACRED_IN_VIEW}\n        whileInView={{ pathLength: 1 }}\n      />\n      <motion.polygon\n        fill=\"none\"\n        initial={{ pathLength: reduceMotion ? 1 : 0 }}\n        points={innerRing.map((v) => `${v.x},${v.y}`).join(\" \")}\n        stroke=\"currentColor\"\n        transition={sacredStrokeTransition(reduceMotion, dodeStagger++)}\n        viewport={SACRED_IN_VIEW}\n        whileInView={{ pathLength: 1 }}\n      />\n      {/* Connections between rings */}\n      {outerRing.map((v, i) => (\n        <g key={`dode-${v.x}-${v.y}-${midRing[i].x}-${innerRing[i].x}`}>\n          <motion.line\n            initial={{ pathLength: reduceMotion ? 1 : 0 }}\n            stroke=\"currentColor\"\n            transition={sacredStrokeTransition(reduceMotion, dodeStagger++)}\n            viewport={SACRED_IN_VIEW}\n            whileInView={{ pathLength: 1 }}\n            x1={v.x}\n            x2={midRing[i].x}\n            y1={v.y}\n            y2={midRing[i].y}\n          />\n          <motion.line\n            initial={{ pathLength: reduceMotion ? 1 : 0 }}\n            stroke=\"currentColor\"\n            transition={sacredStrokeTransition(reduceMotion, dodeStagger++)}\n            viewport={SACRED_IN_VIEW}\n            whileInView={{ pathLength: 1 }}\n            x1={v.x}\n            x2={midRing[(i + 4) % 5].x}\n            y1={v.y}\n            y2={midRing[(i + 4) % 5].y}\n          />\n          <motion.line\n            initial={{ pathLength: reduceMotion ? 1 : 0 }}\n            stroke=\"currentColor\"\n            transition={sacredStrokeTransition(reduceMotion, dodeStagger++)}\n            viewport={SACRED_IN_VIEW}\n            whileInView={{ pathLength: 1 }}\n            x1={midRing[i].x}\n            x2={innerRing[i].x}\n            y1={midRing[i].y}\n            y2={innerRing[i].y}\n          />\n        </g>\n      ))}\n    </svg>\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  7. Golden Spiral / Golden Rectangle                               */\n/*  Nested golden rectangles with quarter-circle arcs.                */\n/* ------------------------------------------------------------------ */\n\nexport function GoldenSpiralSvg({ className, flip = \"none\" }: ShapeSvgProps) {\n  const phi = (1 + Math.sqrt(5)) / 2\n\n  // Build rectangles from largest to smallest, 8 subdivisions\n  // Start: full rectangle 800×494 centered at (1200,500)\n  const totalW = 800\n  const totalH = totalW / phi\n  const startX = 1200 - totalW / 2\n  const startY = 500 - totalH / 2\n\n  // Iteratively subdivide; each step cuts a square off and the remainder is a new golden rect\n  const rects: { x: number; y: number; w: number; h: number }[] = []\n  const arcs: string[] = []\n\n  let rx = startX\n  let ry = startY\n  let rw = totalW\n  let rh = totalH\n\n  for (let i = 0; i < 9; i++) {\n    rects.push({ x: rx, y: ry, w: rw, h: rh })\n    const side = Math.min(rw, rh)\n    const dir = i % 4\n\n    // Arc goes from one corner of the square to the opposite via quarter circle\n    switch (dir) {\n      case 0: // cut square from right\n        arcs.push(\n          `M${rx + rw},${ry} A${side},${side} 0 0,1 ${rx + rw - side},${ry + side}`\n        )\n        rw -= side\n        break\n      case 1: // cut from bottom\n        arcs.push(\n          `M${rx + rw},${ry + rh} A${side},${side} 0 0,1 ${rx},${ry + rh - side}`\n        )\n        rh -= side\n        break\n      case 2: // cut from left\n        arcs.push(`M${rx},${ry + rh} A${side},${side} 0 0,1 ${rx + side},${ry}`)\n        rx += side\n        rw -= side\n        break\n      case 3: // cut from top\n        arcs.push(`M${rx},${ry} A${side},${side} 0 0,1 ${rx + rw},${ry + side}`)\n        ry += side\n        rh -= side\n        break\n      default: {\n        break\n      }\n    }\n  }\n\n  const reduceMotion = useReducedMotion()\n  const spiralPathD = arcs.join(\" \")\n\n  return (\n    <svg\n      className={lineArtShapeSvgClassName(flip, className)}\n      fill=\"none\"\n      viewBox=\"0 0 2400 1000\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title>Golden spiral within nested golden rectangles</title>\n      {/* Subdivision lines */}\n      {rects.map((rect, i) => (\n        <motion.rect\n          fill=\"none\"\n          height={rect.h}\n          initial={{ pathLength: reduceMotion ? 1 : 0 }}\n          key={`golden-rect-${rect.x}-${rect.y}-${rect.w}-${rect.h}`}\n          stroke=\"currentColor\"\n          strokeOpacity={0.4}\n          transition={sacredStrokeTransition(reduceMotion, i, 0.5)}\n          viewport={SACRED_IN_VIEW}\n          whileInView={{ pathLength: 1 }}\n          width={rect.w}\n          x={rect.x}\n          y={rect.y}\n        />\n      ))}\n      {/* Spiral arcs */}\n      <motion.path\n        d={spiralPathD}\n        initial={{ pathLength: reduceMotion ? 1 : 0 }}\n        stroke=\"currentColor\"\n        strokeWidth={1.5}\n        transition={sacredStrokeTransition(reduceMotion, rects.length, 1.35)}\n        viewport={SACRED_IN_VIEW}\n        whileInView={{ pathLength: 1 }}\n      />\n    </svg>\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  8. Torus / Tube Torus                                             */\n/*  Concentric elliptical rings creating a donut cross-section feel.  */\n/* ------------------------------------------------------------------ */\n\nexport function TorusTubeSvg({ className, flip = \"none\" }: ShapeSvgProps) {\n  const cx = 1200\n  const cy = 500\n  const majorR = 280 // distance from center to tube center\n  const tubeR = 100 // radius of the tube\n  const ringCount = 24\n\n  // Draw circles along the major ring, creating a tube torus effect\n  const circles = Array.from({ length: ringCount }, (_, i) => {\n    const angle = (i * 360 * Math.PI) / (180 * ringCount)\n    const x = cx + majorR * Math.cos(angle)\n    const y = cy + majorR * 0.35 * Math.sin(angle) // foreshortened for 3/4 view\n    // Scale radius for depth\n    const scale = 0.6 + 0.4 * Math.sin(angle)\n    return { x, y, r: tubeR * scale, opacity: 0.3 + 0.7 * scale }\n  })\n\n  const reduceMotion = useReducedMotion()\n  let torusStagger = 0\n\n  return (\n    <svg\n      className={lineArtShapeSvgClassName(flip, className)}\n      fill=\"none\"\n      viewBox=\"0 0 2400 1000\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <title>Tube torus — overlapping rings</title>\n      {/* Outer boundary ellipse */}\n      <motion.ellipse\n        cx={cx}\n        cy={cy}\n        initial={{ pathLength: reduceMotion ? 1 : 0 }}\n        rx={majorR + tubeR}\n        ry={(majorR + tubeR) * 0.4}\n        stroke=\"currentColor\"\n        strokeOpacity={0.3}\n        transition={sacredStrokeTransition(reduceMotion, torusStagger++)}\n        viewport={SACRED_IN_VIEW}\n        whileInView={{ pathLength: 1 }}\n      />\n      {/* Inner hole ellipse */}\n      <motion.ellipse\n        cx={cx}\n        cy={cy}\n        initial={{ pathLength: reduceMotion ? 1 : 0 }}\n        rx={majorR - tubeR}\n        ry={(majorR - tubeR) * 0.4}\n        stroke=\"currentColor\"\n        strokeOpacity={0.3}\n        transition={sacredStrokeTransition(reduceMotion, torusStagger++)}\n        viewport={SACRED_IN_VIEW}\n        whileInView={{ pathLength: 1 }}\n      />\n      {/* Tube section circles */}\n      {circles.map((c) => (\n        <motion.circle\n          cx={c.x}\n          cy={c.y}\n          initial={{ pathLength: reduceMotion ? 1 : 0 }}\n          key={`torus-${c.x}-${c.y}-${c.r}-${c.opacity}`}\n          r={c.r}\n          stroke=\"currentColor\"\n          strokeOpacity={c.opacity}\n          transition={sacredStrokeTransition(\n            reduceMotion,\n            torusStagger++,\n            0.55\n          )}\n          viewport={SACRED_IN_VIEW}\n          whileInView={{ pathLength: 1 }}\n        />\n      ))}\n    </svg>\n  )\n}\n",
      "type": "registry:ui"
    }
  ]
}