Coleção de designs de relógios digitais

• Clocks.dev é um site onde você pode explorar, em um só lugar, designs de relógios digitais que expressam a hora e a data atuais de várias maneiras
• Permite comparar diferentes formas de representação visual, como formas geométricas, arranjos numéricos, combinações de palavras, ponteiros, mostradores circulares e LCD
• É possível ver os designs por All time, This week e Newest, além de criar diretamente um novo design de relógio
• Inclui relógios com nomes que revelam o método de expressão ou o estilo, como number-field, word-field, binary-signal, swiss-railway e corner-date
• Como todos os relógios cadastrados são open source, o site pode ser usado tanto para apreciar os designs quanto para consultar ideias de implementação

---

Explorando diferentes formas de representar o tempo

• Clocks.dev reúne vários designs de relógios digitais
• É possível navegar pela lista com os filtros All time, This week e Newest, e criar um novo relógio em Create new clock

• Formas e ponteiros

  • geometric-proof: usa formas geométricas
  • three-lines: compõe o relógio com três linhas
  • precision-dial: usa um formato de mostrador de precisão
  • figure-hands, veiled-hands, floating-hands: representam os ponteiros de maneiras diferentes
  • minimal-disc, radial-field: mostram o tempo com base em formas circulares

• Números e palavras

  • binary-signal: design que usa sinais binários
  • number-field: compõe o tempo com um campo numérico de 1 a 12 e de 1 a 60
  • word-field: exibe a hora com combinações de palavras como FIVE, TEN, QUARTER, HALF, PAST e TO
  • mint-rounded, lock-screen, second-tilt: organizam a exibição visual baseada em números em estilos diferentes

• Data e informações adicionais

  • day-mood: mostra o período do dia e a temperatura em uma frase, como It’s slow evening o’clock 22°
  • corner-date, orbit-date: mostram a data junto com a hora
  • relógio de cores: associa os 86.400 segundos de um dia a uma entre 16.777.216 cores e exibe o código da cor atual
  • Galactic Standard Time: mostra a hora junto com informações de zona e trilha
  • Digital Quartz LCD: estilo LCD digital que inclui 1983, dia da semana, 24H e indicações de alarme, sinal, luz e início

• Conceitos individuais

  • temporal-exposure: design cujo nome remete à exposição do tempo
  • swiss-railway: aplica o estilo Swiss Railway

Open source e criador

• Todos os relógios cadastrados são fornecidos como open source
• O site foi criado por Lev Miseri

[GN⁺]

Comentários do Hacker News

• Fiz por diversão um relógio digital composto por relógios analógicos: https://mikespeed.com/clock

• Antes do boom da IA, criei à mão todos os watch faces experimentais com SVG e JavaScript
  Talvez não sejam obras incríveis, mas, como designer, tenho orgulho de ter aprendido o básico de programação sozinho e concluído isso: https://watchface.netlify.app/
  Também organizei o processo de criação em um texto: https://72mena.medium.com/designing-watch-faces-using-svgs-a...

  • Ao ver este trabalho, fiquei com vontade de voltar a fazer hardware e PCBs e criar algo para pendurar na parede
    Seria ainda melhor se a página onde o watch face funciona permitisse inserir a hora manualmente para ver como ele fica
  • Entrei para falar dos designs da Tokyoflash, então foi bom vê-los aqui

• Já está na hora de juntar os entusiastas de relógios do HN e criar um webring à moda antiga
  Lock Screen é parecido com meu relógio Filling Digit, em que números ocos são preenchidos com água de baixo para cima para mostrar os segundos
  O Alphabetical Clock também foi um tema bem comentado no HN, e o conceito de webring pode ser visto na Wikipedia

• Tentei recriar o Voutilainen Vingt-8 ISO com Svelte, que usei pela primeira vez: https://clocks.dev/clock/3b254b2789ec

  • É um conceito novo para mim, mas parece algo com que vou me acostumar rápido, e fiquei com vontade de ter um relógio de pulso assim

• No Chrome 150.0.7871.115 e no Windows, a partir de cerca de dois terços da página, a barra de rolagem desaparece e não é mais possível rolar

  • Já corrigi isso por enquanto, mas um problema de desempenho mais fundamental ainda precisa de investigação adicional
  • Considero um grande tabu no desenvolvimento web mexer no comportamento padrão de rolagem do navegador
  • O mesmo problema também ocorre no Firefox 152.0.5 no Windows 11

• Number Field parece ser a melhor forma de representar espacialmente um relógio numérico
  Para ficar perfeito, teria de mudar para o formato de 24 horas, mas isso seria só um pequeno ajuste, e a estrutura de 12 colunas facilita captar a hora aproximada de relance

• Fiz um relógio soroban usando um ábaco japonês, mas não consegui adicioná-lo à coleção porque usei animação baseada em CSS: https://soroban-clock.netlify.app

• Vale a pena ver também o 12 o’clocks de John Maeda
  A obra de 1996 me fez enxergar de forma nova como o tempo pode ser representado graficamente, e isso também pode ser confirmado no acervo do MoMA
  Especialmente por causa das obras com movimento suave, passei a odiar ponteiros de segundos que param a cada segundo, então troquei o mecanismo de todos os relógios da casa por um de segundos contínuos

• O relógio binário parece tratar a posição à esquerda do 8 não como a casa normal do 16, mas como a casa do 10
  Por isso, 10 horas é mostrado como 00010000 em vez de 1010, e 23 horas aparece como 00100011, o que parece estranho porque, interpretado como binário, dá 35

  • Em vez de converter a hora em um único número binário, ele converte cada dígito decimal em 4 bits
    Ou seja, 23 → 2 3 → 0010 0011 → 00100011

• Em alguns relógios há partes que parecem sutilmente desalinhadas
  O Number Field laranja parece dificultar distinguir 12:10 de 10:12, e o Word Field mostra letras não usadas como X, o que reduz a sensação de mistério de quando as palavras aparecem no Word Clock original
  Temporal Exposure tem a faixa da área desfocada fora do centro, e no Figure Hands o texto extrapola a área da ilustração

  • No Number Field, a hora fica sempre apenas na linha de cima, então 12:10 e 10:12 são exibidos de forma diferente
  • Se você quer dizer o Figure Hands, ainda há bastante espaço para melhorar o estilo geral
    Duas cores e tamanhos diferentes, além de uma fonte mais apropriada, provavelmente deixariam melhor