"use client"; import { useEffect, useMemo, useRef, useState } from "react"; import { AnimatePresence, motion } from "framer-motion"; import { ImagePlus, Plus } from "lucide-react"; import { cn } from "@/lib/utils"; export type AvatarOption = { id: string; /** Display name shown under the preview when this avatar is selected. */ name: string; /** [from, to] used for the avatar gradient. */ gradient: [string, string]; }; const EASE = [0.16, 1, 0.3, 1] as const; const RING_SPRING = { type: "spring", stiffness: 420, damping: 34 } as const; const MORPH_SPRING = { type: "spring", stiffness: 260, damping: 22, mass: 0.9, } as const; const UPLOAD_ID = "__upload__"; const DEFAULT_AVATARS: AvatarOption[] = [ { id: "nebula", name: "Nebula", gradient: ["#7c6cff", "#5b8cff"] }, { id: "aurora", name: "Aurora", gradient: ["#22d3ee", "#6366f1"] }, { id: "ember", name: "Ember", gradient: ["#fb7185", "#f59e0b"] }, { id: "lagoon", name: "Lagoon", gradient: ["#2dd4bf", "#3b82f6"] }, { id: "marigold", name: "Marigold", gradient: ["#fbbf24", "#f97316"] }, { id: "orchid", name: "Orchid", gradient: ["#f472b6", "#a855f7"] }, { id: "glacier", name: "Glacier", gradient: ["#a5b4fc", "#38bdf8"] }, { id: "verdant", name: "Verdant", gradient: ["#34d399", "#22d3ee"] }, ]; /** Thin bright ring that slides between tiles via a shared layout id. */ function SelectionRing() { return ( ); } export function AvatarPicker({ avatars = DEFAULT_AVATARS, defaultId, autoCycle = true, onSelect, className, }: { avatars?: AvatarOption[]; defaultId?: string; autoCycle?: boolean; onSelect?: (id: string) => void; className?: string; }) { const [selectedId, setSelectedId] = useState( () => defaultId ?? avatars[0]?.id ?? UPLOAD_ID ); const [paused, setPaused] = useState(false); const resumeTimer = useRef | null>(null); const current = useMemo( () => avatars.find((a) => a.id === selectedId) ?? null, [avatars, selectedId] ); const isUpload = selectedId === UPLOAD_ID; const glow = current?.gradient[0] ?? "#7c6cff"; // Idle loop: ease through the gradient avatars so the picker looks alive at rest. useEffect(() => { if (!autoCycle || paused || avatars.length < 2) return; const iv = setInterval(() => { setSelectedId((cur) => { const idx = avatars.findIndex((a) => a.id === cur); const next = avatars[(idx + 1) % avatars.length]; return next ? next.id : cur; }); }, 2200); return () => clearInterval(iv); }, [autoCycle, paused, avatars]); useEffect(() => { onSelect?.(selectedId); }, [selectedId, onSelect]); useEffect(() => { return () => { if (resumeTimer.current) clearTimeout(resumeTimer.current); }; }, []); function beginInteract() { if (resumeTimer.current) clearTimeout(resumeTimer.current); setPaused(true); } function endInteract() { if (resumeTimer.current) clearTimeout(resumeTimer.current); resumeTimer.current = setTimeout(() => setPaused(false), 2600); } function select(id: string) { beginInteract(); setSelectedId(id); } const caption = isUpload ? { title: "Upload a photo", sub: "PNG or JPG, up to 4 MB" } : { title: current?.name ?? "Avatar", sub: "Generated gradient" }; return ( {/* living tint that tracks the current avatar */}

{/* header */}

Profile

Choose your avatar

{paused ? "Paused" : "Auto"}

{/* preview */}

{isUpload ? ( ) : (

)}

{caption.title}

{caption.sub}

{/* option grid */}

{avatars.map((a) => { const active = a.id === selectedId; return ( select(a.id)} aria-label={`Use ${a.name} avatar`} aria-pressed={active} whileHover={{ scale: 1.09 }} whileTap={{ scale: 0.93 }} transition={{ type: "spring", stiffness: 460, damping: 26 }} className="relative rounded-full outline-none focus-visible:ring-2 focus-visible:ring-brand-soft" style={{ width: 54, height: 54 }} > {active && } ); })} {/* upload tile */} select(UPLOAD_ID)} aria-label="Upload a photo" aria-pressed={isUpload} whileHover={{ scale: 1.09 }} whileTap={{ scale: 0.93 }} transition={{ type: "spring", stiffness: 460, damping: 26 }} className="relative grid place-items-center rounded-full border border-dashed border-white/20 bg-white/[0.03] text-zinc-400 outline-none transition-colors hover:border-white/40 hover:text-white focus-visible:ring-2 focus-visible:ring-brand-soft" style={{ width: 54, height: 54 }} > {isUpload && }

); } export default function Demo() { return (

); }

Avatar Picker