Contextual animations help UI controls change purpose the moment a user’s intent changes.

Using Framer, I designed and built this component in three parts (left actions, text input, right action).

Icons fade/slide in 👉 and the input bar smoothly expands outward then contracts ↔️ on a soft ease-in-out when empty — smooth, no snaps or bounces 🚫. Motion also makes the component highly adaptable.

I’m planning to explore new and richer variants of this composer, perhaps a spring-loaded fly-out menu for the add button.

Where this pattern shines

• Chat & AI assistants: attachments → compose → send, all in one control without modal jumps.

• Search bars: idle affordances (voice, history) collapse once the user types; the primary action becomes submit.

• Comment/composer UIs: attachment tools up front; convert to “Post/Send” as soon as text appears.

• Multi-mode inputs (photo/voice/text): keep options visible when idle; prioritize the typed action when engaged.

• Mobile and kiosk contexts: large hit targets, minimal travel, clear “now do this” guidance.