An animated face for your AI agents. One file, no dependency beyond React: it blinks, glances at the pointer and pauses off-screen.
'use client';
/**
* AIMO — a face for your agents. https://aimo.nrmk.dev
*
* Free edition, MIT licensed. Two shapes, an idle face, flat finish.
* AIMO Pro adds every shape and state, the glass finish and its effects: https://aimo.nrmk.dev/#/pro
*
* Generated file — edit it freely in your project, but regenerate rather than patch upstream.
*/
import { useEffect, useRef } from 'react';
type Hsl = { h: number; s: number; l: number }
function hexToHsl(hex: string): Hsl {
const m = /^#?([0-9a-f]{6})$/i.exec(hex.trim());
const n = m ? parseInt(m[1], 16) : 0x31c943;
const r = ((n >> 16) & 255) / 255;
const g = ((n >> 8) & 255) / 255;
const b = (n & 255) / 255;
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
const l = (max + min) / 2;
const d = max - min;
if (d === 0) return { h: 0, s: 0, l: l * 100 };
const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
let h: number;
if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) * 60;
else if (max === g) h = ((b - r) / d + 2) * 60;
else h = ((r - g) / d + 4) * 60;
return { h, s: s * 100, l: l * 100 };
}
type Part =
| { kind: 'ellipse'; cx: number; cy: number; rx: number; ry: number }
| { kind: 'path'; d: string };
type ShapeId = 'ball' | 'square';
type ShapeDef = { id: ShapeId; label: string; parts: Part[]; center: { x: number; y: number } };
const SHAPES: ShapeDef[] = [
{
"id": "ball",
"label": "Ball",
"center": {
"x": 180,
"y": 168
},
"parts": [
{
"kind": "ellipse",
"cx": 200,
"cy": 165,
"rx": 165,
"ry": 165
}
]
},
{
"id": "square",
"label": "Square",
"center": {
"x": 180,
"y": 168
},
"parts": [
{
"kind": "path",
"d": "M40 165 C40 60 60 5 200 5 C340 5 360 60 360 165 C360 270 340 325 200 325 C60 325 40 270 40 165 Z"
}
]
}
];
const DEFAULT_SHAPE: ShapeId = 'ball';
const getShape = (id: ShapeId): ShapeDef => SHAPES.find((s) => s.id === id) ?? SHAPES[0];
type Emotion = 'neutral';
type Eye = { rot: number; curve: number; len: number; w: number; dx: number; dy: number };
type EyePair = { l: Eye; r: Eye };
const EYE_POSES: Record<Emotion, EyePair> = {
"neutral": {
"l": {
"rot": 13,
"curve": -9,
"len": 50,
"w": 31,
"dx": -30,
"dy": 0
},
"r": {
"rot": 13,
"curve": -9,
"len": 50,
"w": 31,
"dx": 30,
"dy": 0
}
}
};
/**
* The free Avatar: one solid colour, two eyes, a blink and a glance at the pointer.
*
* Deliberately a separate renderer from the Pro one rather than a trimmed copy of it. The glossy
* finish is built out of SVG filter stacks, and a build step that cut them out of the full renderer
* would leave that code sitting in a file we hand out under MIT — one prop away from being switched
* back on. Here it simply does not exist.
*
* Everything that describes the character — silhouettes, eye geometry, colour maths — comes from
* `core`, which is shared with Pro and carries no DOM calls, so this renderer stays the only part a
* React Native or SwiftUI port has to rewrite.
*/
// Same padded box as the Pro renderer: the body lives in 400x330, inset by PAD inside the viewBox.
// Free has no glow to protect, but `size` has to mean the same thing in both so that swapping this
// file for the Pro one never moves anything in a customer's layout.
const PAD = 70;
const BODY_W = 400;
const BODY_H = 330;
const VIEW_W = BODY_W + PAD * 2;
const VIEW_H = BODY_H + PAD * 2;
/** How far the eyes travel toward the pointer, in viewBox units. */
const GAZE_REACH = 22;
const BLINK_MS = 240;
const BLINK_GAP = [2400, 6000] as const;
type Props = {
/** Body silhouette. */
shape?: ShapeId;
/** Body colour; the eyes pick black or white from it for contrast. */
color?: string;
/** Rendered width in px. Height follows the 400x330 box. */
size?: number;
className?: string;
/**
* How far the pointer is noticed, in half body widths. 0 turns the glance off,
* Infinity follows from anywhere on the page.
*/
gazeRadius?: number;
/** True when the face is decoration next to text that already says what it means. */
decorative?: boolean;
};
const eyePath = (e: Eye) => `M0 ${(-e.len).toFixed(1)} Q${e.curve.toFixed(1)} 0 0 ${e.len.toFixed(1)}`;
const lerp = (a: number, b: number, t: number) => a + (b - a) * Math.min(1, t);
function Avatar({ shape = DEFAULT_SHAPE, color = '#31c943', size, className, gazeRadius = 1.45, decorative = false }: Props) {
const svgRef = useRef<SVGSVGElement>(null);
const eyesRef = useRef<SVGGElement>(null);
const leftRef = useRef<SVGGElement>(null);
const rightRef = useRef<SVGGElement>(null);
const def = getShape(shape);
const pose = EYE_POSES.neutral;
// a light body needs dark eyes to read; anything else takes near-white
const eyeColor = hexToHsl(color).l > 62 ? '#10131a' : '#f6f7fb';
const gazeRef = useRef(gazeRadius);
gazeRef.current = gazeRadius;
useEffect(() => {
const svg = svgRef.current;
if (!svg) return;
const reduced = typeof window.matchMedia === 'function' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const pointer = { x: 0, y: 0, seen: false };
const eyes = { x: 0, y: 0 };
let blinkStart = -1;
let nextBlink = performance.now() + BLINK_GAP[0];
let raf = 0;
let last = performance.now();
let visible = true;
const onMove = (e: PointerEvent) => {
pointer.x = e.clientX;
pointer.y = e.clientY;
pointer.seen = true;
};
const onLeave = () => {
pointer.seen = false;
};
const frame = (now: number) => {
raf = 0;
const dt = Math.min(3, (now - last) / 16.67);
last = now;
// where the eyes want to be: toward the pointer, but only once it is close enough
let tx = 0;
let ty = 0;
if (pointer.seen && gazeRef.current > 0) {
const box = svg.getBoundingClientRect();
const cx = box.left + box.width / 2;
const cy = box.top + box.height / 2;
const dx = pointer.x - cx;
const dy = pointer.y - cy;
const dist = Math.hypot(dx, dy);
const reach = (box.width / 2) * gazeRef.current;
if (gazeRef.current === Infinity || dist < reach) {
const pull = Math.min(1, dist / (box.width / 2 || 1));
const len = Math.hypot(dx, dy) || 1;
tx = (dx / len) * pull * GAZE_REACH;
ty = (dy / len) * pull * GAZE_REACH * 0.7;
}
}
eyes.x = lerp(eyes.x, tx, reduced ? 1 : 0.12 * dt);
eyes.y = lerp(eyes.y, ty, reduced ? 1 : 0.12 * dt);
eyesRef.current?.setAttribute('transform', `translate(${eyes.x.toFixed(2)} ${eyes.y.toFixed(2)})`);
let squash = 1;
if (!reduced) {
if (blinkStart < 0 && now >= nextBlink) blinkStart = now;
if (blinkStart >= 0) {
const t = (now - blinkStart) / BLINK_MS;
if (t >= 1) {
blinkStart = -1;
nextBlink = now + BLINK_GAP[0] + Math.random() * (BLINK_GAP[1] - BLINK_GAP[0]);
} else {
// down and back up
squash = Math.abs(Math.cos(t * Math.PI));
}
}
}
const place = (g: SVGGElement | null, e: Eye) =>
g?.setAttribute(
'transform',
`translate(${(PAD + def.center.x + e.dx).toFixed(1)} ${(PAD + def.center.y + e.dy).toFixed(1)}) rotate(${e.rot}) scale(1 ${squash.toFixed(3)})`,
);
place(leftRef.current, pose.l);
place(rightRef.current, pose.r);
if (visible && !reduced) raf = requestAnimationFrame(frame);
};
// one call settles the pose; it schedules the loop itself when there is motion to run
frame(performance.now());
window.addEventListener('pointermove', onMove, { passive: true });
document.addEventListener('pointerleave', onLeave);
// stop the loop while the face is scrolled away
const io =
typeof IntersectionObserver === 'undefined'
? null
: new IntersectionObserver(
([entry]) => {
visible = entry.isIntersecting;
if (visible && !raf && !reduced) {
last = performance.now();
raf = requestAnimationFrame(frame);
}
},
{ rootMargin: '200px' },
);
io?.observe(svg);
return () => {
cancelAnimationFrame(raf);
io?.disconnect();
window.removeEventListener('pointermove', onMove);
document.removeEventListener('pointerleave', onLeave);
};
}, [def, pose]);
return (
<svg
ref={svgRef}
className={className}
viewBox={`0 0 ${VIEW_W} ${VIEW_H}`}
width={size}
height={size ? (size * VIEW_H) / VIEW_W : undefined}
aria-hidden={decorative ? true : undefined}
role={decorative ? undefined : 'img'}
aria-label={decorative ? undefined : 'Avatar'}
>
<g fill={color} transform={`translate(${PAD} ${PAD})`}>
{def.parts.map((part, i) =>
part.kind === 'ellipse' ? (
<ellipse key={i} cx={part.cx} cy={part.cy} rx={part.rx} ry={part.ry} />
) : (
<path key={i} d={part.d} />
),
)}
</g>
<g ref={eyesRef}>
<g ref={leftRef}>
<path d={eyePath(pose.l)} stroke={eyeColor} strokeWidth={pose.l.w} strokeLinecap="round" fill="none" />
</g>
<g ref={rightRef}>
<path d={eyePath(pose.r)} stroke={eyeColor} strokeWidth={pose.r.w} strokeLinecap="round" fill="none" />
</g>
</g>
</svg>
);
}
/* ------------------------------------------------------------------------- */
/* Demo */
/**
* The live faces below are all free: two shapes, one idle expression, a flat finish — everything
* this file can actually draw. Pro is shown as a video hosted on aimo.nrmk.dev rather than as code,
* because a demo on this registry publishes its own source: putting the Pro renderer here would not
* be showing it, it would be giving it away.
*
* No background is set anywhere: the eyes pick black or white from the body colour themselves, so
* this reads correctly on a light canvas and a dark one.
*/
/** Six free faces on a ring, alternating the two shapes this file ships. Six divides the circle
evenly, so there is no gap where a seventh would have left one. */
const RING: { shape: 'ball' | 'square'; color: string }[] = [
{ shape: 'ball', color: '#31c943' },
{ shape: 'square', color: '#4a30c8' },
{ shape: 'ball', color: '#f0821e' },
{ shape: 'square', color: '#e0347a' },
{ shape: 'ball', color: '#1f7bea' },
{ shape: 'square', color: '#2aa79a' },
];
const RING_SIZE = 356;
const RING_RADIUS = 140;
const FACE = 54;
const PRO_URL = 'https://aimo.nrmk.dev';
/**
* The Pro teaser, drawn rather than shipped.
*
* This is NOT the Pro renderer. Pro's value is the renderer — the filter stack, the shimmer engine,
* the pose system — and handing that over with a single silhouette would hand over all of it, since
* the remaining shapes are nine circles' worth of data. So the glass look is approximated here the
* same way the site approximates it for its own thumbnails: gradients standing in for filters, one
* silhouette, two eye poses, no filters at all. The geometry is already public — this blob is the
* mark in the site's header.
*
* Everything is CSS, so it animates without a frame loop and costs the listing nothing.
*/
const PRO_CSS = `
.aimo-pro { position: relative; display: block; width: 148px; height: 129px; flex: 0 0 auto; }
.aimo-pro svg { display: block; width: 100%; height: 100%; overflow: visible; }
.aimo-pro__body { transform-origin: 250px 238px; animation: aimo-breathe 4.6s ease-in-out infinite; }
.aimo-pro__star { transform-origin: 250px 238px; animation: aimo-spin 40s linear infinite; }
.aimo-pro__eyes { transform-origin: 250px 238px; animation: aimo-blink 5.2s ease-in-out infinite; }
.aimo-pro__eyes--happy { opacity: 0; transition: opacity 220ms ease; }
.aimo-pro__eyes--rest { opacity: 1; transition: opacity 220ms ease; }
.aimo-card:hover .aimo-pro__eyes--happy, .aimo-card:focus-visible .aimo-pro__eyes--happy { opacity: 1; }
.aimo-card:hover .aimo-pro__eyes--rest, .aimo-card:focus-visible .aimo-pro__eyes--rest { opacity: 0; }
.aimo-card { position: relative; transition: transform 260ms ease, opacity 260ms ease; }
.aimo-card:hover { transform: translateY(-2px); opacity: 1; }
.aimo-card:hover .aimo-pro__star { animation-duration: 7s; }
/* The drifting blob palette from the site, as a border.
Masked rather than painted with padding-box: a padding-box layer needs a solid colour to hide the
gradient behind the card, and this demo never knows whether it is on a light or a dark canvas. */
.aimo-card::before {
content: '';
position: absolute;
inset: 0;
padding: 1px;
border-radius: inherit;
background: linear-gradient(100deg, #31c943, #a8f0ff 25%, #fb6adc 50%, #f5b592 70%, #31c943);
background-size: 300% 100%;
animation: aimo-shine 9s linear infinite;
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
pointer-events: none;
}
@keyframes aimo-shine { to { background-position: -300% 0; } }
@keyframes aimo-breathe { 50% { transform: scale(1.022) translateY(-4px); } }
@keyframes aimo-spin { to { transform: rotate(360deg); } }
@keyframes aimo-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.08); } }
@media (prefers-reduced-motion: reduce) {
.aimo-pro__body, .aimo-pro__star, .aimo-pro__eyes, .aimo-card::before { animation: none; }
}
`;
const BUMPS =
'M146.7 58.3 C146.7 28.9 122.8 5.0 93.3 5.0 C63.9 5.0 40.0 28.9 40.0 58.3 C40.0 87.8 63.9 111.7 93.3 111.7 ' +
'C63.9 111.7 40.0 135.5 40.0 165.0 C40.0 194.5 63.9 218.3 93.3 218.3 C63.9 218.3 40.0 242.2 40.0 271.7 ' +
'C40.0 301.1 63.9 325.0 93.3 325.0 C122.8 325.0 146.7 301.1 146.7 271.7 C146.7 301.1 170.5 325.0 200.0 325.0 ' +
'C229.5 325.0 253.3 301.1 253.3 271.7 C253.3 301.1 277.2 325.0 306.7 325.0 C336.1 325.0 360.0 301.1 360.0 271.7 ' +
'C360.0 242.2 336.1 218.3 306.7 218.3 C336.1 218.3 360.0 194.5 360.0 165.0 C360.0 135.5 336.1 111.7 306.7 111.7 ' +
'C336.1 111.7 360.0 87.8 360.0 58.3 C360.0 28.9 336.1 5.0 306.7 5.0 C277.2 5.0 253.3 28.9 253.3 58.3 ' +
'C253.3 28.9 229.5 5.0 200.0 5.0 C170.5 5.0 146.7 28.9 146.7 58.3 Z';
function ProBlob() {
return (
<span className="aimo-pro" aria-hidden="true">
<svg viewBox="0 0 540 470">
<defs>
<clipPath id="aimo-pro-clip" transform="translate(70 70)">
<path d={BUMPS} />
</clipPath>
<linearGradient id="aimo-pro-base" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stopColor="#124f19" />
<stop offset="0.45" stopColor="#1a7a25" />
<stop offset="0.8" stopColor="#31c943" />
<stop offset="1" stopColor="#47f058" />
</linearGradient>
<radialGradient id="aimo-pro-nebula" cx="0.5" cy="0.5" r="0.5">
<stop offset="0" stopColor="#4cffea" stopOpacity="1" />
<stop offset="0.5" stopColor="#38e6d2" stopOpacity="0.7" />
<stop offset="1" stopColor="#2cbf82" stopOpacity="0" />
</radialGradient>
<radialGradient id="aimo-pro-star" cx="0.5" cy="0.5" r="0.5">
<stop offset="0" stopColor="#ffa2e2" stopOpacity="1" />
<stop offset="0.45" stopColor="#fb6adc" stopOpacity="0.8" />
<stop offset="1" stopColor="#8b69ea" stopOpacity="0" />
</radialGradient>
{/* one blur so the inner light reads as light rather than as a flat disc */}
<filter id="aimo-pro-soft" x="-40%" y="-40%" width="180%" height="180%">
<feGaussianBlur stdDeviation="16" />
</filter>
<filter id="aimo-pro-halo" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="13" />
</filter>
</defs>
{/* the body's own glow, outside the silhouette */}
<g className="aimo-pro__body" filter="url(#aimo-pro-halo)" opacity="0.5">
<path d={BUMPS} transform="translate(70 70)" fill="#5bff61" />
</g>
<g className="aimo-pro__body">
{/* the ramp runs across the whole box and is cut to the silhouette, so the nine lobes read
as one body instead of nine separate balls each with its own gradient */}
<g clipPath="url(#aimo-pro-clip)">
<rect x="0" y="0" width="540" height="470" fill="url(#aimo-pro-base)" />
<ellipse cx="270" cy="283" rx="185" ry="140" fill="url(#aimo-pro-nebula)" opacity="0.95" />
<g className="aimo-pro__star" filter="url(#aimo-pro-soft)">
<ellipse cx="275" cy="228" rx="104" ry="104" fill="url(#aimo-pro-star)" />
</g>
</g>
<g className="aimo-pro__eyes" stroke="#faf5f9" strokeLinecap="round" fill="none">
<g className="aimo-pro__eyes--rest">
<path d="M0 -50 Q-9 0 0 50" strokeWidth="31" transform="translate(220 238) rotate(13)" />
<path d="M0 -50 Q-9 0 0 50" strokeWidth="31" transform="translate(280 238) rotate(13)" />
</g>
<g className="aimo-pro__eyes--happy">
<path d="M0 -27 Q-40 0 0 27" strokeWidth="30" transform="translate(200 236) rotate(90)" />
<path d="M0 -27 Q-40 0 0 27" strokeWidth="30" transform="translate(300 236) rotate(90)" />
</g>
</g>
</g>
</svg>
</span>
);
}
function ProCard() {
return (
<>
<style>{PRO_CSS}</style>
<a
className="aimo-card"
href={PRO_URL}
target="_blank"
rel="noreferrer"
style={{
display: 'flex',
alignItems: 'center',
gap: 18,
maxWidth: 460,
padding: '16px 20px 16px 16px',
borderRadius: 18,
color: 'inherit',
textDecoration: 'none',
opacity: 0.88,
}}
>
<ProBlob />
<span style={{ display: 'grid', gap: 5, lineHeight: 1.45 }}>
<strong style={{ fontSize: 15 }}>AIMO Pro</strong>
<span style={{ fontSize: 13, opacity: 0.7 }}>
Fourteen shapes, eight expressions and the glass finish. Hover to say hello.
</span>
<span style={{ fontSize: 13, opacity: 0.9 }}>Get the Pro plan on aimo.nrmk.dev →</span>
</span>
</a>
</>
);
}
export default function AimoDemo() {
return (
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 32, padding: '48px 24px' }}>
<div style={{ position: 'relative', width: RING_SIZE, height: RING_SIZE }}>
{RING.map((f, i) => {
const angle = (360 / RING.length) * i - 90;
return (
<span
key={i}
style={{
position: 'absolute',
top: '50%',
left: '50%',
// rotate out to the rim, then rotate back so the face itself stays upright
transform: `translate(-50%, -50%) rotate(${angle}deg) translate(${RING_RADIUS}px) rotate(${-angle}deg)`,
}}
>
{/* gazeRadius is wide on purpose: the whole ring should turn to the pointer at once,
which is the one thing a screenshot of this component can never show */}
<Avatar shape={f.shape} color={f.color} size={FACE} gazeRadius={6} />
</span>
);
})}
<div
style={{
position: 'absolute',
inset: 0,
display: 'grid',
placeContent: 'center',
textAlign: 'center',
pointerEvents: 'none',
}}
>
<strong style={{ fontSize: 26, fontWeight: 600, letterSpacing: '0.16em' }}>AIMO</strong>
<span style={{ marginTop: 6, fontSize: 13, opacity: 0.6 }}>A face for your agents</span>
</div>
</div>
<p style={{ margin: 0, maxWidth: 360, fontSize: 13, opacity: 0.6, textAlign: 'center', lineHeight: 1.55 }}>
They blink on their own and follow your pointer. One file, no dependency beyond React.
</p>
<ProCard />
</div>
);
}