Browse the system.
11 with live demos · 19 code-only
30 of 30 patterns
Clip-reveal media
An image frame wipes open from the bottom while the picture inside scales down, then drifts on scroll.
Condensing sticky nav
A navigation bar that starts tall and open, then condenses to a compact strip once the user scrolls past the hero.
Contextual cursor
A custom cursor that changes size and picks up a text label depending on what it is hovering.
Curtain route transition
A full-bleed panel sweeps across the viewport to cover the outgoing page and retracts to reveal the incoming one.
Drag inertia gallery
A horizontal gallery you can throw with the pointer, which keeps moving and decelerates naturally.
Asymmetric editorial grid
A 12-column grid used deliberately off-centre, so that content placement reads as a decision rather than a default.
Eyebrow and index label
Small uppercase tracked metadata — section numbers, years, categories — placed off to one side to give the page a filing-system logic.
Fluid type system
A clamp-based type scale with a very wide top end, so display type is enormous on desktop without breaking small screens.
Fixed footer reveal
The footer sits fixed behind the page, and the content lifts off it at the end of the scroll to uncover it.
Frame parallax media
An image that drifts slowly inside a fixed frame as the page scrolls, so the frame and its contents move at different rates.
Full-bleed break
A section that escapes the page gutter entirely to run edge-to-edge, used to reset the reader's rhythm between text passages.
Fullscreen menu overlay
A menu that takes the entire viewport, with oversized links revealed in sequence, replacing a conventional dropdown.
Hero statement
A single oversized sentence, broken into deliberate lines, occupying most of the first viewport with almost nothing else.
Hover preview index
A typographic list of projects where hovering a row reveals its image, floating near the cursor.
Shared-element morph
A card expands into a panel by morphing rather than cross-fading, because both states share one identity.
Magnetic CTA
A button that leans toward the cursor as it approaches and springs back when the cursor leaves.
Masked line reveal
Each line of a headline slides up from behind its own clipping mask, staggered, so the sentence assembles itself.
Measure-locked prose
Running text capped at a readable measure and parked in a single grid column, regardless of how wide the viewport gets.
Numeric preloader
A counter runs from 00 to 100 against real asset progress, then the whole screen lifts away to reveal the hero.
Odometer stat
A number that counts up to its value when it scrolls into view, with digits locked to a monospace width.
Pinned horizontal scroll
A section that pins to the viewport and translates a horizontal track sideways as the user scrolls vertically.
Poster-to-loop video
A silent looping video that shows a matching poster frame until it can actually play, and never blocks the page on itself.
Scroll colour inversion
The whole page flips between light and dark as a marked section crosses the middle of the viewport.
Scroll progress rule
A hairline that fills across the top of the viewport in proportion to reading progress.
Scroll-velocity marquee
A continuously scrolling band of oversized text whose speed and direction respond to how fast the user is scrolling.
Scroll-scrubbed sequence
A pinned section plays a canvas image sequence frame by frame as you scroll, so the scroll wheel becomes a transport control.
Sticky panel stack
Sequential panels that each stick to the viewport while the next one slides up over them, like cards being dealt onto a pile.
Text scramble
A label resolves from random characters into its real text on hover or on entering the viewport.
Viewport stagger reveal
Grid or list items rise and fade in sequence as their container enters the viewport, with the stagger driven by index.
WebGL hover displacement
An image rendered to a shader plane that warps and fringes under the pointer, then eases back.