Motion & Animation

What role does motion play in design?

Motion in design serves three purposes: it communicates (something changed), it guides (look here next), and it connects (this came from there). Motion that does none of these is decoration — and decoration in motion is almost always a mistake.

Switch between styles on this site and open the configurator. Notice how each style moves differently. Bauhaus is instant and precise — motion would contradict its functionalist philosophy. Art Nouveau is slow and flowing — it mirrors the organic curves of its visual language. The motion is the style.

The absence of motion is also a choice. Web Brutalism uses 0ms transitions — elements appear and disappear without ceremony. This isn't laziness; it's a statement that content matters more than choreography.

How does duration affect perceived quality?

Duration is how long an animation takes. It communicates the weight and importance of an action:

• 0–100ms: Instantaneous. Used for direct manipulation (button press, toggle). The user caused this — they don't need to watch it happen.

• 150–300ms: Functional. The standard range for UI transitions. Fast enough to not feel slow, long enough to be perceived as smooth.

• 300–500ms: Deliberate. For larger changes (page transitions, modal entrances). Communicates that something significant is happening.

• 500ms+: Dramatic. Rarely justified in UI. Appropriate for emotional moments or luxury aesthetics.

On this site: Bauhaus transitions at 150ms (functional, no wasted time). Art Nouveau at 400ms (deliberate, flowing). Dark Luxury at 400ms with a 500ms dialog entrance (dramatic, slow reveal). Web Brutalism at 0ms (motion is irrelevant).

What do easing curves communicate?

Easing determines how an element moves through time — whether it accelerates, decelerates, or maintains constant speed. The curve communicates the physics and personality of the motion:

• linear: Constant speed. Mechanical, robotic. Used by Bauhaus (machine aesthetic) and Dark Luxury (controlled, emotionless fade).

• ease-out (fast start, slow end): The most natural for entrances. Objects arriving slow down as they reach their destination. Used by Swiss International, Nordic Minimal, and Art Deco.

• ease-in-out (slow start, slow end): Elegant, symmetrical. Used by Victorian — stately, unhurried.

• overshoot (goes past target, bounces back): Playful, energetic. Memphis uses `cubic-bezier(0.68, -0.55, 0.27, 1.55)` — elements bounce past their destination. Y2K Aero uses `cubic-bezier(0.34, 1.56, 0.64, 1)` — a gentler overshoot.

The easing choice is not arbitrary — it reflects how the style 'feels'. Bounce implies playfulness. Linear implies precision. Ease-out implies confidence.

When should you animate and when should you not?

Animate when: (1) State changes — something appears, disappears, or moves. (2) Spatial transitions — user navigates between views. (3) Feedback — confirming that an action was received.

Do not animate when: (1) The user is trying to read. (2) The animation repeats continuously without user action. (3) The change is trivial (color hover on a text link rarely needs 400ms). (4) The user has requested reduced motion.

Material Design is rigorous about this: every animation must have a purpose from their motion guidelines. Elements enter from a specific direction to show where they came from. Elements exit toward where they're going. Nothing moves 'just because'.

Compare: Memphis animates almost everything with bounce — this works because the style's entire identity is playfulness. But applying Memphis-style bounce to a banking interface would undermine trust.

What is the relationship between motion and brand personality?

Motion is a brand signal as powerful as color or typography. Watch how the configurator dialog opens across different styles:

• Web Brutalism: No animation. Content appears instantly. Says: 'We don't waste your time.'

• Bauhaus: 150ms, linear, from 98% scale. Says: 'Precision. Function. Nothing superfluous.'

• Art Nouveau: 450ms, eased, from 92% scale. Says: 'Beauty is in the unfolding.'

• Memphis: 200ms, bouncy, from 80% scale. Says: 'Design should be fun!'

• Dark Luxury: 500ms, linear, from 98% scale. Says: 'We move slowly because we can afford to.'

• Y2K Aero: 350ms, bouncy overshoot, from 85% scale. Says: 'The future is playful and glossy.'

These are not just technical differences — they are personality expressed through time.

How do you handle users who prefer reduced motion?

The `prefers-reduced-motion` media query detects users who have enabled 'reduce motion' in their operating system. This includes people with vestibular disorders (for whom motion causes nausea or dizziness), as well as users who simply prefer less animation.

Respecting this preference is a WCAG requirement (2.3.3 Animation from Interactions). The implementation is simple: when reduced motion is preferred, replace animations with instant state changes or subtle opacity fades.

On this site, all transitions use `--transition-speed` — setting this to `0s` would eliminate motion globally. Web Brutalism already does this by default, making it the most motion-accessible style.

The principle: motion should be an enhancement, never a requirement. If removing all animation makes your interface unusable or incomprehensible, the animation is carrying too much responsibility. Structure, contrast, and spatial hierarchy should communicate without motion.

What makes a micro-interaction feel polished?

Micro-interactions are small, single-purpose animations: a button press, a checkbox toggle, a hover state. They feel polished when:

• Duration matches scale: Small elements animate faster (100–200ms). Large elements animate slower (200–400ms). A full-screen modal needs more time than a tooltip.

• Easing matches direction: Elements entering the viewport use ease-out (arriving). Elements leaving use ease-in (departing). Elements moving within the viewport use ease-in-out.

• Properties animate selectively: Transform and opacity are GPU-accelerated and smooth at 60fps. Avoid animating layout properties (width, height, margin) — they trigger expensive reflows.

• Consistency within style: All transitions in a style should share the same easing curve and speed philosophy. This site enforces consistency through `--transition-speed` and `--dialog-animation-easing` variables — every element within a style moves the same way.