REFERENCE
- Gallery page: https://magpui.com/en/i/ghost-blobs-with-secondary-animation-3dbafa
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/ghost-blobs-with-secondary-animation-3dbafa/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/ghost-blobs-with-secondary-animation-3dbafa/clip.mp4
- Original post: https://x.com/lochieaxon/status/2099694043810906469 by @lochieaxon
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 small mascot (a rounded yellow ghost blob with two dot eyes) that idles, looks at the cursor and reacts to clicks, using secondary animation: the body lags and overshoots behind the head, the eyes blink, the bottom wobbles.
DESIGN SYSTEM
- Background #000 or the project's darkest surface.
- Blob 72px, #FFD43B, two #111 oval eyes 8x12px.
MOTION
- Idle: body scaleY 1 to 0.94 and scaleX 1 to 1.04 over 1.6s ease-in-out loop (breathing).
- Look: eyes translate toward the pointer up to 6px, body follows 120ms later with a spring (stiffness 180, damping 12).
- Click: squash to scaleY 0.7 / scaleX 1.25 in 90ms, then jump 24px with stretch scaleY 1.2, land with a second smaller squash.
- Blink every 3-5s at random: eyes scaleY to 0.1 and back in 140ms.
SECTIONS
- Blob body (SVG path).
- Eyes group.
IMPLEMENTATION
- SVG + Framer Motion springs, or a Rive state machine if the project already uses Rive.
- Pause idle loops when off screen.
- 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
- Body always lags the eyes (never moves in sync).
- Every squash conserves volume (scaleX up when scaleY down).
- Click spam never breaks the landing.
