Micro-interactions

Aperture

A camera iris. Blades pivot on a ring of pins and one shared angle drives the whole mechanism — wide open at 64% of the housing, past the centre and light-tight at zero, cutting the scalloped polygon a real iris makes on the way through.

Cook BookReveal Rotate Clip-path Orchestration Bounce Ease-in-out

Controls

bladeCount8

openness0.62

duration900 ms

detent0.35

bladeCurvature1.00 ×

edgeHighlight0.60

housingInset6

autoOpen

bladeColor

#26232c

edgeColor

#000000

Install

bun add motion clsx tailwind-merge

Then copy 2 files into your project:

components/registry/aperture/aperture.tsx
lib/utils.ts

Props

Prop	Type	Default	Description
bladeCount	number	8	How many leaves in the mechanism. Low counts give the hard hexagonal bokeh of a cheap lens; past nine the opening is indistinguishable from a circle, which is exactly what expensive glass is sold on.
openness	number	0.62	Where the blades rest, 0 shut to 1 wide. At 0 they cross past the centre rather than merely meeting it — an iris that only just touches leaks light.
duration	number	900	Time for one full open or close.
detent	number	0.35	Overshoot as the mechanism seats. 0 arrives dead, which reads as software; a little bounce reads as a part with mass hitting its stop.
bladeCurvature	number	1	Curvature of each blade's inner edge. The mechanism is derived from the opening range, so this bends the leaf without touching the travel: flatter blades cut a rounder, more regular polygon, tighter ones pull the scallop corners out into a star.
edgeHighlight	number	0.6	Strength of the seam along each leaf's inner edge, and of the bezel. Each seam is cut by the leaf that lies over it — named rather than left to the drawing order, because a leaf stack is a ring and painter's order is a line. That is what puts exactly one line at every corner of the opening, wide open and shut alike.
housingInset	number	6	Width of the machined ring inside the rim. It is drawn over the blades, so the housing reads as the part they are seated in rather than one more leaf.
autoOpen	boolean	true	Open and shut on a loop. Turning it off hands the mechanism to the openness slider.
bladeColor	string (hex)	"#26232c"	Body of the blades, the housing, and the barrel floor behind them. Its own material rather than a themed surface — a light theme must not put a white ring around a lens.
edgeColor	string (hex)	"#000000"	Amethyst on the blade seams and the bezel.

What It Demonstrates

Reveal: Content is uncovered gradually, often by animating a clip-path or mask.
Rotate: Spin an element around a point.
Clip-path: Clipping an element to a shape, used for reveals, masks, and before/after sliders.
Orchestration: Deliberately timing multiple animations so they feel like one coordinated motion.
Bounce: A spring that overshoots and settles, adding playfulness.
Ease-in-out: Slow, fast, slow. Good for elements already on screen moving from A to B.

Related Components

Appears In

