About This Project

A curated gallery of 22 web animation demos covering scroll choreography, 3D/WebGL scenes, View Transitions, and CSS/Canvas effects.

Built entirely by Claude Opus 4.6

⚙ Tech Stack

Technology	Version	Role
Vite	6.1	Dev server + bundler for complex demos
GSAP	3.12	Scroll-driven animations, timelines, SplitText
Lenis	1.1	Smooth scrolling, integrated with GSAP ticker
Three.js	0.171	3D scenes, shaders, post-processing (bloom)
View Transitions API	Native	Page transitions, shared-element morphs
Canvas 2D	Native	Particle systems, grain, bokeh effects

📁 Architecture

This project uses a hybrid Vite/static approach:

Vite-bundled demos (12) — Have a .vite-demo marker file. Use import for npm packages. Auto-discovered by vite.config.js.
Static demos (10) — Pure HTML/CSS/JS with no build step. Served as-is by Vite's dev server.

libs-genclaude/ ├── index.html # Gallery hub ├── package.json # Vite + gsap + lenis + three ├── vite.config.js # Multi-page auto-discovery ├── shared/ │ ├── a11y.js # Reduced-motion detection + toggle │ ├── colors.js # Dark palette tokens │ ├── motion-tokens.js # GSAP presets │ ├── demo-shell.js # Back-link, toggle, info bar │ └── demo-shell.css ├── demos/ │ ├── registry.json # Metadata for 22 demos │ ├── 01-scroll-story/ # Each: index.html + main.js + styles.css │ ├── ... │ └── 22-product-spotlight/ └── about/ # This page

🎬 All 22 Demos

Scroll Scroll Animations (6)

#	Demo	Tech	Bundler
01	Smooth Scroll Story	GSAP, Lenis, ScrollTrigger	Vite
02	Horizontal Scroll Gallery	GSAP, Lenis, ScrollTrigger	Vite
03	Text Reveal on Scroll	GSAP, SplitText, ScrollTrigger	Vite
04	Pinned Scroll Sections	GSAP, ScrollTrigger, Pin	Vite
05	Card Stack Cascade	GSAP, ScrollTrigger, Perspective	Vite
06	Scroll Progress Indicators	GSAP, Lenis, SVG	Vite

3D 3D / WebGL (6)

#	Demo	Tech	Bundler
07	Particle Tunnel	Three.js, Custom Shaders, Bloom	Vite
08	3D Product Showcase	Three.js, PBR Material, Orbit	Vite
09	Shader Background	Three.js, GLSL, Simplex Noise	Vite
10	Interactive 3D Mouse Scene	Three.js, InstancedMesh, Raycaster	Vite
21	Scroll Camera Narrative	Three.js, GSAP, Lenis, ScrollTrigger	Vite
22	3D Product Spotlight	Three.js, GSAP, Lenis, ScrollTrigger	Vite

Transitions View Transitions (4)

#	Demo	Tech	Bundler
11	Card Grid Transition	View Transitions API, CSS	Static
12	Page Routing Transitions	View Transitions API, SPA Routing	Static
13	Theme Transition	View Transitions API, Clip-Path	Static
14	Image Gallery Transitions	View Transitions API, Crossfade	Static

CSS/Canvas CSS / Canvas (6)

#	Demo	Tech	Bundler
15	Bokeh Particle Hero	Canvas 2D, Mouse Parallax	Static
16	Magnetic Cursor	Spring Physics, Mouse Tracking	Static
17	Spotlight Reveal	CSS Mask, Mouse Tracking	Static
18	Noise & Grain Overlay	SVG Filter, Canvas, CSS	Static
19	Staggered Grid Entrance	IntersectionObserver, CSS Keyframes	Static
20	Morphing Blobs	CSS Border-Radius, SVG Path, Canvas Bezier	Static

⚡ Getting Started

# Install dependencies (uses bun)
bun install

# Start dev server
bun run dev

# Build for production
bun run build

The gallery opens at http://localhost:5173. Click any demo card to view it.

♿ Accessibility

prefers-reduced-motion — Detected on load via shared/a11y.js. All animations disable when the OS preference is set.
Motion Toggle — Each demo has a "Disable/Enable Motion" button that dispatches a motion-preference CustomEvent.
Decorative elements — All canvases and SVGs use aria-hidden="true".
High contrast — Text uses #f0f4fb on #070a12 (17.4:1 ratio).
Keyboard — ESC returns to gallery from any demo.

🤖 About the Model

