Cargando
Demos en vivo

Prompt del día ·

Un suelo de baldosas que se levanta bajo tu cursor

Lo que hace el prompt, grabado tal cual salió

Miles de baldosas claras cubren la pantalla; por donde pasa el cursor (o el dedo) se levantan en una colina suave y se tiñen de terracota, y luego vuelven a su sitio. Es un solo InstancedMesh, así que va fluido en el móvil.

Make one index.html with three.js (import map, three@0.160 from unpkg). Full-screen, background #efece6. A floor of 60×60 square tiles (one InstancedMesh, BoxGeometry 0.9×0.3×0.9, gap 0.1) seen from a camera 20 units away, up at 50°, so the tiles fill the whole screen edge to edge on a phone, no horizon. MeshStandardMaterial, color #ebe6dd, roughness 0.55. The cursor (or a finger) is a soft magnet: tiles within 6 units rise up to 2.6 units with a smooth falloff and blend toward terracotta #d4643a by height, easing back with damping 0.08. A slow idle wave crosses the floor so it's alive without input. A warm directional light with soft shadows (PCFSoft, one 2048 map) plus a hemisphere light, so nothing turns dark grey. ACES tone mapping, pixel ratio max 2. 60 fps on a phone.

784 caracteres · Hecho con three.js 0.160 (InstancedMesh) · 2 versiones del prompt

Para qué sirve

  • La portada de un estudio, un arquitecto o un interiorista: tranquila, táctil y responde a la mano.
  • Un fondo detrás de un titular corto: el suelo se mueve y las palabras se leen igual.
  • Una pausa entre proyectos en un portfolio.

Variantes para probar

Añade la línea al final del prompt. Estas no las hemos grabado: pruébalas tú.

  • El color de tu marcaBlend toward #2f5bff instead of terracotta.
  • Versión oscuraBackground #101012, tiles #1c1c20, blend toward #f5c46b, and raise the hemisphere light so nothing turns black.
  • Baldosas redondasUse CylinderGeometry(0.45, 0.45, 0.3, 24) instead of boxes.

Cómo usarlo

  1. Copia el prompt.
  2. Pégalo en Claude, ChatGPT, Cursor o Lovable y pide un solo archivo index.html.
  3. 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 Studio es la versión completa de esta idea: una web entera, que rellenas en el navegador y te descargas.Ver el kit Studio · 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 (InstancedMesh).
¿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.