# Story Text
URL: https://remocn.dev/docs/social/story-text

Story-style text types in word by word on rounded gradient highlight bubbles that change style

- Install: `npx shadcn@latest add @remocn/story-text`
- Vibe: social
- Natural length: 138f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/story-text
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { StoryText } from "@/components/remocn/story-text";

const StoryTextScene = () => (
  <StoryText text="okay, it's live — the update you kept asking for is finally here" />
);

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

Words pop in one at a time with a caret, each sitting on a merged rounded highlight bubble that wraps across lines. After the last word the highlight cycles through outline, plain and filled again. Pass your sentence as `text`; `measure` sets the line width as a fraction of the frame. Ships dark and light via `theme`.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"okay, it’s live — the update you kept asking for is finally here"` | The sentence to type. Wraps onto lines inside the measure. |
| `measure` | `number` | — | Line width as a fraction of the frame, before wrapping. |
| `accent` | `string` | `"#3B5BFD"` | Color of the caret. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme. Ships dark and light. |
| `ground` | `GshPresetId` | — | gradients.sh preset id for the animated ground. |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the ground shader parameters. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |

## Use when
- An announcement caption ("okay, it's live") styled like a social story text sticker.
- A vertical launch clip that needs one readable sentence with personality before the demo.
- A casual, handmade-feeling beat where the highlight style shifts from filled to outlined and back.

## Don't use when
- The words should follow a voiceover with a karaoke highlight — use `caption-karaoke`.
- You want plain character-by-character typing with no bubbles — use `typewriter`.
- A short phrase should build in the center, pushing earlier words aside — use `kinetic-center-build`.