Library

Smooth-scrolling narrative sections with timeline triggers.

Ambient glowing field inspired by cinematic landing pages.

Headline and CTA entrance timeline with ambient motion layers.

Section-by-section storytelling using viewport-triggered reveals.

Word-level animated text entrance pattern for energetic headlines.

Pinned section with horizontal gallery movement tied to scroll progress.

Looping card stack transforms for staged reveal sequences.

Two-panel layout where right scene reveals progressively on scroll.

Depth-heavy cinematic scene with post-processing glow.

Fullscreen shader background with procedural distortion and glow.

Orbiting object field rendered with bloom compositing.

Product spotlight with scroll-driven camera rail movement.

Narrative scene where scroll progress drives camera chapter rails.

Point cloud morph transition between cubic and spherical volumes.

High-count object field using GPU instancing for performance.

Vertical scroll drives a horizontal gallery with pinned container and panel entrance animations.

Parallax sections with Lenis smooth scrolling and GSAP ScrollTrigger choreography.

Per-character and per-line text animations triggered on scroll with GSAP SplitText.

Sections pin in place while multi-step timelines play, driven entirely by scroll position.

Stacked cards fan out and rearrange into a grid as you scroll, driven by GSAP ScrollTrigger scrub.

Three simultaneous scroll indicators: top bar, circular SVG progress, and section dot navigator.

Cinematic depth-heavy particle tunnel with custom shaders and bloom post-processing.

Interactive 3D product viewer with PBR materials, three-point lighting, and orbit controls.

Full-screen GLSL fragment shader with layered simplex noise creating flowing aurora bands.

Grid of 400 spheres with mouse-reactive repulsion physics, spring return, and distance-based color.

Scroll through story chapters as the camera flies between 3D scene waypoints with cinematic transitions.

Scroll-driven camera orbits a 3D product on rails, revealing feature cards at each angle.

Text with animated gradient background that shifts hue and saturation as you scroll. Uses CSS Custom Properties updated in real-time by GSAP ScrollTrigger.

Numeric metrics animate from 0 to target as you scroll. Counter speed is directly linked to scroll position using GSAP ScrollTrigger scrub.

Cards positioned at different Z-depth layers reveal with staggered 3D entrance animations. Hover lifts cards forward. Depth-based scroll parallax creates cinematic feel.

Canvas speed lines radiate from center and intensify based on how fast you scroll. Lenis velocity data drives line count, length, and opacity in real-time.

SVG connector paths draw themselves as you scroll using stroke-dasharray/dashoffset technique. Workflow nodes and labels appear in sequence with scroll-triggered reveals.

Smooth fade-in animation triggered by Intersection Observer as elements enter the viewport on scroll.

A full-width hero section with gradient headline, eyebrow badge, two CTA buttons, and radial glow background. Pure CSS — no JS required.

A multi-layer parallax hero section driven by scroll position, creating depth through independent layer speeds.

Original high-energy launch concept with arena-style motion and feature blocks.

Original creative studio concept using collage cards and editorial hierarchy.

Original release-night microsite concept with disc motif and animated equalizer bars.

Original premium product reveal concept with restrained motion and spec staging.

Original futuristic dashboard intro with telemetry modules and animated counters.

Immersive travel editorial with horizontal photo scrolling, FLIP layout transitions, and warm typographic design.

Modern blog layout with dark/light theme transitions, animated typography, and reading-view article cards.

Immersive travel booking experience with a scroll-driven 3D airplane flight path and animated destination reveals.

Professional SaaS product page with CSS device mockups, pinned feature sections, pricing cards, and testimonial animations.

Mini e-commerce experience with filterable product grid, FLIP animations, cart interactions, and View Transition detail pages.

Apple-style wireless earbuds product page with 3D hero, scroll-pinned feature reveals, and cinematic text choreography.

Dark brutalist software engineer portfolio with bold typography, scroll-driven section reveals, skill bars, and project showcases.

Terminal-aesthetic portfolio with typing animations, neural network canvas visualization, and scroll-driven project reveals.

Warm editorial UX/UI designer portfolio with GSAP SplitText hero, rotating role words, View Transitions case study overlay, and scroll-driven section reveals.

Futuristic AI research engineer portfolio with Three.js neural network particle simulation, live training loss curve canvas animation, confusion matrix heatmap, and terminal-style tech stack reveal.

Retro pixel art game developer portfolio with CRT scanlines, canvas starfield + animated pixel character, HUD-style stat bars, game cartridge cards, and inventory skill items.

Bold creative technologist portfolio with Canvas 2D particle waveform reacting to mouse, GSAP FLIP grid/list gallery toggle, discipline pills ticker, audio waveform visualizer, and glitch-hover name effect.

Corporate tech lead portfolio with Three.js wireframe hero, vertical career timeline, expertise grid, and open source repo showcase.

Warm editorial restaurant page with cream/terracotta palette, Playfair Display serif typography, SplitText char-by-char hero entrance, menu section with parallax images, and a vintage story section.

Digital agency case study page integrating parallax depth hero cards, scroll-driven SVG workflow diagram, animated result counters, and staggered testimonial reveals.

High-impact brutalist fitness brand with pure black/yellow palette, 14vw condensed headings, scrolling ticker, stat counters with yellow border, and programs grid with zero-gap dividers.

