Camera Launch
A launch hero for a fast prime, where the lens is the Iris. Turn its aperture ring and the photograph beside it follows: round bokeh wide open, nine-sided points stopped down.
Built with Iris
What it is for
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.
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 as product, Slider driven sample, Depth of field by aperture, Aperture shaped bokeh, Exposure reciprocity, Mutation observer wiring, Palette tokens from one table
- Stack
- Vanilla ES modules, CSS, WebGL, Canvas 2D
- Needs
- Iris
- States
- 11 documented
- Version
- 0.1.0
- Licence
- With a Pass
States
- 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.
- IntroThe lens waits shut until a third in view, then opens to its stop through the spring.
- 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.
- 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.
- Stopped downf/11 · 1/60 s: the discs close to nine-sided points and the street comes sharp.
- ShutPast f/22 the ring clicks shut: the sample goes black and the readout says 'Shutter closed: no light'.
- PaletteStudio (black sweep, champagne accent, graphite lens) or daylight (white seamless, oxide red, steel lens works well).
- TabletOne column: the lens above the copy; the sample and the buy row side by side; specs in three columns.
- PhoneThe nav wraps, everything stacks, the button goes full width, specs in two columns.
- Reduced motionThe lens rests at its stop, still; turning snaps and the sample follows at once; no transitions.
- Off screenThe iris sleeps; the block runs no loop: the sample repaints only when the ring's value changes.
Notes
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.
Anatomy
Iris as product, Slider driven sample, Depth of field by aperture, Aperture shaped bokeh, Exposure reciprocity, Mutation observer wiring, Palette tokens from one table
Usage notes
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.
Options
| Option | Type | Description |
|---|---|---|
| brand | text | Maker |
| product | text | |
| tagline | text | Tagline |
| lede | text | Lede |
| price | number | Price |
| currency | enum | Currency |
| deposit | number | 0 hides the deposit line. |
| ship | text | Ships |
| palette | enum | A black studio sweep, or a white seamless in daylight. |
| finish | enum | Lens finish |
| blades | number | Also the shape of the bokeh once stopped down. |
| stop | enum | The f-stop the ring rests on, and the one the sample is shot at before anyone turns it. |
| light | number | The lens’s lamp: 0 from above, clockwise. |
| sound | boolean | Synthesised detent clicks, only after the ring is touched. |
Methods
- update
- destroy
How it works
Original composition. The sample photograph and the lens's glass are canvas paintings in camera-launch.mjs: no image ships.