# Cooling Type
URL: https://remocn.dev/docs/typography/cooling-type

A sentence types out glowing hot and cools to ink, ending on an italic serif word and a caret.

- Install: `npx shadcn@latest add @remocn/cooling-type`
- Vibe: premium
- Natural length: 110f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/cooling-type
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { CoolingType } from "@/components/remocn/cooling-type";

const CoolingTypeScene = () => (
  <CoolingType
    text="What if your launch video could write itself?"
    accentWord="itself?"
    charFrames={1.6}
  />
);

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

Characters type in with a slightly irregular rhythm, each one starting in a hot color and cooling to the ink color; the accent word breathes in as serif italic and a caret finishes the line. Pass `text` and `accentWord`, and tune `charFrames` and `coolFrames` for pace; it ships light and dark through `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` | `"What if your launch video could write itself?"` | Sentence to type out |
| `accentWord` | `string` | `"itself?"` | Word in the text set in serif italic |
| `hot` | `string` | — | Color of freshly typed characters |
| `accent` | `string` | — | Color of the accent word and caret |
| `ink` | `string` | — | Settled text color |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark palettes |
| `ground` | `GshPresetId` | — | Gradient ground preset id |
| `groundParams` | `Partial<GradientParams>` | — | Partial gradient parameters to tune the ground |
| `startAt` | `number` | `BEAT.start` | Frame the first character appears |
| `charFrames` | `number` | `1.6` | Frames per character before pacing variation |
| `coolFrames` | `number` | `20` | Frames for a character to cool from hot to ink |
| `seed` | `number` | `5` | Seed for the typing rhythm jitter |

## Use when
- A question or hook line that should feel written live, ending on an emphasized word.
- A cinematic title beat over a gradient ground where typing energy matters more than speed.

## Don't use when
- You want a plain typed line with a blinking caret - use `typewriter`.
- You want every letter to land with a bounce - use `per-character-rise`.
- The text is a short label, not a sentence - use `tracking-in`.