"use client"; import { useEffect, useId, useRef, type ReactNode } from "react"; import { animate, motion, useMotionValue, useTransform } from "motion/react"; import { cn } from "@/lib/utils"; export interface ApertureProps { children?: ReactNode; bladeCount?: number; openness?: number; duration?: number; detent?: number; bladeCurvature?: number; edgeHighlight?: number; housingInset?: number; autoOpen?: boolean; bladeColor?: string; edgeColor?: string; reducedMotion?: boolean; className?: string; } const BASE_RHO = 160; const OPEN_MIN = -5; const OPEN_MAX = 64; const LIGHT = -55; const FLOOR_OUT = 300; const phiFor = (openness: number) => Math.PI * (1 - Math.min(1, Math.max(0, openness))); const dist = (p: number, pivot: number, arm: number) => Math.sqrt(pivot * pivot + arm * arm + 2 * pivot * arm * Math.cos(p)); export default function Aperture({ children, bladeCount = 8, openness = 0.62, duration = 900, detent = 0.35, bladeCurvature = 1, edgeHighlight = 0.6, housingInset = 6, autoOpen = true, bladeColor = "#26232c", edgeColor = "#000000", reducedMotion = false, className, }: ApertureProps) { const phi = useMotionValue(phiFor(openness)); const rho = BASE_RHO * bladeCurvature; const arm = (OPEN_MAX - OPEN_MIN) / 2; const pivot = rho + (OPEN_MAX + OPEN_MIN) / 2; const count = Math.max(3, Math.round(bladeCount)); const blades = Array.from({ length: count }, (_, i) => i); const angle = (i: number) => (i * 360) / count; const uid = useId().replace(/[^a-zA-Z0-9_-]/g, ""); const cx = useTransform(phi, (p) => pivot + arm * Math.cos(p)); const cy = useTransform(phi, (p) => arm * Math.sin(p)); const live = useRef({ duration, detent, openness }); live.current = { duration, detent, openness }; useEffect(() => { const ease = () => [0.34, 1 + live.current.detent, 0.64, 1] as [ number, number, number, number, ]; if (reducedMotion || !autoOpen) { animate( phi, phiFor(live.current.openness), reducedMotion ? { duration: 0 } : { duration: live.current.duration / 1000, ease: ease() }, ); return; } let alive = true; let timer: ReturnType<typeof setTimeout> | null = null; const leg = (open: boolean) => { void animate(phi, phiFor(open ? 0.95 : 0.08), { duration: live.current.duration / 1000, ease: ease(), }).then(() => { if (!alive) return; timer = setTimeout(() => { if (alive) leg(!open); }, 720); }); }; leg(true); return () => { alive = false; if (timer !== null) clearTimeout(timer); }; }, [autoOpen, reducedMotion, openness, duration, phi]); const vertexR = (p: number) => { const d = dist(p, pivot, arm); const s = Math.sin(Math.PI / count); const under = rho * rho - d * d * s * s; const r = under > 0 ? d * Math.cos(Math.PI / count) - Math.sqrt(under) : d - rho; return Math.max(0, r); }; const floorR = useTransform(phi, (p) => (vertexR(p) + FLOOR_OUT) / 2); const floorW = useTransform(phi, (p) => FLOOR_OUT - vertexR(p)); const lightRad = (LIGHT * Math.PI) / 180; const lx = Math.cos(lightRad) * 100; const ly = Math.sin(lightRad) * 100; const litAt = (i: number) => 0.5 + 0.5 * Math.cos(((angle(i) - LIGHT) * Math.PI) / 180); return ( <div className={cn( "relative aspect-square overflow-hidden rounded-full", className, )} style={{ backgroundColor: bladeColor }} > <div className="absolute inset-0">{children}</div> <svg viewBox="-100 -100 200 200" className="absolute inset-0 h-full w-full" aria-hidden > <defs> <clipPath id={`${uid}-housing`} clipPathUnits="userSpaceOnUse"> <circle cx="0" cy="0" r="100" /> </clipPath> <linearGradient id={`${uid}-sheen`} gradientUnits="userSpaceOnUse" x1={lx} y1={ly} x2={-lx} y2={-ly} > <stop offset="0" stopColor="#ffffff" stopOpacity="0.08" /> <stop offset="0.5" stopColor="#ffffff" stopOpacity="0" /> <stop offset="1" stopColor="#000000" stopOpacity="0.24" /> </linearGradient> {blades.map((i) => ( <mask key={i} id={`${uid}-cut-${i}`} maskUnits="userSpaceOnUse" x="-100" y="-100" width="200" height="200" > <rect x="-100" y="-100" width="200" height="200" fill="#ffffff" /> <g transform={`rotate(${angle((i + 1) % count)})`}> <motion.circle cx={cx} cy={cy} r={rho} fill="#000000" /> </g> </mask> ))} </defs> <g clipPath={`url(#${uid}-housing)`}> <motion.circle cx="0" cy="0" r={floorR} fill="none" stroke={bladeColor} strokeWidth={floorW} /> {blades.map((i) => ( <g key={i} transform={`rotate(${angle(i)})`}> <motion.circle cx={cx} cy={cy} r={rho} fill={bladeColor} /> </g> ))} <rect x="-100" y="-100" width="200" height="200" fill={`url(#${uid}-sheen)`} /> {blades.map((i) => ( <g key={i} mask={`url(#${uid}-cut-${i})`}> <g transform={`rotate(${angle(i)})`}> <motion.circle cx={cx} cy={cy} r={rho} fill="none" stroke={edgeColor} strokeOpacity={edgeHighlight * (0.62 + 0.38 * litAt(i))} strokeWidth="1" /> </g> </g> ))} </g> <circle cx="0" cy="0" r={100 - housingInset / 2} fill="none" stroke={bladeColor} strokeWidth={housingInset} /> <circle cx="0" cy="0" r={100 - housingInset} fill="none" stroke={edgeColor} strokeOpacity={edgeHighlight * 0.5} strokeWidth="0.7" /> </svg> </div> ); }

Aperture

Controls

Install

Props

What It Demonstrates

Related Components

Stagger Menu

Rift

Pixel Transition

Animated Hamburger

Torchlight

Dissolve

Appears In

Controls