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

Props

PropTypeDefaultDescription
code
stringSource code to render. Newlines split into lines.
title
string"hero.tsx"Filename shown in the chrome bar
width
number760Window width in pixels
height
number460Window height in pixels
fontSize
number16Code 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
number4Frames between each line's reveal
showTrafficLights
booleantrueShow the dimmed macOS-style window controls
speed
number1Playback speed multiplier
className
stringOptional className passed to the root container