REFERENCE
- Gallery page: https://magpui.com/en/i/bouncy-geometric-mascots-1f7820
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/bouncy-geometric-mascots-1f7820/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/bouncy-geometric-mascots-1f7820/clip.mp4
- Original post: https://x.com/benjitaylor/status/2105329138802303190 by @benjitaylor
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
A playful scene of five flat geometric mascots (circle, cloud, blob, triangle, small grey dot), each with simple oval eyes, floating on black, gently colliding and squishing, and looking toward the cursor.
DESIGN SYSTEM
- Background #000; colors pink #FF1F8E, blue #1D8BFF, violet #A855F7, orange #FF6B1A, grey #8A8A8A.
MOTION
- Each mascot floats with its own slow drift; collisions use soft-body squash (scale 0.9/1.1 along the impact axis, spring back).
- Eyes look at the pointer up to 4px.
- Click a mascot: it hops and the others react with a small wobble.
SECTIONS
- Five mascot SVGs on a canvas or absolutely positioned layer.
IMPLEMENTATION
- Lightweight 2D physics (matter.js) driving SVG transforms; or Rive with a state machine.
- prefers-reduced-motion: skip the animation and show the end state.
ADAPT TO THE PROJECT
- Reuse the project's existing tokens, components and fonts; map colors to the closest existing tokens.
- Do not copy logos, brand names, characters or artwork from the reference. Use neutral placeholders.
SUCCESS CHECK
- Mascots never leave the viewport.
- Motion feels soft, never rigid.
- Use original shapes, not an existing brand cast.
