Kinetic Shutter Blinds
Slices a hero design across a bank of 3D venetian louvres that crack open under the cursor in a proximity wave, revealing a second layer behind and a third printed on their reverse.
About This Effect
A kinetic shutter blinds effect that prints your hero design across a bank of 3D venetian louvres. You supply one flat artwork; the script slices it across the slats so the closed blind reads as a single seamless composition. As the cursor sweeps the stage, nearby slats pivot open on their hinge axis in a smooth proximity wave, letting the layer behind show through the gaps.
Read the full effect overview
Each slat carries a real light model: a cast shadow on the slat below that deepens with its angle, a warm glint along its top edge as it catches the light, and a touch of translateZ depth. When the pointer leaves, the bank swings shut centre-out with an elastic settle and the artwork reassembles seamlessly.
Four behaviours ship behind optional external buttons: the proximity wave, a click-anywhere impulse ripple that propagates across the bank, a motorised full-open, and a 180-degree flip that turns the blind over to a second design printed on the reverse of the slats.
What's Included
- Automatic artwork slicing: supply one flat hero layer and the script builds and aligns the louvre bank from it
- Proximity wave driven by GSAP Observer with Gaussian falloff, so slats near the pointer open furthest
- Velocity response: faster sweeps push the wave wider and deeper across the bank
- Per-slat light model with angle-driven cast shadows and a specular glint along each top edge
- Impulse ripple that propagates outward from any clicked slat, overshoots, and settles elastically
- Flip preset that rotates the whole bank 180 degrees to a second artwork on the reverse of the slats
- Configurable via data attributes: slat count, wave angle, wave spread, and full-open angle
- Static closed-blind fallback without JavaScript and under prefers-reduced-motion, plus full keyboard control
Perfect For
- Editorial and campaign heroes where a bold typographic poster tears open to reveal a second message
- Venue, bar, and restaurant sites playing day and night states against each other with the flip
- Portfolio and agency landing pages that want one physical, tactile signature interaction above the fold
- Product launches revealing the product layer behind a teaser layer as visitors explore
- Photography and interior sites where light through blinds is the brand's visual language
How It Works
The component is a stage holding three flat layers you author as normal markup: the front artwork, an underlay revealed through open slats, and an optional reverse artwork. On init the script clones the front and reverse layers into each slat of a generated louvre bank, offsetting every clone by its slat index so the bank renders the artwork seamlessly, and keeps the slice geometry current on resize through two CSS variables.
A GSAP Observer instance watches pointer and touch movement. Each move projects the pointer onto the bank and eases every slat toward an angle weighted by a Gaussian curve centred on the pointer, with sweep velocity widening and deepening the wave. Shadow opacity and edge-glint intensity derive from each slat's sine and cosine, so all four behaviours share one light model.
Ripples propagate by per-slat delay with distance decay, overshoot in the opposite direction, and settle through an elastic ease. The flip rotates each hinge 180 degrees with a small stagger; backface-visibility swaps which sliced artwork shows. Everything runs inside gsap.context with a matchMedia reduced-motion branch that leaves the flat artwork in place, and the cleanup kills observers, listeners, and tweens.