Dois Acabamentos — Ouro e Prata
O tema é distribuído a todas as views via Environment e alterna instantaneamente. Cada acabamento é construído de forma distinta, incluindo o estilo do mostrador, dos ponteiros e dos algarismos.
Ouro — Relógio de Caçador
Esmalte azul-lazúli profundo × algarismos romanos dourados (grafia IIII) · emblema central de lua crescente e estrela de oito pontas
Caixa cinzelada em ouro envelhecido (latão envelhecido). Pequena janela às 6 horas mostrando a próxima hora marcada.
#8F7028
Lápis-lazúli #101838
Dourado #D9B45C
Ouro Lunar #F2DC96
tint #A67C2E
Prata — Relógio Ferroviário
Mostrador branco · algarismos arábicos espessos · ponteiros em barra
O ponteiro dos segundos é vermelho, seguindo a tradição dos relógios ferroviários
#9CA3AE
Porcelana Branca #FAFAF7
Ferro Negro #1A1C22
Vermelho #B02E2E
tint #44546A
Ajuste a Hora com os Ponteiros
Não se usa o DatePicker padrão. Em vez do gesto de girar a coroa, você arrasta os próprios ponteiros do mostrador para definir o horário do alarme. O mostrador abaixo pode ser arrastado de verdade.
Manhã7:30
- Conversão de Ângulo para Hora — As coordenadas do arrasto são convertidas em ângulo com atan2, e quantizadas em passos de 6° para o ponteiro dos minutos e 30° para o ponteiro das horas (implementado como função pura em
ClockAngleMath, sujeita a testes). - Sincronia — Ao girar o ponteiro dos minutos, o ponteiro das horas o acompanha a 0,5°/minuto. Ao cruzar os 0 minutos, a hora avança ou retrocede (determinado pela passagem de 45→15 minutos).
- Tátil — A cada minuto, um .sensoryFeedback(.selection). Devolve aos dedos a sensação de clique das engrenagens.
- Ponteiro Selecionado — Um anel cor de latão (botão) aparece na ponta do ponteiro, indicando qual está sendo operado.
- Confirmação — Salvo pela placa “Ajustar para este horário”. Convertido para Alarm.Schedule.relative do AlarmKit.
A Turvação do Tempo — Noite Sombria e Aurora
Quanto mais a noite avança, mais o mostrador se turva em violeta-anil, como um receptáculo da alma. Na hora da aurora, a turvação é purificada junto com a luz. Na hora do pôr do sol, a constelação daquela estação surge e brilha sobre o mostrador. Use o controle deslizante abaixo para percorrer um dia inteiro.
21:00Entardecer
- Turvação — das 16h ao entardecer, um sedimento violeta-anil se acumula a partir da borda do mostrador, atingindo o máximo entre 23h e 4h. Com um gradiente multicamadas em mescla de multiplicação, a cor de fundo marfim afunda como “o fundo de um receptáculo”.
- Purificação da Alvorada — Das 4h às 6h, uma luz vinda do alto (composição em tela) dissolve a névoa turva. O relógio principal vive esse ciclo constantemente, sincronizado com a hora real.
- Constelação da Estação — Ao pôr do sol (±2 horas), a constelação da estação surge em dourado. Primavera = Leão / Verão = Escorpião / Outono = Cassiopeia / Inverno = Órion. Durante a noite, permanece com um brilho tênue.
- Implementação em SwiftUI — O coeficiente horário é calculado com
TimelineView(.everyMinute), refletido na renderização de multiplicação/tela do Canvas e na opacidade do traçado da constelação.
A Tampa das Doze Casas — Emblemas Estelares que Mudam a Cada Mês
No centro da tampa está incrustado um esmalte azul-lazúli profundo, e a cada mudança de mês, a casa (constelação) daquele mês é regravada em dourado. Acompanhada por uma lua crescente e pelo nome tradicional japonês do mês. A tampa do relógio principal traz o emblema do mês atual.
Constelações Girantes — · As estrelas têm profundidade e continuam a girar no espaço. Ao deslizar o dedo, ganham inércia
O tom do design segue o estilo “esmalte lápis-lazúli × ouro envelhecido” dos relógios de bolso antigos (referência: design-refs/ref-watch.jpg). As linhas das constelações são uma versão estilizada e simplificada. Em SwiftUI, o emblema do mês é selecionado com Calendar.current.component(.month) e desenhado em dourado no Canvas.
Arcana — Os Mistérios do Zodíaco
Ao acariciar o mostrador em círculos e completar doze voltas, o feitiço se manifesta. À noite, Arcana (12 tipos do Zodíaco); de dia, Artes Solares (6 tipos); com a tampa fechada, o Selo (6 tipos) — no aplicativo real, são 24 tipos em três sistemas. Nesta página, a demonstração permite experimentar sete tipos representativos entre eles.
Magia ao abrir a tampa
Magia ao selar a tampa (no aplicativo real, o Selo)
A Hora do Toque (ao acionar o Sino das Horas)
Quando a hora marcada chega, toda a tela cintila em dourado, e o círculo mágico se expande junto à inscrição “Chegada é a hora marcada”.
- Detecção de Corda — Rastreia o ângulo de rotação acumulado ao redor do centro do mostrador; a cada 2π, uma volta completa. Os losangos do círculo mágico se acendem. Após 4 segundos de inatividade, a corda se dissipa.
- Purificação da Aurora — A luz purifica a névoa turva. O mostrador é forçado a transitar para o estado da alvorada, e uma explosão dourada percorre a cena.
- Tempestade das Constelações — A constelação da estação se incendeia, e as estrelas se dispersam a partir do relógio.
- Retrocesso do Tempo — Os ponteiros retrocedem em alta velocidade, e o círculo mágico gira ao contrário.
- Barreira do Relâmpago Violeta — Um clarão violeta-escuro e um impacto. O círculo mágico se torna violeta.
- Chama Carmesim — Fagulhas de fogo sobem ao redor do relógio no espaço 3D (partículas em projeção perspectiva, com oscilação).
- Redemoinho das Ondas Azuis — Ondas se espalham aos pés, e as gotas, puxadas pela gravidade, traçam um arco.
- Anel do Vento Fulminante — Correntes de vento circulam ao redor do relógio, passando por trás e pela frente, e a pressão do vento faz o relógio tremer.
- Implementação em SwiftUI — A detecção de rotação usa o acúmulo de
atan2(adicionado ao ClockAngleMath); as magias são unificadas no protocoloSpellEffect, com a configuração dos slots salva em UserDefaults. Ao tocar, o estado alerting do AlarmKit é detectado e a grande manifestação ocorre via fullScreenCover.
Estrutura das Telas
A tela inicial é sempre o relógio. A lista, a edição e o temporizador são compostos como painéis de trabalho no verso da tampa, montados em placas cinzeladas sobre o mesmo tecido de feltro.
Tu, liberta a hora marcada
Próxima hora marcada — amanhã às 7:30 AM
Pressione e segure para trocar de tema
Início (RootView)
Sino das Horas
Manhã7:30
Dias úteis · Soneca de 9 minutos
Manhã9:00
Fim de semana
PM10:15
Somente uma vez
Lista (AlarmListView)
Ajustar a hora
Manhã7:30
Rótulo — “Chá da manhã” · Soneca de 9 minutos
Ajustar para este horárioEdição (AlarmEditorView)
Temporizador
Temporizador (TimerView)
Live Activity / Dynamic Island
O Temporizador e o Cronômetro vivem na tela de bloqueio e na Dynamic Island. Com um toque de latão sobre fundo negro, mantêm a presença do relógio de bolso mesmo dentro da interface do sistema.
POCKETCHIME
Temporizador do chá
4:23
Tela de bloqueio — controlada por Text(timerInterval:)
Dynamic Island (compact) — mostrador à esquerda, tempo restante à direita
Tipografia e Cor
A tipografia usa a serifada do sistema (New York / Hiragino Mincho). Os números são gravados em algarismos tabulares, e os rótulos em caracteres latinos recebem espaçamento amplo entre letras, como uma inscrição cinzelada.
10:09
Ajustar a hora
Ao abrir a tampa, o dia começa. Dá-se corda aos ponteiros, e aguarda-se a hora.
RAILROAD GRADE · EST. 2026
| Tecido de feltro (fundo) | #24331F → #0B110A | |
| Caracteres em tinta (corpo de texto) | #EFE6CD | |
| Latão (destaque) | #C9A24B | |
| Escarlate (ponteiro dos segundos, alerta) | #A03A2A | |
| Aço (tema prata) | #AEB6C2 |
| Design | Implementação (conforme DESIGN.md) |
|---|---|
| Abertura e Fechamento da Tampa | rotation3DEffect(axis:(0,1,0), anchor:.leading) + spring 1.3s |
| Movimento dos Ponteiros | Movimento contínuo com TimelineView(.animation) |
| Arrastar o Ponteiro | ClockAngleMath (função pura de atan2, sujeita a testes unitários) |
| Soneca | secondaryButtonBehavior: .countdown + postAlert de 9 minutos |
| Exibição do Tempo Restante | Live Activity de AlarmAttributes<PocketWatchMetadata> |
| Propagação do Tema | Consistência até o Widget via tintColor e metadata.themeName |
