hyperframes-atom-author

name	hyperframes-atom-author
description	Author or revise Hyperframes HTML/CSS/GSAP video atoms for this pipeline. Use when creating scene atoms, transparent transition overlays, framed-content animations, diagram builds, web-demo canvases, focus zooms, or local Hyperframes render specs.

Hyperframes Atom Author

Overview

Create deterministic HTML motion atoms that Remotion can assemble. Follow the composer style spec and shot brief before writing any atom.

Inputs

• shot brief
• global style spec
• output path and duration
• whether output should be MP4, WebM with alpha, or PNG sequence
• neighboring shot summaries for continuity

Rules

• Load GSAP locally from node_modules when possible.
• Use data-composition-id, data-width, data-height, data-start, data-duration, and class="clip" correctly.
• Register paused timelines on window.__timelines[compositionId].
• Keep atoms style-consistent with the global spec.
• Design the layout before styling components. Inventory text, panels, callouts, presenter safe zones, and minimum readable sizes; choose the lowest-risk template that fits. Prefer top-down, single-focus, or sequential builds when side-by-side composition would make panels, labels, or indicators crowd each other.
• When a presenter dock is present, lay out the primary atom content inside the available safe stage. Fill the stage with a balanced composition; do not force a left/right layout just because a prior atom used one.
• Give every widget and motion beat an explicit job: orient, signal a section turn, compare, transform, inspect a detail, or recap. Remove decorative widgets and motion that cannot be tied to the current spoken idea.
• For full-frame presenter sections, Hyperframes overlays may add static or lightly moving side widgets, but they must stay outside the presenter face and hand-safe rectangles and must not compete with the speaker.