Components
ScatterClock
A clock counts up to a set time, then shatters into a rain of small falling digits as you scroll — the sage backdrop darkens to black and the digits turn silver, gathering back into the number when you scroll up. A scroll-driven hero / intro.
'use client';
import ScatterClock from "@/components/ui/scatter-clock";
const settings = {
targetTime: '7:00',
countDurationMs: 1600,
baseColor: '#bcc4bd',
textColor: '#424942',
silverColor: '#ebeeff',
scrollLengthVh: 220,
};
// ONLY DEFAULT EXPORT WILL BE TREATED AS A DEMO
export default function DemoOne(props: Partial<typeof settings>) {
const s = { ...settings, ...props };
return <ScatterClock {...s} />;
}