Clawcean

arcade claw machine game

Inspiration

As emerging research finds that microplastics now exist throughout the environment and in our bodies, it is crucial to understand where they come from and what we can do to minimize them. This starts from teaching students about microplastics early on, which is what inspired us to build Clawcean. Clawcean is a claw machine game that combines a fun retro-inspired arcade experience with information about common household microplastics to introduce middle school-age students to ways they can help combat ocean pollution in their own lives.

What it does

Game loop (5 dives)

Lesson: a picture panel with 3 short facts, then a quick check question. A right answer earns +50 points and a bonus try for that dive.

Sonar sweep: the claw is "tuned" to that dive's plastics, and matching items light up with a glow ring and a ◆ marker. The marker is a shape, so players don't need to see color.

Grab: move, then drop, with 20 seconds per turn. Each dive gives 1 try (2 with a right answer), and a miss costs a try. Off-center grabs can slip, and grabbing an unlit item fails. Streaks earn bonus points, and rescuing every lit item earns +150.

Catch card: each rescued item shows its ingredients (plastic ones flagged), why it harms the ocean, how to get rid of it safely, a better swap, and Gemini tips for the player's own town.

Final report: score, items rescued out of 20, stars for each dive, a before/after slider of the tank, a personal ocean pledge, and the shared leaderboard.

Content: 5 dives, 20 items

The Bathroom Shelf (microbeads & glitter)
Laundry Day (synthetic fibers)
Takeout & On-the-Go (single-use plastics)
Hidden Plastics (cigarette filters, wipes, masks, tea bags)
Roads & Harbors (tire wear, paint, fishing line, balloons)

Ocean guides: players pick a guide (a pirate crab, a calm jellyfish, a 100-year-old turtle, a hyped dolphin or a cheerful coral), with pronouns shown on each. The guide chats about plastics through Gemini, reads cards aloud in their own ElevenLabs voice, and reacts in character during play. Everything they say also appears as a caption.

The ocean heals: as players clean up, the water clears, microplastic specks fade, fish return, and sea friends move back into the tank.

Label Lens: players photograph a real product label or clothing tag, or paste the ingredient list, and Gemini flags any plastic ingredients. Any product that contains plastic can be dropped into the tank as a bonus catch (My Shelf).

Accessibility: Calm mode (no timer, wider grip, tap-to-aim, jump to the next target), pause at any time, full keyboard play, screen-reader support, captions, Auto-read, high contrast, larger text, an Easy-read font and reduced motion.

Quick demo: a one-dive version with a checklist of every feature, for first-time players and judges.

How we built it

We used HTML, CSS and JavaScript without any frameworks, and drew the claw machine on an HTML canvas. We made the characters and items as 16×16 pixel art. A small Node server connects the game to Gemini and ElevenLabs, so our API keys never reach the browser. Gemini powers the guide chats, reads label photos in Label Lens, and writes local disposal tips and each player's pledge. ElevenLabs gives each guide their own voice, which starts speaking in about a second. We built in accessibility from the start: keyboard play, screen-reader support, captions, Calm mode and an Easy-read font. The game is deployed on Vercel, with Upstash Redis for the shared leaderboard. We used Claude Code to help plan, build and test.

Challenges we ran into

keeping the game both fun and evocative of actual arcade games while still being informative for young students
fixing our voice features after deployment
maintaining accessibility through our typefaces, user interface, and game features for a variety of users and abilities

Accomplishments that we're proud of

Label Lens: a real product where users can upload photos → Gemini flags the plastic → it appears in the tank to catch. This teaches a lesson that connects Clawclean to real life objects that players interact with in real life.
every feature works offline, so the demo can't break.
accessibility was designed in from the start: Calm mode, captions and keyboard play.
five guides with distinct personalities and voices.

What we learned

Just how many everyday products contain plastic ingredients, and how to design for a younger audience while balancing reading level, color choices, our chatbot, and the speech support in the process.

What's next for Clawcean

Going forward we hope to add multilingual text and voice support for a wider student population, and add more modules addressing plastic categories like toys, etc. We also want to incorporate formats to make Clawcean easier to use in the classroom, like class codes, team leaderboards, and guides for teachers.