# Glass Code Walk
URL: https://remocn.dev/docs/ui-blocks/glass-code-walk

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

- Install: `npx shadcn@latest add @remocn/glass-code-walk`
- Vibe: tech
- Natural length: 150f @ 30fps

## Installation

```bash
npx 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.

## 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 |

## Use when
- A code reveal needs camera motion — the frame stays pinned to the line currently typing, then pulls back so the whole file lands as the payoff.
- The snippet is too small to read at full frame and you want it magnified (2.6× by default) while it types.
- The scene already has a background image or shader and the glass panel should refract it while the camera moves over it.

## Don't use when
- The code panel should sit still in frame with no camera move — use `glass-code-block`, which this component wraps and animates.
- The point is code producing live UI side by side — use `live-code-compilation`, which types styles and applies them to a rendered button.
- The content is shell commands and output rather than a source file — use `terminal-simulator`, or `terminal-cursor-zoom` for the same camera treatment on a single command.