Designing motion-ready artwork as real layers

Define what the motion explains

Start with a sentence: the rocket launches, the magnifier scans a document, the plane follows a delivery route, or the request crosses a system and returns verified. That sentence determines the moving subject, the stationary context, and the path. If the movement cannot be described as part of the product story, it is probably decoration.

Keep the number of simultaneous ideas small. One clear movement with a physical beginning and end is easier to understand and implement than several unrelated pieces drifting at once. The composition should remain balanced at the start, during the action, and at the end of a loop.

Specify the layer contract before generation

List the deliverables as production layers, not as a request for an animated image. A typical scene needs a clean stationary base and one complete moving object. More complex scenes may also require a foreground occluder, a mask, a shadow tied to a specific object, and placement metadata that describes how the pieces share a coordinate system.

• The base must make visual sense with the moving object absent and leave its travel corridor clear.
• The moving object must be complete, isolated, correctly scaled, and free of duplicated parts on the base.
• Every layer must use the same camera, light direction, material system, palette, and edge treatment.
• The motion path must fit inside the composed scene without clipping meaningful pixels.
• The static fallback must show a deliberate state rather than a broken first frame.

Keep masks and shadows physically coherent

An object that passes behind a platform needs an occlusion plan. That can be a foreground layer, a clip path, or a mask derived from the base. Without it, the object appears to float over every surface. The same logic applies to a magnifier crossing a document or a satellite following a drawn orbit.

Attach self-shadowing to the object it describes. Keep environmental or contact shadows with the receiving surface when possible. During review, step through the full path and look for a shadow that moves when it should stay, a mask that clips too early, or a trail that disagrees with the object's direction.

Implement a controlled loop

Use transforms and opacity for the moving layers when they can express the action. Align all layers in one responsive container so resizing does not change their relationship. Start animation only after the required images are decoded, and pause it when the scene leaves the viewport.

A loop should have a plausible reset. The rocket can return behind its platform, a scanning object can retrace its line, and an orbit can end on the same coordinates where it began. Hiding a discontinuity with a sudden fade usually weakens an otherwise physical scene.

Design the reduced-motion state at the same time

Reduced motion is not an afterthought. Choose the still frame while the layers are being art-directed and make sure it communicates the relationship without movement. Remove or greatly shorten nonessential transitions while keeping all explanatory labels and descriptions available.

Describe the composed result rather than narrating implementation details to assistive technology. Decorative layers can have empty alternative text when the figure's label already explains the scene. Keyboard users should not encounter focusable artwork pieces unless the scene includes a real control.

See the system in context

Its purple-and-gold family turns testing and improvement into a progression of distinct objects, illustrating how one metaphor can extend across many placements before motion is added. See the anonymous landing-page optimization artwork case study.

Continue with A performance workflow for generated website artwork, or apply the method to your own public page in the free art-direction preview.

Ready to produce a coordinated pack? Start free with three credits.