---
title: "Animated Cat Mascot — Framer component · Best of Framer"
description: "$17.00 · Framer component · by Ekaterina Pavlova · Interactive. Cat that reacts to your interface"
canonical: "https://framer.elliotli.dev/component/animated-cat-mascot"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Animated Cat Mascot

# Animated Cat Mascot

Cat that reacts to your interface

[View on Framer](https://framer.com/marketplace/components/animated-cat-mascot/?via=elliot-li)

![Animated Cat Mascot preview image 1](https://framer.elliotli.dev/og/component/animated-cat-mascot/f66b698016d9104a/1600x1200.jpg)

## Summary

Cat that reacts to your interface

## Description

A minimal cat that watches the cursor and reacts to your page.

**Features**

-   Eyes follow the cursor, random blinking, idle breathing and tail sway
    
-   Four emotions: idle, happy, sad, error, each with its own eyes, mouth, tail and posture
    
-   Speech bubble with your own text
    
-   Covers its eyes when a password field is focused, no setup needed
    
-   Squints when tapped
    
-   Appears on scroll and tilts with scroll direction
    
-   Hide animation: hops and drops into a hole that closes behind it
    
-   Cut out face, so any background shows through
    
-   Respects reduced motion settings
    
-   Static on canvas and in exports, keeps the editor fast
    
-   React and Framer only, no other libraries
    

**Customization Options**

-   Color: one control repaints the whole cat
    
-   Emotion: idle, happy, sad, error
    
-   Message text, plus any font from your project
    
-   Bubble width, gap, radius, fill, text color, shadow
    
-   Toggles: cursor tracking, blinking, tap to squint, appear on scroll, tilt on scroll, shadow, hide cat
    
-   Animation speed
    
-   Event name for external control
    

**How to Use**

1.  Drop the cat on the canvas
    
2.  Pick a color, choose an emotion, type your message
    
3.  Place it near a login form and it covers its eyes on its own
    
4.  To connect it to buttons or inputs, use the included overrides or send one line of code
    
5.  Full documentation is included with the files
    

**Use Cases**

-   Login and signup forms
    
-   404 and empty states
    
-   Landing page mascot
    
-   Onboarding and welcome screens
    
-   Waitlist and coming soon pages
    
-   Portfolio and personal sites
    
-   Error and success feedback in forms
    
-   Playful sections that invite visitors to click
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #1506

## Details

- **Author**: Ekaterina Pavlova
- **Price**: $17.00
- **Published**: 2026-08-24
- **Updated**: 2026-08-24
- **Added**: 2026-08-24
- **Categories**: Interactive

## More like this

-   [Drawing component](/component/drawing-component) — Ariel Barrios · Free — Just a free drawing component
-   [Code Comparison](/component/code-comparison) — Syauqizaidan Khairan Khalaf · $5 — Before and after code side by side
-   [Voice Testimonials](/component/voice-testimonials) — valorsic studio · $15 — Voiceover & typewriter reviews
-   [Product Tour Pro](/component/product-tour-pro) — Oddframe · $10 — Showcase Products Step by Step