# Iris

A lens’s iris diaphragm, as a reveal. Curved blades pivot on their pins, close to a pinhole and open onto what lies beneath, the engraved f-stop ring turning with them.

Object · With a Pass · https://tactileui.dev/objects/iris

> The code and styling for this object come with the Pass. Sign in if you have one. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

Pivot linkage, Shingle stack, Sdf shading, Spring opening, Shared webgl context, Polar engraving texture, Sleeping loop, Canvas 2d fallback, Sector ordered painting, Touch grab zone

## Usage notes

Reveal a hero image, a portfolio thumbnail or a page with a mechanism people recognise from a camera, not a fade: the content stays real, accessible DOM under the blades, and the opening is driven by the ring, hover, a press, the scroll, or a slow breathing loop for a loader.

## Options

| Option | Type | Description |
| - | - | - |
| blades | number | Blades |
| curvature | number | 0 is straight blades and a sharp polygon; 1 is as round as a blade that still hides under the lip. |
| finish | enum | Auto casts the blades, housing and engraving in the page’s finish: pale metal on a light one, anodised metal with bright cut edges on a dark one, lit in the display’s light on Phosphor and Night (without the kit’s tokens, steel on a light page and graphite on a dark one). Or pin one: graphite, ink, steel or brass. |
| fit | enum | Lens: the whole object, content seen only through it. Cover: the blades fill the frame and wide open clears it (a reveal). |
| ring | boolean | Off leaves a thin lip. Lens fit only. |
| knurl | boolean | Knurled grip |
| scale | boolean | Engraved f-stop scale |
| driver | enum | dial: turn the ring (or arrow keys, a stop at a time). hover and press open it. scroll follows the page. breathe is a loader. manual is open() and close() only. |
| intro | boolean | For dial, hover, press and manual. |
| rest | number | Where it settles. Hover and press open from here. |
| stiffness | number | Spring stiffness |
| light | number | 0 is from above, clockwise. |
| readout | boolean | Show f-number |
| sound | boolean | Synthesised, no audio file. Starts only after you touch it. |
| still | enum | open: fully open, because the content is the information. rest: the rest opening, for a loader. |
| label | text | The accessible name of the ring slider or the toggle button. |

## Methods

- opening
- aim
- state
- open
- close
- toggle
- replay
- update
- destroy

## States

1. **At rest**: Settled at the rest opening (f/4 by default); the loop is asleep and costs nothing.
2. **Opening when first seen**: Shut until the lens is a third in view, then a short beat and the blades open to rest through the spring.
3. **Turning the ring**: Drag round the ring or use the arrow keys: the blades follow the hand with no lag and click into the nearest f-stop on release; the slider's value text is the f-number. In the cover fit a sideways drag scrubs.
4. **Hover and press**: Hover (or focus inside) opens it wide and leaving returns it to rest; as a toggle it has its own small button (aria-expanded) and a click on anything not interactive in the object toggles too, so links in the content still work.
5. **Scroll-linked**: Shut as it enters from the bottom of the viewport, wide open by the time it is a little above the middle; the spring gives the blades weight.
6. **Breathing**: 
7. **Shut**: The blades meet at the centre in a pinwheel; the content under them stays in the accessibility tree.
8. **Off screen or hidden**: The loop pauses; a tab returning with a long frame advances the spring one clamped step.
9. **Touch**: A vertical swipe anywhere over the object scrolls the page (pan-y); the knurled ring is the grab zone and takes a drag in any direction; hover becomes a tap.
10. **Reduced motion**: No animation: the first paint is fully open (or the rest opening, by choice), and every later change snaps.
11. **No WebGL**: Painted with Canvas 2D from the same linkage: blades stacked sector by sector in the exact shingle order, each lit from the lamp with a brushed grain, cast shadow and lit or shaded edge; the housing's turned sheen from the same formula. Same motion; also used if the WebGL context is lost.

## How it works

Original. One shared WebGL context renders every instance, with a Canvas 2D painter of the same geometry when WebGL is missing or lost; no image or font ships (the preview's photograph is painted procedurally, the exported example's is inline SVG). PRESETS in controls.mjs: Graphite prime (default), Brass field camera, Six-blade hexagon, Steel cine lens, Cover reveal.