Glass Code Block
A premium frosted-glass code editor window with a regex tokenizer and line-by-line stagger reveal
Installation
$ pnpm dlx shadcn@latest add @remocn/glass-code-blockUsage
// 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}
/>
);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 |
background | string | "#0a0a0a" | Background color around the window |
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 |
speed | number | 1 | Playback speed multiplier |
className | string | — | Optional className passed to the root container |