Athela Studio
From floor plan to final render, as you scroll.
The website for a Jakarta interior design studio: a full-bleed render hero, a scroll-driven 3D walk from floor plan to final render, the project index, palettes by style, and the scope of work.
12 real projects, from 2020 to 2023
A studio that opens with its work01 / 05Choose a screen to follow the site from the hero to the 3D process and the projects.
A studio that opens with its work
The hero is a full-bleed render of the Pulau Ubi House bar, with the handwritten Athela mark drawn in after a sliding-door intro.
Rendered from the Athela Studio site code
- The problem
- Clients find it hard to picture how a floor plan turns into a finished room.
- What I built
- A studio website whose 3D scene builds a real project from plan to render as you scroll.
- What it enables
- Visitors see the studio’s process and its finished work before the first meeting.
- Scroll-driven 3D room build
- Project index with hover preview
- Style palettes & scope of work
HTML / CSS / JavaScript / Three.js / GSAP
Designed and built by Alexanders Schwartzmann · start to finish
- Art direction & layout
- Scroll choreography with GSAP
- 3D room model in Three.js
- SEO & fast static hosting
I can build one around how your business works.
I designed and built this project from start to finish.
Alexanders Schwartzmann
From the product idea and design to the code behind the features below.
- Art direction & layout
- Scroll choreography with GSAP
- 3D room model in Three.js
- SEO & fast static hosting
How the main flow works
- 01
Sliding-door intro and hero render
- 02
Floor plan grows into a 3D room
- 03
Browse projects by type
- 04
Pick a style and get in touch
Proof of the work
What was built, how it works, and why it was built that way.
One scene, six stages
The Pulau Ubi House model is built in code, and a single progress value drives plan, volume, furniture, material, lighting, and render.
Scroll position maps straight to that value, so scrolling back rewinds the build just as smoothly.
Light enough for a phone
Plain HTML, CSS, and modules with no framework. The 3D scene only renders while visible and falls back to images when WebGL is missing.
A studio site should open instantly on a client’s phone; the 3D is a bonus, never a requirement.
Rendered from the site’s code at 2× in Chrome. The site is ready; its final domain is still being set up.
Rendered from the Athela Studio site code ·
Core purpose
Athela Studio designs interiors for homes, apartments, offices, and F&B in Jakarta. The website lets a client see the studio’s process, not just its finished renders.
Feature highlights
- Scroll-driven 3D room build
- Project index with hover preview
- Style palettes & scope of work
The walkthrough
A studio that opens with its work
A full-bleed render of the Pulau Ubi House bar, with the handwritten Athela mark drawn in after a sliding-door intro.
The room builds as you scroll
Behind the Render is a live 3D model of Pulau Ubi House that moves from floor plan to volume, furniture, and materials.
Then the final render
The last step swaps the model for the finished render.
Projects by type
Residences, apartments, offices, and F&B with style, location, and year. Hovering a row previews its render.
Scope of work
Interior design, material selection, technical drawings, and 3D visualisation, next to a real working drawing.
How it is built
Plain HTML, CSS, and JavaScript modules, with Three.js for the room and GSAP with Lenis for the scroll. One progress value drives all six stages, so scrolling back rewinds the build. The 3D scene renders only while visible and falls back to images without WebGL.
Fungsi utama
Athela Studio mendesain interior hunian, apartemen, kantor, dan F&B di Jakarta. Website ini membuat klien bisa melihat proses studio, bukan cuma render jadinya.
Fitur pilihan
- Ruang 3D yang terbangun sambil scroll
- Daftar proyek dengan preview
- Palet per gaya & lingkup kerja
Alur yang ditampilkan
Studio yang dibuka dengan karyanya
Render penuh layar bar Pulau Ubi House, dengan logo Athela yang tergambar setelah intro pintu geser.
Ruangan terbangun sambil scroll
Behind the Render adalah model 3D Pulau Ubi House yang bergerak dari denah ke volume ruang, furnitur, lalu material.
Lalu render final
Langkah terakhir mengganti model dengan render jadi.
Proyek per jenis
Hunian, apartemen, kantor, dan F&B dengan gaya, lokasi, dan tahun. Arahkan kursor ke baris untuk melihat rendernya.
Lingkup pekerjaan
Desain interior, pemilihan material, gambar kerja, dan visualisasi 3D, di samping gambar kerja asli.
Cara dibuat
HTML, CSS, dan modul JavaScript biasa, dengan Three.js untuk ruangan serta GSAP dan Lenis untuk scroll. Satu nilai progres menggerakkan keenam tahap, jadi scroll balik memutar mundur prosesnya. Adegan 3D hanya dirender saat terlihat dan kembali ke gambar bila WebGL tidak ada.