Beşikdüzü Asansör — Marketing Site
The first plan for the site had the elevator cabin sliding down the page as you scroll.
Role
The one piece of the system where the visual idea came first. I wrote the concept and its rules, the page as a building section, motion that is heavy and rare, and drove the build and the prerender pipeline with AI coding agents.
Stack
Overview
The first plan for the site had the elevator cabin sliding down the page as you scroll. The redesign flipped it. A cabin that moves with the page is just another thing going past. The version that shipped does the opposite: the cabin stays fixed in the shaft on the right and the floors move past it, the way it looks from inside a glass lift. A dot matrix indicator in the header shows the floor you are on, and a panel of buttons on the right rides you between sections. The page makes no API calls, stores nothing, and is prerendered to plain HTML so it paints before any script arrives. It is the one part of the platform that is actually live.
What it does
- IA fixed cabin and floors that scroll past it; the page is a section drawing of a building
- IIA dot matrix floor indicator in the header that opens a floor directory
- IIIA car operating panel on the right that travels between sections
- IVPrerendered to static HTML with the stylesheet inlined, so the first paint needs no JavaScript
- VNo analytics, no third party scripts, fonts served from the site itself
Screens
Technical notes
- IThe counterweight is the only parallax on the page and it is there because a real machine has one. It passes the fixed cabin mid page moving the opposite way at twice the scroll speed, mirrored about the middle of the shaft. Everything else either scrolls with the page or stays put. Sparse motion was a rule, and the site honours reduced motion settings throughout.
- IIThe build is three steps: the client bundle, a server side copy of the same app run in Node, and a prerender pass that writes the finished page into index.html with the CSS inlined. The door animation is pure CSS, so it plays even before the script arrives. React then hydrates a page that already exists.
- IIIAsset and font files carry a content hash in their names and can be cached for a year; index.html is the only file served without caching. The contact numbers live in one config module, so when the firm changes a line there is exactly one place to change it.
What I learned
An earlier prototype of this site ran Babel in the browser, carried a tweaks panel and nineteen QA screenshots, and none of it was referenced by the app that shipped. It sat in the repository for weeks. Deleting a thing you spent time on is harder than it should be; it took me until September.