Venetian Blind Slideshow
A hero slideshow whose photographs change like venetian blinds turning — slats flip in a staggered cascade, with the dark frame showing through as they go edge-on.
DOM + CSS0 deps1 file · 15 KB TSXreduced-motion aware
Props
"use client";
/* eslint-disable @next/next/no-img-element -- Deliberate: plain img keeps this
runnable outside Next, and every slat needs its own offset copy. */
import { useEffect, useRef, useState } from "react";
/**
* A slideshow that changes photographs the way venetian blinds turn: the image
* is cut into horizontal slats, and each slat flips over in a staggered cascade
* to show its strip of the next photograph on its back face.
*
* EACH FACE HOLDS THE WHOLE PICTURE, OFFSET. A slat's face is an overflow-
* hidden strip containing a full-size image positioned at top: -i x 100% with
* height n x 100% and object-fit: cover. Every strip therefore crops the SAME
* cover-fitted picture, and the slats line up into one photograph at any
* container size — no measuring, no background-size maths, and no distortion
* however the image's aspect ratio compares with the frame's.
*
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this animation
A hero slideshow is the first thing an estate agent, salon or hotel puts on its homepage, and a crossfade is the least memorable way to run one. This one turns the photographs over like venetian blinds: the frame is cut into horizontal slats, each slat flips in a staggered cascade, and as they pass edge-on the dark frame shows through the gaps. Three details make it hold up. Every slat face contains the whole cover-fitted photograph, offset upward by the slat's own position, so the strips always line up into one picture regardless of the image's aspect ratio — the background-position arithmetic most slat effects rely on distorts or misaligns as soon as the frame is resized. The back faces are pre-rotated so the incoming image lands upright, and when the cascade ends everything snaps back to zero with transitions off, which is invisible because both states are identical. Perspective is set once on the frame, so slats near the top and bottom are seen from different angles. Every slide can carry a link through to its listing and a status flag such as Under offer, because a price nobody can click is a dead end. Autoplay is slow, shows its timing as a hairline, pauses on hover, on keyboard focus and whenever the carousel is scrolled out of view, and can be stopped outright.
Curator’s note
Slat transitions usually slice the image with background-position maths that breaks the moment the photo's aspect ratio differs from the frame's. A full cover-fitted image in every slat, offset, sidesteps it entirely.
