Motion & Animation

46 drop-in enter/exit transitions applied by an HTML attribute, covering wipes, circles, polygons and squares with custom-property theming.

Smooth-scroll runtime that virtualizes wheel input while keeping native scrollbars, anchors and accessibility behaviour intact.

Paid interactive reference manual on interaction detail — motion choreography, inferring intent, simulating physics — with downloadable React prototypes.

Hybrid engine combining the Web Animations API with a JS spring runtime, shipping React, Vue and vanilla bindings.

Confetti and firework burst library with shape, physics, spread and origin controls, framework-agnostic with React and Vue wrappers.

Newsletter of long-form UI craft write-ups covering scroll-driven animation, CSS motion tricks and interaction detail, with live demos.

Editor for CSS easing that covers cubic-bezier, steps, springs, bounces and overshoots, exporting linear() output for browsers.

Toolkit site plus libraries for the View Transitions API: inspection tools, browser capability tests and fixes for common failure modes.

Animated number component that transitions digits, separators and signs correctly across locales, for React, Vue, Svelte and vanilla.

Large open-source collection of animated, interactive React components with copy-paste and CLI installation.

Component that scrubs a video frame-accurately against scroll position across React, Vue, Svelte and vanilla, handling decode differences per browser.

Reference mapping each CSS property to whether changing it causes layout, paint or composite work in each browser engine.

Microlibrary that splits elements by word, character, line, grid or image and populates CSS custom properties for index-based staggering.

Interactive atlas of 65 authored CSS and SVG motion patterns plus studies on particles, springs, reaction-diffusion and gesture-to-easing.

Set of pure-CSS spinners with a live editor for size, color and speed, exporting standalone HTML and CSS.

Reference of standard easing functions with animated previews, cubic-bezier values and copyable code in several languages.

Minimalist animation library that only touches CSS matrix transforms and opacity, keeping every animation on the compositor thread.

2D rigid-body physics engine with collision, constraints and composites, frequently repurposed to make UI elements tumble and stack.

SVG icon library that morphs one glyph into another using closed-form optimal rotation and spring physics, across six frameworks.

Visual sequencer and keyframe editor that animates any JS object, including three.js scenes, with a Studio UI overlay.

Component library of interaction-heavy patterns with articles explaining the motion decisions behind each demo.

Collection of CSS3 hover effects — 2D transitions, background sweeps, icons, curls, speech bubbles — in CSS, Sass and LESS.

Community gallery of over a thousand loaders written in plain CSS or Tailwind, each copyable and MIT-licensed.

Agent skill with build and audit modes for motion, distilled per-designer from published work by Kowalski, Krehel and Tompkins.

Reference site of live demos, tools and recipes for CSS scroll() and view() timelines, including a progress-bar and stacking-cards cookbook.

Hook and vanilla library normalizing drag, pinch, wheel, scroll and hover into velocity- and offset-aware gesture state.

Timeline-based animation engine covering CSS, SVG, DOM attributes and JS objects; v4 rewrote it into tree-shakeable modules.

Adds direction awareness to view transitions so back and forward navigation animate opposite ways automatically.

Declarative motion-graphics toolbelt for bursts, shape swirls and custom timelines; built for particle-style UI flourishes, not tweening DOM.

Converts a JS easing function or spring definition into an optimized CSS linear() value with adjustable point budget.

Bag of tricks for Astro view transitions: loading indicators, transition names, swap hooks and fallback control.

Tool and library for generating CSS keyframe animations from physics presets like bounce, hardbounce, sway and wobble.

Scroll interaction framework for pinning elements, scrubbing tweens and triggering callbacks against scroll position, with a visual debug indicator mode.

Vector animation editor with a state-machine runtime, so animations respond to app state and input rather than replaying linearly.

Micro-interaction library of CSS animations triggered by data attributes or a JS API, covering taps, bounces, jelly and blinks.

Set of CSS-only loading indicators using transforms and opacity, designed to stay smooth on low-power devices.

WebGL-backed API that applies shader material effects — liquid distort, channel split, rolling — to live, selectable text.

Performance-focused scroll reveal library using IntersectionObserver and CSS classes, weighing under 3KB with no dependencies.

WebGL library that displaces and blends two images on hover using a grayscale displacement map for liquid reveals.

Vanilla scroll-animation plugin driving CSS transforms and filters from scroll position via a declarative preset syntax.

Sub-kilobyte tweening engine exposing a single function that animates arbitrary numeric values over time with easing.

Library that reveals elements as they enter the viewport, with per-element distance, rotation, scale, interval and sequencing config.

DevTools extension that lists scroll and view timelines on a page and visualizes their ranges and current progress.

Tiny, dependency-free implementation of CSS cubic-bezier timing as a JS function, using Newton-Raphson with a sample table.

3KB Promise-based animation module for CSS and SVG properties, using requestAnimationFrame with no dependencies or plugin system.

Scroll animation library that mimics CSS keyframe syntax, letting you define percentage-based frames tied to scroll progress.

Curated index of web animation libraries across SVG, canvas, CSS, scroll and text, plus GUI tools, books and easing utilities.

Splits text nodes into line, word and character wrappers with CSS classes so any engine can animate them.

Minimal library for animating SVG line, path and polyline elements as if they were being drawn by hand.

Library that animates SVG stroke drawing with delayed, sync and oneByOne modes, plus scroll- and script-driven playback control.

Text effect library recreating the Flash-era character shuffle/decode reveal with configurable duration and random glyph sets.

