Orbital Clock

Component 147

About

This component shows the time in form of clock and on hover shows day and date.

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

Code

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

Usage.tsx

import { OrbitalClock } from "@/components/ui/orbital-clock";

export default function Home() {
  return (
    <main className="min-h-screen flex flex-col items-center justify-center gap-16 bg-background px-6 w-full">
      <div className="text-center space-y-2">
        <p className="text-[10px] uppercase tracking-[0.4em] text-muted-foreground font-mono">Local Time</p>
      </div>

      <OrbitalClock />

      <p className="text-xs text-muted-foreground font-mono tracking-wide">[ orbital clock ]</p>
    </main>
  )
}