Styles

Motion

Motion explains a change of state in the same object. It never hides loading, never signals “AI is thinking” by moving containers, and never asks for attention by moving your focus.

The twelve rules

MOT-01Continuity: one surface, the film’s shapeshift.A Work Object rests as a pill in its row, grows out of it into a card, changes shape between representations and folds back into the row when verified. Position, size and radius spring at the Systead film’s values (duration 0.55, bounce 0.12); the chrome (chip, card, good, warn, judgment) crossfades in 0.28s. A new target retargets from the current velocity.

MOT-02Asymmetry: content exits faster than it enters.Exit spring 0.2s to a 4px blur and scale 0.985; entrance spring 0.34s from 4px below and a 4px blur, 50ms after; rows follow 50ms apart. CSS transitions use the strong ease-out cubic-bezier(0.23, 1, 0.32, 1), colour uses ease. Never ease-in.

MOT-03Stagger 30–80ms, default 45ms.Stagger is decoration. Every row is operable from the first frame.

MOT-04No scale(0). Press is scale(0.97).Content enters from a 6px offset and opacity 0. Popovers scale from their trigger; nothing appears from nothing.

MOT-05Attention vs exploration.A system-requested expansion morphs the object open, lights its edge and posts a polite message. It never moves focus. A person-requested expansion follows the person.

MOT-06Lit → rest.A just-changed status stays lit for 1.1s, then fades fill and stroke over 420ms. Nothing moves.

MOT-07Controls hold still.The primary control keeps its place through a morph. A control never becomes a different action under the pointer.

MOT-08Keyboard-invoked changes do not animate.Arrow keys through a timeline, shortcuts, a command bar. Hover motion only where hover exists: (hover: hover) and (pointer: fine).

MOT-09Reduced motion: fewer and gentler, not zero.Surfaces jump to size; content fades in about 150ms. Meaning never depends on seeing the motion.

MOT-10UI durations stay under 300ms.Only the Shell’s spatial morph and the lit breath are longer, and neither blocks input.

MOT-11Only transform, opacity, filter and clip-path animate.The Shell’s size spring runs on one container with contain: layout; children never animate layout.

MOT-12No perpetual motion.A spinner only while a request is really in flight, and only on that target’s row. An unknown outcome is still.

The morph

One surface, four shapes: the pill resting in its row, the lens a hover opens, the card a decision needs, and the verified badge it folds back into, lit for a breath before it rests. Drag the sliders to feel the film’s values; above a bounce of about 0.2, a surface full of decisions starts to feel playful. Interrupt changes the target mid-flight: the spring keeps its velocity instead of restarting. Slow ×5 is for review.

Curves

Durations

Press

In code

import { Shapeshift, SPRINGS, settleLit } from '@lyotic/morph';

const shift = new Shapeshift(surface, { stage: table });
shift.show('pill', { at: statusCell, ax: 0, ay: 0.5, bg: 'warn', r: 999 });           // rests in its row
shift.show('card', { at: statusCell, ax: 1, ay: 0, bg: 'card', r: 12,                  // grows out of the pill
                     initiator: 'system', announce: plan.reason });                     // no focus change
shift.show('done', { at: statusCell, ax: 0, ay: 0.5, bg: 'good', r: 999 });           // folds back, lit
setTimeout(() => shift.chrome('none'), 1650);                                           // …then rests

Review these rules alongside Emil Kowalski’s design engineering skills (review-animations standards): custom strong curves, exits faster than entrances, no scale from zero, press feedback, hover gated to fine pointers, reduced motion kept gentle rather than removed.