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

A premium frosted-glass code editor window with a regex tokenizer and line-by-line stagger reveal

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

## Installation

```bash
npx shadcn@latest add @remocn/glass-code-block
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { GlassCodeBlock } from "@/components/remocn/glass-code-block";

const GlassCodeBlockScene = () => (
  <GlassCodeBlock
    title="hero.tsx"
    code={`export function Hero() {\n  return <h1>Hello</h1>;\n}`}
  />
);

export const RemotionRoot = () => (
  <Composition
    id="GlassCodeBlock"
    component={GlassCodeBlockScene}
    durationInFrames={180}
    fps={30}
    width={1280}
    height={720}
  />
);
```

### With Backdrop

Renders transparent — supply the background via `Backdrop`:

```tsx
import { Backdrop } from "@/components/remocn/backdrop";
import { GlassCodeBlock } from "@/components/remocn/glass-code-block";

<Backdrop fill={{ type: "color", value: "#0a0a0a" }}>
  <GlassCodeBlock title="hero.tsx" code={`export function Hero() {\n  return <h1>Hello</h1>;\n}`} />
</Backdrop>
```

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `code` | `string` | — | Source code to render. Newlines split into lines. |
| `title` | `string` | `"hero.tsx"` | Filename shown in the chrome bar |
| `width` | `number` | `760` | Window width in pixels |
| `height` | `number` | `460` | Window height in pixels |
| `fontSize` | `number` | `16` | Code font size in pixels |
| `glassColor` | `string` | `"rgba(10, 10, 10, 0.6)"` | Card surface color. Keep alpha < 1 for glass refraction. |
| `staggerFrames` | `number` | `4` | Frames between each line's reveal |
| `showTrafficLights` | `boolean` | `true` | Show the dimmed macOS-style window controls |
| `aura` | `boolean` | `false` | Render an animated glow blob behind the glass. Leave off and supply a Backdrop image for the glass to refract. |
| `speed` | `number` | `1` | Playback speed multiplier |
| `className` | `string` | — | Optional className passed to the root container |

## Use when
- A landing or hero scene needs an animated code backdrop that reads as "premium dev tool."
- You want to showcase a code snippet with a styled editor chrome and no interactive narrative.
- The backdrop must stay transparent so the panel composites over a custom background.

## Don't use when
- The scene requires the code to be visibly typed out character by character — use `terminal-simulator` or `typewriter` instead.