Desk Diorama

About this style

An isometric room diorama shows one cut-away corner of a room on a floating slab, seen from a fixed raised angle with no perspective, so every object keeps its true proportions. It became a favorite practice piece for 3D artists working in free tools such as Blender, built from beveled primitives, matte pastel materials and soft light. The genre rewards small, believable props: a cable over the desk edge, a mug, a plant by the window. Furniture brands, app makers and creators use it for workspace stories, onboarding art and social posts because a whole way of living reads at a glance.

Make a 10-second isometric 3D diorama: a cut-away home office on a floating slab furnishes itself piece by piece, then the desk lamp clicks on.

<inputs>
If I don't give you something, use the default and don't ask.
- Brand: Quillfern (fictional), a maker of home-office furniture.
- Title: "A corner that works"
- Closing line: "The Quillfern home office, in seven pieces."
- Checklist, name and detail, in order of arrival: Walnut desk, 140 × 70 cm · Display, 27-inch · Task lamp, terracotta · Snake plant, cream pot · Stoneware mug, 350 ml · Task chair, wool seat · Floating shelf, oak. Seven pieces, so the counter ends at 7/7.
- Length: 10 seconds.
</inputs>

<direction>
- Look: a soft, matte 3D miniature lit like a careful studio render: every edge beveled, materials matte with gentle highlights, color carrying the warmth. One room corner on a thick slab, floating over a flat apricot background.
- Palette: background #F3DCC6 with a soft #FBEBDD radial lift behind the room; walls sage #AEBFA6 (left) and #C3CFB9 (right); wall cut faces plaster #F1EBE1; floor oak #DDB88E with plank seams #B8916A; slab sides #C99F74 over a #8A6A55 subfloor band; desk top walnut #7B5138 on legs #F2EDE4; display, keyboard and cables charcoal #2C2E33; lamp terracotta #D8683F with an inner shade #FFE3B8; pot cream #EFE5D6; leaves #4E8A5A with #D3CF7A edges; mug mustard #E2A83C; chair dusty blue #6D8DB8; rug oat #E8D4B9 with a #C9764E stripe; type #3A2E28, secondary #7A6658, accent #C25A33.
- The room (1 unit = 40 cm): a slab 7 × 7 units and 0.6 thick with rounded top edges (radius 0.06). Two walls 0.25 thick and 5.0 tall stand on its back-left and back-right edges, cut clean at the top and at the open ends so the plaster section shows. The left wall has a window 2.2 wide and 2.0 tall with its sill at 1.6: a white frame with real depth, a cross mullion, a deep sill and a CanvasTexture sky behind the glass. The floor is 0.45-wide oak planks running front to back, each its own beveled board with a seeded tone (±4%) and staggered end joints. A rug 3.4 × 2.4 lies under the desk area.
- The pieces, each built from the parts it's really made of:
  - desk: a top 3.5 × 1.75 × 0.1 at height 1.9 (RoundedBoxGeometry, radius 0.03) on four tapered round legs, with a shallow drawer under the right side and a brass pull;
  - display: a thin panel 1.55 × 0.9 with a slim bezel, a rounded back housing, a tilted neck and a flat oval foot; a low keyboard (a rounded slab carrying a 14 × 5 grid of separate key caps) and a mouse (a squashed capsule);
  - lamp: a weighted round base, two arm segments of paired thin rods with small spring coils (TubeGeometry helices) beside each joint, round joint caps, and a cone shade with a rolled rim and a bulb inside;
  - snake plant: a cylinder pot with a rolled lip, a soil disc and seven tall pointed blades (curved, tapered planes with a CanvasTexture of darker cross bands and yellow edges) leaning outward at seeded angles;
  - mug: a LatheGeometry body with a thick lip and a foot ring, a C handle from a TorusGeometry arc, and coffee inside;
  - chair: a five-star base with ball casters, a gas cylinder, a rounded seat cushion with a stitched welt (a thin torus seam) and a curved backrest on a spine;
  - shelf: a floating oak shelf on the right wall holding five books and a small potted cactus, beside a framed print of three overlapping arcs (CanvasTexture);
  - cables: TubeGeometry (radius 0.03) from the display and lamp over the desk's back edge and down a leg to a power strip on the floor.
