# 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.

Block · With a Pass · https://tactileui.dev/blocks/camera-launch

> 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 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

## States

1. **At rest**: 
2. **Intro**: The lens waits shut until a third in view, then opens to its stop through the spring.
3. **Turning the ring**: Drag 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 open**: 
5. **Stopped down**: 
6. **Shut**: 
7. **Palette**: Studio (black sweep, champagne accent, graphite lens) or daylight (white seamless, oxide red, steel lens works well).
8. **Tablet**: One column: the lens above the copy; the sample and the buy row side by side; specs in three columns.
9. **Phone**: The nav wraps, everything stacks, the button goes full width, specs in two columns.
10. **Reduced motion**: The lens rests at its stop, still; turning snaps and the sample follows at once; no transitions.
11. **Off screen**: The iris sleeps; the block runs no loop: the sample repaints only when the ring's value changes.

## How it works

Original composition. The sample photograph and the lens's glass are canvas paintings in camera-launch.mjs: no image ships.