Prompt del día ·
Un producto 3D dorado que sigue tu cursor y gira al tocarlo
Un nudo dorado y brillante flota en una luz cálida, se inclina hacia el cursor y da una vuelta entera al tocarlo. Los reflejos salen de un entorno de estudio, así que el metal nunca se vuelve negro.
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 caracteres · Hecho con three.js 0.160 (MeshPhysicalMaterial) · 2 versiones del prompt · El post en X
Para qué sirve
- La portada de una tienda de un solo producto: joyas, un perfume, un reloj, una botella.
- Una página de lanzamiento donde el producto lo es todo.
- Un logo en 3D para la primera pantalla de una marca.
Variantes para probar
Añade la línea al final del prompt. Estas no las hemos grabado: pruébalas tú.
- Tu producto
Instead of the torus knot, load my model product.glb with GLTFLoader, centred and scaled to the same size. - Plateado
Color #e8ecf2, roughness 0.18, background radial-gradient(circle at 50% 48%, #5a6470 0%, #1d2228 40%, #08090b 75%). - Con precio
Under the product, a small white line "89 € — Comprar" that links to #shop.
Cómo usarlo
- Copia el prompt.
- Pégalo en Claude, ChatGPT, Cursor o Lovable y pide un solo archivo index.html.
- Guarda el archivo y ábrelo en el navegador. Para publicarlo, súbelo a cualquier hosting estático (Cloudflare Pages es gratis).
¿Lo quieres acabado, con tus fotos y tus textos?
El kit Product es la versión completa de esta idea: una web entera, que rellenas en el navegador y te descargas.Ver el kit Product · 500 €→O te la montamos nosotros: nos mandas textos y fotos y la publicamos en tu dominio en 48 horas laborables.
Te la montamos · 750 €→Preguntas
- ¿Dónde pego este prompt?
- En cualquier asistente que escriba código: Claude, ChatGPT, Cursor, Lovable o Claude Code. Pide el resultado como un solo archivo index.html, guárdalo y ábrelo en el navegador. Usa three.js 0.160 (MeshPhysicalMaterial).
- ¿Puedo usarlo en mi web?
- Sí. El prompt es gratis y el código que te devuelva el asistente es tuyo. Si prefieres la versión acabada, con tus fotos y tus textos y lista para publicar, está el kit relacionado.
- ¿El vídeo es lo que sale de verdad?
- Sí. Es la página que salió del prompt, grabada sin tocar el código a mano; hizo falta reescribir el prompt 1 vez, y este es el último. Cada asistente escribe código distinto, así que tu resultado puede variar un poco.