# Liquid Word
URL: https://remocn.dev/docs/typography/liquid-word

One word melts into a glowing gradient pool, then a new word rises out of it and sets.

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

## Installation

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

## Usage

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

const LiquidWordScene = () => <LiquidWord from="idea" to="product" />;

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

The `from` word holds, then melts under a swirl gradient, sags, drips and slumps into one pool. The `to` word rises out of the pool letter by letter from the center, and the liquid sets into solid ink. Pass `from` and `to` for your own words. It takes a `theme` prop and ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `from` | `string` | `"draft"` | The word that melts. |
| `to` | `string` | `"shipped"` | The word that re-forms out of the pool, crisp and kerned. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark ground; the component ships both. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `accent` | `string` | — | Kept for API parity; the liquid uses its own gradient palette. |

## Use when
- A before-and-after beat where an old word dissolves into the new one, such as draft turning into shipped.
- A playful transformation moment that needs a molten, organic feel instead of a clean crossfade.
- A tagline swap where the second word is the payoff and should land crisp after the melt.

## Don't use when
- The swap should read as an edit, like a correction - use `strikethrough-replace`.
- You need a quick, tidy word change beside a fixed prefix - use `inline-word-roll`.
- The scene must stay calm and corporate - use `fade-through` for a clean replacement.