Motion

Motion runs on spring physics. Position, width, height, tilt and fade each spring on their own, so saving stretches like spandex, switching arcs and settles, and interrupting a move carries its momentum into the next one. Only transform and opacity animate, so motion stays smooth and video keeps playing.

Built-in presets

Your own preset

A preset receives the kind of motion (park, rise, shift, hover, drag, dock, reveal, appear, leave) and returns springs:

Earmark.preset('drift', ({ kind }) => ({
    position: { stiffness: 180, damping: 22 },
    width: { stiffness: 260, damping: 24 },
    height: { stiffness: 140, damping: 18 },
    tilt: { stiffness: 200, damping: 14 },
    arc: kind === 'park' ? 0.12 : 0,
    anticipation: kind === 'park' ? -1.2 : 0,
}))

Any spring you leave out follows position. arc curves the path by that fraction of the distance, and anticipation gives size a small opposite nudge first. A preset can instead return raw Web Animations { keyframes, options }.

Registered presets appear in the visitor's Motion settings.

Reduced motion

Visitors who ask their system for reduced motion always get a short crossfade, whatever the preset.