Glass Code Walk

A camera that scans a glass code block top to bottom as it types, then pulls back to a centered hold

Installation

$ pnpm dlx shadcn@latest add @remocn/glass-code-walk

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { GlassCodeWalk } from "@/components/remocn/glass-code-walk";

const GlassCodeWalkScene = () => (
  <GlassCodeWalk
    title="scene.tsx"
    code={`export function Intro() {\n  return <h1>Ship it</h1>;\n}`}
  />
);

export const RemotionRoot = () => (
  <Composition
    id="GlassCodeWalk"
    component={GlassCodeWalkScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

The camera mirrors glass-code-block's line layout to keep the revealing line pinned, so it pairs with that component — npx shadcn add @remocn/glass-code-walk pulls it in automatically. Renders transparent; supply the background with Backdrop so the glass has an image to refract.

Props

Prop	Type	Default	Description
`code`	`string`	—	Source code to render. Newlines split into lines the camera scans.
`title`	`string`	`"scene.tsx"`	Filename shown in the chrome bar
`width`	`number`	`880`	Glass block width in pixels; centering and the camera pin derive from it
`height`	`number`	`420`	Glass block height in pixels
`fontSize`	`number`	`18`	Code font size in pixels; line geometry is derived from it
`staggerFrames`	`number`	`10`	Frames between each line's reveal; the camera scan tracks the same cadence
`zoom`	`number`	`2.6`	Camera scale while scanning before the pull-back to centered
`speed`	`number`	`1`	Playback multiplier applied to both the reveal and the camera
`className`	`string`	—	Optional className passed to the outer container