Aperture Iris Reveal
A 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.
DOM + CSS0 deps1 file · 10 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useId, useRef, useState } from "react";
/**
* A photograph revealed by a camera iris: straight metal blades part from the
* centre, twisting as they open, until the whole frame is clear — while a
* corner readout clicks down through the f-stops, ƒ/22 to ƒ/1.4.
*
* THE GEOMETRY IS AN IRIS, NOT A CIRCLE WIPE. The opening is a regular polygon
* (one side per blade) that grows and turns. Each blade is the wedge between
* two neighbouring polygon edges extended out past the frame, so the seams
* between blades are those extended edges — the pinwheel you see looking into
* a lens. At zero radius every seam meets in the centre; at full radius the
* polygon's inner circle clears the frame's corners and every blade is gone.
*
* NO REACT STATE PER FRAME. The blade paths are rewritten directly on the SVG
* from a requestAnimationFrame loop driven by elapsed time, so the reveal takes
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this animation
For a photographer, an optician or a small cinema, a camera iris is the most literal reveal there is — and most versions are just a circle that grows. This one is built like the real thing. The opening is a polygon with one side per blade, growing and turning as it opens, and each blade is the wedge between two of its edges extended out past the frame. So the seams between the blades are straight, they meet in a point when the iris is shut, and the whole mechanism twists as it widens, which is what reads as metal rather than a mask. Each blade catches the light at its own angle, its leading edge is lit, and a readout in the corner clicks down through the real f-stops — ƒ/22, ƒ/16, ƒ/11, down to ƒ/1.4 — as the opening grows. It opens once when scrolled into view or follows an open prop, runs on the same clock at any refresh rate, and reverses smoothly from wherever it is.
Curator’s note
Most iris effects are a circular clip-path that grows. A real aperture is straight blades, and the tell is the seams: they are the polygon's edges extended out to the rim.
