https://github.com/kingcc/rainbow-cat
A fun web component that adds an animated rainbow cat to your webpage. 🌈😺
https://github.com/kingcc/rainbow-cat
cat rainbow web-component
Last synced: about 1 month ago
JSON representation
A fun web component that adds an animated rainbow cat to your webpage. 🌈😺
- Host: GitHub
- URL: https://github.com/kingcc/rainbow-cat
- Owner: kingcc
- Created: 2025-04-02T07:09:46.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-02T08:04:27.000Z (about 1 year ago)
- Last Synced: 2025-09-24T01:57:30.453Z (9 months ago)
- Topics: cat, rainbow, web-component
- Language: JavaScript
- Homepage:
- Size: 8.79 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Rainbow Cat Web Component
A fun web component that adds an animated rainbow cat to your webpage. 🌈😺
The cat follows your mouse/touch movement, changes colors, and jumps when you move your cursor to the top of the screen.
## Features
- 🐱 rainbow cat animation with realistic movement
- 🌈 Rainbow color cycling animation
- 🖱️ Follows mouse and touch movements
- 🦘 Physics-based jumping based on cursor position
## How to Use
### Installation
Simply include the `rainbow-cat.js` file in your project via CDN:
```html
```
### Usage
Add the custom element to your HTML:
```html
```
That's it! The cat will automatically appear and start following your mouse or touch input.
## Customization
You can customize the cat by modifying the CSS variables in the `setupStyles` method:
- `--cat-height`, `--cat-width`: Overall cat dimensions
- `--cat-body-height`, `--cat-body-width`: Body dimensions
- `--cat-head-height`, `--cat-head-width`: Head dimensions
- `--cat-leg-height`, `--cat-leg-width`: Leg dimensions
- Animation timing and colors in the rainbow animation
## Browser Support
Works in all modern browsers that support:
- Web Components
- CSS Variables
- requestAnimationFrame
## License
MIT License