{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"waitlist-join","type":"registry:component","title":"Waitlist join","description":"Drops your face into a real queue and rolls out your place in line.","author":"Yash Bavadiya ","dependencies":["motion"],"registryDependencies":["utils"],"files":[{"path":"components/waitlist-join.tsx","type":"registry:component","content":"\"use client\";\n\nimport { useEffect, useId, useRef, useState } from \"react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { useReducedMotion } from \"@/hooks/use-reduced-motion\";\nimport Image from \"next/image\";\nimport { cn } from \"@/lib/utils\";\n\nexport type QueuePerson = { id: string; name: string; avatar?: string };\n\n// Nine faces fill the strip on a desktop. On a phone the front few slide\n// under the left fade, which reads as the line carrying on.\nconst SLOTS = 9;\nconst EASE_OUT = [0.23, 1, 0.32, 1] as const;\n// People shuffling along a line: slower than a UI transition so the eye can\n// follow who moved where, with a little settle as each one stops.\nconst SHUFFLE = { type: \"spring\", visualDuration: 0.45, bounce: 0.15 } as const;\n// Your face drops into its slot and lands with a small bounce.\nconst DROP = { type: \"spring\", visualDuration: 0.4, bounce: 0.3 } as const;\n// Long enough to show a real request is in flight, short enough not to wait on.\nconst JOIN_MS = 650;\n\n\nfunction problem(raw: string) {\n const email = raw.trim();\n if (!email) return \"Enter your email to join.\";\n if (/\\s/.test(email)) return \"Emails cannot contain spaces.\";\n const at = email.lastIndexOf(\"@\");\n if (at === -1) return \"Add an @ and a domain, like sam@studio.com.\";\n if (at === 0) return \"Add your name before the @.\";\n const domain = email.slice(at + 1);\n if (!domain) return \"Add the domain after the @, like gmail.com.\";\n if (!/\\.[^.]{2,}$/.test(domain)) {\n return `Finish the domain, like @${domain.replace(/\\.+$/, \"\")}.com.`;\n }\n return \"\";\n}\n\n// A short, stable referral link from the address, no server needed.\nfunction referral(email: string, base: string) {\n const local = email.split(\"@\")[0].toLowerCase().replace(/[^a-z0-9]/g, \"\");\n let hash = 0;\n for (const char of email) hash = (hash * 31 + char.charCodeAt(0)) >>> 0;\n return `${base}/${local.slice(0, 12) || \"friend\"}-${hash.toString(36).slice(0, 3)}`;\n}\n\nconst format = (n: number) => n.toLocaleString(\"en-US\");\n\n// A slot machine for the position: each digit column starts on 0 and rolls\n// to its value, left to right, the first time it shows. Later changes roll\n// from wherever it was.\nfunction Roll({ value }: { value: number }) {\n const [armed, setArmed] = useState(false);\n useEffect(() => {\n const frame = requestAnimationFrame(() => setArmed(true));\n return () => cancelAnimationFrame(frame);\n }, []);\n const text = format(value);\n let digit = 0;\n return (\n \n {[...text].map((char, i) => {\n const place = text.length - i;\n if (!/\\d/.test(char)) return {char};\n const order = digit++;\n return (\n \n \n {Array.from({ length: 10 }, (_, n) => (\n \n {n}\n \n ))}\n \n \n );\n })}\n \n );\n}\n\nfunction Face({ person }: { person: QueuePerson }) {\n return (\n \n {person.avatar ? (\n \n ) : (\n // No photo: a plain head and shoulders in the same light circle, so\n // the strip reads as one set of people rather than faces and\n // letters. Grey on the fixed light circle, so fixed greys.\n \n \n \n \n )}\n \n );\n}\n\nconst fade = {\n initial: { opacity: 0, y: 4, filter: \"blur(4px)\" },\n animate: { opacity: 1, y: 0, filter: \"blur(0px)\" },\n exit: { opacity: 0, y: -2, filter: \"blur(2px)\", transition: { duration: 0.12 } },\n transition: { duration: 0.24, ease: EASE_OUT },\n} as const;\n\nexport function WaitlistJoin({\n product = \"Parcel\",\n waiting,\n queue,\n skip = 5,\n linkBase = \"parcel.so/i\",\n onJoin,\n className,\n}: {\n product?: string;\n // How many people are already in line.\n waiting: number;\n // The last few people in line, front first. Only the tail is shown.\n queue: QueuePerson[];\n // Spots a share moves you up.\n skip?: number;\n linkBase?: string;\n onJoin?: (email: string) => void;\n className?: string;\n}) {\n const reduceMotion = useReducedMotion();\n const id = useId();\n const [email, setEmail] = useState(\"\");\n const [touched, setTouched] = useState(false);\n const [status, setStatus] = useState<\"idle\" | \"joining\" | \"joined\">(\"idle\");\n const [bumped, setBumped] = useState(false);\n const [copied, setCopied] = useState(false);\n const inputRef = useRef(null);\n const copyRef = useRef(null);\n const timers = useRef([]);\n\n useEffect(() => {\n const pending = timers.current;\n return () => pending.forEach((t) => window.clearTimeout(t));\n }, []);\n\n const error = touched ? problem(email) : \"\";\n const joined = status === \"joined\";\n // Your face only stays in view if the skip leaves someone in front of you.\n const hop = Math.min(skip, SLOTS - 2);\n const position = waiting + 1 - (bumped ? skip : 0);\n const me: QueuePerson = {\n id: \"me\",\n name: \"You\",\n };\n\n const line = joined\n ? (() => {\n const rest = queue.slice(-(SLOTS - 1));\n rest.splice(rest.length - (bumped ? hop : 0), 0, me);\n return rest;\n })()\n : queue.slice(-SLOTS);\n\n const join = () => {\n setTouched(true);\n if (problem(email) || status !== \"idle\") {\n inputRef.current?.focus();\n return;\n }\n setStatus(\"joining\");\n timers.current.push(\n window.setTimeout(() => {\n setStatus(\"joined\");\n onJoin?.(email.trim());\n timers.current.push(\n window.setTimeout(() => copyRef.current?.focus(), 50),\n );\n }, JOIN_MS),\n );\n };\n\n const link = referral(email.trim(), linkBase);\n\n const copy = () => {\n navigator.clipboard?.writeText(`https://${link}`).catch(() => {});\n setCopied(true);\n setBumped(true);\n timers.current.push(window.setTimeout(() => setCopied(false), 1800));\n };\n\n const reset = () => {\n setStatus(\"idle\");\n setBumped(false);\n setCopied(false);\n setTouched(false);\n setEmail(\"\");\n timers.current.push(\n window.setTimeout(() => inputRef.current?.focus(), 50),\n );\n };\n\n const initial = email.trim()[0]?.toUpperCase() ?? \"Y\";\n const motionFade = reduceMotion\n ? { ...fade, initial: { opacity: 0 }, exit: { opacity: 0 } }\n : fade;\n\n return (\n \n
\n

{product} ยท Private beta

\n \n {joined && (\n \n Not you?\n \n )}\n \n
\n\n \n \n {joined ? (\n \n You’re #\n {format(position)} in line\n \n ) : (\n \n Join the waitlist\n \n )}\n \n \n

\n {joined\n ? \"The next 200 people get in on Friday. You will hear from us the moment you do.\"\n : `${product} lets in 200 new people every Friday. Save your spot in line.`}\n

\n\n {/* The line: front on the left, fading out because it keeps going. */}\n
\n \n \n {line.map((person) => {\n const isMe = person.id === \"me\";\n return (\n \n {isMe ? (\n <>\n \n {initial}\n \n {/* A name badge pinned to the bottom of your circle,\n inside the strip's padding so nothing shifts. */}\n \n You\n \n \n ) : (\n \n )}\n \n );\n })}\n \n \n
\n
\n \n \n \n \n Front of the line\n \n \n \n \n {joined\n ? `${format(position - 1)} ahead of you`\n : `${format(waiting)} waiting`}\n \n \n \n
\n\n {/* The form and the share row share one slot, so the page never jumps. */}\n
\n \n {joined ? (\n \n \n {link}\n \n \n \n \n \n {copied ? (\n \n ) : (\n <>\n \n \n \n )}\n \n \n \n {copied ? \"Copied\" : \"Copy link\"}\n \n \n ) : (\n {\n e.preventDefault();\n join();\n }}\n className=\"absolute inset-0 flex gap-2\"\n >\n \n setEmail(e.target.value)}\n onBlur={() => {\n if (email.trim()) setTouched(true);\n }}\n className={cn(\n \"h-11 min-w-0 flex-1 rounded-[12px] bg-muted px-3.5 text-[15px] text-foreground outline-hidden transition-[box-shadow] duration-150 ease-out placeholder:text-muted-foreground focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-foreground\",\n error && \"shadow-[inset_0_0_0_1px_var(--color-destructive)]\",\n )}\n />\n \n \n Join\n \n \n \n \n \n \n {status === \"joining\" ? \"Joining\" : \"\"}\n \n \n \n )}\n \n
\n \n \n \n {error ||\n (joined\n ? bumped\n ? `You jumped ${skip} spots. Every friend who joins moves you up again.`\n : `Skip ahead by sharing: your link moves you up ${skip} spots.`\n : \"One email when your invite is ready. Nothing else.\")}\n \n \n

\n \n );\n}\n\n// Faces are \"Notionists\" by Zoish, CC0 1.0, stored in public/avatars. The\n// people further up the line are plain silhouettes: too far off to make\n// out, and never a face mixed in among letters.\nconst QUEUE: QueuePerson[] = [\n { id: \"q0\", name: \"Priya Nair\" },\n { id: \"q1\", name: \"Hugo Laurent\" },\n { id: \"q2\", name: \"Noah Fischer\" },\n { id: \"q3\", name: \"Lena Park\" },\n { id: \"q4\", name: \"Omar Haddad\" },\n { id: \"q5\", name: \"Amara Okafor\", avatar: \"/avatars/ava.svg\" },\n { id: \"q6\", name: \"Jonas Weber\", avatar: \"/avatars/ben.svg\" },\n { id: \"q7\", name: \"Mei Tanaka\", avatar: \"/avatars/cara.svg\" },\n { id: \"q8\", name: \"Rafael Costa\", avatar: \"/avatars/dev.svg\" },\n { id: \"q9\", name: \"Sara Lindqvist\", avatar: \"/avatars/fay.svg\" },\n];\n\nexport default function WaitlistJoinDemo() {\n return ;\n}\n"},{"path":"hooks/use-reduced-motion.ts","type":"registry:hook","target":"hooks/use-reduced-motion.ts","content":"\"use client\";\n\nimport { useSyncExternalStore } from \"react\";\n\n// Motion's useReducedMotion reads the media query on the very first client\n// render, but the server can't know it, so every component that renders\n// differently under reduced motion broke hydration for those users. This\n// reports false during hydration, matching the server HTML, then the real\n// preference straight after, and follows it if it changes.\nconst query = \"(prefers-reduced-motion: reduce)\";\n\nfunction subscribe(onChange: () => void) {\n const media = window.matchMedia(query);\n media.addEventListener(\"change\", onChange);\n return () => media.removeEventListener(\"change\", onChange);\n}\n\nexport function useReducedMotion() {\n return useSyncExternalStore(\n subscribe,\n () => window.matchMedia(query).matches,\n () => false,\n );\n}\n"}],"cssVars":{"light":{"shadow-raised":"0 0 0 1px oklch(0 0 0 / 0.06), 0 1px 2px oklch(0 0 0 / 0.06), 0 6px 16px -6px oklch(0 0 0 / 0.12)"},"dark":{"shadow-raised":"0 0 0 1px oklch(1 0 0 / 0.08), 0 1px 2px oklch(0 0 0 / 0.4), 0 6px 16px -6px oklch(0 0 0 / 0.6)"},"theme":{"shadow-raised":"var(--shadow-raised)"}},"categories":["inputs"],"docs":"From ui lab: https://lab.xevrion.dev/lab/waitlist-join"}