# 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. Canonical: https://gsapvault.com/effects/kinetic-shutter-blinds Live demo: https://gsapvault.com/demos/kinetic-shutter-blinds/index.html | Property | Value | |----------|-------| | Type | effect | | Tier | paid | | Price | £5 | | Difficulty | intermediate | | Plugins | Observer | | Techniques | 3d-transforms, hover-effect, micro-interaction, physics, stagger, velocity-reactive | | Uses Lenis | No | ## Overview 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. 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. ## Features - 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 ## Use Cases - 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 ## Vibe-Code Ready Setup This effect includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested. [How AI-assisted setup works](https://gsapvault.com/vibe-coding) ## 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. ## Integration Preview How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download. ### Quick Start **1. Add to your HTML ``:** ```html ``` **2. Add before closing `` tag:** ```html ``` **3. Add to your ``:** ```html

Behind the blinds

Your headline

``` You author each layer as one flat, full-bleed composition. On init the script builds the louvre bank and slices the front (and reverse) artwork across it automatically; there is no per-slat markup to write. **4. Optional preset buttons, anywhere on the page:** ```html ``` The script wires any `[data-shutter-preset]` buttons it finds and keeps their `aria-pressed` state current. Without them the component simply stays in wave mode. --- ### Accessibility 1. **Reduced motion**: under `prefers-reduced-motion: reduce` the script never builds the slat bank, leaving the flat front artwork (with its painted louvre lines) as a fully designed static state. The CSS also zeroes animation and transition durations. 2. **No JavaScript**: same story; the front artwork is the component's default render, so nothing is blank if the CDN is blocked. 3. **Keyboard**: the stage is focusable. `ArrowUp`/`ArrowLeft` opens the louvres, `ArrowDown`/`ArrowRight` closes them, and `Space`/`Enter` fires a centre ripple. Preset buttons are real `