Due aspetti — oro e argento
Il tema è distribuito a tutte le viste tramite Environment e si commuta all'istante. Quadrante, lancette e persino lo stile dei numeri sono forgiati diversamente per ciascun aspetto.
Oro — orologio da caccia
Smalto blu lapis × numeri romani dorati (notazione IIII) · stemma centrale con falce di luna e stella a otto punte
Cassa cesellata in oro antico (ottone invecchiato). Alle ore 6 si apre una finestrella per la prossima ora stabilita
#8F7028
Lapislazzuli #101838
Doratura #D9B45C
Oro lunare #F2DC96
tinta #A67C2E
Argento — orologio ferroviario
Quadrante bianco · numeri arabi spessi · lancette a bastone
La lancetta dei secondi è in rosso, secondo l'usanza degli orologi ferroviari
#9CA3AE
Porcellana bianca #FAFAF7
Nero ferro #1A1C22
Rosso #B02E2E
tinta #44546A
Regola l'ora con le lancette
Non si usa il DatePicker. In luogo del gesto di caricare la corona, si trascinano le lancette stesse del quadrante per stabilire l'ora del rintocco. Il quadrante qui sotto si può trascinare davvero.
Mattino7:30
- Conversione angolo→ora — le coordinate del trascinamento si convertono in angolo con atan2, quantizzando la lancetta dei minuti a passi di 6° e quella delle ore a 30° (resa funzione pura come
ClockAngleMathe sottoposta a test). - Sincronia — girando la lancetta dei minuti, quella delle ore la segue a 0.5°/min. Quando si attraversa il minuto 0 l'ora avanza o retrocede (giudicato dal passaggio 45→15 minuti).
- Feedback tattile — a ogni passo di 1 minuto, .sensoryFeedback(.selection). Restituisce al dito lo scatto di un ingranaggio.
- La lancetta selezionata — un anello color ottone (la manopola) appare sulla punta della lancetta, indicando quale si sta manovrando.
- Conferma — si salva con la placca «Imposta a quest'ora». Viene convertito in Alarm.Schedule.relative di AlarmKit.
La torbidezza del tempo — il crepuscolo e l'aurora
Più la notte si fa profonda, più il quadrante si intorbida di violaceo, come un calice dell'anima. All'ora dell'aurora, la torbidezza viene purificata dalla luce. All'ora del tramonto, la costellazione della stagione affiora sul quadrante e risplende. Con il cursore qui sotto, prova a percorrere l'intera giornata.
21:00Crepuscolo
- Torbidezza — dalle 16 verso il crepuscolo, dal bordo del quadrante si colma una feccia violacea, massima fra le 23 e le 4 del mattino. Con una sfumatura multistrato in fusione moltiplicativa, il fondo avorio sprofonda come «il fondo di un calice».
- Purificazione dell'aurora — dalle 4 alle 6 una luce dall'alto (fusione a schermo) scioglie la feccia. L'orologio dell'eroe vive di continuo questo ciclo, in sincronia con l'ora reale.
- Costellazione stagionale — al tramonto (±2 ore) la costellazione della stagione affiora in oro. Primavera = Leone / estate = Scorpione / autunno = Cassiopea / inverno = Orione. Di notte permane come un fioco bagliore.
- Implementazione SwiftUI — con
TimelineView(.everyMinute)si calcola il coefficiente orario, riflesso poi nel disegno moltiplicativo/a schermo del Canvas e nell'opacità dei tracciati delle costellazioni.
Il coperchio dei dodici segni — lo stemma della costellazione che muta ogni mese
Al centro del coperchio è incastonato uno smalto blu lapis e, a ogni cambio di mese, il segno di quel mese (la costellazione) viene inciso di nuovo in oro. Accompagnato da una falce di luna e dall'antico nome giapponese del mese. Il coperchio dell'orologio dell'eroe indossa il motivo del mese corrente.
Costellazioni roteanti — · le stelle hanno profondità e continuano a ruotare nel vuoto. Accarezzandole per farle girare, prendono slancio
Il tono estetico s'ispira a quello degli orologi da tasca antichi, «smalto lapis × oro antico» (riferimento: design-refs/ref-watch.jpg). Le linee delle costellazioni sono una stilizzazione semplificata. In SwiftUI, il motivo che muta ogni mese si seleziona con Calendar.current.component(.month) e si disegna in doratura sul Canvas.
L'Arcana — il mistero sacro dei dodici segni
Accarezzando il quadrante con un movimento circolare e caricandolo per dodici giri, l'arte si manifesta. Di notte l'Arcana (12 specie dei dodici segni), di giorno le Arti Solari (6 specie), a coperchio serrato il Sigillo (6 specie) — sull'app reale, tre sistemi per 24 arti in tutto. La dimostrazione di questa pagina permette di provarne sette rappresentative.
L'arcana a coperchio aperto
L'arcana a coperchio serrato (sull'app reale, il Sigillo)
L'ora del rintocco (allo scattare della Campana Oraria)
Giunta l'ora stabilita, l'intero schermo lampeggia d'oro e il cerchio magico si dispiega insieme all'iscrizione «L'ora stabilita è giunta».
- Rilevamento della carica — traccia l'angolo di rotazione cumulativo attorno al centro del quadrante: un giro ogni 2π. S'accende un rombo del cerchio magico. Lasciandolo fermo per 4 secondi, la carica si dissolve.
- La Purificazione dell'Aurora — Purifica la torbidezza con la luce. Il quadrante passa forzatamente allo stato dell'aurora e lo attraversa un lampo dorato.
- La Tempesta delle Costellazioni — La costellazione della stagione avvampa e le stelle si disperdono dall'orologio.
- Il Riavvolgere del Tempo — Le lancette corrono all'indietro a gran velocità e il cerchio magico ruota in senso inverso.
- La Barriera del Fulmine Violaceo — Un lampo violaceo e un'onda d'urto. Il cerchio magico volge al viola.
- La Fiamma Cremisi — Attorno all'orologio, le faville si levano danzando in uno spazio 3D (particelle in proiezione prospettica, con tremolio).
- Il Vortice delle Onde Azzurre — Ai piedi si diffondono le increspature e gli spruzzi, attratti dalla gravità, tracciano archi.
- L'Anello del Vento Impetuoso — Correnti di vento orbitano girando davanti e dietro l'orologio, e la loro pressione lo fa oscillare.
- Implementazione SwiftUI — il rilevamento della rotazione è l'accumulo di
atan2(aggiunto a ClockAngleMath), le arcane sono unificate nel protocolSpellEffecte le impostazioni degli slot vanno in UserDefaults. Allo scattare, si rileva lo stato alerting di AlarmKit e si scatena la grande manifestazione con fullScreenCover.
Struttura delle schermate
La schermata principale è sempre l'orologio. L'elenco, la modifica e la Clessidra, come piani di lavoro sul retro del coperchio, sono montati con placche cesellate sullo stesso fondo di feltro.
Tu, libera l'ora stabilita
La prossima ora stabilita — domani, 7:30 del mattino
Tieni premuto per cambiare tema
Schermata principale (RootView)
Campana Oraria
Mattino7:30
Giorni feriali · snooze 9 minuti
Mattino9:00
Fine settimana
Pomeriggio10:15
Una volta sola
Elenco (AlarmListView)
Regola l'ora
Mattino7:30
Etichetta — «Tè del mattino» · snooze 9 minuti
Imposta a quest'oraModifica (AlarmEditorView)
Clessidra
Clessidra (TimerView)
Live Activity / Dynamic Island
La Clessidra e il Cronografo vivono nella schermata di blocco e nella Dynamic Island. Su fondo nero, con un solo tocco d'ottone, conservano l'aura dell'orologio da tasca anche dentro l'interfaccia di sistema.
POCKETCHIME
Clessidra del tè
4:23
Schermata di blocco — azionata da Text(timerInterval:)
Dynamic Island (compact) — a sinistra il quadrante, a destra il tempo rimanente
Composizione tipografica e colori
Il carattere è il serif di sistema (New York / Hiragino Mincho). Le cifre sono incise con numeri a larghezza fissa, e le etichette in lettere latine, con ampia spaziatura, evocano un'iscrizione cesellata.
10:09
Regola l'ora
Aprendo il coperchio, comincia il giorno. Carichi le lancette e attendi l'ora.
RAILROAD GRADE · EST. 2026
| Fondo di feltro (sfondo) | #24331F → #0B110A | |
| Inchiostro di china (testo) | #EFE6CD | |
| Ottone (accento) | #C9A24B | |
| Scarlatto (lancetta dei secondi, avvisi) | #A03A2A | |
| Acciaio (tema argento) | #AEB6C2 |
| Elemento di design | Implementazione (conforme a DESIGN.md) |
|---|---|
| Apertura e chiusura del coperchio | rotation3DEffect(axis:(0,1,0), anchor:.leading) + spring 1.3s |
| Il moto delle lancette | TimelineView(.animation) per l'azionamento continuo |
| Trascinamento delle lancette | ClockAngleMath (funzione pura basata su atan2 e sottoposta a test unitari) |
| Snooze | secondaryButtonBehavior: .countdown + postAlert 9 minuti |
| Visualizzazione del tempo rimanente | Live Activity con AlarmAttributes<PocketWatchMetadata> |
| Propagazione del tema | coerenza fino al Widget grazie a tintColor e metadata.themeName |