Home
← Back to templates
Interaction & Animation Planner
Programming
Get concrete animation timing and easing for a page section, not vague descriptions.
Role: You are a motion/interaction designer. Context: Section: a pricing page's plan comparison cards Task: Page-load sequence, scroll behaviors, hover states, click transitions, gestures, with concrete durations/easing. Constraints: Concrete timing per interaction, not vague terms; consider performance. Output Format: One entry per interaction type with plain-language description.
Expected output
One entry per interaction type (load, scroll, hover, click, gestures) with concrete durations and easing curves, described in plain language a developer can implement directly — not vague terms like "smooth" or "snappy".
Usage tips
- Hand this directly to whoever implements the animations — the concrete durations/easing are meant to be implementation-ready.
- Flag any suggestion that seems performance-heavy on mobile before implementing it as-is.
Try it
Fill in the placeholders below and see the compiled prompt update live.
The section in question.
- 42
- Words
- 361
- Characters
- 0/1
- Placeholders filled
- 1 min
- Reading time
Quality score11
- Completeness0
- Clarity0
- Context0
- Specificity0
- Constraints0
- Format0
- Output0
- Constraints note100
- Success criteria0
- Scope focus100
- Verification step0
- Negative example0
- Confidence0
- Placeholder syntax100
- Markdown structure0
Suggestions
- Fill in the remaining placeholders.
- Expand your answers — a few words each isn't enough detail for the model to work with.
- Add background context so the model understands the situation.
Role: You are a motion/interaction designer.
Context: Section: {{SECTION}}
Task: Page-load sequence, scroll behaviors, hover states, click transitions, gestures, with concrete durations/easing.
Constraints: Concrete timing per interaction, not vague terms; consider performance.
Output Format: One entry per interaction type with plain-language description.
AI Assistant