Pular para o conteúdo

Criações

Pomodoro: 25:00 e o botão de iniciar em um card escuro, sobre um fundo em degradê azul.

Pomodoro

Um timer Pomodoro minimalista com visual inspirado na Apple, fundo animado em WebGL e sons sintetizados.

Papel
Desenvolvimento de interface
Tipo
Aplicação web
Ferramentas
  • React
  • TypeScript

Case

O ciclo completo

Foco e pausa, com pausa longa automática a cada quatro sessões, e tempos ajustáveis no painel. A próxima etapa nunca começa sozinha, e reiniciar ou trocar de modo no meio de uma sessão mostra um aviso com "Desfazer" em vez de pedir confirmação.

Tempo que não se perde

A contagem é baseada em timestamps, então não atrasa com a aba em segundo plano. Ao recarregar, a sessão continua de onde parou, e duas abas abertas mostram a mesma sessão. O alarme toca cinco vezes e para sozinho; com a aba em segundo plano, também envia uma notificação.

Construção

React e TypeScript com Vite. O fundo animado é um fragment shader próprio em WebGL, e todos os sons são sintetizados com Web Audio, sem nenhum arquivo de áudio. A física de mola, os componentes e os hooks são do próprio projeto: a única dependência de runtime é o React.