Brainrot-Scroller

• 

  Intro

• 

  Meme Generation

Inspiration

Playful, lightweight interactivity — combine scrolling meme galleries with live face-tracking so the app responds to users’ smiles and makes passive meme-browsing into a social, reactive experience.

What it does

Displays an endless scrolling stream of meme images and detects user smiles via webcam. When a smile is detected the UI and audio feedback can react, creating a live, engaging viewing experience.

How we built it

Single-page UI wired to a canvas renderer that write captions and scrolls memes, a FaceTracker module that uses the webcam to detect smiles, and a small worker for background audio/processing.

Challenges we ran into

Managing webcam permissions and cross-browser camera differences, keeping face-tracking performant while rendering smooth scroll animations, and synchronizing audio/worker tasks without blocking the UI.

Accomplishments that we're proud of

Working face-tracking integration that responds to smiles, smooth continuous meme scrolling, and a compact structure that isolates rendering, tracking, and background work for easier iteration.

What we learned

Practical trade-offs between detection accuracy and CPU use, how to offload tasks to a Web Worker, and patterns for keeping canvas rendering and media input synchronized and responsive.

What's next for Brainrot-Scroller

Improve detection robustness and mobile support, add sharing and persistent playlists, refine accessibility and privacy controls, and experiment with richer audio/visual reactions to expression events.

Built With

• canvas
• css3
• html5
• javascript
• react
• vite