Slat Reveal Showcase

Slat Reveal Showcase - Scroll-pinned slat image reveal

Pin the section, scroll, and watch each image knit itself together strip by strip.

Slat Reveal Showcase turns a plain list of services, projects or packages into a scroll-driven story. No code, no dependencies, no animation library.

HOW IT WORKS

The section sticks to the viewport while the page scrolls through it. Each slide's photo is sliced into strips that arrive one after another, and the same photo sits blurred behind the card, so the whole screen turns over with it. Scrub ties the reveal to the scrollbar; Snap plays it once per step; smoothing keeps a mouse wheel from landing it in one jump. Prefer a timer instead? Switch to Autoplay.

FIVE REVEAL EFFECTS

Alternating Slide, Venetian Blinds, Centre Wipe, Zoom Fade and Swing In. Horizontal or vertical strips, 1 to 60 of them, in five orders: forward, reverse, centre-out, edges-in and random. Duration, stagger, easing, hold and end rest are all yours.

SIX CARD LAYOUTS

Title over image, image first, image left, image right, text over image, or text only. Place the card left, centre or right and the split headline moves to whichever side is free, stacking and resizing itself to fit.

EVERY SLIDE

Image, title, meta line, description, a button and an optional second button, each with its own link. The card holds one size across every slide, so nothing jumps as the copy changes.

BUILT PROPERLY

Works down to 390px. Honours reduced motion. Renders as a still on the canvas and in exports. Fonts, colours, spacing, blur, dots, arrows and progress bar are all property controls, plus two optional sections above and below with their own show and hide.

scroll animation, scroll reveal, sticky section, pinned scroll, scrollytelling, image reveal, slat transition, venetian blinds, slider, carousel, showcase, services section, portfolio, agency, architecture, interior design, studio, hero section, gallery, parallax, scroll-triggered, process section, case study, landing page