hyperframes-animation

Run all motion on one paused GSAP timeline registered on window.__timelines, use fromTo tweens with explicit from-states, and avoid Math.random, Date.now, and repeat: -1. State must be a pure function of timeline time so any frame renders identically under seek.

GSAP is the default for about 95% of motion work, covering timelines, transforms, easing, and stagger. Use Lottie for pre-baked After Effects assets, Three.js for 3D scenes, Anime.js for lightweight tweening, CSS for simple decoration, and TypeGPU for GPU-rendered canvases.

Pick a blueprint matching the storyboard role, such as cursor-ui-demo or prompt-type-submit-generate, then read its time-coded template with slots and a signature move. Instantiate the slots and pace reveals to the voiceover rather than dumping content at t=0.

No, width, height, top, and left tweens are forbidden because they break deterministic rendering. Use GSAP transform aliases like x, y, scale, and rotation for spatial motion, or masks and counter-scale proxies for layout expansion effects.

Common causes include CSS transitions on animated elements, DOM measurements like getBoundingClientRect at tween time, and timeline construction inside async callbacks. Compute layout constants once at setup and keep all choreography on the single paused timeline.

Run the animation-map.mjs script against the composition directory to enumerate every tween on registered timelines, sample bounding boxes, and output animation-map.json. It flags dead zones, stagger inconsistencies, and lifecycle warnings after authoring.