3D website templates for AI builders: how to prompt a 3D hero that stays fast and readable

Ask Lovable, Bolt, Cursor or Claude for "a landing page with a 3D hero" and you usually get one of two results. Either a spinning cube floating over a gradient that has nothing to do with the product, or a heavy scene that pushes the headline below the fold and makes the page stutter on a laptop. The 3D part works. The design around it doesn't.

The fix isn't a better model. It's a prompt that treats the 3D object like any other design element: it has a job, a place in the layout, a budget, and a fallback. This post is a short checklist for writing that prompt, plus a snippet you can paste.

Disclosure: I work on MotionSites, a library of AI website prompts and templates. The checklist works with any builder and any prompt.

Before you mention Three.js, decide what the object is for. Good jobs for a 3D hero object:

Write that job into the prompt in one sentence. "A slowly rotating abstract shape" gives the AI nothing to design around. "A frosted glass cube that refracts the headline color, sitting to the right of the headline" does.

Most broken 3D heroes are layout bugs, not WebGL bugs. Tell the builder exactly where the canvas lives:

That last line matters more than anything about lighting. If the headline is visible, the page reads as a landing page with a 3D accent. If it isn't, it reads as a tech demo.

AI builders will happily load a 20 MB model and a post-processing stack if you don't say otherwise. Give them limits they can act on:

You don't need to know the exact Three.js calls. Naming the constraint is enough for Claude or Cursor to pick a reasonable implementation, and it gives you something concrete to check.

Some visitors have reduced motion turned on, some are on low-power devices, some have WebGL disabled. Ask for:

This is the detail that separates a designed 3D site from a demo, and it's almost never in a first-draft prompt.

"Smooth animation" means nothing to a model. Numbers do:

Pick two or three motions and say that nothing else moves.

Put this under your normal page description:

Hero: two columns on desktop. Left: headline, one-line subhead, primary button, all visible at 1280x720 without scrolling. Right: a Three.js canvas with one frosted glass cube that refracts the brand accent color.

Mobile: canvas goes below the button, fixed height 320px. Performance: one object, no post-processing, devicePixelRatio capped at 2, pause rendering when off screen, lazy-load the 3D code after the text renders. Motion: idle Y rotation about 6deg/s; tilt toward the cursor up to 8deg, eased 400ms; on scroll the cube scales to 0.85 and fades to 40% by the end of the hero.

Nothing else animates. Fallback: if prefers-reduced-motion is set or WebGL is unavailable, show a static render of the cube with the same layout. Enter fullscreen mode Exit fullscreen mode Swap the cube for whatever object fits your product, and keep the rest.

After the builder finishes, check four things:

If any answer is no, fix that line of the prompt and regenerate rather than patching the code by hand. The prompt is the thing you'll reuse.

Writing all of this from scratch for every project gets old. MotionSites has 550+ website prompts for Lovable, Bolt, Cursor and Claude, including 3D and Three.js designs where layout, scene and motion are already written out. There's a free section at motionsites.org/free if you want to take one apart and see how it's structured.