The Master 3D Build Prompt

The previous lessons gave you individual prompts for specific 3D effects. This lesson gives you the master prompt, the one that builds a complete production-ready 3D website in a single Claude Code session.

Use this when you are ready to build your actual project.

Before you write the prompt

Do these three things first. They make the prompt faster to write and the result closer to what you want.

First, decide your effect. From the effects lesson, pick one: particle background, rotating object, scroll animation, or interactive parallax. Do not try to combine all of them in your first build. One effect done well is more impressive than three effects done poorly.

Second, decide your visual direction. Write down your background colour as a hex code, your text colour, your accent or highlight colour, your Google Font choices with one for headings and one for body text, and your effect-specific choice such as particle colour, shape name, or material finish.

Third, write your real content. Write your actual heading, your actual subheading, your actual CTA button text, and any navigation links you need. Replace every placeholder in the prompt below with these real values before sending.

The master 3D website prompt

Copy this entire prompt and fill in every placeholder with your actual values.

Build me a complete 3D website. Every detail is specified below — follow it exactly.

FILES:

Create three files only: index.html, style.css, main.js.

CDN links for index.html head in this exact order:

<link href="https://fonts.googleapis.com/css2?family=[FONT_1]:wght@400;600;700&family=[FONT_2]:wght@400;500&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>

PAGE STRUCTURE in index.html:

Navigation bar fixed at top:

Left: logo text [BRAND NAME]
Right: [NAV LINK 1], [NAV LINK 2], [NAV LINK 3]

Hero section at 100vh:

Heading: [YOUR MAIN HEADING]

Subheading: [YOUR SUBHEADING — 1 to 2 sentences]

Two buttons: primary [BUTTON 1] and secondary [BUTTON 2]

Layout: text block on the left third, 3D canvas on the right two-thirds

Second section at 100vh — About or Features:

Heading: [SECTION 2 HEADING]

Three feature items each with an icon emoji, heading, and description:

Feature 1: [EMOJI] [FEATURE HEADING] — [FEATURE DESCRIPTION]
Feature 2: [EMOJI] [FEATURE HEADING] — [FEATURE DESCRIPTION]
Feature 3: [EMOJI] [FEATURE HEADING] — [FEATURE DESCRIPTION]

Third section at 100vh — CTA:

Heading: [CTA HEADING]

Body: [CTA BODY — 1 to 2 sentences]

Button: [CTA BUTTON TEXT]

Layout: centred text with no 3D canvas in this section

Footer:

Left: logo

Centre: [FOOTER TAGLINE]

Right: copyright year auto-generated with JS new Date().getFullYear()

DESIGN in style.css:

Colours:

Background: [BACKGROUND HEX]
Primary text: [TEXT HEX]
Muted text: [MUTED HEX]
Accent: [ACCENT HEX]
Accent light: [ACCENT LIGHT HEX]

Typography:

Headings: [FONT 1] at weights 600 and 700
Body: [FONT 2] at weight 400

Hero heading size: clamp(2.5rem, 5vw, 4.5rem) for fluid responsive sizing

Body text: 1.125rem with line-height 1.7

Buttons:

Primary: background [ACCENT HEX], white text, padding 14px 32px, border-radius 8px,

font-weight 600

Secondary: transparent background, border 1px solid [ACCENT HEX], colour [ACCENT HEX],

same padding and radius as primary

Both buttons: no box-shadow, transition 0.2s, scale 1.03 on hover

Navigation:

• position: fixed, top 0, full width, backdrop-filter: blur(12px),
• background rgba at 80% opacity of the background colour
• Nav links: muted colour with no underline, hover changes to accent light colour

Feature cards in section 2:

Background: rgba(255,255,255,0.04) which is slightly lighter than the page background

Border: 1px solid rgba(255,255,255,0.08)

Border-radius: 16px

Padding: 32px

Hover: border colour increases to rgba(ACCENT at 0.4 opacity), subtle box-shadow

3D EFFECT in main.js:

Effect type: [CHOOSE ONE: particle-background OR rotating-object OR scroll-animation]

IF PARTICLE BACKGROUND:

800 particles on desktop and 500 on mobile under 768px

Particle colour: [PARTICLE HEX]

Size: 1.5

3D box: 2000 x 2000 x 2000 units

Each particle has unique random drift velocity with max 0.08 units per frame

Mouse repel: within 150 units push away with force proportional to distance

Particle system rotates slowly on Y axis at 0.0002 per frame

Canvas: position fixed, full screen, z-index -1, pointer-events none

IF ROTATING OBJECT:

Shape: [SHAPE AND DIMENSIONS — e.g. IcosahedronGeometry(2, 1)]

Material: [MATERIAL — e.g. MeshStandardMaterial, colour [ACCENT HEX], metalness 0.5,

roughness 0.3]

Rotation: Y axis 0.004 per frame, X axis 0.001 per frame

Mouse tilt: cursor offset mapped to plus or minus 0.3 radians, smoothed with GSAP quickTo

Canvas fills right side of hero with transparent background using alpha: true

IF SCROLL ANIMATION:
Shape: [SHAPE], material: [MATERIAL]

Canvas: position fixed, full screen, z-index -1

Register ScrollTrigger: gsap.registerPlugin(ScrollTrigger)

Scroll 0 to 33%: object at scale 1 and rotation 0

Scroll 33 to 66%: scale animates to 0.8 and Y rotation adds Math.PI

Scroll 66 to 100%: scale returns to 1.2 and Y rotation adds another Math.PI

All scroll animations use scrub: 1 for smoothing

LIGHTING:

Ambient light: intensity 0.4

Point light 1: [ACCENT HEX] colour, intensity 1.5, position x:-3 y:3 z:5

Point light 2: white, intensity 0.8, position x:3 y:-3 z:3

MOBILE under 768px:

Hero layout switches from side-by-side to stacked with canvas on top and text below

Canvas height on mobile: 50vh instead of 100vh

Feature cards stack to a single column

Reduce particle count to 500 if using the particle effect

ANIMATIONS ON PAGE LOAD:

Hero heading fades in and rises from translateY(20px) to translateY(0) over 0.8s

with a delay of 0.2s

Hero subheading: same animation with delay 0.4s

Buttons: same animation with delay 0.6s

Use CSS animation or GSAP but not both

SELF-CHECK BEFORE DELIVERING:

1. Open index.html in a browser and confirm the 3D effect is visible
2. Check the browser console using F12 and confirm zero errors
3. Interact with the 3D effect and confirm it responds
4. Resize the browser to 375px width and confirm the mobile layout is correct
5. Scroll to the bottom and confirm all three sections are readable

After the build

Once Claude delivers the three files, open index.html in Chrome and run these checks yourself.

3D visible: the effect appears immediately with no black box. Console check: press F12 and go to the Console tab to confirm zero red errors. Mouse interaction: the effect responds to cursor movement. Mobile width: resize to 375px and confirm nothing breaks. Scroll: all sections are readable with no overlap. Fonts: Google Fonts are loaded correctly, which you can verify in the Network tab if unsure.

If anything fails, describe the exact symptom to Claude: "The 3D canvas shows a black rectangle with nothing in it. F12 console shows [paste the exact error message]."