Reference · Web Motion Vocabulary Built with Claude Fable 5

Motion & Interaction
Playground

Sixteen live, interactive demos of the motion patterns used on real production sites. Every demo is built in vanilla JS + CSS so it runs offline — the caption under each one names the production library that builds the same effect in the real world. Scroll, hover, click, and drag.

The Library Landscape

Before you name an effect, know which tool builds it. These are the libraries you'll hear about. Organized by what they make, not by API.

GSAP animation engine
The industry-standard JS animation engine. Timelines, tweens, ScrollTrigger, SplitText. Does almost everything.
Use for: orchestrated, scroll-linked, and staggered motion
Motion React
Framer Motion's successor. Spring physics, layout animations, exit animations, useVelocity. React-first.
Use for: React apps that need motion
Lenis smooth scroll
Buttery smooth scrolling that all your scroll-linked effects ride on. Replaces Locomotive Scroll.
Use for: premium scroll feel + parallax
AOS scroll reveal
Drop-in scroll reveals. Tag an element with data-aos="fade-up" and you're done. Zero config.
Use for: quick reveals, no orchestration needed
Three.js 3D / WebGL
Full 3D rendering in the browser. Shaders, scenes, camera, lighting. Heavy but unmatched for real 3D.
Use for: 3D product views, shader art, immersive scenes
Spline 3D, no-code
Design 3D scenes in a visual editor, embed on the web. Three.js without writing Three.js.
Use for: 3D hero objects and product showcases
p5.js creative canvas
Creative coding library for canvas. Particles, generative art, interactive visuals.
Use for: generative backgrounds, particle systems
Swiper / Embla carousels
Touch carousels and sliders with momentum, snap, and pagination. Embla is the lightweight modern pick.
Use for: image galleries, testimonials, product sliders
CountUp.js numbers
One job: animate a number from A to B with easing. Tiny, no dependencies.
Use for: stats bands and metric counters
Typed.js typewriter
Types and deletes text in a loop. Configurable speed, cursor, and phrases.
Use for: hero tagline cycling
vanilla-tilt tilt
3D tilt-on-hover for cards. No dependencies, 2KB. Atropos is the fancier multi-layer version.
Use for: tilt cards without a 3D engine
pure CSS no library
Transitions, transforms, keyframes, scroll-snap. Many effects need zero JavaScript at all.
Use for: hovers, underlines, marquees, zooms, accordions

How to Brief an Agent

A formula you can reuse. The demos below each have a "copy brief" button that fills this in for you.

Effect name + which library + trigger (scroll / hover / click / load) + timing & easing + one detail that matters
"I want the hero headline to feel cinematic"
Staggered text reveal, GSAP SplitText, triggered on load. Split into words, 0.07s stagger, ease-out 0.6s. Words rise from below with a slight rotate.
"Make the stats feel earned, not pasted"
Count-up numbers, CountUp.js or GSAP, triggered by IntersectionObserver at 30% visible. 1.5s duration, ease-out cubic. Format with commas.
"I want a showpiece section that locks and slides"
Pinned horizontal scroll, GSAP ScrollTrigger, pin: true, scrub: 1. 4 panels, map scroll progress 0-1 to track translateX. Pin for 2 viewport heights.
01

Scroll Reveal

scroll to trigger

Content animates in the moment it enters the viewport. "Reveal" is a family, not one effect. These are the six variants you'll actually name to an agent, staggered 0.1s apart.

Fade inOpacity only, nothing moves. The quietest option, best for dense content.
Slide upFade plus a 28px rise. The default everywhere, and for good reason.
Pop / scale inGrows from 75% with a slight overshoot. Playful, good for cards and badges.
Slide from leftEnters sideways. Use when content reads left-to-right, like list items.
Blur inSharpens from a 10px blur. Feels premium and cinematic. Use sparingly.
Flip downTips in from a 45° hinge at the top. The most theatrical of the bunch.

Production: AOS, ScrollReveal — AOS names these fade, fade-up, zoom-in, fade-left/fade-right, flip-down. GSAP ScrollTrigger builds any of them with more control. "Blur in" is usually a custom GSAP tween on filter.

02

Staggered Text Reveal

scroll · then click replay

A headline where each word (or letter) animates in one-by-one instead of the whole line at once.

Great motion is a sentence, not a shout.

Production: GSAP + ScrollTrigger + SplitText — GSAP splits the headline into word/char spans and tweens them with a per-item stagger. This is the signature move of agency and portfolio sites.

