Loading…
Live CSS loop · move your pointer
Open ↗Premiumtilting louvre slats · light · css
Shutter Blinds
Venetian blinds in 3D: a stack of horizontal slats that tilt open and shut in a slow ripple, letting a warm light through from behind and throwing soft shadows onto the slats below. Move the pointer up and down and the slats nearest it swing open, like a hand drawing the cord.
How to use it
Run the real thing here, tune it, then copy the prompt that rebuilds it.
- 01Launch and look
The preview is the shipped loop itself: CSS, SVG or Canvas 2D, a few kilobytes, no WebGL.
- 02Dial it in
Swatches recolour, sliders change density and speed, toggles switch parts on and off. Randomize for a surprise.
- 03Pick your stack
A snippet for any page, or a component for Next.js, React, Vue, Astro, WordPress, Shopify or Webflow.
- 04Copy the prompt
It quotes the loop verbatim with your CONFIG values baked in, plus the integration rules.
- 05Drop it behind a section
Container gets position: relative and overflow: hidden; the background fills it; content sits above.
