Ruby Press

A word in a sentence is pressed out and replaced from a list, with small glosses above.

Installation

$ pnpm dlx shadcn@latest add @remocn/ruby-press

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { RubyPress } from "@/components/remocn/ruby-press";
 
const RubyPressScene = () => (
  <RubyPress before="Subtitles for every market in" words={["a fortnight", "a morning", "one render"]} after="." />
);
 
export const RemotionRoot = () => (
  <Composition
    id="RubyPress"
    component={RubyPressScene}
    durationInFrames={170}
    fps={30}
    width={1280}
    height={720}
  />
);

Each entry in words is pressed down and swapped for the next inside a sentence built from before and after, with a small gloss rising above each. Pass before, words and after. It ships in light and dark through the theme prop.

Props8

Prop	Type	Default
before	string"Subtitles for every market in" Text before the swapping word.
words	string[]— Words pressed in order.
after	string"." Text after the swapping word.
hold	number14 Frames each state stays on screen before the next one.
accent	string— Accent color override; falls back to the theme accent.
background	string— Background color override; falls back to the theme background.
speed	number1 Playback speed multiplier for the whole timeline.
theme	"dark" \| "light""dark" Ships light and dark; picks the palette.

beforestring
Text before the swapping word.
Default"Subtitles for every market in"
wordsstring[]
Words pressed in order.
afterstring
Text after the swapping word.
Default"."
holdnumber
Frames each state stays on screen before the next one.
Default14
accentstring
Accent color override; falls back to the theme accent.
backgroundstring
Background color override; falls back to the theme background.
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"dark" | "light"
Ships light and dark; picks the palette.
Default"dark"