# Sparkline Thread
URL: https://remocn.dev/docs/numbers/sparkline-thread

A glowing sparkline climbs to a point while +212% counts up beside it

- Install: `npx shadcn@latest add @remocn/sparkline-thread`
- Vibe: data
- Natural length: 116f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/sparkline-thread
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { SparklineThread } from "@/components/remocn/sparkline-thread";

const SparklineThreadScene = () => (
  <SparklineThread
    values={[20, 26, 24, 35, 34, 49, 56, 64, 77]}
    metric="+212%"
    label="weekly renders"
  />
);

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

Data points pop in, a glowing thread draws through them and thickens into an area fill, then a bloom at the last point leads to the metric counting up with its label. Pass `values` (one number per point), `metric` and `label`. Ships dark and light via `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `values` | `number[]` | `DEFAULT_VALUES` | Data points along the line, in order. |
| `metric` | `string` | `"+212%"` | The stat that counts up, such as +212%. |
| `label` | `string` | `"weekly renders"` | Line under the metric. |
| `accent` | `string` | `"#3B5BFD"` | Accent color for the hero element. |
| `speed` | `number` | `1` | Playback multiplier. |
| `theme` | `"dark" \| "light"` | `"dark"` | Dark or light palette. |

## Use when
- A compact growth beat where a glowing trend line ends on a point and a +% stat counts up.
- A weekly or monthly usage trend with 8 to 16 data points and a single headline number.
- A quiet analytics scene that should feel more like a dashboard than a full chart.

## Don't use when
- You want a full chart with milestones and a big endpoint — use `growth-line`.
- You want labeled bars rather than a line — use `spring-bars`.
- You want the chart to reshape into something else — use `chart-morph`.