# Ruby Press
URL: https://remocn.dev/docs/typography/ruby-press

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

- Install: `npx shadcn@latest add @remocn/ruby-press`
- Vibe: clean
- Natural length: 134f @ 30fps

## Installation

```bash
npx 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.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `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` | `number` | `14` | 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` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark; picks the palette. |

## Use when
- A claim like subtitles for every market where the time frame keeps shrinking.
- A localization or speed beat that cycles through variations of one phrase.
- A sentence with one swappable noun and a short annotation per option.

## Don't use when
- The swapped words need a stable width — use `width-lock`.
- A word should be selected and retyped like an editor — use `select-replace`.
- The slot should be an inline roll — use `inline-word-roll`.