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.
- Category
- Animations
- Added
- 2026-09-24
- Deps
- none
- Updated
- 2026-09-24
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
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
// ---------------------------------------------------------------
}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.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Word Wheel Cylinder
text effectsA rotating word wheel built on a real cylinder — derived radius, accumulated rotation, no backwards spin on the wrap.
Depth Card Carousel
patternsA carousel whose side cards recede in scale, blur and rotation from one offset value.
Aperture Iris Reveal
animationsA photo revealed by a real iris — straight metal blades that part and twist from the centre — while a corner readout clicks down the f-stops from ƒ/22 to ƒ/1.4.