3D Laptop Desk Scene

About this style

The desk scene is a long-running device in software marketing: instead of floating a screenshot in empty space, the product appears on a laptop in a believable workspace, so viewers picture it in their own day. Photographed versions filled stock imagery for years; stylized 3D versions, with simplified rounded objects, soft daylight and a muted palette, became common as real-time 3D tools spread into design teams. A slow camera dolly toward the screen does the storytelling: it opens on the person's world and ends inside the product, where the interface can be read. It works when the scene feels lived-in but uncluttered, the light is warm and soft with real shadows, and the screen stays perfectly legible at the end of the move.

Make a 10-second stylized 3D product film: a sunlit desk corner with a plant, a mug, books, a notebook and an original laptop; the camera dollies slowly in until the laptop's screen fills the right side of the frame, where a CRM for freelancers books a new deal, while a headline settles on the left; then the invoice goes out.

<inputs>
If I don't give you something, use the default and don't ask.
- Product: Wrenly, the CRM for freelancers (fictional). Mark: a 44px terracotta circle holding a cream teardrop.
- Headline: "The CRM that keeps up with freelancers." Body: "Proposals, clients and invoices in one calm place." Button: "Try free for 30 days".
- The freelancer: Noor (greeting "Good afternoon, Noor", date "Tuesday 21 October").
- Numbers before the deal: Booked this month $18,400; Open proposals 3 · $11,200 (Lumen Bakery $4,700, Ada Okafor $4,300, Kestrel Yoga $2,200); Invoices due 2 · $3,950 (Marlow Studio $2,450, Pine & Pale $1,500). Booked per month, Jan–Oct, in $k: 9.2, 11.0, 10.4, 12.8, 13.5, 12.1, 14.9, 15.6, 16.2, 18.4.
- The deal: "Proposal accepted · Lumen Bakery · $4,700" with a "Send invoice" button. After it: Booked $23,100; Open proposals 2 · $6,500; then "Invoice #0042 sent to Lumen Bakery" and Invoices due 3 · $8,650.
- Today list: "15:00 · Kickoff call · Ada Okafor" · "Due today · Proposal · Kestrel Yoga" · "Fri · Invoice #0041 · Marlow Studio"
- Length: 10 seconds.
</inputs>

