Circle Motion & Interaction Spec

The same premium micro-interactions as the chat spec, applied to the circle module — rows, tabs, Join, rules, sheets. Each card is interactive; use Replay to re-run entrances. Approve the feel and I'll build them in Flutter.

1 Pressable scale + haptic

Every tappable circle row, card and pill dips to 0.96 with a light haptic. Press & hold the items.

P
Patna Startup FoundersOwner
💼 Jobs · 2.1K members
+ Start a circleJoin

2 Sliding segment indicator

My Circles ⇄ Discover — the active pill slides with a soft spring instead of snapping. Tap the segments.

✓ My Circles
🔍 Discover

3 Filter chips spring

Search filters (All / Public / Active today / Near me) spring to the active brand pill on tap.

All Public Active today Near me

4 Apply starter set → rules fill

Owner taps a guideline starter set; its rules stagger into the editor one by one. Tap a set.

🤝 General 📍 Local & civic

5 Shimmer → content cross-fade

Circle lists show shimmer skeletons, then cross-fade to real rows (no hard pop-in). Today they hard-swap.

6 List entrance stagger

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

P
Powerhouse
⚽ Sports · 1.2K
B
Bengaluru Buy & Sell
🛒 Buy&Sell · 890
K
Kannur Squad
📍 Civic · 3.4K
N
News Adda
📰 News · 5.1K

7 Join → Joined / Request

Public: tap Join → spins, then a check pops to “Joined”. Private: Join → “Requested” pending. Optimistic.

S
Saran Jobs
💼 Public · 2.1K
Join
V
Vaishali Private
🔒 Private · 340
Request to join

8 ADV · Swipe Feed/About/Members

Swipe between the circle's tabs; the indicator tracks your finger. (Scroll the strip.)

Feed
About
Members
💬 Feed
ℹ️ About + rules
👥 Members

9 ADV · Avatar → circle header

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

SJ
Saran Jobs
2.1K members

10 ADV · Admin sheet spring

Tap ⋯ — the admin menu springs up and the rows stagger in. Tap the scrim to dismiss.

⋯ Manage circle
✏️Edit Circle
📋Circle Rules
🕓Pending Posts
🚫Banned Members

11 ADV · Reaction long-press

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

👍❤️😂🙏🔥
A
Ayush · 2h
Anyone going to the cleanup drive Sunday?

12 Count-up stats

Member count, “near you joined” and posts-today tick up from 0 on first paint. Replay to re-run.

0
members
0
near you
0
posts today

13 Cover image blur-up

Circle covers/avatars load blurred → sharp with a fade, instead of a hard pop-in. Reload.

14 Unread pill pop

New activity in a joined circle → the unread count bumps with a spring. Tap to add.

K
Kannur Squad
📍 active 5m ago
3

15 Pin post → lift to rail

Admin pins a feed post — it lifts out of the feed into the “📌 Pinned by admin” rail. Tap Pin.

📌 Pinned by admin
“Cleanup drive Sunday 7am — meet at the lake.” 📌 Pin

16 Live activity dot

“Active now / posts today” gets a gently pulsing presence dot — signals a living circle.

P
Powerhouse
active now · 17 posts today

17 ADV · Undo snackbar

Destructive actions (ban / remove / leave) slide up an Undo bar with a draining timer. Tap the action.

🚫 Ban member
Member bannedUNDO

18 Like burst

Tap the heart on a circle post — it springs and emits a particle burst. Tap it.

🤍

18 interactive primitives above (1–11 shared with chat, 12–18 circle-grounded: count-up, cover blur-up, unread pop, pin-to-rail, live dot, undo snackbar, like burst). Plus build-time-only primitives that don't demo in a grid: parallax hero header (cover shrinks/title scales on scroll), shared-axis route transitions between circle screens, branded pull-to-refresh ("Loading circles…"), auto-focus + cursor on search, empty-state float. ~20 widget types, ~40 touch-points. Build once, apply to chat + circle.