Case study · 2025 · Active development
An animation-first React component library — expressive, copy-paste-able motion for the web.
Chandelier background — live preview in the docs playground
Overview
Vapor UI is a React component library and interactive playground for expressive motion design. Every component ships with a live preview, syntax-highlighted source, a prop table with live controls, and its exact dependency list — so a developer can lift any component into their project in minutes.
I designed and built the entire thing solo: the components, the docs engine that showcases them, and the visual identity that ties it together.
27
Components
5
Categories
6
Motion engines
100%
Open source
Great motion design lives scattered across CodePens, agency sites, and half-documented snippets. Every time I started a client project, I found myself rebuilding the same reveals, card interactions, and background effects from scratch — each time wiring up Framer Motion, GSAP, or Three.js slightly differently.
I wanted one place where production-ready motion components live together: tweakable through props, documented with real code, and honest about their dependencies. Build it once, reuse it everywhere.
27 interactive components organised into five categories, each powered by the engine best suited to the effect:
Aurora Title, Sparkles Title, fade / slide / wave reveals
Card Stack, Flip Gallery, Instagram Carousel, Magic Wand Reveal, Canvas Card
Black Hole, Tunnel, Fire Particles, Pipe Grid, Chandelier
Apple Dock, Elastic Accordion, Mouse Mask, Memory Game, Tech Stack Showcase
Action Button, Fullscreen Navbar, Testimonial Carousel
Every component page has preview and code tabs — what you see is exactly what you copy.
Range sliders and toggles let you tweak props in the browser and watch the animation respond in real time.
Each component declares exactly which engines it needs — no installing the whole world for one button.
Custom cursor, category pages, and page transitions — the docs site itself is built from the library's own motion language.
ScrollTrigger timelines and imperative tweens need disciplined cleanup on unmount — otherwise React 19's Strict Mode double-invocation duplicates triggers and leaks listeners. I standardised a context-based cleanup pattern across every GSAP component.
Framer Motion, GSAP, anime.js, React Three Fiber, Lottie, and AutoAnimate all have different mental models. The library normalises them behind consistent prop APIs — durations, easings, and triggers read the same regardless of what's underneath.
WebGL backgrounds like Black Hole and Tunnel are the flashiest components and the easiest way to melt a laptop. Capped device-pixel-ratio, paused off-screen scenes, and lazy-mounted canvases keep the playground smooth even with multiple demos open.
The unit of reuse is a single component, not an npm install. That meant every demo's source had to be genuinely self-contained — a constraint that forced better component boundaries everywhere.
Vapor UI became my personal motion toolkit — components from it have shipped in real client work, including agency sites where expressive motion was the core deliverable.
Building the library taught me more about animation performance, API design, and React lifecycle edge cases than any single client project could. It's also the project that made motion design a signature of my work.
What's next