Motion should feel deliberate, not decorative.

Principles

Animate rarely. Mean it when you do.

1. 1

   Purposeful.

   Motion reinforces hierarchy or causality. If it does neither, it does not exist.

2. 2

   Restrained.

   Default duration: 200ms. Default easing: cubic-bezier(0.2, 0.8, 0.2, 1) (ease-out). Anything over 400ms must justify itself in a comment.

3. 3

   Physical.

   Things accelerate from rest and decelerate to rest. Nothing teleports.

4. 4

   Quiet.

   No spinners. Loading is a held breath, not a juggling act. Use shimmer, skeleton, or a single steady pulse.

5. 5

   Reduced motion respected.

   Every animation has a prefers-reduced-motion fallback. The fallback is “no animation,” not “less animation.”

The shader

One atmosphere. Cadence.

Cadenza has exactly one brand shader. The same fluid terracotta motion lives behind every brand surface — hero, banner, footer. Consistency is the brand.

Live render via the shaders package. Honors prefers-reduced-motion: a static terracotta gradient is shown when the user opts out. Never placed behind body copy.

Timing tokens

Four durations. One easing curve.