Vitrine Fable · peça 07 · experimental

O dia inteiro em um dial de 24 horas

O Circadiano apaga a rolagem. Não há topo nem fim de página — há um mostrador. Você gira o dia e o corpo responde: cada hora acende a biologia e a conduta certa para aquele instante. Este guia conta como e por quê.

1 · A aposta formal

Quase todo site de saúde é uma página que rola: você desce por seções, ou clica em abas. O eixo é a posição do scroll. O Circadiano troca esse eixo por outro: o tempo. A única forma de navegar é girar as horas.

Isso muda o que a interface é. Não é um scrollytelling (não há narrativa linear de cima a baixo) nem um dashboard (não há grade de cartões). É um instrumento: um relógio biológico que você manipula. Trazer uma hora ao topo é o gesto — como girar o botão de um rádio antigo até a estação certa.

Gancho de novidade

Substituir a rolagem vertical por um dial temporal de 24 h como único eixo de navegação: o conteúdo é revelado pela hora biológica — não pela posição de scroll, nem por abas.

2 · Por que um clínico quereria isto

Higiene circadiana é uma das prescrições mais concretas em longevidade — quando tomar sol, comer, treinar e dormir muda sono, metabolismo e humor. Mas explicar "ritmo circadiano" no papel é abstrato. Aqui o médico ou nutricionista gira o relógio do paciente e mostra a janela biológica ideal na hora dele.

Cronotipo (matutino / intermediário / vespertino) e horário de referência ao acordar deslocam todo o ritmo — as curvas e as janelas escorregam juntas.
Cada janela (luz, foco, refeição, exercício, luz baixa, sono) traz uma conduta em uma frase.
Copiar plano do dia gera a prescrição em texto, com os horários já personalizados, pronta para o prontuário.

É uma peça de beira de leito: os números são ilustrativos, mas a estrutura é usável em consulta — para educar, fazer onboarding de hábitos e ancorar a conversa no relógio do próprio paciente.

3 · O modelo biológico

Quatro ritmos giram como anéis concêntricos, do mais externo ao mais interno:

Alerta cognitivo — dois picos (meio da manhã e início da noite) com o clássico vale pós-almoço.
Temperatura corporal — mínima de madrugada, pico no fim da tarde.
Cortisol — disparo ao acordar (CAR), declínio ao longo do dia.
Melatonina — quase zero de dia, sobe à noite (DLMO ~2 h antes do sono).

Cada curva é uma soma de gaussianas no círculo (distância angular de 24 h), normalizada de 0 a 1. Ao mudar o horário de acordar, aplico um deslocamento de fase: a hora de relógio h lê a biologia em h − (acordar − 7). Por isso o pico de cortisol de um vespertino aparece mais tarde no mostrador — enquanto o céu (fundo) segue a hora real do relógio. Esse descompasso entre céu e biologia é, de propósito, a lição.

Todos os valores exibidos são fictícios — reproduzem a forma das curvas descritas na literatura, não medições reais.

4 · Como foi construído

Sem build

HTML + CSS + um app.js. Nada de framework, nada de bundler. Abre direto no navegador.

Tudo procedural

O mostrador inteiro é Canvas 2D: anéis polares, arcos de janela, ícones desenhados à mão, campo de estrelas e o gradiente de céu. Zero imagens externas.

O truque geométrico central: em vez de rotacionar o contexto do canvas, eu embuto a rotação no ângulo de cada ponto. A hora selecionada fica sempre no topo:

screenAngle(h) = −π/2 + ((h − horaSelecionada) / 24) · 2π

Assim, a cabeça de leitura (o triângulo no topo) sempre aponta para a hora atual, e os rótulos ficam de pé — não giram de cabeça para baixo como num relógio físico.

Interação

Arrastar gira o dia mantendo o ponto "sob o dedo" (delta de ângulo → delta de hora).
Tocar um ponto do aro traz aquela hora ao topo, com suavização.
Roda do mouse percorre o tempo em passos de 15 min.
Teclado: o dial é um slider ARIA com aria-valuetext falado; ←/→, PgUp/PgDn, Home/End, R, Espaço.

5 · Acessibilidade & responsivo

Operável 100% por teclado; leitor de tela anuncia a hora e a janela ativa.
prefers-reduced-motion: sem estrelas animadas nem autoplay.
Layout testado a 390 px, 414 px e desktop; centralização absoluta com translateX(-50%) para não cortar no mobile.

6 · O que dá para reaproveitar

A ideia é portável para qualquer domínio com um ciclo: ciclo menstrual, jornada de um medicamento, estações do ano, agenda de um turno hospitalar. Onde o eixo natural do dado é o tempo que dá a volta, o dial vence a rolagem. Peças a copiar:

O padrão screenAngle com rotação embutida + rótulos sempre de pé.
O deslocamento de fase para personalizar o ciclo por indivíduo.
Anéis polares de área a partir de curvas normalizadas (gaussianas no círculo).

Aviso. Peça de demonstração de design. Todos os números de biomarcadores são ilustrativos e fictícios, sem qualquer valor clínico, e não representam medições reais nem substituem avaliação profissional. As curvas reproduzem apenas a forma geral de ritmos circadianos descritos na literatura.