| name | motion-design-rules |
| description | Motion design framework for programmatic video. Defines anti-slideshow architecture, visual layering, physics-based easing, choreography rules, and quality validation. Reference this skill from any guided video skill. |
These rules apply to every Helios video composition.
Read and internalize these before producing a creative specification or writing composition code.
RULE 1 — Anti-Slideshow Architecture
The biggest mistake in code-based video is building a PowerPoint
(Scene A fades out → Scene B fades in).
The camera never stops.
Separate all elements into two categories:
GLOBAL elements persist across scenes:
• Background texture or gradient
• Floating particles, orbs, or accent shapes
• Logo or brand mark
• Ambient motion (slow drift, subtle pulse)
LOCAL elements are scene-specific:
• Hero text for that scene
• Supporting details, stats, or callouts
• Scene-specific imagery
Global elements must NOT reset between scenes.
They morph, shift, or evolve — but never disappear and reappear.
This creates the illusion of a single continuous world
rather than a sequence of separate slides.
RULE 2 — The Visual Stack (Minimum 4 Layers)
Every frame must have at least 4 layers of depth.
A flat composition looks amateur.
Layer 0 — The Void
Base color or deep gradient. Never pure black unless intentional.
Layer 1 — The Texture
Subtle noise, gradient drift, grid lines, or slow-moving video.
This layer is never static. It always breathes.
Layer 2 — The Context
Floating shapes, lines, accent UI elements, or particles.
These sit behind the hero content but in front of the background.
They move slower than foreground elements (parallax).
Layer 3 — The Hero
Primary content: text, images, product UI.
Highest contrast. Sharpest edges. Draws the eye immediately.
If a frame has fewer than 3 visible layers, add depth.
RULE 3 — Physics Engine (Global Easing)
Define ONE global easing personality for the entire video.
Every animation must use this easing unless there is a specific
creative reason to break the rule.
Match the easing to brand identity:
• Tech / Developer / Hacker → circOut (fast start, hard brake)
• Luxury / Spa / Premium → easeInOut (slow start, slow end)
• Playful / Consumer / Fun → spring (overshoot and wobble)
• Corporate / Enterprise → easeOut (controlled deceleration)
• Bold / Startup / Energy → backOut (slight overshoot, confident)
Define this in the creative specification as:
physics: { easing: "circOut", defaultDuration: 0.4 }
All motion.dev / WAAPI animations must reference this constant.
RULE 4 — Choreography and Staggering
Nothing ever appears all at once.
The entrance order for every scene:
- Background shifts or evolves (sets the stage)
- Context elements animate in (lines, shapes, accents)
- Hero text staggers in (word by word or line by line)
- Supporting details cascade (one by one, not simultaneously)
The stagger delay between child elements should be
50ms–150ms depending on energy level.
High energy (promo, social): 50–80ms stagger
Medium energy (demo, launch): 80–120ms stagger
Low energy (explainer, testimonial): 100–150ms stagger
Exit animations must overlap with the next scene's entrance
by at least 200ms. Scenes should crossfade, not swap.
RULE 5 — The Squint Test
Before finalizing the composition, pause at 5 random frames
and mentally "squint" at the layout.
Check:
• Can you instantly identify the most important element? (Hierarchy)
• Is there enough negative space? (Breathing room)
• Are there more than 3 competing focal points? (Clutter — delete something)
• Does every visible element serve a purpose? (No decoration for decoration's sake)
If any frame fails the squint test, simplify.
Space is a design element, not just empty pixels.
RULE 6 — Transition Continuity
Scene transitions must never be a hard cut followed by silence.
During every transition:
• At least one global element must be visually continuous
• The outgoing scene's exit and incoming scene's entrance must overlap
• Audio energy (if present) should bridge the transition
• Color palette shifts should be gradual, not abrupt
Preferred transition patterns:
• Wipe with persistent background
• Scale-out hero → scale-in new hero (camera metaphor)
• Directional slide (content moves as if camera is panning)
• Morphing shapes that carry energy between scenes
Avoid: hard cuts, full-black gaps, simultaneous fade-out/fade-in.
