Rack Focus Hero

Rack Focus Hero is a full-width photo hero. Up to twelve prints hang at different depths: one is sharp, the ones nearer the camera are large and soft, and the ones further away are small and soft. Scrolling pulls focus from one print to the next, the way a focus puller moves a lens between subjects, while a lens distance scale under the heading tracks where the focus sits.

How it works

- It pins itself while focus moves and sets its own height from the number of photos, so there is nothing to wire up.

- Each print holds sharp for a moment before focus eases to the next. When scrolling stops, it settles on the nearest print.

- The distance scale reads like a lens barrel (with six photos: 0.7 m, 1, 1.5, 3, 7, ∞; past eight it numbers the stops). Its marker follows the scroll, and each stop is a button that jumps to its photo.

- A print can link to a page. When it does, a "View project" link shows under it while it is in focus.

- On phones and tall screens the prints rearrange into a vertical stack.

Controls

- Items: a photo, title, detail, note and link for each print (up to 12)

- Heading, second line and hint

- Print shape: 3:2, 4:5, 1:1 or 16:9. Every photo is cropped to it, so any photo works.

- Scroll per photo, and Top space for a fixed navigation bar

- Distance scale on or off

- Font family, plus text, muted, scale line, marker and background colours, for dark or light pages

- Canvas preview: which print is in focus on the canvas

Setup

Place it at the top of a page and set the width to Fill. It pins itself with sticky positioning, so don't put it inside a scrolling container. Add your photos in Items.

Good to know

- The prints are in the page's first HTML, and only the first photo loads straight away.

- With reduced motion on, focus switches between prints without the eased pull.

- No extra packages. It uses only React and Framer.