How do you prompt AI for better website animations?

Why AI animation prompts come back as a fade

Ask a model for "a smooth, modern animation" and you get an opacity fade with a small upward slide. That is not laziness. Smooth and modern describe how you want to feel, and the model has to turn that feeling into numbers. With nothing else to go on, it picks the safest numbers, which are the ones used on the most pages.

The fix is to move the decisions from the model to you. You do not need to write the code. You need to say what moves, when it moves, how far, how long and how it should feel. Five short facts per animation are enough, and they turn a vague wish into something a model can build and you can check.

It also gives you a way to review. If the prompt said 700 milliseconds and the result takes 200, you know the model ignored a line, and you can point at it. A feeling cannot be checked, and a number can.

Step 1: describe motion in five parts

Every animation can be described with the same five parts. Write them in this order so nothing is skipped, and keep each one to a few words.

Easing is the part people skip and the part you can feel most. Say whether the motion should start fast and settle slowly, which suits things arriving, or start slowly and leave quickly, which suits things exiting. If you can, name a cubic Bézier curve and let the model use it as written.

Step 2: give numbers, not adjectives

Adjectives mean different things to different models. Numbers do not. A short list of ranges that work on most pages is enough to start from, and you can tune from there.

• Small interface feedback, such as a button press: 120 to 200 milliseconds.
• Elements entering the page: 500 to 900 milliseconds, with a decelerating curve.
• Stagger between siblings: 50 to 120 milliseconds, and no more than eight items before the delay feels slow.
• Distance: 16 to 40 pixels for a reveal. A 200 pixel slide reads as a mistake.
• Scroll-linked motion: tie it to scroll progress so it never runs on a timer.

If you want a starting point to compare against, ask for the same animation as a plain CSS rule. The block below is a working reveal that follows the five parts. Paste it into any page, and a model's version should behave the same way.

<script>document.documentElement.classList.add("js");</script>
<style>
  .js .reveal { opacity: 0; transform: translateY(24px);
    transition: opacity 700ms cubic-bezier(.2,.7,.2,1), transform 700ms cubic-bezier(.2,.7,.2,1);
    transition-delay: calc(var(--i, 0) * 80ms); }
  .js .reveal.is-in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .js .reveal { opacity: 1; transform: none; transition: none; }
  }
</style>
<h2 class="reveal" style="--i:0">First line</h2>
<h2 class="reveal" style="--i:1">Second line</h2>
<h2 class="reveal" style="--i:2">Third line</h2>
<script>
  const io = new IntersectionObserver((entries) => {
    for (const e of entries) if (e.isIntersecting) { e.target.classList.add("is-in"); io.unobserve(e.target); }
  }, { threshold: 0.3 });
  document.querySelectorAll(".reveal").forEach((el) => io.observe(el));
</script>

Step 3: state the limits before the effect

Models add what you ask for and forget what you did not mention. Put the limits in the prompt, before the description of the effect, so they apply to everything that follows. Four limits cover most of the problems we see in generated sites.

1. 1Reduced motion: "Respect prefers-reduced-motion. With it on, show every element in its final state with no movement."
2. 2Cheap properties: "Animate only transform and opacity. Do not animate width, height, top or left."
3. 3Visible without scripts: "Content must be readable if JavaScript fails. Add the hidden starting state only after JavaScript runs."
4. 4Leave it alone: "Do not change copy, layout or colors. Only add motion."

The second limit matters most for speed. Browsers can animate transform and opacity on the compositor, away from layout work, while properties like width force the page to recalculate. Saying so in one line saves you a slow page later.

Step 4: ask for one section at a time

A prompt that asks for the whole page animated at once spreads the model's attention thin, and the last sections get the least care. Build in the order a visitor reads: the hero first, then each section, then the transitions between them. Check each one before you ask for the next.

This also keeps mistakes cheap. If the hero motion is wrong, you fix one block. If you asked for everything, you are unpicking a tangle. Lovable's own prompting advice says the same: prompt for one section at a time, state what to change and what to leave untouched, and make one change at a time.

LIMITS
- Respect prefers-reduced-motion: with it on, show final states, no movement.
- Animate only transform and opacity.
- Content stays readable without JavaScript.
- Do not change copy, layout or colors.

SECTION: hero
TRIGGER: on page load
TARGET: each headline line, then the subhead, then the button
PROPERTY: translate up 24px and fade in
TIMING: 700ms each, 80ms stagger
EASING: cubic-bezier(0.2, 0.7, 0.2, 1)

After it works, tell me which file holds the animation and what to edit to change the timing.

The last line is a habit worth keeping. Asking where the timing lives means the next tweak is yours to make in seconds, without another round with the model.

Step 5: point at a reference you can play

The strongest prompt for motion is a working example. A model cannot see a video of the effect you imagine, but it can read the code of one that exists. That is why a template build prompt works better than a description: it carries the structure, the timing and the constraints of a page you have already played and approved.

Pick a template whose motion you want, play the demo, and use its prompt as the base. Then add your own limits and your own brand on top, in separate messages. The guide to building with AI walks through that order tool by tool.

Step 6: review the result against your numbers

Review is where the five parts pay off, because you can check each one.

1. 1Does the trigger fire when you said it would, and only once?
2. 2Does the right element move, and do the siblings stagger in order?
3. 3Open the code and search for the duration and the easing curve. If they are missing, the model replaced them.
4. 4Turn on reduced motion in your system settings and reload. Nothing should move.
5. 5Scroll back up. A reveal that replays every time often feels like a bug unless you asked for it.
6. 6Test on a phone. Long staggers and large travel distances read as slow on a small screen.

When one of these fails, quote it back: "The duration is 300 milliseconds, the prompt said 700. Restore 700." A precise correction fixes the problem in one message, where "make it smoother" tends to change something else.

Prompt mistakes that waste a round

• Stacking adjectives. "Elegant, fluid, premium" describes a mood, and the model can satisfy it with any motion.
• Asking for every effect at once. Parallax, particles and text splitting in one message usually means all three are weaker.
• Leaving out the stack. Say whether the page is plain HTML, React or Next.js, or the model chooses for you.
• Skipping the fallback. If you never mention reduced motion or a missing script, the page will have neither.
• Accepting the first result. Treat it as a draft, and make the second message a review, not a new idea.

When the effect needs real tuning, such as a custom shader or a physics feel, write the first working version with the model and tune the numbers yourself. Models are fast at structure and less reliable at taste, so keep the final say on timing.

Keeping a prompt library

Once a prompt produces motion you like, save it. Keep the limits block and the five-part description in a note, and reuse them for the next page, changing only the section and the numbers. Over a few projects you build a small house style for motion, and your pages start to feel related. It also makes handing work to a teammate or a different tool easy, because the prompt carries the decisions.