The Zero-Bundle Field Guide
Mobile-first, fluid by default. This edition focuses on Direction B — CSS View Transitions, WAAPI, Tailwind, Popmotion — and ships a live 21st.dev registry search powered by the official API. Thirty combinations and a twenty-row synergy matrix remain on tap when you need to branch out.
The Stack
Showcase
Five skill-stack combinations, each rendered as its own aesthetic universe. Scroll to enter each world. Every chapter demonstrates a distinct approach to motion, interaction, and design intelligence.
Where Numbers Become Light
GSAP feeds raw numbers to Three.js. The render loop never touches the DOM. This is the industry standard for immersive 3D — cinematic, GPU-bound, limitless.
The Browser, Unburdened
CSS View Transitions snapshot the old DOM and morph it into the new — zero JavaScript, hardware-composited. WAAPI adds native timeline control. The lightest stack that still feels alive.
Touch at 120 Hertz
Rive packs an entire state machine into a binary file smaller than a Lottie JSON. The runtime interpolates at 120Hz. Your code just flips a trigger. Near-zero CPU, game-like tactility.
Silicon Dreams
WGSL shaders compile directly on the GPU. Millions of particles at locked 120fps on mid-range mobile. No library, no abstraction — just raw hardware speaking its native tongue.
The Director's Cut
Theatre.js injects a studio timeline over your dev server. Scrub cameras, keyframe lights, direct the scene visually. Hit save — it exports clean production JSON. Cinema, in the browser.
The Lab
Live components, rendered in real frames. Not screenshots — interactive. Each built to the brand system: mobile-first, accessible, motion that never blocks intent.
Pin List
Mobile-first animated pin-list · 56px touch targets · a11y · spring physics
Settings
Pinned · 2
All items · 4
Try it
- → Tap any row to pin/unpin
- → Type in search to filter live
- → Right-click a pinned item to quick-unpin
- → Keyboard: Tab to focus, Enter to toggle
Built with
Brand alignment
56px touch targets (mobile-first). 150ms micro feedback on pin. Spring physics that never block user intent. WCAG AA contrast. Clear, competent, empathetic — never smug.
Act 3 — the system
Three layers, one signal
Components feed the dashboard. The dashboard feeds the controls. The controls persist to the database. Every arrow is a real data flow.
The Dashboard
A live analytics surface that consumes the Component Lab — Toast fires on data updates, Command Palette switches metrics (⌘K), Pin List favorites KPIs. This is the system, not the list.
Trend
30D
Favorite metrics
Click to pin/unpin. Pinned metrics sort to top.
Orders by day
Recent invoices
| Invoice | Customer | Amount | Status |
|---|---|---|---|
| INV-001 | Acme Corp | $4,200 | Paid |
| INV-002 | Globex Inc | $1,800 | Pending |
| INV-003 | Initech | $12,400 | Paid |
| INV-004 | Umbrella Ltd | $3,200 | Overdue |
| INV-005 | Hooli | $8,900 | Paid |
| INV-006 | Soylent Co | $2,100 | Pending |
This is the system
This dashboard consumes three components from the Lab: Toast (fires on data updates every 12s), Command Palette (⌘K to switch metrics + ranges), Pin List (favorite KPIs sort to top). The portfolio is no longer a list of components — it's a system where each component earns its keep by serving a real surface.
The Controls
Configure the Dashboard above. Toggle KPIs, set defaults, control refresh. Changes persist to localStorage — refresh the page, your settings survive. This is the third factory: it consumes the Dashboard.
Dashboard title
Auto-saves 600ms after you stop typing.
Visible KPIs
Toggle which metrics appear on the Dashboard. At least one must stay on.
Default time range
Which range the Dashboard loads with on first visit.
Real-time refresh interval
12sHow often the Dashboard fires "data updated" toasts. 0 = disabled.
Dashboard surfaces
Show or hide sections of the Dashboard.
Three layers, one system
This is the third factory. It consumes the Dashboard (writes config to a shared Zustand store) and the Component Lab (Toast fires on every save). The portfolio is now a 3-layer system: Components → Dashboard → Controls. Each layer proves the previous one was built right — because it can be composed, configured, and extended.
Act 4 — the research
The Field Guide
30 skill-stack combinations, 20 synergy-matrix rows, 23 verified skills, 12 install commands. One tabbed interface. Search it, filter it, copy it.
| # | Name | Stack | Synergy |
|---|---|---|---|
| 1 | The Legendary Pair | GSAP + Three.js | 10/10 |
| 2 | Declarative 3D UI | Three.js + Framer Motion (via R3F) | 8/10 |
| 3 | 120Hz Micro-Tactions | Rive + Tailwind + Custom JS | 9/10 |
| 4 | Cinematic Scrollytelling | Theatre.js + React Three Fiber | 9/10 |
| 5 | Buttery Scroll | GSAP ScrollTrigger + Lenis | 9/10 |
| 6 | Kinetic Type over UI | GSAP SplitText + Framer Motion (isolated) | 7/10 |
| 7 | Compressed 3D | Three.js + glTF + DRACO | 8/10 |
| 8 | State-Machine Onboarding | Rive + React State Machine | 8/10 |
| 9 | Shape Morphing | GSAP + MorphSVG | 8/10 |
| 10 | Minimal 3D Footprint | OGL + GSAP | 7/10 |
| 11 | Native SPA Transitions | CSS View Transitions + Tailwind | 9/10 |
| 12 | Native C++ Timeline | WAAPI + CSS Custom Properties | 8/10 |
| 13 | Framework-Agnostic Physics | Popmotion + Vanilla JS | 7/10 |
| 14 | Tactile Drag Physics | React Spring + HTML Canvas | 8/10 |
| 15 | Staggered Micro-Interactions | Anime.js v4 + CSS Variables | 7/10 |
| 16 | App Layout Routing | Tailwind + Framer Motion (UI only) | 8/10 |
| 17 | Native Scroll Animations | CSS @scroll-timeline + position: sticky | 8/10 |
| 18 | Card-to-Modal Morph | View Transitions + Shared Element | 9/10 |
| 19 | Reveal-on-Scroll, Zero Deps | WAAPI + IntersectionObserver | 8/10 |
| 20 | Utility-First Velocity | Hype React + Tailwind | 6/10 |
| 21 | Raw GPU Compute | WebGPU Shaders (WGSL) + Vanilla Canvas | 10/10 |
| 22 | Rapid 3D Interactive | Spline + React (Spline Runtime) | 8/10 |
| 23 | Spatial VR/AR Pipeline | Blender + glTF + WebXR | 8/10 |
| 24 | 2D Physics Playground | PixiJS + Matter.js | 8/10 |
| 25 | Vector Explainer, Low Memory | Lottie-Light + Skia/Canvas | 7/10 |
| 26 | iOS Native Spatial | SwiftUI Motion + Metal | 9/10 |
| 27 | Cinema-Grade Spatial | Cinema4D / Blender + glTF + WebXR | 8/10 |
| 28 | Cinematic Post-FX | Three.js + Postprocessing (bloom/DOF) | 8/10 |
| 29 | Declarative 3D UI Suite | React Three Fiber + Drei + Framer Motion 3D | 9/10 |
| 30 | The Full Toolkit | GSAP + Three.js (imperative) + Lenis | 10/10 |
Act 5 — the call
The system is live.
Use it. Fork it. Ship it.
A 5-layer SaaS: components → dashboard → controls → backend → auth. Built on Next.js 16, Prisma, Neon Postgres, NextAuth.js. Every layer consumes the previous. Every interaction is real.