50:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 51:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 52:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 53:T29d7,'use client'; import { useId } from 'react'; import { motion } from 'motion/react'; export type AvatarColor = | 'blue' | 'orange' | 'red' | 'green' | 'purple' | 'yellow' | 'cyan' | 'pink' | 'indigo' | 'lime' | 'turquoise' | 'violet'; export type AvatarSize = 'sm' | 'md' | 'lg'; export type AvatarShape = 'circle' | 'square' | 'squircle'; export interface AvatarProps { blinking?: boolean; color?: AvatarColor; size?: AvatarSize; shape?: AvatarShape; className?: string; } const BLINK_KEYFRAMES = ` @keyframes av-blink { 0%, 88%, 100% { transform: scaleY(1); } 93% { transform: scaleY(0.07); } 97% { transform: scaleY(0.07); } } `; const PRESETS: Record< AvatarColor, { gradient: string; boxShadow: string; iris: string; shine: string; } > = { blue: { gradient: 'radial-gradient(circle at 50% 45%, #0d4d9a 0%, #3d7dd8 40%, #6fb3ff 68%, #e0eeff 100%)', boxShadow: '0 0 4px 0px rgba(20,102,216,.35), 0 0 16px 6px rgba(20,102,216,.18), inset 0 0 0 1px rgba(255,255,255,.05)', iris: 'linear-gradient(135deg, #ffffff 0%, #d4ecff 100%)', shine: 'radial-gradient(ellipse at 30% 24%, rgba(255,255,255,.75) 0%, rgba(255,255,255,.1) 50%, transparent 70%)', }, orange: { gradient: 'radial-gradient(circle at 50% 45%, #a63e10 0%, #e27a2a 40%, #ffb46a 68%, #ffe8cc 100%)', boxShadow: '0 0 4px 0px rgba(232,100,0,.35), 0 0 16px 6px rgba(232,100,0,.18), inset 0 0 0 1px rgba(255,255,255,.05)', iris: 'linear-gradient(135deg, #ffffff 0%, #ffd9b8 100%)', shine: 'radial-gradient(ellipse at 30% 24%, rgba(255,255,255,.75) 0%, rgba(255,255,255,.1) 50%, transparent 70%)', }, red: { gradient: 'radial-gradient(circle at 50% 45%, #a60033 0%, #e74668 40%, #ff8aaa 68%, #ffd6e8 100%)', boxShadow: '0 0 4px 0px rgba(223,24,92,.35), 0 0 16px 6px rgba(223,24,92,.18), inset 0 0 0 1px rgba(255,255,255,.05)', iris: 'linear-gradient(135deg, #ffffff 0%, #ffcde4 100%)', shine: 'radial-gradient(ellipse at 30% 24%, rgba(255,255,255,.75) 0%, rgba(255,255,255,.1) 50%, transparent 70%)', }, green: { gradient: 'radial-gradient(circle at 50% 45%, #0d6632 0%, #2a9d5f 40%, #6dd187 68%, #d1fadd 100%)', boxShadow: '0 0 4px 0px rgba(12,168,82,.35), 0 0 16px 6px rgba(12,168,82,.18), inset 0 0 0 1px rgba(255,255,255,.05)', iris: 'linear-gradient(135deg, #ffffff 0%, #c5f5d8 100%)', shine: 'radial-gradient(ellipse at 30% 24%, rgba(255,255,255,.75) 0%, rgba(255,255,255,.1) 50%, transparent 70%)', }, purple: { gradient: 'radial-gradient(circle at 50% 45%, #4a0080 0%, #8b3fd1 40%, #c896ff 68%, #e8d4ff 100%)', boxShadow: '0 0 4px 0px rgba(110,46,224,.35), 0 0 16px 6px rgba(110,46,224,.18), inset 0 0 0 1px rgba(255,255,255,.05)', iris: 'linear-gradient(135deg, #ffffff 0%, #e0c9ff 100%)', shine: 'radial-gradient(ellipse at 30% 24%, rgba(255,255,255,.75) 0%, rgba(255,255,255,.1) 50%, transparent 70%)', }, yellow: { gradient: 'radial-gradient(circle at 50% 45%, #8a5500 0%, #d4a000 40%, #ffc93a 68%, #fff5cc 100%)', boxShadow: '0 0 4px 0px rgba(214,142,0,.35), 0 0 16px 6px rgba(214,142,0,.18), inset 0 0 0 1px rgba(255,255,255,.05)', iris: 'linear-gradient(135deg, #ffffff 0%, #fff0a8 100%)', shine: 'radial-gradient(ellipse at 30% 24%, rgba(255,255,255,.75) 0%, rgba(255,255,255,.1) 50%, transparent 70%)', }, cyan: { gradient: 'radial-gradient(circle at 50% 45%, #003d66 0%, #0a8fb5 40%, #5dd4ff 68%, #cdf5ff 100%)', boxShadow: '0 0 4px 0px rgba(10,143,181,.35), 0 0 16px 6px rgba(10,143,181,.18), inset 0 0 0 1px rgba(255,255,255,.05)', iris: 'linear-gradient(135deg, #ffffff 0%, #d0f0ff 100%)', shine: 'radial-gradient(ellipse at 30% 24%, rgba(255,255,255,.75) 0%, rgba(255,255,255,.1) 50%, transparent 70%)', }, pink: { gradient: 'radial-gradient(circle at 50% 45%, #7a0055 0%, #d63384 40%, #ff6bb3 68%, #ffe5f5 100%)', boxShadow: '0 0 4px 0px rgba(214,51,132,.35), 0 0 16px 6px rgba(214,51,132,.18), inset 0 0 0 1px rgba(255,255,255,.05)', iris: 'linear-gradient(135deg, #ffffff 0%, #ffd6ed 100%)', shine: 'radial-gradient(ellipse at 30% 24%, rgba(255,255,255,.75) 0%, rgba(255,255,255,.1) 50%, transparent 70%)', }, indigo: { gradient: 'radial-gradient(circle at 50% 45%, #2d157a 0%, #4f46e5 40%, #8b7eff 68%, #ddd6ff 100%)', boxShadow: '0 0 4px 0px rgba(79,70,229,.35), 0 0 16px 6px rgba(79,70,229,.18), inset 0 0 0 1px rgba(255,255,255,.05)', iris: 'linear-gradient(135deg, #ffffff 0%, #e0d9ff 100%)', shine: 'radial-gradient(ellipse at 30% 24%, rgba(255,255,255,.75) 0%, rgba(255,255,255,.1) 50%, transparent 70%)', }, lime: { gradient: 'radial-gradient(circle at 50% 45%, #4a5910 0%, #84cc16 40%, #bef264 68%, #ecfccf 100%)', boxShadow: '0 0 4px 0px rgba(132,204,22,.35), 0 0 16px 6px rgba(132,204,22,.18), inset 0 0 0 1px rgba(255,255,255,.05)', iris: 'linear-gradient(135deg, #ffffff 0%, #f7fee8 100%)', shine: 'radial-gradient(ellipse at 30% 24%, rgba(255,255,255,.75) 0%, rgba(255,255,255,.1) 50%, transparent 70%)', }, turquoise: { gradient: 'radial-gradient(circle at 50% 45%, #1a5555 0%, #0d9488 40%, #2dd4bf 68%, #ccfbf1 100%)', boxShadow: '0 0 4px 0px rgba(13,148,136,.35), 0 0 16px 6px rgba(13,148,136,.18), inset 0 0 0 1px rgba(255,255,255,.05)', iris: 'linear-gradient(135deg, #ffffff 0%, #c0fdf5 100%)', shine: 'radial-gradient(ellipse at 30% 24%, rgba(255,255,255,.75) 0%, rgba(255,255,255,.1) 50%, transparent 70%)', }, violet: { gradient: 'radial-gradient(circle at 50% 45%, #4a2a7a 0%, #a855f7 40%, #d8b4fe 68%, #f3e8ff 100%)', boxShadow: '0 0 4px 0px rgba(168,85,247,.35), 0 0 16px 6px rgba(168,85,247,.18), inset 0 0 0 1px rgba(255,255,255,.05)', iris: 'linear-gradient(135deg, #ffffff 0%, #ede9fe 100%)', shine: 'radial-gradient(ellipse at 30% 24%, rgba(255,255,255,.75) 0%, rgba(255,255,255,.1) 50%, transparent 70%)', }, }; const SIZE: Record< AvatarSize, { orb: string; eye: string; eyeGap: string; eyeY: string; } > = { sm: { orb: 'size-8', eye: 'w-1 h-1.5', eyeGap: 'gap-1.5', eyeY: '-translate-y-0.5', }, md: { orb: 'size-12', eye: 'w-1.5 h-2.5', eyeGap: 'gap-2.5', eyeY: '-translate-y-0.5', }, lg: { orb: 'size-16', eye: 'w-2 h-3', eyeGap: 'gap-3.5', eyeY: '-translate-y-1', }, }; const SHAPE_RADIUS: Record = { circle: 'rounded-full', square: 'rounded-[0%]', squircle: 'rounded-[40%]', }; interface EyeProps { blinking: boolean; delayMs?: number; irisGradient: string; sizeClass: string; } function Eye({ blinking, delayMs = 0, irisGradient, sizeClass }: EyeProps) { return (

); } function Avatar({ blinking = true, color = 'blue', size = 'md', shape = 'circle', className = '', }: AvatarProps) { const uid = useId(); const noiseId = `av-n${uid.replace(/\W/g, '')}`; const preset = PRESETS[color] ?? PRESETS.blue; const dims = SIZE[size] ?? SIZE.md; return ( <>

); } export default Avatar; 4c:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L50",null,{"registryDependencies":[]}]]}],["$","$L51",null,{"sourceUrl":"https://www.odysseyui.com/r/components-primitives-avatar.json","proxyUrl":"https://shadcnregistry.com/r/odysseyui/components-primitives-avatar","itemId":"@odysseyui/components-primitives-avatar"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L52",null,{"files":[{"path":"registry/components/primitives/avatar/index.tsx","content":"$53","type":"registry:ui","target":"components/odysseyui/avatar.tsx"}]}]]}],"$L54"]}]

Avatar

Installation

Files

components

Styles