Case Study

Micro-Interactions Library

15 components, zero animation libraries, built in a weekend.

View Live GitHub
15Components
0Animation libraries
7Total dependencies
Micro-Interactions Library screenshot

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