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 HTML + CSS 3D.

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, first time. Every assistant writes different code, so yours may vary a little.

Prompt of the day · 23 October 2026

Three phones in 3D, with live screens, in pure CSS

What the prompt makes, filmed as it came out

A fan of three phone mockups whose screens are real HTML: a calendar, a chat where new messages pop in, and bars that grow. The whole fan tilts toward the cursor. No three.js, no images.

Make one index.html, no libraries, CSS 3D only. Full-screen page, background #0b0c14 with a violet glow behind the center. Three phone mockups (9:19.5, 40px corners, thin dark bezel) stand in a fan, all fully in view on a phone: each is min(38vw, 26vh) wide, the middle one in front, the side ones rotated ±28° on Y, pushed back 140px and out 70% of a phone's width. Each screen is HTML/CSS in white and violet #7c6cff on #15162a: a week calendar, a chat inbox, a stats card with bars. Perspective 1100px, preserve-3d: the whole fan tilts with the cursor (or a finger), up to 18°, eased. The screens are alive: the bars grow in a loop and a new chat bubble pops in every 2 s. A faint mirror reflection of the phones on the floor. 60 fps on a phone.

748 characters · Made with HTML + CSS 3D · worked first time

What it’s for

The hero of an app or SaaS landing page, before you have real screenshots.
A “how it works” section: one phone per step.
A launch page on Product Hunt or for a waitlist.

Variants to try

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

Your screenshotsInstead of HTML screens, show my three images app-1.png, app-2.png, app-3.png, object-fit cover.
Light versionBackground #f3f2f8, screens white with #111 text, a soft grey shadow under each phone instead of the reflection.
One phone that turnsOnly the middle phone; on scroll it turns 360° on Y and the screen changes at the back.

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 App kit is the full version of this idea: a whole website you fill in in the browser and download.See the App 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 HTML + CSS 3D.
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, first time. Every assistant writes different code, so yours may vary a little.