Agent Skills: frontend-design

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.

The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.

Design Thinking

Before coding, understand the context and commit to a BOLD aesthetic direction:

• Purpose: What problem does this interface solve? Who uses it?
• Tone: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
• Constraints: Technical requirements (framework, performance, accessibility).
• Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember?

CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.

Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:

• Production-grade and functional
• Visually striking and memorable
• Cohesive with a clear aesthetic point-of-view
• Meticulously refined in every detail

Frontend Aesthetics Guidelines

Focus on:

• Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
• Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
• Motion: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
• Spatial Composition: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
• Backgrounds & Visual Details: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.

NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.

Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.

IMPORTANT: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.

Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.

3D & WebGL Techniques

When building immersive 3D experiences, use these proven techniques from award-winning sites:

Stack

• React Three Fiber (@react-three/fiber v9+) + Drei (@react-three/drei v10+) — React bindings for Three.js with batteries-included helpers (controls, loaders, shaders, post-processing). R3F v10 (alpha) adds WebGPU/TSL as first-class.
• Three.js (three r182+) — core 3D engine. Now supports WebGPU as first-class rendering target alongside WebGL fallback. Safari 26 shipped WebGPU (late 2025) — it's universal.
• TSL (Three.js Shading Language) — Introduced r166. Write GPU shaders in JavaScript syntax that compile to GLSL (WebGL) or WGSL (WebGPU) automatically. Type-safe, IDE-supported. Removes the GLSL expertise barrier entirely. See Maxime Heckel's TSL Field Guide.
• Threlte (@threlte/core) — Svelte-native Three.js bindings. Lower overhead than R3F, good for SvelteKit creative sites. Modules: @threlte/extras, @threlte/rapier (physics), @threlte/theatre (animation studio), @threlte/xr (VR/AR), @threlte/flex (Yoga layout in 3D).
• GSAP — scroll-driven 3D animation, camera transitions, timeline orchestration. Now fully free (including commercial) after Webflow acquisition.
• Rapier — physics engine for particle/object interactions
• Vite — fast builds for 3D-heavy apps

AI 3D Model Generation Pipeline

When building 3D experiences that need custom models (not found on Sketchfab/PolyHaven):

Gemini → Rodin → Blender → Three.js (the production pipeline):

1. Nano Banana (mcp__nano-banana__generate_image) — Generate concept render with Gemini 3.1 Pro. Iterate with continue_editing until the concept is right.
2. Hyper3D Rodin (mcp__blender__generate_hyper3d_model_via_images) — Feed the concept image to Rodin Gen-2 for million-face 3D model generation with built-in materials.
3. Blender (mcp__blender__execute_blender_code) — Refine materials, scale, lighting. Apply post-processing.
4. Export — GLTF/GLB for Three.js/R3F integration, or PNG render for static hero sections.

Alternative engines:

• Hunyuan3D (mcp__blender__generate_hunyuan3d_model) — Tencent's model, accepts text or image input. Good fallback.
• Text-to-3D (mcp__blender__generate_hyper3d_model_via_text) — When exact shape doesn't matter (abstract shapes, simple props).

See context/blender-mcp.md for full MCP tool reference.

Performance Patterns