<direction>
- Look: a stylized, softly modeled 3D still life in late-afternoon sun, like a premium illustration rendered in 3D: simplified rounded objects, matte materials, a warm and muted palette, real soft shadows and a window's light falling across the desk. Calm and lived-in, never cluttered, never glossy. The camera's single slow move carries the film; the screen is the destination.
- Palette: back wall #E9D6BF; left wall #E3CDB2; floor #D8C2A3; desk wood #C68B5B with a 1.5cm rounded edge; laptop aluminum #C9CCD1, keyboard well #3B3E44, keys #2E3136 with #44484F tops, trackpad #BFC3C8, bezel #1E2024; plant pot #F1E6D6, soil #6B4A35, leaves #5E9C6B and #7DB884; mug #D2704A with coffee #8E4A33; notebook #9BB59A; pencil #F2C14E with a #E9A0A0 eraser; books #E07B53 and #2F5E6E with #F4EBDD page edges; the window frame #F4EBDD and the sky outside a vertical gradient from #CFE6F2 to #F6E7CF. On-screen app: background #FBF8F3, sidebar #F1ECE4, cards #FFFFFF, text #2B2420, secondary #8A7F74, accent terracotta #E07B53, success green #4E9A6B. Overlay text #2B2420 and #6E6258.
- Scene, in centimeters (1 unit = 1 cm): the floor at y 0; the back wall at z −60; the left wall at x −120 with a window opening (z −30 to 50, y 95 to 215) in a 6cm frame with a cross mullion of 4cm bars, the sky beyond on a plane outside it. A desk 160 × 4 × 75 with its top surface at y 76 (x −80 to 80, z −55 to 20) on two panel legs. On it: the laptop at (8, 76, −14): a 31 × 1.5 × 21.5 base rounded 1cm, a keyboard well inset with 6 rows of 14 rounded keys and a trackpad, and a lid hinged at the back edge, open so the screen leans back 18° from vertical, a 28.6 × 17.9 display in a thin bezel, no logo anywhere. A plant at (55, 76, −40): a pot (radius 9, height 16, 1cm rim), soil, nine leaves made of stretched, flattened spheres (about 3 × 0.4 × 9) fanning up and out in both greens. A mug at (42, 76, 4): radius 4.2, height 9.5, with a torus handle and a coffee disc. A closed notebook at (−34, 76, 2), 21 × 1.4 × 15, turned 12°, with a pencil on it (a hexagonal prism with an eraser and a cone tip). Two stacked books at (−55, 76, −42), 24 × 3.5 × 17. Everything uses RoundedBoxGeometry (three/addons) or smooth primitives with enough segments; nothing faceted.
- Materials: MeshStandardMaterial everywhere, roughness 0.7–0.9, metalness 0 (the aluminum 0.2 at roughness 0.5, still soft). The display is a MeshBasicMaterial with the app's CanvasTexture and toneMapped: false so its colors are exact; the sky plane is MeshBasicMaterial too.
- Lighting, so nothing comes out dark: outputColorSpace SRGBColorSpace, ACESFilmicToneMapping, exposure 1.0. The sun: a DirectionalLight #FFE2B8 at intensity 3.0 from (−260, 230, 60) aimed at (10, 76, −20), castShadow with PCFSoftShadowMap, mapSize 2048, radius 4, bias −0.0005, normalBias 0.02, its shadow camera fitted to the desk corner, so the window throws its four-pane patch of light across the desk and up the back wall. A HemisphereLight with sky #FFF4E5, ground #C9A27E, intensity 1.3. A fill DirectionalLight #DCE7FF at 0.5 from (150, 120, 200), no shadow. Tune until the back wall's lit areas read about #E9D6BF, its shaded areas no darker than about #BCA588, and the darkest shadow under the laptop no darker than #5A4636. Nothing near-black except the bezel.
- The app on the screen: a 2048 × 1280 CanvasTexture (sRGB, max anisotropy, mipmaps), redrawn when its content changes; no text smaller than 30px on the texture so it reads at the end framing. Sidebar x 0–360 with the mark and "Wrenly" (Outfit 600, 40px) and nav items Pipeline (active, on a white pill), Clients, Proposals, Invoices, Calendar (Outfit 500, 32px). Main area from x 420: the greeting (Outfit 600, 56px) at y 140 and the date (30px, secondary) at y 190; three KPI cards at y 250–450 (x 420–910, 950–1440, 1480–1970, radius 28): "Booked this month" $18,400, "Open proposals" 3 · $11,200, "Invoices due" 2 · $3,950 (label 30px secondary, value Outfit 600, 72px); a chart card at x 420–1440, y 490–1180: "Booked per month", a line chart of the ten months (y axis 0–25k), a 6px terracotta line with a 15% terracotta area under it and a dot on the last point; a Today card at x 1480–1970, y 490–1180 with the three items. The toast, when it arrives, sits at x 1300–1990, y 40–210: a white card with a green dot, the text in Outfit 500, 34px, and a terracotta "Send invoice" button.
- Camera: a PerspectiveCamera, fov 30. It holds at position (−70, 150, 260) looking at (0, 82, −5) until 0.4 s, then dollies on easeInOutCubic to position (0, 92, 42) looking at (4, 86, −12) at 5.6 s, its path bending about 6cm to the left at its midpoint, then pushes a further 1.5% toward the screen on easeOutSine until 8.6 s and stops. Adjust the end so the display spans about x 650–1720 and y 230–900 of the frame and the left 600px of the frame shows only the plain back wall. No roll, no shake.
- Overlay (HTML over the canvas): at x 120: the mark and "Wrenly" (Outfit 600, 28px) at baseline y 360; the headline in Outfit 600, 58px, line-height 64px, on three lines ("The CRM that" / "keeps up with" / "freelancers.") at baselines 440, 504 and 568; the body in Outfit 400, 22px, #6E6258 at baseline 620, max width 460px; the button below at y 660–716 (pill, #2B2420 fill, #FBF8F3 label in Outfit 600, 20px, 24px side padding).
- Premium: a single slow, confident camera move; warm, soft sun with real shadow shapes from the window; rounded, matte objects in a restrained palette; a crisp, readable screen whose numbers all add up; text placed over a calm wall. Cheap: dark or flat lighting, glossy plastic, a cluttered desk, a floating screenshot pasted on a rectangle, blurry screen text, a depth-of-field smear, a copied real laptop.
- Banned: real laptop or phone designs and logos (no fruit, no recognizable brand silhouettes), glossy reflections, depth-of-field blur, bloom, lens flares, camera shake, purple, real company names, logos and UI copied from existing products, anything flashing more than 3 times a second.
</direction>

