AI can write CSS and JavaScript, but a request such as “make my website cooler” gives it almost nothing useful to work with. The outcome is often a generic fade-in, a floating card or an exaggerated spinning effect that looks impressive for three seconds before becoming annoying.
The better approach is to brief animation like a designer and a developer. Describe what should move, what stays anchored, what causes the movement, how far it moves, when it stops and what happens on mobile. Then tell the AI to test the result against real content.
What makes a useful website animation prompt?
A strong brief covers the visual goal and the engineering constraints. For example, a card should respond to the cursor without making its text unreadable. A scroll animation should guide attention instead of hiding content. An effect should stop when the visitor has asked for reduced motion.
Always specify a maximum range of movement, the trigger, the return-to-rest behaviour, keyboard and touch support, and whether the existing layout must remain unchanged.
Three website motion prompts you can copy
1. Pinned-centre 3D card tilt
“Act as a front-end motion designer. Give the cards in my article grid a realistic 3D tilt. Keep the centre anchored while the corners move towards or away from the pointer. Map pointer position to rotateX and rotateY, cap the rotation at approximately 14 degrees, and return the card to its neutral position smoothly when the pointer leaves. Never spin the card a full 360 degrees. Keep headings, images and calls to action readable, preserve the existing click targets and spacing, and use an ordinary flat card on touchscreens. Respect prefers-reduced-motion and test multiple card sizes.”
Why it works: The requested motion is bounded. It explains what must stay still and what must respond, so AI is less likely to overdo the effect.
2. Scroll-driven three-chapter narrative
“Create a three-part storytelling section called IDEA, IMPACT and GROW. As the visitor scrolls through the section, keep the artwork visible and transition between the three messages. Rotate a decorative 3D object gradually to match scroll progress, but keep the supporting text readable. Use CSS sticky positioning and lightweight scroll progress, or a scroll-animation library only if the site already includes one. On narrow screens, stack the content cleanly. On reduced-motion settings, show all three messages without pinning or forced animation. Do not change other page sections.”
Why it works: It turns animation into a narrative, specifies readable content and makes mobile behaviour intentional rather than an afterthought.
3. Cursor-reactive colour spotlight
“Build a subtle radial-gradient spotlight that follows the pointer inside the hero area. Track pointer x/y relative to that section and update CSS custom properties, using requestAnimationFrame if required. Apply the effect only inside the hero rather than globally, and do not cover headings or buttons. Keep enough contrast so text is always readable. For touch, use a static background glow. Disable cursor following when prefers-reduced-motion is set. Use a lightweight implementation and test whether the effect causes unnecessary repaints.”
Why it works: The effect has clear boundaries and performance expectations. It makes a section feel interactive without obstructing the page.
Five mistakes that make animated websites feel cheap
- Animating everything. Reserve bigger effects for the moments that genuinely deserve attention.
- Using movement without purpose. Each effect should reveal information, provide feedback or express the brand.
- Ignoring reduced-motion preferences. A creative site is not a licence to remove user control.
- Forgetting low-powered devices. Test real mobile scrolling, image performance and how the page feels on slower hardware.
- Breaking the page to show off. Navigation, form submissions, text contrast and content discoverability must still work.
Can you use these prompts with your website builder?
These briefs work best with an AI coding assistant that can inspect and edit your site's source code. If you use a hosted drag-and-drop builder, the available custom CSS and JavaScript features may limit what is possible. Even when AI generates plausible code, you still need to test accessibility, responsiveness and deployment.
Want 100 more specific ideas?
Phillips Digital's 100 Motion Prompts is a 61-page PDF organised into ten chapters, including 3D design, cursor interactions, kinetic typography, scroll storytelling, transitions, image effects and production-quality improvements. It is a library of detailed prompts, not prebuilt animation code.
STOP ASKING AI TO “MAKE IT POP”.
Get 100 original motion briefs you can adapt for your own website or client projects. £120 one-time purchase. The PDF is emailed within one UK business day after Stripe confirms payment.
SEE THE 100 MOTION PROMPTS ↗Read the free examples first. No subscription or claim that your results are guaranteed.
Useful technical references
For implementation and accessibility guidance, explore MDN's reduced-motion reference, GSAP ScrollTrigger documentation and the Motion animation library. These references explain techniques; the three examples above are Phillips Digital's own creative briefs.