Motion Lab / Library Field Guide
Five tools. One rule:
make motion useful.
No coding experience? Try each demonstration below. Learn what it does, when it's helpful, when it's annoying, and copy a precise instruction you can give an AI coding tool.
Important: The five previews below are original, lightweight browser demonstrations of the *ideas*, not imported copies or executions of the named libraries. Follow official source links to use the real tools in a project. The separate Lenis playground offers an opt-in implementation of Lenis itself.
01 / Personal, responsive movement
Motion
Make an element gently change its size, position, or visibility when someone interacts with it.
Button feedback, page transitions, menus and app interactions.
A still element communicates just as clearly, or movement makes a task slower.
Core library: MIT. Some Motion+ extras are paid, and are not included.
Original previewClick to compare
movement.
Copy Motion build instructions
Use the MIT Motion animation library (motion.dev) in my existing app. Animate one meaningful control when the user taps it, using transform/opacity, not distracting page-wide motion. Keep text readable during the transition; honor prefers-reduced-motion; support keyboard interaction and cleanly dispose animations. Use the library's official current API and show a before/after example. Include tests for responsiveness, accessibility, and repeated clicks.
02 / Choreographed sequences
GSAP
Think of a timeline in a video editor: first the title arrives, then a picture, then the main button. GSAP helps coordinate that timing.
Brand storytelling, interactive launches, and carefully timed visual sequences.
A basic hover or click animation is all you need.
GSAP has a no-charge license, not MIT; review its terms, particularly for competing visual animation builders.
Original previewSequenced elements
Copy GSAP build instructions
Use GSAP's currently licensed core timeline API in my existing website to stage a purposeful four-step reveal. One animation should prepare the visitor for the next. Use transform and opacity, limit the total duration, and pause/skip for prefers-reduced-motion. Avoid scroll-jacking, layout shifts, and infinite loops. Use the actual GSAP package according to official docs; check current license restrictions for this use. Verify keyboard focus order, repeated playback and small screens.
03 / Scroll-driven editorial scenes
Locomotive Scroll
As someone scrolls, artwork can shift gently or sections reveal themselves. Version 5 builds on Lenis.
Portfolio stories or gallery pages where content reacts to scrolling.
Forms, documentation and users who prefer regular scrolling.
MIT. Modern v5 behavior differs from older v4 tutorials; check version before implementation.
Original previewScroll inside the picture
A little perspective.
Scroll this area. Notice how the composition shifts. In a real project, keep focus and scrolling fully usable.
And more room to breathe.
This original native-scroll illustration demonstrates the *concept* of parallax. It does not run Locomotive Scroll.
Copy Locomotive build instructions
Use Locomotive Scroll v5 (MIT, built on Lenis) for a single editorial scene in my website. Follow the latest v5 docs, not v4 data-scroll-container examples. Keep native scroll and anchor behavior, make mobile and touch behavior comfortable, and disable parallax for reduced-motion preference. Do not enable scroll effects on form fields. Use intersection observers where appropriate. Measure responsiveness, frame stability, keyboard behavior, and layout shifts. Include a graceful no-JavaScript fallback.
04 / Animated component inspiration
React Bits
Reusable components for text, interactive backgrounds, and small details. Use one playful element to support the page's purpose.
Hero text, tasteful micro-interactions and creative presentation.
Decoration competes with reading or usability.
The public source has MIT + Commons Clause restrictions; do not redistribute its components as a library. React Bits Pro is separately licensed. Atlas does not vendor either.
Original previewText entrance
Copy React Bits build instructions
Choose one legally usable React Bits free component from its official website for my React project. Link me to the exact source and review its current MIT + Commons Clause license; do not copy paid React Bits Pro content or publish the component itself as a standalone library. Make the effect support reading, honor prefers-reduced-motion, avoid creating inaccessible duplicate text, and keep performance usable on budget phones. Include fallback static text and keyboard/accessibility checks.
05 / 3D spaces, with restraint
Three.js
A tool for creating real-time 3D scenes in the browser. It can help explain a product's shape or make a digital exhibition.
Product viewers, educational models and genuinely spatial stories.
A photograph or ordinary layout is clearer, faster and more accessible.
MIT. The original preview uses CSS 3D, not WebGL or the Three.js engine.
Original previewDrag or use arrow keys
Copy Three.js build instructions
Use Three.js (MIT) to create a lightweight optional interactive 3D product viewer. Render only when visible and supported; limit pixel ratio and asset weight, clean up GPU resources, and offer a clearly labeled static poster fallback. Honor prefers-reduced-motion and no-WebGL devices. Support mouse, touch and keyboard controls with obvious reset and descriptions. Measure load time, interaction responsiveness, battery use and accessibility on phones. If 3D adds no user benefit, use a static illustration instead.
Which one should I choose?
Try the simplest solution that solves your visitor's problem. You do not need all five in one website.
| I want to… | Explore this | A simpler option |
|---|---|---|
| Make a button feel responsive | Motion | Native CSS transition |
| Tell a story with timed reveals | GSAP | Web Animations API |
| Use scroll-based transitions | Locomotive Scroll | CSS and IntersectionObserver |
| Add a playful heading | React Bits | Plain accessible text |
| Show a 3D product | Three.js | Photo or video |
These educational studies include no copied upstream component source, paid assets, account requirement, or background telemetry. Read each project's current license before using it in your own project. New to design? Take the guided first step ↗