Skip to content

SnapCade

This project is a full-stack React/Vite app that turns group selfies into a personalized browser arcade game: users capture or upload photos, optionally share geolocation, and the Express backend streams a four-agent Gem

Code Video Cerebral Valley

Core trick

Four Gemini agents detect people and setting in a photo, then emit SVG avatars and a game config that a canvas engine plays.

Tags

visioncreative/music

Description

This project is a full-stack React/Vite app that turns group selfies into a personalized browser arcade game: users capture or upload photos, optionally share geolocation, and the Express backend streams a four-agent Gemini 3.5 Flash pipeline that detects people, props, facial boxes, clothing, colors, and setting; generates custom SVG bobblehead avatars and a contextual backdrop; chooses one of several game templates; and assembles a playable game configuration. The frontend guides users through landing, camera capture, live AI analysis, reveal, and gameplay stages, crops participant faces client-side, persists sessions and UI preferences in localStorage, and renders the final game in an HTML5 canvas with switchable avatar styles, synthesized audio, score tracking, powerups, hazards, leaderboards, and multiple mechanics such as falling-item collection, side-scroller jumping, maze play, and shooter-style action.
sumeetpardeshi/hangout★ 00 forksTypeScriptCreated May 23, 2026 · last push May 24, 2026

README excerpt

<div align="center">
<img width="1200" height="475" alt="GHBanner" src="https://ai.google.dev/static/site-assets/images/share-ais-513315318.png" />
</div>

# Run and deploy your AI Studio app

This contains everything you need to run your app locally.

View your app in AI Studio: https://ai.studio/apps/b3369bf1-bc1d-4dce-b712-d8750f0350d0

## Run Locally

**Prerequisites:**  Node.js


1. Install dependencies:
   `npm install`
2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
3. Run the app:
   `npm run dev`

Team