Loading
Live demos

Prompt of the day ·

A gold 3D product that follows your cursor and spins on tap

What the prompt makes, filmed as it came out

A glossy gold knot floats in a warm glow, leans toward the cursor and does a full spin when you tap it. Real reflections from a studio environment, so the metal never goes black.

Make one index.html with three.js (import map, three@0.160 from unpkg, plus addons/ for RoomEnvironment). Full-screen page, background radial-gradient(circle at 50% 48%, #8a5a2c 0%, #3a2414 40%, #0e0b09 75%). One glossy gold product floats in the middle and fills about 70% of the screen height, fully in view on a phone: TorusKnotGeometry (radius 1, tube 0.34, 300x48) in MeshPhysicalMaterial, color #f0c987, metalness 1, roughness 0.28, clearcoat 1, envMapIntensity 2.6, lit by RoomEnvironment via PMREM plus a warm point light top left (intensity 60) so nothing turns black. It bobs gently and slowly turns. The cursor (or a finger) steers it: it eases toward the pointer, tilting up to 35 degrees, damping 0.06. Click/tap: one full spin, ease-out. ACES tone mapping, pixel ratio max 2. 60 fps on a phone.

808 characters · Made with three.js 0.160 (MeshPhysicalMaterial) · 2 versions of the prompt · The post on X

What it’s for

  • The hero of a one-product shop: jewellery, perfume, a watch, a bottle.
  • A launch page where the product is the whole story.
  • A logo in 3D for a brand’s first screen.

Variants to try

Add the line at the end of the prompt. We haven’t filmed these: try them yourself.

  • Your productInstead of the torus knot, load my model product.glb with GLTFLoader, centred and scaled to the same size.
  • SilverColor #e8ecf2, roughness 0.18, background radial-gradient(circle at 50% 48%, #5a6470 0%, #1d2228 40%, #08090b 75%).
  • With a price tagUnder the product, a small white line "€89 — Shop now" that links to #shop.

How to use it

  1. Copy the prompt.
  2. Paste it into Claude, ChatGPT, Cursor or Lovable and ask for a single index.html file.
  3. Save the file and open it in your browser. To publish it, upload it to any static host (Cloudflare Pages is free).

Want it finished, with your photos and words?

The Product kit is the full version of this idea: a whole website you fill in in the browser and download.See the Product kit · €500

Or we set it up for you: send us your words and photos and we publish it at your domain within 48 working hours.

We set it up · €750

Questions

Where do I paste this prompt?
Into any assistant that writes code: Claude, ChatGPT, Cursor, Lovable or Claude Code. Ask for a single index.html file, save it and open it in the browser. It uses three.js 0.160 (MeshPhysicalMaterial).
Can I use it on my website?
Yes. The prompt is free and the code your assistant writes is yours. If you’d rather have the finished version, with your photos and words and ready to publish, there’s the related kit.
Is the video what really comes out?
Yes. It’s the page the prompt made, filmed without touching the code by hand; the prompt was rewritten 1 time, and this is the last one. Every assistant writes different code, so yours may vary a little.