Camera Launch

A finished product-launch hero for a lens, a camera or any optical product: the spec that sells it (a fast aperture, round bokeh) becomes the thing the visitor plays with, and the page around it (nav, name, price, preorder, a specification strip) is designed to the same standard.

Copy the camera-launch 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="camera-launch/camera-launch.css">
<div id="camera-launch"></div>

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

  const cameraLaunch = mount(document.getElementById('camera-launch'), {
    brand: 'Holm Optical',
    product: 'Serein 50',
    tagline: 'Nine curved blades, round at every stop that matters.',
  }, { Iris });

  // cameraLaunch.update({ … });   change any option in place
  // cameraLaunch.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.update(next = {})

Change options in place.

handle.destroy()

Stops it and cleans up after it.

1. At restThe lens rests on f/2.8 on a lit studio sweep; the sample shows f/2.8 · 1/1000 s · ISO 100; the iris is asleep.
2. IntroThe lens waits shut until a third in view, then opens to its stop through the spring.
3. Turning the ringDrag the knurled ring (click stops, no lag) or use the arrow keys: the sample's background blur, bokeh size and shape and the exposure line follow, driven by the slider's own value.
4. Wide openf/1.4 · 1/4000 s: the city lights become large round rim-lit discs, the background blurs and the corners darken slightly; you look into the lens's glass.
5. Stopped downf/11 · 1/60 s: the discs close to nine-sided points and the street comes sharp.
6. ShutPast f/22 the ring clicks shut: the sample goes black and the readout says 'Shutter closed: no light'.
7. PaletteStudio (black sweep, champagne accent, graphite lens) or daylight (white seamless, oxide red, steel lens works well).
8. TabletOne column: the lens above the copy; the sample and the buy row side by side; specs in three columns.
9. PhoneThe nav wraps, everything stacks, the button goes full width, specs in two columns.
10. Reduced motionThe lens rests at its stop, still; turning snaps and the sample follows at once; no transitions.
11. Off screenThe iris sleeps; the block runs no loop: the sample repaints only when the ring's value changes.

Made of: Iris as product, Slider driven sample, Depth of field by aperture, Aperture shaped bokeh, Exposure reciprocity, Mutation observer wiring, Palette tokens from one table.

Original composition; the maker (Holm Optical), the lens (Serein 50) and all copy and specifications are invented. The sample photograph and the lens's glass are canvas paintings in camera-launch.mjs: no image ships. Faces: Instrument Sans and Red Hat 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.1Portfolio IrisA photographer’s index where every frame is a shutter.
• 05.3Shutter PreloaderA studio landing page that loads behind a shutter.