Configurable FLIP animation library for React with spring physics, nested and staggered transitions, and scale-corrected children.

Long-running index of motion UI resources — prototyping software, JS and CSS libraries, inspiration galleries, performance tooling.

IntersectionObserver-based scrollytelling library that fires step callbacks and progress values without listening to scroll events.

Fluid text transition component powered by Motion, animating between arbitrary strings with per-character flow.

Locomotive Scroll's API reimplemented on native scrolling plus Lenis, keeping the data-attribute syntax without the fake scroll container.

Interactive playground for tweaking pre-made CSS animations and copying only the keyframes you configured.

Set of agent skills encoding animation rules — building, reviewing, auditing and vocabulary — derived from a design engineer's published practice.

CSS animation set focused on special effects — magic, bling, perspective, foolish and rotational entrances beyond the Animate.css vocabulary.

Small vanilla library producing a per-character decoding scramble on any element, with per-element timing control.

ES6 tweening engine that interpolates numbers, colors, vectors and objects with a chainable API and no DOM assumptions.

Library for animated SVG progress shapes — line, circle, semicircle or custom path — with per-step callbacks and custom easing.

Gallery of spinners, loaders and loading animations with copyable CSS and HTML for each.

Accessible React loading components purpose-built for generative interfaces: streamed text, inline activity and image generation.

Personal site of a Chrome CSS advocate publishing modern CSS motion techniques, scroll-driven animation demos and interaction experiments.

Drop-in utility that watches a parent element and automatically animates children being added, removed or reordered.

Tagged archive of microinteraction demos harvested from CodePen and Dribbble, each with embedded runnable source.

Web tool that takes pasted SVG markup and generates CSS keyframes animating stroke-dashoffset and fill for draw-on effects.

Library of small animated icons — play/pause, menu/close, loading, heart — delivered as Lottie-backed React and vanilla components.

Essay breaking down what separates animations that feel good from ones that feel wrong, with side-by-side interactive comparisons.

Course on web animation theory and implementation covering easing choice, duration, orchestration and performance, taught through interactive lessons.

Copy-paste collection of essential web app transitions: card resizes, modals, icon swaps and particle effects, with a refine tool.

React micro-interaction primitives focused specifically on the half-second of feedback right after a user click.

Dependency-free animated text component that morphs between strings without pulling in a motion library.

Curated reference of easing curves shown as graphs with live previews and copyable values.

React component and playground producing SVG filter-based gooey blob merging effects for menus, toggles and loaders.

Opinionated React toast component with stacked, swipeable notifications and carefully tuned motion.

Minimalist library of 202 web animation effects with copy-ready AI prompts, plus MotionLens to extract any site’s animation into a reusable prompt.

153 interface animations built on spring physics rather than fixed-duration easing; tune stiffness and damping, then copy CSS, React or an AI prompt.

Parametric motion studio with a few hundred components driven by sliders instead of timelines or keyframes, updating in real time.

25 ready-made animation templates for showcasing design work — drop in images or video, tweak, export MP4 or WebM in the browser.

Creative platform combining 189 motion templates, animated device mockup scenes and a 4K art-directed stock library, all exportable from the browser.

Browser motion design editor with editable keyframes, easing curves, anchors, text stagger and multi-artboard canvas, exporting MP4, SVG and Lottie.

Browser-based motion template editor with 94 templates and live controls for composition, animation, camera, cards and shadows, exporting video without installs.

Utility that interpolates between arbitrary SVG shapes by normalizing point counts, enabling morphs between unrelated paths.

Text animation library handling split-and-reveal presets with scroll triggers and TypeScript support, aimed at agency-style hero text.

Catalog of variable-font tools and references — playgrounds, inspectors like Samsa, axis-mapping editors, and CodePen collections for animating font axes.

Animation engine with plugins for SVG path morphing, cubic morphing, SVG transforms, text and CSS properties.

Sass library generating transition and animation classes with configurable easing, delay and chaining, extracted from Foundation.

Library of several hundred loaders, spinners and progress indicators, each built from a single element with pure CSS.

Declarative animation library driven entirely by HTML data attributes, letting non-JS authors wire triggers to CSS animations.

Functional, framework-agnostic motion primitives — springs, decay, keyframes, inertia — usable as building blocks under any renderer.

Library that converts spring physics parameters into easing keyframe arrays consumable by WAAPI, GSAP, Motion or CSS.

Gallery of loading animations each built from exactly one div, with copyable HTML and CSS per item.

Curated gallery of web design work selected specifically for interaction and motion quality rather than visual styling alone.

Single-page cubic-bezier visualizer with named presets and live preview of the curve against a moving element.

Spring-physics animation library that interpolates any value type and runs off the React render loop for imperative performance.

CodePen collection of pure-CSS animation experiments including stepped animation, 3D scenes and animation without JavaScript.

Curated index of web spinner and loader collections across CSS, SVG, canvas and framework-specific implementations.

Repo implementing the same bouncing-ball animation across dozens of techniques — CSS, WAAPI, GSAP, SVG, canvas, React — for direct comparison.

Browser-based timeline editor for building CSS keyframe animations visually and exporting the generated stylesheet.

CodePen collection accompanying a CSS animation guide, demonstrating keyframes, timing, choreography and stateful animation techniques.

CodePen collection of animated 3D polyhedra built entirely with CSS transforms and custom properties.

CSS classes producing tuneable shake, wobble and jitter motion via generated keyframes, with intensity and chunk variants.

Dotted thought-orb loading indicators built for AI and agent interfaces, with variants and copyable component code.