Spring Bars

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

Installation

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

Props7

Prop	Type	Default
values	number[]— Relative bar heights from 0 to 1; defaults to seven bars.
accentIndex	number4 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	number1 Playback multiplier.

valuesnumber[]
Relative bar heights from 0 to 1; defaults to seven bars.
accentIndexnumber
Index of the bar that becomes the hero.
Default4
valuestring
The hero stat, such as 3.4x.
Default"3.4×"
captionstring
Line under the hero stat.
Default"Least sag under the same load"
accentstring
Accent color for the hero element.
Default"#3B5BFD"
theme"dark" | "light"
Dark or light palette.
Default"dark"
speednumber
Playback multiplier.
Default1