18:I[55681,["/_next/static/immutable/chunks/1q7k1nvjizi_i.js","/_next/static/immutable/chunks/0sgmws27aoy08.js","/_next/static/immutable/chunks/3p0fmpe2k-4lb.js","/_next/static/immutable/chunks/0l80r5okuahqf.js","/_next/static/immutable/chunks/3c32zafrm890c.js","/_next/static/immutable/chunks/0momrsrgy-ew6.js"],"default"] 19:T48af,"use client"; import { useEffect, useId, useRef, useState } from "react"; import { LayoutGroup, motion, type Transition } from "motion/react"; import "./chat-room.css"; /** * Chat Room — a stack of faces that morphs into a voice chat card. * * The pill and the card are one surface shared through a layout id, so a * click grows the card out of the pill's own centre: the faces on the pill fly * to their seats on the card, the hidden ones rise into the grid after them, * the live badge parks in the header corner and the "+3" travels in and * dissolves. Closing runs it backwards — the card's contents fade out first, * then the surface folds back into the pill. One spring drives every piece, so * they all land together. Each step has a soft synthesised sound. */ export type ChatRoomPerson = { id: string; name: string; /** Portrait URL. */ src: string; /** Shows the little equaliser on their face. */ speaking?: boolean; }; export type ChatRoomProps = { /** The open card's corner radius, 0–40px. */ corner?: number; /** How many faces the closed pill shows. */ rows?: 2 | 3 | 4; /** Who is in the room. Up to eight sit on the card's grid. */ people?: ChatRoomPerson[]; theme?: "light" | "dark"; /** The opening pop, the closing pop and the join and leave chimes. */ sound?: boolean; /** Fired when the join button is pressed, with whether you are now in. */ onJoinChange?: (joined: boolean) => void; }; const AVATARS = "/library/voice"; export const CHAT_ROOM_PEOPLE: ChatRoomPerson[] = [ { id: "oguz", name: "Oğuz", src: `${AVATARS}/oguz.webp`, speaking: true }, { id: "ashish", name: "Ashish", src: `${AVATARS}/ashish.webp` }, { id: "mariana", name: "Mariana", src: `${AVATARS}/mariana.webp` }, { id: "mds", name: "MDS", src: `${AVATARS}/mds.webp` }, { id: "ana", name: "Ana", src: `${AVATARS}/ana.webp` }, { id: "natko", name: "Natko", src: `${AVATARS}/natko.webp`, speaking: true }, { id: "afshin", name: "Afshin", src: `${AVATARS}/afshin.webp` }, ]; /* one spring drives the whole morph so every piece lands together */ const morph: Transition = { type: "spring", visualDuration: 0.42, bounce: 0.16 }; const fade = (delay = 0): Transition => ({ duration: 0.22, ease: [0.25, 0.1, 0.25, 1], delay }); const CONTENT_OUT_MS = 120; const out: Transition = { duration: CONTENT_OUT_MS / 1000, ease: [0.4, 0, 1, 1] }; const CARD_W = 300; const STAGE_H = 312; const PILL_RADIUS = 32; export default function ChatRoom({ corner = 20, rows = 4, people = CHAT_ROOM_PEOPLE, theme = "light", sound = true, onJoinChange, }: ChatRoomProps) { const [open, setOpen] = useState(false); const [joined, setJoined] = useState(false); /* closing: the card's contents fade out first, then the surface morphs back */ const [closing, setClosing] = useState(false); const rootRef = useRef(null); const pillRef = useRef(null); const refocus = useRef(false); const group = useId(); /* read at play time, so a sound already scheduled respects a fresh mute */ const soundOn = useRef(sound); soundOn.current = sound; const play = (cue: keyof typeof cues) => { if (soundOn.current) cues[cue](); }; const roster = people.slice(0, 8); const visible = Math.min(roster.length, Math.max(2, Math.min(4, Number(rows) || 4))); const hidden = roster.length - visible; const radius = Math.min(40, Math.max(0, corner)); const closeTimer = useRef(undefined); const close = (returnFocus: boolean) => { if (closeTimer.current) return; play("close"); refocus.current = returnFocus; setClosing(true); closeTimer.current = window.setTimeout(() => { closeTimer.current = undefined; setClosing(false); setOpen(false); }, CONTENT_OUT_MS); }; useEffect(() => () => window.clearTimeout(closeTimer.current), []); const openCard = () => { play("open"); setOpen(true); }; /* hand focus back to the pill after a keyboard / close-button dismissal */ useEffect(() => { if (!open && refocus.current) { refocus.current = false; pillRef.current?.focus({ preventScroll: true }); } }, [open]); /* * Escape or a press outside closes it. Page chrome marked data-keep-open * (a theme switch, a sound toggle) doesn't count as outside. */ useEffect(() => { if (!open) return; const onKey = (e: KeyboardEvent) => e.key === "Escape" && close(true); const onDown = (e: PointerEvent) => { const target = e.target as Element; if (rootRef.current?.contains(target) || target.closest?.("[data-keep-open]")) return; close(false); }; window.addEventListener("keydown", onKey); window.addEventListener("pointerdown", onDown); return () => { window.removeEventListener("keydown", onKey); window.removeEventListener("pointerdown", onDown); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [open]); return (

{/* A fixed stage: both states are centred in the same box, so the morph grows out of the pill's centre and never shifts what is around it. */}

{open ? ( ) : ( { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); openCard(); } }} className="pvc__pill" style={{ borderRadius: PILL_RADIUS }} > {roster.slice(0, visible).map((p, i) => ( ))} {hidden > 0 && ( +{hidden} )} )}

); } function CardMember({ person, index, extra, order, closing, }: { person: ChatRoomPerson; index: number; extra: boolean; order: number; closing: boolean; }) { return (

{person.speaking && ( )} {person.name}

); } function Avatar({ person }: { person: ChatRoomPerson }) { return ( // eslint-disable-next-line @next/next/no-img-element {person.name}

); } /* lucide: chevron-down */ function Chevron() { return ( ); } /* text that rolls up when it changes; give it a new key to trigger the roll */ function Swap({ distance, children }: { distance: number; children: string }) { return ( {children} ); } /* * The equaliser on the speaking faces and the live badge — transform only, so * the bars run on the compositor and never touch layout. */ const barPattern = [ { h: [0.35, 1, 0.5, 0.8, 0.35], d: 1.1 }, { h: [0.7, 0.3, 1, 0.45, 0.7], d: 0.9 }, { h: [0.5, 0.9, 0.3, 1, 0.5], d: 1.25 }, { h: [0.9, 0.45, 0.75, 0.3, 0.9], d: 1.0 }, ]; function Bars({ size }: { size: "sm" | "lg" }) { return ( ); } /* ── sound: synthesised with Web Audio, no files ─────────────────────────── */ let ctx: AudioContext | null = null; let master: GainNode | null = null; let noise: AudioBuffer | null = null; function audio() { if (typeof window === "undefined") return null; if (!ctx) { const Ctor = window.AudioContext ?? (window as unknown as { webkitAudioContext?: typeof AudioContext }).webkitAudioContext; if (!Ctor) return null; ctx = new Ctor(); master = ctx.createGain(); master.gain.value = 0.55; /* a gentle compressor so stacked tones never clip */ const comp = ctx.createDynamicsCompressor(); comp.threshold.value = -18; comp.ratio.value = 4; master.connect(comp).connect(ctx.destination); /* one shared buffer of white noise for every swish */ const len = Math.ceil(ctx.sampleRate * 0.3); noise = ctx.createBuffer(1, len, ctx.sampleRate); const data = noise.getChannelData(0); for (let i = 0; i < len; i++) data[i] = Math.random() * 2 - 1; } /* browsers start the context suspended until a gesture */ if (ctx.state === "suspended") void ctx.resume(); return ctx; } type Tone = { from: number; to?: number; at?: number; dur: number; gain: number; type?: OscillatorType; attack?: number }; function tone(ac: AudioContext, { from, to = from, at = 0, dur, gain, type = "sine", attack = 0.006 }: Tone) { const t = ac.currentTime + at; const osc = ac.createOscillator(); const env = ac.createGain(); osc.type = type; osc.frequency.setValueAtTime(from, t); if (to !== from) osc.frequency.exponentialRampToValueAtTime(to, t + dur * 0.6); env.gain.setValueAtTime(0.0001, t); env.gain.exponentialRampToValueAtTime(gain, t + attack); env.gain.exponentialRampToValueAtTime(0.0001, t + dur); osc.connect(env).connect(master!); osc.start(t); osc.stop(t + dur + 0.02); } /* a short band-passed noise swish — the air moving as the card morphs */ function swish(ac: AudioContext, { from, to, dur, gain }: { from: number; to: number; dur: number; gain: number }) { if (!noise) return; const t = ac.currentTime; const src = ac.createBufferSource(); src.buffer = noise; const band = ac.createBiquadFilter(); band.type = "bandpass"; band.Q.value = 1.2; band.frequency.setValueAtTime(from, t); band.frequency.exponentialRampToValueAtTime(to, t + dur); const env = ac.createGain(); env.gain.setValueAtTime(0.0001, t); env.gain.exponentialRampToValueAtTime(gain, t + dur * 0.35); env.gain.exponentialRampToValueAtTime(0.0001, t + dur); src.connect(band).connect(env).connect(master!); src.start(t); src.stop(t + dur + 0.02); } const cues = { /* pill → card: a rising glassy pop with a sparkle on top */ open() { const ac = audio(); if (!ac) return; swish(ac, { from: 900, to: 3200, dur: 0.22, gain: 0.05 }); tone(ac, { from: 420, to: 760, dur: 0.16, gain: 0.32 }); tone(ac, { from: 1520, at: 0.05, dur: 0.18, gain: 0.06 }); }, /* card → pill: the same gesture played backwards, slightly lower */ close() { const ac = audio(); if (!ac) return; swish(ac, { from: 2600, to: 700, dur: 0.2, gain: 0.04 }); tone(ac, { from: 700, to: 360, dur: 0.15, gain: 0.3 }); tone(ac, { from: 160, to: 110, dur: 0.12, gain: 0.12 }); }, /* joined: two bright notes up a fifth, like a channel join */ join() { const ac = audio(); if (!ac) return; tone(ac, { from: 587.33, dur: 0.32, gain: 0.22, type: "triangle" }); tone(ac, { from: 1174.66, dur: 0.22, gain: 0.04 }); tone(ac, { from: 880, at: 0.09, dur: 0.42, gain: 0.24, type: "triangle" }); tone(ac, { from: 1760, at: 0.09, dur: 0.3, gain: 0.05 }); }, /* left: the chime mirrored downward */ leave() { const ac = audio(); if (!ac) return; tone(ac, { from: 880, dur: 0.28, gain: 0.2, type: "triangle" }); tone(ac, { from: 587.33, at: 0.09, dur: 0.38, gain: 0.22, type: "triangle" }); }, }; 1a:T1b21,/* =========================================================================== Chat Room. A pill of faces and the voice chat card it opens into, drawn as one surface. Everything is themed through the tokens below; the dark set swaps in on data-theme="dark". =========================================================================== */ .pvc { --pvc-surface: #ffffff; --pvc-surface-2: #f6f6f7; --pvc-line: rgb(0 0 0 / 0.06); --pvc-muted: #6b6b73; --pvc-subtle: #a3a3ab; --pvc-chip: #ececef; --pvc-chip-hover: #e2e2e6; --pvc-btn-top: #3a3a3d; --pvc-btn-bottom: #0d0d0e; --pvc-btn-text: #ffffff; --pvc-btn-shadow: rgb(0 0 0 / 0.5); --pvc-badge: #18181b; --pvc-badge-ink: #ffffff; --pvc-ring: rgb(0 0 0 / 0.07); --pvc-shadow: 0 0 0 1px rgb(0 0 0 / 0.05), 0 12px 28px -10px rgb(0 0 0 / 0.16), 0 2px 6px -2px rgb(0 0 0 / 0.06); display: flex; justify-content: center; color: var(--pvc-muted); font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; } .pvc[data-theme="dark"] { --pvc-surface: #1a1a1d; --pvc-surface-2: #202024; --pvc-line: rgb(255 255 255 / 0.06); --pvc-muted: #a1a1aa; --pvc-subtle: #6b6b73; --pvc-chip: #2a2a2f; --pvc-chip-hover: #34343a; --pvc-btn-top: #fafafa; --pvc-btn-bottom: #d6d6da; --pvc-btn-text: #0c0c0d; --pvc-btn-shadow: rgb(0 0 0 / 0.7); --pvc-badge: #f4f4f5; --pvc-badge-ink: #18181b; --pvc-ring: rgb(255 255 255 / 0.08); --pvc-shadow: 0 0 0 1px rgb(255 255 255 / 0.07), 0 16px 36px -12px rgb(0 0 0 / 0.7), 0 2px 6px -2px rgb(0 0 0 / 0.4); } .pvc *, .pvc *::before, .pvc *::after { box-sizing: border-box; } .pvc__stage { display: grid; place-items: center; flex: none; } /* --- the two faces of the one surface ----------------------------------- */ .pvc__card { position: relative; overflow: hidden; background: var(--pvc-surface); box-shadow: var(--pvc-shadow); transition: background-color 0.35s ease, box-shadow 0.35s ease; } .pvc__pill { position: relative; display: flex; align-items: center; padding: 6px 14px 6px 6px; background: var(--pvc-surface); box-shadow: var(--pvc-shadow); cursor: pointer; outline: none; user-select: none; -webkit-user-select: none; transition: background-color 0.35s ease, box-shadow 0.35s ease; } .pvc__pill:focus-visible { outline: 2px solid var(--pvc-subtle); outline-offset: 3px; } /* --- the live badge ------------------------------------------------------ */ .pvc__badge { position: absolute; display: grid; place-items: center; width: 28px; height: 28px; background: var(--pvc-badge); pointer-events: none; } .pvc__badge--card { top: 4px; left: 8px; z-index: 10; } .pvc__badge--pill { top: -8px; left: -8px; z-index: 20; box-shadow: 0 0 0 3px var(--pvc-surface); } .pvc__bars { display: flex; align-items: center; } .pvc__bars--lg { height: 12px; gap: 2px; } .pvc__bars--sm { height: 8px; gap: 1.5px; } .pvc__bar { display: block; height: 100%; border-radius: 999px; } .pvc__bars--lg .pvc__bar { width: 2px; background: var(--pvc-badge-ink); } .pvc__bars--sm .pvc__bar { width: 1.5px; background: var(--pvc-muted); } /* --- "+3" ------------------------------------------------------------------ */ .pvc__more { display: flex; align-items: center; gap: 2px; color: var(--pvc-subtle); font-size: 15px; font-variant-numeric: tabular-nums; line-height: 1.4; transition: color 0.2s ease; } .pvc__more--card { position: absolute; top: 62px; right: 16px; pointer-events: none; } .pvc__more--pill { margin-left: 8px; } .pvc__pill:hover .pvc__more--pill { color: var(--pvc-muted); } .pvc__chevron { width: 15px; height: 15px; transition: transform 0.3s ease; } .pvc__pill:hover .pvc__chevron { transform: translateY(1px); } /* --- faces ----------------------------------------------------------------- */ .pvc__seat { position: relative; } .pvc__seat--overlap { margin-left: -6px; } .pvc__avatar { display: block; width: 46px; height: 46px; border: 2.5px solid var(--pvc-surface); border-radius: 999px; background: var(--pvc-chip); object-fit: cover; box-shadow: 0 0 0 1px var(--pvc-ring), 0 2px 5px rgb(0 0 0 / 0.08); user-select: none; -webkit-user-select: none; transition: border-color 0.35s ease; } /* --- the card -------------------------------------------------------------- */ .pvc__head { position: relative; display: flex; align-items: center; justify-content: center; height: 36px; border-bottom: 1px solid var(--pvc-line); background: var(--pvc-surface-2); transition: background-color 0.35s ease; } .pvc__title { color: var(--pvc-muted); font-size: 14px; font-weight: 500; letter-spacing: -0.01em; } .pvc__close { position: absolute; right: 8px; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 999px; background: var(--pvc-chip); color: var(--pvc-subtle); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .pvc__close:hover { background: var(--pvc-chip-hover); color: var(--pvc-muted); } .pvc__close:focus-visible { outline: 2px solid var(--pvc-subtle); outline-offset: 2px; } .pvc__close svg { width: 12px; height: 12px; } .pvc__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 14px; margin: 0; padding: 16px 12px 0; list-style: none; } .pvc__member { display: flex; flex-direction: column; align-items: center; } .pvc__speaking { position: absolute; top: -4px; right: -6px; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 999px; background: var(--pvc-surface); box-shadow: 0 0 0 1px var(--pvc-ring), 0 2px 4px rgb(0 0 0 / 0.1); } .pvc__name { margin-top: 4px; color: var(--pvc-muted); font-size: 13px; letter-spacing: -0.01em; line-height: 1.4; white-space: nowrap; } .pvc__foot { padding: 20px 14px 14px; } .pvc__join { position: relative; display: block; width: 100%; height: 40px; overflow: hidden; padding: 0; border: 0; border-radius: 11px; background: linear-gradient(180deg, var(--pvc-btn-top) 0%, var(--pvc-btn-bottom) 100%); box-shadow: 0 8px 16px -8px var(--pvc-btn-shadow), inset 0 1px 0 rgb(255 255 255 / 0.14); color: var(--pvc-btn-text); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; } .pvc__join:focus-visible { outline: 2px solid var(--pvc-subtle); outline-offset: 2px; } .pvc__note { position: relative; height: 16px; margin-top: 10px; overflow: hidden; color: var(--pvc-subtle); font-size: 12px; line-height: 16px; text-align: center; } .pvc__swap { display: block; } 10:[[["$","script","0",{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"SoftwareSourceCode\",\"name\":\"Chat Room — Pin UI\",\"description\":\"A stack of faces that morphs into a voice chat card, and back. A pill of faces that grows into a voice chat card. The faces fly to their seats, the hidden ones rise into the grid after them, the live badge parks in the corner and the count dissolves on the way in — then the whole thing folds back in\",\"url\":\"https://www.pinui.xyz/components/chat-room\",\"codeRepository\":\"https://github.com/Rachit315/Pin-UI\",\"programmingLanguage\":\"TypeScript\",\"runtimePlatform\":\"React\",\"author\":{\"@id\":\"https://www.pinui.xyz/#organization\"},\"isPartOf\":{\"@id\":\"https://www.pinui.xyz/#software\"},\"license\":\"https://opensource.org/licenses/MIT\"}"}}],["$","script","1",{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https://www.pinui.xyz\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Components\",\"item\":\"https://www.pinui.xyz/components\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Chat Room\",\"item\":\"https://www.pinui.xyz/components/chat-room\"}]}"}}]],["$","$L18",null,{"entry":{"slug":"chat-room","requestedBy":{"handle":"hrstwt","url":"https://x.com/hrstwt"},"category":"lists","name":"Chat Room","isNew":true,"tagline":"A stack of faces that morphs into a voice chat card, and back.","blurb":"A pill of faces that grows into a voice chat card. The faces fly to their seats, the hidden ones rise into the grid after them, the live badge parks in the corner and the count dissolves on the way in — then the whole thing folds back into the pill. One spring drives every piece, so they all land together, each step with its own soft synthesised sound.","highlights":["Shared-surface morph","Faces fly to their seats","Live equaliser badges","Synthesised UI sounds"],"clip":"/clips/loop/chat-room.mp4","poster":"/clips/loop/chat-room.jpg","hero":false,"sound":true,"zoom":1,"stage":"#f5f5f6","clipStage":"#f5f5f6","spill":true,"stageDark":"#0c0c0d","usage":"import ChatRoom from \"@/components/library/ChatRoom\";\n\n console.log(joined)} />","props":[{"name":"corner","type":"number","fallback":"20","note":"The open card's corner radius, clamped to 0–40px."},{"name":"rows","type":"2 | 3 | 4","fallback":"4","note":"How many faces the closed pill shows; the rest are counted as \"+3\"."},{"name":"people","type":"ChatRoomPerson[]","fallback":"seven people","note":"Who is in the room — id, name, portrait URL and whether they are speaking. Up to eight sit on the card."},{"name":"theme","type":"\"light\" | \"dark\"","fallback":"\"light\"","note":"A white card on soft grey, or graphite on near-black."},{"name":"sound","type":"boolean","fallback":"true","note":"The opening and closing pops and the join and leave chimes, synthesised at play time."},{"name":"onJoinChange","type":"(joined) => void","note":"Fired when the join button is pressed, with whether you are now in."}],"files":[{"name":"ChatRoom.tsx","lang":"tsx"},{"name":"chat-room.css","lang":"css"}],"info":{"paragraphs":["The pill and the card are one surface, shared through a layout id, inside a fixed stage — so the card grows out of the pill's own centre and nothing around it moves. The faces on the pill fly to their seats on the card, the hidden ones rise into the grid after them on a short stagger, the live badge parks in the header corner and the \"+3\" travels in and dissolves.","Closing runs it backwards: the card's contents fade out first, then the surface folds back into the pill and focus returns to it. Escape or a press outside closes it. Every equaliser bar animates by transform only, so nothing touches layout, and the sounds — a rising pop to open, a falling one to close, a two-note chime to join and its mirror to leave — are synthesised with Web Audio, with no files to load."]},"origin":{"label":"chat-room"}},"panes":[{"name":"ChatRoom.tsx","lang":"tsx","code":"$19"},{"name":"chat-room.css","lang":"css","code":"$1a"}],"registryUrl":"https://www.pinui.xyz/r/chat-room.json"}]]

Chat Room — Pin UI Component