Claude Opus 4.6

This entire project was generated by Claude Opus 4.6, Anthropic's most capable AI model. Every HTML file, every JavaScript module, every CSS animation, every GLSL shader.

Code generation — Production-quality code across multiple languages and frameworks
Architecture design — Project structures, patterns, and complex codebase organization
Creative implementation — Design descriptions translated into working animations, shaders, and interactions
Multi-file coordination — Consistency across 60+ interconnected files with shared utilities

Built through iterative conversation: the user described the desired showcase, and Claude designed the architecture, selected libraries, wrote all code, and verified each demo.

📚 What This Project Is

libs-genclaude is a curated gallery of 22 web animation demos. Each demo is a self-contained example of a specific animation technique, designed to serve as both a visual showcase and a code reference.

🛠 Technologies & Their Roles

Technology	What It Does Here
GSAP	Powers all scroll-driven animations. ScrollTrigger pins sections and scrubs timelines. SplitText breaks text into animatable units.
Lenis	Smooth momentum-based scrolling. Integrated with GSAP's ticker for frame-perfect sync.
Three.js	All 3D/WebGL demos. Particle systems, shader materials, PBR rendering, InstancedMesh, post-processing, camera rails.
View Transitions API	Native browser API for DOM state transitions. Page routing, card morphs, theme switching, gallery crossfades.
Canvas 2D	Bokeh particles, grain overlays, bezier blob animation.
CSS	Keyframe animations, border-radius morphing, mask-image spotlight, scanline overlays.
Vite	Dev server with HMR. Multi-page build auto-discovers bundled demos via `.vite-demo` marker.

📦 Two Types of Demos

Vite-Bundled (12 demos)

Contain a .vite-demo marker file in their directory
Use ES module import for npm packages
Get Vite's HMR, tree-shaking, and module resolution
Examples: scroll demos (GSAP + Lenis), 3D demos (Three.js)

Static (10 demos)

No .vite-demo marker — plain HTML/CSS/JS
Served as-is by Vite's dev server (no bundling)
Use native browser APIs or inline implementations
Examples: View Transitions, Canvas 2D effects, CSS animations

🌐 How the Gallery Hub Works

index.html is a single-page app with:

Ambient canvas background — Floating radial gradient particles with screen blend mode
Registry loading — Fetches demos/registry.json at startup
Dynamic card rendering — Creates <a> cards for each "ready" demo
Category filtering — Buttons filter by scroll, 3d, transitions, css-canvas
Staggered entrance — Cards fade in with position-based delay
Claude badge — Floating bottom-right badge with cycling attribution phrases

🎛 Shared Utility Modules

shared/a11y.js

prefersReducedMotion() — Returns boolean, reactive to OS setting
setReducedMotion(bool) — Programmatic toggle, fires CustomEvent
createMotionToggle(container) — Renders toggle button widget

shared/demo-shell.js

initDemoShell({ title, category, tech }) — Injects back link, motion toggle, info bar

shared/colors.js

palette object — Canonical dark-theme color tokens

shared/motion-tokens.js

durations — 5 timing presets (fast → epic)
easings — 6 GSAP ease strings
stagger — 5 stagger config objects

💻 Key Code Patterns

GSAP + Lenis Smooth Scroll

import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import Lenis from 'lenis';
gsap.registerPlugin(ScrollTrigger);
const lenis = new Lenis({ lerp: 0.1, smoothWheel: true });
lenis.on('scroll', ScrollTrigger.update);
gsap.ticker.add((time) => lenis.raf(time * 1000));
gsap.ticker.lagSmoothing(0);

Three.js Scene with Bloom

import * as THREE from 'three';
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';

const composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));
composer.addPass(new UnrealBloomPass(res, strength, radius, threshold));

View Transitions Fallback

const supportsVT = typeof document.startViewTransition === 'function';
if (supportsVT && !prefersReducedMotion()) {
  document.startViewTransition(() => updateDOM());
} else {
  updateDOM();
}

Demo Shell Initialization

import { initDemoShell } from '/shared/demo-shell.js';
import { prefersReducedMotion } from '/shared/a11y.js';
initDemoShell({ title: 'Demo Title', category: 'css-canvas', tech: ['tag1'] });

let reduced = prefersReducedMotion();
if (reduced) document.documentElement.classList.add('reduced-motion');

window.addEventListener('motion-preference', (e) => {
  reduced = e.detail.reduced;
  // Start or stop animations based on reduced state
});