# Portfolio Iris

A photographer’s index where every frame is a shutter. Photographs peek through graphite blades, open whole on hover or focus, and shut where they stand when a filter leaves them out.

Block · With a Pass · https://tactileui.dev/blocks/portfolio-iris

> The code and styling for this block 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

Iris per frame, Shared webgl context, Intro cascade, Filter shuts in place, Mid screen touch reveal, Procedural photographs, Palette tokens from one table

## Usage notes

A finished portfolio section for a photographer or studio that makes browsing the work physical: each project frame is its own iris, so the grid reads as a wall of shutters and opening a project is opening a lens. Ships with six drawn photographs, an editorial serif and mono type system, a filter that closes what it hides without reflowing, and two palettes.

## Options

| Option | Type | Description |
| - | - | - |
| studio | text | Set small above the headline. |
| headline | text | Headline |
| intro | text | Introduction |
| filter | enum | The filter the section opens on. Frames outside it are shut where they stand. |
| palette | enum | A gallery wall, or the darkroom with its safelight. |
| finish | enum | The irises’ finish. |
| blades | number | Blade count |
| rest | number | How much of each photograph the iris shows before it is opened: the aperture radius over the frame’s half-diagonal. |
| light | number | The blades’ lamp: 0 from above, clockwise. |
| archive | number | Frames in the archive |
| booking | text | Availability line |

## Methods

- irises
- update
- destroy

## States

1. **At rest**: 
2. **Intro cascade**: Each frame waits shut until a third of it is in view, then opens to rest, so the grid opens frame by frame as it scrolls in.
3. **Hover or focus**: The project's iris opens the whole frame through the spring; its title underlines and 'Open project →' slides in; leaving returns it to rest.
4. **Filter**: Choosing Landscape, Architecture or Light studies shuts every other frame where it stands, dims and inerts it, and the live status line reads 'Showing 2 of 6 projects: Landscape'.
5. **Touch**: On a device without hover, each frame opens as it crosses the middle of the screen and returns to rest as it leaves.
6. **Palette**: Gallery (cool paper, black ink, cyanotype blue) or darkroom (near-black, warm white, safelight red), from one token table.
7. **Tablet**: Head in one column; two columns of frames with the second lowered.
8. **Phone**: One column of frames, no stagger; the chips wrap; the foot stacks.
9. **Reduced motion**: Every shown frame is fully open from the first paint and nothing moves; the filter still shuts what it hides, at once.
10. **Off screen**: All six irises sleep; the block runs no loop of its own.

## How it works

Original composition; the photographer (Maren Aske), the projects and all copy are invented. The six photographs are canvas paintings made in portfolio-iris.mjs from fixed seeds: no image ships.