Motion that reacts.

Where this belongs

An occasional exploratory surface on a promotional page, where the light is decorative and the control stays still.

Where to avoid it

Dense tools, reading surfaces, and frequently used controls. Cursor tracking should never compete with the task.

Motion Ref by joepUI

Our adaptation

Adapted from Glow Trace: a decorative light moves across a stationary surface. Keyboard focus reveals a centered light; activation keeps it on for keyboard and touch use. Reduced motion installs no tracking listener.

Human review still matters

Test the intensity and pointer response with motion-sensitive people. The light conveys no information and never replaces the focus ring. Reduced motion removes animation while retaining the action and result.

Where this belongs

An occasional preview or selection where light reinforces a clearly labeled state.

Where to avoid it

Using glow as the only focus or state indicator, or adding it to every link and control.

mthines’ Animations skill

The skill’s prepared glow layer offers a useful way to add light without animating a shadow or blur.

Our adaptation

A prismatic halo fades behind a glossy tile. The surface stays still. Focus previews the effect; a native button also lets keyboard and touch users keep it on. Reduced motion makes the change instant.

Human review still matters

Check focus visibility, glow intensity, and repeated activation. Increased contrast and reduced transparency remove the halo. We exclude the source’s 3D tilt, looping backgrounds, and animated filters.

Where this belongs

A short, requested material demonstration or occasional decorative response.

Where to avoid it

Persistent shimmer, large bright sweeps, or repeated highlights that draw attention away from content.

Motion Ref by joepUI

The catalog’s light-sweep effect is a promising starting point for a more expressive material study.

Our adaptation

A single highlight crosses a chrome surface on activation. The next activation returns it. There is no loop or automatic playback. Reduced motion omits the moving highlight and preserves text feedback.

Human review still matters

Review brightness and the effect of repeated use with motion-sensitive people. This adaptation does not endorse the pack’s magnetic cursors, confetti, springs, or scroll effects.

Where this belongs

An explicit decorative artwork reveal. Meaningful images still need a suitable text alternative.

Where to avoid it

Hiding essential content on load or requiring scroll-triggered reveals to read a page.

Source & adaptation

Inspired by Motion Ref’s interaction patterns. This is an original native-HTML study with short transform or opacity motion, user control, and no loop. Reduced motion makes the result instant. It is not the source’s unmodified sample.

Human review

Check keyboard operation, visible focus, screen reader output, text enlargement, touch, and motion intensity in context. No certification is implied.

Where this belongs

A brief acknowledgement of an occasional button activation, confined to the control.

Where to avoid it

Every keystroke, frequently repeated controls, or ripples that expand across the page.

Motion Ref by joepUI

Our adaptation

The reference ripple becomes one bounded response to a click, tap, Enter, or Space. Only its scale and opacity animate; no loop or spring.

Human review still matters

Check the ripple’s brightness and rapid repeated activation. The label stays on a solid surface. Reduced motion removes animation while retaining the action and result.

Where this belongs

Frequently used buttons that need restrained feedback without delaying the action.

Where to avoid it

Large scaling, bounce, and making a button move away from the pointer.

Source & adaptation

Inspired by Motion Ref’s interaction patterns. This is an original native-HTML study with short transform or opacity motion, user control, and no loop. Reduced motion makes the result instant. It is not the source’s unmodified sample.

Human review

Check keyboard operation, visible focus, screen reader output, text enlargement, touch, and motion intensity in context. No certification is implied.

Where this belongs

A meaningful completion moment, with a persistent confirmation and text result.

Where to avoid it

Routine actions repeated many times a day, or celebrations that delay the next action.

Motion Ref by joepUI

A clear result without a celebration burst.

Our adaptation

An incomplete circle gives way to a checkmark on a mint disc with a short 6 px settle and scale. A native button changes its text and pressed state. No SVG stroke animation or color-only confirmation. Reduced motion makes the state change instant.

Human review still matters

Test keyboard operation, focus, screen reader announcements, contrast, and repeated use. This is a selective adaptation of the visual pattern, not approval of the whole skill.

Where this belongs

A deliberate save or favorite action where the filled symbol reinforces the persistent selection.

Where to avoid it

Bounce, overshoot, or a symbol without a descriptive button name and pressed state.

Motion Ref by joepUI

A star changes state without the bounce.

Our adaptation

