Dos acabados — Oro y plata
El tema se distribuye a todas las vistas mediante Environment y cambia al instante. Cada acabado define su propio estilo, incluidos la esfera, las agujas y los números.
Oro — Reloj de caza
Esmalte de lapislázuli añil × números romanos dorados (notación IIII) · emblema central de luna creciente y estrella de ocho puntas
Caja cincelada en oro envejecido (latón añejado). Pequeña ventana en la posición de las 6 con la próxima hora señalada.
#8F7028
Lapislázuli #101838
Dorado #D9B45C
Oro lunar #F2DC96
tint #A67C2E
Plata — Reloj de ferrocarril
Esfera blanca · números arábigos gruesos · agujas de bastón
El segundero se inserta en rojo, según la tradición de los relojes de ferrocarril
#9CA3AE
Porcelana blanca #FAFAF7
Negro hierro #1A1C22
Rojo #B02E2E
tint #44546A
Ajusta la hora con las agujas
No se utiliza un DatePicker. En lugar del gesto de dar cuerda a la corona, arrastras directamente las agujas de la esfera para fijar la hora de la alarma. La esfera de abajo se puede arrastrar de verdad.
a. m.7:30
- Conversión de ángulo a hora — Las coordenadas de arrastre se convierten en ángulo mediante atan2, y se cuantizan en pasos de 6° para el minutero y 30° para el horario (encapsulado como función pura en
ClockAngleMath, sujeta a pruebas). - Sincronización — Al girar el minutero, el horario lo sigue a razón de 0,5°/min. Al cruzar los 0 minutos, la hora avanza o retrocede (se determina al cruzar de 45 a 15 minutos).
- Retroalimentación táctil — .sensoryFeedback(.selection) en cada paso de 1 minuto, devolviendo al dedo la sensación de un engranaje al hacer clic.
- Aguja seleccionada — Un anillo (perilla) de color latón se muestra en la punta de la aguja para indicar cuál se está manipulando.
- Confirmación — Se guarda mediante la placa «Ajustar a esta hora», que se convierte en un Alarm.Schedule.relative de AlarmKit.
La Turbidez del Tiempo — Anochecer y Alba
Cuanto más avanza la noche, la esfera se va enturbiando de violeta añil, como el recipiente de un alma. A la hora del alba, la turbidez se purifica junto con la luz. A la hora del atardecer, la constelación de la estación se dibuja y brilla sobre la esfera. Prueba a recorrer un día completo con el control deslizante de abajo.
21:00Anochecer
- Turbidez — desde las 16 horas hasta el anochecer, un poso violáceo se acumula desde el borde de la esfera, alcanzando su máximo entre las 23 y las 4 horas. Mediante un degradado multicapa con mezcla de multiplicación, el color marfil de fondo se hunde como «el fondo de un recipiente».
- Purificación del alba — Entre las 4 y las 6, una luz descendente (compuesta en modo pantalla) disuelve la turbidez. El reloj protagonista vive este ciclo de manera constante, sincronizado con la hora real.
- Constelación de la estación — Al atardecer (±2 horas) emerge en dorado la constelación de la estación: primavera = Leo / verano = Escorpio / otoño = Casiopea / invierno = Orión. Durante la noche permanece con un tenue resplandor.
- Implementación en SwiftUI — El coeficiente horario se calcula con
TimelineView(.everyMinute)y se refleja en el dibujo por multiplicación/pantalla del Canvas y en la opacidad de la trayectoria de la constelación.
La Tapa de las Doce Casas — el emblema constelar que cambia cada mes
En el centro de la tapa se engasta un esmalte de lapislázuli añil, y cada vez que cambia el mes, la casa (constelación) correspondiente se regrava en oro. Va acompañada de una luna creciente y del nombre tradicional japonés del mes. La tapa del reloj protagonista luce el emblema del mes actual.
Las constelaciones que giran — · Las estrellas tienen profundidad y continúan girando en el vacío. Acarícialas para hacerlas girar con inercia.
El tono del diseño sigue el «esmalte de lapislázuli × oro envejecido» de los relojes de bolsillo antiguos (referencia: design-refs/ref-watch.jpg). Las líneas de las constelaciones son una versión simplificada y estilizada. En SwiftUI, el emblema mensual se selecciona con Calendar.current.component(.month) y se dibuja en dorado sobre el Canvas.
Arcana — Los sacramentos de las Doce Casas
Acaricia la esfera en círculos y, tras doce vueltas completas, el hechizo se manifiesta. De noche, Arcana (12 variantes de las Doce Casas); de día, Artes Solares (6 variantes); al cerrar la tapa, Sello (6 variantes) — en el dispositivo real hay 24 en total, repartidas en tres sistemas. En esta página puedes probar siete representativos de entre ellos.
Magia al abrir la tapa
Magia al sellar la tapa (Sello, en el dispositivo real)
El Instante del Tañido (al activarse la Campana del Tiempo)
Cuando llega la hora señalada, toda la pantalla titila en dorado y el círculo mágico se despliega junto a la inscripción «La hora señalada ha llegado».
- Detección del bobinado — Se registra el ángulo de rotación acumulado alrededor del centro de la esfera; cada 2π equivale a una vuelta completa, momento en que se iluminan los rombos del círculo mágico. Si se detiene durante 4 segundos, el bobinado se disipa.
- Purga de la Luz del Alba — La luz purifica la turbidez. La esfera fuerza su transición al estado del alba mientras un destello dorado la recorre.
- Tormenta de las Constelaciones — La constelación de la estación estalla en llamas y las estrellas se dispersan desde el reloj.
- Retroceso del Tiempo — Las agujas retroceden a gran velocidad y el círculo mágico gira en sentido inverso.
- Barrera del Relámpago Púrpura — Un destello violáceo y una onda de choque. El círculo mágico se torna púrpura.
- Llama del Loto Carmesí — Chispas de fuego ascienden en el espacio 3D alrededor del reloj (partículas con proyección en perspectiva y parpadeo).
- Vórtice de la Ola Azul — Ondas se expanden a sus pies mientras las gotas, atraídas por la gravedad, trazan un arco.
- Anillo del Viento Fugaz — Estelas de viento rodean el reloj por delante y por detrás en círculos, y su presión hace que el reloj se estremezca.
- Implementación en SwiftUI — La detección de rotación acumula
atan2(añadido a ClockAngleMath); la magia se unifica bajo el protocoloSpellEffect, y la configuración de los espacios se guarda en UserDefaults. Al sonar la alarma, se detecta el estado «alerting» de AlarmKit y se desencadena la gran invocación mediante fullScreenCover.
Estructura de pantallas
La pantalla de inicio es siempre el reloj. La lista, la edición y el temporizador se construyen como el reverso de la tapa: placas cinceladas sobre el mismo fieltro.
Tú, libera la hora señalada
Próxima hora señalada — mañana a las 7:30 AM
Mantén presionado para cambiar de tema
Inicio (RootView)
Campana del Tiempo
a. m.7:30
Días laborables · Posponer 9 min
a. m.9:00
Fin de semana
PM10:15
Solo una vez
Lista (AlarmListView)
Ajustar la hora
a. m.7:30
Etiqueta — «Té de la mañana» · Posponer 9 min
Ajustar a esta horaEdición (AlarmEditorView)
Temporizador
Temporizador (TimerView)
Live Activity / Dynamic Island
El temporizador y el cronómetro viven en la pantalla de bloqueo y en la Dynamic Island. Con un toque de latón sobre fondo negro, conservan el aura del reloj de bolsillo incluso dentro de la interfaz del sistema.
POCKETCHIME
Temporizador para el té
4:23
Pantalla de bloqueo — impulsada por Text(timerInterval:)
Dynamic Island (compacta) — la esfera a la izquierda, el tiempo restante a la derecha
Tipografía y color
La tipografía usa las fuentes serif del sistema (New York / Hiragino Mincho). Los números se graban en cifras tabulares, y las etiquetas en caracteres latinos llevan un tracking amplio, como si fueran inscripciones cinceladas.
10:09
Ajustar la hora
Al abrir la tapa, comienza el día. Da cuerda a las agujas y aguarda el tiempo.
RAILROAD GRADE · EST. 2026
| Fieltro (fondo) | #24331F → #0B110A | |
| Tinta negra (texto) | #EFE6CD | |
| Latón (acento) | #C9A24B | |
| Escarlata (segundero, alertas) | #A03A2A | |
| Acero (tema plata) | #AEB6C2 |
| Diseño | Implementación (conforme a DESIGN.md) |
|---|---|
| Apertura y cierre de la tapa | rotation3DEffect(axis:(0,1,0), anchor:.leading) + spring 1.3s |
| Movimiento de las agujas | Impulso continuo con TimelineView(.animation) |
| Arrastre de la aguja | ClockAngleMath (función pura de atan2, sujeta a pruebas unitarias) |
| Posponer | secondaryButtonBehavior: .countdown + postAlert de 9 min |
| Indicador de tiempo restante | Live Activity de AlarmAttributes<PocketWatchMetadata> |
| Propagación del tema | Coherencia hasta el Widget mediante tintColor y metadata.themeName |
