Motion
Leia primeiro o skill /hyperframes (contrato de renderização) e depois brand/DESIGN.md. O diretório de produção é uma cópia de templates/base/.
Base
templates/base/index.htmljá contém: variáveis de cor, fontes, o plano de interfaces 3D (#world), o estilo das cartas de vidro, caches e pastilhas. Mantenha essas classes, não reinvente o estilo.- Uma cena por subcomposição em
compositions/quando o filme ultrapassar 10 s (a raiz mantém apenas os hosts de cena, o áudio e o mundo de fundo). - GSAP local (
assets/js/gsap.min.js). Nunca use CDN: a renderização é feita sem rede. - Fontes:
@font-faceapontando paraassets/fonts/.
Movimento (valores do estúdio)
| Ação | Valor |
|---|---|
| Texto entrando | a partir de um cache: yPercent 110 → 0, 0,7 a 0,85 s, expo.out, linhas com 80 ms de intervalo |
| Texto saindo | yPercent 0 → -110, 0,36 a 0,4 s, power3.in |
| Carta de vidro entrando | y +1250 → 0, 1,1 s, expo.out |
| Pastilhas | y 26 → 0 + opacidade, 0,6 s, expo.out, 70 ms de intervalo |
| Linha | scaleX 0 → 1 a partir da esquerda, 0,7 a 0,8 s, expo.out |
| Plano de interfaces | rolagem linear contínua, rotationX 56, rotationZ -20 |
| Reflexo no vidro | uma vez por filme, 1,3 s, power2.inOut |
| Número contando | 0,9 a 1,4 s, power3.out, valor final arredondado e mantido |
Proibições técnicas: animar letter-spacing, width, top, left; um transform CSS em um elemento que o GSAP anima; filter: blur em títulos; qualquer halo ou gradiente de fundo (ver DESIGN.md).
Interfaces reais
Para mostrar uma aplicação, use uma captura real (npx hyperframes capture <url> --json para um site público como mescentimes.cloud) ou reconstrua a tela em HTML com dados reais plausíveis em FCFA. Nunca use logotipo falso de cliente.
Verificar e renderizar
npx hyperframes check --json # zero erros
npx hyperframes snapshot --at <instantes chave> # veja cada quadro
npx hyperframes render --output renders/<slug>.mp4
Após a renderização: extraia 6 imagens no telefone (ffmpeg -ss T -i … -vf scale=540:-2) e examine-as antes de entregar.