component

Clock

Procedural analog wall clock; hands track the system clock or a given IANA timezone.

⌖ Explore the library in 3D →

Add it

npx @runek/cli add clock

Pulls @react-three/fiber@^9.6.1, @runek/core@^0.13.0, three@^0.184.0.

Use it

import { Clock } from './runek/Clock'

<Clock position={[0, 0, 0]} />

Props

export interface ClockProps {
  position?: Vec3
  rotation?: Vec3
  /** Face radius in units. */
  radius?: number
  /**
   * IANA timezone, e.g. "Asia/Kolkata". Omit to inherit the world's `timezone`
   * (`<World timezone>`), then the local system time; if neither resolves, the
   * clock falls back to UTC.
   */
  timezone?: string
  /** Rim/frame color. Defaults to the world palette's `metal` slot. */
  frameColor?: string
  /** Dial color. */
  faceColor?: string
  /** Hour/minute hand and tick color. */
  handColor?: string
  /** Second hand + hub accent. Defaults to the world palette's `accent` slot. */
  accentColor?: string
}

Registry manifest

Browse the whole catalog in the gallery →.