Before you build your own, go play with the live one I made: cindyzhu.com.au/brain. Open it on a laptop in Chrome and allow the camera, then open your palm to expand the web, make a fist to collapse it, hold up 1, 2, or 3 fingers for different shapes, and rotate your wrist to spin it.
Copy everything in the box and paste it into Claude Code. It will ask you a couple of quick questions, then build the whole thing for you, around your notes, not mine.
Build me a single, self-contained HTML file called brain.html that turns my webcam into a hand-controlled, expanding map of my own notes. Think of the Obsidian graph view, but it follows my hand in real time, expands when I open my palm, and spins when I rotate my wrist. I am going to film myself using it.
Before you build, ask me these 3 questions, then build it:
1. Where my notes live: a folder of text or Obsidian files, a Notion export, or I will paste a list of 12 to 20 topics with a few sub-notes under each. Use MY real notes as the graph. Do not invent generic placeholder data.
2. Which side of the frame I will sit on, left or right, so you keep that side bright for my face.
3. My colour vibe (suggest a default if I do not care).
Then build it with these exact requirements:
TRACKING
- Use Google MediaPipe Tasks Vision (hand landmarker) from a pinned CDN version, GPU delegate, running mode VIDEO, one hand.
- Mirror the webcam so moving my hand feels natural.
THE GRAPH (my second brain)
- Turn my notes into nodes (one per note or topic) and edges (links between them, and group sub-notes under their topic). Make the most-connected topics bigger and brighter.
- Lay it out with a simple force-directed layout so related notes clump into glowing clusters joined by thin lines. Cap it around 150 to 250 visible nodes for smoothness.
HAND CONTROLS
- The whole graph hangs off my palm and follows my hand as I move.
- Opening my palm wider makes it expand bigger. A fist collapses it smoothly down to a single glowing seed.
- Finger count changes the shape: 1 finger is a star radiating from the centre, 2 fingers is separate clusters, 3 fingers is a dense mesh, and an open hand is the full bloom that also reveals more sub-notes as it grows.
- Rotating my wrist spins the graph with me. Keep all text labels upright and readable.
LOOK (for filming)
- Dark background. Paint a left-to-right dark gradient over the webcam so the graph side stays dark and readable, and the side I sit on stays bright and flattering for my face.
- Glowing nodes and edges using additive blending, with subtle motion so it feels alive.
PERFORMANCE (must stay smooth)
- Redraw each frame, use additive lighter compositing for the glow instead of heavy blur, batch edges by colour into single paths, skip anything off-screen, and keep the node count capped.
ROBUSTNESS (avoid the common bugs)
- Define all data and variables before any function that uses them runs. Do not call the layout function before the node data exists.
- Add a click to start button that requests the camera, because browsers only allow the camera after a click. Show a clear on-screen message if the camera fails.
- The camera only works over http://localhost or https, never from double-clicking the file.
WHEN DONE
- Start a local server for me (run python3 -m http.server 8000), then tell me to open http://localhost:8000/brain.html in Chrome, click start, and allow the camera.
- If anything errors, open the page in a browser yourself, read the console, fix it, and only then tell me it is ready.The browser build is the easy way in. The truly cinematic versions you see online are usually made in TouchDesigner, a free node-based visual tool, with hand tracking piped into it.