LED Ticker
A line of text scrolls across a retro LED dot-matrix with a gradient flash on the highlighted word
$ pnpm dlx shadcn@latest add @remocn/led-tickerUsage
// src/Root.tsx
import { Composition } from "remotion";
import { LedTicker } from "@/components/remocn/led-ticker";
const LedTickerScene = () => (
<LedTicker text="remocn is live" highlightWord="live" />
);
export const RemotionRoot = () => (
<Composition
id="LedTicker"
component={LedTickerScene}
durationInFrames={130}
fps={30}
width={1280}
height={720}
/>
);Text scrolls in from the right across a grid of LED dots with a short trailing glow, locks centered, and the highlightWord flashes through a warm-to-accent gradient. Pass text and highlightWord; the dot font covers A to Z, digits and common punctuation, and text is drawn in uppercase. Ships dark and light via theme.
Props5
| Prop | Type | Default |
|---|---|---|
| text | string"remocn is live" The line to scroll. Shown in uppercase on the dot matrix. | |
| highlightWord | string"live" Word that flashes in the gradient at the end. | |
| accent | string"#3B5BFD" Last color of the highlight gradient. | |
| theme | "dark" | "light""dark" Color scheme. Ships dark and light. | |
| speed | number1 Playback speed multiplier for the whole timeline. | |
- textstring
The line to scroll. Shown in uppercase on the dot matrix.
Default
"remocn is live" - highlightWordstring
Word that flashes in the gradient at the end.
Default
"live" - accentstring
Last color of the highlight gradient.
Default
"#3B5BFD" - theme"dark" | "light"
Color scheme. Ships dark and light.
Default
"dark" - speednumber
Playback speed multiplier for the whole timeline.
Default
1