Motion feels on-brand when a small set of movement rules is applied the same way everywhere: how things accelerate, how fast they travel, how long they pause and how much they move at all. A brand that moves briskly and precisely in a video title should not drift and bounce in its website menu. Treat motion as a design asset with rules, in the same way you treat colour and typography.
The three variables that carry personality
Almost every on-screen movement can be described with three variables. Fix these and you have the core of a motion identity.
Easing
Easing describes how an object speeds up and slows down. Linear movement (constant speed) looks mechanical, which can suit a technical brand but rarely feels natural. Most brands use some form of ease-out (fast start, gentle landing) for things that arrive, and ease-in (slow start, fast exit) for things that leave. A sharp, quick ease-out reads as confident and efficient. A long, soft ease-in-out reads as calm and premium. An overshoot or bounce reads as playful.
Speed and duration
Short movements feel responsive and utilitarian. Long movements feel cinematic or luxurious but make interfaces feel slow. The right duration depends on the medium: a title card in a brand film can breathe in a way a button hover cannot. Write duration ranges for each context rather than one number for everything.
Rhythm
Rhythm is the pattern of movement and stillness over time: how many things move at once, how they are staggered, and where the beats fall. A metronome is a useful mental model. Consistent spacing between reveals creates order. Irregular, syncopated timing creates energy. In video, cutting on the beat of the audio makes rhythm audible as well as visible.
Turning personality into rules
A short motion section in your brand guidelines is enough to keep suppliers aligned. See what to include in brand guidelines for the wider document. For motion, record:
- Personality words. Two or three, such as “precise, warm, unhurried”.
- Easing family. Name the curves (for example one for entrances, one for exits) and give the actual values so a web developer and a video editor can match them.
- Duration ranges by context: interface, social video, long-form video.
- Direction and origin. Do elements rise, slide from the side, or fade in place? Pick a default.
- Stagger and sequencing. How far apart do list items or words appear?
- Transitions. Hard cut, dissolve, wipe or masked reveal, and when each is allowed.
- What never moves. Logos, legal text and key prices often stay still.
Applying one system across channels
| Channel | What to keep | What to adapt |
|---|---|---|
| Brand film or ad | Easing family, rhythm, transition style | Longer durations, camera movement |
| Short social video | Easing, direction, logo behaviour | Faster pacing, a stronger first second |
| Website and app | Easing family, stagger logic | Shorter durations, subtle effects |
| Presentations | Transition style | Fewer effects overall |
The principle is the same one behind consistent visual identity across channels: keep the underlying logic constant and adjust the scale to the medium. If you are choosing between motion graphics and generative footage for a piece, AI video vs motion graphics covers where each approach is strongest. Generative tools tend to produce movement with their own default feel, so brand rules matter even more there: specify pacing and camera behaviour in the prompt and check the result against your motion rules.
Accessibility is part of the brief
Motion can cause real harm. MDN notes that animations “can trigger discomfort for those with vestibular motion disorders” and that scaling or panning large objects can be a trigger. Browsers expose the user’s preference through the prefers-reduced-motion media feature, and a site can replace large movement with a gentle fade when it is set.
WCAG success criterion 2.3.3, Animation from Interactions, is a Level AAA criterion. It asks that motion triggered by interaction can be turned off unless it is essential to the information or function. W3C’s explanation names parallax scrolling as a common example. Build a reduced-motion version into the system from the start: keep the timing and hierarchy, remove travel and scale.
More on interface-level decisions is in website animation and motion UX.
Common mistakes
- Using each tool’s default easing, so every deliverable feels different.
- Animating everything, which removes the emphasis that motion should create.
- Copying a competitor’s feel instead of expressing your own personality words.
- Forgetting audio: a whoosh that does not match the visual rhythm breaks the effect.
- Writing rules in adjectives only, with no values a supplier can implement.
Where Radiance Impact fits
If you want a motion system defined and then applied across film, social and web, Radiance Impact’s Studio produces animation, short-form video and post-production, and the Technology team builds websites. You can get in touch to talk through a brief.
