Engineering reference
17 techniques grouped by layer — scroll choreography, motion primitives, 3D, layout and performance. Each entry carries the working code, ready to copy into the build.
17 of 17 techniques
Technique code is included with any $10 code pack. Descriptions stay public.
Unlock codeProduct cards rotate in perspective under the pointer with a moving specular highlight.
How it works
`perspective` on the parent, `rotateX/rotateY` on the card, and a radial-gradient highlight positioned from the pointer's local coordinates.
Code locked
The working code for 3D tilt card is part of the paid code pack, with the full playbook and every download format.
Huge type that inverts over imagery — the editorial/fashion signature.
How it works
`mix-blend-mode:difference` on the text over a contrasting background, or `overlay`/`exclusion` for softer results. Keep a solid fallback for print/low-contrast contexts.
Code locked
The working code for Blend-mode typography is part of the paid code pack, with the full playbook and every download format.
The film-grade finish: a faint animated noise layer plus a corner darkening. Cheap, and it makes flat gradients look shot rather than rendered.
How it works
A tiny SVG feTurbulence tile as a base64 background, `opacity:.05`, `pointer-events:none`, mix-blend-mode overlay; animate `background-position` in 8 steps for a flicker.
Code locked
The working code for Grain and vignette overlay is part of the paid code pack, with the full playbook and every download format.
Image or panel unveils with a shaped wipe (diagonal, circle, blinds) rather than a fade.
How it works
Animate `clip-path` inset/polygon values — GPU-composited in modern browsers, and combinable with `scale` for a two-layer reveal.
Code locked
The working code for Kinetic clip-path reveal is part of the paid code pack, with the full playbook and every download format.
Buttons lean toward the pointer; the hero 'alive' feel on desktop.
How it works
Track pointer over a padded hit-area, lerp the element toward the pointer with a small factor, release with a spring. Disable on coarse pointers.
Code locked
The working code for Magnetic cursor element is part of the paid code pack, with the full playbook and every download format.
Headlines wipe up line by line from behind a clipping edge — the most repeated text motion in the catalogue.
How it works
Split text into lines, wrap each in an overflow:hidden mask, translate the inner span from 100% to 0 with a stagger. Split by measuring line boxes at runtime, not by manual `<br>`.
Code locked
The working code for Masked line reveal is part of the paid code pack, with the full playbook and every download format.
The default section entrance: 12px rise + fade, staggered children, once only.
How it works
IntersectionObserver with `threshold:.15` and `unobserve` after firing; CSS handles the tween so it never blocks the main thread.
Code locked
The working code for Reveal on enter is part of the paid code pack, with the full playbook and every download format.
Character-by-character entrance for short labels and section numerals.
How it works
Split into spans (keeping accessibility text intact via aria-label), then stagger with a small random offset so it reads as typesetting, not a metronome.
Code locked
The working code for Split-character stagger is part of the paid code pack, with the full playbook and every download format.
Percentage counter, then the curtain wipes away and the hero timeline starts. Prevents half-decoded image sequences and adds perceived quality.
How it works
Gate on real asset counts (images/fonts), not a timer. Animate the exit with clip-path and only then fire the intro timeline.
Code locked
The working code for Preloader with mask exit is part of the paid code pack, with the full playbook and every download format.
Non-negotiable shipping rules: honour prefers-reduced-motion, cap DPR, and keep one rAF loop.
How it works
Wrap every scroll binder in a single rAF; skip heavy effects under reduced motion; preload only above-the-fold media; lazy-load sequences on approach.
Code locked
The working code for Reduced motion and perf budget is part of the paid code pack, with the full playbook and every download format.
The 'video-like' 3D turntable and exploded-product reveals without WebGL. 60-240 webp frames drawn to a canvas as you scroll.
How it works
Preload all frames as Image objects, draw the frame matching scroll progress. Decode must be complete or you get flashes; use a progress-gated preloader, draw at devicePixelRatio, and cover-fit the frame.
Code locked
The working code for Canvas image sequence scrub is part of the paid code pack, with the full playbook and every download format.
Vertical wheel scroll moves a row of panels sideways — used in portfolio and product-strip sections.
How it works
Pin the section and translateX the track by `progress * (trackWidth - viewportWidth)`. Use `will-change:transform`; never animate `left`. Snap points optional via a small Math.round on a second, slower lerp.
Code locked
The working code for Horizontal scroll gallery is part of the paid code pack, with the full playbook and every download format.
Three to six depth layers move at different speeds, producing a diorama rather than a flat page.
How it works
Store `data-speed` per layer; translate by `scrollProgress * speed`. Depth is convincing when speeds are uneven and the nearest layer also scales slightly.
Code locked
The working code for Layered parallax is part of the paid code pack, with the full playbook and every download format.
Inertial smooth scrolling that all scroll-driven motion reads from. Every Scrollhaus preview that scrolls smoothly uses it.
How it works
Lenis hijacks wheel/touch and animates window scroll with a rAF loop. Drive it from one rAF loop and let GSAP/ScrollTrigger read the same progress so effects never drift. Avoid `scroll-behavior:smooth` in CSS — it fights Lenis.
Code locked
The working code for Lenis smooth scroll base is part of the paid code pack, with the full playbook and every download format.
Scrubbing a real MP4 with scroll instead of a frame sequence: smaller payload, still smooth. Scrollhaus free builds ship mp4box for this.
How it works
HTML5 video seek alone stutters (keyframe-only seeks). Demux with mp4box.js, feed samples to WebCodecs VideoDecoder and paint to canvas. Fallback for Safari: `video.currentTime = p*duration` with `requestVideoFrameCallback`.
Code locked
The working code for MP4 frame-accurate scrub is part of the paid code pack, with the full playbook and every download format.
A thin accent line or numbered index that reports position — used in long editorial pages.
How it works
Scale a 1px element by document progress, or bind `--p` to a CSS custom property and let the whole page react.
Code locked
The working code for Scroll progress rail is part of the paid code pack, with the full playbook and every download format.
Pins a section while an inner timeline plays (Apple product-page pattern). One of the two dominant structures in the catalogue.
How it works
Use a tall wrapper (e.g. 300vh) with a `position:sticky; top:0; height:100vh` child. Compute progress from the wrapper's bounding box, never from window.scrollY.
Code locked
The working code for Sticky pin with progress is part of the paid code pack, with the full playbook and every download format.