Kawaii Cat Loading Screen

Project Overview

This project creates an animated, kawaii-style cat face loading screen using HTML, CSS, and JavaScript. It's designed to be a visually appealing placeholder while content is loading. The animation is primarily CSS-based, making it lightweight and performant. The project uses Vite as a fast development server and build tool.

Table of Contents

• Project Overview
• Technology Stack
• File Structure
• Installation
• Usage
• Customization
• CSS Styling Highlights
• Animations
• Contributing
• License

Technology Stack

• HTML: Provides the basic structure and elements for the cat face.
• CSS: Handles all styling, positioning, and animations.
• JavaScript: Minimal JavaScript for potential future enhancements (e.g., hiding the loading screen after content loads).
• Vite: Used as a fast development server and build tool.

File Structure

/
├── index.html        # Main HTML file
├── script.js         # JavaScript file (currently minimal)
├── style.css         # CSS styles and animations
├── package.json      # Node.js package file
└── README.md         # Project documentation

Installation

1. Clone the repository:

   git clone https://github.com/CLOUDWERX-DEV/pinkpixel-cat-1  # (If cloned from a repo)

   Or simply download the project files.

2. Navigate to the project directory:

   cd pinkpixel-cat-1

3. Install dependencies:

   npm install

Usage

1. Start the development server:

   npm run dev

2. Open your browser and visit the provided URL (usually http://localhost:5173 or similar). You should see the animated cat loading screen.

Customization

• Colors: Modify the background-color and color properties in style.css to change the colors of the cat, background, and text.
• Sizes: Adjust the width and height properties of the various elements (e.g., .cat-face, .eye, .whisker) to change their sizes.
• Animations: Tweak the @keyframes rules in style.css to modify animation timings, durations, and effects. You can add or remove animations as needed.
• Font: Change the font-family in the .text class to use a different font. The current font is 'Gluton', loaded from Google Fonts.
• Text Position: The text position is controlled by the bottom property of the .text class within a relatively positioned container (animation-container).

CSS Styling Highlights

The style.css file contains detailed styling for each element of the cat animation. Key features include:

• Centering: The cat animation and text are centered both horizontally and vertically on the page using Flexbox.
• Kawaii Styling: Soft colors, rounded shapes, and playful animations contribute to the overall kawaii aesthetic.
• CSS Animations: Animations like blinking, ear wiggling, whisker twitching, bobbing, mouth movement, tail wagging, paw movement, and eye sparkle are all implemented using CSS @keyframes.
• Relative Positioning: A container div (animation-container) uses relative positioning, allowing the text to be positioned absolutely relative to it, ensuring the text stays locked with the animation.
• Font: Uses the 'Gluton' font from Google Fonts for a bubbly, kawaii look. The font size is increased, and text shadow is added for better definition.

Animations

The following CSS animations are used to bring the cat to life:

• blink: Makes the eyes blink.
• wiggleLeftEar / wiggleRightEar: Wiggles the ears.
• whiskerTwitch: Twitches the whiskers.
• bob: Makes the cat head bob up and down.
• mouthMove: Subtly animates the mouth.
• tailWag: Wags the tail.
• pawMove: Moves the paws.
• sparkle: Makes the highlights in the eyes sparkle.

Contributing

Contributions are welcome! If you'd like to contribute to this project, please follow these steps:

1. Fork the repository.
2. Create a new branch for your feature or bug fix: git checkout -b my-feature-branch
3. Make your changes and commit them: git commit -m "Add my feature"
4. Push your changes to your fork: git push origin my-feature-branch
5. Create a pull request to the main repository.

License

This project is licensed under the MIT License - see the LICENSE file for details (Note: You'd need to create a LICENSE file if you want to specify a license). If no LICENSE file is present, the project is unlicensed and all rights are reserved by the author.