Design Atlas

← Atlas

Motion ​

Animation libraries and motion patterns for interfaces — from full JS animation engines to copy-paste CSS effects.

Start here ​

  • Transitions.dev — curated product-UI transitions as portable CSS with reduced-motion guards, plus an agent skill that finds ad-hoc motion in your project.
  • React Bits — hundreds of animated pieces (GSAP, three.js, Framer Motion) with an llms.txt index.
  • Easing Wizard — a visual editor that turns springs and bounces into plain CSS linear() curves, with a free REST API, MCP server and Claude Code plugin.
  • DialKit — an MIT live control panel for tuning springs, easing and timelines in the real component, with an agent-facing guide.
  • 60fps — about 2,080 recorded interactions from shipped apps, with storyboards and a paid MCP that returns motion breakdowns.

All sources ​

Showing 50 of 240 sites

Ship: reuse with the notice or credit the licence asks forConditional: read the terms before you reuse anythingLook only: no licence stated, so take ideas and nothing else

  • 60fpsAbout 2,080 real iOS interaction recordings with storyboards, a glossary, llms.txt and a paid MCP that returns motion breakdowns.Verdict Very usefulConditional licence, proprietary paidAgent channels mcp, llms-txtReviewed
  • 8bit.aiEnterprise AI site that turns a dark 3D logo and streaking light into a scroll-led introduction to its services.Verdict NicheLook only licence, not statedAgent channels noneReviewed
  • A-FrameAn HTML-first framework for interactive WebXR scenes, with live 3D examples and a visual inspector.Verdict UsefulShip licence, open source permissiveAgent channels noneReviewed
  • Aave Design & EngineeringAave Labs’ engineering article pairs live glass-effect controls with a cross-browser SVG displacement and WebGL implementation.Verdict NicheConditional licence, proprietary freeAgent channels noneReviewed
  • AbetoAn interactive studio portfolio pairing a warm, illustrated botanical hero with realtime digital experiences.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • Aceternity UI200+ React and Tailwind landing-page components and blocks (heroes, bento grids, shaders); the elaborate blocks are paid.Verdict Very usefulConditional licence, proprietary paidAgent channels mcpReviewed
  • Active TheoryA creative studio portfolio built around a dark, animated particle scene and a compact route into its project work.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • Amacro86 full-screen theme and page reveal effects on View Transitions, delivered as copyable CSS snippets.Verdict NicheShip licence, open source permissiveAgent channels noneReviewed
  • Amanita DesignGame studio site with an illustrated rotating feature, a tiled game catalogue and media-rich individual game pages.Verdict UsefulConditional licence, proprietary freeAgent channels noneReviewed
  • AmicroBig MIT shadcn registry of loaders, card fans, carousels and micro-interactions; young and changing fast.Verdict UsefulShip licence, open source permissiveAgent channels cli, registryReviewed
  • Anim8Browser editor that traces video into editable animated SVG and Lottie; MCP and CLI on Pro.Verdict UsefulConditional licence, proprietary paidAgent channels mcp, cliReviewed
  • AnimataCopy-in animated React components, 157 at review, browsed as moving previews rather than static screenshots.Verdict UsefulLook only licence, not statedAgent channels llms-txtReviewed
  • Animate UIAnimated Radix/Base UI/Headless UI primitives, styled components and 260 animated Lucide icons via the shadcn CLI.Verdict UsefulConditional licence, source availableAgent channels llms-txt, registryReviewed
  • Animated Icons4,000+ recolourable Lottie/SVG/GIF icons; free tier plus one-time All-Access, no attribution needed.Verdict UsefulConditional licence, proprietary paidAgent channels noneReviewed
  • Animated shadcn/uiAlpha MIT set of stock shadcn/ui components with Motion added, installed via its own CLI or npm package.Verdict NicheShip licence, open source permissiveAgent channels cliReviewed
  • Anime.jsJavaScript animation engine with fine-grained control over complex sequences and SVG effects, and a clear, well-documented API.Verdict UsefulShip licence, open source permissiveAgent channels noneReviewed
  • AnimistaA live CSS animation workbench with preview objects, timing controls and copyable generated keyframes.Verdict UsefulConditional licence, mixedAgent channels noneReviewed
  • Annnimate105 GSAP components in React, Vue and HTML from a studio, with an MCP for paid subscribers.Verdict UsefulConditional licence, proprietary paidAgent channels mcp, llms-txtReviewed
  • AnsphareFree gallery that pairs a design with its prompt, its DESIGN.md or a skill file you can drop into Claude or Cursor.Verdict UsefulConditional licence, proprietary paidAgent channels cli, skill, promptsReviewed
  • ArcReact components and interactive blocks with motion and live examples.Verdict UsefulConditional licence, mixedAgent channels noneReviewed
  • ASCII MagicBrowser image and video studio for ASCII, dithering, mosaics and visual effects, with an MCP server for agents.Verdict Very usefulConditional licence, proprietary paidAgent channels mcp, llms-txtReviewed
  • ASCII StudioTurns images, GIFs and video into ASCII animation and exports a self-contained React component.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • Atelier UIAn interactive library of shader and motion components with a live preview, adjustable controls and copyable implementation prompts.Verdict UsefulConditional licence, mixedAgent channels llms-txt, cli, promptsReviewed
  • AwwwardsPaid-entry web design awards with jury-scored winners, interaction clips and studio credits; llms.txt plus a small awards API.Verdict UsefulConditional licence, proprietary paidAgent channels llms-txt, apiReviewed
  • Bencho38 live, tunable React blocks whose "Copy prompt" hands an agent full source plus token-mapping instructions.Verdict UsefulShip licence, open source permissiveAgent channels promptsReviewed
  • bendayAn MIT React component that turns a logo into a halftone mark with 21 controllable loading and agent-state animations.Verdict UsefulShip licence, open source permissiveAgent channels registry, llms-txtReviewed
  • beUIMIT motion components, agent UI and charts with llms.txt, JSON API, agent skill and hosted MCP; paid Pro adds blocks and templates.Verdict Very usefulConditional licence, mixedAgent channels mcp, llms-txt, registry, api, skillReviewed
  • BlueCanvasSeoul digital studio showing live motion experiments, interactive web craft and selected client projects alongside its service work.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • BounshyA live Framer specimen for glitching text, particle trails and configurable colour treatments on hover.Verdict NicheLook only licence, not statedAgent channels noneReviewed
  • Browse.coolA beta gallery of 25 high-craft, type-led sites and 194 screenshots and clips for mood-boarding.Verdict NicheLook only licence, not statedAgent channels noneReviewed
  • Bruno SimonA playable 3D portfolio that turns project discovery into driving through a stylized low-poly world.Verdict Very usefulConditional licence, mixedAgent channels noneReviewed
  • Canvas UI35 GPU effects over live, clickable HTML in WebGL or WebGPU, for six frameworks through a shadcn registry.Verdict Very usefulConditional licence, source availableAgent channels llms-txt, registryReviewed
  • Canvas UI Qwen DemoAn interactive Canvas UI showcase that previews shader effects over live HTML and keeps its controls and install snippets beside each example.Verdict UsefulConditional licence, source availableAgent channels registryReviewed
  • Chornobyl Exclusion Zone — BandaBanda's Ukrainian government identity turns the reactor silhouette into a yearly changing mark that gradually disappears by 2064.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • Chrome ExperimentsGoogle's archive of creative browser experiments, with WebGL, sound and motion collections linked to their live demos.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • Chrome Music LabGoogle's hands-on music experiments, useful for studying playful grids, musical controls and sound-led visual interaction.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • Circle Loaders24 standalone animated SVG loading spinners.Verdict NicheLook only licence, not statedAgent channels noneReviewed
  • CodePenPublic interactive Pens and monthly challenges make it easy to study small web experiments, motion and interface details.Verdict UsefulConditional licence, mixedAgent channels noneReviewed
  • CodropsCreative web demos, interaction tutorials and a handpicked site exhibition for expressive frontend design.Verdict Very usefulConditional licence, mixedAgent channels noneReviewed
  • Collect UIDaily feed of UI shots and motion clips, 150+ element categories with designer leaderboards.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • Componentry53 animated React effects, from text and WebGL hero backgrounds to image effects, installed through the shadcn CLI.Verdict UsefulShip licence, open source permissiveAgent channels llms-txt, registryReviewed
  • CraftShort design-engineering notes pair practical interface principles with small live demos and before-and-after comparisons.Verdict NicheShip licence, open source permissiveAgent channels skillReviewed
  • CSS Design AwardsA daily web-awards archive with jury ratings and links to featured sites, useful for current portfolio and campaign references.Verdict UsefulConditional licence, proprietary paidAgent channels noneReviewed
  • CSS Text Effects90 copy-ready animated text effects in pure CSS, with custom-property colour tokens.Verdict UsefulShip licence, open source permissiveAgent channels promptsReviewed
  • CueHand-picked web interaction and UI component references with motion demos and prompts for recreating them.Verdict UsefulLook only licence, not statedAgent channels promptsReviewed
  • Cult UITextured, distinctive marketing components and shader heroes built with Motion; paid blocks and templates.Verdict UsefulConditional licence, mixedAgent channels registryReviewed
  • Design Engineer ToolsOne-page list of about 128 apps and sites a web design engineer uses, from galleries and component kits to 3D, capture and motion tools.Verdict NicheLook only licence, not statedAgent channels noneReviewed
  • Design MinisDirectory of small design tools filtered by category and price, including effects, backgrounds, motion, type and image editors.Verdict UsefulConditional licence, proprietary freeAgent channels noneReviewed
  • Design Motion PrinciplesCreate or audit UI motion through Emil, Jakub and Jhey lenses; HTML audit report with looping demos.Verdict Very usefulShip licence, open source permissiveAgent channels skillReviewed
  • Design Spells337 hand-picked recordings of micro-interactions and easter eggs; llms.txt plus a Markdown homepage via Accept header.Verdict UsefulLook only licence, not statedAgent channels llms-txtReviewed

