Sparkline Thread

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

Installation

$ pnpm dlx 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.

Props6

Prop	Type	Default
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	number1 Playback multiplier.
theme	"dark" \| "light""dark" Dark or light palette.

valuesnumber[]
Data points along the line, in order.
DefaultDEFAULT_VALUES
metricstring
The stat that counts up, such as +212%.
Default"+212%"
labelstring
Line under the metric.
Default"weekly renders"
accentstring
Accent color for the hero element.
Default"#3B5BFD"
speednumber
Playback multiplier.
Default1
theme"dark" | "light"
Dark or light palette.
Default"dark"