# Pulse Line
URL: https://remocn.dev/docs/typography/pulse-line

A heartbeat-style pulse runs through 'Every frame has a pulse.' with the last word in teal

- Install: `npx shadcn@latest add @remocn/pulse-line`
- Vibe: premium
- Natural length: 103f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/pulse-line
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { PulseLine } from "@/components/remocn/pulse-line";

const PulseLineScene = () => (
  <PulseLine text="Every frame has a pulse." highlight="a pulse." beats={2} />
);

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

A heartbeat pulse travels through the headline glyphs and lights the highlight phrase in an aurora gradient, then the caption fades in. Pass `text`, `highlight`, `caption` and `beats` (1 to 4 pulses); it ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"Every frame has a pulse."` | The headline the pulse runs through. |
| `highlight` | `string` | `"a pulse."` | Trailing phrase tinted with the aurora gradient. |
| `caption` | `string` | `"Motion components for Remotion. Copy one in, own every frame."` | Small line under the headline; empty to hide. |
| `beats` | `number` | `2` | Number of pulses, from 1 to 4. |
| `accent` | `string` | `"#3B5BFD"` | Accent colour (any CSS colour). |
| `speed` | `number` | `1` | Playback multiplier; above 1 plays faster. |
| `theme` | `"dark" \| "light"` | `"dark"` | Colour scheme; ships light and dark. |

## Use when
- A product beat about speed or liveness where a heartbeat pulse runs through the headline.
- A tagline scene that needs a glowing one-line statement with a short caption below.

## Don't use when
- You want a calm sweep of light across the text — use `shimmer-sweep`.
- The line should be written out rather than pulsed — use `typewriter`.