An outlined star fills and scales into place over 220 ms without overshoot; the native button keeps a persistent pressed state and a descriptive action label. Reduced motion makes the state change instant.

Human review still matters

Test keyboard operation, focus, screen reader announcements, contrast, and repeated use. This is a selective adaptation of the visual pattern, not approval of the whole skill.

Where this belongs

A requested emphasis change in a short explanation or annotated example.

Where to avoid it

Animated text entrances, highlighting large reading areas, or letting the highlight reduce text contrast.

Motion Ref by joepUI

Emphasis without moving the words.

Our adaptation

A prepared highlight layer sweeps behind stable text using scale X. The letters keep their contrast and never animate individually. Reduced motion makes the state change instant.

Human review still matters

Test keyboard operation, focus, screen reader announcements, contrast, and repeated use. This is a selective adaptation of the visual pattern, not approval of the whole skill.

Where this belongs

A navigation link where a small underline reinforces interaction.

Where to avoid it

Replacing underlines in running text or relying on hover to identify a link.

Source & adaptation

Inspired by Motion Ref’s interaction patterns. This is an original native-HTML study with short transform or opacity motion, user control, and no loop. Reduced motion makes the result instant. It is not the source’s unmodified sample.

Human review

Check keyboard operation, visible focus, screen reader output, text enlargement, touch, and motion intensity in context. No certification is implied.

Where this belongs

An occasional status change that benefits from visual continuity. The result is also announced as text.

Where to avoid it

Continuously changing data, numeric counters, or animating words while someone reads.

Source & adaptation

Inspired by Motion Ref’s interaction patterns. This is an original native-HTML study with short transform or opacity motion, user control, and no loop. Reduced motion makes the result instant. It is not the source’s unmodified sample.

Human review

Check keyboard operation, visible focus, screen reader output, text enlargement, touch, and motion intensity in context. No certification is implied.

Where this belongs

A new notification arriving after an explicit action, with a persistent text result.

Where to avoid it

Pulsing badges, constantly attracting attention, or unexplained changing counts.

Source & adaptation

Inspired by Motion Ref’s interaction patterns. This is an original native-HTML study with short transform or opacity motion, user control, and no loop. Reduced motion makes the result instant. It is not the source’s unmodified sample.

Human review

Check keyboard operation, visible focus, screen reader output, text enlargement, touch, and motion intensity in context. No certification is implied.

Where this belongs

Reinforcing a conventional high-contrast focus boundary with optional light.

Where to avoid it

Using glow alone as the focus indicator or moving the label out of view.

Source & adaptation

Inspired by Motion Ref’s interaction patterns. This is an original native-HTML study with short transform or opacity motion, user control, and no loop. Reduced motion makes the result instant. It is not the source’s unmodified sample.

Human review

Check keyboard operation, visible focus, screen reader output, text enlargement, touch, and motion intensity in context. No certification is implied.

Where this belongs

Native checkbox selection where the decorative confirmation reinforces the checked state.

Where to avoid it

Custom checkbox semantics, disappearing labels, or delaying a form response.

Source & adaptation

Inspired by Motion Ref’s interaction patterns. This is an original native-HTML study with short transform or opacity motion, user control, and no loop. Reduced motion makes the result instant. It is not the source’s unmodified sample.

Human review

Check keyboard operation, visible focus, screen reader output, text enlargement, touch, and motion intensity in context. No certification is implied.

Where this belongs

A binary preference with a native checkbox and visible label; the track is decorative.

Where to avoid it

Unlabeled switches, color-only state, or treating this demo as a site accommodation setting.

Source & adaptation

Inspired by Motion Ref’s interaction patterns. This is an original native-HTML study with short transform or opacity motion, user control, and no loop. Reduced motion makes the result instant. It is not the source’s unmodified sample.

Human review

Check keyboard operation, visible focus, screen reader output, text enlargement, touch, and motion intensity in context. No certification is implied.

Where this belongs

Mutually exclusive options with native radio semantics and an added visual selection marker.

Where to avoid it

Hand-built tab semantics or labels that imply an actual site preference is being changed.

Source & adaptation

Inspired by Motion Ref’s interaction patterns. This is an original native-HTML study with short transform or opacity motion, user control, and no loop. Reduced motion makes the result instant. It is not the source’s unmodified sample.

Human review

