Relógio flip
Relógio digital flip com tela cheia, modo 12/24 horas e segundos opcionais.
Sincronizando hora
AM
--
--
Horas
--
--
Minutos
--
--
Segundos
O que é um relógio flip?
Um relógio flip é um relógio digital que exibe a hora com animações de cartões que viram, inspirado nos clássicos relógios mecânicos flip do meio do século XX. Esses relógios icônicos tornaram-se populares por seu apelo visual único e charme nostálgico, usando cartões fisicamente virando para exibir os números em mudança.
Esta ferramenta recria perfeitamente o efeito clássico do relógio flip com animações realistas de virar página a cada mudança de dígito. Funciona diretamente no seu navegador sem downloads, com modo tela cheia, alternância de formato 12/24 horas e exibição opcional de segundos.
Perfeito para: relógio de mesa, decoração de escritório, fundo de transmissão ao vivo, timer de apresentação, técnica Pomodoro, telas grandes e mais. Todos os cálculos de tempo são feitos localmente, protegendo sua privacidade.
Esta ferramenta recria perfeitamente o efeito clássico do relógio flip com animações realistas de virar página a cada mudança de dígito. Funciona diretamente no seu navegador sem downloads, com modo tela cheia, alternância de formato 12/24 horas e exibição opcional de segundos.
Perfeito para: relógio de mesa, decoração de escritório, fundo de transmissão ao vivo, timer de apresentação, técnica Pomodoro, telas grandes e mais. Todos os cálculos de tempo são feitos localmente, protegendo sua privacidade.
Como Usar
Como usar
- O relógio exibe automaticamente a hora atual e atualiza em tempo real
- Clique no botão '12H/24H' para alternar o formato de hora
- Clique no botão 'Seconds/No seconds' para ativar ou desativar a exibição dos segundos
- Clique no botão 'Fullscreen' para entrar no modo de tela cheia
- As configurações são salvas automaticamente e restauradas na próxima visita
Dicas
- Use o modo de tela cheia em um projetor, display de parede ou tablet disponível quando o relógio precisar ficar visível a distância na sala.
- Desative a suspensão do sistema ou o escurecimento da tela se o relógio precisar permanecer visível durante reuniões, aulas ou eventos.
- Escolha o formato 24 horas para horários compartilhados entre diferentes regiões, e mostre os segundos apenas quando a precisão de tempo for relevante.
Casos de uso
Exibir um relógio legível em tela secundáriaMostre a hora local atual com cartões flip animados, texto de data localizado e um modo de tela cheia opcional para mesas, estúdios, salas de aula, oficinas ou fundos de transmissão ao vivo. Como a página lê apenas o relógio do sistema local pela API Date do JavaScript e usa transformações CSS3 para a animação de flip, ela nunca consulta um servidor de horário remoto e não exige login ou conta na nuvem para continuar funcionando.
Alternar entre modos de exibição práticosAtive ou desative os segundos e escolha o formato de 12 ou 24 horas dependendo de o relógio ser para cronometragem precisa, exibição ambiental ou tela de apresentação. Com os segundos ocultos, os cartões viram uma vez por minuto, produzindo um tic mais calmo adequado para displays ambientais; com os segundos ativos, os cartões de minuto e hora ainda viram juntos no início de cada minuto, mantendo a página fácil de ler à distância.
Manter a indicação de tempo visualmente clara sem configurar alarmesA página é um relógio de exibição, não um timer ou agendador. Use-a quando a visibilidade importar; use ferramentas de contagem regressiva ou pomodoro quando precisar de alertas, sessões ou controle de tempo decorrido. Mantenha o relógio do sistema preciso, pois a exibição segue o horário local do navegador.
Ativar segundos para cronometragem em estúdio, ocultar para ambienteAtivar a linha de segundos dá um batimento mais nítido para sessões de gravação e palestras ao vivo; desativar produz uma exibição mais calma para uma parede de escritório, lobby ou sala de espera onde o tiquetaquearia seria distrativo. O próprio flip é renderizado com uma transformação 3D CSS3 usando um valor de perspectiva, e os cartões usam um slot numérico de largura fixa para que o '2' mais largo ou o '1' mais estreito não desloque o layout e cause uma oscilação de 1 pixel a cada tic.
Combinar o relógio com uma contagem regressiva separada para sessõesA página é uma exibição, não um timer, então use-a junto com um aplicativo dedicado de pomodoro ou contagem regressiva quando sessões, palestras ou reuniões precisarem de um marcador visível de fim. O horário permanece consistente entre janelas, já que ambas as páginas leem o mesmo relógio do sistema. O botão de tela cheia usa a API requestFullscreen do navegador para projetar a página em um projetor, display de quiosque ou tablet sobrando sem mostrar a barra de endereços, o que é suficiente para um relógio de parede de sala de reunião e evita a configuração extra de um aplicativo de quiosque nativo.
Princípio técnico
Cada cartão de dígito é dividido em uma metade superior mostrando o valor atual e uma metade inferior mostrando o próximo valor, com uma terceira camada posicionada de forma absoluta que rotaciona de 0deg a -180deg ao redor do eixo X. O elemento pai recebe perspective: 600px para que a rotação seja percebida como profundidade 3D em vez de uma compressão vertical, e backface-visibility: hidden na camada que vira impede que a face traseira espelhada apareça. Os navegadores promovem a camada para sua própria superfície de composição quando will-change: transform está definido, então a animação de flip roda na GPU em vez de repintar o texto a cada frame.
O tempo em si vem de Date.now() em milissegundos desde a era Unix, mas um setInterval(fn, 1000) simples desvia porque os temporizadores disparam no escalonamento de melhor esforço e acumulam atraso. A ferramenta em vez disso agenda o próximo tick calculando 1000 - (Date.now() % 1000) para que a fronteira coincida com o segundo real do relógio, e usa requestAnimationFrame para a transição de flip para que a animação pause automaticamente quando a aba perde foco ou o monitor entra em suspensão. A Page Visibility API (document.visibilityState) ressincroniza os dígitos exibidos no visibilitychange, evitando um valor desatualizado quando o usuário retorna após vários minutos.
A formatação da exibição lê a localidade do navegador via Intl.DateTimeFormat com a opção hourCycle ('h23' para 24 horas, 'h12' para 12 horas com AM/PM). As transições de horário de verão são tratadas implicitamente porque os métodos Date como getHours() já retornam o horário local incluindo mudanças de fuso, então o relógio pula de 02:00 para 03:00 na primavera e mostra 01:00 duas vezes no outono sem lógica adicional.
O tempo em si vem de Date.now() em milissegundos desde a era Unix, mas um setInterval(fn, 1000) simples desvia porque os temporizadores disparam no escalonamento de melhor esforço e acumulam atraso. A ferramenta em vez disso agenda o próximo tick calculando 1000 - (Date.now() % 1000) para que a fronteira coincida com o segundo real do relógio, e usa requestAnimationFrame para a transição de flip para que a animação pause automaticamente quando a aba perde foco ou o monitor entra em suspensão. A Page Visibility API (document.visibilityState) ressincroniza os dígitos exibidos no visibilitychange, evitando um valor desatualizado quando o usuário retorna após vários minutos.
A formatação da exibição lê a localidade do navegador via Intl.DateTimeFormat com a opção hourCycle ('h23' para 24 horas, 'h12' para 12 horas com AM/PM). As transições de horário de verão são tratadas implicitamente porque os métodos Date como getHours() já retornam o horário local incluindo mudanças de fuso, então o relógio pula de 02:00 para 03:00 na primavera e mostra 01:00 duas vezes no outono sem lógica adicional.
- Flip 3D: CSS transform: rotateX(-180deg) em uma camada absoluta, perspective: 600px no pai, backface-visibility: hidden para suprimir a face traseira espelhada
- Composição na GPU: will-change: transform promove o elemento que vira para sua própria camada para que as transições sejam compostas, não repintadas
- Tick sem desvio: atraso do setTimeout calculado como 1000 - (Date.now() % 1000) para que cada tick coincida com a fronteira real do segundo em vez de acumular desvio do temporizador
- Temporização da animação: requestAnimationFrame controla a transição de 0deg a -180deg, que o navegador limita automaticamente em abas em segundo plano
- Recuperação em segundo plano: a Page Visibility API escuta visibilitychange e relê Date.now() para que os dígitos saltem para o valor correto quando a aba recupera o foco
- Localidade e ciclo de horas: Intl.DateTimeFormat com hourCycle 'h23' ou 'h12' seleciona exibição de 24 horas ou 12 horas AM/PM a partir da localidade do sistema do usuário
- Controle de tela cheia: Element.requestFullscreen() e document.exitFullscreen() controlam o modo de exibição de parede com Esc como tecla padrão de saída
Exemplos
Uso no desktop
Redimensione a janela do navegador para encaixá-la em um canto da área de trabalho como um relógio permanente.Exibição em tela grande
Conecte um projetor ou tela grande, pressione F11 para tela cheia e exiba em salas de reunião ou eventos.Plano de fundo de transmissão ao vivo
Adicione uma fonte de navegador no OBS com a URL do flip clock como plano de fundo da sua transmissão.Perguntas frequentes
Qual fuso horário o relógio usa?
O fuso horário local do seu dispositivo, definido pelo sistema operacional. Para mostrar outro fuso, use uma ferramenta de relógio mundial dedicada. O relógio segue a noção de tempo do sistema, então VPNs e mascaramento de fuso não mudam isso.
Posso alternar entre o formato de 12 e 24 horas?
Sim. Alterne nas configurações. 12 horas mostra AM/PM; 24 horas mostra 00-23 sem AM/PM. Escolha um ou outro conforme sua preferência; algumas versões seguem o locale do sistema operacional por padrão.
Por que às vezes o ponteiro dos segundos pula mais de 1 segundo?
Throttling de aba em segundo plano. Quando você troca de aba, os navegadores reduzem a taxa de atualização; ao voltar, o relógio se ajusta pulando frames. Mantenha a aba em foco para uma animação suave. Se ele pula com a aba em foco, sua CPU está sobrecarregada — veja o que mais está rodando.
A animação de virada afeta o desempenho?
A animação CSS transform é acelerada por GPU e leve em dispositivos modernos. Em laptops ou celulares mais antigos, você pode ver uma leve travada uma vez por segundo. Desative a animação de virada nas configurações se preferir um mostrador estático.
Posso deixar rodando em tela cheia a noite toda?
Sim — ele foi pensado para uso em tela cheia como relógio de mesa ou cabeceira. Sistemas operacionais modernos vão diminuir o brilho ou apagar a tela a menos que você os mantenha acordados (defina 'nunca dormir' nas configurações de tela, ou use o NoSleep do SO). Em laptops, conecte na tomada; modos de suspensão por bateria pausam a aba.
Ele continua preciso ao longo de horas?
Sim. O relógio é movido pelo relógio do sistema, que se mantém sincronizado via NTP em dispositivos conectados. O desvio em 24 horas costuma ficar abaixo de um segundo num sistema operacional moderno.
Algo é enviado para algum servidor?
Não. O relógio lê o horário do seu dispositivo. Nada é registrado nem transmitido.