• Instanced Meshes: Render 8,000+ objects at 60 FPS by batching identical geometries into a single draw call (THREE.InstancedMesh). Essential for data visualizations with many points (e.g., earthquake data, particle fields, star maps).
• Level of Detail (LOD): Swap high-poly models for low-poly at distance. Use THREE.LOD or Drei's <Detailed>.
• Frustum Culling: Skip rendering objects outside the camera view (enabled by default in Three.js, but verify for custom shaders).
• Texture Atlases: Combine multiple textures into one to reduce draw calls.
• WebGPU: Next-gen rendering API for 120+ FPS scenes (see Samsy's cyberpunk portfolio). As of late 2025, WebGPU is supported in Chrome, Edge, Firefox, AND Safari 26 — it's universal. Use WebGPURenderer with automatic WebGL2 fallback. Performance gains of 2-10x on draw-call-heavy scenes. Compute shaders enable 100x more particles than WebGL (GPU-side position/velocity, CPU never touches particle data).
• TSL Shaders: Write shaders in JavaScript-style functional code instead of raw GLSL. Compiles to GLSL or WGSL automatically. Catches errors at dev time with IDE support. Use Drei's <shaderMaterial> with TSL for React integration.

Visual Techniques

• Bloom / Selective Glow: Use @react-three/postprocessing <Bloom> for emissive objects that radiate light. Selective bloom via render layers isolates which objects glow. Essential for sci-fi, data viz, and nighttime aesthetics.
• Fake Glow Materials: Shader-based glow using dot product of view angle and surface normal — bright at edges, transparent at center. Cheaper than post-processing bloom. See fake-glow-material-threejs.
• Depth Exaggeration: Scale one axis (e.g., 10x depth for geological data) to reveal patterns invisible at true scale. Powerful for scientific and geospatial visualization.
• Dissolve/Particle Effects: MSDF text dissolving into particles with noise-driven shaders. Combine with selective bloom for dramatic transitions.
• Scroll-Driven 3D: Sync camera position, object transforms, and shader uniforms to scroll progress via GSAP ScrollTrigger. Creates cinematic page experiences.
• Environment & Atmosphere: HDR environment maps, fog, volumetric lighting, and skyboxes create presence. Drei's <Environment>, <Sky>, <Stars> are quick wins.
• Custom Shaders (GLSL): Noise textures, displacement mapping, vertex animation, and fragment coloring for effects no library provides out of the box. Use Drei's <shaderMaterial> for React integration.
• Physics-Driven Motion: Pixel-to-voxel transforms, ragdoll effects, and gravity-based particle systems add organic feel. Rapier + R3F via @react-three/rapier.

Inspiration Sources & Reference Projects

Study these for techniques and aesthetic direction:

| Project | Technique | Why It's Notable | |---------|-----------|-----------------| | Seismic3D (shahnab) | Instanced meshes, depth exaggeration, glow points on 3D globe | 8K+ earthquake events at 60 FPS; 10x depth scaling reveals subduction zones | | Bruno Simon | Interactive vehicle physics, gamified navigation | The original "portfolio as playground" — set the standard | | Samsy | WebGPU, cyberpunk cityscape, first-person controls | 120+ FPS with holographic interfaces; next-gen rendering | | Jordan Breton | Environmental detail (grass, water, fire, wind) | Floating island world; FWA Site of the Day | | Sébastien Lempens | Scroll-driven camera sequences | 3D Paris tour shifting between perspectives | | Bilal El Moussaoui | Scroll-driven narrative, music-box environment | Storytelling through spatial progression |

Globe & Geospatial 3D

• react-globe.gl / Globe.gl / three-globe (vasturiano) — Data-driven 3D globes with arcs, points, polygons, heatmaps, hexbins, labels, particles. Post-processing access for bloom/glitch. The Shopify BFCM globe is the canonical example. Great for agency landing pages and analytics dashboards.
• CesiumJS (cesium.com) — Enterprise-grade geospatial engine. True terrain elevation, satellite imagery, 3D Tiles (point clouds, city models), time-dynamic data. Use when you need real geography, not decorative globes.
• MapLibre GL JS — Open-source Mapbox GL fork. Vector tiles, 3D terrain, building extrusions. Integrates with deck.gl for GPU-accelerated overlays (animated arcs, hexbins, trip animations).
• deck.gl — Uber/Vis.gl's WebGL layer system for massive datasets. Composable GPU layers: ScatterplotLayer, ArcLayer, HexagonLayer, TripsLayer.

Learning Resources

• Codrops (tympanus.net/codrops/tag/three-js/) — Cutting-edge tutorials: scroll-driven carousels, dissolve shaders, particle systems, multi-page WebGL galleries
• Three.js Journey (threejs-journey.com) — Bruno Simon's comprehensive course
• Awwwards Three.js Collection (awwwards.com/websites/three-js/) — Curated award-winning sites for inspiration
• Drei Storybook — Live examples of every helper component
• Maxime Heckel's TSL Field Guide (blog.maximeheckel.com) — The definitive guide to TSL and WebGPU shaders

Animated Component Libraries (Copy-Paste Ready)

When building UIs, pull from these production-grade animated component libraries instead of coding effects from scratch:

Tier 1: The Big Three

• React Bits (reactbits.dev) — 110+ animated components in 4 variants (JS-CSS, JS-Tailwind, TS-CSS, TS-Tailwind). Text animations (split, gradient, glitch, shiny), backgrounds (aurora, particles, hyperspeed, waves), components (tilted cards, spotlight, dock, ribbons), cursor effects (magnet, blob, follow). ~32k+ stars.
• Vue Bits (vue-bits.dev) — Official Vue port of React Bits by the same author. 90+ animated, customizable Vue 3 components: text animations, backgrounds, cards, interactions. Compatible with Nuxt. Use when building Vue/Nuxt creative sites instead of React.
• Aceternity UI (ui.aceternity.com) — 200+ copy-paste components. GitHub Globe, Spotlight Cards, 3D Card Effect, Lamp Effect (Linear-style), Meteor Effect, Aurora Background, Tracing Beams, Floating Dock, Infinite Moving Cards. Built on Tailwind + Framer Motion.
• Magic UI (magicui.design) — 150+ animated components, shadcn companion. Bento Grid, Animated Beam, Marquee, Border Beam, Orbit Animation, Shimmer Button, Number Ticker, Globe, Retro Grid, Particles. ~19k stars.

Tier 2: Shadcn Ecosystem

• Animate UI (animate-ui.com) — Officially in shadcn's trusted registries. Animated tabs, accordion, dialog, tooltip, stars background, text reveal. Uses shadcn CLI: npx shadcn add.
• Motion Primitives (github.com/ibelick/motion-primitives) — Low-level animated building blocks. The "Nim" personal template (featured on Codrops) is built entirely with this.
• awesome-shadcn-ui (github.com/birobirobiro/awesome-shadcn-ui) — Master discovery hub for all shadcn extensions, registries, and animated add-ons.
• tweakcn (github.com/jnsahaj/tweakcn) — Visual no-code theme editor for shadcn/ui. Adjust Tailwind v4 CSS variables in real-time with live preview and code export. AI-powered theme generation from text or image prompts, preset themes, accessibility contrast checking. 9k+ stars. Bridges the gap between shadcn's headless defaults and a polished branded design system.

When to Use What

• Need a specific effect fast? → Search React Bits or Aceternity first
• Building a shadcn project? → Magic UI + Animate UI integrate natively
• Need animated primitives (tabs, accordion)? → Motion Primitives
• Need a bento grid? → Magic UI's Bento Grid component

Animation & Motion Toolkit

Core Libraries

• Motion (formerly Framer Motion, github.com/motiondivision/motion) — 30k+ stars. THE React animation library. Layout animations, gestures, scroll-linked, AnimatePresence for enter/exit, shared layout transitions. 3.6M weekly npm downloads.
• GSAP + useGSAP() hook (github.com/greensock/react) — Professional-grade timeline animations. Combined with ScrollTrigger for scroll-driven effects. SplitText for character-level text animation.
• Lenis (github.com/darkroomengineering/lenis) — Smooth scroll foundation used by top creative studios. 9.4kB gzipped. Integrates with GSAP ScrollTrigger. The base layer of most Awwwards sites.
• Anime.js (animejs.com) — 66k stars. Handles CSS, SVG, DOM, JS objects. Excellent SVG path morphing and line drawing.

Scroll-Driven Experiences

• Lenis — Buttery smooth scroll normalization (see above)
• Locomotive Scroll (github.com/locomotivemtl/locomotive-scroll) — Parallax via data-scroll-speed attribute. V5 built on Lenis.
• Scrollytelling (github.com/basementstudio/scrollytelling) — By Awwwards-winning Basement Studio. Purpose-built for scroll-driven storytelling with GSAP ScrollTrigger.

Page Transitions

• View Transitions API — Native browser API for animated transitions between page states or navigations. Elements with matching view-transition-name values morph between pages (shared element transitions). Chrome/Edge stable, Safari added 2025, Firefox improving. Next.js 16 has built-in support with React 19.2. This replaces most JS animation for route transitions.
• next-view-transitions (github.com/shuding/next-view-transitions) — By Next.js core team member Shu Ding. CSS View Transitions API with App Router.
• Barba.js (barbajs.github.io) — PJAX-based page transitions for multi-page sites. 4.4kB, no deps. Prevents browser hard-refresh, fires lifecycle hooks (beforeLeave, afterEnter) for GSAP/WebGL cleanup and re-init. The standard for creative studio sites using Astro + Three.js — pairs with GSAP ScrollTrigger (kill triggers on leave, re-init on enter to avoid memory leaks). 11k+ stars.
• TweenPages (github.com/johnpolacek/TweenPages) — GSAP-powered timeline transitions between Next.js routes. Solves complex intro/outro animation.

Tailwind Animation Plugins

• tailwindcss-motion (github.com/romboHQ/tailwindcss-motion) — Spring physics, stagger, complex sequences via utility classes.
• tailwindcss-animate (github.com/jamiebuilds/tailwindcss-animate) — Original plugin. Enter/exit animations, delays, fill modes. Used with shadcn/ui.
• tw-animate-css (github.com/Wombosvideo/tw-animate-css) — Tailwind v4 compatible, pure CSS replacement.

React 19 & Next.js 15/16 Patterns

React 19+ Hooks

• use() — Unwraps promises and context during rendering. Can be called inside conditionals/loops (unlike other hooks). Component suspends until resolved. Enables parallel data waterfalls.
• useActionState — Manages state for server actions: pending state, error state, returned value. The form action primitive.
• useOptimistic — Show optimistic UI instantly before server action completes. Reverts/confirms on resolution. Essential for instant-feeling mutations (like, follow, cart add) without spinners.
• useFormStatus — Reports pending status of nearest ancestor <form> from child components. No prop drilling needed.
• Async Transitions — useTransition now accepts async functions. React tracks pending state automatically, keeps current UI interactive.

Next.js 15/16 Features

• Partial Prerendering (PPR) — Hybrid rendering: static shell prerendered (CDN-fast), dynamic content streams via Suspense. One route can have both static and dynamic content. Eliminates loading skeletons for most content. Stable in Next.js 16.
• View Transitions — Built-in support for the native View Transitions API with React 19.2. Shared element morphing between routes without animation libraries.
• Server Components + Streaming — Components render on server, send HTML + serialized tree (not JS). Streaming sends chunks as ready instead of waiting for full page. Server components can access databases/APIs directly.

Motion One (WAAPI-Native Alternative)

• Motion One (motion.dev, ~4KB) — Animation library built on Web Animations API. Runs off main thread for better mobile performance. 85% smaller bundle than full Framer Motion. Use when performance budget is tight and you don't need layout animations. Framework-agnostic with React bindings.

Text, Image & Cursor Effects

Text Animation

• SplitType (github.com/lukePeavey/SplitType) — Split text into lines/words/chars for animation. Framework-agnostic, pairs with GSAP or Motion. Free alternative to GSAP SplitText.
• svg-text-animate (github.com/oubenruing/svg-text-animate) — Convert text to SVG stroke-drawing animations. Hand-drawn letter reveal effect.

Image Effects

• Curtains.js (github.com/martinlaxenaire/curtainsjs) — Convert HTML images/videos into WebGL textured planes with distortion, ripple, displacement effects. Keeps DOM positioning intact.
• VFX-JS (github.com/fand/vfx-js) — One-line WebGL effects on any element. Glitch, rainbow, duotone, custom GLSL. Has React wrapper (react-vfx).
• WebGL Distortion Hover (github.com/Creative-Srijon/WebGL-Distortion-Hover-Effects) — Displacement-map image transitions on hover. Three.js + TweenMax.
• Akella's WebGL Mouseover (github.com/akella/webgl-mouseover-effects) — Shader-based interactive hover effects. Educational goldmine.

Cursor Effects

• Cursify (github.com/ui-layouts/cursify) — Purpose-built for React/Next.js. Multiple styles, magnetic effects, trails.
• react-creative-cursor (github.com/ehsan-shv/react-creative-cursor) — Cuberto/14islands-style sticky/magnetic cursor follower.
• Motion Cursor (motion.dev/docs/cursor) — Built into Motion library. Magnetic snapping, adaptive appearance over different elements.

SVG Animation

• Vivus (github.com/maxwellito/vivus) — 14.9k stars. SVG line-drawing animations. Zero dependencies. Multiple modes: delayed, sync, one-by-one.

Backgrounds & Atmospheric Effects

• ibelick/background-snippets (bg.ibelick.com) — Copy-paste animated background CSS: gradients, mesh, aurora, animated grids.
• React Mesh Gradient (github.com/JohnnyLeek1/React-Mesh-Gradient) — Stripe-style interactive mesh gradients as React components.
• React Gradient Animation (github.com/Stianlars1/react-gradient-animation) — Canvas-based particle gradient animations. Customizable colors/speed.
• particles-bg (github.com/lindelof/particles-bg) — React particle backgrounds. Modes: color, ball, lines, cobweb, polygon, fountain.

Anti-AI Design Philosophy (2025-2026 Trend)

The design community is explicitly reacting against AI-generated aesthetics. Grain, texture, warmth, organic motion, and variable typography are positioned as markers of human-made design. Apply these principles:

• Grain over clean — SVG feTurbulence noise overlay on gradients makes them feel printed/photographed
• Organic motion over easing — Spring physics (Framer Motion springs, GSAP elastic ease) over CSS ease-in-out
• Variable font weight morphing — Text that "breathes" on hover signals craft
• Mesh gradients over linear — The aurora/blob aesthetic replaces flat color blocks
• Noise textures on surfaces — Subtle Perlin noise on cards/panels adds tactility
• Liquid Glass over flat glass — Apple's refraction + specular highlights over simple backdrop-filter
• Bento 2.0 — Bento grids are standard now. Differentiation is what's INSIDE the tiles: video autoplay on hover, spring-physics "squishy" interactions, CSS Container Queries for self-aware tile layouts, kinetic typography within tiles reacting to scroll
• CSS stagger via sibling-index() — No JS needed: transition-delay: calc((sibling-index() - 1) * 60ms) gives any N-item list a crafted cascade. Stable Chrome + Safari (2025). Eliminates the .item-1, .item-2 class hack entirely. One line of CSS that signals intentionality
• @starting-style for flicker-free entries — Define a CSS transition's starting state before an element first renders. Eliminates the white-flash on modal/popover/dialog mount that JS-based opacity hacks previously solved. Now baseline Chrome + Safari. Use with transition on :popover-open or entering DOM elements
• @container scroll-state() (progressive enhancement) — Query stuck, snapped, scrollable, scrolled states on scroll containers in CSS. Apply shadows only when a sticky header is stuck, highlight the active snap item, show "scroll for more" hints. Chrome-only in early 2026 — use inside @supports as progressive enhancement

Data Visualization (Beautiful Kind)

• Nivo (nivo.rocks, github.com/plouc/nivo) — 13.5k stars. 27 chart types with gorgeous defaults. Heatmaps, Sankey, chord, bump, funnel, waffle. SVG/Canvas/HTML rendering.
• RAWGraphs (github.com/rawgraphs/rawgraphs-app) — Used by The Economist and Wired. Unconventional charts: alluvial, parallel coordinates, beeswarm, Voronoi.
• D3.js v7 (d3js.org) — Low-level SVG/Canvas primitives: scales, axes, force simulations, geographic projections, Voronoi. For fully custom bespoke charts with no library chrome.
• Observable Plot (observablehq.com/@observablehq/plot) — High-level declarative chart API built on D3. A histogram that takes 50 lines in D3 takes 1 line in Plot.
• visx (Airbnb, github.com/airbnb/visx) — Low-level composable D3 primitives for React. Maximum flexibility, minimum opinions. Performance-focused, small bundles. Best for bespoke charts in production at scale.
• Recharts — Component-based, simple API. Best for standard chart types in React with minimal setup.

Advanced Visual Effects (GPU-Powered)

Fluid Simulation

• WebGL-Fluid-Simulation (github.com/PavelDoGreat/WebGL-Fluid-Simulation) — 16k+ stars. GPU Navier-Stokes solver. The go-to for fluid backgrounds on landing pages. Works on mobile.
• WebGL-Fluid-Enhanced (github.com/michaelbrusegard/WebGL-Fluid-Enhanced) — Production-ready fork with configurable splats and better embedding API.

Noise & Generative Textures

• simplex-noise.js (github.com/jwagner/simplex-noise.js) — Gold standard. 2KB, 20ns per sample, 2D/3D/4D. Use for procedural backgrounds, terrain, organic motion.
• tooloud (github.com/jackunion/tooloud) — Perlin + Simplex + Worley noise in one package. Worley gives organic cell/voronoi textures.
• webgl-noise (github.com/ashima/webgl-noise) — GLSL noise routines running entirely on GPU. 60fps noise backgrounds with zero CPU overhead.

Morphing & Shape-Shifting

• flubber (github.com/veltman/flubber) — Interpolate between any two arbitrary SVG shapes. Handles different point counts. toCircle(), toRect(), separate(), combine().
• liquid-shape-distortions (github.com/collidingScopes/liquid-shape-distortions) — Real-time psychedelic liquid shapes via WebGL. Fractal Brownian motion + 3D simplex noise.

Pixel Manipulation & Retro Effects

• particular-drift (github.com/collidingScopes/particular-drift) — Images dissolve into flowing particle animations via WebGL. Particles follow edge detection and flow fields.
• Halftone-Simulator (github.com/fjcalzado/Halftone-Simulator) — Proper CMYK halftone print patterns with D3.js. Screen angles, dot gain, CMYK separation.
• dither-js (github.com/neurogame/dither-js) — Floyd-Steinberg and error-diffusion dithering for retro/print aesthetics.

Ray Marching / SDF

• WebGL-RayMarch (github.com/nopjia/WebGL-RayMarch) — Signed distance field rendering with adaptive step ray marching. Smooth, blobby, infinite-detail 3D.
• SDF Resources (github.com/CedricGuillemet/SDF) — Curated SDF papers, techniques, Shadertoy links.

WebGPU Compute

• gpu-curtains (github.com/martinlaxenaire/gpu-curtains) — WebGPU engine mapping shaders to DOM elements. HTML elements become GPU-rendered planes that scroll/resize like native DOM.
• image_video_effects (github.com/ford442/image_video_effects) — 144+ WGSL compute shaders: liquid, interactive mouse, lighting effects. A cookbook of WebGPU visuals.
• particles-webgpu (github.com/piellardj/particles-webgpu) — Millions of particles on GPU. Compute shader handles all position/velocity; CPU never touches particle data.

Audio Visualization

• r3f-audio-visualizer (github.com/dcyoung/r3f-audio-visualizer) — Web Audio API + React Three Fiber. Declarative, composable audio-reactive 3D.
• awesome-audio-visualization (github.com/willianjusten/awesome-audio-visualization) — Index of the entire audio-visual space.

Typography & Color Mastery

Variable Fonts

Animate font axes (weight, width, slant, optical size) for kinetic typography:

• Splitting.js (splitting.js.org) — Split text into individually targetable elements for per-character font-variation-settings animation.
• Vara.js (github.com/akzhy/Vara) — Handwriting/drawing animation using SVG paths.
• Axis-Praxis (axis-praxis.org) — Interactive variable font playground. Manipulate any axis live.
• V-Fonts (v-fonts.com) — Variable font directory with interactive controls.

Font Pairing

• Fontjoy (fontjoy.com) — Neural network font pairing. Lock one font, regenerate the others. Contrast slider.
• Fontpair (fontpair.co) — Curated Google Fonts pairings by style category.
• Geist (github.com/vercel/geist-font) — Vercel + Basement Studio's typeface. Modern geometric sans + mono, SIL licensed.
• Basement Grotesque (github.com/basementstudio/basement-grotesque) — Open-source display typeface from Basement Studio.

OKLCH Color (Modern Color Space)

Use OKLCH instead of HSL for perceptually uniform palettes that actually look good:

• oklch.click (oklch.click) — Palette generator with complementary/analogous/triadic schemes + WCAG contrast + color blindness sim.
• oklch.fyi (oklch.fyi) — Full picker with UI component preview, CSS + Tailwind export.
• Atmos (atmos.style/playground) — Accessibility-first OKLCH palette generation.
• Essential reading: Evil Martians — "OKLCH in CSS: Why We Moved from RGB and HSL"

Gradient Tools

• meshgradient.com — WebGL mesh gradient generator. Click to add points, drag to warp.
• Easing Gradients (larsenwork.com/easing-gradients/) — Non-linear gradient transitions via cubic-bezier. PostCSS plugin + visual editor. Dramatically better than linear interpolation.
• fffuel.co — 30+ SVG generators: nnnoise (noise textures), gggrain (grainy gradients), ssshape (organic blobs), ffflux (fluid backgrounds), and more.

Texture & Pattern Generators

• Hero Patterns (heropatterns.com) — 100+ repeatable SVG patterns by Steve Schoger. Customizable colors/opacity.
• CSS Patterns (projects.verou.me/css3patterns/) — Pure CSS patterns using gradients only, no images. By Lea Verou.
• Haikei (haikei.app) — Generate layered waves, blobs, stacked shapes as SVG. Hero backgrounds and section transitions.
• grained.js (github.com/sarathsaleem/grained) — Animated film grain overlay. CSS keyframe on generated PNG noise.

Icons (Beyond Lucide/Heroicons)

• lucide-animated (lucide-animated.com) — 350+ animated React icons built on Lucide + Motion. MIT, copy-paste.
• 3dicons (3dicons.co) — 1440+ open-source 3D icons. Free commercial use, no attribution.

Section Dividers & Borders

• Shape Divider App (shapedivider.app) — Generate waves, curves, slants, arrows as SVG.
• Animated Gradient Border Generator (theowoo.github.io/agbg/) — Visual tool for animated gradient borders.
• Clippy (bennettfeely.com/clippy/) — Visual CSS clip-path editor for polygons, circles, insets.

Glassmorphism & Blur

• css.glass — Simple glassmorphism CSS generator.
• Glass CSS (glasscss.com) — Includes "liquid glass" mode with noise and distortion.
• Josh W. Comeau's guide covers the 4 essential properties: backdrop-filter, background, border, box-shadow + noise layering.

Apple Liquid Glass (2025-2026 Defining Trend)

Apple's "broadest software design update ever" (WWDC 2025). Translucent material that refracts, reflects, and dynamically responds to surrounding content with specular highlights. Inspired by visionOS depth. This is the defining visual language of 2025-2026 — the successor to glassmorphism.

Web implementation approaches:

• backdrop-filter: blur() for the base layer
• SVG feDisplacementMap + feSpecularLighting filters for refraction and light
• Multiple CSS generators available (liquidglassgen.com, GitHub repos)
• Full-fidelity requires WebGL/Canvas with environment mapping

SwiftUI Mesh Gradients → Web: SwiftUI's MeshGradient (2D grid of color control points with Bezier interpolation) creates the iOS 18 aurora aesthetic. Web equivalents:

• CSS radial gradient layering (approximation)
• Canvas/WebGL with noise-driven color fields
• GLSL shader with Bezier interpolation (true equivalent)
• Libraries like splotch or custom Three.js ShaderMaterial

visionOS Spatial Patterns for Web:

• Floating panels with depth layering (CSS perspective + transform-style: preserve-3d)
• Environmental awareness — elements respond to scroll/cursor as if in 3D space
• Ornament-style UI — persistent floating UI attached to content, not viewport
• Reduced chrome — no decorative borders, the material does the work

Variable Font Animation

Animate OpenType axes (weight, width, slant, optical-size, custom axes) continuously via CSS font-variation-settings. Enables:

• Weight morphing on hover (light → bold as spring animation)
• Width compression on scroll
• Custom axes for entirely new typographic motion
• Fluid transitions between type styles within a single font file

Browser support is universal. Distinguishes sites from template-based work more than almost any other single technique. Use Splitting.js for per-character axis animation.

Scroll-Driven Page Design Patterns

Use these techniques selectively to make pages feel alive and narrative-driven. Not every page needs them — use judgment. A simple landing page with one pinned section is better than a page overloaded with scroll tricks. The goal is to make the scroll itself feel like a guided experience, not a gimmick.

When to Deploy Scroll Techniques

| Page Type | Recommended Techniques | Skip | |-----------|----------------------|------| | Product feature showcase | Pinned sections + stepped content, SVG path draw | Parallax (dated) | | Portfolio / case study | Horizontal scroll gallery, FLIP transitions | Snap scroll (feels restrictive) | | "How it works" explainer | Scroll-scrubbed timeline, pinned stepper | Heavy parallax | | Landing page (conversion) | Reveal animations, one pinned hero section | Scroll hijacking (hurts conversion) | | Dashboard / app UI | None — keep it functional | All scroll tricks | | Long-form content / docs | Subtle reveals only | Everything else |

Pattern 1: Scroll-Linked Pinning (Sticky Stepper)

A section locks to the viewport while internal content steps through states. The user scrolls vertically but the section plays through content like a slideshow.

Use when: Showcasing 3-6 features that share a visual context (e.g., same product screenshot with different highlights, same diagram with different active nodes).

// Framer Motion (React) — preferred for Next.js projects
import { useScroll, useTransform, motion } from "framer-motion";

function PinnedFeatures({ features }) {
  const containerRef = useRef(null);
  const { scrollYProgress } = useScroll({ target: containerRef });
  const activeIndex = useTransform(scrollYProgress, [0, 1], [0, features.length - 1]);

  return (
    <div ref={containerRef} style={{ height: `${features.length * 100}vh` }}>
      <div style={{ position: "sticky", top: 0, height: "100vh" }}>
        {features.map((feature, i) => (
          <motion.div
            key={i}
            style={{ opacity: useTransform(activeIndex, v =>
              Math.abs(v - i) < 0.5 ? 1 : 0
            )}}
          >
            {feature.content}
          </motion.div>
        ))}
      </div>
    </div>
  );
}

GSAP equivalent:

features.forEach((feature, i) => {
  ScrollTrigger.create({
    trigger: feature,
    start: "top center",
    end: "bottom center",
    pin: true,
    scrub: true,
    onEnter: () => setActiveStep(i)
  });
});

Pattern 2: Vertical-to-Horizontal Scroll Conversion

Vertical scroll drives horizontal movement through a gallery of panels. Creates a cinematic, side-scrolling feel.

Use when: Displaying a series of visually rich cards/panels that benefit from horizontal space (project showcases, product screenshots, timeline events). Do NOT use for text-heavy content.

// GSAP ScrollTrigger — most reliable cross-browser
gsap.to(".panels-row", {
  xPercent: -100 * (panelCount - 1),
  ease: "none",
  scrollTrigger: {
    trigger: ".horizontal-section",
    pin: true,
    scrub: 1,
    snap: 1 / (panelCount - 1),
    end: () => "+=" + document.querySelector(".panels-row").offsetWidth
  }
});

CSS-only fallback (no JS, good for static pages):

.horizontal-section {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  display: flex;
  scrollbar-width: none;
}
.horizontal-section > .panel {
  min-width: 100vw;
  scroll-snap-align: start;
  flex-shrink: 0;
}

Pattern 3: FLIP Element Transitions (Shared Element Travel)

An element smoothly animates from one section to another as the user scrolls — a card "travels" to its new context, creating narrative continuity.

Use when: You have a visual element (card, icon, screenshot) that represents the same concept across two sections. The transition says "here's the idea → here's how it's used." Extremely effective for onboarding flows and feature demos.

// GSAP Flip plugin + ScrollTrigger
const state = Flip.getState(card);
nextSection.appendChild(card);
Flip.from(state, {
  duration: 1,
  ease: "none",
  scrollTrigger: {
    trigger: nextSection,
    start: "top 80%",
    end: "top 30%",
    scrub: true
  }
});

// Framer Motion — automatic with layoutId
<AnimatePresence>
  {activeSection === "intro" && (
    <motion.div layoutId="feature-card" className="intro-card">...</motion.div>
  )}
  {activeSection === "detail" && (
    <motion.div layoutId="feature-card" className="detail-card">...</motion.div>
  )}
</AnimatePresence>

Pattern 4: Scroll-Scrubbed SVG Path (Timeline Draw)

A line draws progressively as the user scrolls, connecting nodes in a workflow or timeline. Each node activates as the line reaches it.

Use when: Explaining a process, workflow, or chronological sequence. The drawing line creates a sense of progression and journey.

/* Pure CSS — animation-timeline (Chrome 115+, Safari 17.4+) */
.timeline-path {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: draw-line linear both;
  animation-timeline: scroll(nearest block);
}
@keyframes draw-line {
  to { stroke-dashoffset: 0; }
}

// GSAP fallback (all browsers)
gsap.to(".timeline-path", {
  strokeDashoffset: 0,
  ease: "none",
  scrollTrigger: {
    trigger: ".timeline-section",
    start: "top top",
    end: "bottom bottom",
    scrub: true
  }
});

Pattern 5: Scroll-Driven Reveal with Stagger

Elements enter with coordinated timing as their section scrolls into view. Different from basic reveal — the stagger creates rhythm.

Use when: Any page with multiple cards, features, or list items entering the viewport. This is the baseline "minimum viable scroll animation" — use it everywhere it fits.

// Framer Motion
<motion.div
  initial={{ opacity: 0, y: 40 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true, margin: "-100px" }}
  transition={{ delay: index * 0.1, duration: 0.5 }}
>

Judgment Rules

1. One "wow" technique per page. A pinned stepper OR a horizontal scroll OR a FLIP transition. Not all three.
2. Reveal animations are free. Always add subtle entrance animations. They're expected and their absence feels flat.
3. Never scroll-hijack on conversion pages. If the goal is signup/purchase, don't fight the user's scroll.
4. Test on mobile. Horizontal scroll conversion often breaks on touch. Use CSS scroll-snap as mobile fallback.
5. Respect prefers-reduced-motion. Wrap all scroll-linked animations in a media query check. Fall back to instant state changes.
6. Performance budget: Pinned sections with scrub are GPU-heavy. Keep to 1-2 per page. Use will-change: transform sparingly.

Premium Interaction Patterns

Command Palette

• cmdk (github.com/pacocoursey/cmdk) — The one Vercel and Linear ship. Fast, unstyled, composable.

Toast & Notifications

• Sonner (github.com/emilkowalski/sonner) — The most beautiful toast component. Stacking animations, swipe-to-dismiss, promise toasts.

Drawers & Modals

• Vaul (github.com/emilkowalski/vaul) — Spring physics drawers with snap points, nested drawers, mobile-first.

Dark Mode

• next-themes (github.com/pacocoursey/next-themes) — Zero-flash dark mode in 2 lines. System preference detection, SSR safe.

Drag & Drop

• dnd-kit (github.com/clauderic/dnd-kit) — Modern DnD for React. Modular, accessible, translate3d animations.

Virtual Scrolling

• TanStack Virtual (github.com/TanStack/virtual) — Headless virtualizer. Vertical, horizontal, grid, variable sizing. 10-15KB.

Infinite Canvas

• tldraw (github.com/tldraw/tldraw) — Full infinite canvas SDK. Pan, zoom, draw, collaborate.
• xyflow / React Flow (github.com/xyflow/xyflow) — Node-based UI editor with infinite canvas. Used by Stripe, Vercel.

Auto-Animation

• AutoAnimate (github.com/formkit/auto-animate) — One line, zero config. Drop-in transitions for add/remove/reorder. React, Vue, vanilla.

Scroll Snap Carousels

• CSS scroll-snap-type + scroll-snap-align for JS-free carousels. 2026: ::scroll-marker and ::scroll-button pseudo-elements landing in browsers for zero-JS pagination.

Animated Numbers

• number-flow (github.com/barvian/number-flow) — Animated number transitions for React, Vue, Svelte, and vanilla JS. 6.3k stars. Zero deps — built on Intl.NumberFormat + Web Animations API. Apple-inspired digit-rolling animation (each digit slots independently). Supports currency, percent, compact notation out of the box. ~6.8kB gzipped. Used by X and Dub.co in production. Essential for dashboards, live pricing, counters, and analytics UIs.

Skeleton Loading

• react-loading-skeleton (github.com/dvtng/react-loading-skeleton) — Auto-sizes to layout. Pulse animation, theming.

Accessibility + Animation

• Always respect prefers-reduced-motion. Motion library has built-in reducedMotion config.
• Use focus-visible for keyboard-only focus indicators.
• AutoAnimate handles reduced-motion automatically.

Creative Dev Studios & People to Study

Studios (Open-Source Work)

| Studio | Key Repos | What They Teach | |--------|-----------|-----------------| | Basement Studio (Buenos Aires) | scrollytelling, basement-grotesque, ogl-starter, basement-laboratory | GSAP + Next.js patterns, OGL as lightweight Three.js alt, font design | | Darkroom Engineering (fka Studio Freight) | lenis, satus, tempus, elastica, aniso | Smooth scroll, production Next.js boilerplate, centralized rAF, physics UI | | 14islands (Stockholm) | r3f-scroll-rig, react-page-transitions | DOM-to-WebGL sync, making 3D feel native to 2D pages | | Locomotive (Montreal) | locomotive-scroll (v5 on Lenis), boilerplates | Viewport-aware scroll, Astro for creative dev | | Active Theory (LA) | svg2msdf, split-text, fit-text, GaussianSplats3D | MSDF text in WebGL, cross-platform pipelines |

Individual Devs (Learning Resources)

| Person | Where to Find Them | What They Teach | |--------|--------------------|-----------------| | Yuri Artiukh (akella) | YouTube (live-coding), github.com/akella (199 repos) | Builds Awwwards-level shader effects from scratch on stream | | Maxime Heckel | blog.maximeheckel.com | The best written R3F shader tutorials: render targets, particles, caustics, dithering, moebius post-processing, WebGPU/TSL | | Anderson Mancini (ektogamat) | github.com/ektogamat (146 repos) | Performance-first R3F: fake-glow (no post-processing), lens flare, particle skulls, WebGPU starters | | Paul Henschel (drcmda) | github.com/drcmda, codesandbox.io/u/drcmda | Created the entire pmndrs ecosystem (R3F, zustand, react-spring, drei, use-gesture, leva) | | Emil Kowalski | emilkowal.ski | Built Sonner, Vaul. Master of micro-interaction polish | | Paco Coursey | paco.me | Built cmdk, next-themes. Taste-driven minimal UI |

The pmndrs (Poimandres) Ecosystem

The single most important GitHub org for React creative dev (github.com/pmndrs, 90 repos):

• 3D: react-three-fiber, drei, postprocessing, react-three-rapier, uikit, triplex, maath
• State: zustand (57k stars), jotai (21k), valtio
• Animation: react-spring, use-gesture
• Tools: leva (GUI controls), miniplex (ECS for games)

Curated Lists (Meta-Resources)

• awesome-creative-coding (github.com/terkelg/awesome-creative-coding) — The definitive list for generative art, creative dev
• awesome-web-effect (github.com/lindelof/awesome-web-effect) — Mega-list of web effects: distortions, particles, 3D flips, parallax
• awesome-web-animation (github.com/sergey-pimenov/awesome-web-animation) — Web animation libraries, books, tools
• awesome-gsap (github.com/zhengdechang/awesome-gsap) — GSAP examples across React/Vue/vanilla
• awesome-react-three-fiber (github.com/gsimone/awesome-react-three-fiber) — R3F demos, people, projects
• awesome-css-houdini (github.com/CSSHoudini/awesome-css-houdini) — Houdini Paint/Layout API worklets
• collidingScopes (github.com/collidingscopes) — One-person creative coding lab: ASCII video, liquid shaders, particle drift, kaleidoscope. All MIT-licensed.