Case Study
Micro-Interactions Library
15 components, zero animation libraries, built in a weekend.
15Components
0Animation libraries
7Total dependencies
Overview
A collection of 15 production-ready micro-interaction components built as a copy-paste resource for frontend developers. Every animation runs on CSS transitions or the native Web Animations API. No Framer Motion, no GSAP, no animation libraries. All animations use transform and opacity exclusively for GPU-only rendering. The entire site is statically generated with only 7 production dependencies.
Key Features
- 0115 interactive demos with live preview, syntax-highlighted code, and one-click copy
- 02Command palette search (Cmd+K) with fuzzy matching across all components
- 03Accessibility-first: WCAG 2.1 AA, prefers-reduced-motion respected globally, built on react-aria-components
- 04Hydration-safe dark/light theme toggle with no flash of wrong theme
Built With
Next.js 14TypeScriptCSS ModulesWeb Animations APIreact-aria-componentsShikiVercel