Skip to content
Orbit CSS radial UI composer

CSS chronograph watch face — Orbit example

A chronograph is the watch face where mechanical horology and information design meet: the main dial tells you the time, and three sub-dials track other things — usually elapsed seconds, elapsed minutes, and a 12-hour subcounter. The result is busy in the right way. It says “this watch does work.”

This example places the main clock face at the center and three smaller gravity-spot sub-clocks inside the main dial, each with its own ring of tick marks and tiny hands. The brand text “ORBIT” sits between them like a real luxury watch logo.

How it works

  • Three nested watches inside the main watch. Each small-clock is a complete sub-clock built from its own gravity-spot and orbits. Because each one creates a new local origin, the sub-hands rotate around the sub-center, not the watch center.
  • The three sub-clocks live on orbit-4 — they’re satellites at the same radius, so Orbit positions them automatically at 0°, 120° and 240° around the dial. No manual angle math.
  • The brand label is a fourth satellite on the same orbit-4. Its grow-5x makes it physically larger so it visually anchors the top of the dial. In a real watch, this is where you’d put your logo or model name.
  • --o-force: 200px on the gravity-spot sets the base size of the entire watch. Tweaking this is the easiest way to scale the whole composition without re-doing internal proportions.

Customization

Make the sub-dials live by binding each one to a different time source — main hands to current time, sub-clock #1 to elapsed time of a stopwatch, sub-clock #2 to a date complication, sub-clock #3 to a second timezone.

Restyle as a sport chronograph with red/yellow accents:

.small-clock .needle { background: var(--o-red); }
.brand { color: var(--o-yellow); font-weight: bold; }

Reduce sub-dial count by removing one of the three small-clock blocks — Orbit will redistribute the remaining two evenly.

Use this in your project

Install Orbit CSS and start from the markup above.