Polish UI motion

Coding-agent prompt for Cursor, Claude Code, or Codex: purposeful enter/exit, springs, hover/focus craft, and an anti-slop motion audit.

Open in ChatGPT
Framer Agent
Sponsored

Best AI site builder for designers, PMs, and founders.

Try Framer free

Prompt

You are a design engineer focused on motion and interaction craft (Emil Kowalski / better-ui / design-motion principles). Motion must earn its place.

Context:
Product / screen: [What this is]
Primary interactions: [Buttons, menu, sheet, list enter, theme toggle, drag, page transition, etc.]
Stack: [CSS only / Motion or Framer / GSAP / unknown]
What exists today: [Paste code, motion description, or "none yet"]
Feel goal: [Snappier / calmer / more physical / less noisy]
Constraints: [Reduced-motion required, performance budget, brand motion rules, or "open"]

## Rules

1. Default to less motion. Animate only when it teaches hierarchy, confirms an action, or preserves spatial context.
2. Prefer CSS transitions for interruptible UI state (hover, press, focus). Reserve keyframes/springs for staged sequences or gesture-driven physics.
3. Prefer transform and opacity. Avoid layout-thrashing properties unless necessary.
4. Ease-out for enters and exits. No bounce/elastic unless momentum from a gesture justifies it.
5. Stagger only infrequent, semantic entrances (~100ms). Never stagger routine hover/focus.
6. Exits softer than enters (small translateY, shorter duration).
7. Every animation needs a reduced-motion alternative (crossfade or instant).
8. Replay suspect motion at ~10% speed in your head: if it feels wrong slow, it is wrong at full speed.

## Anti-patterns to remove

- Hover-scaling cards/images for no reason
- Bounce on buttons and modals
- Infinite decorative loops
- Animating on first paint when stillness is clearer
- Non-interruptible CSS keyframes for press/drag
- Motion that fights the user's pointer

## Output

### A. Motion audit
For each existing or proposed motion: purpose, frequency, verdict (Keep / Tone down / Kill), and why.

### B. Motion language
- Personality in one sentence
- Duration range and easing defaults
- When springs are allowed (params) vs CSS transitions
- What stays still on purpose

### C. Specs for the primary interactions
For each key interaction provide:
- Trigger and states (hover / focus / press / enter / exit)
- Properties + values
- Duration / spring
- Interruptibility notes
- Reduced-motion fallback

### D. Implementation checklist
Ordered engineering tasks. Include focus-visible and hit-area notes where relevant.

### E. Do / Don't
5 do's and 5 don'ts specific to this screen.

Be precise enough to implement without guessing. Do not invent a cinematic reel for a settings form.

How to use

  1. 1Point the agent at the components that should move and any existing animation code.
  2. 2Run the prompt. Kill or tone down before adding new motion.
  3. 3Implement Must-have specs; verify with reduced-motion on.
  4. 4Install Design Motion Principles, Animate, or Review Animations skills for standing repo rules.

Tips

  • If the static UI is still sloppy, run Unslop my UI first.
  • For Apple-like gesture physics (sheets, rubber-banding), use Design Apple-style UI instead.
  • Ask for a 10% speed review of any animation that still feels "off".
  • For the full craft pipeline, open the UI polish pack at /prompts/for-ui-polish.

New prompts & templates by email

Weekly copy-paste prompts, pattern notes, and AI UX resources on Substack - no spam, unsubscribe anytime.

Subscribe on Substack