<structure>
- 0.0–0.4s: the wide shot of the sunlit desk corner, still; the screen already shows Wrenly.
- 0.4–5.6s: the dolly in. On the screen, the chart line draws January to October (1.2–2.0 s).
- 4.6–5.4s: the toast "Proposal accepted · Lumen Bakery · $4,700" slides in from the top-right of the app (4.6 s); "Booked this month" rolls from $18,400 to $23,100 and "Open proposals" to 2 · $6,500 (4.8–5.2 s); the chart's last point rises from 18.4k to 23.1k on easeOutCubic.
- 4.8–5.6s: the overlay arrives: the mark and name, the headline lines 0.08 s apart, the body, the button, each rising 16px and fading in on easeOutCubic.
- 5.6–6.3s: hold. The 6.0 s frame is the hero: the laptop screen large on the right with the toast, the updated KPIs and chart, the warm desk around it, and the full headline block on the left.
- 6.4–7.6s: an app cursor (drawn on the texture, 40px) moves to "Send invoice" and clicks (7.2 s); the toast turns into "Invoice #0042 sent to Lumen Bakery" with a green check, and "Invoices due" rolls to 3 · $8,650.
- 7.6–8.6s: the cursor slides off the toast; the last of the push finishes.
- 8.6–10.0s: hold, everything still.
For other lengths, stretch the dolly and the holds; keep the screen events in order and 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, pinned with an importmap from jsDelivr ("three": https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js, "three/addons/": https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/). WebGLRenderer({ antialias: true, preserveDrawingBuffer: true }), setPixelRatio(devicePixelRatio), shadowMap enabled; seek sets the camera from t, redraws the app texture from t when its state changes (needsUpdate), and renders once. The overlay is HTML positioned in stage pixels with its transforms and opacity set from t.
</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 that the scene is warm and well lit at every second (no muddy or near-black areas, the window's light patch visible on the desk and wall); every object reads at once (laptop, plant, mug, notebook and pencil, books) and none is a copy of a real product; the screen's text is sharp and legible at the end framing; the numbers add up ($18,400 + $4,700 = $23,100; $11,200 − $4,700 = $6,500; $3,950 + $4,700 = $8,650); the overlay sits on plain wall and never over the screen; the 6.0 s frame shows the screen with the toast and the headline block; and the final frame shows "Invoice #0042 sent". 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

Gradient Mesh Brand Film

Made by us

A slow, ribbon-like gradient mesh flows in a skewed band behind sharp headline type, while white payment, API and chart…

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…

Dark UI Precision Glow

Made by us

A dark-mode work tool drawn in hairlines and quiet radial glows: issue rows populate, ⌘K opens a command menu, a comman…

Bento Grid Feature Reveal

Made by us

Rounded tiles spring into a bento grid on warm paper, each acting out one feature in a small animation, then the tiles…