This app tracks your movements in real time with MediaPipe and outputs a skelaton and aura that matches your dancing! The colors (customize with button inputs) sync with your music to add a free and fun mirror to your dance party!
An interactive web app that combines a click counter with real-time WebGL visual effects and webcam integration. Built with JavaScript, HTML, and CSS, this project demonstrates DOM manipulation, animation, and live video processing — all wrapped in a clean, modern UI.
- Interactive Counter – Increment and track counts with a simple button click.
- WebGL Aura – Animated background effect rendered using WebGL for a dynamic, glowing aesthetic.
- Webcam Integration – Displays live webcam feed layered with output effects.
- Responsive Layout – Scales to different devices and maintains a centered experience.
- Hover Effects – Subtle color changes and drop shadows for interactive elements.
If you’d like to brighten things up from the current dark theme (#242424 background, blue hover), try:
- Background:
#1e1e2f→ Deep indigo for a softer dark mode - Primary Accent:
#ff6f61→ Warm coral for buttons and hover states - Secondary Accent:
#ffd166→ Soft yellow for drop-shadows and highlights
├── index.html # Main HTML file
├── main.js # App initialization & webcam/WebGL logic
├── counter.js # Counter click handling
├── style.css # Styling, layout, and color themes
├── javascript.svg # Logo asset
└── README.md # Documentation
- Any modern web browser (Chrome, Firefox, Edge, Safari)
- Webcam access (optional, for live video features)
- Clone this repository:
git clone https://github.com/yourusername/ai-counter-webgl.git cd ai-counter-webgl - Run the Program:
npm run dev