- Layout: the desk stands against the right wall with the display facing into the room and the chair in front of it; the snake plant sits in the back corner beside the desk; the shelf and print hang on the right wall above it; the window is on the left wall, the rug centered on the floor.
- Light, bright from the first frame: a key DirectionalLight #FFF3E4 at intensity 2.4 from the front left, high (elevation 55°), with soft shadows (PCFSoftShadowMap, 2048 map, a tight shadow camera, bias tuned so nothing acnes). The walls receive shadows but don't cast them, so the interior is never in shade. A HemisphereLight #FFF6EC / #D7B99A at 1.0 fills, and RoomEnvironment through PMREMGenerator at envMapIntensity 0.35 gives soft highlights on the mug, display and lamp. Every piece also gets a soft contact shadow: a blurred ellipse (radial-gradient CanvasTexture, #5A3E2C at 35%) just under its footprint. Shadows read as warmer, deeper versions of the surface they fall on, never grey slabs. The shaded wall stays at least 75% as bright as the lit one. ACESFilmic, exposure 1.05, sRGB output.
- Camera: OrthographicCamera at true isometric angles (yaw 45°, pitch 35.264°). In the final frame the room is centered at (1190, 560), about 840px wide, and fits inside y 120–1000. It opens zoomed to 1.5× on the desk corner and eases out to 1.0 by 5.8 s while drifting 8° of yaw (easeInOutSine), then holds.
- Build motion, one piece at a time like a set dresser at work: large pieces drop from 2.5 units above on easeOutBack (overshoot 1.2) over 0.45 s and land with a small squash (scaleY 0.96 for 0.08 s); planks lay down front to back, 25 ms apart; walls rise from the slab (scaleY 0 → 1, easeOutCubic, 0.5 s); the rug unrolls behind a rolled cylinder that travels across and shrinks; the lamp lands folded and unfolds joint by joint (0.18 s per joint); the plant's blades grow out of the soil one by one, 50 ms apart; the chair rolls in from the right, casters turning, and swivels to face the desk; cables draw along their length (setDrawRange) over 0.5 s; the shelf's books tip in one by one. Each piece's landing ticks its checklist line.
- Life once placed: steam from the mug as three thin translucent ribbons (white at 25%) curling upward on slow sines; the plant's blades sway ±1.5°; nothing else moves.
- Lamp on: the bulb's emissive ramps up over 0.6 s, a warm SpotLight #FFC98A (angle 38°, penumbra 0.9) lifts a soft pool on the desk about 25% brighter, and the display wakes with a CanvasTexture desktop (a soft gradient wallpaper and one window showing a week calendar). Meanwhile the background warms to #F1D2B8 and the window sky shifts from afternoon #BFD9E8 to dusk #F4B48C.
- Type (HTML over the canvas): kicker "QUILLFERN" in Instrument Sans 600, 20px, tracked 0.18em, accent; title Fraunces 600 (request the opsz and SOFT axes; opsz 72, SOFT 100), 76px, #3A2E28, top-left at (120, 110), two lines at most; the closing line in Instrument Sans 400, 26px, secondary, beneath it. The checklist runs from (120, 470) at 52px intervals: a 24px circle that fills with the accent and shows a white check as its piece lands, the name in Instrument Sans 500, 26px, and its detail beside it in 22px secondary; above it, a counter "0/7" in Instrument Sans 600, 26px, tabular figures. Text rises 12px as it fades in over 0.5 s on cubic-bezier(0.22, 1, 0.36, 1), and everything stays left of x 700.
- Premium: soft light, beveled edges, props built from their real parts, a room that feels lived in. Cheap: flat-shaded boxes for furniture, harsh black shadows, a plant that's a green ball.
Banned: perspective cameras, texture or model files, 3D text, hard black shadows, outlines, bloom, people or hands, real brand logos on the devices, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.8s: the slab rises 40px into place (easeOutCubic); the planks lay down and the walls rise; the kicker and title rise in and the empty checklist appears at 0/7.
- 0.8–1.4s: the window frame and the framed print pop onto the walls; the rug unrolls.
- 1.4–2.0s: the desk: legs drop in, then the top. 1/7.
- 2.0–2.6s: the display drops onto the desk; the keyboard and mouse slide in. 2/7.
- 2.6–3.4s: the lamp lands folded at the desk's left end and unfolds over the keyboard. 3/7.
- 3.4–4.0s: the pot drops beside the desk and its blades grow. 4/7.
- 4.0–4.5s: the mug drops by the keyboard and its steam begins. 5/7.
- 4.5–5.1s: the chair rolls in and turns to the desk. 6/7.
- 5.1–5.8s: the shelf slides onto the right wall and its books tip in; the cables draw. 7/7.
- 5.8–6.8s: the room is complete and the camera has settled; steam curls and the blades sway.
- 6.8–7.6s: the lamp clicks on, the display wakes and the light warms toward dusk.
- 7.6–8.4s: the closing line rises in under the title.
- 8.4–10.0s: hold.
For other lengths, change the gaps between pieces, not each piece's own timing; keep at least 1 s of hold.
</structure>

<build>
- One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, designed for 60fps. No image, video, texture or model files: every shape and texture is generated in code.
- window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Anything cumulative is solved analytically from t or precomputed once at load at a fixed step. Past the end, seek clamps to the last frame.
- Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
- Google Fonts via <link> are fine; await document.fonts.load() for each face before defining window.seek.
- Engine: three.js as an ES module pinned to three@0.160.0 through an import map on jsDelivr (`three` and `three/addons/`). WebGLRenderer with antialias, preserveDrawingBuffer: true and setPixelRatio(window.devicePixelRatio); render once at the end of every seek. Text is HTML over the canvas.
- Every piece's transform is a closed-form function of t and its start time; steam and sway are sines of t. Build all geometry once at load, and draw CanvasTextures that use type after the fonts load.
</build>

<check>
Before showing me, step through one frame per second (t = 0…10): screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check every piece rests on the floor, desk or wall with a soft contact shadow and nothing intersects, no wall or corner is ever dark, the lamp shows its joints and springs, the plant reads as a snake plant and the chair as a task chair, each checklist line ticks exactly as its piece lands, and the type stays clear of the room. Confirm seek(10) and seek(11) match, so the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

Low-Poly Landscape Flyover

Made by us

A slow golden-hour glide down a faceted valley: flat-shaded ridges, a low sun, fog melting the far range into the horiz…

Keynote Product Reveal

Made by us

A device built in three.js rises out of total darkness while a softbox reflection glides along its titanium edge, then…

Isometric Miniature City

Made by us

A toy-like isometric city block that builds itself on a floating slab: bevelled buildings rise floor by floor, cars loo…

Extruded 3D Type

Made by us

Chunky two-tone 3D letters swing into place one by one on a seamless studio sweep, lit like a product shot with soft sh…