Portfolio Iris

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.

Copy the portfolio-iris folder and the iris folder from its package next to your page, link the stylesheets and mount it on an element. Every option has a default; the lab’s Code tab writes the same example at any settings, and for React, Vue, Svelte or a custom element (Using a framework).

<link rel="stylesheet" href="iris/iris.css">
<link rel="stylesheet" href="portfolio-iris/portfolio-iris.css">
<div id="portfolio-iris"></div>

<script type="module">
  import Iris from './iris/iris.mjs';
  import { mount } from './portfolio-iris/portfolio-iris.mjs';

  const portfolioIris = mount(document.getElementById('portfolio-iris'), {
    studio: 'Maren Aske',
    headline: 'Photographs that wait for the light.',
    intro: 'Commissioned and personal work from the edges of places: salt flats, sea fog, stairwells, the hour after dusk. Open a frame to see it whole.',
  }, { Iris });

  // portfolioIris.update({ … });   change any option in place
  // portfolioIris.destroy();        and take it away again
</script>

mount(element, options, { Iris })

Builds the block inside the element and returns its handle. Hand it the Iris it is built with.

handle.irises

handle.update(next = {})

Change options in place.

handle.destroy()

Stops it and cleans up after it.

1. 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.
2. 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.
3. 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.
4. 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'.
5. TouchOn a device without hover, each frame opens as it crosses the middle of the screen and returns to rest as it leaves.
6. PaletteGallery (cool paper, black ink, cyanotype blue) or darkroom (near-black, warm white, safelight red), from one token table.
7. TabletHead in one column; two columns of frames with the second lowered.
8. PhoneOne column of frames, no stagger; the chips wrap; the foot stacks.
9. Reduced motionEvery shown frame is fully open from the first paint and nothing moves; the filter still shuts what it hides, at once.
10. Off screenAll six irises sleep; the block runs no loop of its own.

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

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.

• 05IrisA lens’s iris diaphragm, as a reveal.

More blocks on the same object:

• 05.2Camera LaunchA launch hero for a fast prime, where the lens is the Iris.
• 05.3Shutter PreloaderA studio landing page that loads behind a shutter.