"use client"; import type React from "react"; import { useEffect, useId, useLayoutEffect, useRef, useState } from "react"; import { flushSync } from "react-dom"; import { animate, stagger } from "motion/react"; import "./add-member.css"; /* ------------------------------------------------------------------ props -- */ export type MemberStatus = "online" | "idle" | "dnd" | "offline"; export type Member = { name: string; role: string; /** Portrait URL. Square works best; it is cropped to a circle. */ img: string; status: MemberStatus; /** A blue ring around the avatar. */ ring?: boolean; }; export type AddMemberProps = { /** Card radius, clamped to 0–40px. The blue shell adds 12 to it. */ corner?: number; /** People per page: 2, 3 or 4. */ rows?: 2 | 3 | 4 | "2" | "3" | "4"; /** "light" or "dark". The blue shell stays blue in both. */ theme?: "light" | "dark"; /** Start expanded rather than as a single header. */ open?: boolean; /** The people on the list. */ members?: Member[]; /** Fired with the chosen names when "Add to Project" is pressed. */ onAdd?: (names: string[]) => void; /** A field at the top of the list that filters it by name or role. */ search?: boolean; }; /* ---------------------------------------------------------------- motion -- */ /* one easing language: ease-out everywhere, spring where it should feel alive */ const EASE = [0.22, 1, 0.36, 1] as const; const OUT = { duration: 0.42, ease: EASE }; const QUICK = { duration: 0.22, ease: EASE }; const SPRING = { type: "spring", stiffness: 320, damping: 30, mass: 0.9 } as const; const SNAP = { type: "spring", stiffness: 650, damping: 24, mass: 0.6 } as const; const MAX_CHIPS = 4; /* a hidden tab freezes animation frames, so a sequence never waits on one forever */ const settle = (anim: { then: (resolve: () => void) => unknown }, ms: number) => Promise.race([ new Promise((resolve) => { anim.then(resolve); }), new Promise((resolve) => setTimeout(resolve, ms)), ]); /* ...and once an animation has had its time, its end state is written down */ function commit(el: HTMLElement | SVGElement | null | undefined, styles: Partial) { if (el) Object.assign(el.style, styles); } const DEFAULT_MEMBERS: Member[] = [ { name: "Alex Turner", role: "User Interface Specialist", img: "https://randomuser.me/api/portraits/women/44.jpg", status: "online" }, { name: "Mia Johnson", role: "Digital Experience Designer", img: "https://randomuser.me/api/portraits/men/32.jpg", status: "idle", ring: true }, { name: "Ethan Brown", role: "Interactive Media Designer", img: "https://randomuser.me/api/portraits/men/75.jpg", status: "dnd", ring: true }, { name: "Sophia Davis", role: "Visual Web Architect", img: "https://randomuser.me/api/portraits/women/68.jpg", status: "offline" }, { name: "Liam Carter", role: "Motion Systems Lead", img: "https://randomuser.me/api/portraits/men/12.jpg", status: "online" }, { name: "Ava Mitchell", role: "Product Design Engineer", img: "https://randomuser.me/api/portraits/women/21.jpg", status: "dnd", ring: true }, { name: "Noah Bennett", role: "Brand Interaction Designer", img: "https://randomuser.me/api/portraits/men/54.jpg", status: "idle" }, { name: "Isla Moreno", role: "Design Systems Architect", img: "https://randomuser.me/api/portraits/women/9.jpg", status: "online", ring: true }, ]; const STATUS_LABEL: Record = { online: "Online", idle: "Idle", dnd: "Do not disturb", offline: "Offline", }; const Chevron = ({ d }: { d: string }) => ( ); /** The part of `text` that matches the search, marked; the rest as it was. */ function Highlight({ text, query }: { text: string; query: string }) { const q = query.trim(); if (!q) return <>{text}; const at = text.toLowerCase().indexOf(q.toLowerCase()); if (at < 0) return <>{text}; return ( <> {text.slice(0, at)} {text.slice(at, at + q.length)} {text.slice(at + q.length)} ); } /** A portrait that fades in once it has actually loaded. */ function Photo({ src, alt, className }: { src: string; alt: string; className: string }) { const [state, setState] = useState<"loading" | "ready" | "broken">("loading"); const ref = useRef(null); /* a cached image can finish before React attaches the listener */ useEffect(() => { const img = ref.current; if (img?.complete && img.naturalWidth) setState("ready"); }, [src]); return ( {alt}

setState("ready")} onError={() => setState("broken")} /> ); } /* -------------------------------------------------------------- component -- */ /** * Pick people for a project. * * The header springs the list open; each row's toggle fills with a gooey drop * that turns its plus into a minus, and the face flies from the row into the * stack of chosen people above "Add to Project". The pager turns the list a * page at a time. * * React owns what is on the list and who is chosen; Motion owns every * movement. Each sequence writes its end state down once it has had its time, * so a background tab can never leave the card half-open. */ export default function AddMember({ corner = 20, rows = 4, theme = "light", open: startOpen = false, members = DEFAULT_MEMBERS, onAdd, search = true, }: AddMemberProps) { const gooId = `pmem-goo-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`; const radius = Math.min(40, Math.max(0, Number(corner))); const perPage = Math.min(4, Math.max(2, Number(rows) || 4)); const [query, setQuery] = useState(""); /* who the search lets through, as indices into `members` — the ids everything else uses */ const needle = query.trim().toLowerCase(); const matches = members .map((person, id) => ({ person, id })) .filter( ({ person }) => !needle || person.name.toLowerCase().includes(needle) || person.role.toLowerCase().includes(needle), ); const pages = Math.max(1, Math.ceil(matches.length / perPage)); const [page, setPage] = useState(0); const [picked, setPicked] = useState([]); const [isOpen, setIsOpen] = useState(Boolean(startOpen)); const [confirming, setConfirming] = useState(false); const [added, setAdded] = useState(0); const shellRef = useRef(null); const chevronRef = useRef(null); const bodyRef = useRef(null); const listRef = useRef(null); const barRef = useRef(null); const stackRef = useRef(null); const countRef = useRef(null); const ctaRef = useRef(null); const checkRef = useRef(null); const flyRef = useRef(null); const searchRef = useRef(null); const pickedRef = useRef(picked); pickedRef.current = picked; const openRef = useRef(isOpen); openRef.current = isOpen; const busyRef = useRef(false); const confirmingRef = useRef(false); const barShownRef = useRef(false); const paintIdRef = useRef(0); /* the direction the next page arrives from, read once it has rendered */ const enterRef = useRef<{ direction: number; delay: number } | null>(null); const onAddRef = useRef(onAdd); onAddRef.current = onAdd; const slice = matches.slice(page * perPage, page * perPage + perPage); /* ---------------------------------------------------------------- toggle */ function setToggle(btn: HTMLElement, on: boolean, animated = true) { const fill = btn.querySelector(".pmem__fill"); const sign = btn.querySelector(".pmem__sign"); const barV = btn.querySelector(".pmem__barV"); const ring = btn.querySelector(".pmem__ring"); const blobs = btn.querySelectorAll(".pmem__blob"); if (!fill || !sign || !barV || !ring) return; btn.classList.toggle("is-on", on); btn.setAttribute("aria-pressed", String(on)); const t = animated ? OUT : { duration: 0 }; /* the liquid fill grows from the centre, gooey-merged with the two blobs */ animate(fill, { scale: on ? 1 : 0, opacity: on ? 1 : 0 }, animated ? SPRING : { duration: 0 }); animate(ring, { opacity: on ? 0 : 1, scale: on ? 0.82 : 1 }, t); /* plus to minus: the upright bar folds away while the sign turns half a circle */ animate(barV, { scaleY: on ? 0 : 1, opacity: on ? 0 : 1 }, t); animate(sign, { rotate: on ? 180 : 0 }, t); const tokenKey = "pmemToken"; const token = String(Number(btn.dataset[tokenKey] ?? 0) + 1); btn.dataset[tokenKey] = token; const land = () => { if (btn.dataset[tokenKey] !== token) return; commit(fill, { transform: on ? "scale(1)" : "scale(0)", opacity: on ? "1" : "0" }); commit(ring, { transform: on ? "scale(0.82)" : "scale(1)", opacity: on ? "0" : "1" }); commit(barV, { transform: on ? "scaleY(0)" : "scaleY(1)", opacity: on ? "0" : "1" }); commit(sign, { transform: on ? "rotate(180deg)" : "rotate(0deg)" }); blobs.forEach((b) => commit(b, { opacity: "0" })); }; if (!animated) { land(); return; } setTimeout(land, 800); if (on) { blobs.forEach((b, i) => { const dir = i === 0 ? -1 : 1; animate( b, { opacity: [1, 1, 0], scale: [0.2, 0.6, 0.1], x: [0, dir * 15, 0], y: [0, dir * -11, 0] }, { duration: 0.56, ease: "easeOut", delay: i * 0.04 }, ); }); } } /* --------------------------------------------------------- selected bar */ function barHeight() { const bar = barRef.current; if (!bar) return 0; const prev = bar.style.height; bar.style.height = "auto"; const h = bar.scrollHeight; bar.style.height = prev; return h; } async function showBar() { const bar = barRef.current; if (!bar || barShownRef.current) return; barShownRef.current = true; const anim = animate(bar, { height: [0, barHeight()], opacity: [0, 1] }, { ...OUT, duration: 0.34 }); /* committed when it really ends, so its last frame cannot pin a fixed height */ const done = () => barShownRef.current && commit(bar, { height: "auto", opacity: "1" }); void anim.then(done); setTimeout(done, 900); await settle(anim, 600); } async function hideBar() { const bar = barRef.current; if (!bar || !barShownRef.current) return; barShownRef.current = false; const anim = animate(bar, { height: [bar.offsetHeight, 0], opacity: [1, 0] }, { ...OUT, duration: 0.3 }); const done = () => !barShownRef.current && commit(bar, { height: "0px", opacity: "0" }); void anim.then(done); setTimeout(done, 900); await settle(anim, 600); } /* the picked face flies from its row into the selected stack */ function flyToStack(avatar: HTMLElement, targetId: number) { const stack = stackRef.current; const shell = shellRef.current; const layer = flyRef.current; if (!stack || !shell || !layer) return; const target = stack.querySelector(`.pmem__chip[data-id="${targetId}"]`) ?? stack.querySelector(".pmem__more"); if (!target) return; const base = shell.getBoundingClientRect(); const from = avatar.getBoundingClientRect(); const to = target.getBoundingClientRect(); if (!to.width) return; target.style.opacity = "0"; const clone = document.createElement("span"); clone.className = "pmem__ghost"; clone.style.left = `${from.left - base.left}px`; clone.style.top = `${from.top - base.top}px`; clone.style.width = `${from.width}px`; clone.style.height = `${from.width}px`; const img = document.createElement("img"); img.src = avatar.querySelector("img")?.src ?? ""; img.alt = ""; clone.appendChild(img); layer.appendChild(clone); const dx = to.left + to.width / 2 - (from.left + from.width / 2); const dy = to.top + to.height / 2 - (from.top + from.height / 2); const scale = to.width / from.width; let landed = false; const land = () => { if (landed) return; landed = true; clone.remove(); target.style.opacity = ""; animate(target, { scale: [0.2, 1], opacity: [0, 1] }, SNAP); setTimeout(() => commit(target, { transform: "", opacity: "" }), 700); if (countRef.current) animate(countRef.current, { opacity: [0.4, 1], y: [4, 0] }, QUICK); }; const flight = animate( clone, { x: [0, dx * 0.55, dx], y: [0, dy * 0.45 - 22, dy], scale: [1, 0.8, scale], opacity: [1, 1, 0.95] }, { duration: 0.52, ease: EASE }, ); void settle(flight, 900).then(land); } async function addToStack(id: number, avatar: HTMLElement) { if (pickedRef.current.includes(id)) return; /* rendered now, so the stack holds the new chip before anything is measured */ flushSync(() => setPicked((list) => [...list, id])); await showBar(); flyToStack(avatar, id); } function removeFromStack(id: number) { const chip = stackRef.current?.querySelector(`.pmem__chip[data-id="${id}"]`); const drop = () => { const next = pickedRef.current.filter((x) => x !== id); flushSync(() => setPicked(next)); if (!next.length) void hideBar(); else { const chips = stackRef.current?.querySelectorAll(".pmem__chip"); if (chips?.length) animate(chips, { scale: [0.88, 1], opacity: [0.4, 1] }, QUICK); } }; if (!chip) { drop(); return; } void settle(animate(chip, { scale: 0.2, opacity: 0, y: 8 }, QUICK), 500).then(drop); } function onToggle(id: number, btn: HTMLElement, avatar: HTMLElement) { if (confirmingRef.current) return; const on = !pickedRef.current.includes(id); setToggle(btn, on); if (on) void addToStack(id, avatar); else removeFromStack(id); } /* ------------------------------------------------------- add to project */ async function confirmAdd() { const list = pickedRef.current; if (confirmingRef.current || !list.length) return; confirmingRef.current = true; setConfirming(true); setAdded(list.length); const cta = ctaRef.current; if (cta) animate(cta, { scale: [1, 0.94, 1.03, 1] }, { duration: 0.5, ease: EASE }); if (checkRef.current) animate(checkRef.current, { scale: [0, 1], rotate: [-25, 0] }, SNAP); const chips = stackRef.current?.querySelectorAll(".pmem__chip"); if (chips?.length) animate(chips, { y: [0, -6, 0] }, { duration: 0.45, ease: EASE, delay: stagger(0.05) }); onAddRef.current?.(list.map((i) => members[i]?.name ?? "")); await new Promise((resolve) => setTimeout(resolve, 1500)); /* reset: every row springs back to a plus, the bar folds away */ listRef.current?.querySelectorAll(".pmem__toggle.is-on").forEach((btn) => setToggle(btn, false)); await hideBar(); setPicked([]); confirmingRef.current = false; setConfirming(false); } /* ------------------------------------------------------- open / collapse */ function measure() { const body = bodyRef.current; if (!body) return 0; const prev = body.style.height; body.style.height = "auto"; const h = body.scrollHeight; body.style.height = prev; return h; } function enterRows(direction = 1, delay = 0) { const rowsEls = Array.from(listRef.current?.querySelectorAll(".pmem__row") ?? []); if (!rowsEls.length) return; const token = ++paintIdRef.current; animate(rowsEls, { opacity: [0, 1], x: [direction * 18, 0], y: [12, 0] }, { ...OUT, delay: stagger(0.06, { startDelay: delay }) }); setTimeout(() => { if (token !== paintIdRef.current) return; rowsEls.forEach((r) => commit(r, { opacity: "", transform: "" })); }, 1000 + delay * 1000); } async function setOpen(next: boolean) { const body = bodyRef.current; if (!body || busyRef.current || next === openRef.current) return; openRef.current = next; setIsOpen(next); if (chevronRef.current) animate(chevronRef.current, { rotate: next ? 0 : 180 }, OUT); busyRef.current = true; const full = measure(); if (next) { animate(body, { opacity: 1 }, QUICK); enterRows(1, 0.06); const anim = animate(body, { height: [0, full] }, SPRING); const done = () => openRef.current && commit(body, { height: "auto", opacity: "1" }); void anim.then(done); setTimeout(done, 1400); await settle(anim, 800); } else { const rowsEls = listRef.current?.querySelectorAll(".pmem__row"); if (rowsEls?.length) animate(rowsEls, { opacity: 0, y: -8 }, { duration: 0.18, ease: EASE }); const anim = animate(body, { height: [full, 0], opacity: [1, 0] }, { ...OUT, duration: 0.36 }); const done = () => !openRef.current && commit(body, { height: "0px", opacity: "0" }); void anim.then(done); setTimeout(done, 900); await settle(anim, 600); } busyRef.current = false; } /* every toggle on screen straight to its state, without animating */ function syncToggles() { listRef.current?.querySelectorAll(".pmem__row").forEach((row) => { const btn = row.querySelector(".pmem__toggle"); if (btn) setToggle(btn, pickedRef.current.includes(Number(row.dataset.id)), false); }); } /* ---------------------------------------------------------------- search */ /* * The list changes length as you type, so the card would jump. It is * measured either side of the change and sprung between the two, the same * way it opens; the rows that are new slide in. */ function onQuery(next: string) { const body = bodyRef.current; const from = openRef.current && body ? body.offsetHeight : null; flushSync(() => { setQuery(next); setPage(0); }); syncToggles(); enterRows(1); if (!body || from === null) return; const to = measure(); if (Math.abs(to - from) < 1) return; const anim = animate(body, { height: [from, to] }, SPRING); const done = () => openRef.current && commit(body, { height: "auto" }); void anim.then(done); setTimeout(done, 1000); } /* ----------------------------------------------------------------- pages */ async function turn(direction: number) { if (busyRef.current || confirmingRef.current || pages < 2) return; if (!openRef.current) { void setOpen(true); return; } busyRef.current = true; const rowsEls = listRef.current?.querySelectorAll(".pmem__row"); if (rowsEls?.length) { await settle( animate( rowsEls, { opacity: 0, x: -direction * 18 }, { duration: 0.2, ease: EASE, delay: stagger(0.03, { from: direction > 0 ? "first" : "last" }) }, ), 500, ); } enterRef.current = { direction, delay: 0 }; setPage((p) => (p + direction + pages) % pages); busyRef.current = false; } /* * A page has rendered. Its toggles are set to their state without animating * — a row arriving already chosen shows its minus, it does not fill again — * and then the rows come in from the side the list was turned toward. */ useLayoutEffect(() => { syncToggles(); const pending = enterRef.current; if (!pending) return; enterRef.current = null; enterRows(pending.direction, pending.delay); }, [page]); /* ----------------------------------------------------------------- mount */ useLayoutEffect(() => { const bar = barRef.current; const body = bodyRef.current; const shell = shellRef.current; if (!bar || !body || !shell) return; commit(bar, { height: "0px", opacity: "0" }); commit(body, { height: openRef.current ? "auto" : "0px", opacity: openRef.current ? "1" : "0" }); if (chevronRef.current) chevronRef.current.style.transform = openRef.current ? "none" : "rotate(180deg)"; animate(shell, { opacity: [0, 1], y: [24, 0], scale: [0.96, 1] }, { ...OUT, duration: 0.5 }); /* never leave the card invisible if the entrance never got a frame */ const rescue = setTimeout(() => commit(shell, { opacity: "1", transform: "" }), 900); if (openRef.current) enterRows(1, 0.12); return () => clearTimeout(rescue); }, []); /* ----------------------------------------------------------------- press */ const pressProps = (down: Record, up: Record = { scale: 1 }) => ({ onPointerDown: (event: React.PointerEvent) => { if (event.button === 0) animate(event.currentTarget, down, SNAP); }, onPointerUp: (event: React.PointerEvent) => animate(event.currentTarget, up, SNAP), onPointerLeave: (event: React.PointerEvent) => animate(event.currentTarget, up, SNAP), onPointerCancel: (event: React.PointerEvent) => animate(event.currentTarget, up, SNAP), }); const shown = picked.slice(0, MAX_CHIPS); const rest = picked.length - shown.length; const bodyId = `${gooId}-body`; return (

{/* the gooey filter the +/- toggles are drawn through */}

{search && (

onQuery(event.target.value)} onKeyDown={(event) => { if (event.key === "Escape" && query) { event.preventDefault(); onQuery(""); } /* there is nothing to submit; Enter must not reach a form around it */ if (event.key === "Enter") event.preventDefault(); }} /> {query && ( )}

)}

No one matches “{query.trim()}”
{ const row = event.currentTarget; const btn = row.querySelector(".pmem__toggle"); const avatar = row.querySelector(".pmem__avatar"); if (btn && avatar) onToggle(id, btn, avatar); }} >

{shown.map((id) => ( {members[id]?.name

))} {rest > 0 && +{rest}}

{picked.length ? `${picked.length} selected` : ""}

); }

Add Member — Pin UI Component