Chat Motion & Interaction Spec

Tap, type, toggle — feel the proposed micro-interactions live before we build them in Flutter. Each card is interactive; use Replay to re-run entrances.

1 Pressable scale + haptic

Every tappable (row, card, pill) dips to 0.97 on press with a light haptic. Press and hold the items.

N
Ndtv India
@ujjwal_nyburs
+ Start a channelJoin

2 Sliding tab indicator

The active pill slides with a soft spring instead of snapping. Tap the tabs.

People
Channels

3 Selected chips in / out

Picking a member springs a chip into the strip; removing it animates out. Tap rows / the ✕.

4 Composer — mic ⇄ send + pop

Type → GIF/camera fade out, mic morphs to send. Tap send → it pops and the message flies up.

😊
Type a message
📷

5 Shimmer → content

Loading shows shimmer skeletons, then cross-fades to real rows (no hard pop-in).

6 List entrance stagger

On first load, rows fade + slide in one after another. Tap Replay.

P
Powerhouse
📍 India · national
C
Checkinf22
📍 India · national
K
Kannur Squad
📍 India · national
D
De channels
📍 India · national

7 Join → Joined

Tap Join: it spins briefly, then a check pops in and it settles to “Joined”. Optimistic + satisfying.

S
Saran Jobs
💼 Jobs · 2.1K members
Join

8 ADV · Swipe between tabs

Swipe/drag left-right between Chats & Channels; the indicator tracks your finger. (Scroll the strip.)

Chats
Channels
💬 Chats list
📢 Channels feed

9 ADV · Avatar → chat header

Tap the row — the avatar flies up into the chat header (shared-element transition). Tap back to reverse.

SJ
Saran Jobs
2.1K members

10 ADV · Attach sheet spring

Tap + — the attachment sheet springs up and the options stagger in. Tap the scrim to dismiss.

+ Attach
📷
Camera
🖼️
Gallery
📊
Poll
📎
File

11 ADV · Reaction long-press

Press & hold the bubble — a reaction row scales in above it. Tap an emoji to react.

👍❤️😂🙏🔥
Bhaiya kal aa rahe ho?

These are the proposed Flutter behaviors — press-scale, spring tab slide, chip spring, mic⇄send, shimmer cross-fade, staggered entrance, optimistic Join. Plus auto-focus + cursor on every search entry (can't show in a static grid; it's "open search → keyboard up, ready to type"). Approve the feel and I'll build them.