Deux boîtiers — or et argent
Le thème est distribué à toutes les vues via Environment, et bascule instantanément. Le style du cadran, des aiguilles et jusqu'aux chiffres est décliné différemment pour chaque boîtier.
Or — Savonnette
Émail bleu lapis × chiffres romains dorés (notation IIII) · croissant de lune et étoile à huit branches en motif central
Boîtier ciselé en or vieilli (laiton vieilli). À 6 heures, un petit guichet affiche la prochaine heure.
#8F7028
Lapis #101838
Doré #D9B45C
Or lunaire #F2DC96
tint #A67C2E
Argent — Lépine
Cadran blanc · chiffres arabes épais · aiguilles bâton
La trotteuse est montée en rouge, suivant l'usage de la Lépine.
#9CA3AE
Porcelaine #FAFAF7
Noir de fer #1A1C22
Rouge #B02E2E
tint #44546A
Régler l'heure avec les aiguilles
Point de DatePicker ici. Au lieu du geste de remontage de la couronne, fais glisser directement les aiguilles du cadran pour fixer l'heure sonnante. Le cadran ci-dessous peut réellement être déplacé par glissement.
Matin7:30
- Conversion angle → heure — les coordonnées du glissement sont converties en angle via atan2, puis quantifiées par pas de 6° pour l'aiguille des minutes et de 30° pour celle des heures (regroupé en fonction pure sous
ClockAngleMath, couverte par des tests). - Couplage — tourner l'aiguille des minutes entraîne l'aiguille des heures à raison de 0,5°/min. Franchir 0 minute avance ou recule l'heure (détecté au franchissement 45→15 min).
- Retour haptique — .sensoryFeedback(.selection) à chaque minute franchie. Le doigt retrouve la sensation crantée d'un rouage.
- Aiguille sélectionnée — un anneau couleur laiton (bouton) apparaît à la pointe de l'aiguille, indiquant celle que tu es en train de régler.
- Validation — l'enregistrement se fait via la plaque « Régler sur cette heure ». Elle est convertie en Alarm.Schedule.relative d'AlarmKit.
La Souillure du Temps — Crépuscule et Aube
À mesure que la nuit s'approfondit, le cadran se trouble d'un violet sombre, comme un vase de l'âme. À l'heure de l'aube, cette souillure est purifiée avec la lumière. À l'heure du coucher du soleil, la constellation de la saison se dessine et brille sur le cadran. Essayez de faire défiler une journée à l'aide du curseur ci-dessous.
21:00Soir
- Souillure — de 16h jusqu'au soir, une lie violet sombre envahit le cadran depuis son pourtour, atteignant son maximum entre 23h et 4h. Grâce à un dégradé multicouche en mode de fusion « produit », la teinte ivoire du fond s'enfonce comme « le fond d'un vase ».
- Purification de l'aube — de 4 h à 6 h, une lumière venue d'en haut (composition à l'écran) dissout la lie. La montre vedette vit perpétuellement ce cycle, calée sur l'heure réelle.
- Constellation de saison — au coucher du soleil (± 2 heures), la constellation de la saison en cours s'élève, dorée. Printemps = Lion / Été = Scorpion / Automne = Cassiopée / Hiver = Orion. La nuit, elle subsiste en faible lueur.
- Implémentation SwiftUI —
TimelineView(.everyMinute)calcule le coefficient horaire, répercuté sur le rendu en multiplication/écran du Canvas et sur l'opacité du tracé des constellations.
Le Couvercle des Douze Signes — le blason astral qui change chaque mois
Au centre du couvercle est serti un émail bleu lapis, où le signe (la constellation) du mois est regravé en or à chaque changement de mois — accompagné d'un croissant de lune et des noms de mois traditionnels japonais. Le couvercle de la montre vedette porte ainsi le motif du mois en cours.
Constellation en rotation — · les étoiles, empreintes de profondeur, continuent de tourner dans l'espace. Caresse-les pour les faire pivoter, et l'inertie prend le relais
Le ton du motif s'inspire du « émail lapis × or vieilli » des montres à gousset anciennes (référence : design-refs/ref-watch.jpg). Les lignes de constellation sont une forme stylisée et simplifiée. En SwiftUI, le motif du mois est choisi via Calendar.current.component(.month) et dessiné en doré sur le Canvas.
Arcane — Rites des Douze Signes
Caresse le cadran en dessinant des cercles ; remonte-le douze tours, et l'art se manifeste. De nuit, l'Arcane (douze variantes, une par signe) ; de jour, l'Art Solaire (six variantes) ; couvercle fermé, le Sortilège de Scellement (six variantes) — sur l'appareil réel, vingt-quatre variantes en trois systèmes. La démonstration de cette page en propose sept, représentatives de l'ensemble.
Magie lorsque le couvercle s'ouvre
Magie lorsque le couvercle est fermé (Sortilège de Scellement sur l'appareil réel)
L'heure sonnante (au déclenchement du Carillon)
Quand l'heure arrive, l'écran tout entier scintille d'or, et le cercle magique se déploie, gravé du sceau « L'Heure Est Venue ».
- Détection du remontage — l'angle de rotation cumulé autour du centre du cadran est suivi ; chaque tranche de 2π compte pour un tour, et un losange du cercle magique s'embrase. Reste immobile 4 secondes, et le remontage se dissipe.
- Purge de la Lumière de l'Aube — La lumière purifie la souillure. Le cadran bascule de force vers son état d'aube, et une explosion dorée déferle.
- Tempête des Constellations — La constellation de la saison s'embrase, et ses étoiles se dispersent loin de la montre.
- Rembobinage — Les aiguilles filent à rebours, tandis que le cercle magique tourne en sens inverse.
- Barrière Violette — Un éclair violet indigo, et un choc. Le cercle magique vire au violet.
- Brasier Écarlate — Des braises s'élèvent en tourbillonnant autour de la montre dans un espace 3D (particules en perspective, avec un scintillement).
- Maelström Azuré — Des ondulations se répandent sous tes pas, et les embruns s'arquent sous l'effet de la gravité.
- Anneau des Bourrasques — Des filaments de vent tournoient sans cesse autour de la montre, d'avant en arrière, et leur pression la fait vaciller.
- Implémentation SwiftUI — la détection de rotation cumule
atan2(ajouté à ClockAngleMath) ; la magie est unifiée sous le protocoleSpellEffect, et la configuration des emplacements va dans UserDefaults. Au déclenchement, l'état alerting d'AlarmKit est détecté pour une grande manifestation via fullScreenCover.
Composition des écrans
L'accueil, c'est toujours la montre. La liste, l'édition et le Sablier se présentent comme des plans de travail au dos du couvercle, composés en plaques ciselées sur ce même feutre.
Toi, libère l'Heure.
Heure suivante — demain à 7 h 30 du matin
Appui long pour changer de thème
Accueil (RootView)
Carillon
Matin7:30
Jours de semaine · Snooze 9 min
Matin9:00
Week-ends
Soir10:15
Une seule fois
Liste (AlarmListView)
Régler l'heure
Matin7:30
Étiquette — « Thé du matin » · Snooze 9 min
Régler sur cette heureÉdition (AlarmEditorView)
Sablier
Sablier (TimerView)
Live Activity / Dynamic Island
Le Sablier et le Chrono vivent sur l'écran verrouillé et dans la Dynamic Island. Sur fond noir, rehaussés d'une seule touche de laiton, ils conservent, jusque dans l'interface système, la présence de la montre à gousset.
POCKETCHIME
Sablier à thé
4:23
Écran verrouillé — piloté par Text(timerInterval:)
Dynamic Island (compact) — cadran à gauche, temps restant à droite
Typographie et couleurs
La police est la serif système (New York / Hiragino Mincho). Les chiffres sont gravés en chasse fixe (tabular figures), et les libellés latins, largement espacés, évoquent une inscription ciselée.
10:09
Régler l'heure
Quand le couvercle s'ouvre, le jour commence. Remonte l'aiguille, et attends l'heure.
RAILROAD GRADE · EST. 2026
| Feutre (fond) | #24331F → #0B110A | |
| Noir d'encre (texte) | #EFE6CD | |
| Laiton (accent) | #C9A24B | |
| Écarlate (trotteuse, alerte) | #A03A2A | |
| Acier (thème argent) | #AEB6C2 |
| Conception | Implémentation (conforme à DESIGN.md) |
|---|---|
| Ouverture et fermeture du couvercle | rotation3DEffect(axis:(0,1,0), anchor:.leading) + spring 1.3s |
| Mouvement des aiguilles | Entraînement continu via TimelineView(.animation) |
| Glissement des aiguilles | ClockAngleMath (fonction pure fondée sur atan2, couverte par des tests unitaires) |
| Répétition (Snooze) | secondaryButtonBehavior: .countdown + postAlert 9 min |
| Affichage du temps restant | Live Activity de AlarmAttributes<PocketWatchMetadata> |
| Propagation du thème | Cohérence jusqu'au widget grâce à tintColor et metadata.themeName |
