animation

Curated collection of loading screens, skeletons and waiting-state animations from shipped products.

Animated variants of the css-pattern collection: moving CSS-gradient backgrounds with no JS or images.

Interactive course and playground on building playful, physical web animations, with runnable demos throughout.

Newsletter dedicated to web animation techniques, tools and motion design writing.

Vector animation editor focused on SVG and Lottie output, exporting animated icons and logos to SVG, Lottie, GIF, MP4 and WebM.

Small registry of production-ready animated shadcn/ui components built with React, Tailwind and Framer Motion.

Catalogue of community-made React Native animations and UI components organised by component type, with source links and voting.

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

Curated gallery of web design with animated project covers, organised by style, type and industry.

Hand-crafted interaction and micro-animation snippets for React and Tailwind, browsable by effect.

Cyberpunk terminal-themed React component library with glitch effects, scanlines, neon accents and monospace-first layout.

Animated React components and UI blocks built with Motion, distributed as copy-paste source.

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

Terminal ASCII and ANSI art editor with frame animation, 256-colour and 16-colour modes, Unicode and CP437 support and custom themes.

Animated React and Tailwind components, blocks and design systems distributed through the shadcn CLI.

Ongoing collection of React Native animation implementations built with Reanimated, Gesture Handler and Skia, each self-contained.

Open-source set of smoothly animated Lucide-style icons as React components with motion on interaction.

Web-based motion design tool that imports Figma frames and exports video, GIF or Lottie with reusable animated components.

Turns static Mermaid.js diagrams into animated sequenced visualisations with themes and video export for architecture walkthroughs.

Agent skill files targeting specific design aspects such as animation timing and typographic detail.

Animated line graph component for React Native built on Skia, with gesture-driven scrubbing.

SwiftUI effect library with prepackaged transitions and change effects: particle bursts, jumps, shines, glows and shakes.

SwiftUI reimplementations of meaningful animations from popular iOS apps, each with source and explanation.

Agency-built Astro landing page with animation, dark mode and a strong opinionated visual identity.

Reference catalogue of SwiftUI spring animation parameter values with side-by-side visual comparisons.

Declarative animation layer over Reanimated with Framer-Motion-style mount and unmount transitions, variants and sequences.

Repository of SwiftUI source files reproducing iOS 26 liquid glass morphing, stretch and squash effects.

Pure SwiftUI tab bar with a set of preset item animations and custom shape support.

Lightweight SwiftUI package offering roughly a dozen distinct loading animation styles with configurable colour, size and speed.

SwiftUI popup library where the popup grows out of the element that triggered it rather than fading in.

SwiftUI library for per-character text animations with a set of preset entry effects.

Lightweight web-component loading animations and spinners, individually customisable by size, speed and colour, framework-agnostic.

TypeScript tweening engine with scenes, token interpolation of strings and colours, and a promise-based API.

SwiftUI scroll view with a sticky header that shrinks and morphs as content scrolls.

Animated stateful mascot characters for Expo and React Native apps, driven by app state.

React and GSAP library for declarative scroll-driven animation timelines with waypoints and parallel tweens.

Real-time animated line chart component for React designed for streaming data at high frequency.

Jetpack Compose navigation bar with a set of preset indicator animations and custom ball shapes.

Large collection of SwiftUI interaction and animation experiments recreating interfaces from shipped Apple apps.

Extended animation utilities for Tailwind adding duration, delay, easing and direction modifiers to animations.

Over six hundred loading animations, each built from a single div using only CSS and custom properties.

Collection of animated floating bottom tab bars for React Native supporting React Navigation and Expo Router.

Free library of animated React components consumable three ways: copy-paste code, a Framer integration, or an MCP connection for coding agents.

Official MCP server exposing the Magic UI animated component registry so agents install real components instead of inventing them.

TypeScript language giving LLMs hand-drawn primitives, IK rigging, camera and particles; renders deterministically via rough.js and GSAP.

Flutter package of customisable Rive-powered animated icons ready to drop into navigation and buttons.

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

Static Astro blog template with animated transitions, banner art support, table of contents and a soft pastel design system.

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

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

Tiny library that glitches any DOM element or image with configurable slice count, timing and chromatic offset.

Curated list of SVG tools, libraries, optimisers, animation techniques and tutorials.

PixiJS plugin that renders Live2D Cubism models, handling motions, expressions, hit areas and lip sync.

Flutter package that animates the transition between light and dark themes as a circular reveal.

TypeScript framework for describing video scenes in code with shapes, text, media and animation, rendering deterministically to video files.

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

