Motion and moments

Everything that moves in a Moteur app, by name. Each look moves with its own character:

• Discothèque is print you can touch: things pop, thud and bounce once.
• Folio is ink that draws itself: calm and quick, nothing bounces, and each moment has one flourish (a tick, an edge line or a ring that writes itself).

Motion comes in three layers, and most of it needs no script at all:

@import '@moteurio/design/looks.css';
@import '@moteurio/design/moments.css';

Tokens

Springs are compiled to linear() at build time, so transition: scale var(--spring-pop-duration) var(--spring-pop) is a real spring.

Choosing a duration

• The further something travels or the bigger it gets, the longer it takes: snap for a button, pop for a chip or a menu, glide for a panel, drift for anything that arrives on its own.
• Entering uses the look’s entering curve (a spring in Discothèque, standard in Folio). Leaving is always quicker and never springs: --duration-snap with --ease-glide.
• Things you caused answer at once. Things that happen on their own (presence, live updates) drift in, so they never feel like they came from your click.

Reduced motion

When someone asks for less motion (the system setting, or data-motion="reduce" on <html>):

• Nothing travels, grows, bounces or repeats. Every moment ends where it would have ended.
• Fades, colours and drawn lines stay, 200 ms at most, so every state change is still seen.
• Timers and progress run as usual: a toast still counts down, a hold still fills.
• Nothing is skipped. A toast that shows for 5 s still shows for 5 s.

moments.css does this with three variables, so a component’s own CSS can follow the same rule:

:root {
  --travel: 1; /* 0 under reduced motion: multiply distances, scales and turns by it */
  --loop: infinite; /* 1 under reduced motion */
  --motion-cap: 100s; /* 200ms under reduced motion: min(var(--duration-pop), var(--motion-cap)) */
}

data-motion="full" on <html> ignores the system setting (for a “Motion: full” preference).

Capped durations

moments.css also gives each duration token with the cap already applied, so an animation that fades or draws needs no min() of its own:

They are separate variables, rather than the tokens themselves turning short under reduced motion, because the plain tokens also time things that must not shrink: delays, staggers and distances multiplied by --travel. Take a --motion-* duration for anything with a fade or a drawn line in it, and the plain token for a delay or for calc(var(--duration-glide) * var(--travel)). Like the cap, they follow the page’s look.

Arriving and leaving

Most things that appear or go away do it the same way: from a little offset, a scale or a turn, with a fade. moments.css has the two keyframes its own moments use, for component CSS too:

.chip {
  --enter-y: 6px;
  --enter-scale: 0.97;
  animation: moteur-enter var(--motion-pop) var(--spring-pop) both;
}
.chip[data-closing] {
  --leave-y: 4px;
  animation: moteur-leave var(--motion-snap) var(--ease-glide) forwards;
}

Offsets, scales and turns are multiplied by --travel, so under reduced motion only the fade is left. The --enter-* and --leave-* properties don’t inherit: set them on the element that animates, and a toast’s offset never reaches a badge inside it. One element can set both, for its way in and its way out.

Never end animations instantly with animation-duration: 0.01ms !important: it makes timers fire at once and closes toasts before anyone sees them.

The stylelint config (@moteurio/design/stylelint, see the README) flags that trick, raw durations and curves, and keyframes that move without --travel.

Tilt is for objects, or for landing

Text sits straight at rest. Anything that holds words to read (a card, a ticket, a sticker, a note, a question) leans only as it arrives: give the lean to --enter-turn, with whatever offset it comes in from, and it settles straight once it has landed. The turn goes through --travel, so under reduced motion it is straight from the start and only fades in.

.ticket {
  --enter-y: 14px;
  --enter-turn: -0.8deg;
  animation: moteur-enter var(--motion-settle) var(--spring-settle) backwards;
}

• Objects may keep an angle. A stamp, a photo, a screenshot or a pin is a thing on the page, not a sentence, and can rest turned.
• A selection lands too. Something that becomes picked, or the best match, can lean as it does, with --enter-opacity: 1 so it doesn’t fade, then stand straight while it stays picked.
• Held things tilt while held. The lift moment tilts a row while it’s carried and straightens it when it’s put down: a moment, not a resting angle.
• A hover shouldn’t be what straightens it. If text needs a hover to sit level, it was leaning at rest.

A moment budget

• One moment per action. Publishing gets the stamp; it doesn’t also get a toast and confetti.
• Never two moments at the same time in the same place.
• Moments are for things that matter: the first publish, approvals, sign-in. Saving the hundredth time is a micro-interaction, not a moment.
• Every moment says something in words too (a label, a toast, aria-live). Motion is never the only signal.
• A flash marks what changed where you weren’t looking: the slug a title rewrote, the row a dialog updated. The thing you clicked already answers with its own press or tick, so it doesn’t flash too, and nothing flashes and gets a change-mark at once: a flash is your change, a change-mark someone else’s.

The catalogue

Three kinds:

• Micro-interactions belong to a component and happen every time.
• Moments are named events, rarer and with more character.
• Transitions are how one view becomes another.

Attributes: put data-moment="<name>" on the element; one element can carry more than one, space-separated (data-moment="press save"). States are data-state="busy|done|failed" unless noted. Parts are children marked data-part="<part>"; every part is optional unless the moment can’t work without it. Lines that draw themselves are SVG paths (or circles) with pathLength="1" and data-part="ink".

Moments move things with transform and set the animation or transition of the elements they name. Position those elements with translate or inset, and leave their animation and transition to the moment. Settings are CSS variables a component can set on its own element. Names starting with --m- are internal, and so are the moteur- keyframes other than the three in Arriving and leaving.

Micro-interactions

Moments

Transitions

Site

The helper

import {
  play,
  reduced,
  spring,
  slide,
  count,
  flash,
  hold,
  toastTimer,
  flight,
  growFrom,
  bin,
  switchLights,
} from '@moteurio/design/motion';

Everything returns promises that resolve when the motion is done (never rejects), so code can await a moment before moving on.

flight(), growFrom() and bin(row, {back: true}) measure both ends, so show the destination before calling them and hide the source after they resolve. A view that sets its own display (a grid list, say) doesn’t hide with the hidden attribute unless something says so: moments.css does for anything inside a moment, and a page should have [hidden] { display: none !important; } for the rest.