# Heat Trace
URL: https://remocn.dev/docs/logo-stings/heat-trace

A heat line traces the wordmark in warm-to-cool gradient colours, with a tagline beneath.

- Install: `npx shadcn@latest add @remocn/heat-trace`
- Vibe: premium
- Natural length: 90f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/heat-trace
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { HeatTrace } from "@/components/remocn/heat-trace";

const HeatTraceScene = () => (
  <HeatTrace
    name="remocn"
    tagline="Launch-video scenes for Remotion. Copy, paste, render."
    eyebrow="New"
  />
);

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

A heat line is traced along the name in warm-to-cool gradient colours, then the glow cools and the tagline rises word by word, with an optional `eyebrow` above. Pass `name` or your own `logo`, plus `tagline` and `accent`. Ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `name` | `string` | `"remocn"` | Name that the heat line traces; Remocn renders the real logo. |
| `logo` | `React.ReactNode` | — | Mark set before the name, replacing the default. |
| `tagline` | `string` | `"Launch-video scenes for Remotion. Copy, paste, render."` | Line that rises under the name. |
| `eyebrow` | `string` | `""` | Small line above the name; empty by default. |
| `accent` | `string` | `"#3B5BFD"` | Accent colour that tints the heat gradient. |
| `background` | `string` | — | Stage fill colour; overrides the theme background. |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline; 1 is normal speed. |
| `theme` | `"dark" \| "light"` | `"dark"` | Dark or light palette and ground. |

## Use when
- A developer-tool or hardware launch where a thermal glow suits the brand.
- A logo reveal that needs an optional eyebrow above and a tagline below.
- A sign-off that should feel energetic but polished.

## Don't use when
- You want a cool, calm reveal — use `first-light`.
- The logo should be written by a moving point of light — use `light-trail-write`.
- You want the mark forged out of noise — use `noise-forge-sting`.