Word Stream
Voiceover-paced phrases building word by word while the line drifts left
Installation
$ pnpm dlx shadcn@latest add @remocn/word-streamUsage
Phrases are passed as a single string separated by |. Each phrase glides in decelerating, builds word by word while slowly drifting left, then accelerates out to the left and hard-cuts to the next phrase. The last phrase stays on screen.
// src/Root.tsx
import { Composition } from "remotion";
import { WordStream } from "@/components/remocn/word-stream";
const WordStreamScene = () => (
<WordStream text="introducing | one-tap checkout | for your store" />
);
export const RemotionRoot = () => (
<Composition
id="WordStream"
component={WordStreamScene}
durationInFrames={100}
fps={30}
width={1280}
height={720}
/>
);With Backdrop
The component renders transparent — supply the background via Backdrop. It ships single-theme; edit the copied file to re-theme colors.
import { Composition } from "remotion";
import { WordStream } from "@/components/remocn/word-stream";
import { Backdrop } from "@/components/remocn/backdrop";
const WordStreamScene = () => (
<Backdrop fill={{ type: "color", value: "#0b0b14" }}>
<WordStream
text="introducing | one-tap checkout | for your store"
color="#ffffff"
/>
</Backdrop>
);
export const RemotionRoot = () => (
<Composition
id="WordStream"
component={WordStreamScene}
durationInFrames={100}
fps={30}
width={1280}
height={720}
/>
);Syncing to a voiceover
wordGap is the number of frames between word reveals — match it to the speaking pace of the narration (at 30fps, wordGap={6} is 5 words per second). hold controls how long a finished phrase stays before the next one starts. The exported wordStreamLength(text, wordGap, hold) helper returns the frame on which the last word finishes resolving — use it as the lower bound of the Sequence.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
textrequired | string | — | Phrases separated by |. Words within a phrase are split on spaces. |
fontSize | number | 72 | Font size in pixels |
wordGap | number | 6 | Frames between consecutive word reveals |
hold | number | 18 | Frames a completed phrase holds before swapping to the next |
drift | number | 2 | Leftward crawl of the line in pixels per frame between the entry glide and the exit run-out (at fontSize 72, scales proportionally). 0 disables the crawl. |
color | string | "#171717" | Text color (any valid CSS color) |
fontWeight | number | 400 | CSS font-weight |
className | string | — | Optional className passed to the underlying span |