Skip to content

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.

Proeditorialminimal
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.

Preview
A portrait in soft window light

Sit for a portrait.

Book a sitting →

Studio Hale — Sittings, spring

Props

9
40
No runtime dependencies
"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
  // ---------------------------------------------------------------
}
Notes

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.

Related

Pairs well with

Matched on shared tags and category — the entries most likely to be used alongside this one.

Pro

A wrapper that reveals its children one after another as the group scrolls into view.

staggerrevealscroll
Featured
New

A marker that rides an SVG curve on scroll, banking through the bends.

scrollsvgoffset-path
Featured
NewPro

Scroll reveals on a real CSS view timeline — off the main thread, and visible by default where it is not supported.

scrollcssreveal