At My Desk: I Turned My Real Desk Into an Interactive 3D Website With Replit

Published October 2026 · avivashishta.com

Overview

This is my desk at night. A Dell monitor with a light bar on top, my laptop on a stand to the right, a paper lantern glowing behind it, a clamp lamp on the left throwing orange light up the wall, a small globe and a potted plant on the shelf, a phone on a charging stand under the monitor, and a keyboard and trackpad on a desk mat. I took a photo of it and asked Replit Agent to turn it into a website you can sit at.

The result is At My Desk: a small 3D scene of that setup where the lamps switch on and off, the monitor and laptop are real screens you can read and type on, the globe spins, the plant can be watered, and putting the phone on its charger starts a focus timer.

This post covers what you can do on it, how it's put together, and where each piece lives in the code, in case you want to make one of your own desk.

What it is: an interactive 3D desk built from real 3D objects, not layered pictures. The desk, lamps, globe, plant, phone, monitor and laptop all sit in one scene under one camera, so the perspective stays consistent wherever you look from.

Stack: React and TypeScript single-page app. Three.js through React Three Fiber and Drei for the 3D scene, Framer Motion for the welcome and the panels. It publishes as a static site: no server, no database, no account.

What you can do on it

Watch a short welcome, or skip it. The site opens on an animated intro and then hands you the desk.
Look around. Drag to orbit, scroll to zoom, or jump to one of three views: Whole desk, Monitor or Laptop.
Click anything on the desk. The camera glides over to it. For the globe, the plant, the keyboard and the phone, a panel for that object opens once the camera arrives.
Switch the lights. A lightbulb capsule in the bottom-left corner turns each lamp on or off. Clicking a lamp in the scene itself moves the camera to it instead, so the two never fight over what a click means.
Write on the screens. The monitor and laptop show live web content mapped onto the 3D screens. It's real text you can select and type into, not text painted into a texture.
Use the props. Spin the globe, water the plant, and put the phone on its charger to use it as a focus timer.
Open the command menu with a keyboard shortcut. You can replay the welcome from there.

From a photo to a scene

The photo was the brief. I didn't want a flat illustration with hotspots on it, because the moment you move the camera, a picture gives itself away. Every item had to be an actual 3D object, so you can orbit the desk and the lamp still stands behind the globe, the laptop still sits at an angle to the monitor, and the light from each lamp still lands where it should.

That's also what makes clicking feel right. When the camera flies to the plant, it's travelling through the same space you were just looking at, not cutting to a different image.

How it's built

The camera

Camera moves use a damped spring rather than a fixed-length tween. It eases in, and if you click a second object while the camera is still moving, it keeps its momentum and curves toward the new target instead of stopping and starting again.

While an automatic move is running, the orbit controls are paused so they don't pull against the spring. But you're never locked out: dragging or scrolling mid-flight cancels the move and gives you the camera back.

The lights

Turning a lamp off doesn't remove its light from the scene. It fades the intensity down. Removing and re-adding lights in Three.js forces materials to recompile for the new lighting setup, which shows up as a hitch. Keeping every light in place and only changing how bright it is avoids that, and gives you a soft fade for free.

Shadows

Nothing on the desk moves while the camera does, so the shadows don't need to change either. During camera-only movement the scene reuses the shadows it already rendered instead of recalculating them every frame. That's most of the time anyone spends on the site.

The screens

The monitor and laptop screens are React content placed onto the 3D screens, so they behave like web pages: you can read them, select text and type notes. Drawing the text into a canvas texture would have been simpler, but then you couldn't write on them, and the text would go blurry as soon as you zoomed in.

Smaller screens and reduced motion

The scene adapts to phone-sized screens and full-screen mode, and it follows the device's reduced-motion setting.

Nothing leaves your browser

Your notes, light settings, the phone timer, and whether you've seen the welcome and found each object are all saved in your own browser. Nothing is uploaded or tied to an account, which is why the whole thing can ship as a static site.

Where the code lives

File	What it does
The desk page in `src/pages/`	Page state, interactions and overall layout
`src/components/desk3d/DeskScene.tsx`	Camera, rendering, lighting and shadows
`src/components/desk3d/models.tsx`	The 3D desk objects and what happens when you click them
`src/components/LightsCapsule.tsx`, `src/pages/desk.css`	The light controls and the visual styling
`DeskWelcome.tsx`, `DeskMonitor.tsx`, `InlineNotes.tsx`, `Panels.tsx`	The welcome, the screens, notes and the object panels
`src/lib/store.ts`	Browser-local saving and shared state

The app sits at artifacts/immersive-desk/ inside the Replit workspace. The workspace also has separate API and canvas projects, but the desk doesn't use either of them.

A prompt to build your own

This came together over several rounds with the agent, not one prompt. I wrote this one afterwards from what the finished site does. Attach a photo of your own desk and change the object list to match it.

Turn the attached photo of my desk into an interactive 3D website I can sit at. Scene - React + TypeScript single-page app. Render the desk with Three.js via React Three Fiber and Drei. - Build every item as a real 3D object in one scene under one camera, not layered images or a photo with hotspots. Match the photo: [list your objects — e.g. monitor with light bar, laptop on a stand, paper lantern, clamp lamp, globe, potted plant, phone on a charging stand, keyboard, trackpad, desk mat]. - Warm night-time lighting like the photo, with each lamp as its own light source that casts light where it would in real life. Camera - Drag to orbit, scroll to zoom. Three preset views: Whole desk, Monitor, Laptop. - Clicking an object moves the camera to it with a damped spring (eases in, keeps momentum if the target changes mid-move). - Pause the orbit controls during an automatic move, but let any drag or scroll interrupt it and hand control back. Interactions - Lights: a lightbulb capsule in the bottom-left toggles each lamp. Fade light intensity instead of adding/removing lights, so materials never recompile. Clicking a lamp in the scene focuses the camera on it; it does not toggle it. - Monitor and laptop: show live, selectable, editable web content on the 3D screens (not text drawn into a texture). Let me write notes on them. - Globe: spins, opens a panel. Plant: can be watered, opens a panel. Keyboard: opens a panel. Phone: placing it on the charger starts a focus timer. Panels open only once the camera has arrived. - A command menu on a keyboard shortcut, with an option to replay the welcome. Welcome - A short, skippable animated welcome with Framer Motion, then hand over the desk. Performance - Nothing on the desk moves during camera-only movement, so reuse the existing shadow map instead of re-rendering shadows every frame. Responsiveness and accessibility - Works on small screens and in full-screen mode. Respect prefers-reduced-motion. Storage - Save notes, light settings, phone/timer state and welcome/discovery progress in localStorage only. No server, no database, no accounts. It must publish as a static site.

The object list is the part to spend time on. The more closely the 3D layout follows your photo, the more it feels like your desk rather than a generic one.

Recap

At My Desk is my real desk setup, rebuilt from a photo as a 3D website with Replit Agent.
Every item is a real 3D object under one camera, so the perspective holds up from any angle.
The camera moves on a damped spring you can interrupt by dragging or scrolling.
Lamps fade instead of being removed, and shadows are reused while only the camera moves, so nothing stutters.
The monitor and laptop show live web content you can type on, and everything you change stays in your browser.

More 3D Replit builds: Cosmo, a 3D robot companion you can boop and throw, the Luma floor lamp hero, where a brass switch lights the page, and The Descent, an infinite zoom through seven worlds in a book.

← Portfolio · Blog