About
A calm row of in-view count-up stats on glassy cards; numbers animate from zero on scroll-in via IntersectionObserver + rAF. No dependencies, themeable, reduced-motion aware.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Atlas Stat Band to your project and fits it to your theme.
Code
How Atlas Stat Band is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"use client";
import StatBand from "@/components/ui/statband";
export default function StatBandDemo() {
return (
<div
style={{
padding: "48px 24px",
background: "oklch(0.21 0.018 268)",
color: "oklch(0.97 0.008 270)",
fontFamily: "ui-sans-serif, system-ui, sans-serif",
}}
>
<StatBand
accent="oklch(0.86 0.155 135)"
stats={[
{ value: 46, label: "integrations, free on every plan" },
{ value: 3, label: "steps from idea to a running automation" },
{ value: 100, suffix: "%", label: "of everything is approved by you first" },
{ value: 0, suffix: " kr", label: "to start — no card required" },
]}
footnote="Numbers that hold: you set the pace and approve every step."
/>
</div>
);
}