Reduce motion is on · previews stay still

Three.js prompt templates

  • How do I prompt a scroll-controlled exploded view?

    Free

    Use this when an object should separate into labeled parts as the visitor scrolls.

    Exploded viewThree.js

    Break {object} into {N} parts and slide each one out along its own axis in assembly order. Map scroll progress 0 to 1 linearly to explode distance 0 to {distance}. Label each part with a thin leader line. Pin three@0.170.0, seed 42, frame-driven time.
  • How do I prompt a 3D landing-page background?

    Free

    Use this when a moving background must leave the page text readable and respect reduced motion.

    BackgroundR3F

    Make a 3D background for a landing-page hero: {subject}, main colour {colour}, slow motion that never fights the text. Container 100% wide, 100vh tall, DPR capped at 2; with reduced motion on, render a single frame.
  • How do I specify the rendering setup in a prompt?

    Free

    Use this alongside a scene prompt to specify dependency versions, timing and canvas sizing.

    General

    Render contract: pin three@0.170.0 (importmap, no r128 CDN); seed 42; drive time only from the frame count; canvas follows its container, DPR capped at 2; no defaults: no OrbitControls auto-rotate, no blue-purple gradient background, no default ambient light.
  • How do I ask the model to check its rendered scene?

    Free

    Use this when a working scene needs screenshots checked for visible rendering errors.

    Checks

    Capture at 0 s, 2 s and 5 s, at 375 and 1280 wide. For each shot say whether you see stretching, flicker, clipping or transparent sorting errors. Report only what you see; do not guess.

About this collection

4 prompt templates cover exploded view, landing-page 3d background, render contract block, screenshot self-check. Use these starting points to describe a scene or its checks, replace the placeholders, and copy the existing template text. They specify what to ask for; they do not include a finished demo or a verified rebuild.

A prompt in four parts Replace the highlighted fields.
  1. 01 · Subject

    Build {a floating island}.

  2. 02 · Interaction

    Let me {drag to orbit}.

  3. 03 · Output

    Return {one Three.js HTML file}.

  4. 04 · Checks

    Check {resize + reduced motion}.