Rain

A webcam-based interactive experience that spawns falling teardrop popup windows when you touch your eye with your index finger.

Built with MediaPipe for real-time hand and face tracking.

How It Works

1. The app accesses your webcam and runs hand + face landmark detection
2. When your index fingertip touches your eye, a small popup window spawns at the eye position
3. The popup falls down the screen with a gravity animation and plays a video on landing

Setup

No build step required. Serve the project with any local HTTP server:

# Python
python3 -m http.server 8000

# Node.js
npx serve .

Then open http://localhost:8000 in Chrome and allow camera + popup permissions.

Tech

• MediaPipe Vision (Face Landmarker + Hand Landmarker)
• Vanilla JS, HTML, CSS
• No dependencies or build tools

Notes

• Works best in Chrome (popup window APIs are required)
• Allow popups when prompted by the browser
• Camera permission is required

Author

Matteo Fontana