How to Use MotionSites Prompts With Claude Code: A Practical Workflow

Disclosure: ScrollHaus is a MotionSites competitor and publishes this guide. MotionSites details come from its public pages, read on October 5, 2026. We describe a general workflow and do not reproduce any MotionSites prompt.

What you need before you start

• Claude Code installed and a new, empty project folder.
• A MotionSites prompt you have access to. MotionSites lists a $279 yearly plan, a $399 lifetime plan and $49 prompt packs, and a few free prompts are shared from time to time.
• Your own copy, logo and images, even rough ones.
• A browser to preview the result and a real phone to test it.

Step 1: set up a clean project

Create an empty folder, open it in Claude Code, and tell it what you are doing before you paste anything: "We are building a single-page animated website. Use plain HTML, CSS and JavaScript in one index.html with an assets folder. I will paste a design prompt next." A clear frame prevents the agent from scaffolding a framework you do not need.

Step 2: paste the prompt, then add your constraints

Paste the full prompt in one message, then add your own constraints underneath it:

Constraints:
- One index.html, no build step.
- Replace all placeholder copy with the text I provide below.
- Keep every animation described in the prompt; do not simplify them.
- Respect prefers-reduced-motion.
- Mobile first; test the layout at 390 px wide.

Long prompts sometimes lose detail when an agent summarises them. If a described effect is missing, quote that line back and ask for exactly that effect.

Step 3: handle media deliberately

Most animated site prompts assume a background video, a set of images or a 3D scene. Decide up front where these come from: your own footage, generated clips, or stock. Then tell Claude Code exactly where they live (assets/hero.mp4) and how large they may be. Compress video before you use it, and ask for a poster image so the first paint is instant.

Step 4: preview, then iterate in small steps

1. Open the page and scroll it slowly.
2. Write down three things to change, not thirty.
3. Ask for one change at a time and re-check.
4. Commit after each good state so you can roll back.

Step 5: scroll animation that holds up

If the prompt describes scroll-triggered or scroll-linked animation, ask Claude Code to use a proven approach, such as CSS scroll-driven animations or the GSAP ScrollTrigger plugin, rather than inventing its own. Ask it to tie motion to scroll position instead of to time, and to avoid animating layout properties. Our scroll animation performance guide explains why.

Step 6: fix mobile

• Resize to 390 px and check every section.
• Replace hover-only effects with tap or scroll effects on touch devices.
• Reduce the number of simultaneous animations on small screens.
• Test with your system's reduced-motion setting on.

Where prompt-only workflows struggle

A prompt describes a page; the model interprets it. That is fast, and it is also why two runs of the same prompt can differ in spacing, timing and which effects survive. Scroll-scrubbed films, pinned sections and counters tied to scroll position are especially sensitive, because they depend on exact numbers. MotionSites' founder has said that designs now also have a copy-source-code button, so check whether the source you get is a single component or a full page with its media and scroll engine.

When complete source saves time

If you already know the page you want to build, starting from its working source removes the interpretation step. ScrollHaus lets you scroll each website live first, then take its source and a build prompt into Claude Code, Cursor, Lovable or Bolt. Tell the agent to keep the page as one standalone document and change only the copy, images and brand. See how this differs in our ScrollHaus vs MotionSites comparison, or read the MotionSites review for its pricing and limits.

Claude Code or Claude Design?

Claude Code works in your project folder and writes real files, which suits a complete animated website you will host yourself. Claude Design is better for exploring visuals and layouts before you commit to code, and its output can be handed to Claude Code for building. A sensible split: explore the look first, then build the page in Claude Code with the prompt you chose.

Prompts for the hero section, headline and call to action

The hero section is where an animated site makes or loses its first impression, so write that part of your instructions carefully: "The headline is [text]. Words should rise one by one on load. The CTA button is [label] and links to [url]. Keep the CTA button readable over the animated background at all times." Then check that the landing page stays responsive at phone width and that the design system you chose (colours, type, spacing) is applied the same way in every section. Ask Claude to keep colours and spacing as variables so you can change them in one place, and to make repeated blocks reusable.

Using MCP and other tools

Some libraries expose an MCP server so an AI agent can search and pull designs directly. MotionSites lists its MCP on paid plans, and ScrollHaus publishes a public read-only MCP server. If you use Cursor or ChatGPT instead of Claude, the same workflow applies: write constraints, paste the prompt, iterate in small steps. For 3D scenes, ask the agent to use Three.js and to fall back gracefully on phones that cannot render it. When your site includes generated video or transcript text, keep accessibility in mind with captions and sensible contrast.

Building 3D animated websites: assets and tools

Many 3D animated website prompts rely on video or rendered visuals as the hero. Generated clips can come from tools such as Higgsfield or Kling, and Remotion or FFmpeg can render, trim and compress motion graphics and product-demo clips before they go on the page. Ask Claude Code to wire the finished file into the hero section with a poster frame, an overlay for readable headline text, and a fallback image when video cannot play. If you need real 3D rather than video, ask for Three.js and tell it to keep a static fallback for devices that cannot render it. Check rendering on a phone and in a second browser, and keep a transcript or caption file if the clip includes speech.

When you work this way, treat each asset as a replaceable slot. Name the files clearly, keep them in one folder, and ask Claude to read dimensions and duration before it lays out the section. That makes it easy to swap a better clip later without rebuilding the page, and it keeps the design system and the animation timing independent of the media you choose.

Prompt checklist before you publish

1. Every placeholder replaced with real copy.
2. Media compressed and licensed.
3. Reduced motion works.
4. Phone test passed.
5. Fonts and third-party scripts loaded from sources you trust.
6. You have the rights to use the prompt output commercially. MotionSites lists personal and client work rights on paid plans, so confirm the current wording.

For more free options and prompt ideas, see free MotionSites prompts, and for the wider workflow see how to make an animated website with AI.

Explore animated website templates at Scrollhaus →

Need help with a template, account, or project? Email admin@scrollhaus.ai.