Showcase
Motion & interaction studies
Original re-interpretations of award-style hero and section patterns — built to study layout and interaction technique. Every clone uses placeholder content and abstract visuals only.
100 of 100 implemented
- #1View
Fluid Hero
Full-screen fluid field reacting to the pointer behind a headline.
R3F - #2View
Particle Text Morph
A headline that dissolves into drifting particles on scroll.
R3F - #3View
Interactive Globe
A drag-rotatable 3D globe with location hotspots.
R3F - #4View
Scroll Camera Path
Scroll drives a camera fly-through of a floating scene.
R3FGSAP - #5View
Shader Image Distortion
Hover ripples and distorts thumbnails through a shader.
R3F - #6View
Infinite Gallery
An inertia-drag image plane that loops infinitely.
R3F - #7View
Cursor Blob Trail
A gooey blob that chases the pointer across a minimal hero.
CanvasCSS - #8View
Audio Visualizer
Bars and particles that react to live audio frequency.
Canvas - #9View
Physics Drag Cards
Draggable, collidable chips settling under gravity.
Canvas - #10View
Magnetic Buttons
A CTA cluster whose buttons attract the cursor magnetically.
FM - #11View
Sticky Horizontal Scroll
A pinned section that turns vertical scroll into horizontal panel travel.
GSAPLenis - #12View
Pinned Storytelling
Pinned panels swap text and visual chapter by chapter on scroll.
GSAP - #13View
Wavy Text
Letters rise and wave into place, staggered, as lines enter view.
GSAP - #14View
Image Reveal List
Hovering a project row reveals a floating preview that trails the cursor.
FM - #15View
WebGL Page Transition
A full-screen shader wipe sweeps between procedurally generated pages.
OGLGSAP - #16View
Liquid Metal Hero
A noise-displaced sphere shaded as flowing chrome, tilting to the pointer.
R3F - #17View
Scroll Zoom Portal
Scroll zooms into a framed shape until it fills the screen as the next scene.
GSAP - #18View
Parallax Layered Scene
Stacked depth layers drift at different rates as the pointer moves.
FM - #19View
Marquee Velocity
Marquee rows whose speed and skew respond to scroll velocity and direction.
FM - #20View
Split-Flap Counter
An airport split-flap stats band, each digit flipping to its target.
CSSFM - #21View
Image Trail Cursor
A trail of image tiles spawns and fades along the cursor path.
FM - #22View
Particle Portrait
An abstract face rebuilt from particles that scatter under the pointer.
R3F - #23View
Scroll-Drawn Lines
A line illustration that draws itself as the page scrolls.
GSAP - #24View
Tilt Card Grid
A grid of cards that tilt in 3D with a glare tracking the pointer.
FMCSS - #25View
Morphing Blobs
A backdrop of gradient blobs that slowly morph and drift.
CSS - #26View
Distortion Slider
A hero slider with a shader-distorted transition between slides.
OGL - #27View
Grid to Detail
A gallery item that expands into a shared-element detail view.
FM - #28View
Custom Cursor States
A custom cursor that morphs to match the hovered context.
FM - #29View
Snap Fullpage
Full-viewport panels that snap as you scroll, with smooth easing.
CSSLenis - #30View
Mask Reveal
A clip-path mask that wipes media into view on scroll.
GSAP - #31View
3D Text Extrude
An extruded chrome wordmark that parallaxes toward the pointer.
R3F - #32View
Gooey Nav Menu
An overlay menu whose blobs merge via an SVG goo filter.
CSS - #33View
Sticky Video Scrub
Scroll scrubs through a procedural timelapse frame sequence.
GSAP - #34View
Hover Spotlight Grid
A radial spotlight follows the cursor and reveals a feature grid.
CSS - #35View
Kinetic Hero Loop
A hero built from seamless, never-ending type and shape loops.
FM - #36View
Draggable Canvas Board
An infinite moodboard you pan by dragging and zoom with the wheel.
CanvasFM - #37View
Scroll Rotate Product
A procedural product that spins a full turn as you scroll.
GSAP - #38View
Text Scramble Reveal
Letters churn through random glyphs, then resolve in place.
FM - #39View
WebGL Water Ripple
Pointer drops ripple and refract a procedural surface on the GPU.
R3F - #40View
Layered Card Stack
A pinned card deck peels and promotes its cards on scroll.
GSAP - #41View
Noise Gradient Hero
A flowing fbm-noise gradient backdrop with grain.
R3FCSS - #42View
Magnetic Image Grid
Gallery tiles that drift toward the cursor magnetically.
FM - #43View
Scroll Progress Storyline
A progress line that fills and activates chapters on scroll.
GSAP - #44View
Full-bleed Type Marquee
Giant scrolling headline rows that invert on hover.
CSSFM - #45View
Particle Logo Assemble
Particles fly in and lock into an abstract mark.
Canvas - #46View
Infinite Marquee Logos
An endless client belt that pauses and highlights on hover.
CSSFM - #47View
Scroll Parallax Typography
Layered words traveling at different rates on scroll.
FM - #48View
Hover Reveal Duotone
Portfolio tiles that colorize and reveal a caption on hover.
CSSFM - #49View
Sticky CTA Orbit
Elements orbiting a magnetic call-to-action button.
FM - #50View
Loader to Hero Reveal
A counter preloader that lifts to reveal the hero.
GSAP - #51View
Bold Agency Hero
Oversized split headline that staggers in, then a scroll-reveal project grid.
GSAPFM - #52View
Kinetic Type Intro
A playful creative-agency intro with springy letters and a rotating word.
FM - #53View
Event Countdown Hero
A full-bleed sport hero with motion streaks and a live countdown timer.
FM - #54View
Experimental Grid
A studio grid with parallax-skew tiles and a growing custom cursor.
FM - #55View
Cinematic Scroll Story
A pinned luxury frame that scales and brightens as editorial lines cross-fade.
GSAP - #56View
3D Product Hero
A friendly bot on a turntable that tilts to the pointer above a spec strip.
R3F - #57View
Animated Diagram Hero
A clean tech hero beside an SVG system graph that draws links and pulses data.
FM - #58View
Vertical Type Layout
A Japanese tate-gaki headline that drops in character by character beside a red sun.
GSAP - #59View
Appetite Product Hero
A CSS burger whose layers drop and stack, tilting toward the pointer.
FM - #60View
Refined Editorial Hero
A restrained finance hero with a masked headline wipe and counting stat figures.
FM - #61View
Delivery Bot Scene
A stylised courier robot idling on a grid, built from primitives.
R3F - #62View
Architectural Gallery
Pinned vertical scroll travels horizontally across full-bleed towers.
GSAP - #63View
Minimal Portfolio Index
A typographic project list with a cursor-tracking preview card.
FM - #64View
Scroll Story + WebGL
A WebGL wave-field whose energy and hue follow scroll-driven chapters.
R3FGSAP - #65View
Dynamic Bento Hero
A word-revealing headline over a staggered, spring-in bento grid.
FM - #66View
Animated Brand Hero
A breathing gradient wordmark amid drifting, spinning token discs.
FM - #67View
Editorial Advisory
A masked line-by-line masthead with service rows that wipe up on scroll.
GSAP - #68View
Personal Brand
Magnetic CTA, pulsing availability pill, and a skewed skills marquee.
FM - #69View
Illustrated Food Truck
An all-SVG truck bouncing under a spinning sun with drifting clouds.
FM - #70View
Strong Type In Motion
Giant headline words slide at opposing rates with a velocity-skewed marquee.
GSAP - #71View
Venture Reveals
A clean corporate VC hero with staggered scroll-reveal metrics and portfolio grid.
FM - #72View
Feature Scrollytelling
A pinned product mock that restyles as feature blocks scroll past it.
GSAP - #73View
Data-driven Hero
An energy hero with counters that count up and a bar chart that grows in view.
FM - #74View
Bright Product Hero
A light fintech hero with a phone mock and payment chips springing in around it.
FM - #75View
Mini-game Promo
A gamified endless jumper — tap or press Space to hop obstacles for score.
CanvasFM - #76View
Immersive Space Hero
A drifting starfield and glowing orb that parallax toward the pointer.
R3F - #77View
Conference Scroll
An event microsite that pins and scrolls an agenda of sessions horizontally.
GSAP - #78View
Luxury Product Reveal
A pinned timepiece that scales and details in with an elegant scrubbed reveal.
GSAP - #79View
Paper-craft World
A flat-shaded pastel diorama of floating shapes that tips toward the pointer.
R3F - #80View
App Chat Hero
A fintech app hero whose phone runs a looping, typing chat thread.
FM - #81View
Sidewave
Oversized word-rows slide in from alternating sides on scroll.
GSAP - #82View
Stats Band
A data band whose figures count up and bars grow in view.
FM - #83View
Cursor Gallery
A project gallery with a custom cursor that swells into a view disc.
FM - #84View
Case-study Grid
A sleek portfolio grid whose cards rise and zoom on scroll.
GSAP - #85View
Smooth-scroll Hero
A signature hero with inertial scroll and depth parallax.
LenisGSAP - #86View
Project Index
A hover-preview index that docks a cross-fading panel.
FM - #87View
Shader Hero
A flowing procedural gradient hero pushed by the pointer.
OGL - #88View
WebGL Scene Hero
A drift of floating shapes that parallaxes toward the pointer.
R3F - #89View
Playful Hero
Draggable, bobbing shapes behind a springy headline.
FM - #90View
Editorial Grid
An editorial grid that mask-wipes media in on scroll.
GSAP - #91View
Art-directed Portfolio
A case-study index with a pointer-tracking preview.
FM - #92View
Interactive Split Hero
Two panels that open as you hover each side.
GSAP - #93View
Startup Scroll Deck
Full-viewport brand panels revealing on scroll with dot nav.
FM - #94View
Bold Motion Hero
Oversized words rise in over drifting accent blobs.
FM - #95View
Product Scrollytelling
A sticky product visual retints as feature steps scroll past.
GSAP - #96View
Spotlight Portfolio Grid
A cursor-following spotlight reveals a dark portfolio grid.
CSSFM - #97View
Dev Portfolio Microinteractions
A dev hero with magnetic links, a live clock, and a pulse.
FM - #98View
WebGL Portfolio Hero
Floating distorted shapes that tilt toward the pointer.
R3F - #99View
Kinetic Typography Hero
Characters fly into place, then the lines keep breathing.
GSAP - #100View
Layered Smooth Scroll
Lenis smooth scroll with layered parallax and panel wipes.
GSAPLenis