Animation design resources

49 free copy-paste microinteractions for React, CSS and Tailwind — animated buttons, hover effects, tabs and inputs with no package to install.

A free browser-based effects editor stacking 75+ dither, halftone, ASCII and pixel effects into posters, graphics and motion visuals.

A curated, human-vetted directory of digital work made by humans, spanning web design, UI, motion, 3D, branding and illustration.

A library of interactive React UI blocks — heat maps, signature pads, drag interactions, sliders — you can explore, tweak, and take straight into projects.

A free library of 1,300+ curated logos, wordmarks, symbols and animated logos from top studios, filterable by color, style, shape and industry.

Animation and UI design skills from Emil Kowalski, distilling years at Vercel and Linear into installable skills for designers and engineers.

A browser-based 3D device mockup and animation studio — build scenes, animate them, customize screens and export polished product visuals.

Free MIT-licensed library of 298 handcrafted animated icons built with Lottie, optimized for a 32px grid and usable on web, React, iOS and Android.

Polished React motion components you can copy with live previews, source code, dependencies and shadcn registry commands.

A living catalog of 1,000+ React Native UI blocks, each previewed on video and searchable by vibe, with MCP access for your coding editor.

Online SVG animation maker with a keyframe timeline, morphing and motion-path animators — export production-ready SVG, Lottie, video and app formats without code.

A GPU-accelerated studio for designing mesh gradients, silky waves, geometric patterns and spotlight backdrops, exporting to PNG, video and code.

A premium collection of 50+ customizable, ready-to-use animated UI components for modern web apps — easy to integrate and fully styled.

Open source UI components by @micka_design, documented as a fluid design system covering hover, motion, surfaces and typography.

Free, open-source React micro-interaction components for the half-second after a click — copy the TypeScript source; the behavior is finished, the style is yours.

Fast, lightweight JavaScript animation engine with an all-in-one API for timelines, staggering, SVG morphing, scroll sync and draggable physics.

Open-source, motion-powered animated components for React and HTML — beautifully crafted pieces that bring interfaces to life with seamless animations.

Pioneer 'Corn. Revolutionized.' — an immersive WebGL campaign experience for agricultural brand Pioneer, built by creative studio Resn.

A free gradient generator blending mesh, grainy and animated gradients from traditional Japanese colours, exportable as SVG, PNG or MP4.

An open source collection of 200+ high-quality, animated, interactive and fully customizable React components and micro-interactions.

A border-beam animation for web UI — a light beam traveling around element borders, installable as the border-beam npm package.

Copy-ready Three.js components, website templates, WebGL backgrounds, hero sections and interactive shaders with source-backed variants.

A personal lab of interface interactions rebuilt to understand how they work — scratch cards, morphing icons, spring physics, all running live on the page.

Production-ready UI transitions for web apps: 43+ crafted motion components to copy and paste, or apply through your coding agent via a skill.

25 ready-made animation templates for showcasing designs — drop in your images or videos, tweak the scene, and export MP4 or WebM in your browser.

Browser-based 3D design tool with real-time collaboration, animation, physics and an AI agent for building interactive web experiences.

A curated collection of standout iOS apps and interactions, credited to their makers and filterable by visual style, gesture and UI pattern.

A curated toolkit of 70+ skills, plugins, MCP servers and CLAUDE.md tricks that make Claude Code output better-looking frontends.

Design skills, 449 UI prompts, animations, sound effects and audit tools for building professional UI with Codex, Claude and Cursor.

Designer Nick Pyl's playground of interaction experiments — signature flows, film-review micro-interactions and product concepts, ongoing since 2018.

138 free, open-source animated components for React and Next.js, built with Motion and Tailwind CSS — copy the source or install via the shadcn CLI.

Beautiful shaders for SwiftUI, React Native and the web — tweak sliders, then export a real .metal file, Skia shader or web component without shader code.

Calligraph is a React component for fluid, per-character text transitions powered by Motion, with text, number and slot-machine variants.

A showcase of the best animation-driven websites — 2,163 examples captured as full-page video recordings, filterable by category, style and tech.

A fast, collaborative motion design tool on the web — animate Figma imports with AI help and export to 4K video, GIF or Lottie.

Iconly Pro packs 40,000+ flat, animated and 3D icons into 6 styles and 70+ categories, with a web app, Figma plugin, MCP support and 2,500+ free icons.