Patterns worth reusing ​

  • Offer each effect in multiple formats (pure CSS, framework code, AI prompt) so consumers pick whichever fits their stack.
  • Isolate "expensive" effects (shaders, particles, WebGL) into separate components loaded only where they pay off.
  • Use spring/physics-based easing instead of fixed-duration curves for feedback that feels naturally weighted.
  • Ship a live parameter editor (stiffness, damping, duration) so an effect can be tuned before it's copied into a project.
  • Respect prefers-reduced-motion by default on any animated effect, not as an afterthought.
  • Describe every interaction in four beats (trigger, starting state, movement, settle) before writing animation code (60fps).
  • Tune springs by perceived duration and bounce first, drop to stiffness and damping only when needed, and keep a replay button beside the element (DialKit).
  • Give AI waiting states a distinct animation per activity, and pause canvas animations when they're off-screen or the tab is hidden (Libraries.dev: Thinking orbs).
  • Spend the animation budget on moments that matter (streaks, rewards, success states) rather than on every transition (60fps).
  • Write motion briefs scene by scene, with a duration, entry direction and easing character for each (OpenMotion).
  • Make opening slower and more expressive than closing, scale menus from the side they are attached to, and let tooltips appear after a delay but vanish at once (Transitions.dev).
  • Keep durations and easings as tokens named by feel, and audit code for hard-coded or default values (Transitions.dev, Easing Wizard).
  • Bake spring and bounce curves into CSS linear() instead of shipping a runtime spring library (Easing Wizard).
  • When text or numbers change in place, animate only what changed: shared characters stay still, digits roll by place value and widths are locked first (Torph, NumberFlow, slot-text, interior.dev).
  • Put numbers on motion rules: user-triggered animations under 300 ms, stagger under 50 ms per item, linear easing only for progress (User Interface Wiki).
  • Remove motion from high-frequency interactions where it only slows people down (Devouring Details).
  • Author morph correspondence once as data, and fall back to a crossfade when a pair isn't worth morphing (Morphrig).
  • Treat a full-screen transition as punctuation, not something that runs on every click (glimm).
  • Give video components a stated duration and seed every random effect so renders are repeatable (Remocn, framecn).