React library for liquid glass and metaball UI animations, including morphing nav indicators and blob transitions.

Open-source tool for creating animated product mockups and device-framed videos entirely in the browser.

Distribution of fully animated React components built on Motion, shipped as copy-paste source through the shadcn CLI.

Generates pixel-art sprite interpolations rendered as CSS animations, producing sprite morphs without a canvas.

Animated chart library that morphs between chart types along a continuous geometry so transitions carry meaning in data stories.

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

Renders any web font as animated handwriting strokes, turning ordinary text into a hand-drawn reveal.

Component library of stacked cards, carousels and scroll-driven interactions distributed through the shadcn CLI.

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

Cross-platform React Native component that applies staggered entry and exit animations to child lists via Reanimated.

Excalidraw-based tool for making stop-motion animations and slide decks from hand sketches, exporting GIF or an embeddable iframe.

Collection of animated React UI components reverse-engineered from the interactions on well-known marketing and product sites.

Typewriter engine with queued strings, mid-string deletions, nested instances and full control over speed and cursor.

Scroll-triggered animation runner that drives Animate.css classes via IntersectionObserver with no configuration.

Small library adding a sliding indicator animation to tab components with automatic measurement.

316 Heroicons rebuilt as animated React components with hover and state transitions.

Claude Code skill bundle for modern web work, specialising in 3D graphics, animation and interactive web experiences.

Fifty-plus motion graphics and animation skills for agents, covering easing, timelines, transitions and video-style sequences.

Configurable React component that animates a light beam travelling around an element's border, with live controls and copyable code.

Open collection of 55+ loaders and spinners built with CSS and React, free to copy.

Registry of animated React and Tailwind components, blocks and page templates installable with the shadcn CLI.

Animated Vue and Nuxt component library porting Aceternity and Magic UI style effects to the Vue ecosystem.

Converts text into SVG stroke paths and animates the drawing, supporting custom fonts and per-letter timing.

Diff-aware animated number and text ticker for React, Vue and Svelte that only animates changed characters.

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

Interactive mini-course teaching SVG animation techniques with editable inline examples.

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

Converts spring physics parameters into a CSS linear() easing string you can paste straight into a transition.

Curated gallery of motion design and animated video work across brand and product.

Collection of brand motion identity systems showing how logos and identities behave when animated.

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

Tiny open-source mosaic of inclined image columns that scroll opposite ways, driven by one CSS keyframe per lane with optional React and Vue mounts.

Free, open-source React, Canvas and WebGL components, blocks and templates you can install with the shadcn CLI or copy directly.

Agent skill teaching motion design judgement — timing, easing, choreography and Disney's 12 principles adapted for UI — independent of any animation library.

Browser playground for animated quasicrystal interference patterns with tunable tempo, density and palettes, custom shader rendering, and a WebXR mode.

Animated shadcn-compatible components aimed at design engineers: texture cards, dynamic islands, popovers and expandable layouts.

Tailwind plugin from Rombo adding a concise utility syntax for entrance, exit and looping animations.

Long-running feed of UI animations submitted and voted on, with an accompanying email digest.

Drop-in credit card form enhancement that renders an animated card preview reflecting typed number, name and expiry.

Copy-paste animated React components built on Motion: text effects, docks, dialogs and transition primitives.

Character skinning, inverse kinematics and animation retargeting library for the web, independent of any renderer.

Free open-source pixel art editor with animation timeline, tilemap tools, onion skinning and palette management.

Official free learning path covering tweens, easing, staggers, timelines and callbacks with editable inline examples.

Gesture-driven, interruptible animation samples in React Native covering complex real-world interaction cases.

Searchable gallery of official GSAP demos organised by plugin and technique, each editable and forkable on CodePen.

Official GSAP channel with ScrollTrigger walkthroughs, timeline sequencing lessons and common-mistake breakdowns.

Easing and tweening library for PixiJS display objects with chaining, repeat, reverse and a shared ticker.

Official Flutter runtime for Rive, playing interactive state-machine-driven vector animations that respond to app state and input.

Channel teaching the mathematics programmers actually need: vectors, trigonometry, easing, physics and parametric motion.

Source repository behind rnui.dev, a curated index of React Native UI and animation implementations with metadata.

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

Flutter package that attaches configurable particle burst effects to any widget on tap.

Library of animated React and Tailwind components including glow buttons, spotlight cards, marquees and hero effects.

Showcases of popular CSS animations reimplemented without any animation library, each with annotated source.