03

Count-Up Numbers

scroll to trigger

Stats tick from 0 to their final value when they scroll into view. Makes numbers feel earned instead of pasted.

0
demo stat · projects shipped
0
demo stat · uptime
0
demo stat · stars

Production: CountUp.js — a tiny library that does exactly this. GSAP can also tween any number with gsap.to(obj, {value: 12800}).

04

3D Tilt Card

hover & move cursor

The card leans toward your cursor in 3D, with a light "glare" tracking your pointer. Inner content floats at different depths.

Perspective card

rotateX / rotateY from cursor position + translateZ layers

Production: vanilla-tilt.js, Atropos for this exact effect; Three.js / Spline when the card contains a real 3D scene rather than a tilted flat plane.

05

Parallax Layers

scroll slowly past

Background layers drift slower than foreground layers as you scroll, faking depth. Watch the circles, squares, and plate move at different speeds.

Foreground moves fastest

Production: Lenis or Locomotive Scroll supply the buttery smooth-scrolling these effects ride on; the layer offsets themselves are usually driven by GSAP ScrollTrigger or a small scroll handler like this one.

06

Magnetic Button

move cursor near it

Inside the dashed zone, the button is "attracted" to your cursor and springs back when you leave. A premium micro-interaction.

Production: GSAP — a mousemove listener feeds gsap.to() with a soft ease; on leave, an elastic.out tween snaps it home.

07

Infinite Marquee

hover to pause

An endless sliding band of text or logos. The content is duplicated once and loops seamlessly at -50%.

DESIGNMOTIONINTERACTIONTYPOGRAPHYLAYOUTCOLOR DESIGNMOTIONINTERACTIONTYPOGRAPHYLAYOUTCOLOR

Production: pure CSS keyframes (like here) for simple bands; GSAP when you want scroll-linked speed or direction changes.

08

Horizontal Scroll Strip

drag sideways

A horizontal row of panels you drag through with the mouse (or swipe on touch). Grab it and pull.

Panel 01
Panel 02
Panel 03
Panel 04
Panel 05
Panel 06
Panel 07
Panel 08

Production: GSAP Draggable, Swiper, Embla Carousel — they add momentum, snap points, and touch physics on top of this basic drag-to-scroll.

09

Typewriter / Text Loop

just watch

Text types itself out, pauses, deletes, and retypes the next phrase in a loop.

Build 

Production: Typed.js, TypeIt — or ~30 lines of vanilla JS with setTimeout, exactly like this demo.

10

Floating Gradient Blobs / Particles

just watch

Soft colored orbs drift around a canvas behind the content — the ambient background of half the dev-tool landing pages on the internet.

Ambient canvas background

Production: p5.js, tsParticles, plain <canvas> — or pure CSS with blurred divs and keyframes when it doesn't need to react to anything.

11

Animated Hover Underline

hover the links

Links draw an underline on hover. Four variants, all pure CSS. The wipe and center-grow are the two you'll see on 90% of designed navs.

Wipe left → right Grow from center Highlight strip Background fill

Production: pure CSS — a ::after pseudo-element with transform: scaleX() or scaleY() and a swapped transform-origin. Wipe = scaleX left-to-right, center = scaleX from center, highlight = a tall ::behind the text, fill = scaleY from bottom. No library needed, ever.

12

Pinned Horizontal Scroll

keep scrolling down

The section locks to the screen while your vertical scrolling slides the panels sideways. Scroll normally — down-scroll becomes right-travel.

01

The section pins

This wrapper is position: sticky inside a 300vh-tall parent, so it stays on screen for two extra viewport-heights of scrolling.

02

Scroll becomes travel

Your scroll progress through the tall parent (0 → 1) is mapped onto a horizontal translateX of this track.

03

Then it releases

When the track reaches its end, progress hits 1, the sticky wrapper un-pins, and the page continues normally.

04

The GSAP version

ScrollTrigger does this with pin: true and a scrubbed x tween — plus easing, snapping, and callbacks.

Production: GSAP ScrollTrigger — pin: true, scrub: 1 is the canonical way; this demo fakes the pin with CSS position: sticky plus a scroll-mapped transform.

13

Image Reveal / Wipe

scroll · then click replay

A solid colored cover slides off to reveal the image underneath — a curtain being pulled away. (The "photos" here are CSS gradient artboards so the file stays offline.)

reveal A
reveal B · delayed

Production: GSAP ScrollTrigger animating a cover div's scaleX/xPercent with a hard ease like power4.inOut. A favorite of photography and agency sites.

