Mascot Animation
An animated brand character that communicates personality, guides users through flows, and creates emotional connection through motion and expression.
Plain English
A mascot is a product's face. When it works, it makes a product feel alive — something to have a relationship with rather than just use. Duolingo's owl sulks when you miss a day. Mailchimp's Freddie gives a thumbs up when you send a campaign. Notion's mascot blinks on empty states. These are not decorations — they are emotional anchors. The motion is the message: a mascot that bobs gently says 'we are friendly'. One that snaps to attention says 'something needs your help'. The key discipline is restraint: the mascot serves the user's task, never the designer's amusement.
Technical
Implement mascots via Rive (state machine, most capable), Lottie (playback-only, simpler), or CSS/SVG animation (no dependencies). Rive enables full reactivity — cursor tracking, input-driven expressions. Lottie suits pre-scripted flows (empty states, success). CSS/SVG for simple loops (idle bob, blink). Idle animations must loop seamlessly (first and last frame identical) and stay under 3 s. Reactive states (blink, look, wave) should fire on user events, not on a timer. Always provide a static image fallback in <noscript> and for prefers-reduced-motion.
Live Demo
Mascot animation — idle bob + cursor tracking + reactive states
Move your cursor around — the mascot tracks it. Click to trigger the wave state.
Usage
✓ Good usage
An onboarding mascot that idles quietly, looks toward the active form field as the user tabs through it, waves when the form is submitted successfully, and sits quietly on other pages — always present but never demanding attention.
✗ Bad usage
A mascot that plays a 2-second entrance animation every time the page loads, or one that loops an attention-seeking animation continuously — mascots earn affection through restraint, not persistence.
Recommended values
- Idle loop: 2–3 s, very subtle (0.5–2% scale change, slow blink every 4–6 s)
- Reaction animation: 150–300 ms onset, spring back to idle in 400–600 ms
- Eye tracking: lerp cursor position at 0.1–0.2 factor for natural lag
- Wave/celebrate: 600–900 ms, run once then return to idle (no loops)
- File size target: < 80 KB for inline mascots, < 300 KB for hero features
- Accessibility: prefers-reduced-motion → freeze at idle frame
Common mistakes
- Mascot animation on a serious B2B or enterprise product — trust signals matter more than personality in regulated industries.
- Continuous looping that cannot be paused — violates WCAG 2.1 Success Criterion 2.2.2.
- Expression states that contradict the product context (mascot celebrating when a form fails).
- No reduced-motion fallback — cursor-tracking and springy mascots are prime offenders for vestibular disorders.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Add a mascot to the empty state: use an SVG or Lottie file at 120×120px centered in the empty state container. Idle animation: gentle bob (translateY -4px to 0, 2s ease-in-out infinite). On the CTA button hover, trigger a 'look' animation (eye movement toward button). On CTA click, trigger a 'wave' animation (single run, 700ms, then return to idle). Wrap the whole mascot in a motion-safe: block so it only animates when prefers-reduced-motion is no-preference.