Pitfalls ​

  • Heavier animation dependencies (Framer Motion, GSAP, three.js) add real bundle weight once many effects are used together.
  • Text and motion effects can create accessibility issues for screen readers if not paired with a static fallback.
  • Physics-driven interactions sometimes have poor affordance — users may not realize they're interactive at all.
  • Running many simultaneous effects can hurt performance on low-power devices; budget how many run at once.
  • Recordings show behaviour, not code: timing still has to be worked out, and 60fps's generated code targets SwiftUI, so web teams must translate springs to CSS or Motion.
  • Live tuning panels are development tools; the values you settle on still have to be copied back into production code (DialKit).
  • Lottie-based icons load lottie-web at runtime, which is heavy when a CSS or SVG transition would do (useAnimations).
  • Browser support still has gaps: linear() is ignored by older engines (Easing Wizard), and according to Morphrig, Safari 26.3 can't animate an SVG path's d with CSS or WAAPI.
  • Code-based video has licence strings attached: Remotion needs a company licence above three employees (Remocn), and Editframe is free only for organisations of up to three people (framecn).
  • Reduced motion isn't always handled for you: slot-text 0.3.4 has no reduced-motion check, and Paper Shaders doesn't document one, so add your own fallback.
  • Motion galleries show behaviour, not timing or code (Details, Landing Love, What Ships), and Motionimo's linear video craft teaches pacing, not implementation.
  • Published counts disagree across Transitions.dev's README, skill page and Pro page, and its Refine tool spends chat credits while it runs in editor mode.