Two Casings — Gold and Silver
The theme is distributed to every view via the Environment and switches instantly. Even the style of the face, hands, and numerals is crafted distinctly for each casing.
Gold — Hunter Case
Deep lapis enamel × gold-accented Roman numerals (IIII notation) · a central crest of crescent moon and eight-pointed star
An engraved case of aged gold (aged brass). A small window for the next alarm at the 6 o'clock position.
#8F7028
Lapis #101838
Gold Accent #D9B45C
Moon Gold #F2DC96
tint #A67C2E
Silver — Railroad Watch
White face · bold Arabic numerals · baton hands
The second hand is set in red, as is the custom of railroad watches
#9CA3AE
White Porcelain #FAFAF7
Iron Black #1A1C22
Red #B02E2E
tint #44546A
Setting the Time by Hand
No DatePicker is used. In place of the gesture of winding the crown, you drag the hands of the face itself to decide the ringing time. The face below can actually be dragged.
AM7:30
- Angle-to-Time Conversion — drag coordinates are converted to an angle with atan2, then quantized in steps of 6° for the minute hand and 30° for the hour hand (implemented as a pure function,
ClockAngleMath, and covered by tests). - Linkage — turning the minute hand makes the hour hand follow at 0.5°/minute. Crossing the 0-minute mark advances or reverts the hour (determined by a crossing from 45 to 15 minutes).
- Haptics — .sensoryFeedback(.selection) fires at every 1-minute step, returning the click of gears to your finger.
- Selected Hand — a brass-colored ring (knob) is shown at the tip of the hand, indicating which one is being operated.
- Confirmation — saved via the "Set to This Time" plate, converted into AlarmKit's Alarm.Schedule.relative.
The Murk of Time — Twilight and Dawn
The deeper the night, the more the face clouds into violet-indigo, like a vessel for the soul. At dawn, the murk is purified by light. At sunset, the season's constellation rises and glows upon the face. Try the slider below to move through a day.
21:00Evening
- Murk — from 16:00 into the evening, violet-indigo dregs fill from the edge of the face, reaching their peak between 23:00 and 4:00. Through a multi-layer gradient in multiply blend, the ivory ground sinks like the "bottom of a vessel."
- Purification of Dawn — between 4:00 and 6:00, light from above (screen blend) dissolves the dregs. The hero watch lives this cycle at all times, synced to the actual time.
- Seasonal Constellation — at sunset (±2 hours), the season's constellation rises in gold. Spring = Leo / Summer = Scorpius / Autumn = Cassiopeia / Winter = Orion. It lingers faintly through the night.
- SwiftUI Implementation — the time coefficient is computed with
TimelineView(.everyMinute), and reflected in the Canvas's multiply/screen rendering and the constellation path's opacity.
The Cover of the Twelve Houses — A Constellation Crest for Every Month
Deep lapis enamel is set into the center of the cover, and with each new month, that month's house (constellation) is re-engraved in gold — accompanied by a crescent moon and its traditional Japanese month name. The hero watch's cover bears the crest of the present month.
The Turning Houses — · The stars have depth and keep turning through space. Stroke them, and momentum carries them on.
The design tone follows the antique pocket watch's "lapis enamel × aged gold" (reference: design-refs/ref-watch.jpg). The constellation lines are a stylized, simplified form. In SwiftUI, the crest for each month is chosen with Calendar.current.component(.month) and rendered onto the Canvas in gold accent.
Arcana — Mysteries of the Twelve Houses
Stroke the face in a circle, and wind it twelve times, and the art manifests. By night, Arcana (12 kinds, one per house); by day, Solar Arts (6 kinds); with the cover closed, Seals (6 kinds) — 24 kinds across three systems on the actual device. This page's demonstration lets you try seven representative examples.
Magic for when the cover is open
Magic for when the cover is closed (Seals, on the actual device)
The Ringing Hour (when the alarm bell sounds)
When the hour arrives, the whole screen flickers with gold, and the magic circle unfolds bearing the inscription, "The hour hath come."
- Winding Detection — tracks the cumulative rotation angle about the center of the face; every 2π is one winding. The magic circle's diamonds light up. Leave it for 4 seconds, and the winding dissipates.
- Purge of Dawn's Light — Purifies the murk with light. The face is forced into its dawn state, and a burst of gold runs through.
- Storm of Constellations — The season's constellation blazes up, and its stars scatter from the watch.
- Rewinding of Time — The hands race backward at speed, and the magic circle spins in reverse.
- Barrier of Violet Lightning — A violet-indigo flash and shockwave. The magic circle turns violet.
- Crimson Blaze — Embers rise through 3D space around the watch (perspective-projected particles, with flicker).
- Whirl of Blue Waves — Ripples spread underfoot, and spray arcs as it is drawn by gravity.
- Ring of the Gale — Streams of wind circle around the watch, fore and aft, and its pressure sets the watch swaying.
- SwiftUI Implementation — rotation detection accumulates
atan2(added to ClockAngleMath); magic is unified under the protocolSpellEffect, with slot settings stored in UserDefaults. When ringing, AlarmKit's alerting state is detected, triggering the grand effect via fullScreenCover.
Screen Composition
The Home screen is always the watch. The list, editor, and timer are built as working surfaces on the cover's inner face, engraved plates set upon the same felt ground.
Thou Shalt Set the Hour Free
Next Alarm — Tomorrow 7:30 AM
Long-press to switch theme
Home (RootView)
Alarm Bell
AM7:30
Weekdays · Snooze 9 min
AM9:00
Weekends
PM10:15
Once only
List (AlarmListView)
Set the Time
AM7:30
Label — "Morning Tea" · Snooze 9 min
Set to This TimeEdit (AlarmEditorView)
Timer
Timer (TimerView)
Live Activity / Dynamic Island
The timer and stopwatch live on in the Lock Screen and the Dynamic Island. With a single brass accent on black, they preserve the presence of the pocket watch even within the system UI.
POCKETCHIME
Tea Timer
4:23
Lock Screen — driven by Text(timerInterval:)
Dynamic Island (compact) — watch face on the left, remaining time on the right
Typography and Color
The typeface is the system serif (New York / Hiragino Mincho). Numerals are set in tabular figures, and Latin labels are given wide letter-spacing, evoking an engraved inscription.
10:09
Set the Time
Open the cover, and the day begins. Wind the hands, and await the hour.
RAILROAD GRADE · EST. 2026
| Felt ground (background) | #24331F → #0B110A | |
| Ink text (body) | #EFE6CD | |
| Brass (accent) | #C9A24B | |
| Crimson (second hand, warning) | #A03A2A | |
| Steel (Silver theme) | #AEB6C2 |
| Design | Implementation (per DESIGN.md) |
|---|---|
| Opening and closing the cover | rotation3DEffect(axis:(0,1,0), anchor:.leading) + spring 1.3s |
| Hand movement | Driven continuously with TimelineView(.animation) |
| Dragging the hands | ClockAngleMath (a pure atan2 function, covered by unit tests) |
| Snooze | secondaryButtonBehavior: .countdown + 9-minute postAlert |
| Remaining-time display | Live Activity via AlarmAttributes<PocketWatchMetadata> |
| Theme propagation | Consistent through to the Widget via tintColor and metadata.themeName |
