Animated AI orb with blinking eyes, twelve color presets, three sizes, and circle, square, or squircle shapes. Inspired by Kimi AI.
The install command also adds motion from the registry. Manual install: pnpm add motion
| Prop | Type | Default |
|---|---|---|
colorOrb color — blue, orange, red, green, purple, yellow, cyan, pink, indigo, lime, turquoise, or violet. | AvatarColor | "blue" |
sizeSize preset — "sm", "md", or "lg". | "sm" | "md" | "lg" | "md" |
shapeShape — "circle", "square", or "squircle". | "circle" | "square" | "squircle" | "circle" |
blinkingEnable the looping eye-blink animation. | boolean | true |
classNameAdditional classes on the outer motion div. | string | — |
Click on the icon in the top right of the example preview to view the source code for specific variants.
This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.
import { Avatar } from "@/components/ui/avatar"export default function Page() {
return <Avatar color="blue" size="md" shape="circle" />
}