Loading
Live demos

Prompt of the day ·

A floor of tiles that rises under your cursor

What the prompt makes, filmed as it came out

Thousands of light tiles cover the screen; wherever the cursor (or a finger) goes, they lift into a soft hill and blush terracotta, then settle back. One InstancedMesh, so it stays smooth on a phone.

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 characters · Made with three.js 0.160 (InstancedMesh) · 2 versions of the prompt

What it’s for

  • The hero of a studio, architect or interior designer’s site: calm, tactile, and it answers the hand.
  • A background behind a short headline: the floor moves, the words stay readable.
  • A section break between projects in a portfolio.

Variants to try

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

  • Your brand colourBlend toward #2f5bff instead of terracotta.
  • Dark versionBackground #101012, tiles #1c1c20, blend toward #f5c46b, and raise the hemisphere light so nothing turns black.
  • Round tilesUse CylinderGeometry(0.45, 0.45, 0.3, 24) instead of boxes.

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 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 (InstancedMesh).
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.