Website prompts that move

How to use it

1. 01Copy the prompt or the source

   The prompt carries the whole page: the layout, the motion, the timings and the exact numbers behind them, so your AI isn’t left guessing. Download the source instead if you would rather start from the finished files.

2. 02Paste it into your AI

   Paste it as it is, in one message, with nothing added on top. We build and test every prompt in Claude, which holds design and motion language best. Cursor, v0, Lovable and Bolt all work too.

   • You get one self-contained index.html back: no build step, no packages.
   • Building in Next.js, Astro or WordPress? Add one line: “Build this as a Next.js page”.
   • If the video or images are missing, the prompt says exactly what to generate and where it goes.
3. 03Make the content yours before you tune

   Change the content first and keep the structure. Swapping words, colours and images is cheap; rebuilding the skeleton is what breaks the motion.

   • Brand and copy: “Make this about my bakery in Pune. Keep every section and animation, rewrite the copy.”
   • Colours and type: name your two or three colours and one font pairing, and ask for them to be applied as tokens.
   • Media: keep the file names and aspect ratios the prompt asks for, and your own clip drops straight in.
4. 04Fine-tune it section by section

   Work top to bottom: the hero first, then the next section down. Describe what should change and how it should feel, not just what it is.

   • Be specific with motion: “the headline should land 0.3s after the video starts” beats “make it smoother”.
   • Name the section you are changing, so the rest of the page stays untouched.
   • Never re-run the whole prompt. It overwrites everything you have already refined.
5. 05Put it live

   It is static HTML, so there is nothing to configure. Drag the folder onto Netlify Drop, or push it to GitHub and connect Vercel or Cloudflare Pages. Your site is live in under a minute, on a free plan.