Concept · Optical instrument
Aperture
Twenty-seven blades on three counter-rotating rings. One continuous scalar from shut to wide open, and nothing in between is a keyframe.
Scroll to open the mechanism.
01 · Mechanism
Three rings, counter-rotating
Each ring carries nine leaves and turns against the one behind it. The stack closes to a point and opens past its own diameter — the geometry is generated from the open value, not interpolated between two baked shapes.
Leaves
27
Rings
3
Travel
0.52 – 2.15
02 · Light path
The source sits inside
The emitter is at the centre of the stack, not behind it. Closing the blades occludes it for real — the falloff you see is the light being physically blocked, which is why it reads as a mechanism rather than a fade.
Decay
Inverse square
Range
14 units
Colour
#FF9D2E
03 · Material
Three metals, one light
Ring surfaces differ only in roughness and value. Nothing is coloured; the amber is the source, and every warm highlight on the page is that one light reflecting off a grey.
Roughness
0.24 – 0.42
Metalness
0.88 – 0.95
Textures
None
04 · Performance
Scrubbed, not played
Scroll position never enters React state. It is written to a ref and read inside the render loop, so scrolling costs zero re-renders. Matrices are allocated once and reused; the frame loop allocates nothing.
Draw calls
3
Renders per scroll
0
Assets
0 bytes
05 · Reduced motion
Honoured where it actually lives
The design system collapses CSS transitions under prefers-reduced-motion, but a render loop is invisible to CSS. So the loop reads the preference itself: the mechanism snaps to each section instead of sweeping through it. The page keeps working; the continuous movement stops.