Components
A beautifully animated digital clock component that uses smooth SVG morphing transitions to display the current time. Each digit seamlessly transforms every second, creating a visually striking, modern timepiece perfect for landing pages, dashboards, or creative web projects.
Loading preview...
import { TimeClock } from "@/components/ui/time-morph-clock";
export default function DemoOne() {
return (
<TimeClock
// bg="#1A1A1A" // dark background
// accent="#FF4C4C" // digit morph color
// gradient="#FFE8E8" // soft gradient color
// className="w-full h-screen flex items-center justify-center"
// use24h={false} // switch to 12-hour format
// tickMs={1000} // update every second
/>
);
}