Glass Capsule

A glass capsule slides over the focus word of a two-line headline and magnifies it in italic.

Installation

$ pnpm dlx shadcn@latest add @remocn/glass-capsule

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { GlassCapsule } from "@/components/remocn/glass-capsule";
 
const GlassCapsuleScene = () => (
  <GlassCapsule lines={["Launch films", "that move."]} focus="move" accent="#3B5BFD" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="GlassCapsule"
    component={GlassCapsuleScene}
    durationInFrames={140}
    fps={30}
    width={1280}
    height={720}
  />
);

The two lines rise in, then a glass capsule glides over focus, magnifies it and swaps it to a serif italic while the capsule glows. Pass lines and focus (a word that appears in them); it ships light and dark through theme.

Props5

Prop	Type	Default
lines	string[]["Launch films", "that move."] Headline lines, shown top to bottom
focus	string"move" Word the glass capsule magnifies; must appear in lines
accent	string"#3B5BFD" Accent color (any valid CSS color)
speed	number1 Playback speed multiplier
theme	"dark" \| "light""dark" Ships light and dark palettes

linesstring[]
Headline lines, shown top to bottom
Default["Launch films", "that move."]
focusstring
Word the glass capsule magnifies; must appear in lines
Default"move"
accentstring
Accent color (any valid CSS color)
Default"#3B5BFD"
speednumber
Playback speed multiplier
Default1
theme"dark" | "light"
Ships light and dark palettes
Default"dark"