HTML Sequence Authoring

HTML sequences can be rendered frame-by-frame for video export. Strict rules regarding layout, CSS animations, and design should be followed for optimal results.

1. Core Architecture Contract

• CSS/WAAPI Only: Rely exclusively on CSS @keyframes or native Web Animations API (element.animate).
• No External Libraries: 🚫 No GSAP or JS animation libraries unless explicitly requested.
• No Infinite Loops: 🚫 No infinite animations. They break duration calculations. Use fixed repeats or forwards fills.
• No JS Timing: 🚫 No requestAnimationFrame or setInterval.
• No Dynamic Runtime Layout: 🚫 Do not use getBoundingClientRect(). Use deterministic CSS relative units (vw, vh, %).
• No Heavy Assets: 🚫 No videos or unpredictably loading assets.

2. Animation & Timing Fundamentals