Collection

Animated UI components and UI design prompts

Small pieces with a lot of feel. Animated buttons, toggle switches and micro-interactions, each shown running live with the UI design prompt that builds it. Press them, flip them, then copy the prompt.

2 prompts

Prompts

Guide

How to prompt a UI component that feels right

Components live or die on their states. A good prompt lists every state and how the component moves between them.

  • List the states. Rest, hover, pressed, focused, disabled, loading.
  • Give the motion a character. "Springy", "snappy" or "soft" changes the timing curve the tool picks.
  • Ask for accessibility. Keyboard focus and reduced motion, in one sentence.