Glass Code Block

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

A code window primitive that ditches the flat black rectangle look. The card uses backdrop-filter: blur() over a slow animated aura for real refraction; a 1px linear-gradient ring fakes a top-edge highlight; macOS-style traffic lights are dimmed to 60% so they don't shout. Lines fade in one after another with a tiny upward slide via Sequence. Syntax highlighting is a small built-in regex tokenizer — no highlight.js dependency.

Installation

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

Usage

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

Notes

Tokenizer scope

The built-in tokenizer covers JS/TS keywords, strings, numbers, and // comments. It is intentionally not a full parser — for richer highlighting, replace tokenizeLine with your own and keep the same Token shape.

Backdrop filter requires content behind

The frosted glass effect only shows refraction if there is something behind it. The component renders a slow built-in aura. If you wrap it inside another scene, make sure that scene has visual content.