Speed Ramp Word

Time slows on the key word as it warms to a gradient, with a timecode HUD

Installation

$ pnpm dlx shadcn@latest add @remocn/speed-ramp-word

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { SpeedRampWord } from "@/components/remocn/speed-ramp-word";
 
const SpeedRampWordScene = () => (
  <SpeedRampWord text="Everything changes in an instant." keyWord="instant" hud />
);
 
export const RemotionRoot = () => (
  <Composition
    id="SpeedRampWord"
    component={SpeedRampWordScene}
    durationInFrames={121}
    fps={30}
    width={1280}
    height={720}
  />
);

The phrase rushes across the frame, then time slows on the key word as it warms to a gradient, with a small timecode and speed readout slowing alongside. Pass text and keyWord; set hud to false to hide the readout. It ships light and dark.

Props6

Prop	Type	Default
text	string"Everything changes in an instant." The phrase that rushes across.
keyWord	string"instant" The word inside `text` that drops into slow motion. Defaults to the last word.
hud	booleantrue Show the small timecode and speed readout that slow down with the shot.
accent	string"#3B5BFD" Accent colour (any CSS colour).
theme	"dark" \| "light""dark" Colour scheme; ships light and dark.
speed	number1 Playback multiplier; above 1 plays faster.

textstring
The phrase that rushes across.
Default"Everything changes in an instant."
keyWordstring
The word inside `text` that drops into slow motion. Defaults to the last word.
Default"instant"
hudboolean
Show the small timecode and speed readout that slow down with the shot.
Defaulttrue
accentstring
Accent colour (any CSS colour).
Default"#3B5BFD"
theme"dark" | "light"
Colour scheme; ships light and dark.
Default"dark"
speednumber
Playback multiplier; above 1 plays faster.
Default1