{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tile-snake-loader",
  "title": "Tile Snake Loader",
  "description": "Media tiles snake across a loader and settle into a studio landing page with a hero video card.",
  "dependencies": ["remotion", "@remotion/google-fonts"],
  "registryDependencies": ["@remocn/gsh"],
  "files": [
    {
      "path": "registry/remocn/tile-snake-loader/index.tsx",
      "content": "\"use client\";\n\nimport { loadFont as loadGeistMono } from \"@remotion/google-fonts/GeistMono\";\nimport { loadFont as loadInstrumentSans } from \"@remotion/google-fonts/InstrumentSans\";\nimport type { ReactNode } from \"react\";\nimport {\n  AbsoluteFill,\n  Easing,\n  Img,\n  interpolate,\n  random,\n  spring,\n  staticFile,\n  useCurrentFrame,\n  useVideoConfig,\n} from \"remotion\";\nimport type { GradientParams } from \"@/lib/remocn/gsh/gradient-engine\";\nimport { GshGround } from \"@/lib/remocn/gsh/gsh-ground\";\nimport type { GshPresetId } from \"@/lib/remocn/gsh/presets\";\n\nconst sans = loadInstrumentSans(\"normal\", {\n  weights: [\"400\"],\n  subsets: [\"latin\"],\n});\nconst mono = loadGeistMono(\"normal\", {\n  weights: [\"400\"],\n  subsets: [\"latin\"],\n});\n\nconst ENTER = Easing.bezier(0.32, 0.72, 0, 1);\nconst EXIT = Easing.bezier(0.55, 0, 1, 0.45);\nconst MOVE = Easing.bezier(0.65, 0, 0.35, 1);\nconst SWAY = Easing.bezier(0.45, 0, 0.55, 1);\nconst POP = { mass: 0.6, damping: 13, stiffness: 210 };\nconst CARD = { mass: 0.8, damping: 18, stiffness: 160 };\nconst MORPH = { damping: 200 };\n\nconst B = {\n  name: -10,\n  breakAt: 6,\n  letterStep: 1.4,\n  snake: 6,\n  label: 26,\n  pctKeys: [24, 48, 70, 92, 108],\n  pctVals: [0, 24, 47, 83, 100],\n  full: 108,\n  retract: 16,\n  skeleton: 110,\n  grow: 118,\n  window: 130,\n  content: 131,\n  end: 178,\n};\n\nexport const TILE_SNAKE_LOADER_DURATION = B.end;\n\nconst ramp = (f: number, start: number, dur: number, easing = ENTER) =>\n  interpolate(f, [start, start + dur], [0, 1], {\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n    easing,\n  });\n\nconst mix = (a: number, b: number, t: number) => a + (b - a) * t;\n\nconst DEFAULT_IMAGES = [\n  \"templates/product-showcase/sculpture.jpg\",\n  \"reel/reel-4.jpg\",\n  \"templates/launch-anything/desk.jpg\",\n  \"templates/brand-guidelines/ceramics.jpg\",\n  \"reel/reel-5.jpg\",\n  \"templates/product-showcase/courtyard.jpg\",\n  \"templates/launch-anything/earth.jpg\",\n  \"templates/brand-guidelines/chair.jpg\",\n].map((p) => staticFile(p));\n\nconst THEMES = {\n  dark: {\n    ink: \"#f3f2f7\",\n    soft: \"rgba(243,242,247,0.6)\",\n    pill: \"rgba(255,255,255,0.1)\",\n    skeleton: \"#2a2a33\",\n    tileShadow:\n      \"0 1px 2px rgba(0,0,0,0.4), 0 10px 24px rgba(0,0,8,0.45), 0 26px 50px rgba(0,0,8,0.3)\",\n    ground: \"europa\" as GshPresetId | undefined,\n    groundParams: undefined as Partial<GradientParams> | undefined,\n  },\n  light: {\n    ink: \"#1b1a1f\",\n    soft: \"rgba(27,26,31,0.56)\",\n    pill: \"rgba(27,26,31,0.07)\",\n    skeleton: \"#dcd8d1\",\n    tileShadow:\n      \"0 1px 2px rgba(70,50,40,0.08), 0 10px 22px rgba(70,50,40,0.12), 0 24px 44px rgba(70,50,40,0.1)\",\n    ground: undefined as GshPresetId | undefined,\n    groundParams: {\n      kind: \"mist\",\n      background: \"#f4f0e8\",\n      colors: [\"#f8dfe2\", \"#f1ecc8\", \"#e9e0f2\", \"#f7f4ee\"],\n      grain: 0.05,\n      blur: 0.6,\n    } as Partial<GradientParams> | undefined,\n  },\n};\n\nconst WIN = {\n  bg: \"linear-gradient(180deg, #16171d 0%, #0e0f13 100%)\",\n  bar: \"#141519\",\n  hair: \"rgba(255,255,255,0.08)\",\n  ink: \"#f2f2f5\",\n  soft: \"rgba(242,242,245,0.58)\",\n  faint: \"rgba(242,242,245,0.34)\",\n  shadow:\n    \"inset 0 1px 0 rgba(255,255,255,0.07), 0 0 0 1px rgba(255,255,255,0.11), 0 2px 4px rgba(0,0,0,0.3), 0 30px 60px rgba(0,0,10,0.4), 0 70px 120px rgba(0,0,10,0.35)\",\n};\n\nexport interface TileSnakeLoaderProps {\n  theme?: \"dark\" | \"light\";\n  accent?: string;\n  name?: string;\n  label?: string;\n  images?: string[];\n  product?: string;\n  url?: string;\n  headline?: string;\n  sub?: string;\n  ground?: GshPresetId;\n  groundParams?: Partial<GradientParams>;\n}\n\ntype Kind =\n  | \"photo\"\n  | \"mark\"\n  | \"chart\"\n  | \"button\"\n  | \"swatch\"\n  | \"list\"\n  | \"phone\"\n  | \"toggle\"\n  | \"player\";\n\nconst KINDS: { kind: Kind; w: number; h: number }[] = [\n  { kind: \"photo\", w: 138, h: 92 },\n  { kind: \"mark\", w: 104, h: 76 },\n  { kind: \"chart\", w: 128, h: 88 },\n  { kind: \"photo\", w: 92, h: 116 },\n  { kind: \"swatch\", w: 70, h: 70 },\n  { kind: \"list\", w: 132, h: 94 },\n  { kind: \"photo\", w: 150, h: 96 },\n  { kind: \"phone\", w: 66, h: 118 },\n  { kind: \"button\", w: 124, h: 80 },\n  { kind: \"photo\", w: 104, h: 104 },\n  { kind: \"toggle\", w: 118, h: 84 },\n  { kind: \"player\", w: 140, h: 86 },\n];\n\nconst SWATCHES = [\"#ff6a3d\", \"#b9a4ff\", \"#ffd34d\", \"#2fd3a6\"];\n\nfunction Line({ w, c, h = 5 }: { w: string; c: string; h?: number }) {\n  return (\n    <div style={{ width: w, height: h, borderRadius: h, background: c }} />\n  );\n}\n\nfunction TileFace({\n  kind,\n  idx,\n  images,\n  accent,\n}: {\n  kind: Kind;\n  idx: number;\n  images: string[];\n  accent: string;\n}) {\n  const fill = { position: \"absolute\" as const, inset: 0 };\n  if (kind === \"photo\") {\n    return (\n      <Img\n        src={images[idx % images.length]}\n        alt=\"\"\n        style={{ ...fill, width: \"100%\", height: \"100%\", objectFit: \"cover\" }}\n      />\n    );\n  }\n  if (kind === \"mark\") {\n    return (\n      <div\n        style={{\n          ...fill,\n          background: \"linear-gradient(160deg, #1d1e25 0%, #0b0b0f 100%)\",\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n        }}\n      >\n        <div\n          style={{\n            width: 30,\n            height: 30,\n            borderRadius: 8,\n            background: \"rgba(255,255,255,0.12)\",\n            border: \"1px solid rgba(255,255,255,0.18)\",\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n          }}\n        >\n          <div\n            style={{\n              width: 12,\n              height: 12,\n              borderRadius: 3,\n              background: accent,\n            }}\n          />\n        </div>\n      </div>\n    );\n  }\n  if (kind === \"chart\") {\n    const bars = [0.42, 0.6, 0.5, 0.78, 0.66, 0.92];\n    return (\n      <div style={{ ...fill, background: \"#ffffff\", padding: 10 }}>\n        <Line w=\"44%\" c=\"rgba(20,20,30,0.18)\" />\n        <div\n          style={{\n            position: \"absolute\",\n            left: 10,\n            right: 10,\n            bottom: 10,\n            height: \"56%\",\n            display: \"flex\",\n            alignItems: \"flex-end\",\n            gap: 5,\n          }}\n        >\n          {bars.map((b, i) => (\n            <div\n              key={`b${b}`}\n              style={{\n                flex: 1,\n                height: `${b * 100}%`,\n                borderRadius: 3,\n                background:\n                  i === bars.length - 1 ? accent : \"rgba(20,20,30,0.12)\",\n              }}\n            />\n          ))}\n        </div>\n      </div>\n    );\n  }\n  if (kind === \"swatch\") {\n    const col = SWATCHES[idx % SWATCHES.length];\n    return (\n      <div\n        style={{\n          ...fill,\n          background: `linear-gradient(150deg, ${col} 0%, color-mix(in oklab, ${col} 70%, #000) 100%)`,\n        }}\n      />\n    );\n  }\n  if (kind === \"list\") {\n    return (\n      <div\n        style={{\n          ...fill,\n          background: \"#f7f6f3\",\n          padding: \"10px 10px\",\n          display: \"flex\",\n          flexDirection: \"column\",\n          gap: 9,\n        }}\n      >\n        {[0.7, 0.52, 0.62].map((w, i) => (\n          <div\n            key={`r${w}`}\n            style={{ display: \"flex\", alignItems: \"center\", gap: 7 }}\n          >\n            <div\n              style={{\n                width: 14,\n                height: 14,\n                borderRadius: 7,\n                background: [accent, \"#ff9d6b\", \"#9fd8c4\"][i],\n              }}\n            />\n            <Line w={`${w * 100}%`} c=\"rgba(20,20,30,0.16)\" />\n          </div>\n        ))}\n      </div>\n    );\n  }\n  if (kind === \"phone\") {\n    return (\n      <div style={{ ...fill, background: \"#0c0c10\", padding: 5 }}>\n        <div\n          style={{\n            position: \"absolute\",\n            inset: 5,\n            borderRadius: 9,\n            overflow: \"hidden\",\n          }}\n        >\n          <Img\n            src={images[(idx + 3) % images.length]}\n            alt=\"\"\n            style={{ width: \"100%\", height: \"100%\", objectFit: \"cover\" }}\n          />\n        </div>\n      </div>\n    );\n  }\n  if (kind === \"button\") {\n    return (\n      <div\n        style={{\n          ...fill,\n          background: \"linear-gradient(180deg, #ffffff 0%, #f2f1ee 100%)\",\n          display: \"flex\",\n          flexDirection: \"column\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          gap: 9,\n        }}\n      >\n        <Line w=\"58%\" c=\"rgba(20,20,30,0.2)\" h={6} />\n        <div\n          style={{\n            width: \"52%\",\n            height: 20,\n            borderRadius: 10,\n            background: accent,\n            boxShadow: \"inset 0 1px 0 rgba(255,255,255,0.25)\",\n          }}\n        />\n      </div>\n    );\n  }\n  if (kind === \"toggle\") {\n    return (\n      <div\n        style={{\n          ...fill,\n          background: \"#1a1b21\",\n          padding: 11,\n          display: \"flex\",\n          flexDirection: \"column\",\n          gap: 10,\n        }}\n      >\n        {[true, false, true].map((on, i) => (\n          <div\n            key={`t${i}-${on}`}\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"space-between\",\n            }}\n          >\n            <Line w=\"46%\" c=\"rgba(255,255,255,0.2)\" />\n            <div\n              style={{\n                width: 24,\n                height: 13,\n                borderRadius: 7,\n                background: on ? accent : \"rgba(255,255,255,0.16)\",\n                position: \"relative\",\n              }}\n            >\n              <div\n                style={{\n                  position: \"absolute\",\n                  top: 2,\n                  left: on ? 13 : 2,\n                  width: 9,\n                  height: 9,\n                  borderRadius: 5,\n                  background: \"#fff\",\n                }}\n              />\n            </div>\n          </div>\n        ))}\n      </div>\n    );\n  }\n  const wave = Array.from(\n    { length: 18 },\n    (_, i) => 0.25 + random(`tsl-w-${idx}-${i}`) * 0.75,\n  );\n  return (\n    <div\n      style={{\n        ...fill,\n        background: \"linear-gradient(160deg, #2a1f4d 0%, #120f22 100%)\",\n        padding: 10,\n        display: \"flex\",\n        alignItems: \"center\",\n        gap: 8,\n      }}\n    >\n      <div\n        style={{\n          width: 24,\n          height: 24,\n          borderRadius: 12,\n          background: \"#fff\",\n          flexShrink: 0,\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n        }}\n      >\n        <svg viewBox=\"0 0 24 24\" width={12} height={12} aria-hidden>\n          <path d=\"M8 5.5v13l10-6.5z\" fill=\"#120f22\" />\n        </svg>\n      </div>\n      <div\n        style={{\n          flex: 1,\n          height: 30,\n          display: \"flex\",\n          alignItems: \"center\",\n          gap: 2,\n        }}\n      >\n        {wave.map((v, i) => (\n          <div\n            key={`w${i}-${v}`}\n            style={{\n              flex: 1,\n              height: `${v * 100}%`,\n              borderRadius: 2,\n              background: i < 7 ? \"#c9b8ff\" : \"rgba(255,255,255,0.3)\",\n            }}\n          />\n        ))}\n      </div>\n    </div>\n  );\n}\n\nfunction RailIcon({ i, color }: { i: number; color: string }) {\n  const paths = [\n    \"M4 5h16v14H4zM4 9h16\",\n    \"M5 5h6v6H5zM13 5h6v6h-6zM5 13h6v6H5zM13 13h6v6h-6z\",\n    \"M12 4v16M4 12h16\",\n    \"M5 7h14M5 12h14M5 17h9\",\n  ];\n  return (\n    <svg viewBox=\"0 0 24 24\" width={20} height={20} aria-hidden>\n      <path\n        d={paths[i % paths.length]}\n        fill=\"none\"\n        stroke={color}\n        strokeWidth={1.5}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n}\n\nfunction WindowContent({\n  frame,\n  fps,\n  portrait,\n  accent,\n  product,\n  url,\n  headline,\n  sub,\n  images,\n}: {\n  frame: number;\n  fps: number;\n  portrait: boolean;\n  accent: string;\n  product: string;\n  url: string;\n  headline: string;\n  sub: string;\n  images: string[];\n}) {\n  const k = portrait ? 1.55 : 1;\n  const step = (i: number) => ramp(frame, B.content + i * 3, 13);\n  const rise = (i: number) => ({\n    opacity: step(i),\n    transform: `translateY(${mix(14 * k, 0, step(i))}px)`,\n    filter: `blur(${(1 - step(i)) * 5}px)`,\n  });\n  const cardPop = spring({ frame: frame - B.content - 4, fps, config: CARD });\n  const lines = headline.split(\"\\n\");\n  const barH = 46 * k;\n  const railW = portrait ? 0 : 60;\n  return (\n    <div\n      style={{ position: \"absolute\", inset: 0, fontFamily: sans.fontFamily }}\n    >\n      <div\n        style={{\n          position: \"absolute\",\n          left: 0,\n          right: 0,\n          top: 0,\n          height: barH,\n          borderBottom: `1px solid ${WIN.hair}`,\n          display: \"flex\",\n          alignItems: \"center\",\n          padding: `0 ${16 * k}px`,\n          opacity: step(0),\n        }}\n      >\n        <div style={{ display: \"flex\", gap: 7 * k }}>\n          {[\"#ff5f57\", \"#febc2e\", \"#28c840\"].map((col) => (\n            <div\n              key={col}\n              style={{\n                width: 11 * k,\n                height: 11 * k,\n                borderRadius: 6 * k,\n                background: col,\n                opacity: 0.9,\n              }}\n            />\n          ))}\n        </div>\n        <div style={{ flex: 1, display: \"flex\", justifyContent: \"center\" }}>\n          <div\n            style={{\n              height: 28 * k,\n              padding: `0 ${14 * k}px`,\n              borderRadius: 8 * k,\n              background: \"rgba(255,255,255,0.06)\",\n              border: `1px solid ${WIN.hair}`,\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: 7 * k,\n              fontSize: 16 * k,\n              color: WIN.soft,\n            }}\n          >\n            <svg viewBox=\"0 0 24 24\" width={13 * k} height={13 * k} aria-hidden>\n              <path\n                d=\"M7 11V8a5 5 0 0 1 10 0v3M6 11h12v9H6z\"\n                fill=\"none\"\n                stroke={WIN.soft}\n                strokeWidth={1.6}\n                strokeLinejoin=\"round\"\n              />\n            </svg>\n            {url}\n          </div>\n        </div>\n        <div\n          style={{\n            height: 30 * k,\n            padding: `0 ${14 * k}px`,\n            borderRadius: 8 * k,\n            background: accent,\n            color: \"#fff\",\n            fontSize: 16 * k,\n            display: \"flex\",\n            alignItems: \"center\",\n            boxShadow: \"inset 0 1px 0 rgba(255,255,255,0.25)\",\n          }}\n        >\n          Publish\n        </div>\n      </div>\n      {!portrait ? (\n        <div\n          style={{\n            position: \"absolute\",\n            left: 0,\n            top: barH,\n            bottom: 0,\n            width: railW,\n            borderRight: `1px solid ${WIN.hair}`,\n            display: \"flex\",\n            flexDirection: \"column\",\n            alignItems: \"center\",\n            paddingTop: 18,\n            gap: 20,\n            opacity: step(1),\n          }}\n        >\n          {[0, 1, 2, 3].map((i) => (\n            <RailIcon\n              key={`ri${i}`}\n              i={i}\n              color={i === 0 ? WIN.ink : WIN.faint}\n            />\n          ))}\n        </div>\n      ) : null}\n      <div\n        style={{\n          position: \"absolute\",\n          left: railW + (portrait ? 56 : 44),\n          top: barH + (portrait ? 70 : 44),\n          width: portrait ? 820 : 440,\n        }}\n      >\n        <div\n          style={{\n            fontSize: 17 * k,\n            color: WIN.soft,\n            display: \"flex\",\n            alignItems: \"center\",\n            gap: 8 * k,\n            ...rise(1),\n          }}\n        >\n          <div\n            style={{\n              width: 7 * k,\n              height: 7 * k,\n              borderRadius: 4 * k,\n              background: accent,\n            }}\n          />\n          {product}\n        </div>\n        <div\n          style={{\n            marginTop: 18 * k,\n            fontSize: 46 * k,\n            lineHeight: 1.06,\n            fontWeight: 400,\n            letterSpacing: \"-0.035em\",\n            color: WIN.ink,\n          }}\n        >\n          {lines.map((l, i) => (\n            <div key={`h${l}`} style={rise(2 + i)}>\n              {l}\n            </div>\n          ))}\n        </div>\n        <div\n          style={{\n            marginTop: 18 * k,\n            fontSize: 18 * k,\n            lineHeight: 1.4,\n            color: WIN.soft,\n            ...rise(4),\n          }}\n        >\n          {sub}\n        </div>\n        <div\n          style={{\n            marginTop: 26 * k,\n            display: \"flex\",\n            gap: 10 * k,\n            ...rise(5),\n          }}\n        >\n          <div\n            style={{\n              height: 40 * k,\n              padding: `0 ${18 * k}px`,\n              borderRadius: 20 * k,\n              background: \"#f2f2f5\",\n              color: \"#111\",\n              fontSize: 17 * k,\n              display: \"flex\",\n              alignItems: \"center\",\n            }}\n          >\n            Start a film\n          </div>\n          <div\n            style={{\n              height: 40 * k,\n              padding: `0 ${18 * k}px`,\n              borderRadius: 20 * k,\n              border: `1px solid ${WIN.hair}`,\n              color: WIN.ink,\n              fontSize: 17 * k,\n              display: \"flex\",\n              alignItems: \"center\",\n            }}\n          >\n            See examples\n          </div>\n        </div>\n      </div>\n      <div\n        style={{\n          position: \"absolute\",\n          right: portrait ? 56 : 40,\n          left: portrait ? 56 : undefined,\n          top: portrait ? barH + 560 : barH + 40,\n          width: portrait ? undefined : 330,\n          height: portrait ? 440 : 300,\n          borderRadius: 16 * k,\n          overflow: \"hidden\",\n          background: accent,\n          boxShadow:\n            \"inset 0 1px 0 rgba(255,255,255,0.25), 0 20px 40px rgba(0,0,0,0.35)\",\n          opacity: Math.min(1, cardPop * 1.5),\n          transform: `translateY(${mix(30 * k, 0, cardPop)}px) scale(${mix(0.92, 1, cardPop)})`,\n        }}\n      >\n        <div\n          style={{\n            position: \"absolute\",\n            inset: 10 * k,\n            bottom: 56 * k,\n            borderRadius: 10 * k,\n            overflow: \"hidden\",\n          }}\n        >\n          <Img\n            src={images[0]}\n            alt=\"\"\n            style={{ width: \"100%\", height: \"100%\", objectFit: \"cover\" }}\n          />\n          <div\n            style={{\n              position: \"absolute\",\n              left: \"50%\",\n              top: \"50%\",\n              width: 52 * k,\n              height: 52 * k,\n              marginLeft: -26 * k,\n              marginTop: -26 * k,\n              borderRadius: 26 * k,\n              background: \"rgba(255,255,255,0.92)\",\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n            }}\n          >\n            <svg viewBox=\"0 0 24 24\" width={20 * k} height={20 * k} aria-hidden>\n              <path d=\"M8 5.5v13l10-6.5z\" fill=\"#111\" />\n            </svg>\n          </div>\n        </div>\n        <div\n          style={{\n            position: \"absolute\",\n            left: 18 * k,\n            right: 18 * k,\n            bottom: 0,\n            height: 56 * k,\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"space-between\",\n            color: \"#fff\",\n            fontSize: 17 * k,\n          }}\n        >\n          <span>Launch film</span>\n          <span style={{ fontFamily: mono.fontFamily, opacity: 0.8 }}>\n            0:42\n          </span>\n        </div>\n      </div>\n      <div\n        style={{\n          position: \"absolute\",\n          left: railW + (portrait ? 56 : 44),\n          right: portrait ? 56 : 40,\n          bottom: portrait ? 56 : 30,\n          height: portrait ? 230 : 88,\n          display: \"flex\",\n          gap: 12 * k,\n        }}\n      >\n        {[1, 2, 3, 4].map((im, i) => (\n          <div\n            key={`th${im}`}\n            style={{\n              flex: 1,\n              borderRadius: 10 * k,\n              overflow: \"hidden\",\n              border: `1px solid ${WIN.hair}`,\n              position: \"relative\",\n              ...rise(6 + i * 0.6),\n            }}\n          >\n            <Img\n              src={images[im % images.length]}\n              alt=\"\"\n              style={{ width: \"100%\", height: \"100%\", objectFit: \"cover\" }}\n            />\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nconst SCRAMBLE = \"abcdefghijklmnopqrstuvwxyz\";\n\nexport function TileSnakeLoader({\n  theme = \"dark\",\n  accent = \"#3B5BFD\",\n  name = \"Lumen Studio\",\n  label = \"Initializing\",\n  images = DEFAULT_IMAGES,\n  product = \"Lumen Studio\",\n  url = \"lumen.studio\",\n  headline = \"Launch films,\\ncut in minutes.\",\n  sub = \"Drop your screens in. Ship the film by Friday.\",\n  ground,\n  groundParams,\n}: TileSnakeLoaderProps) {\n  const frame = useCurrentFrame();\n  const { width, height, fps } = useVideoConfig();\n  const c = THEMES[theme];\n  const portrait = height > width * 1.2;\n  const stageW = portrait ? 1080 : 1280;\n  const stageH = portrait ? 1920 : 720;\n  const sc = width / stageW;\n  const k = portrait ? 1.55 : 1;\n\n  const PW = portrait ? 900 : 1080;\n  const PH = portrait ? 1260 : 520;\n  const PR = portrait ? 190 : 150;\n  const cx = stageW / 2;\n  const cy = stageH / 2;\n  const straightW = PW - 2 * PR;\n  const straightH = PH - 2 * PR;\n  const arc = (Math.PI * PR) / 2;\n  const P = 2 * straightW + 2 * straightH + 4 * arc;\n  const gap = portrait ? 220 : 146;\n  const tk = portrait ? 2.05 : 1.32;\n\n  const pathPoint = (s0: number) => {\n    let s = ((s0 % P) + P) % P;\n    const L = cx - PW / 2;\n    const R = cx + PW / 2;\n    const T = cy - PH / 2;\n    const Bt = cy + PH / 2;\n    const seg = (len: number) => {\n      if (s <= len) return true;\n      s -= len;\n      return false;\n    };\n    if (seg(straightH / 2)) return { x: L, y: cy - s };\n    if (seg(arc)) {\n      const a = Math.PI + (s / arc) * (Math.PI / 2);\n      return { x: L + PR + PR * Math.cos(a), y: T + PR + PR * Math.sin(a) };\n    }\n    if (seg(straightW)) return { x: L + PR + s, y: T };\n    if (seg(arc)) {\n      const a = -Math.PI / 2 + (s / arc) * (Math.PI / 2);\n      return { x: R - PR + PR * Math.cos(a), y: T + PR + PR * Math.sin(a) };\n    }\n    if (seg(straightH)) return { x: R, y: T + PR + s };\n    if (seg(arc)) {\n      const a = (s / arc) * (Math.PI / 2);\n      return { x: R - PR + PR * Math.cos(a), y: Bt - PR + PR * Math.sin(a) };\n    }\n    if (seg(straightW)) return { x: R - PR - s, y: Bt };\n    if (seg(arc)) {\n      const a = Math.PI / 2 + (s / arc) * (Math.PI / 2);\n      return { x: L + PR + PR * Math.cos(a), y: Bt - PR + PR * Math.sin(a) };\n    }\n    return { x: L, y: Bt - PR - s };\n  };\n\n  const pctAt = (f: number) =>\n    interpolate(f, B.pctKeys, B.pctVals, {\n      extrapolateLeft: \"clamp\",\n      extrapolateRight: \"clamp\",\n      easing: MOVE,\n    });\n  const headAt = (f: number) =>\n    P * 0.1 * ramp(f, B.snake, 18, SWAY) + P * 1.22 * (pctAt(f) / 100);\n  const lenAt = (f: number) => {\n    const h = headAt(f);\n    const base = Math.min(h, P * (0.5 + 0.2 * (pctAt(f) / 100)));\n    return base * (1 - ramp(f, B.full, B.retract, EXIT));\n  };\n  const tailAt = (f: number) =>\n    headAt(f) - lenAt(f) + (f >= B.full + B.retract ? gap : 0);\n\n  const firstFrame = (test: (f: number) => boolean) => {\n    for (let f = B.snake; f <= B.end + 1; f++) if (test(f)) return f;\n    return 9999;\n  };\n\n  const maxHead = headAt(B.end);\n  const nTiles = Math.floor(maxHead / gap) + 1;\n  const tiles: ReactNode[] = [];\n  for (let n = 0; n < nTiles; n++) {\n    const sN = n * gap + gap * 0.3;\n    const birth = firstFrame((f) => headAt(f) >= sN);\n    const death = firstFrame((f) => tailAt(f) >= sN);\n    if (frame < birth || frame > death + 6) continue;\n    const pop = spring({ frame: frame - birth, fps, config: POP });\n    const gone = ramp(frame, death, 6, EXIT);\n    const scale = pop * (1 - gone);\n    if (scale <= 0.002) continue;\n    const spec = KINDS[n % KINDS.length];\n    const p = pathPoint(sN);\n    const jx = (random(`tsl-jx-${n}`) - 0.5) * 18 * k;\n    const jy = (random(`tsl-jy-${n}`) - 0.5) * 18 * k;\n    const tilt = (random(`tsl-r-${n}`) - 0.5) * 6;\n    const w = spec.w * tk;\n    const h = spec.h * tk;\n    tiles.push(\n      <div\n        key={`tile-${n}`}\n        style={{\n          position: \"absolute\",\n          left: p.x + jx - w / 2,\n          top: p.y + jy - h / 2,\n          width: w,\n          height: h,\n          transform: `rotate(${mix(tilt * 3, tilt, pop)}deg) scale(${scale})`,\n          zIndex: n,\n        }}\n      >\n        <div\n          style={{\n            position: \"absolute\",\n            inset: 0,\n            borderRadius: spec.kind === \"phone\" ? 12 : 9,\n            overflow: \"hidden\",\n            boxShadow: c.tileShadow,\n            transform: `scale(${tk})`,\n            transformOrigin: \"0 0\",\n            width: spec.w,\n            height: spec.h,\n          }}\n        >\n          <TileFace kind={spec.kind} idx={n} images={images} accent={accent} />\n        </div>\n      </div>,\n    );\n  }\n\n  const nameSize = portrait ? 132 : 96;\n  const nameIn = ramp(frame, B.name, 14);\n  const chars = Array.from(name);\n\n  const labelSize = 30 * k;\n  const labelIn = ramp(frame, B.label - 4, 10);\n  const settleN = Math.floor(\n    interpolate(frame, [B.label, B.label + 14], [0, label.length], {\n      extrapolateLeft: \"clamp\",\n      extrapolateRight: \"clamp\",\n    }),\n  );\n  const labelText = Array.from(label)\n    .map((ch, i) =>\n      i < settleN || ch === \" \"\n        ? ch\n        : SCRAMBLE[\n            Math.floor(\n              random(`tsl-sc-${i}-${Math.floor(frame / 2)}`) * SCRAMBLE.length,\n            )\n          ],\n    )\n    .join(\"\");\n  const pct = Math.round(pctAt(frame));\n  const labelOut = ramp(frame, B.skeleton, 8, EXIT);\n  const skelIn = ramp(frame, B.skeleton + 2, 6);\n\n  const skelW0 = portrait ? 520 : 340;\n  const skelH0 = 46 * k;\n  const winW = portrait ? 940 : 1000;\n  const winH = portrait ? 1380 : 580;\n  const grow = spring({\n    frame: frame - B.grow,\n    fps,\n    config: MORPH,\n    durationInFrames: 16,\n  });\n  const winOn = ramp(frame, B.window, 8);\n  const settle = spring({ frame: frame - B.window, fps, config: CARD });\n  const winScale = frame >= B.window ? mix(0.965, 1, settle) : 1;\n  const boxW = mix(skelW0, winW, grow);\n  const boxH = mix(skelH0, winH, grow);\n  const boxR = mix(skelH0 / 2, 20 * k * (portrait ? 0.85 : 1), grow);\n  const push = 1 + 0.03 * ramp(frame, B.content, B.end - B.content, SWAY);\n\n  const preset = ground ?? (groundParams ? undefined : c.ground);\n  const gParams = groundParams ?? (ground ? undefined : c.groundParams);\n\n  return (\n    <AbsoluteFill style={{ fontFamily: sans.fontFamily, overflow: \"hidden\" }}>\n      <GshGround\n        preset={preset}\n        params={gParams}\n        timeOffset={5}\n        timeScale={0.45}\n      />\n      <div\n        style={{\n          position: \"absolute\",\n          left: 0,\n          top: 0,\n          width: stageW,\n          height: stageH,\n          transform: `scale(${sc})`,\n          transformOrigin: \"0 0\",\n        }}\n      >\n        <div\n          style={{\n            position: \"absolute\",\n            inset: 0,\n            transform: `scale(${push})`,\n            transformOrigin: \"50% 50%\",\n          }}\n        >\n          {tiles}\n          <div\n            style={{\n              position: \"absolute\",\n              left: 0,\n              right: 0,\n              top: cy - nameSize * 0.62,\n              height: nameSize * 1.24,\n              overflow: \"hidden\",\n              display: \"flex\",\n              justifyContent: \"center\",\n              alignItems: \"center\",\n            }}\n          >\n            <div\n              style={{\n                display: \"flex\",\n                fontSize: nameSize,\n                fontWeight: 400,\n                letterSpacing: \"-0.04em\",\n                color: c.ink,\n                whiteSpace: \"pre\",\n                transform: `translateY(${mix(nameSize, 0, nameIn)}px)`,\n              }}\n            >\n              {chars.map((ch, i) => {\n                const g = ramp(frame, B.breakAt + i * B.letterStep, 7, EXIT);\n                return (\n                  <span\n                    key={`n${i}-${ch}`}\n                    style={{\n                      display: \"inline-block\",\n                      transform: `scale(${1 - g})`,\n                      opacity: 1 - g * g,\n                      margin: `0 ${g * 0.12}em`,\n                      filter: `blur(${g * 4}px)`,\n                    }}\n                  >\n                    {ch}\n                  </span>\n                );\n              })}\n            </div>\n          </div>\n          {frame >= B.label - 4 && labelOut < 1 ? (\n            <div\n              style={{\n                position: \"absolute\",\n                left: 0,\n                right: 0,\n                top: cy - skelH0 / 2,\n                height: skelH0,\n                display: \"flex\",\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                gap: 12 * k,\n                opacity: labelIn * (1 - labelOut),\n                filter: `blur(${labelOut * 8 + (1 - labelIn) * 5}px)`,\n                transform: `translateY(${mix(10 * k, 0, labelIn)}px)`,\n              }}\n            >\n              <div\n                style={{\n                  width: 8 * k,\n                  height: 8 * k,\n                  borderRadius: 4 * k,\n                  background: accent,\n                  opacity: 0.55 + 0.45 * Math.sin(frame / 3),\n                }}\n              />\n              <div\n                style={{\n                  fontSize: labelSize,\n                  color: c.ink,\n                  letterSpacing: \"-0.015em\",\n                  minWidth: label.length * labelSize * 0.5,\n                }}\n              >\n                {labelText}\n              </div>\n              <div\n                style={{\n                  height: 38 * k,\n                  minWidth: 76 * k,\n                  padding: `0 ${13 * k}px`,\n                  borderRadius: 19 * k,\n                  background: c.pill,\n                  color: c.soft,\n                  fontFamily: mono.fontFamily,\n                  fontSize: 21 * k,\n                  display: \"flex\",\n                  alignItems: \"center\",\n                  justifyContent: \"center\",\n                  fontVariantNumeric: \"tabular-nums\",\n                }}\n              >\n                {`${pct}%`}\n              </div>\n            </div>\n          ) : null}\n          {skelIn > 0 ? (\n            <div\n              style={{\n                position: \"absolute\",\n                left: cx - boxW / 2,\n                top: cy - boxH / 2,\n                width: boxW,\n                height: boxH,\n                borderRadius: boxR,\n                transform: `scale(${winScale})`,\n                opacity: skelIn,\n              }}\n            >\n              <div\n                style={{\n                  position: \"absolute\",\n                  inset: 0,\n                  borderRadius: boxR,\n                  background: c.skeleton,\n                  opacity: 1 - winOn,\n                }}\n              />\n              {winOn > 0 ? (\n                <div\n                  style={{\n                    position: \"absolute\",\n                    inset: 0,\n                    borderRadius: boxR,\n                    background: WIN.bg,\n                    boxShadow: WIN.shadow,\n                    overflow: \"hidden\",\n                    opacity: winOn,\n                  }}\n                >\n                  <WindowContent\n                    frame={frame}\n                    fps={fps}\n                    portrait={portrait}\n                    accent={accent}\n                    product={product}\n                    url={url}\n                    headline={headline}\n                    sub={sub}\n                    images={images}\n                  />\n                </div>\n              ) : null}\n            </div>\n          ) : null}\n        </div>\n      </div>\n    </AbsoluteFill>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/tile-snake-loader.tsx"
    }
  ],
  "type": "registry:component"
}