About
A custom mouse cursor that replaces the pointer with a tiny animated analog clock showing the real current time, built with a full-screen canvas overlay.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Clock Cursor to your project and fits it to your theme.
Code
How Clock Cursor is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import ClockCursor from "@/components/ui/clock-cursor";
export default function ClockCursorDemo() {
return (
<div
className="relative w-full h-screen flex items-center justify-center bg-neutral-950 text-neutral-200"
style={{ cursor: "none" }}
>
<ClockCursor />
<p className="text-sm text-neutral-400 tracking-wide">
Move your mouse around — the cursor is a tiny live clock.
</p>
</div>
);
}
More by felix-au
View all
Matrix Rain Cursor
10
Wind Stream Cursor
2
Constellation Cursor
1
Rainbow Comet Cursor