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.
- Category
- Animations
- Added
- 2026-09-25
- Deps
- none
- Updated
- 2026-09-25
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";
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
// ---------------------------------------------------------------
}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.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Stagger Reveal Group
animationsA wrapper that reveals its children one after another as the group scrolls into view.
Path Follow Scroll
animationsA marker that rides an SVG curve on scroll, banking through the bends.
View Timeline Reveal
animationsScroll reveals on a real CSS view timeline — off the main thread, and visible by default where it is not supported.