3D gallery prompts

Pick the arrangement and write it as a rule

A sphere, a helix, a ring, a ribbon, a corridor, a stack, the pages of a book. Each can be written as a rule the model can follow: "frames alternate between the left and right wall, one every 2.4 units" or "images sit on a helix of radius 5, six per turn". Give the count and the aspect ratios, because a rule that suits twelve square images falls apart with forty in mixed formats.

Say what faces what. Images that always turn toward the camera feel like cards. Images fixed to a surface feel like a place. Both are valid and they produce different sites.

One way to move, one way to open

Choose a single navigation input and describe it with limits: drag turns the arrangement and it coasts to a stop; scroll walks the camera forward and stops at the last image. Two inputs that both move the camera confuse people. Add keyboard arrows as a mirror of the main input so the gallery can be used without a pointer.

The open state matters most. Say how the chosen image travels to the viewer, how large it ends up, what text appears beside it, and how to close it or step to the next. Ask for each image to have a real link and alt text, so the work can be reached and shared without the 3D.

What it costs, and the fallback

Every image in the scene is a texture in graphics memory, and memory use follows the pixel dimensions, not the file size. Ask for two sizes of each image: a small one for the arrangement and a large one loaded only when a piece is opened. Load the small ones as they come near the camera, not all at once.

The fallback is the simplest on this site: a plain grid of the same images with the same open view. Use it for reduced motion and no WebGL, and consider it for phones, where a grid you can thumb through is often the better gallery.

What a 3D gallery prompt should contain

• The images: count, aspect ratios, folder, and the order.
• The arrangement as a rule: shape, spacing, which way images face.
• One navigation input with limits and inertia, mirrored on the keyboard.
• The open state: how a piece comes forward, its caption, close and next.
• Two image sizes: small in the scene, large when opened, loaded lazily.
• A plain grid as the fallback, sharing the same open view.

A prompt to start from

Build a gallery site for [name], [what the work is]. The work: [number] images in ./work, [aspect ratios], named in order. For each there is a title and year in ./work.json. Use the real files.

The arrangement: a long, dim corridor. Framed images hang on the left and right walls in turn, one every 2.4 units, centred at eye height, 1.6 units tall. Walls and floor #121212, each frame lit by its own soft spot so the picture is the brightest thing in view. Fog hides anything more than 14 units ahead.

Navigation: scroll walks the camera forward along the corridor, smoothed, and stops at the last frame. The camera turns up to 6° toward the pointer. Arrow keys step one frame at a time.

Opening: click a frame and the camera turns to face it and moves in over 0.9s until the image fills 80% of the screen height. Title and year appear below in 14px text, colour #e8e4dc. Escape or a click outside steps back. Left and right arrows go to the neighbouring frames. Each open piece has its own URL.

Stack: Vite + React + TypeScript, three.js, plain CSS. Text on the site: the name top left, [email] top right, both [typeface] 14px.

Images: make two sizes of each, 512px on the long edge for the corridor and 2048px for the open view. Load corridor textures only for frames within 20 units of the camera; load the large one on open.

Budget: pixel ratio capped at 2, no real-time shadows, one render loop that stops when nothing is moving.

Phones, prefers-reduced-motion and no WebGL: a two-column grid of the same images on #121212; a tap opens the same piece view.

Run it, walk to the end and back, open three pieces and confirm every image loads.

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

• What makes a website immersiveDepth, continuity and response to input are what make a website immersive. What each means in a prompt, and the cases where you should not do it.
• Fallbacks for phones and reduced motionWhat to ask for when there is no cursor, a weak graphics chip or prefers-reduced-motion: the three fallback tiers and a block to add to any prompt.

• Scroll storytelling
• 3D products
• WebGL heroes
• Particles
• Cursor interactions
• Cloth and materials