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
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
Use the left and right arrow keys to browse the screens.







