# Prompt Restyle
URL: https://remocn.dev/docs/typography/prompt-restyle

A headline is restyled by prompt instructions, ending in a serif italic gradient 'you own'

- Install: `npx shadcn@latest add @remocn/prompt-restyle`
- Vibe: premium
- Natural length: 130f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/prompt-restyle
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { PromptRestyle } from "@/components/remocn/prompt-restyle";

const PromptRestyleScene = () => (
  <PromptRestyle headline="Launch videos from parts you own." highlight="you own" />
);

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

Small instruction lines are typed one after another, and after each the headline changes size, tracking and style, ending with the highlight phrase in a serif italic gradient. Pass `headline`, `highlight` and your own `instructions` (up to three); it ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `headline` | `string` | `"Launch videos from parts you own."` | The headline that gets restyled. |
| `highlight` | `string` | `"you own"` | Phrase set in serif italic gradient at the end. |
| `instructions` | `string[]` | — | Instruction lines typed in order; the last styles the highlight. |
| `accent` | `string` | `"#3B5BFD"` | Accent colour (any CSS colour). |
| `background` | `string` | — | Overrides the theme background colour. |
| `speed` | `number` | `1` | Playback multiplier; above 1 plays faster. |
| `theme` | `"dark" \| "light"` | `"dark"` | Colour scheme; ships light and dark. |

## Use when
- A beat showing how an AI prompt reshapes copy: typed instructions that make a headline bigger, tighter and styled.
- A product video for a design or editing tool where the headline visibly responds to commands.

## Don't use when
- You want a plain typed headline without the instruction chrome — use `typewriter`.
- The headline should simply swap words, not be restyled — use `strikethrough-replace`.