Skip to content

3D website · Into the lens

Ottica Brunialti

Through the lenses the shop comes into focus, like after a proper eye test.

Year
2026
Status
Concept

The problem

Anyone looking for an optician usually lands on websites that read like a chain store catalogue, with frame brands, lens offers and a photo of the shop window.

You cannot tell how the eye test works, how long it takes, whether there is a workshop or whether the glasses are assembled somewhere else. Yet that is exactly what makes people choose one shop over another, the feeling of being looked after calmly by someone who knows the craft.

The solution

For Ottica Brunialti I started from a simple idea, that eyes should be tested calmly and frames chosen like a tailored suit.

At the top, the cobalt acetate glasses, a 3D model built in code, sit folded next to a magazine-style headline. As you scroll the scene holds still, the temples unfold and the glasses turn to face you. The shop behind stays blurred but turns sharp through the lenses, then you move into the right lens and land in the shop in full focus. After that come the services, the four steps of the visit, the workshop, the frames on display and the questions, all the way to booking the eye test. I chose cobalt blue with tortoiseshell details, light and night backgrounds and an elegant serif for the headlines.

The site in numbers

Parts in the 3D model, from the front to the temple tips
10
Steps of the visit, from listening to pick-up
4
Page sections, from the opening to contacts
7

Technologies

  • React
  • Three.js
  • GSAP
  • TypeScript
  • Tailwind CSS
  • Vite
  • Lenis
  • Motion
  • 21st.dev
  • ChatGPT

The screens

On mobile

The same site on a phone, designed for thumbs and small screens.

1 of 3

Ottica Brunialti on a phone, the 3D glasses at the top with the headline and the button to book the eye test below
Ottica Brunialti on a phone, the visit on a night background with tortoiseshell frames on the shelf and the step bar
Ottica Brunialti on a phone, the workshop on a cobalt background with adjustments, screws, nose pads and cleaning done at the bench

Use the left and right arrow keys to browse the screens.

On desktop

The page scrolls and the scene changes with you. Here are a few moments, from the opening to the contact section.

1 of 5

Ottica Brunialti, the home page with the folded 3D glasses over the blurred shop, the serif headline and the booking button
Ottica Brunialti, the glasses turned towards the viewer, with the shop coming back into focus through the lenses
Ottica Brunialti, the visit on a night background with the step about choosing frames and a photo of tortoiseshell frames
Ottica Brunialti, the cobalt workshop section with the lens edging machine and a floating golden screw
Ottica Brunialti, the contacts over the shop at night with cards for phone, WhatsApp, email and opening hours

Use the left and right arrow keys to browse the screens.

Want a site like this for your business?

Let's talk