3D Product Showcase
Interactive 3D product viewer with PBR materials, three-point lighting, and orbit controls.
3D Product Spotlight
Scroll-driven camera orbits a 3D product on rails, revealing feature cards at each angle.
AI Engineer Portfolio
Terminal-aesthetic portfolio with typing animations, neural network canvas visualization, and scroll-driven project reveals.
AI Engineer Portfolio
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.
Art Gallery — Atelier Blanc
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.
Backlog - MIDI Audio Reactive Lab
MIDI plus microphone-reactive visual bars experiment.
Backlog - Multiplayer Shared Cursor
Shared cursor presence experiment across multiple tabs.
Backlog - Shader Playground UI
Interactive parameter editor for shader-like visual tuning.
Backlog - Webcam Reactive Experiment
Webcam brightness reactive overlay experiment with live camera input.
Backlog - WebGPU Branch Experiment
WebGPU capability probe with fallback branch visualization.
Blog Magazine
Modern blog layout with dark/light theme transitions, animated typography, and reading-view article cards.
Bokeh Hero Base
Ambient glowing field inspired by cinematic landing pages.
Bokeh Particle Hero
Ambient glowing bokeh particle field with mouse-reactive parallax and depth-of-field blur.
Card Grid Transition
Shared-element transition from a card grid to a detail page using the View Transitions API.
Card Stack Cascade
Stacked cards fan out and rearrange into a grid as you scroll, driven by GSAP ScrollTrigger scrub.
Card Stack Choreography
Looping card stack transforms for staged reveal sequences.
Clip-Path Lightbox Expand
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.
Concept A - High-Energy Game Launch
Original high-energy launch concept with arena-style motion and feature blocks.
Concept B - Premium Tech Reveal
Original premium product reveal concept with restrained motion and spec staging.
Concept C - Creative Studio Portfolio
Original creative studio concept using collage cards and editorial hierarchy.
Concept D - Music Release Microsite
Original release-night microsite concept with disc motif and animated equalizer bars.
Concept E - Futuristic Dashboard Intro
Original futuristic dashboard intro with telemetry modules and animated counters.
Data Dashboard
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.
Documentary Film — Terra Incognita
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.
E-commerce Shop
Mini e-commerce experience with filterable product grid, FLIP animations, cart interactions, and View Transition detail pages.
E-Learning Platform — Meridian
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.
Esports Tournament — NEXUS
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.
Fine Dining Restaurant
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.
Fitness Brand
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.
FREQ — Music & Podcast Platform
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.
Game Developer Portfolio
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.
Gradient Text Hue Shift
Text with animated gradient background that shifts hue and saturation as you scroll. Uses CSS Custom Properties updated in real-time by GSAP ScrollTrigger.
GSAP Accordion
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.
GSAP Hero Intro
Headline and CTA entrance timeline with ambient motion layers.
Horizontal Pinned Gallery
Pinned section with horizontal gallery movement tied to scroll progress.
Horizontal Scroll Gallery
Vertical scroll drives a horizontal gallery with pinned container and panel entrance animations.
Image Gallery Transitions
Thumbnail strip with hero image swap animated by View Transitions crossfade and scale.
Interaction Systems Lab
Phase 6 integration lab for reusable cursor, spotlight, orchestrator, debugger, and sound-reactive hooks.
Interactive 3D Mouse Scene
Grid of 400 spheres with mouse-reactive repulsion physics, spring return, and distance-based color.
Interactive Case Study
Digital agency case study page integrating parallax depth hero cards, scroll-driven SVG workflow diagram, animated result counters, and staggered testimonial reveals.
Kinetic Typography
Word-level animated text entrance pattern for energetic headlines.
Lenis + GSAP Scroll Story
Smooth-scrolling narrative sections with timeline triggers.
Luxury Hotel — Grand Résidence
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.
Magnetic Cursor
Custom cursor with spring-based following and magnetic attraction to interactive elements.
Morphing Blobs
Three approaches to organic shape animation: CSS border-radius, SVG path morphing, and Canvas bezier curves.
Mouse Light + Magnetic Button
Cursor spotlight and magnetic button hover interactions.
Multimedia Engineer Portfolio
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.
Noise & Grain Overlay
Four composited overlay effects: SVG noise filter, canvas grain, CSS scanlines, and radial vignette.
Page Routing Transitions
SPA-style page routing with directional slide transitions using the View Transitions API.
Parallax Depth Card Grid
Cards positioned at different Z-depth layers reveal with staggered 3D entrance animations. Hover lifts cards forward. Depth-based scroll parallax creates cinematic feel.
Particle Tunnel
Cinematic depth-heavy particle tunnel with custom shaders and bloom post-processing.
Photography Portfolio — Dark Film
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.
Pinned Scroll Sections
Sections pin in place while multi-step timelines play, driven entirely by scroll position.
Premium Velocity Experience
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.
Product Landing Page
Apple-style wireless earbuds product page with 3D hero, scroll-pinned feature reveals, and cinematic text choreography.
Real Estate — Light Minimal
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.
SaaS Landing Page
Professional SaaS product page with CSS device mockups, pinned feature sections, pricing cards, and testimonial animations.
Scroll Camera Narrative
Scroll through story chapters as the camera flies between 3D scene waypoints with cinematic transitions.
Scroll Progress Indicators
Three simultaneous scroll indicators: top bar, circular SVG progress, and section dot navigator.
Scroll Trigger Story
Section-by-section storytelling using viewport-triggered reveals.
Scroll-Linked Number Counters
Numeric metrics animate from 0 to target as you scroll. Counter speed is directly linked to scroll position using GSAP ScrollTrigger scrub.
Shader Background
Full-screen GLSL fragment shader with layered simplex noise creating flowing aurora bands.
Smooth Scroll Story
Parallax sections with Lenis smooth scrolling and GSAP ScrollTrigger choreography.
Software Engineer Portfolio
Dark brutalist software engineer portfolio with bold typography, scroll-driven section reveals, skill bars, and project showcases.
Split Screen Reveal
Two-panel layout where right scene reveals progressively on scroll.
Spotlight Reveal
Mouse-driven spotlight that reveals colorful hidden content through a dark overlay using CSS masks.
Staggered Grid Entrance
Grid items animate in with position-based stagger delays. Multiple animation styles: fade, scale, slide, flip.
SVG Workflow Animation
SVG connector paths draw themselves as you scroll using stroke-dasharray/dashoffset technique. Workflow nodes and labels appear in sequence with scroll-triggered reveals.
Tech Lead Portfolio
Corporate tech lead portfolio with Three.js wireframe hero, vertical career timeline, expertise grid, and open source repo showcase.
Text Reveal on Scroll
Per-character and per-line text animations triggered on scroll with GSAP SplitText.
Theme Transition
Dark/light theme toggle with circular clip-path wipe powered by the View Transitions API.
Three.js Distorted Plane Shader
Fullscreen shader background with procedural distortion and glow.
Three.js Instanced Mesh Field
High-count object field using GPU instancing for performance.
Three.js Morphing Geometry
Point cloud morph transition between cubic and spherical volumes.
Three.js Orbit + Bloom
Orbiting object field rendered with bloom compositing.
Three.js Particle Tunnel
Depth-heavy cinematic scene with post-processing glow.
Three.js Product Spotlight
Product spotlight with scroll-driven camera rail movement.
Three.js Scroll Camera Narrative
Narrative scene where scroll progress drives camera chapter rails.
Travel Editorial
Immersive travel editorial with horizontal photo scrolling, FLIP layout transitions, and warm typographic design.
Travel Experience
Immersive travel booking experience with a scroll-driven 3D airplane flight path and animated destination reveals.
UX/UI Designer Portfolio
Warm editorial UX/UI designer portfolio with GSAP SplitText hero, rotating role words, View Transitions case study overlay, and scroll-driven section reveals.
Velocity-Aware Scroll + Speed Lines
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.
Video Scroll Scrub
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.
View Transition App Shell
Primary and nested navigation transitions in a stable shell layout.
View Transition Card Detail
Shared-element transition from card grid to detail page.
View Transition Grid Filter Identity
Filterable grid that preserves card identity while items reorder.
View Transition Hybrid CSS + JS
Shared-element state swaps coordinated with JavaScript panel choreography.
View Transition Theme Mode
Theme/mode switch demo with shared title and CTA continuity.
CSS Dot Loader
A smooth three-dot loading animation built entirely with CSS — no JavaScript, no SVG.
Glassmorphism Card
A frosted-glass card effect using CSS backdrop-filter, subtle borders, and layered transparency.
Glow Metric Card
A compact metric card with a soft gradient glow and a hover lift for dashboards and landing pages.
Hero CTA Section
A full-width hero section with gradient headline, eyebrow badge, two CTA buttons, and radial glow background. Pure CSS — no JS required.
Hero Parallax
A multi-layer parallax hero section driven by scroll position, creating depth through independent layer speeds.
Launch Hero Page
A clean product landing hero with nav, CTA buttons, and a three-point feature grid.
Magnetic Button
A button that magnetically attracts toward the cursor when nearby, creating a satisfying interactive pull effect.
Scroll Fade In
Smooth fade-in animation triggered by Intersection Observer as elements enter the viewport on scroll.