Neon cyberpunk music platform with magenta/cyan palette, Space Mono monospace typography, animated Canvas 2D waveform background, scrolling artist marquee, chart bars with glitch hover, and typing terminal CTA.

Light-mode architectural property site with warm grey palette, Fraunces italic display and Inter body fonts, split hero with parallax image stack, listings grid with filter bar, and dark contact section.

Three-layer rendering showcase: Three.js wireframe hero reacting to scroll, Canvas 2D radial speed lines intensifying with scroll velocity, and gradient text hue-shift — all synchronized.

Startup metrics dashboard with scroll-linked number counters, gradient text hue-shift hero, animated Canvas 2D bar/donut/area charts, a milestone timeline, and team grid.

Dark film-aesthetic photography portfolio with warm black/gold palette, grain overlay, EB Garamond serif italic typography, masonry photo grid with parallax hover, and series list with staggered reveals.

Full e-learning platform UI with indigo/violet palette, Outfit font, Canvas skill tree with bezier node connections, animated course progress bars, scroll-linked stat counters, floating skill badges, and GSAP FAQ accordion.

White museum-aesthetic art gallery with Cormorant Garamond serif and DM Mono. Full clip-path lightbox expand for artwork detail view, masonry grid with hover reveals, timeline history section, and keyboard navigation.

Forest green/champagne luxury hotel site using CSS scroll-snap-type:y mandatory for 5 full-height panels. IntersectionObserver fires per-panel entrance animations, nav adapts color on light panels, Playfair Display SC typography.

Dark cyberpunk esports platform with black/lime/orange palette, Rajdhani bold display font, Canvas particle field with grid lines, scroll-driven prize counter ($0→$2.1M), angled clip-path buttons, and tournament bracket grid.

Cinematic documentary film site with deep charcoal/rust palette, Libre Baskerville serif, animated Canvas grain overlay, clip-path word reveal for hero title, chapter timeline, CSS film stills with scratch marks, credits reveal, and festival badges.

A clean product landing hero with nav, CTA buttons, and a three-point feature grid.

A frosted-glass card effect using CSS backdrop-filter, subtle borders, and layered transparency.

Cursor spotlight and magnetic button hover interactions.

Theme/mode switch demo with shared title and CTA continuity.

Shared-element transition from card grid to detail page.

Primary and nested navigation transitions in a stable shell layout.

Filterable grid that preserves card identity while items reorder.

Shared-element state swaps coordinated with JavaScript panel choreography.

Webcam brightness reactive overlay experiment with live camera input.

MIDI plus microphone-reactive visual bars experiment.

Interactive parameter editor for shader-like visual tuning.

Phase 6 integration lab for reusable cursor, spotlight, orchestrator, debugger, and sound-reactive hooks.

WebGPU capability probe with fallback branch visualization.

Shared cursor presence experiment across multiple tabs.

Shared-element transition from a card grid to a detail page using the View Transitions API.

SPA-style page routing with directional slide transitions using the View Transitions API.

Thumbnail strip with hero image swap animated by View Transitions crossfade and scale.

Ambient glowing bokeh particle field with mouse-reactive parallax and depth-of-field blur.

Dark/light theme toggle with circular clip-path wipe powered by the View Transitions API.

Custom cursor with spring-based following and magnetic attraction to interactive elements.

Three approaches to organic shape animation: CSS border-radius, SVG path morphing, and Canvas bezier curves.

Grid items animate in with position-based stagger delays. Multiple animation styles: fade, scale, slide, flip.

Mouse-driven spotlight that reveals colorful hidden content through a dark overlay using CSS masks.

Four composited overlay effects: SVG noise filter, canvas grain, CSS scanlines, and radial vignette.

Scroll-driven video frame scrubbing using Canvas 2D procedural scenes. Demonstrates the currentTime scrub pattern with interpolated hue/gradient scenes, film grain, vignette, and lens flare.

Three accordion variants (exclusive, multi-open, minimal) using GSAP height:'auto' animation. Demonstrates smooth open/close without CSS max-height artifacts, arrow rotation spring ease, and aria attributes.

Gallery lightbox that expands from the clicked card's exact position using GSAP clip-path animation. Computes inset() coordinates from getBoundingClientRect, animates to fullscreen and back. Full keyboard navigation.

A smooth three-dot loading animation built entirely with CSS — no JavaScript, no SVG.

A button that magnetically attracts toward the cursor when nearby, creating a satisfying interactive pull effect.

A compact metric card with a soft gradient glow and a hover lift for dashboards and landing pages.

A Remotion project with eight reusable video compositions, from typewriter to chart animations.

A thorough system prompt that turns Claude or ChatGPT into a senior engineer code reviewer focused on correctness, security, and maintainability.

A Claude Code skill that reads your staged changes and generates a conventional commit message following the project's commit style.

A ready-to-paste MCP server config for Claude Desktop, Cursor, or any MCP client.

A production-ready architecture for a multi-tenant SaaS app using Next.js 15, Postgres, Auth.js, and Cloudflare. Includes a Mermaid diagram and file structure.

A minimal Astro starter with Tailwind, TypeScript, and a clean file structure for marketing sites.