Check keyboard operation, visible focus, screen reader output, text enlargement, touch, and motion intensity in context. No certification is implied.

Where this belongs

A measured task with genuine progress values, updated when work advances.

Where to avoid it

Invented loading progress, timed demos presented as real work, or announcing every animated intermediate value.

Motion Ref by joepUI

Our adaptation

A native progress element carries the value. The decorative track moves to the same value using scale. Each activation advances a demo step; this is not a fake timed loading sequence.

Human review still matters

Check value announcements and the persistent result. In a product, connect the value to actual task progress. Reduced motion removes animation while retaining the action and result.

Where this belongs

An actual workflow advancing after a completed action. Here only the first step is demonstrated.

Where to avoid it

Pretending time has passed, auto-advancing, or making a workflow depend on animation.

Source & adaptation

Inspired by Motion Ref’s interaction patterns. This is an original native-HTML study with short transform or opacity motion, user control, and no loop. Reduced motion makes the result instant. It is not the source’s unmodified sample.

Human review

Check keyboard operation, visible focus, screen reader output, text enlargement, touch, and motion intensity in context. No certification is implied.

Where this belongs

An actual connection change represented by both text and a small non-looping light. This is a simulation.

Where to avoid it

Continuous pulsing, color-only connection status, or implying the demo checks a real network.

Source & adaptation

Inspired by Motion Ref’s interaction patterns. This is an original native-HTML study with short transform or opacity motion, user control, and no loop. Reduced motion makes the result instant. It is not the source’s unmodified sample.

Human review

Check keyboard operation, visible focus, screen reader output, text enlargement, touch, and motion intensity in context. No certification is implied.

Where this belongs

A user-requested field check with a persistent, specific error. Type a title to clear it.

Where to avoid it

Shaking the field, auto-clearing an error, or using animation as the only error signal.

Source & adaptation

Inspired by Motion Ref’s interaction patterns. This is an original native-HTML study with short transform or opacity motion, user control, and no loop. Reduced motion makes the result instant. It is not the source’s unmodified sample.

Human review

Check keyboard operation, visible focus, screen reader output, text enlargement, touch, and motion intensity in context. No certification is implied.

Where this belongs

A browsable card collection where a small lift helps identify the item under the pointer or keyboard focus.

Where to avoid it

Pointer tilt, dramatic elevation, crowded layouts, or touch-only information hidden behind hover.

mthines’ Animations skill

The prepared-layer technique gives the card dimension while keeping shadow rendering out of the animated properties.

Our adaptation

The card lifts slightly as its shadow layer fades in. The link gets its own visible focus ring. Reduced motion keeps the card in place. This is a native link, not an entire clickable container.

Human review still matters

Check focus clearance, neighboring content, magnification, and whether the repeated lift is distracting. Touch users have the same link and information without needing hover. No pointer tilt or parallax is used.

Where this belongs

An occasional explanation opened on request, with native keyboard behavior.

Where to avoid it

Repeated large panel motion, hidden essential content, or invented dialog semantics.

Source & adaptation

Inspired by Motion Ref’s interaction patterns. This is an original native-HTML study with short transform or opacity motion, user control, and no loop. Reduced motion makes the result instant. It is not the source’s unmodified sample.

Human review

Check keyboard operation, visible focus, screen reader output, text enlargement, touch, and motion intensity in context. No certification is implied.

Where this belongs

A newly added item where a brief entrance helps locate it. Focus stays on the action.

Where to avoid it

Staggering every item, animation on routine data refresh, or delaying the addition.

Source & adaptation

Inspired by Motion Ref’s interaction patterns. This is an original native-HTML study with short transform or opacity motion, user control, and no loop. Reduced motion makes the result instant. It is not the source’s unmodified sample.

Human review

Check keyboard operation, visible focus, screen reader output, text enlargement, touch, and motion intensity in context. No certification is implied.

Where this belongs

A reversible removal where a short exit helps show what changed; the action remains available.

Where to avoid it

Destructive deletion without confirmation or undo, or moving focus into disappearing content.

Source & adaptation

Inspired by Motion Ref’s interaction patterns. This is an original native-HTML study with short transform or opacity motion, user control, and no loop. Reduced motion makes the result instant. It is not the source’s unmodified sample.

Human review

Check keyboard operation, visible focus, screen reader output, text enlargement, touch, and motion intensity in context. No certification is implied.