A scroll-driven stats section that paints large stat numbers and labels onto the inside wall of a WebGL cylinder, rotating the ring as the user scrolls, with a static accessible fallback for reduced motion.
"use client";
import LedgerCylinder from "@/components/ui/ledger-cylinder";
import { useRef } from "react";
const PALETTE = {
stats: ["#b9cce4", "#efe8dc", "#c8b9ea"],
notes: "#e8d5b5",
status: "#9fd4c8",
bg: "#09080b",
};
export default function Demo() {
const scroller = useRef<HTMLDivElement>(null);
return (
<div
ref={scroller}
className="relative h-screen w-full overflow-y-auto overscroll-contain"
style={{ background: PALETTE.bg }}
>
<div className="flex h-[38%] min-h-40 flex-col items-center justify-end pb-6 text-center font-mono text-[11px] uppercase tracking-[0.2em] text-white/40">
Scroll inside the frame ↓
</div>
<LedgerCylinder
scrollRoot={scroller}
background={PALETTE.bg}
stats={[
{ value: "48K+", label: "Downloads", color: PALETTE.stats[0] },
{ value: "1.2M", label: "Requests / day", color: PALETTE.stats[1] },
{ value: "98.4%", label: "Uptime", color: PALETTE.stats[2] },
]}
notes={{
label: "Currently",
items: [
"Rebuilding the search index",
"Testing a calmer onboarding",
"Writing the v2 migration guide",
],
color: PALETTE.notes,
}}
status={{
lines: ["> uptime: 412 days", "> status: shipping"],
color: PALETTE.status,
}}
/>
<div className="flex h-[60%] min-h-48 items-center justify-center font-mono text-[11px] uppercase tracking-[0.2em] text-white/30">
End of section
</div>
</div>
);
}
