Prompt del día ·
Una burbuja líquida que se funde hacia tu cursor
Cinco bolas de cromo pastel giran, respiran y se unen en una sola forma líquida bajo un titular grande. El cursor (o el dedo) tira de la más cercana, así que la burbuja se estira y se separa hacia tu mano.
Make one index.html with three.js (import map, three@0.160 from unpkg). Full-screen fragment shader on one plane, background a soft cream-to-lilac gradient. A raymarched liquid blob: five metaballs merged with a smooth minimum (k 0.5) that orbit slowly and breathe. Size it from the screen width: the whole blob always stays inside 80% of the width and ~55% of the height, centered a bit low, fully in view on a phone. Shade it like pastel soap-bubble chrome: Fresnel rim, a soft cosine palette (blush pink, sky cyan, pale gold, no green), bright specular, high ambient so nothing turns dark. The cursor (or a finger) pulls the nearest ball toward it with easing, so the blob stretches and melts toward your hand. At the top, above the blob, the headline "Make it liquid" in a huge bold sans (about 12vw), #1a1a2e. 64 march steps max, pixel ratio min(1.5, devicePixelRatio). 60 fps on a phone.893 caracteres · Hecho con three.js 0.160 (fragment shader, raymarching) · 2 versiones del prompt · El post en X
Para qué sirve
- La portada de un estudio, una marca o un lanzamiento: un objeto tranquilo y juguetón bajo el titular.
- La landing de una app o de una bebida, donde «líquido» o «suave» es parte de la marca.
- Una página 404 o de «próximamente» con la que la gente juega en vez de irse.
Variantes para probar
Añade la línea al final del prompt. Estas no las hemos grabado: pruébalas tú.
- Los colores de tu marca
Use a palette of #2f5bff, #8fd3ff and #ffffff instead of pink, cyan and gold. - Versión oscura
Background a #0d0d14 to #1c1430 gradient, headline #f5f2ff, and keep the high ambient so the blob never turns black. - Más gotas
Use eight metaballs instead of five, slightly smaller.
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 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 (fragment shader, raymarching).
- ¿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.