# Spring Bars
URL: https://remocn.dev/docs/numbers/spring-bars

Bars spring up with overshoot, one gradient bar highlighted under a 3.4x stat

- Install: `npx shadcn@latest add @remocn/spring-bars`
- Vibe: data
- Natural length: 127f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/spring-bars
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { SpringBars } from "@/components/remocn/spring-bars";

const SpringBarsScene = () => (
  <SpringBars
    values={[0.58, 0.72, 0.52, 0.66, 0.97, 0.62, 0.7]}
    accentIndex={4}
    value="3.4×"
    caption="Least sag under the same load"
  />
);

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

Bars drop in as coiled springs and compress to their heights with a bounce, then the chart morphs so the highlighted bar becomes a gradient hero under its stat and caption. Pass `values` (relative heights from 0 to 1), `accentIndex`, `value` and `caption`. Ships dark and light via `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `values` | `number[]` | — | Relative bar heights from 0 to 1; defaults to seven bars. |
| `accentIndex` | `number` | `4` | Index of the bar that becomes the hero. |
| `value` | `string` | `"3.4×"` | The hero stat, such as 3.4x. |
| `caption` | `string` | `"Least sag under the same load"` | Line under the hero stat. |
| `accent` | `string` | `"#3B5BFD"` | Accent color for the hero element. |
| `theme` | `"dark" \| "light"` | `"dark"` | Dark or light palette. |
| `speed` | `number` | `1` | Playback multiplier. |

## Use when
- A comparison beat where one bar should win, such as the stiffest or strongest option of several.
- A product-strength claim, such as 3.4x, shown with springy bars that settle under load.
- A playful bar chart where physical bounce supports the message.

## Don't use when
- You need labeled category axes and real units — use `log-rescale`.
- You want an LED, retro bar style — use `pixel-bars`.
- You want a bar that breaks through a target — use `off-the-charts`.