Hero Stat Bars

Remotion pieces · A number or a chart · MIT

Tap the picture to play it.

What it does

Two sides compared bar by bar. A head-to-head that draws itself.

Get it
git clone https://github.com/ncoulthurst/video-engine-remotion
cd video-engine-remotion
npm install
npx remotion render src/index.ts HeroStatBars out.mp4
Needs

Remotion 4.0.435 · d3, framer-motion, lottie-react

Re-skin

By props (colors, text, pictures, numbers)

Props (zod schema): title, subtitle, sideImage, teamA {name, color}, teamB {name, color}, stats[] {label, valueA, valueB, maxValue, suffix}, bgColor. Fonts and the muted grays come from src/shared.tsx (COLORS, about 20 values).

Size

1920 x 1080 · 9 s

License

MIT

From

ncoulthurst/video-engine-remotion

Everything from ncoulthurst/video-engine-remotion in the gallery

Back to the Asset Library