Codex prompts for 3D websites

Describe the scene as a construction

"A floating crystal" is a picture. "An icosahedron of radius 1.2, flat shaded, colour #cfd8ff, roughness 0.2, at the origin" is an instruction. Give sizes in scene units, positions as coordinates, colours in hex, and the camera's position, target and field of view. If you have a GLB file, put it in the repository and name its path.

This reads as too much detail until you see what an agent does without it: a default cube under a default light.

Make the scroll sequence a table

Write each moment as a row: scroll progress, camera position, object rotation, what the text says. Ask for the sequence to live in one data file and for one pure function that takes progress from 0 to 1 and returns the scene state.

That function can be unit tested. The agent can assert that progress 0 and progress 1 return the first and last rows, and that halfway between two rows returns values between them. Scrubbing back and forth then works by construction.

Checks that don't need eyes

Ask for a debug mode behind a query parameter that prints frame time, draw calls and the current progress. Ask for the pixel ratio to be capped, for the render loop to stop when the canvas is off screen, and for geometry and materials to be disposed on unmount. Each is a line of code the agent can point to in its report.

Then look at it yourself. No list of checks replaces opening the page and scrolling it, and the brief should say plainly that the visual review is yours.

What a 3D brief for Codex should contain

• The geometry: primitives with sizes, or a GLB path.
• Camera and lights as positions, targets and intensities.
• The scroll states as a table in one data file.
• A pure state function with unit tests.
• Performance limits: pixel ratio cap, pause off screen, dispose.
• The fallback: still images for phones and reduced motion.

A prompt to start from

Task: add a pinned, scroll-driven three.js scene to the home page of [site]. Work only in src/scene/ and src/pages/Home.tsx.

Stack: Vite + React + TypeScript, three.js, plain CSS. No other 3D or animation libraries.

Scene: a lantern built from primitives. Base: a cylinder, radius 0.6, height 0.15, colour #1b1d22, roughness 0.6. Body: four thin boxes as corner posts, height 1.4, around an inner glass cylinder, radius 0.45, colour #ffd9a0, opacity 0.35. Cap: a cone, radius 0.7, height 0.4, colour #1b1d22. Inside: a point light, colour #ffb561, intensity 0 at the start. Ground #0c0d10, the same as the page. One dim hemisphere light, intensity 0.25. Camera field of view 35, looking at (0, 0.8, 0).

Scroll states, in src/scene/states.ts, over a section 400vh tall:
- 0.00: camera (0, 1.2, 6), lantern rotation 0, light 0. Text: "[headline]".
- 0.35: camera (2.5, 1.0, 4), rotation 40 degrees, light 1.5. Text: "[line 2]".
- 0.70: camera (0, 2.6, 3), rotation 120 degrees, light 3. Text: "[line 3]".
- 1.00: camera (0, 0.9, 2.2), rotation 180 degrees, light 3. Text: "[line 4]" and the button "[label]".

Write getState(progress) as a pure function that interpolates between rows with ease-in-out, and unit test it at 0, 0.35, 0.5 and 1. Smooth the scroll input over about 0.2s.

Limits: cap the pixel ratio at 2, pause rendering when the section is off screen, dispose everything on unmount. With ?debug, show frame time and progress in a corner.

Below 720px wide, or with prefers-reduced-motion, render no canvas: show four stacked panels with the same text and the images in public/scene/.

Done when npm run build, npm run typecheck and npm run test pass. Run it, scroll down and back with ?debug, and report the numbers. I will review the look myself.

Written for this page as a starting point; swap the parts in [brackets] for your own. The full prompt of each uberdesigner template is longer and specific to one finished design, and it is tested by rebuilding the template from the prompt alone.

Keep reading

• How to brief Codex for designThe five parts of a front-end task brief for Codex: goal, constraints, design values, files it may touch and a definition of done. With a skeleton to copy.
• Using the uberdesigner MCP server in CodexHow to connect the uberdesigner template library to Codex over MCP with two terminal commands, and what to ask the agent once it's connected.

• Whole websites
• Landing pages
• UI components
• Dashboards
• Restyles