Esme Lund

Esme Lund is an image-first portfolio for photographers, visual artists and filmmakers. The pictures fill the screen and the type stays quiet, so every page is mostly work.

7 pages

Home, Works, Index, a work detail page, About, Contact and a 404. Home is a full-screen slideshow. Works shows every piece as a row of tall strips that open on hover, Index shows them as a grid, and each work has its own page with a statement and details. About is a dark full-screen panel with a large portrait, and Contact is a split screen with a studio image.

Motion

- The slideshow advances every five seconds with a slow zoom and fading captions. Progress tabs fill along the bottom, and you can click any tab to jump to that slide.

- Hovering a strip opens it to show the title, medium and year while the others close. On phones you tap instead, and the row scrolls sideways.

- Pages fade in, images reveal on load, and the "booking" dot pulses.

- A small custom cursor that grows over the works.

Built natively

Everything is made with Framer's own layers, components, variants and effects. There are no code components or overrides, so you can change every part on the canvas.

Organised

- One type scale of 14 text styles in Hanken Grotesk and Geist Mono.

- Colour tokens split into Light, Dark and Accent.

- Named components: Nav, Cursor, Hero Slideshow, Works Strips and View Toggle.

- A Works CMS collection with 16 items drives the Index grid and the work pages (statement, materials, dimensions, edition, where it was shown). The strips live in the Works Strips component.

Setup

1. Replace the works in the CMS (image, title, medium, year, swatch colour).

2. Swap the six slides inside the Hero Slideshow component and the strip images inside Works Strips.

3. Update the email addresses, social links and About copy.

4. Publish.

Good to know

- Contact works through email links, not a form.

- The photography is illustrative and included for preview only.