Talos
animação viva · anime.js v4

O gigante de bronze de Creta: metal inerte que ganhou vida com um fio de icor. Aqui, cada receita do cérebro roda diante dos teus olhos.

Talos

animação viva · anime.js v4
v1

O motor de
animação
da casa.

Anime.js v4 por dentro: o bronze se apresenta ao abrir — e vai montando e desmontando no ritmo do teu scroll.

TALOS · anime.js v4 · vivo
rola pra ver o motor trabalhar ↓
Capítulo I — a arquitetura

O que acontece num tick

Um único relógio governa tudo: cada camada herda o tempo da de cima. É por isso que timer, animação e timeline se pausam, aceleram e rebobinam do mesmo jeito.

Engine — 1 requestAnimationFrame global · fps, timeUnit, defaults
└─ Clock — currentTime, deltaTime, playbackRate (herdado por todos)
└─ Timer — createTimer: cronômetro puro, o pai de tudo
└─ Animation — animate: Timer + tweens sobre alvos
└─ Tween — um por propriedade: from → to, ease, composition
└─ Timeline — createTimeline: orquestra tudo no tempo
Capítulo II — o método

T · A · L · O · S

Cinco decisões, sempre na mesma ordem — é assim que o cérebro constrói qualquer animação.

T

Tela e alvo

O que se move? DOM, SVG, texto, objeto JS. O alvo escolhe o módulo.

A

Arquitetura

Gesto único, timeline, scroll ou interação — quem dirige o tempo.

L

Linguagem

O easing conta a história: outExpo entra, spring é físico, steps é máquina.

O

Orquestração

Scope, stagger, keyframes e posições de timeline montam a cena.

S

Sintonia fina

Composition, reduced-motion, custo de layout, cleanup — e teste no navegador.

Capítulo III — as dez receitas

O palco é delas

Toca num ícone: a receita roda de verdade no motor e o código aparece por trás.

palco
escolhe uma receita aí embaixo — o palco é dela