13 req·3 ADR·3 diagrams·6 tasks

Context

Uma calculadora de quatro operações cujo teclado se comporta como a superfície do oceano: cada tecla acompanha um marulho vertical contínuo, com cristas viajando em diagonal pelo convés, enquanto a calculadora permanece totalmente funcional e acessível. A peça é também uma vitrine de orquestração do anime.js v4 — stagger em grade, loops sem emenda, interrupção por tecla — envolta em uma identidade visual pirata: convés de madeira, teclas de latão, visor de pergaminho.

Actors and Stakeholders 2

Primary actor

Usuário final — o bucaneiro operando a calculadora

Secondary

Desenvolvedor frontend que mantém a demo

Constraints and Policies 4

anime.js v4 é o único motor de animação

Toda animação contínua e interativa é implementada com anime.js v4, fixado em 4.3.5. Nenhuma outra biblioteca de animação e nenhum loop artesanal de requestAnimationFrame para o marulho.

Movimento apenas com transform

As animações de onda e de pressionamento só podem tocar propriedades amigáveis ao compositor: transform (translateY, scale) e opacity. Animar top, margin ou height é proibido — dispararia layout a cada frame.

Página estática, zero etapa de build

HTML, CSS e módulos ES puros sob demos/pirate-calculator/. O anime.js chega como import ESM fixado via CDN; servir a pasta a partir de qualquer servidor estático é toda a toolchain.

Piso de acessibilidade

A calculadora deve permanecer totalmente operável com a onda desabilitada: navegação por teclado, estados de foco visíveis, nomes acessíveis em cada tecla e suporte a prefers-reduced-motion são inegociáveis.

Requirements 13

Núcleo da calculadora

FR-1

Aritmética de quatro operações com execução imediata

critical

the system shall disponibilizar os dígitos 0-9, o ponto decimal e as quatro operações (soma, subtração, multiplicação, divisão), avaliadas com semântica de execução imediata: cada pressionamento de operador aplica a operação pendente antes de armar a próxima.

FR-2

Ativação de tecla na tela

When o usuário ativa uma tecla na tela por ponteiro, toque ou Enter/Espaço com a tecla em foco, the system shall registrar exatamente um evento de entrada e refleti-lo no visor em até 100 ms.

FR-3

Mapeamento do teclado físico

When o usuário pressiona uma tecla física mapeada (dígitos, ponto decimal, + - * /, Enter, =, Escape, Backspace), the system shall rotear a entrada pelo mesmo caminho do engine usado pela tecla equivalente na tela e espelhar o estado pressionado naquela tecla.

FR-4

Visor de pergaminho

the system shall exibir a entrada atual ou o resultado alinhado à direita no visor de pergaminho, limitado a 12 dígitos significativos, com overflow renderizado em notação científica.

FR-5

Limpar e reiniciar

When o usuário ativa a tecla de limpar ou pressiona Escape, the system shall reiniciar o engine ao estado inicial e exibir 0 no visor.

FR-9

Divisão por zero

If o usuário solicita uma divisão por zero, then the system shall exibir a mensagem 'Não se reparte o butim entre zero piratas!' no visor e tratar a próxima entrada como o início de uma nova digitação.

Movimento de onda oceânica

FR-6

Marulho oceânico contínuo em todas as teclas

critical

the system shall manter todas as teclas da calculadora oscilando verticalmente (translateY entre crista e cavado) em um loop sem emenda sempre que a onda estiver habilitada.

FR-7

Fase da onda viajante derivada da posição na grade

critical

the system shall derivar a fase de oscilação de cada tecla a partir de sua linha e coluna na grade, de modo que uma crista viaje visivelmente em diagonal pelo teclado, como um marulho cruzando a superfície.

FR-8

Mergulho no pressionamento e reencaixe

When o usuário pressiona uma tecla, the system shall interromper o marulho daquela tecla com uma animação de mergulho (a tecla afunda abaixo do cavado e retorna com efeito de mola) e então reencaixá-la na onda coletiva sem salto visível de posição.

NFR-1

Desempenho de onda amigável ao compositor

critical
source
Página ociosa
artifact
loop de animação da onda
response
o movimento permanece em transform amigável ao compositor, sem trabalho de layout ou paint por frame
measure
55+ fps sustentados e zero long tasks acima de 50 ms atribuíveis à onda
NFR-4

Integridade do alvo de toque em movimento

source
Usuário
artifact
alvo de toque da tecla
response
o alvo de toque acompanha a tecla visual porque o transform é aplicado ao próprio elemento interativo
measure
50 de 50 ativações registram na tecla pretendida em um protocolo manual de toques

Tematização pirata e acessibilidade

NFR-2

Conformidade com movimento reduzido

critical
source
Preferência de acessibilidade do sistema operacional
artifact
animações de onda e de pressionamento
response
o marulho ocioso para (as teclas assentam planas) e o feedback de pressionamento degrada para uma breve mudança de opacidade; a calculadora permanece totalmente funcional
measure
zero transforms animando continuamente enquanto a media query casa
NFR-3

Identidade visual pirata

source
Visitante de primeira viagem
artifact
tema visual
response
a cena é reconhecível como pirata à primeira vista: convés de tábuas de madeira atrás das teclas, teclas com aro de latão, visor de pergaminho, tipografia náutica no visor
measure
tema entregue apenas com CSS e data URIs inline; zero requisições externas de imagem

Acceptance criteria 5

AC-1

Acceptance scenario

FR-1
given
uma calculadora recém-carregada
when
o usuário insere 7, multiplicação, 8, igual
then
o visor exibe 56
AC-2

Acceptance scenario

FR-7
given
o teclado ocioso com a onda habilitada
when
um período completo da onda transcorre
then
teclas adjacentes atingem a crista em momentos visivelmente diferentes e uma linha de crista percorre a grade em diagonal
AC-3

Acceptance scenario

FR-8
given
a onda em execução
when
uma tecla é pressionada e solta
then
a tecla executa a animação de mergulho e reentra no marulho sem salto visível de posição
AC-4

Acceptance scenario

NFR-2
given
prefers-reduced-motion reduce está ativo
when
a página carrega
then
nenhuma tecla anima continuamente e todas as funções da calculadora continuam operando
AC-5

Acceptance scenario

FR-9
given
uma entrada de 8 dividido por 0
when
o usuário pressiona igual
then
o visor exibe a mensagem de erro pirata e o próximo dígito inicia uma nova digitação