REFERENCE
- Gallery page: https://magpui.com/en/i/eight-expressive-geometric-bot-avatars-109aa0
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/eight-expressive-geometric-bot-avatars-109aa0/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/eight-expressive-geometric-bot-avatars-109aa0/clip.mp4
- Original post: https://x.com/jennywen/status/2112202752118182192 by @jennywen
Before building, download the first frame and look at it. If ffmpeg is available, download the clip and extract frames (ffmpeg -i clip.mp4 -vf fps=2 frame-%02d.png), then study the motion frame by frame. Match what you see; the text below describes it, the frames are the truth.
BUILD: Create an animated avatar study: eight simple geometric assistant faces in a compact four-column, two-row grid. Each colored silhouette has two cream eyes and its own expressive idle cycle. The personality comes from changing eye shapes, eye placement and restrained body tilts, not from detailed illustration. Build only this avatar group, not a surrounding product page.
DESIGN SYSTEM: Use a roughly 440 by 220px desktop grid with 6px white gutters and square pastel tiles. Scale to two columns on narrow screens. Each silhouette is approximately 64px across inside a 104px tile. Top row: black circle, pink rounded pentagonal blob, blue cloud, amber scalloped flower. Bottom row: orange hexagon, brown rounded square, bright green capsule, gray teardrop. Estimated fills: #080808, #EF0752, #079CEB, #EDA600, #F57900, #8B6036, #00DB6B, #858585. Pale tile backgrounds use white or a 5-8% tint of the character color. Eyes are cream #FFFDEC, generally 6 by 15px, spaced 9px apart. No typography, borders, shadows or decorative chrome. Use original vector geometry rather than tracing the reference.
MOTION: Proposed timings to reproduce the sampled expression changes: on mount, start independent 3-5s looping timelines with offsets of 170-430ms. Shift eye groups 3-9px over 250-380ms, cubic-bezier(0.22,1,0.36,1), hold 600-1200ms, then return. Blink by scaling eyes vertically to 0.1 and back over 130ms, cubic-bezier(0.4,0,0.2,1). Alternate upright pill eyes with round eyes and curved smiling eyes; crossfade compatible vector groups over 140ms. Tilt selected bodies between -12 and 12 degrees over 400ms, cubic-bezier(0.34,1.56,0.64,1), returning to neutral after a short hold. Let some eyes glance upward, sideways or down toward the silhouette edge. Add occasional tiny two-stroke expression marks beside the pink or gray character, fading over 220ms. Avoid synchronizing all eight characters.
SECTIONS: One grid, eight avatar tiles. States are neutral upright eyes, side glance, wide round eyes, blink, smiling curved eyes, and a gently tilted body. These are animation states, not evidence of an interactive selection flow.
IMPLEMENTATION: Use inline SVG for all silhouettes and eye variants, with GSAP timelines controlling group transforms and opacity; this gives each face an independent schedule without raster assets. No WebGL or image generation is needed. Scope and clean up timelines on unmount, pause offscreen, and keep the animation to transforms and opacity where possible. For prefers-reduced-motion, show neutral static faces. Label each meaningful avatar accessibly; hide purely decorative eyes and strokes. If tiles are made selectable in the existing project, use real buttons with keyboard activation and a visible 2px focus ring, without inventing extra controls for the study.
ADAPT TO THE PROJECT: Reuse the project's existing design tokens, components and fonts. Map the estimated colors to the closest existing tokens. Never copy logos, brand names, photos or illustrations from the original; use original vector placeholders.
SUCCESS CHECK:
- Eight distinct silhouettes remain legible in a four-by-two desktop grid and a two-column narrow layout.
- Glances, blinks and tilts run independently without moving tile boundaries.
- Reduced-motion mode is static and any interactive tiles remain keyboard accessible.
