Skip to content

3D website · Entry through the gear

Meccanica Albertini Foschi

Two gears mesh and a window in the wheel leads onto the shop floor.

Year
2026
Status
Concept

The problem

Anyone looking for a workshop to make a part wants to understand three things quickly, namely whether they can make it, in which materials and how long it will take.

Engineering firms' websites often fall short, with a list of machines, the same old photos of the factory and a generic form. The real work, the precision and the person who will answer the phone stay hidden, and the order goes to whoever explains themselves better.

The solution

I wanted Meccanica Albertini Foschi to introduce itself the way a serious workshop does, with a precise gesture.

At the top, a blue spur gear and an orange pinion, modelled in code tooth by tooth, sit beside the headline. As you scroll the pinion slides along its shaft and meshes, the nut screws on and the two wheels turn together at the right ratio. Then the wheel turns to face you, the shop floor shows sharp through its windows and you go through one of them, landing in the aisle between the machines. Next come the services as photo panels, a blue band of materials, the method on four boards that rotate into view, the questions and the quote form. I chose graphite, blue and technical-drawing type.

The site in numbers

Teeth on the blue wheel, meshing with a 14-tooth pinion
30
Windows in the wheel, one of which leads onto the shop floor
5
Materials machined, from steel to cast iron
6

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

Meccanica Albertini Foschi on a phone, the blue wheel and orange pinion above the headline and the quote button
Meccanica Albertini Foschi on a phone, the services as stacked panels with welding open in the middle
Meccanica Albertini Foschi on a phone, the materials section on a blue background with giant scrolling words

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

The Meccanica Albertini Foschi home page with the headline on the left, contact details below and the blue wheel with the orange pinion
Meccanica Albertini Foschi, the wheel facing you with the shop floor sharp in its windows and nuts and bolts floating at the sides
Meccanica Albertini Foschi, the four services as photo panels below the headline, with the milling panel expanded
Meccanica Albertini Foschi, the blue materials band with giant names, bar samples and quantities in outline
Meccanica Albertini Foschi, the method with the headline From drawing to finished part and the first board, the listening step

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

Want a site like this for your business?

Let's talk