Strobe Words

Big words strobe in on flashing fields at a tightening rhythm, then land on a poster with the logo.

Installation

$ pnpm dlx shadcn@latest add @remocn/strobe-words

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { StrobeWords } from "@/components/remocn/strobe-words";
 
const StrobeWordsScene = () => <StrobeWords words={["Plan.", "Write.", "Render.", "Ship."]} accent="#3B5BFD" />;
 
export const RemotionRoot = () => (
  <Composition
    id="StrobeWords"
    component={StrobeWordsScene}
    durationInFrames={115}
    fps={30}
    width={1280}
    height={720}
  />
);

The words cycle on hard cuts across glow, dark and light fields, with beats that start slow and tighten, then the last word holds as a poster with the logo below. Pass words and optionally rhythm (frames per cut) and logo; it ships light and dark through theme.

Props6

Prop	Type	Default
words	string[]["Plan.", "Write.", "Render.", "Ship."] Words that strobe in order; the last one holds as the poster.
rhythm	number[]— Frames each cut holds. Defaults to a tightening beat.
logo	React.ReactNode— Replaces the default logo on the poster.
accent	string"#3B5BFD" Color of trailing punctuation on the dark and light fields.
theme	"dark" \| "light""dark" Light or dark ground; ships both.
speed	number1 Playback speed multiplier.

wordsstring[]
Words that strobe in order; the last one holds as the poster.
Default["Plan.", "Write.", "Render.", "Ship."]
rhythmnumber[]
Frames each cut holds. Defaults to a tightening beat.
logoReact.ReactNode
Replaces the default logo on the poster.
accentstring
Color of trailing punctuation on the dark and light fields.
Default"#3B5BFD"
theme"dark" | "light"
Light or dark ground; ships both.
Default"dark"
speednumber
Playback speed multiplier.
Default1