Skip to content
Orbit CSS radial UI composer

CSS smartwatch face with complications — Orbit example

This is what a fully-loaded watch face looks like in Orbit: a main analog clock with hour ticks and labels, three sub-dials with their own micro tick rings and hour markers, a date complication with a sliding three-day window, two pieces of curved text (an alarm reminder and a live digital readout), and a day-of-week label. The hands are PNG images that rotate based on the current time, updated every second from JavaScript.

This example is based on a real smartwatch face design. It’s the most complex demo in the Orbit example collection, and it shows what’s possible when you commit to building an entire complication-rich watch face out of regular DOM elements instead of SVG.

How it works

  • <o-arc> for curved text is what makes the alarm message and digital clock readout follow the bezel curve. Curving text in CSS is famously hard — Orbit’s <o-arc> element does it natively because the arc is a real DOM element with its own writing path.
  • Date complication uses three arcs (previous, current, next) on orbit-12 constrained to a 30° range with from-215. As days pass, the current arc text updates and the surrounding two slide visually with it.
  • Hands as PNG images instead of plain vector divs lets you draw ornate hand shapes (textured, beveled, with shadows) that would be tedious to do in pure CSS. They’re still rotated by Orbit — the --o-angle-composite CSS variable on the parent vector rotates the entire image.
  • setProperty('--o-angle-composite', ...) is the API for live rotation. Setting a CSS variable on the element triggers a re-paint without any layout thrash, which is why this watch can update at 1Hz without noticeable jank.

Customization

Replace the alarm text with weather:

document.querySelector('.w4 o-arc.demo-curved').innerHTML = '72°F SUNNY';

Make the digital readout 24-hour by removing the % 12 in the hour calculation.

Add a step counter by replacing the “500 • 30 • 12” curved text with a live value from a fitness API.

Credits: This example is inspired by Amazfitwatchfaces.

Use this in your project

Install Orbit CSS — note this example references /orbit-docs/images/minutes.png and /orbit-docs/images/hours.png for the hand graphics. Replace them with your own 132×132 and 78×78 PNGs.