# Italic Speed
URL: https://remocn.dev/docs/typography/italic-speed

A slanted caps word rides in on speed strips, with a serif italic subtitle under an underline.

- Install: `npx shadcn@latest add @remocn/italic-speed`
- Vibe: premium
- Natural length: 43f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/italic-speed
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ItalicSpeed } from "@/components/remocn/italic-speed";

const ItalicSpeedScene = () => (
  <ItalicSpeed title="FASTER" subtitle="Ship at race pace." accent="#3B5BFD" />
);

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

The word leans in from the side on speed strips, locks upright with an underline, and a serif italic subtitle fades in below. Pass `title` (set in capitals) and `subtitle`; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | `"FASTER"` | Word shown in slanted capitals |
| `subtitle` | `string` | `"Ship at race pace."` | Serif italic line under the underline |
| `accent` | `string` | `"#3B5BFD"` | Accent color (any valid CSS color) |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark palettes |
| `speed` | `number` | `1` | Playback speed multiplier |

## Use when
- A speed or performance claim such as Faster that should feel like it is moving.
- A short punchy title in capitals that needs a fast, racing entrance.

## Don't use when
- The word is long or lowercase and needs a calm entrance - use `soft-blur-in`.
- You want a heavy slam instead of a ride-in - use `lights-out`.
- You want a smooth stretch of the text - use `stretch-in`.