BUILDWITHME/ UI
BuildWithMe discoveryESC to close
Menu
ComponentsEcosystemDocumentationContribute
GitHub

BuildWithMe UI / Handbook

Motion with a clear owner.

The Kinetic Playground Interface Engine uses motion to explain the product while keeping native scrolling, semantic order, and a complete static experience.

One owner per element

CSS handles local state, Motion handles component DOM transitions, Anime.js handles isolated line and code timelines, and React Three Fiber owns the optional canvas. An element is never driven by multiple engines.

A complete baseline

Headings, controls, commands, and chapter content render on the server. SVG and CSS provide the constellation for reduced motion, mobile, save-data, low-power, and WebGL failure modes.

Normal scrolling

The hero stays in normal document flow and animates on its own clock. Scrolling updates chapter navigation only. Chapter anchors work by keyboard and browser navigation; mobile keeps the same linear story.

Performance boundaries

Three.js is dynamically loaded, its space is reserved, rendering pauses off-screen or in hidden tabs, and only active component previews are imported. Vue and Svelte runtimes are excluded from the homepage.

Testing reduced-motion preference

Use this short Chrome checklist to test the user preference. Reduced motion is independent of the preview’s manual pause control; choosing Play must still respect the operating-system or emulated preference.

  1. Open Chrome DevTools with F12 or Ctrl+Shift+I on Windows/Linux, or Command+Option+I on macOS.
  2. Open the Command Menu with Ctrl+Shift+P on Windows/Linux or Command+Shift+P on macOS. Search for Show Rendering and open the Rendering panel. Under Emulate CSS media feature prefers-reduced-motion, select prefers-reduced-motion: reduce.
  3. Visit the homepage and /components/magnetic-button in the tab where emulation is enabled.
  4. Confirm that hero animations, canvas effects, and the button’s magnetic movement stop or simplify. Content, headings, keyboard focus, and controls must remain usable. Scrolling and chapter navigation should still work.
  5. Restore No emulation under the same prefers-reduced-motion setting, then refresh. This restores your operating-system preference; motion may still be reduced if your system requests it.