# Rubberband Word
URL: https://remocn.dev/docs/typography/rubberband-word

A cursor grabs a word by its last letter, stretches it like elastic, and it snaps into a new word.

- Install: `npx shadcn@latest add @remocn/rubberband-word`
- Vibe: playful
- Natural length: 90f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/rubberband-word
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { RubberbandWord } from "@/components/remocn/rubberband-word";

const RubberbandWordScene = () => (
  <RubberbandWord word="stretch" snapWord="deliver" />
);

export const RemotionRoot = () => (
  <Composition
    id="RubberbandWord"
    component={RubberbandWordScene}
    durationInFrames={130}
    fps={30}
    width={1280}
    height={720}
  />
);
```

A cursor reaches in, grabs the last letter of `word` and pulls it out on a taffy band while the letters spread and squash. On release the word snaps back, overshoots, and swaps to `snapWord`, closing with an accent period. Pass `word` and `snapWord`. It takes a `theme` prop and ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `word` | `string` | `"tension"` | The word the cursor grabs by its last letter. |
| `snapWord` | `string` | `"release"` | What the word becomes on the snap. Empty keeps the word and only accents it. |
| `period` | `boolean` | `true` | Close the final word with an accent period. |
| `accent` | `string` | `"#3B5BFD"` | Color of the pulled letter and the closing period. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark ground; the component ships both. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |

## Use when
- A tension-and-release beat where a word is pulled tight and then snaps into its resolution.
- A tagline that turns one word into another with a physical, elastic gesture.
- A playful interaction moment where a cursor is part of the story.

## Don't use when
- The word change should morph letters smoothly, with no cursor - use `kinetic-morph-text`.
- You just want an edit-style swap - use `strikethrough-replace`.
- A single word only needs to pop onto screen - use `spring-scale-in`.