React OIIA Cat 🐱

An interactive React component featuring a cat that smoothly follows your cursor with animations and sound effects.

🎮 Live Demo

Try the interactive demo to see the cat in action!

Features

• 🎯 Smooth cursor following with buttery-smooth lerp animation
• 🎵 Automatic sound effects during movement
• 📱 Full touch device support
• 🎨 Zero configuration required - works out of the box
• 🚀 Lightweight and performant
• 📦 TypeScript support included

Installation

npm install react-oiia-cat

Basic Usage

import { Cat } from "react-oiia-cat";

function App() {
  return (
    <div>
      <Cat />
    </div>
  );
}

The component works out of the box with default settings and requires no props.

The cat uses these default assets:

• /oiia-cat-move.gif - Animation during movement
• /oiia-cat-static.gif - Static image when idle
• /oiia-oiia-sound.mp3 - Sound effect during movement

Advanced Usage

The component is designed to work perfectly with zero configuration, but you can still customize the styling:

/* Customize the cat appearance */
.cat img {
  width: 100px;
  height: 100px;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
}

Styling

The component includes default CSS, but you can customize it:

.cat {
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  transition: none;
}

.cat img {
  width: 64px;
  height: 64px;
  display: block;
}

/* Custom styling */
.my-custom-cat img {
  width: 100px;
  height: 100px;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
}

Required Assets

The package includes default assets. Make sure these files are available in your public folder:

• /oiia-cat-move.gif - Animation for when the cat is moving
• /oiia-cat-static.gif - Static image when the cat is not moving
• /oiia-oiia-sound.mp3 - Sound effect during movement

You can download these assets from the demo repository or create your own with the same file names.

TypeScript

This package includes TypeScript definitions. The component requires no props:

import { Cat } from "react-oiia-cat";

const MyComponent: React.FC = () => {
  return <Cat />;
};

Browser Support

• Modern browsers with ES6+ support
• React 16.8+ (hooks support required)
• Touch devices supported

License

MIT

Contributing

Issues and pull requests are welcome on GitHub.