Working in the same doc, live
Figma / Linear-style real-time collaboration indicator primitives — presence avatar stacks with tone-coded status rings, a multi-cursor overlay with five named cursors, live typing indicators that name the field, field lock banners with release CTAs, a presence activity feed wired through data-display/ActivityFeed, collab room cards, four-tone online status dots with pulse, avatar read-receipt trails, co-edit conflict banners with side-by-side merge, floating emoji reaction pops anchored to cursors, a glass room participants panel, a scoped share-link generator, time-zone indicator chips with offset to me, and a live doc version pill with save-state dot. Tuned for Oak Flats Mufflermen co-editing a customer quote — Marcus on the labour line, Sophie on the parts breakdown, Jordan watching the totals.
Working in the same doc, live is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.
Working in the same doc, live: Figma / Linear-style real-time collaboration indicator primitives — presence avatar stacks with tone-coded status rings, a multi-cursor overlay with five named cursors, live typing indicators that name the field, field lock banners with release CTAs, a presence activity feed wired through data-display/ActivityFeed, collab room cards, four-tone online status dots with pulse, avatar read-receipt trails, co-edit conflict banners with side-by-side merge, floating emoji reaction pops anchored to cursors, a glass room participants panel, a scoped share-link generator, time-zone indicator chips with offset to me, and a live doc version pill with save-state dot. Tuned for Oak Flats Mufflermen co-editing a customer quote — Marcus on the labour line, Sophie on the parts breakdown, Jordan watching the totals.
Pick a primitive
Every primitive renders at full scale in its own sub-route with realistic Oak Flats content — collaborators Marcus Halverson, Sophie Tan, Jordan Pace and Bec Lawson co-editing Quote #Q-1408 for a 2019 Hilux 2.8 exhaust replacement. Composition lives under /full-room.
Presence avatar stack
Stacked avatars of currently-online collaborators with tone-coded status ring and overflow chip when count exceeds the visible max.
Inspect primitive statesMulti-cursor overlay
Five+ named cursors floating over a stage with chip labels and smooth percent-positioned interpolation. Visual only — no socket logic.
Inspect primitive statesLive typing indicator
Who's currently typing, where — animated dots, names, target field, and target doc. Reduced-motion override swaps dots for dot-dot glyph.
Inspect primitive statesField lock banner
“Sophie is editing this field” — amber lock icon, holder avatar, hold duration, and a request-release CTA. Marks the field aria-busy.
Inspect primitive statesPresence activity feed
Live feed of who did what just now — composes data-display/ActivityFeed with collab-typed events (joined / edited / resolved / shared).
Inspect primitive statesCollab room card
Glass-surface card for an active collab room — doc title, kind chip, last-edited stamp, active-user avatar stack, open-room CTA.
Inspect primitive statesOnline status dot
Tiny presence dot — green online (pulses) / amber idle / red busy / grey offline. Four sizes, optional inline label, full aria-label.
Inspect primitive statesRead receipt trail
Avatar trail showing who has seen the latest change + when — overflow chip for long trails. Composed inside doc footers.
Inspect primitive statesCo-edit conflict banner
Red alert banner when 2+ users edited the same field — side-by-side my-version vs their-version, keep-mine / keep-theirs / merge CTAs.
Inspect primitive statesLive reaction pop
Floating emoji reaction popping briefly from a user's cursor location. Tone follows cursor colour. Reduced-motion holds the pop static.
Inspect primitive statesRoom participants panel
Glass side panel — every participant with role chip, current-focus area, presence dot overlay on avatar, and a leave-room button.
Inspect primitive statesCollab share link generator
Share link card — URL input, copy CTA, scope chip radio (View / Comment / Edit / Admin), and expiry label below.
Inspect primitive statesTime zone indicator chip
Tiny TZ chip per collaborator — their local time, timezone shortname, and relative-to-me offset (e.g. +3h, Same TZ).
Inspect primitive statesLive doc version indicator
Pill bar — current version chip + save state (saved/saving/dirty/offline) + saved-X-secs-ago + collaborators-online count.
Inspect primitive statesFull room composition
Every primitive assembled into one live quote-editing room — top-bar LiveDocVersionIndicator + PresenceAvatarStack, MultiCursorOverlay over a faux quote doc, LiveTypingIndicator on labour line 3, FieldLockBanner on the total, sidebar RoomParticipantsPanel, PresenceActivityFeed, ReadReceiptTrail, share-link card and time-zone chips, with a CoEditConflictBanner mid-canvas and a LiveReactionPop floating from Sophie's cursor.
Review full composition