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-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}
  />
);

With Backdrop

Renders transparent — supply the background via Backdrop:

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