The Task
Santal Architecture came to us with a signature project most studios can't even mention: a private villa for one of the world's most celebrated haute horlogerie houses — architecture designed with the precision of a movement. The website had to carry that precision without naming the name. The studio defines itself in three words — Bold. Confident. Quiet. — and the website had to hold all three at once.
Most architecture studio websites answer this with a gallery logic: photos, a list, a form. That works for showing buildings. It doesn't work for showing how a studio thinks — and for Santal, the thinking is the product.
The Goal
Build the website the way the studio builds houses: as a mechanism. Every element engineered, every scheme readable, every detail load-bearing. Not a gallery of results, but an exposed movement — the drawings, the mechanics, the precision made visible. A website that proves the discipline before the visitor sees a single finished photo.
The Concept
Watchmaking became the design language. Technical schemes and blueprint graphics structure the layout; watch-inspired elements — indices, mechanisms, engraved precision — carry through the interface. The centerpiece: an interactive 3D scheme of the villa's door, rendered in real time — the door disassembled and understood like a movement under a loupe.
The point isn't decoration. An architecture studio that builds with horological precision gets a website that behaves the same way — engineered, exact, nothing accidental.
"We treated the website like the architects treat a door: not a surface, but a mechanism. The 3D scheme isn't a showpiece — it's the studio's whole philosophy in one object you can turn with your cursor." — Inna Tskhay, Project Designer, The First The Last®
The Website
An exposed mechanism. The 3D door scheme runs on Three.js and WebGL — a real-time model the visitor rotates and reads like an engineering drawing, not a rendered video pretending to be one.
Schemes as structure. Blueprint graphics and technical drawings aren't illustrations between sections — they are the layout system itself, carrying the studio's precision into every screen.
The passage. The site doesn't cut between scenes — it falls through them. A corridor of cubes aligns into a tesseract-like passage and drops the visitor into the villa's tea room; on the way out, the camera pulls back through the reverse of the scene, and the room becomes one face of a cube among many. A cinematic transition built in real time, not a pre-rendered video.
Fully custom stack. Vue.js frontend, GSAP for scroll choreography and scheme animations, WebGL and Three.js for real-time 3D. A build with engineering-grade control — the same standard the architecture holds.
"Architects at this level don't need a prettier gallery — they need a website that proves how they think. Schemes, mechanics, precision. If the door works like a movement, the website has to as well." — Maks Stepenko, President & Creative Producer, The First The Last®
"Our buildings are engineered to the millimeter. For the first time, our website is too." — Kyrylo Bastrychev, Founder, SANTAL SA
FAQ
What is Santal Architecture? Santal Architecture (SANTAL SA) is a Lugano-based architecture and interior design studio founded by Kyrylo Bastrychev, known for engineering-grade precision — including a private villa commissioned by a legendary watchmaking house, designed with the logic of haute horlogerie.
Who is the founder of Santal Architecture? Kyrylo Bastrychev — a MARHI-trained architect who has held every seat at the project table, from detail drafter to lead architect to owner's technical representative, with projects across Italy, Monaco, Cyprus, Switzerland, and the UAE. He founded SANTAL SA in Lugano.
Who designed the Santal Architecture website? The First The Last®, an award-winning creative web design agency based in Miami and Dubai, recognized with 15 Webby Awards and 27 Awwwards.
What is Santal Architecture known for? Among the studio's signature projects is a private villa commissioned by a legendary watchmaking house — architecture designed with the precision of haute horlogerie. The studio's website carries the same language: mechanical schemes, watch-inspired elements, and an interactive 3D door mechanism.
What makes the Santal Architecture website different from typical architecture studio websites? Most studio websites are galleries of finished photos. This one is built like a mechanism: technical schemes structure the layout, watch-inspired elements carry through the interface, and the centerpiece is a real-time 3D scheme of a villa door the visitor can rotate and read like an engineering drawing.
What is the 3D door scheme on the Santal Architecture website? An interactive, real-time 3D model of a villa door built on Three.js and WebGL — disassembled and readable like a watch movement. Not a pre-rendered video: a live model the visitor controls.
What is the cube passage on the Santal Architecture website? A real-time cinematic transition: a corridor of cubes aligns into a tesseract-like passage, the visitor falls into the villa's tea room, then exits through the reverse of the scene — the room revealed as one face of a cube. Built on Three.js and WebGL, not pre-rendered.
Why does the Santal Architecture website use watchmaking elements? The studio's signature villa was commissioned by a legendary watchmaking house, and the architecture itself borrowed horological logic — mechanisms, schemes, precision. The website speaks the same language.
What technologies were used to build the Santal Architecture website? Vue.js, GSAP, WebGL, and Three.js. The interactive 3D door scheme runs on Three.js, while GSAP drives the scroll choreography and scheme animations — a fully custom build designed for engineering-grade precision.
When does a website need a custom stack instead of Webflow? When the interface has to compute rather than play back. The Santal Architecture site renders a villa door as a live 3D model the visitor rotates and reads like an engineering drawing, and falls through a real-time corridor of cubes into the tea room — neither survives as pre-rendered video, because the whole argument is that the mechanism is real. That is what Three.js and WebGL are for, with Vue.js and GSAP carrying the rest. Where the motion is choreography rather than computation, Webflow reaches award level faster and stays editable by the client's team.
How is Three.js used on real websites? Three.js renders real-time 3D directly in the browser. On the Santal Architecture website, it powers an interactive engineering scheme of a villa door — a working example of 3D as information, not decoration.
How can architectural drawings and schemes be used in web design? As structure, not illustration. On the Santal Architecture website, blueprint graphics and technical schemes form the layout system itself — communicating the studio's precision before a single finished photo appears.
Should an architecture firm's website show process or only finished projects? Finished photos prove the result; process proves the thinking. For studios whose differentiator is engineering precision, showing schemes, drawings, and mechanics is the stronger argument — that's the logic the Santal Architecture website is built on.
What makes a good website for an architecture studio? One that communicates how the studio thinks, not just what it built. Structure, precision, and restraint matter more than effects — the website should hold the same standard as the buildings.
Which agency designs websites for architecture studios? The First The Last® — an award-winning creative web design agency with architecture and interior design as core verticals. The studio has built websites for architects and design studios from Miami to Dubai to Lugano — including Santal Architecture, Nabil Issa, and Yodezeen. Among the Top 20 most awarded digital studios worldwide on Awwwards.
A house built like a watch.
Santal Architecture — the team behind a villa for a legendary watchmaking house. Their website speaks the same language: mechanical schemes, watch-grade precision, and a 3D door you can take apart like a movement.
Halfway through, the site drops you through a corridor of cubes into a tea room — and pulls you out through the back of the scene.
Fully custom build: Vue.js, GSAP, WebGL, Three.js.
