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.
Built with Iris
What it is for
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.
Everything you set here is what the Code and Prompt tabs give you.
Seats open in 11 days. Want one email that morning?
Datasheet
- Mechanism
- Iris per frame, Shared webgl context, Intro cascade, Filter shuts in place, Mid screen touch reveal, Procedural photographs, Palette tokens from one table
- Stack
- Vanilla ES modules, CSS, WebGL, Canvas 2D
- Needs
- Iris
- States
- 10 documented
- Version
- 0.1.0
- Licence
- With a Pass
States
- At restSix 4:5 frames in three columns, the middle one lowered; each shows a nonagon of its photograph through nine graphite blades at rest 0.42; every iris asleep.
- Intro cascadeEach 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.
- Hover or focusThe project's iris opens the whole frame through the spring; its title underlines and 'Open project →' slides in; leaving returns it to rest.
- FilterChoosing 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'.
- TouchOn a device without hover, each frame opens as it crosses the middle of the screen and returns to rest as it leaves.
- PaletteGallery (cool paper, black ink, cyanotype blue) or darkroom (near-black, warm white, safelight red), from one token table.
- TabletHead in one column; two columns of frames with the second lowered.
- PhoneOne column of frames, no stagger; the chips wrap; the foot stacks.
- Reduced motionEvery shown frame is fully open from the first paint and nothing moves; the filter still shuts what it hides, at once.
- Off screenAll six irises sleep; the block runs no loop of its own.
Notes
Ships with six drawn photographs, an editorial serif and mono type system, a filter that closes what it hides without reflowing, and two palettes.
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. Faces: Libre Baskerville and IBM Plex Mono (SIL OFL 1.1), full fonts converted to WOFF2.
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
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.