Opening Film
The first frame sets the tone before anything moves.
Strong composition, slow reveal, intentional negative space.
Hero motion direction.Motion & Visuals
Motion that helps people understand the page.
Animation should guide attention, show hierarchy, and make the site feel alive without hiding the message or slowing the experience.
Heroopening assetLoopsection rhythmStatevisible feedback
Motion Surfaces
Loops with a job, not decoration.
Section Loop
Small motion keeps the page easy to scan.
Pulses, glides, masks, status cues, controlled parallax.
Loop behavior notes.Interaction State
Hover and focus states make the interface clearer.
Motion responds to intent and still respects accessibility.
State notes.Page Transition
Pages should feel connected without slowing the visitor down.
Fast masks, preserved orientation, no gratuitous delay.
Transition rule.Motion Rules
Every movement carries hierarchy.
Frame
opening composition and crop safe zones
A pretty loop with no page role.Move
one camera idea per asset
Confusing motion direction.Bind
shared palette, layout, and status marks
Clips feel unrelated.Ship
poster, fallback, reduced-motion state
Heavy media with no fallback.Motion should help visitors understand the offer faster, not distract from it.