gsap

Create a paused timeline with gsap.timeline({ paused: true }), add your tweens, then register it on window.__timelines using a key that matches the composition root's data-composition-id. Never call tl.play() for render-critical motion; HyperFrames seeks the timeline itself.

Use the TextPlugin with gsap.to targeting the element's text property, setting duration from text length divided by characters per second. Add a blinking cursor via CSS keyframes and toggle cursor classes with tl.call() at typing start and end.

Pre-extract per-frame RMS and frequency band data using the extract-audio-data.py script, which requires ffmpeg and numpy. Load the JSON synchronously and schedule tl.call() render callbacks at each frame time to draw canvas visualizations.

HyperFrames renders finite video durations, so repeat: -1 would never resolve during capture. Compute a finite repeat count from the visible duration of the composition instead, optionally combined with yoyo for alternating direction.

Common causes are building the timeline inside async code, timers, or fetch callbacks—the capture engine reads window.__timelines synchronously after page load. Also verify the registry key exactly matches the composition root's data-composition-id.

Animate transform aliases (x, y, scale, rotation) and opacity or autoAlpha, which stay on the compositor. Avoid width, height, top, and left, and add will-change: transform only to elements that actually animate.