---
title: "the Vibing Company"
canonical: "https://vibing.inc/library/c/motion-and-animation"
site: "the Vibing Company"
---

The Vibeary — collection

# Motion & Animation

Motion is what separates a page that works from a page that feels alive. This shelf covers animation engines, scroll-driven animation, text effects, and the reference sites that show what tasteful motion looks like before you start tuning easing curves.

[Search all gems](https://vibing.inc/library)[Newest additions](https://vibing.inc/library/new)

## Inside Motion & Animation

- Animation engines 9
- Scroll animation 9
- CSS animation collections 8
- Motion references 8
- Text animation 8
- Loaders & spinners 7
- Easing tools 6
- Motion editors 6

## Gems in this collection

[### transition.style 46 drop-in enter/exit transitions applied by an HTML attribute, covering wipes, circles, polygons and squares with custom-property theming. Adam Argyle (@argyleink) Apache-2.0](https://vibing.inc/library/transition-style-vg-1447)[### Lenis Smooth-scroll runtime that virtualizes wheel input while keeping native scrollbars, anchors and accessibility behaviour intact. darkroom.engineering (@darkroomengineering) MIT](https://vibing.inc/library/lenis-vg-1497)[### Devouring Details Paid interactive reference manual on interaction detail — motion choreography, inferring intent, simulating physics — with downloadable React prototypes. Rauno Freiberg (@raunofreiberg) paid](https://vibing.inc/library/devouring-details-vg-1486)[### Motion Hybrid engine combining the Web Animations API with a JS spring runtime, shipping React, Vue and vanilla bindings. Matt Perry (@mattgperry) MIT](https://vibing.inc/library/motion-vg-1433)[### tsParticles Confetti Confetti and firework burst library with shape, physics, spread and origin controls, framework-agnostic with React and Vue wrappers. Matteo Bruni (@matteobruni) MIT](https://vibing.inc/library/tsparticles-confetti-vg-1491)[### The Craft of UI Newsletter of long-form UI craft write-ups covering scroll-driven animation, CSS motion tricks and interaction detail, with live demos. Jhey Tompkins (@jh3y) free](https://vibing.inc/library/the-craft-of-ui-vg-1489)[### Easing Wizard Editor for CSS easing that covers cubic-bezier, steps, springs, bounces and overshoots, exporting linear() output for browsers. Matthias Martin (@RoyDigerhund) free](https://vibing.inc/library/easing-wizard-vg-1453)[### vtbag Toolkit site plus libraries for the View Transitions API: inspection tools, browser capability tests and fixes for common failure modes. Martin Trapp (@martrapp) MIT](https://vibing.inc/library/vtbag-vg-1524)[### NumberFlow Animated number component that transitions digits, separators and signs correctly across locales, for React, Vue, Svelte and vanilla. Max Barvian (@barvian) MIT](https://vibing.inc/library/numberflow-vg-1490)[### React Bits Large open-source collection of animated, interactive React components with copy-paste and CLI installation. David Haz (@davidhdev) MIT](https://vibing.inc/library/react-bits-vg-1495)[### ScrollyVideo.js Component that scrubs a video frame-accurately against scroll position across React, Vue, Svelte and vanilla, handling decode differences per browser. Daniel Kao (@dkaoster) MIT](https://vibing.inc/library/scrollyvideo-js-vg-1506)[### CSS Triggers Reference mapping each CSS property to whether changing it causes layout, paint or composite work in each browser engine. GoogleChromeLabs free](https://vibing.inc/library/css-triggers-vg-1485)[### Splitting.js Microlibrary that splits elements by word, character, line, grid or image and populates CSS custom properties for index-based staggering. Shaw Brown (@shshaw) MIT](https://vibing.inc/library/splitting-js-vg-1515)[### Animation Patterns Interactive atlas of 65 authored CSS and SVG motion patterns plus studies on particles, springs, reaction-diffusion and gesture-to-easing. @mahwin free](https://vibing.inc/library/animation-patterns-vg-1482)[### Loading.io CSS Loaders Set of pure-CSS spinners with a live editor for size, color and speed, exporting standalone HTML and CSS. Loading.io freemium](https://vibing.inc/library/loading-io-css-loaders-vg-1466)[### Easings.net Reference of standard easing functions with animated previews, cubic-bezier values and copyable code in several languages. Andrey Sitnik & Ivan Solovev free](https://vibing.inc/library/easings-net-vg-1454)[### Snabbt.js Minimalist animation library that only touches CSS matrix transforms and opacity, keeping every animation on the compositor thread. Daniel Lundin (@daniel-lundin) MIT](https://vibing.inc/library/snabbt-js-vg-1436)[### Matter.js 2D rigid-body physics engine with collision, constraints and composites, frequently repurposed to make UI elements tumble and stack. Liam Brummitt (@liabru) MIT](https://vibing.inc/library/matter-js-vg-1492)[### Morphicons SVG icon library that morphs one glyph into another using closed-form optimal rotation and spring physics, across six frameworks. Guillermo (guillermolg.com) MIT](https://vibing.inc/library/morphicons-vg-1460)[### Theatre.js Visual sequencer and keyframe editor that animates any JS object, including three.js scenes, with a Studio UI overlay. Theatre.js (@theatre-js) Apache-2.0](https://vibing.inc/library/theatre-js-vg-1481)[### CodyHouse Library Component library of interaction-heavy patterns with articles explaining the motion decisions behind each demo. CodyHouse (@CodyHouse) freemium](https://vibing.inc/library/codyhouse-library-vg-1474)[### Hover.css Collection of CSS3 hover effects — 2D transitions, background sweeps, icons, curls, speech bubbles — in CSS, Sass and LESS. Ian Lunn (@IanLunn) MIT](https://vibing.inc/library/hover-css-vg-1444)[### Uiverse Loaders Community gallery of over a thousand loaders written in plain CSS or Tailwind, each copyable and MIT-licensed. Uiverse.io (@uiverse-io) MIT](https://vibing.inc/library/uiverse-loaders-vg-1470)[### design-motion-principles Agent skill with build and audit modes for motion, distilled per-designer from published work by Kowalski, Krehel and Tompkins. Kyle Zantos (@kylezantos) open-source](https://vibing.inc/library/design-motion-principles-vg-1426)[### Scroll-Driven Animations Reference site of live demos, tools and recipes for CSS scroll() and view() timelines, including a progress-bar and stacking-cards cookbook. Bramus Van Damme (@bramus) free](https://vibing.inc/library/scroll-driven-animations-vg-1501)[### use-gesture Hook and vanilla library normalizing drag, pinch, wheel, scroll and hover into velocity- and offset-aware gesture state. Poimandres (@pmndrs) MIT](https://vibing.inc/library/use-gesture-vg-1494)[### Anime.js Timeline-based animation engine covering CSS, SVG, DOM attributes and JS objects; v4 rewrote it into tree-shakeable modules. Julian Garnier (@juliangarnier) MIT](https://vibing.inc/library/anime-js-vg-1430)[### Turn Signal Adds direction awareness to view transitions so back and forward navigation animate opposite ways automatically. Martin Trapp (@martrapp) MIT](https://vibing.inc/library/turn-signal-vg-1523)[### Mo.js Declarative motion-graphics toolbelt for bursts, shape swirls and custom timelines; built for particle-style UI flourishes, not tweening DOM. Oleg Solomka (@legomushroom) MIT](https://vibing.inc/library/mo-js-vg-1432)[### Linear Easing Generator Converts a JS easing function or spring definition into an optimized CSS linear() value with adjustable point budget. Jake Archibald (@jakearchibald) open-source](https://vibing.inc/library/linear-easing-generator-vg-1455)[### astro-vtbot Bag of tricks for Astro view transitions: loading indicators, transition names, swap hooks and fallback control. Martin Trapp (@martrapp) MIT](https://vibing.inc/library/astro-vtbot-vg-1522)[### Bounce.js Tool and library for generating CSS keyframe animations from physics presets like bounce, hardbounce, sway and wobble. Tictail (@tictail) MIT](https://vibing.inc/library/bounce-js-vg-1442)[### ScrollMagic Scroll interaction framework for pinning elements, scrubbing tweens and triggering callbacks against scroll position, with a visual debug indicator mode. Jan Paepke (@janpaepke) MIT](https://vibing.inc/library/scrollmagic-vg-1503)[### Rive Vector animation editor with a state-machine runtime, so animations respond to app state and input rather than replaying linearly. Rive freemium](https://vibing.inc/library/rive-vg-1479)[### Micron.js Micro-interaction library of CSS animations triggered by data attributes or a JS API, covering taps, bounces, jelly and blinks. Webkul (@webkul) MIT](https://vibing.inc/library/micron-js-vg-1476)[### SpinKit Set of CSS-only loading indicators using transforms and opacity, designed to stay smooth on low-power devices. Tobias Ahlin (@tobiasahlin) MIT](https://vibing.inc/library/spinkit-vg-1469)[### Blotter.js WebGL-backed API that applies shader material effects — liquid distort, channel split, rolling — to live, selectable text. Bradley Griffith (@bradley) MIT](https://vibing.inc/library/blotter-js-vg-1511)[### Sal Performance-focused scroll reveal library using IntersectionObserver and CSS classes, weighing under 3KB with no dependencies. Mirek Ciastek (@mciastek) MIT](https://vibing.inc/library/sal-vg-1500)[### hover-effect WebGL library that displaces and blends two images on hover using a grayscale displacement map for liquid reveals. Robin Delaporte (@robin-dela) MIT](https://vibing.inc/library/hover-effect-vg-1462)[### Lax.js Vanilla scroll-animation plugin driving CSS transforms and filters from scroll position via a declarative preset syntax. Alex Fox (@alexfoxy) MIT](https://vibing.inc/library/lax-js-vg-1496)[### Weeee.js Sub-kilobyte tweening engine exposing a single function that animates arbitrary numeric values over time with easing. sfi0zy MIT](https://vibing.inc/library/weeee-js-vg-1437)[### ScrollReveal Library that reveals elements as they enter the viewport, with per-element distance, rotation, scale, interval and sequencing config. Fisssion (@scrollreveal) GPL](https://vibing.inc/library/scrollreveal-vg-1504)[### Scroll-Driven Animations Debugger DevTools extension that lists scroll and view timelines on a page and visualizes their ranges and current progress. Bramus Van Damme (@bramus) MIT](https://vibing.inc/library/scroll-driven-animations-debugger-vg-1502)[### bezier-easing Tiny, dependency-free implementation of CSS cubic-bezier timing as a JS function, using Newton-Raphson with a sample table. Gaëtan Renaudeau (@gre) MIT](https://vibing.inc/library/bezier-easing-vg-1451)[### Animate Plus 3KB Promise-based animation module for CSS and SVG properties, using requestAnimationFrame with no dependencies or plugin system. Benjamin De Cock (@bendc) MIT](https://vibing.inc/library/animate-plus-vg-1429)[### Motus Scroll animation library that mimics CSS keyframe syntax, letting you define percentage-based frames tied to scroll progress. Alexandru Cambose (@alexcambose) MIT](https://vibing.inc/library/motus-vg-1499)[### awesome-web-animation Curated index of web animation libraries across SVG, canvas, CSS, scroll and text, plus GUI tools, books and easing utilities. Sergey Pimenov (@sergey-pimenov) open-source](https://vibing.inc/library/awesome-web-animation-vg-1448)[### SplitType Splits text nodes into line, word and character wrappers with CSS classes so any engine can animate them. Luke Peavey (@lukePeavey) MIT](https://vibing.inc/library/splittype-vg-1516)[### Walkway Minimal library for animating SVG line, path and polyline elements as if they were being drawn by hand. Connor Atherton (@ConnorAtherton) MIT](https://vibing.inc/library/walkway-vg-1510)[### Vivus Library that animates SVG stroke drawing with delayed, sync and oneByOne modes, plus scroll- and script-driven playback control. Maxwellito (@maxwellito) MIT](https://vibing.inc/library/vivus-vg-1509)[### shuffle-text Text effect library recreating the Flash-era character shuffle/decode reveal with configurable duration and random glyph sets. Yasunobu Ikeda (@ics-ikeda) MIT](https://vibing.inc/library/shuffle-text-vg-1514)[### react-flip-toolkit Configurable FLIP animation library for React with spring physics, nested and staggered transitions, and scale-corrected children. Alex Holachek (@aholachek) MIT](https://vibing.inc/library/react-flip-toolkit-vg-1457)[### motion-ui-design Long-running index of motion UI resources — prototyping software, JS and CSS libraries, inspiration galleries, performance tooling. fliptheweb open-source](https://vibing.inc/library/motion-ui-design-vg-1449)[### Scrollama IntersectionObserver-based scrollytelling library that fires step callbacks and progress values without listening to scroll events. Russell Samora (@russellsamora) MIT](https://vibing.inc/library/scrollama-vg-1505)[### Calligraph Fluid text transition component powered by Motion, animating between arbitrary strings with per-character flow. Raphael Salaja (@raphaelsalaja) open-source](https://vibing.inc/library/calligraph-vg-1512)[### Loconative Scroll Locomotive Scroll's API reimplemented on native scrolling plus Lenis, keeping the data-attribute syntax without the fake scroll container. Quentin Hocdé (@quentinhocde) MIT](https://vibing.inc/library/loconative-scroll-vg-1498)[### Animista Interactive playground for tweaking pre-made CSS animations and copying only the keyframes you configured. Ana Travas (@ana108) & Sergej (@sergej108) free](https://vibing.inc/library/animista-vg-1441)[### Emil Kowalski Skills Set of agent skills encoding animation rules — building, reviewing, auditing and vocabulary — derived from a design engineer's published practice. Emil Kowalski (@emilkowalski) MIT](https://vibing.inc/library/emil-kowalski-skills-vg-1427)[### Magic Animations CSS animation set focused on special effects — magic, bling, perspective, foolish and rotational entrances beyond the Animate.css vocabulary. miniMAC (@miniMAC) MIT](https://vibing.inc/library/magic-animations-vg-1445)[### scrambling-letters Small vanilla library producing a per-character decoding scramble on any element, with per-element timing control. Recidvst MIT](https://vibing.inc/library/scrambling-letters-vg-1513)[### Between.js ES6 tweening engine that interpolates numbers, colors, vectors and objects with a chainable API and no DOM assumptions. Alexander Buzin (@sasha240100) MIT](https://vibing.inc/library/between-js-vg-1431)[### Progressbar.js Library for animated SVG progress shapes — line, circle, semicircle or custom path — with per-step callbacks and custom easing. Kimmo Brunfeldt (@kimmobrunfeldt) MIT](https://vibing.inc/library/progressbar-js-vg-1468)[### Loading UI Gallery of spinners, loaders and loading animations with copyable CSS and HTML for each. Bartosz Zagrodzki (@bzagrodzki) free](https://vibing.inc/library/loading-ui-vg-1472)[### Generative Loaders Accessible React loading components purpose-built for generative interfaces: streamed text, inline activity and image generation. Kasturi Khanke open-source](https://vibing.inc/library/generative-loaders-vg-1471)[### nerdy.dev Personal site of a Chrome CSS advocate publishing modern CSS motion techniques, scroll-driven animation demos and interaction experiments. Adam Argyle (@argyleink) free](https://vibing.inc/library/nerdy-dev-vg-1488)[### AutoAnimate Drop-in utility that watches a parent element and automatically animates children being added, removed or reordered. FormKit (@formkit) MIT](https://vibing.inc/library/autoanimate-vg-1525)[### CodeMyUI Microinteractions Tagged archive of microinteraction demos harvested from CodePen and Dribbble, each with embedded runnable source. Saijo George (@SaijoGeorge) free](https://vibing.inc/library/codemyui-microinteractions-vg-1458)[### SVG Artista Web tool that takes pasted SVG markup and generates CSS keyframes animating stroke-dashoffset and fill for draw-on effects. Sergej Skrjanec & Ana Travas MIT](https://vibing.inc/library/svg-artista-vg-1480)[### useAnimations Library of small animated icons — play/pause, menu/close, loading, heart — delivered as Lottie-backed React and vanilla components. Patrik Svoboda (@thesvob) free](https://vibing.inc/library/useanimations-vg-1477)[### Great Animations Essay breaking down what separates animations that feel good from ones that feel wrong, with side-by-side interactive comparisons. Emil Kowalski (@emilkowalski) free](https://vibing.inc/library/great-animations-vg-1487)[### Animations on the Web Course on web animation theory and implementation covering easing choice, duration, orchestration and performance, taught through interactive lessons. Emil Kowalski (@emilkowalski) paid](https://vibing.inc/library/animations-on-the-web-vg-1483)[### Transitions.dev Copy-paste collection of essential web app transitions: card resizes, modals, icon swaps and particle effects, with a refine tool. Jakub Antalík (@jantalik) freemium](https://vibing.inc/library/transitions-dev-vg-1520)[### interior.dev React micro-interaction primitives focused specifically on the half-second of feedback right after a user click. ozzy (@ddoemonn) open-source](https://vibing.inc/library/interior-dev-vg-1475)[### Torph Dependency-free animated text component that morphs between strings without pulling in a motion library. Lochie Axon open-source](https://vibing.inc/library/torph-vg-1518)[### Easing Graphs Curated reference of easing curves shown as graphs with live previews and copyable values. Alex (@alexvanderzon) & Lochie (@lochieaxon) free](https://vibing.inc/library/easing-graphs-vg-1450)[### Liquid Gooey React component and playground producing SVG filter-based gooey blob merging effects for menus, toggles and loaders. Jakub Antalík (@jantalik) free](https://vibing.inc/library/liquid-gooey-vg-1463)[### Sonner Opinionated React toast component with stacked, swipeable notifications and carefully tuned motion. Emil Kowalski (@emilkowalski_) MIT](https://vibing.inc/library/sonner-vg-1519)[### MotionVault Minimalist library of 202 web animation effects with copy-ready AI prompts, plus MotionLens to extract any site’s animation into a reusable prompt. @xiyu519 MIT](https://vibing.inc/library/motionvault-vg-2165)[### Kinetics 153 interface animations built on spring physics rather than fixed-duration easing; tune stiffness and damping, then copy CSS, React or an AI prompt. Colorion free](https://vibing.inc/library/kinetics-vg-2111)[### Surface Parametric motion studio with a few hundred components driven by sliders instead of timelines or keyframes, updating in real time. Surface freemium](https://vibing.inc/library/surface-vg-2057)[### Arqé Creative platform combining 189 motion templates, animated device mockup scenes and a 4K art-directed stock library, all exportable from the browser. Arqé freemium](https://vibing.inc/library/arq-vg-2059)[### animos 25 ready-made animation templates for showcasing design work — drop in images or video, tweak, export MP4 or WebM in the browser. animos freemium](https://vibing.inc/library/animos-vg-2060)[### Anim8 Browser motion design editor with editable keyframes, easing curves, anchors, text stagger and multi-artboard canvas, exporting MP4, SVG and Lottie. Anim8 freemium](https://vibing.inc/library/anim8-vg-2056)[### MOVO Browser-based motion template editor with 94 templates and live controls for composition, animation, camera, cards and shadows, exporting video without installs. Rico® Supply freemium](https://vibing.inc/library/movo-vg-2055)[### Textify.js Text animation library handling split-and-reveal presets with scroll triggers and TypeScript support, aimed at agency-style hero text. MAGGIx1404 MIT](https://vibing.inc/library/textify-js-vg-1517)[### KUTE.js Animation engine with plugins for SVG path morphing, cubic morphing, SVG transforms, text and CSS properties. thednp (@thednp) MIT](https://vibing.inc/library/kute-js-vg-1508)[### Axis-Praxis Resources Catalog of variable-font tools and references — playgrounds, inspectors like Samsa, axis-mapping editors, and CodePen collections for animating font axes. Laurence Penney (@lorp) free](https://vibing.inc/library/axis-praxis-resources-vg-1521)[### flubber Utility that interpolates between arbitrary SVG shapes by normalizing point counts, enabling morphs between unrelated paths. Noah Veltman (@veltman) MIT](https://vibing.inc/library/flubber-vg-1507)[### Hoverstat.es Curated gallery of web design work selected specifically for interaction and motion quality rather than visual styling alone. Official Business (@hoverstates) free](https://vibing.inc/library/hoverstat-es-vg-1459)[### Ceaser Single-page cubic-bezier visualizer with named presets and live preview of the curve against a moving element. Matthew Lein (@matthewlein) free](https://vibing.inc/library/ceaser-vg-1452)[### One Div Loaders Gallery of loading animations each built from exactly one div, with copyable HTML and CSS per item. Evgenii Simzikov (@simzikov) free](https://vibing.inc/library/one-div-loaders-vg-1467)[### Popmotion Functional, framework-agnostic motion primitives — springs, decay, keyframes, inertia — usable as building blocks under any renderer. Matt Perry (@mattgperry) MIT](https://vibing.inc/library/popmotion-vg-1434)[### Motion UI Sass library generating transition and animation classes with configurable easing, delay and chaining, extracted from Foundation. Foundation (@foundation) MIT](https://vibing.inc/library/motion-ui-vg-1446)[### csshake CSS classes producing tuneable shake, wobble and jitter motion via generated keyframes, with intensity and chunk variants. elrumordelaluz MIT](https://vibing.inc/library/csshake-vg-1443)[### My CSS Polyhedra CodePen collection of animated 3D polyhedra built entirely with CSS transforms and custom properties. Ana Tudor (@anatudor) free](https://vibing.inc/library/my-css-polyhedra-vg-1440)[### A Guide to CSS Animation CodePen collection accompanying a CSS animation guide, demonstrating keyframes, timing, choreography and stateful animation techniques. Jhey Tompkins (@jh3y) free](https://vibing.inc/library/a-guide-to-css-animation-vg-1438)[### Amit Sheen CSS Animations CodePen collection of pure-CSS animation experiments including stepped animation, 3D scenes and animation without JavaScript. Amit Sheen (@amit_sheen) free](https://vibing.inc/library/amit-sheen-css-animations-vg-1439)[### React Spring Spring-physics animation library that interpolates any value type and runs off the React render loop for imperative performance. Poimandres (@pmndrs) MIT](https://vibing.inc/library/react-spring-vg-1493)[### spring-easing Library that converts spring physics parameters into easing keyframe arrays consumable by WAAPI, GSAP, Motion or CSS. Okiki Ojo (@okikio) MIT](https://vibing.inc/library/spring-easing-vg-1456)[### Thinking Orbs Dotted thought-orb loading indicators built for AI and agent interfaces, with variants and copyable component code. Jakub Antalík (@jantalik) free](https://vibing.inc/library/thinking-orbs-vg-1473)[### Mantra Browser-based timeline editor for building CSS keyframe animations visually and exporting the generated stylesheet. Jeremy Kahn (@jeremyckahn) MIT](https://vibing.inc/library/mantra-vg-1478)[### CSS Loaders Library of several hundred loaders, spinners and progress indicators, each built from a single element with pure CSS. Vineeth TR (@vineethtrv) MIT](https://vibing.inc/library/css-loaders-vg-1465)[### AniJS Declarative animation library driven entirely by HTML data attributes, letting non-JS authors wire triggers to CSS animations. AniJS MIT](https://vibing.inc/library/anijs-vg-1428)[### Bouncy Ball Repo implementing the same bouncing-ball animation across dozens of techniques — CSS, WAAPI, GSAP, SVG, canvas, React — for direct comparison. Sparkbox (@sparkbox) MIT](https://vibing.inc/library/bouncy-ball-vg-1484)[### awesome-spinners Curated index of web spinner and loader collections across CSS, SVG, canvas and framework-specific implementations. Yangshun Tay (@yangshun) open-source](https://vibing.inc/library/awesome-spinners-vg-1464)


---

Source: https://vibing.inc/library/c/motion-and-animation · Agent docs: https://vibing.inc/for-agents · MCP: https://vibing.inc/api/public/mcp