Prompt of the day ·
A liquid blob that melts toward your cursor
Five pastel chrome balls orbit, breathe and merge into one liquid shape under a big headline. The cursor (or a finger) pulls the nearest one, so the blob stretches and splits toward your hand.
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 characters · Made with three.js 0.160 (fragment shader, raymarching) · 2 versions of the prompt · The post on X
What it’s for
- The hero of a studio, brand or product launch: one calm, playful object under the headline.
- A landing page for an app or a drink, where “liquid” or “soft” is part of the brand.
- A 404 or coming-soon page that people play with instead of leaving.
Variants to try
Add the line at the end of the prompt. We haven’t filmed these: try them yourself.
- Your brand colours
Use a palette of #2f5bff, #8fd3ff and #ffffff instead of pink, cyan and gold. - Dark version
Background a #0d0d14 to #1c1430 gradient, headline #f5f2ff, and keep the high ambient so the blob never turns black. - More drops
Use eight metaballs instead of five, slightly smaller.
How to use it
- Copy the prompt.
- Paste it into Claude, ChatGPT, Cursor or Lovable and ask for a single index.html file.
- 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 Studio kit is the full version of this idea: a whole website you fill in in the browser and download.See the Studio 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 (fragment shader, raymarching).
- 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.