# Path Text
URL: https://remocn.dev/docs/typography/path-text

Text starts along a loose hand-drawn path, then straightens into a clean line with an italic tail.

- Install: `npx shadcn@latest add @remocn/path-text`
- Vibe: premium
- Natural length: 86f @ 30fps

## Installation

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

## Usage

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

const PathTextScene = () => (
  <PathText text="From rough to ready." italicWords={1} looseness={0.15} />
);

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

The text is drawn along a wobbly path, then the path flattens and thins as the letters straighten into a clean line, with the last words in italic. Pass `text`, `italicWords` and `looseness`; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"From rough to ready."` | Text laid along the path |
| `italicWords` | `number` | `1` | Number of trailing words set in italic |
| `looseness` | `number` | `0.15` | How wobbly the starting path is; 0 is flat |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark palettes |
| `speed` | `number` | `1` | Playback speed multiplier |
| `accent` | `string` | — | Accent color for the stroke gradient |

## Use when
- A before and after message about going from rough to refined.
- A title that should feel written by hand before resolving into clean type.

## Don't use when
- You want text typed out character by character - use `typewriter`.
- You want a signature-style draw-on - use `shimmer-sweep`.
- You want a simple clean entrance - use `staggered-fade-up`.