Clap Cuayo

An interactive web experience featuring Cuayo. Click the screen to make her clap! Designed with a cinematic 9:16 vertical layout, perfect for both mobile and desktop viewing.

Features

• Interactive Gameplay: Seamlessly switches between an endless idle loop and a clap reaction video upon interaction.
• Persistent Counter: Your clap count is saved automatically to localStorage. Never lose your progress!
• Cinematic Ratio: Enforces a strict 9:16 aspect ratio regardless of the device, simulating a premium mobile app experience on desktop.
• Responsive Design: Text and UI elements scale dynamically with the viewport height (vh), ensuring readability on all screen sizes.
• Optimized Performance:
  • Assets converted to WebM for faster load times and smaller file sizes.
  • Smart Preloading system ensures videos are ready before the app is revealed.
  • Smooth Transitions: Custom fade-out loading screen to prevent jarring render pops.

Tech Stack

• Framework: React
• Build Tool: Vite
• Styling: Tailwind CSS (v4)

Getting Started

1. Clone the repository

   git clone https://github.com/friyn/ClapCuayo.git
   cd ClapCuayo

2. Install dependencies

   npm install

3. Run the development server

   npm run dev

4. Build for production

   npm run build

Project Structure

• src/App.jsx: Main logic for video switching, state management, and interaction handling.
• src/index.css: Global styles, animation keyframes (shake, fade), and Tailwind imports.
• public/: Static assets (idle.webm, clap.webm, loading.webp).

Asset Credits

• Character: Cuayo
• Videos: Custom animations provided by the team.

---

Made with ❤️ by Friyn