ScatterClock

Heroes

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds ScatterClock to your project and fits it to your theme.

Code

How ScatterClock is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'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} />;
}