{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "landing-code-showcase",
  "title": "Landing Code Showcase",
  "description": "Magical split-screen: code types itself on the left while the preview reactively re-renders on the right with sparks and tactile bounce.",
  "dependencies": [
    "remotion"
  ],
  "files": [
    {
      "path": "registry/remocn/landing-code-showcase/index.tsx",
      "content": "\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport {\n  AbsoluteFill,\n  Freeze,\n  interpolate,\n  Sequence,\n  spring,\n  useCurrentFrame,\n  useVideoConfig,\n} from \"remotion\";\nimport { DashboardPopulate } from \"@/registry/remocn/dashboard-populate\";\nimport { FrostedGlassWipe } from \"@/registry/remocn/frosted-glass-wipe\";\nimport { SpatialPush } from \"@/registry/remocn/spatial-push\";\nimport { TerminalToBrowserDeploy } from \"@/registry/remocn/terminal-to-browser-deploy\";\n\nexport interface LandingCodeShowcaseProps {\n  accentColor?: string;\n  speed?: number;\n}\n\nconst FONT_FAMILY =\n  \"var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif\";\nconst MONO_FAMILY =\n  \"var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, monospace\";\n\n/* -------------------------------------------------------------------------- */\n/*                                  Tokens                                    */\n/* -------------------------------------------------------------------------- */\n\nconst PEACH = \"#FFB38E\";\nconst LAVENDER = \"#D4B3FF\";\nconst MINT = \"#A1EEBD\";\nconst STAGE_BG = \"#0A090E\";\nconst PANEL_BG = \"#141318\";\n\n/* -------------------------------------------------------------------------- */\n/*                              Timeline schedule                             */\n/* -------------------------------------------------------------------------- */\n/*\n   Frame layout (30fps base):\n     0   ────────────────────────────►  90    BlurReveal\n                                    70 ────►  130   SpatialPush overlay\n                                          130 ────────────►  240   Dashboard\n                                                          230 ────►  290   FrostedGlassWipe overlay\n                                                              290 ────────────►  410  MaskedSlideReveal\n                                                                              400 ────►  460   KineticTypeMask overlay\n                                                                                  460 ────────────────►  640  TerminalToBrowserDeploy\n*/\n\ninterface SceneWindow {\n  start: number;\n  duration: number;\n}\n\nconst SCENES = {\n  blur: { start: 0, duration: 90 } as SceneWindow,\n  push1: { start: 70, duration: 60 } as SceneWindow,\n  dashboard: { start: 130, duration: 110 } as SceneWindow,\n  glassWipe: { start: 230, duration: 60 } as SceneWindow,\n  maskedSlide: { start: 290, duration: 120 } as SceneWindow,\n  push2: { start: 400, duration: 60 } as SceneWindow,\n  terminal: { start: 460, duration: 180 } as SceneWindow,\n  // Quiet hold at the very end so the loop never restarts mid-action.\n  endHold: 80,\n};\n\nconst TOTAL_DURATION =\n  SCENES.terminal.start + SCENES.terminal.duration + SCENES.endHold; // 720\n\n/* -------------------------------------------------------------------------- */\n/*                              Code timeline                                 */\n/* -------------------------------------------------------------------------- */\n\ninterface CodeStep {\n  /** Frame at which this fragment STARTS being typed */\n  startFrame: number;\n  /** Code fragment to append to the visible buffer */\n  code: string;\n  /** Token within the fragment that pulses lavender briefly when typed */\n  highlight?: string;\n}\n\nconst HEADER = `import { BlurReveal, DashboardPopulate, MaskedSlideReveal,\n  TerminalToBrowserDeploy, Transition } from \"@/components/remocn\";\n\nexport default function Scene() {\n  return (\n    <>\n`;\n\nconst FOOTER = `    </>\n  );\n}`;\n\nconst STEPS: CodeStep[] = [\n  {\n    startFrame: 4,\n    code: `      <BlurReveal text=\"Build faster.\" />\\n`,\n  },\n  {\n    startFrame: SCENES.push1.start,\n    code: `      <Transition type=\"spatial-push\" />\\n`,\n    highlight: \"spatial-push\",\n  },\n  {\n    startFrame: SCENES.dashboard.start,\n    code: `      <DashboardPopulate data={metrics} />\\n`,\n  },\n  {\n    startFrame: SCENES.glassWipe.start,\n    code: `      <Transition type=\"glass-wipe\" />\\n`,\n    highlight: \"glass-wipe\",\n  },\n  {\n    startFrame: SCENES.maskedSlide.start,\n    code: `      <MaskedSlideReveal text=\"Ship to production.\" />\\n`,\n  },\n  {\n    startFrame: SCENES.push2.start,\n    code: `      <Transition type=\"spatial-push\" direction=\"left\" />\\n`,\n    highlight: \"spatial-push\",\n  },\n  {\n    startFrame: SCENES.terminal.start,\n    code: `      <TerminalToBrowserDeploy />\\n`,\n  },\n];\n\nconst CHARS_PER_FRAME = 2.2;\n\ninterface BuiltStep extends CodeStep {\n  endFrame: number;\n}\n\nconst BUILT_STEPS: BuiltStep[] = STEPS.map((s) => ({\n  ...s,\n  endFrame: s.startFrame + Math.ceil(s.code.length / CHARS_PER_FRAME),\n}));\n\n/* -------------------------------------------------------------------------- */\n/*                              Syntax highlight                              */\n/* -------------------------------------------------------------------------- */\n\ninterface Token {\n  text: string;\n  color: string;\n  glow?: boolean;\n}\n\nfunction tokenizeLine(\n  line: string,\n  accentColor: string,\n  highlightedToken: string | null,\n): Token[] {\n  const tokens: Token[] = [];\n  const regex =\n    /(\\bimport\\b|\\bfrom\\b|\\bexport\\b|\\bdefault\\b|\\bfunction\\b|\\breturn\\b|\\bconst\\b)|(\"[^\"]*\")|(\\b[A-Z][a-zA-Z0-9_]*)|(\\b[a-zA-Z_][a-zA-Z0-9_]*)(?==)|(\\{|\\}|\\(|\\)|<|>|\\/|;)|([0-9]+)/g;\n  let lastIndex = 0;\n  let m: RegExpExecArray | null = regex.exec(line);\n  while (m !== null) {\n    if (m.index > lastIndex) {\n      tokens.push({\n        text: line.slice(lastIndex, m.index),\n        color: \"#e4e4e7\",\n      });\n    }\n    if (m[1]) tokens.push({ text: m[1], color: LAVENDER });\n    else if (m[2]) {\n      // String literal — check if it matches the active highlight\n      const inner = m[2].slice(1, -1);\n      if (highlightedToken && inner === highlightedToken) {\n        tokens.push({ text: m[2], color: LAVENDER, glow: true });\n      } else {\n        tokens.push({ text: m[2], color: MINT });\n      }\n    } else if (m[3]) tokens.push({ text: m[3], color: PEACH });\n    else if (m[4]) tokens.push({ text: m[4], color: accentColor });\n    else if (m[5]) tokens.push({ text: m[5], color: \"#71717a\" });\n    else if (m[6]) tokens.push({ text: m[6], color: \"#fbbf24\" });\n    lastIndex = regex.lastIndex;\n    m = regex.exec(line);\n  }\n  if (lastIndex < line.length) {\n    tokens.push({ text: line.slice(lastIndex), color: \"#e4e4e7\" });\n  }\n  return tokens;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                Code editor                                 */\n/* -------------------------------------------------------------------------- */\n\nfunction CodeEditor({\n  frame,\n  accentColor,\n}: {\n  frame: number;\n  accentColor: string;\n}) {\n  // Compose the visible code: header + per-step typed amounts + footer (only when fully typed)\n  const dynamicChunks: string[] = [];\n  let activeHighlight: string | null = null;\n\n  for (const step of BUILT_STEPS) {\n    if (frame < step.startFrame) break;\n    const elapsed = frame - step.startFrame;\n    const charsTyped = Math.min(\n      step.code.length,\n      Math.floor(elapsed * CHARS_PER_FRAME),\n    );\n    dynamicChunks.push(step.code.slice(0, charsTyped));\n\n    // Lavender pulse: active for ~24 frames after fragment finishes typing\n    if (step.highlight) {\n      const sinceStart = frame - step.startFrame;\n      if (sinceStart >= 0 && sinceStart < 60) {\n        activeHighlight = step.highlight;\n      }\n    }\n  }\n\n  const allTyped = dynamicChunks.join(\"\");\n  const lastStep = BUILT_STEPS[BUILT_STEPS.length - 1];\n  const showFooter = frame > lastStep.endFrame + 4;\n  const visibleCode = HEADER + allTyped + (showFooter ? FOOTER : \"\");\n  const lines = visibleCode.split(\"\\n\");\n  const lastLineIdx = lines.length - 1;\n  const caretOn = Math.floor(frame / 12) % 2 === 0;\n\n  return (\n    <div\n      style={{\n        width: \"100%\",\n        maxWidth: 540,\n        position: \"relative\",\n        borderRadius: 16,\n        padding: 1,\n        background:\n          \"linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.06) 100%)\",\n        boxShadow: \"0 40px 90px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.4)\",\n      }}\n    >\n      <div\n        style={{\n          borderRadius: 15,\n          background: \"rgba(12,12,14,0.9)\",\n          backdropFilter: \"blur(20px)\",\n          overflow: \"hidden\",\n        }}\n      >\n        {/* Title bar */}\n        <div\n          style={{\n            height: 40,\n            display: \"flex\",\n            alignItems: \"center\",\n            padding: \"0 16px\",\n            borderBottom: \"1px solid rgba(255,255,255,0.06)\",\n            gap: 8,\n          }}\n        >\n          {[\"#ff5f57\", \"#febc2e\", \"#28c840\"].map((c) => (\n            <div\n              key={c}\n              style={{\n                width: 11,\n                height: 11,\n                borderRadius: 6,\n                background: c,\n                opacity: 0.65,\n              }}\n            />\n          ))}\n          <div\n            style={{\n              marginLeft: 12,\n              fontSize: 12,\n              color: \"rgba(255,255,255,0.5)\",\n              fontFamily: MONO_FAMILY,\n            }}\n          >\n            scene.tsx\n          </div>\n        </div>\n\n        {/* Code body */}\n        <div\n          style={{\n            padding: \"20px 22px\",\n            fontFamily: MONO_FAMILY,\n            fontSize: 12.5,\n            lineHeight: 1.7,\n            color: \"#e4e4e7\",\n            minHeight: 480,\n            boxShadow: \"inset 0 1px 0 rgba(255,255,255,0.04)\",\n          }}\n        >\n          {lines.map((line, i) => {\n            const tokens = tokenizeLine(line, accentColor, activeHighlight);\n            const isLast = i === lastLineIdx;\n            return (\n              <div\n                // biome-ignore lint/suspicious/noArrayIndexKey: stable per frame\n                key={i}\n                style={{ display: \"flex\", whiteSpace: \"pre\" }}\n              >\n                <span\n                  style={{\n                    width: 26,\n                    color: \"rgba(255,255,255,0.18)\",\n                    userSelect: \"none\",\n                    flexShrink: 0,\n                  }}\n                >\n                  {i + 1}\n                </span>\n                <span>\n                  {tokens.length === 0 ? (\n                    <span> </span>\n                  ) : (\n                    tokens.map((t, j) => (\n                      <span\n                        // biome-ignore lint/suspicious/noArrayIndexKey: stable per line\n                        key={j}\n                        style={{\n                          color: t.color,\n                          textShadow: t.glow\n                            ? `0 0 12px ${LAVENDER}, 0 0 24px ${LAVENDER}80`\n                            : undefined,\n                        }}\n                      >\n                        {t.text}\n                      </span>\n                    ))\n                  )}\n                  {isLast && caretOn && (\n                    <span\n                      style={{\n                        display: \"inline-block\",\n                        width: 7,\n                        height: 14,\n                        marginLeft: 1,\n                        verticalAlign: \"text-bottom\",\n                        background: accentColor,\n                      }}\n                    />\n                  )}\n                </span>\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </div>\n  );\n}\n\n/* -------------------------------------------------------------------------- */\n/*                          Soft pastel scene wrappers                        */\n/* -------------------------------------------------------------------------- */\n\n/** Warm pastel canvas — the dark stage every scene sits on */\nfunction PastelStage({\n  background = STAGE_BG,\n  children,\n}: {\n  background?: string;\n  children: ReactNode;\n}) {\n  return (\n    <div\n      style={{\n        position: \"absolute\",\n        inset: 0,\n        background,\n        overflow: \"hidden\",\n      }}\n    >\n      <div\n        style={{\n          position: \"absolute\",\n          inset: 0,\n          background:\n            \"radial-gradient(ellipse at 20% 30%, rgba(255,179,142,0.08), transparent 60%), radial-gradient(ellipse at 80% 70%, rgba(212,179,255,0.06), transparent 60%)\",\n        }}\n      />\n      {children}\n    </div>\n  );\n}\n\n/* -------------------------------------------------------------------------- */\n/*                              Scene factories                               */\n/* -------------------------------------------------------------------------- */\n/*\n   Note: BlurReveal and MaskedSlideReveal primitives bake in a `background:\n   white` div. To keep the warm-dark stage we re-implement just the visual\n   here (not a fork — both effects are simple text + filter). The orchestrator\n   advertises the primitives in code; the rendered output is faithful to them.\n*/\n\nfunction BlurRevealScene() {\n  const frame = useCurrentFrame();\n  const opacity = interpolate(frame, [0, 50], [0, 1], {\n    extrapolateRight: \"clamp\",\n  });\n  const blurAmount = interpolate(frame, [0, 50], [22, 0], {\n    extrapolateRight: \"clamp\",\n  });\n  return (\n    <div\n      style={{\n        position: \"absolute\",\n        inset: 0,\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n      }}\n    >\n      <span\n        style={{\n          opacity,\n          filter: `blur(${blurAmount}px)`,\n          fontSize: 96,\n          fontWeight: 600,\n          color: PEACH,\n          letterSpacing: \"-0.04em\",\n          fontFamily: FONT_FAMILY,\n          textShadow: `0 0 60px ${PEACH}40`,\n        }}\n      >\n        Build faster.\n      </span>\n    </div>\n  );\n}\n\nfunction DashboardScene() {\n  return (\n    <div style={{ position: \"absolute\", inset: 0 }}>\n      <DashboardPopulate accentColor={PEACH} />\n    </div>\n  );\n}\n\nfunction MaskedSlideScene() {\n  const frame = useCurrentFrame();\n  const { fps } = useVideoConfig();\n  const words = \"Ship to production.\".split(\" \");\n  return (\n    <div\n      style={{\n        position: \"absolute\",\n        inset: 0,\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n      }}\n    >\n      <span\n        style={{\n          fontSize: 92,\n          fontWeight: 700,\n          color: MINT,\n          letterSpacing: \"-0.03em\",\n          fontFamily: FONT_FAMILY,\n          textShadow: `0 0 40px ${MINT}30`,\n        }}\n      >\n        {words.map((word, i) => {\n          const t = spring({\n            frame: frame - i * 4,\n            fps,\n            config: { damping: 18, stiffness: 120 },\n          });\n          return (\n            <span\n              // biome-ignore lint/suspicious/noArrayIndexKey: stable word list\n              key={i}\n              style={{\n                display: \"inline-block\",\n                overflow: \"hidden\",\n                verticalAlign: \"bottom\",\n                lineHeight: 1.05,\n                marginRight: \"0.25em\",\n              }}\n            >\n              <span\n                style={{\n                  display: \"inline-block\",\n                  transform: `translateY(${(1 - t) * 110}%)`,\n                }}\n              >\n                {word}\n              </span>\n            </span>\n          );\n        })}\n      </span>\n    </div>\n  );\n}\n\nfunction TerminalScene() {\n  return (\n    <div style={{ position: \"absolute\", inset: 0 }}>\n      <TerminalToBrowserDeploy accentColor={MINT} siteUrl=\"remocn.dev\" />\n    </div>\n  );\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                Right pane                                  */\n/* -------------------------------------------------------------------------- */\n\nfunction RightPane() {\n  return (\n    <div\n      style={{\n        position: \"relative\",\n        width: \"100%\",\n        height: \"100%\",\n        background: STAGE_BG,\n        overflow: \"hidden\",\n        borderRadius: 18,\n      }}\n    >\n      {/* ── BASE LAYER: each scene runs in its own Sequence so its\n            internal useCurrentFrame() starts at 0 within the window. ── */}\n\n      <Sequence\n        from={SCENES.blur.start}\n        durationInFrames={SCENES.blur.duration + SCENES.push1.duration}\n      >\n        <PastelStage>\n          <BlurRevealScene />\n        </PastelStage>\n      </Sequence>\n\n      <Sequence\n        from={SCENES.dashboard.start}\n        durationInFrames={SCENES.dashboard.duration + SCENES.glassWipe.duration}\n      >\n        <PastelStage>\n          <DashboardScene />\n        </PastelStage>\n      </Sequence>\n\n      <Sequence\n        from={SCENES.maskedSlide.start}\n        durationInFrames={SCENES.maskedSlide.duration + SCENES.push2.duration}\n      >\n        <PastelStage>\n          <MaskedSlideScene />\n        </PastelStage>\n      </Sequence>\n\n      <Sequence\n        from={SCENES.terminal.start}\n        durationInFrames={SCENES.terminal.duration + SCENES.endHold}\n      >\n        <PastelStage>\n          <TerminalScene />\n        </PastelStage>\n      </Sequence>\n\n      {/* ── TRANSITION OVERLAYS: each one displays the previous scene's\n            end-state (Freeze) while wiping in the next scene's start-state. ── */}\n\n      <Sequence\n        from={SCENES.push1.start}\n        durationInFrames={SCENES.push1.duration}\n      >\n        <SpatialPush\n          transitionStart={0}\n          transitionDuration={SCENES.push1.duration}\n          direction=\"up\"\n          from={\n            <Freeze frame={SCENES.push1.start - SCENES.blur.start - 1}>\n              <PastelStage>\n                <BlurRevealScene />\n              </PastelStage>\n            </Freeze>\n          }\n          to={\n            <Freeze frame={0}>\n              <PastelStage>\n                <DashboardScene />\n              </PastelStage>\n            </Freeze>\n          }\n        />\n      </Sequence>\n\n      <Sequence\n        from={SCENES.glassWipe.start}\n        durationInFrames={SCENES.glassWipe.duration}\n      >\n        <FrostedGlassWipe\n          transitionStart={0}\n          transitionDuration={SCENES.glassWipe.duration}\n          glassBlur={28}\n          from={\n            <Freeze frame={SCENES.dashboard.duration - 1}>\n              <PastelStage>\n                <DashboardScene />\n              </PastelStage>\n            </Freeze>\n          }\n          to={\n            <Freeze frame={0}>\n              <PastelStage>\n                <MaskedSlideScene />\n              </PastelStage>\n            </Freeze>\n          }\n        />\n      </Sequence>\n\n      <Sequence\n        from={SCENES.push2.start}\n        durationInFrames={SCENES.push2.duration}\n      >\n        <SpatialPush\n          transitionStart={0}\n          transitionDuration={SCENES.push2.duration}\n          direction=\"left\"\n          from={\n            <Freeze frame={SCENES.maskedSlide.duration - 1}>\n              <PastelStage>\n                <MaskedSlideScene />\n              </PastelStage>\n            </Freeze>\n          }\n          to={\n            <Freeze frame={0}>\n              <PastelStage>\n                <TerminalScene />\n              </PastelStage>\n            </Freeze>\n          }\n        />\n      </Sequence>\n    </div>\n  );\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                  Main                                      */\n/* -------------------------------------------------------------------------- */\n\nexport function LandingCodeShowcase({\n  accentColor = \"#FFB38E\",\n  speed = 1,\n}: LandingCodeShowcaseProps) {\n  const rawFrame = useCurrentFrame();\n  const frame = rawFrame * speed;\n\n  /* ---- Final \"deploy success\" glow on both panes ---- */\n  const successGlow = interpolate(\n    frame,\n    [SCENES.terminal.start + 70, SCENES.terminal.start + 100],\n    [0, 1],\n    { extrapolateLeft: \"clamp\", extrapolateRight: \"clamp\" },\n  );\n\n  return (\n    <AbsoluteFill\n      style={{\n        background: PANEL_BG,\n        fontFamily: FONT_FAMILY,\n        overflow: \"hidden\",\n      }}\n    >\n      {/* Backdrop wash */}\n      <div\n        style={{\n          position: \"absolute\",\n          inset: 0,\n          background:\n            \"radial-gradient(ellipse at 20% 30%, rgba(255,179,142,0.06), transparent 55%), radial-gradient(ellipse at 80% 70%, rgba(212,179,255,0.06), transparent 55%)\",\n        }}\n      />\n\n      {/* ---------------- LEFT: code editor ---------------- */}\n      <div\n        style={{\n          position: \"absolute\",\n          left: 0,\n          top: 0,\n          bottom: 0,\n          width: \"38%\",\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          padding: 48,\n        }}\n      >\n        <CodeEditor frame={frame} accentColor={accentColor} />\n      </div>\n\n      {/* ---------------- RIGHT: live preview ---------------- */}\n      <div\n        style={{\n          position: \"absolute\",\n          right: 0,\n          top: 0,\n          bottom: 0,\n          width: \"62%\",\n          borderLeft: \"1px solid rgba(255,255,255,0.05)\",\n        }}\n      >\n        {/* Preview label */}\n        <div\n          style={{\n            position: \"absolute\",\n            top: 22,\n            left: 24,\n            display: \"flex\",\n            alignItems: \"center\",\n            gap: 8,\n            zIndex: 5,\n          }}\n        >\n          <div\n            style={{\n              width: 8,\n              height: 8,\n              borderRadius: 4,\n              background: MINT,\n              boxShadow: `0 0 ${10 + successGlow * 12}px ${MINT}`,\n            }}\n          />\n          <div\n            style={{\n              fontSize: 11,\n              fontFamily: MONO_FAMILY,\n              color: \"rgba(255,255,255,0.5)\",\n              textTransform: \"uppercase\",\n              letterSpacing: \"0.1em\",\n            }}\n          >\n            Preview · HMR\n          </div>\n        </div>\n\n        <div\n          style={{\n            position: \"absolute\",\n            inset: 0,\n            overflow: \"hidden\",\n            boxShadow: `inset 0 0 ${60 * successGlow}px rgba(161,238,189,${successGlow * 0.45})`,\n          }}\n        >\n          <RightPane />\n        </div>\n      </div>\n    </AbsoluteFill>\n  );\n}\n\n// Re-export the schedule so config.ts (or callers) can read the canonical\n// total length without duplicating constants.\nexport const LANDING_CODE_SHOWCASE_DURATION = TOTAL_DURATION;\n",
      "type": "registry:component",
      "target": "components/remocn/landing-code-showcase.tsx"
    }
  ],
  "type": "registry:component"
}