Glass Lens
A glass lens drop magnifies a headline word, glides to a clip and flattens into a call-to-action pill
$ pnpm dlx shadcn@latest add @remocn/glass-lensUsage
// src/Root.tsx
import { Composition } from "remotion";
import { GlassLens } from "@/components/remocn/glass-lens";
const GlassLensScene = () => (
<GlassLens
lines={["Every frame,", "composed."]}
focus={{ line: 0, word: 1 }}
cta="Start building"
src="/images/product.png"
/>
);
export const RemotionRoot = () => (
<Composition
id="GlassLens"
component={GlassLensScene}
durationInFrames={210}
fps={30}
width={1280}
height={720}
/>
);Headline lines rise in on the left and a glass drop slides in, settling on the focus word to magnify it. The drop then glides to the highlighted clip in the product pane, travels down to the call-to-action slot, flattens into a pill and fills with the accent, and the cta label and arrow land at frame 180. Pass lines, cta and your own src or children for the pane; it ships light and dark.
Props10
| Prop | Type | Default |
|---|---|---|
| lines | string[]["Every frame,", "composed."] Headline lines, set large on the left | |
| italicLast | booleantrue Set the last headline line in italic | |
| focus | { line: number; word: number }{ line: 0, word: 1 } Line and word index the lens stops on first | |
| cta | string"Start with remocn" Label inside the pill the lens becomes | |
| logo | React.ReactNode— Replaces the Remocn logo above the headline | |
| src | string— Screenshot for the product pane | |
| children | React.ReactNode— Custom product pane content; wins over src | |
| accent | string"#3B5BFD" Accent color of the pill and highlights | |
| speed | number1 Playback multiplier for the whole timeline | |
| theme | "dark" | "light""dark" Light or dark palette | |
- linesstring[]
Headline lines, set large on the left
Default
["Every frame,", "composed."] - italicLastboolean
Set the last headline line in italic
Default
true - focus{ line: number; word: number }
Line and word index the lens stops on first
Default
{ line: 0, word: 1 } - ctastring
Label inside the pill the lens becomes
Default
"Start with remocn" - logoReact.ReactNode
Replaces the Remocn logo above the headline
- srcstring
Screenshot for the product pane
- childrenReact.ReactNode
Custom product pane content; wins over src
- accentstring
Accent color of the pill and highlights
Default
"#3B5BFD" - speednumber
Playback multiplier for the whole timeline
Default
1 - theme"dark" | "light"
Light or dark palette
Default
"dark"