An AI design workspace with a remixable prompt library for landing pages, UI components and animation styles — with separate modes for humans and agents.

An open-source Codex and Claude skill that turns raster logos into clean motion-ready SVG, then exports animated HTML, GIF and video previews.

The motion design tool for product teams: create and edit Lottie animations, then ship 1:1 to iOS, Android and web with optimized file sizes.

An open-source library of 250+ animation-ready React components and blocks built with Next.js, Tailwind CSS, Motion and shadcn/ui — with MCP support for AI agents.

A premium gradient collection of 1,100+ smooth, textured, 3D and animated backgrounds, with a shader tool, Figma and Framer plugins, and free downloads.

A library of beautifully crafted animated icons built for Svelte, open source on GitHub and searchable right on the site.

The portfolio of Haoqi Wen, a digital product designer and builder exploring design engineering, AI-era workflows and systems thinking.

A large free library of animated components for modern websites — copy the code, use it in Framer, or connect it through MCP.

A free, open-source registry of 1,600+ rare animated React components built with Tailwind CSS and Motion, installed with the shadcn CLI or MCP.

Motion-first animated icons you copy straight into your app, with one-command shadcn CLI installs and open-source code on GitHub.

Premium physics-based, cursor-responsive web sections — browse the collection, copy the prompt and paste it into your AI model to ship.

An AI-native library of cinematic web templates, 3D WebGL scenes and animated gradients — each one copyable into your AI tool as a single prompt.

A WebGL playground for voice-assistant orbs — 13 presets from Siri Wave to Neural Plasma, audio-reactive tuning and copy-ready code.

Kinetics is a library of 153 spring-driven micro-interactions — tune the physics, then copy the CSS, the React, or an AI prompt.

160+ copy-paste React components for motion, transitions and UI effects — morphing buttons, 3D carousels, loaders and chart animations.

A shadcn registry of 42 pixel-perfect, uniquely crafted components — from Apple Carousel to Fluid Gradient Text — free to copy and MIT licensed.

The portfolio of Active Theory, a creative studio founded in 2012 that blends story, art, and technology into award-winning digital experiences.

Lusion's self-aware promotional site for a cork coaster, staged as an over-the-top AI product launch with interactive gags and studio-grade motion design.

A curated collection of UI/UX animation and interaction details from the world's best iOS and web apps, presented as short looping shots.

A curated library of 117 scroll-driven website templates with matching AI prompts — copy one, paste it into your AI builder, and ship a site that actually moves.

A gallery of micro-interactions, easter eggs and small design details — from Spotify carousels to ChatGPT's hidden snake game — that feel like magic.

A curated gallery of creative 404 error pages that turn dead ends into delightful experiences, filterable by style, interaction, and industry.

A free, MIT-licensed set of 350+ animated React icons built on Lucide and Motion, installable through the shadcn CLI registry.

A curated reference of small design decisions — smarter word breaks, corner morphs, hidden shortcuts — that make interfaces feel considered.

Home of five free React UI effect libraries — Beam, Orb, Gooey, Metal and Image — built to be installed and wired up by coding agents.

Premium, ready-to-paste website prompts for Lovable, Bolt, Cursor and Claude, covering heroes, footers, sections and animated backgrounds.

A React and Tailwind CSS component library with components, blocks and landing page templates, shipping a new signature component every week.

Cue curates Awwwards-tier components, animations and hero flows, each shipping with AI prompts for Cursor, v0, Bolt and Claude.

A quick mockup maker that turns screenshots into polished visuals — free one-click mockups, animated presets and video zooms for social media and the web.

The interactive experience engine behind Spotify Wrapped and Duolingo: design, animate and code interactive UI, then ship it natively everywhere.

An open-source React UI kit of copy-paste animated components built for Next.js and Tailwind CSS, with new components released regularly.

1,000+ gradients spanning grainy textures, smooth blends and abstract animated sets, plus AI-generated backgrounds and a built-in shader tool.

150+ animated components built with React, Tailwind CSS and Motion. Copy-paste landing page sections and effects that make marketing sites stand out.

Stunning animated components and effects built with Next.js, Tailwind CSS and Framer Motion. A go-to source for hero sections with visual punch.

The benchmark for web design excellence. Daily showcases, jury-voted sites and a directory of the most creative agencies and developers.

A visual site builder with design-tool ergonomics — design on a freeform canvas and publish production websites with animations built in.