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

tsx

// 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.

Props9

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

codestring
Source code to render. Newlines split into lines the camera scans.
titlestring
Filename shown in the chrome bar
Default"scene.tsx"
widthnumber
Glass block width in pixels; centering and the camera pin derive from it
Default880
heightnumber
Glass block height in pixels
Default420
fontSizenumber
Code font size in pixels; line geometry is derived from it
Default18
staggerFramesnumber
Frames between each line's reveal; the camera scan tracks the same cadence
Default10
zoomnumber
Camera scale while scanning before the pull-back to centered
Default2.6
speednumber
Playback multiplier applied to both the reveal and the camera
Default1
classNamestring
Optional className passed to the outer container