A motion identity should define a characteristic behavior, the situations where it belongs, and the composition that remains when movement is disabled. Commission all three. A logo animation alone does not tell the next team how a title, a transition or a control should behave.
Start with something already meaningful in the static identity. Blankout uses interruptions, separated parts and deliberate relationships. That suggests a bounded vocabulary: a part moves, its relationship changes, then it settles. It does not mean every element must animate or every page must wait for a reveal.
The useful question is what the movement explains. If the only answer is “it makes the page feel alive,” reduce the effect until its contribution becomes clear. A distinctive quiet composition often says more than several unrelated animations.
Write the resting state first
The settled image is a deliverable. Specify where every part belongs, what information remains visible, and which relationships matter. Then decide whether movement improves the arrival at that state. This order prevents an animation from becoming the only way to understand the composition.
Our example below begins complete. Replay makes the parts shift and settle once. The quiet version is the same final arrangement, with no travel. It does not substitute an empty panel, a loading frame or a different message.
A short score, with a quiet state
Quiet state — reduced motion or Motion off is active.
| Moment | Behavior | Quiet version |
|---|---|---|
| Arrival | Keep the completed form visible on first load. | Same completed form. |
| Replay | Parts shift up to 18px and settle over 880ms; one run. | No travel or replay. |
| Interruption | The stop control restores the final composition immediately. | No blank or hidden substitute. |
Give movement a score another team can use
A useful score connects a trigger, a behavior and an end state. Add timing, distance, interruption behavior and the quiet alternative. “Smooth and energetic” can describe an intention, but the next maker still has to invent all of those decisions.
In this teaching specimen, travel is limited to 18 pixels. Each movement lasts 880 milliseconds, with 70 milliseconds between starts. The three-part sequence finishes in just over a second. Those values are choices for this composition, not a recommended duration for all brand motion.
The replay control starts one run. The settled-state control stops it immediately. The page does not replay it as you scroll back and forth. A separate site preference can disable motion, and an operating-system reduced-motion preference also keeps this specimen quiet. The controls and the final image remain available in either visual expression.
Download the motion score worksheet to specify those choices for your own applications. Include the reason for the movement. That reason helps a later team decide whether the behavior belongs in a new context.
Separate placement from movement
During Blankout's visual development, a red modular study lost its intended arrangement because animation and placement competed for the same transform. The solution was to keep each part's fixed position on an outer group and animate an inner group. That correction belongs to this site's implementation history; it is not a claim about a client campaign.
For a commissioning team, the lesson is practical. Request the first frame, the final frame, the quiet frame and a replay. A beautiful captured moment cannot show whether the geometry collapses after an animation completes or when a setting changes. Check the transitions between those conditions as well as the selected still.
The three separate shapes in our specimen are placed independently. Their short vertical movement does not own their horizontal position. You can inspect the final arrangement immediately after stopping a run. That makes the intended composition an observable requirement, rather than an incidental result of the timeline.
Treat motion controls as part of the experience
W3C's Animation from Interactions guidance explains disabling nonessential interaction-triggered animation; that criterion is Level AAA. It is different from Pause, Stop, Hide, a Level A criterion covering automatically starting moving, blinking or scrolling information lasting more than five seconds alongside other content, and auto-updating information under its own conditions.
These are separate requirements, not a blanket rule that every effect under five seconds is harmless. A motion toggle is also not a certificate for the whole site. The specific trigger, content and interaction need inspection. Our specimen is deliberately short, manually replayed and quiet by default for reduced motion.
Keep the practical actions predictable. A visitor should not have to chase a moving link, wait for essential text to appear, or lose an unfinished form when a presentation preference changes. If a movement conflicts with the task, the task is the stronger requirement.
Review motion where it will actually live
Ask to see the behavior with the real headline length, image crop and device size. Try keyboard navigation. Stop it midway. Change the motion preference. Reload the page in a quiet state. If the system offers multiple visual expressions, test those independently of motion so that a style choice does not silently re-enable effects.
Also name the implementation owner. A film export, an interactive component and a presentation template have different maintenance paths. The handover should explain which source controls each and what needs to be checked after a change.
Our two-expression study shows that separation in the page itself. For a wider commission, Blankout's motion-design work develops the behavior, quiet states and application rules together. The goal is a character you can recognize in use, including when nothing moves.