Subframe Motion

Get one Subframe Motion Library example: its complete React source; how it looks and moves; adapt notes naming the code that drives the motion and what to change; the npm packages to install (none means React only); the images its code loads from /motion/assets/ with download URLs (serve them there or change the paths); reduced-motion behavior and limitations; its licence and upstream credit; related examples; the guidance topics worth reading; and a preview image. Use a slug from search_motion_examples or from a www.subframe.com/motion/<slug> URL. This writes no files: adapt the code to the project, keep its licence header, and test it there. The code targets React 19; with React 18 server rendering, move its inline <style> CSS into a stylesheet, since React 18 escapes the CSS's quotes and > characters.

Get Subframe's guidance for designing motion well, by topic: principles (whether to animate at all), timing (durations, curves, springs), enter-exit (menus, dialogs, toasts), feedback (hover, press, state, loading), scroll, ambient (loops, backgrounds, shaders), text-and-numbers, performance, accessibility and adapting (turning a library example into project code). Read the relevant topics before designing, adapting or reviewing any animation, not only library examples.

Search the Subframe Motion Library for React animation examples. Describe what you want in plain words — the effect, the element, how it should feel, or, when matching a screenshot, what it looks like and what moves ('glowing border sweeping around a dark pricing card', 'playful press feedback for a like button', 'calm shader background behind a headline'). Results come most relevant first, with how each one looks; call get_motion_example with a slug for its code. If nothing fits closely, the result says so. Search reads plain language but not negations, so put hard constraints in the filters (runtime react means no animation library). Leave the query empty to browse a category or runtime.