14

Hover Image Zoom

hover the frames

Image hovers are a family. Each frame here does a different thing on hover. All pure CSS.

scale 1 → 1.12
grayscale → color
scale + slight rotate
caption slides up
Caption on hovertext slides up from the bottom edge

Production: pure CSS — transform: scale() inside overflow: hidden for the zoom, filter: grayscale() for the color shift, translateY on a caption overlay for the text reveal. Every portfolio grid you've ever admired.

15

Cursor Glow

move cursor inside

A soft radial light trails your cursor with a slight lag (the lag is the whole trick — it's interpolated, not glued).

Move around in herethe glow eases toward the cursor at 10% per frame

Production: vanilla JS + rAF or GSAP quickTo() — same pattern powers custom cursors, spotlight cards, and hero glows.

16

Scroll-Velocity Text

scroll fast, then stop

The line slides sideways based on how fast you're scrolling, then eases back when you stop. Speed, not position, drives it.

SCROLL FASTER — velocity drives motion — SCROLL FASTER — velocity drives motion

Production: GSAP ScrollTrigger (getVelocity) or Lenis, which exposes scroll velocity on every frame. Motion (Framer Motion) has useVelocity for the React world.

17

Easing Comparison

scroll · then click replay

The same 1.4s slide, four different easings. Easing — how motion accelerates and decelerates — is what separates cheap motion from premium motion. Watch how each dot arrives.

linearconstant speed — robotic, avoid for UI
ease-out (cubic)fast start, gentle landing — the UI default
expo in-outslow–fast–slow — dramatic, for showpieces
elastic / springovershoots and settles — playful, physical

Production: GSAP eases (power2.out, expo.inOut, elastic.out), CSS cubic-bezier(), or real spring physics in Motion (Framer Motion). Naming an ease changes a result more than picking a different effect.

18

Modal / Overlay Transition

click to open · Esc to close

A dialog that fades in a blurred backdrop (the "scrim") while the panel scales up into place — and, just as important, animates back out on close. Exit animation is the part everyone forgets to specify.

Production: CSS transitions on a class toggle (like here), Motion's AnimatePresence for exit animations in React, or the native <dialog> element. Vocabulary: backdrop/scrim, scale-in, exit animation, focus trap.

19

Accordion / Expand

click to expand

Click a header to expand its content panel below. The tricky part is animating height, since CSS can't transition height: auto. This demo uses grid-template-rows: 0fr to 1fr, the modern fix.

What does this demo teach?

The accordion pattern: a clickable header that reveals a content panel. The old way was max-height hacks or JS measuring content. The modern way is animating grid-template-rows from 0fr to 1fr, which handles any content height without measuring.

When would I ask for this?

FAQ sections, settings panels, disclosure widgets, "learn more" expansions. Anywhere you want to let users drill in on demand instead of seeing everything at once.

What's the vocabulary word?

"Accordion" or "disclosure." In React, the component is often called a Collapsible or Disclosure. The animation is "expand/collapse" or "height transition." Say "accordion with smooth expand animation" and any agent will know what you mean.

Production: pure CSS (grid-template-rows trick, like here), Headless UI Disclosure in React, or Framer Accordion patterns. Libraries like Accordion.js handle the ARIA and keyboard navigation for you.

20

Skeleton Loading Shimmer

watch · then click "load"

Gray placeholder bars pulse with a shimmer while content "loads." Gives users something to look at instead of a blank screen. Click "Simulate load" to see them replaced with real content.

Production: pure CSS (gradient + background-position keyframes, like here) or React Loading Skeleton. The shimmer is a moving gradient on placeholder elements; when data arrives, you swap them for real content.

21

Toast Notification

click a button

A small message slides in from the side, sits for a few seconds, then slides back out. The three types you'll actually use: success, error, and info.

Production: react-hot-toast, Sonner, react-toastify, or vanilla JS with a queue. The pattern: create element, slide in with transition, auto-dismiss after timeout, slide out, then remove from DOM.

22

Dropdown Menu

click a menu item

Click a menu trigger to reveal a panel of links below it. The panel fades and scales in. Click anywhere else to close.

Production: Headless UI Menu in React, Radix Dropdown, or vanilla JS with positioned absolute panels. The animation is opacity + translateY + scale. Accessibility matters: keyboard nav, ARIA roles, focus management, click-outside to close.

23

Card Hover Lift

hover the cards

The card rises, gains a shadow, and its border lights up. Simple, but this is the hover treatment on nearly every feature grid and pricing page on the web.

⚡

Fast

Runs in under 12ms per frame.

🎨

Flexible

Theme every token to your brand.

📦

Tiny

12KB gzipped, zero dependencies.

Production: pure CSS — transform: translateY(-8px) plus a box-shadow and border-color change on hover, all with a ~0.35s ease-out transition. No library needed.

24

Scroll-Snap Sections

scroll inside the box

Scroll inside this container. Each section snaps into place as you scroll, like a mini full-page slideshow. This is native CSS scroll-snap, no JavaScript at all.

01
Section onescroll-snap-align: start
02
Section twoeach one locks into place
03
Section threepure CSS, no JS needed

Production: pure CSS — scroll-snap-type: y mandatory on the container and scroll-snap-align: start on each child. Full-page snap sites add scroll-snap-stop: always. GSAP ScrollTrigger can enhance this with scrubbed animations per panel.

Glossary — say this to your dev agent

The vocabulary. Name the effect, name the tool, and you'll get what you actually want.

EffectToolWhen you'd use it
01 Scroll RevealAOS / ScrollRevealAny content-heavy page that feels flat. The cheapest "make it feel designed" upgrade.
02 Staggered TextGSAP + SplitTextHero headlines and section titles you want to feel cinematic, not pasted.
03 Count-Up NumbersCountUp.js / GSAPStats bands ("10k users, 99% uptime") — makes claims feel measured, not typed.
04 3D Tilt Cardvanilla-tilt / Three.js / SplineProduct cards, pricing tiers, or NFT-style showcases that should feel physical. Use Three.js/Spline only when there's real 3D content.
05 Parallax LayersLenis / Locomotive + GSAPStory-telling pages and heroes that need depth. Skip it on dense app UIs.
06 Magnetic ButtonGSAPOne or two primary CTAs on a premium site. Everywhere = gimmick.
07 Infinite MarqueeCSS / GSAPLogo walls, skill lists, "as seen in" bands. Pause on hover for readability.
08 Drag StripSwiper / Embla / GSAP DraggableGalleries and testimonials when vertical space is tight and content is browsable.
09 TypewriterTyped.js / vanillaHero taglines cycling multiple audiences ("Build sites / apps / games"). Use one per page.
10 Gradient Blobsp5.js / canvas / CSSAmbient background atmosphere behind heroes. Keep contrast so text stays readable.
11 Hover Underlinepure CSSEvery nav and inline link on a designed site. Zero-cost polish — always yes.
12 Pinned HorizontalGSAP ScrollTriggerFeature tours and case-study showcases — 3–5 panels of "here's what it does."
13 Image WipeGSAP ScrollTriggerPortfolios and photography — gives each image an entrance instead of just existing.
14 Hover Zoompure CSSAny clickable image grid. Signals "this is interactive" without a single word.
15 Cursor Glowvanilla JS / GSAPDark-themed dev-tool sites; spotlight-follow cards. Desktop-only — pointless on touch.
16 Velocity TextGSAP / Lenis / MotionEditorial and fashion sites where scrolling itself should feel expressive.
17 EasingGSAP eases / cubic-bezier / springsEvery animation you ever request. Say "ease-out" for UI, "expo" for drama, "spring" for playful. Never linear.
18 Modal TransitionCSS / Motion AnimatePresence / <dialog>Any dialog, drawer, or overlay. Always specify the exit animation too — that's the half agents skip.
19 Accordion / Expandpure CSS (grid-rows) / Headless UIFAQs, settings panels, disclosure widgets. The grid-template-rows 0fr→1fr trick animates height without measuring.
20 Skeleton Shimmerpure CSS / React Loading SkeletonLoading states. Shimmering placeholder bars instead of spinners — gives users a sense of the layout that's coming.
21 Toast NotificationSonner / react-hot-toast / vanillaSuccess messages, errors, confirmations. Slides in, auto-dismisses, slides out. Don't overuse — three at once is too many.
22 Dropdown MenuHeadless UI / Radix / vanilla JSContextual actions, navigation menus, "more options." Needs keyboard nav and click-outside-to-close, not just the animation.
23 Card Hover Liftpure CSSFeature grids, pricing cards, blog post previews. translateY + shadow + border glow. The most common hover on the web.
24 Scroll-Snap Sectionspure CSS scroll-snapFull-page slideshow sites, story sections, product tours. Native CSS — no JS unless you add per-panel animations.

Master Brief

0 items