My Phone Showroom, day 1: from sketches to a 3D table

Day 1 of Rahul's 3D showroom of every phone he has owned: nine mockups, one round table, and five phones you can pick up and open.

3 min readworklog

Rahul wanted one page for every phone he has owned. Five personal phones since 2010. Today it went from "what if" to a working 3D room: his phones stand around a round showroom table, and you can pick any of them up, turn it around and open it.

Live at phones.rr2.dev. Code: r-r-2/phones. Built with Claude Opus 5.5.

Where it ended up

A round white marble table in a wooden room. The iPhone 13 mini stands in front on a small stand, other phones around the table. A phone list on the left, a spec panel on the right.
The start view. The newest phone faces you, the rest wait around the table.

Nine mockups before any code

Nothing got built until the look felt right. These are the directions Rahul went through, in order.

Dark page with a scrolling timeline on the left, a white phone in the middle showing a boot screen, spec bars on the right.
1. Scroll timeline with a boot-screen animation.
Five phone outlines side by side at true scale, with small spec trend charts below.
2. The lineup at true scale, with spec trends.
The same timeline with a purple holographic glow and gradient spec bars.
3. Holographic. Too much. Dropped.
Light workbench page on graph paper with the Karbonn A7 back and a 'Pop the back cover' button.
4. Workbench: pop the back cover and look inside.
Workbench page with a red iPhone 13 mini and an 'Open it up' button.
5. Same workbench, iPhone 13 mini.
The iPhone opened, with labelled dots on the chip, battery and camera linked to spec rows.
6. Teardown: dots on the parts link to the specs.
Blue blueprint page with the iPhone drawn with dimension lines.
7. Blueprint theme.
A store-style wooden table with all phones standing in a row.
8. Electronics store table.
A round white table with phones on stands in a circle, the iPhone in front, and a small second table in the background.
9. The one Rahul picked: a round table. The camera circles to the next phone. Work phones get their own small table.

What got cut along the way:

What stayed: the year on the left of the list, neutral specs (numbers, no sentences), full 360° rotation, and the look inside.

Building it

Vite, Three.js and GSAP. The first build had only two phones, to check the idea.

First build: a pale grey room with wall shelves, a grey Redmi next to a dark placeholder interior with blue dots.
First build. Grey room, shelves on the walls, placeholder insides.

Then a round of fixes:

Close-up of the iPhone back rendered pink with washed-out white lenses.
The pink iPhone.
The wooden room version with the iPhone 13 mini on the marble table.
Wood and marble.

Looking inside

The insides are 3D parts built in code. Rahul used iFixit teardown photos as the reference for where things sit: board, shields, chip, flex cables, camera, battery. Open a phone and dots on the parts link to the spec panel. The battery lifts out.

The iPhone 13 mini opened from the front: logic board with the A15 on the left, battery on the right, Taptic Engine at the bottom.
iPhone 13 mini, display off.
The Redmi Note 3 opened from the back: board at the top, the BM46 battery below.
Redmi Note 3, back off.
The Karbonn A7 with its battery lifted out, showing two SIM holders and a microSD slot.
Karbonn A7, battery out. Two SIM slots.
The Motorola SLVR L7e held up, showing its small screen and flat metal keypad.
SLVR L7e, the flat metal keypad.

Small touches: the Karbonn and Moto E carry a "Custom ROMs" tag, because Rahul flashed both of them. And the view from above shows the whole table at once.

Top-down view of the round table with the phones on stands around the edge.
View from above.

Next

This note was generated in a Claude session (Opus 5.5).