14 scroll techniques. One pattern per pane.
Each technique now lives in its own iframe — the host page never scrolls past the demo, and the demo never escapes its frame. Scroll inside any pane to fire the effect. Open the pane in full screen for an undistracted look.
- Open ↗01 / 14S-01
Dot Cluster to Logo Morph
12 scattered dots converge to a business-fit silhouette over a pinned scroll, then the SVG silhouette + brand word reveal in sequence.
- Open ↗02 / 14S-02
Scene Crossfade Sequence
N image/video layers cross-fade through a pinned scroll arc. The page tells a five-frame story as you scroll.
- Open ↗03 / 14S-03
Hero Frame Shrink
A full-bleed hero scales to 0.85, adds 24px border-radius, and gains 60px padding in the last 30% of its pin window.
- Open ↗04 / 14S-04
Staggered Image Slide-In
2–5 child cards slide from translateX(100vw) with 80ms stagger and gentle ±2deg rotation.
- Open ↗05 / 14S-05
Background Color Journey
Scroll 0→1 interpolates --scene-bg / --scene-accent through a per-business spectrum.
- Open ↗06 / 14S-06
Elements to Focal Point
Children with data-focal-from-x/-y/-rotate scatter at start, converge to (0,0) on scroll.
- Open ↗07 / 14S-07
Fan Out Cards
3–7 cards stacked at center fan open with auto-distributed rotation, then settle into a parallel row.
- Open ↗08 / 14S-08
Scroll Sync Counter Axis
Huge background text slides horizontally while foreground content parallax-shifts vertically.
- Open ↗09 / 14S-09
Water Ripple Scroll
Three.js fragment shader: 3 overlapping radial waves displace a texture. Amplitude follows sin(progress·π).
- Open ↗10 / 14S-10
Smooth Scroll (Lenis)
Global Lenis instance with GSAP ScrollTrigger ticker integration. Auto-disabled on prefers-reduced-motion.
- Open ↗11 / 14S-11
Background Circle Shrink
A huge background circle (~110vmin) shrinks to ~35vmin and drifts to a corner — only ~1/4 remains visible at the end.
- Open ↗12 / 14S-12
Stacking Cards
Cards slide up from below in sequence; previous cards remain visible, offset upward by 24px and -0.04 scale step per layer.
- Open ↗13 / 14S-13
Rotate & Unfold
Each item starts rotateY(-75deg) + scale(0.4) + opacity(0), unfolds to rotateY(0) + scale(1) + opacity(1) along its scroll band.
- Open ↗14 / 14S-14
Product Stacking Sequence
Each product card slides up from below and stacks above the previous, which scales down + fades. Number badge updates 01/N → N/N.