Avatar

Installation

Usage

import Avatar from '@/components/odysseyui/avatar';

export default function Page() {
  return <Avatar color="blue" size="md" shape="circle" />;
}

How It Works

• Uses motion/react for a squash-and-stretch whileTap spring animation.
• Two Eye sub-components render with a CSS @keyframes av-blink animation that fires every 3.6 s, with a 60 ms delay on the right eye for a natural look.
• Noise and grain textures are rendered as inline SVG <feTurbulence> filters layered with mix-blend-overlay for depth.
• A radial shine overlay and a blurred shadow div create the 3-D orb illusion entirely with CSS — no images.
• Each color maps to a unique gradient, box-shadow glow, iris gradient, and shine stop via the PRESETS record.
• useId() ensures every instance gets a unique SVG filter id, preventing cross-instance bleed.

API Reference

Avatar