Soft Focus Clock

Heroes

About

A soft-focus clock hero: the time counts up, rests blurred, then snaps sharp when you hover it — on a calm sage backdrop with breathing rings. A tunable landing or opening frame.

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

Code

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

Usage.tsx

'use client';

import SoftFocusClock from "@/components/ui/soft-focus-clock";

const settings = {
  targetTime: '7:00',
  countDurationMs: 1600,
  blurStrength: 15,
  baseColor: '#bcc4bd',
  textColor: '#424942',
  showRings: true,
};

// ONLY DEFAULT EXPORT WILL BE TREATED AS A DEMO
export default function DemoOne(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return <SoftFocusClock {...s} />;
}