Prototype showcase

own pace

A time management tool startup — digital and physical. This page collects the working browser prototypes in prototypes/.

Click any demo to open the full prototype in a new tab

Each card embeds a prototype from prototypes/ as an iframe — click one to open the full prototype in a new tab (the embeds are click-through, not interactive). The CodePen originals are linked on each card, along with the standalone file. The weather clock demo fetches live forecast data, so it needs network access.

CAVOK

Ceiling And Visibility OK — a Garmin watchface putting 24-hour weather, calendar, and activity data on your wrist: a 24-hour polar dial with the day/night cycle on the outer ring, weather layers in between, time and the next event in the center. Fully configurable through its companion website; 15+ supported devices, MIP and AMOLED.

  • 40+ Open-Meteo variables (forecast, marine, air quality) across 10 activity presets
  • Web configurator: 7-character watch code, visual layout editor, per-layer colors and scales
  • Free tier with native weather; $3/month (or $24/year) for high-res weather, Google Calendar sync, full customization
CAVOK watchface preview Open full site ↗
cavok-watch-production.up.railway.app Garmin Connect IQ Store Data from Open-Meteo

Simple Metric

A Garmin Connect IQ watch face for decimal time: the day treated as a 0–1 interval, shown as text and dials — decidays (a tenth of a day), centidays (a hundredth), millidays (a thousandth). Free; 5.0 stars, 3 reviews, 100+ downloads.

  • .5678 means 56.87% through the day: 50% is noon, 25% ≈ sunrise, 75% ≈ sunset; .0001 = 8.64 seconds
  • Dial sizes, colors, text offsets, and the position of 0 are configurable from the phone
  • v0.3.0 (11 KB) — variable dial count and settings; by cpt.matei; contact matei[at]copot.eu
Simple Metric preview Open in Connect IQ Store ↗
Connect IQ Store: Simple Metric Wikipedia: Decimal time

Year clock

A single year rendered as a clock face: a minute/second ring, a 24-hour ring, and a ring with one tick per day for all 365 days. Comments in the code describe the idea as “think of the hour hand as the sun” and hour ticks as “10s of minutes”.

  • Controls: start date/time, hands, seconds hand, time speed
  • Code notes an open to-do list: hand style, 30-min marker, special days (moon phases?), clearer division between years
Open full prototype ↗
Open standalone CodePen original

Ordinal calendar — full year

One full year (2022 by default) as a seven-column grid. Each day is numbered by its ordinal index within the year, with the month and day-of-month underneath. Alternating shading highlights odd weekdays and odd months.

  • Controls: year, week start (Monday-based by default, optional Sunday-based)
Open full prototype ↗
Open standalone CodePen original

Ordinal calendar — range

Same ordinal-day numbering, but over an arbitrary range instead of a year — something like “100 days”. Defaults in the prototype: a range titled “Gym”, starting today, 100 days long.

  • Controls: title, start date, length, week start
Open full prototype ↗
Open standalone CodePen original

24-hour weather clock

A 24-hour clock with the hourly forecast drawn around it. Fetches live data from open-meteo (defaults: latitude 48.1702, longitude 17.2127) — temperature, humidity, precipitation, cloud cover, visibility, wind speed, plus 15-minute arcs for sun incidence, shortwave radiation and sunshine duration.

  • Controls: start date/time (or “random time”), hands, speed, weather display toggles
  • Has a “save svg” button to download the clock as an SVG file
Needs network access to fetch the weather forecast (a demo-weather option exists in the code but is off by default).
Open full prototype ↗
Open standalone CodePen original

Global clock — north

A 24-hour clock drawn over an azimuthal equidistant projection of the north, so the map follows the same center as the clock. Comments describe the same idea: “think of the hour hand as the sun”, hour ticks are “10s of minutes”.

  • Controls: start date/time, hands, speed, timezone offset (a “world phase” rotates the clock against the map)
  • Background map image is loaded from Wikimedia Commons
Open full prototype ↗
Open standalone CodePen original