Run on

A breathless run-on sentence speeds up and scrolls away, then a full stop drops into a short promise line.

Installation

$ pnpm dlx shadcn@latest add @remocn/run-on

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { RunOn } from "@/components/remocn/run-on";
 
const RunOnScene = () => (
  <RunOn
    text="Open the old project and relink the fonts and nudge every keyframe and render and spot a typo and render it all again"
    promise="Or change one line."
    highlight="one line"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="RunOn"
    component={RunOnScene}
    durationInFrames={200}
    fps={30}
    width={1280}
    height={720}
  />
);

The text runs in word by word at an accelerating pace, joiner words like and dimmed, and scrolls up as it fills the frame. A final accent full stop slams in, the wall drains away, and the stop slides down to end the promise line, whose highlight phrase lights up. Pass a long text without its final period, plus promise and highlight. It ships light and dark.

Props8

Prop	Type	Default
text	string"Open last year’s project and relink the fonts and nudge every keyframe and render and spot a typo and render it all again" Long sentence to run on; its trailing punctuation is removed.
promise	string"Or change one line." Short line that follows once the long sentence drains away.
highlight	string"one line" Phrase inside promise that turns accent-colored.
joiners	string[]["and", "then"] Words dimmed within the run-on, such as and or then.
accent	string— Color of the full stop and highlight; overrides the theme accent.
background	string— Background fill; pass "transparent" to drop it.
speed	number1 Playback speed multiplier for the whole timeline.
theme	"dark" \| "light""dark" Light or dark palette.

textstring
Long sentence to run on; its trailing punctuation is removed.
Default"Open last year’s project and relink the fonts and nudge every keyframe and render and spot a typo and render it all again"
promisestring
Short line that follows once the long sentence drains away.
Default"Or change one line."
highlightstring
Phrase inside promise that turns accent-colored.
Default"one line"
joinersstring[]
Words dimmed within the run-on, such as and or then.
Default["and", "then"]
accentstring
Color of the full stop and highlight; overrides the theme accent.
backgroundstring
Background fill; pass "transparent" to drop it.
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"dark" | "light"
Light or dark palette.
Default"dark"