Swell
Sea mist and a sunset orange; the underwater photo grows with the scroll until it fills the screen, then a line about the sea lights up word by word.
Fraunces · Outfit
Interactive
Heroes that answer the mouse and the scroll
Sites that move with their visitor: a photo that grows to fill the screen as you scroll, layers that follow the mouse, a light that reveals what lies underneath, a curtain that opens, sections read word by word. Every interaction has a still version that shows all the content to people who prefer less motion.
12 designs
What defines this style
- Typography
- Huge headlines in a strong display face (up to 7rem) on short lines, body text in a clear sans; the big words are part of the interaction.
- Colour
- One strong background (very dark or very light) and a single vivid accent; the photos carry the rest of the colour.
- Layout
- A full-screen hero that holds in place (sticky) while the scroll drives it, then regular sections broken by other pinned moments (a statement that lights up, a sideways rail of cards).
- Shapes
- Pill buttons, large rounded photos that become full-bleed, floating cards with soft shadows.
- Imagery
- Big, high-quality photos that work full screen, plus several smaller ones for layers and trails.
- Motion
- Linked to the scroll and the pointer, not to time: a progress value from 0 to 1 drives the transforms, pointer movement is eased, buttons are magnetic; all of it stops with prefers-reduced-motion.
- Details
- A progress bar along the top, a "scroll down" hint that fades once you start, a ring cursor that grows over links, counting numbers.
- Avoid
- Scroll-jacking (never change or block the wheel), content that stays hidden without JavaScript, effects that get in the way of reading, heavy libraries for what CSS variables and requestAnimationFrame can do.
12 designs
Vista
Night-dark green and sand gold; the apartment opens up as you scroll, and the listings pass by on a sideways rail.
Syne · Manrope
Strata
Loud yellow, black and vermilion; work samples float at different depths and chase the mouse, and projects slide past sideways.
Unbounded · Inter
Confetti
Soft blush and raspberry; pieces from the shop are scattered around the headline like cut-outs that sway with the mouse.
Bricolage Grotesque · DM Sans
Dusk
A dark hero where the pointer carries a light that reveals the colour and the golden headline; the perfumes pass on a rail as you scroll.
Italiana · Manrope
Keynote
Stage black and hot pink; a spotlight follows the pointer over the hall, and the speakers pass sideways before the programme.
Dela Gothic One · Inter Tight
Trace
Paper white and black ink; move the mouse and trail photos drop behind it and fade like footprints, the name inverting over them.
Instrument Serif · Inter Tight
Sprinkle
Sugar pink and caramel yellow; the sweets follow the mouse and fall like sprinkles, and the menu is a set of cheerful cards.
Young Serif · Outfit
Tilt
Night violet and turquoise; the phone leans toward the pointer with a moving shine, small cards floating around it.
Sora · DM Sans
Surge
Black, fiery red and tall condensed type; the rider's photo tilts with the pointer, and the shop's motto lights up as you go down.
Anton · Archivo
Doors
Two wine-red doors carrying the restaurant's name open onto the table as you scroll, and photos of the dishes pass on a rail.
DM Serif Display · DM Sans
Vow
Sage green and antique gold; a curtain bearing both names opens onto the wedding photo, then a vow is read word by word.
Cormorant Garamond · Manrope