Open Cindy’s Hand Brain demo in a normal desktop browser. Click Enter and allow the camera if you want to try hand control. The on-screen legend explains palm expansion, fist contraction, finger-count shapes and wrist rotation. Close the tab when you finish.
The visual is a graph of topics, not a working brain, a memory engine or proof of a particular TouchDesigner implementation. The build below uses a browser canvas and MediaPipe hand landmarks. Its gesture mapping is our design choice, not a built-in Claude feature.
Build a complete local browser demo in this empty project folder from the topic list I paste below. Return the implemented files, exact startup command and working localhost URL. Ask at most three questions only if a missing answer blocks the build; otherwise use the defaults below. Do not deploy the generated application or add topic storage, analytics or uploads to it. I understand that this build conversation is handled by the configured model provider.
Make a dark canvas with a labelled network: one node per supplied topic, edges only for relationships supplied in my list, and a compact readable layout. Do not invent factual relationships. If my input has names but no groups or connections, ask one necessary question for grouping before building; offer a clearly labelled sample grouping for my approval. Start with fewer than 80 nodes. Use cool blue and green nodes with restrained pink highlights, smooth animation and upright readable labels.
Use the current official MediaPipe Hand Landmarker Web implementation at https://developers.google.com/edge/mediapipe/solutions/vision/hand_landmarker/web_js. Pin the JavaScript package and WASM assets to the same tested version and load a compatible hand-landmarker model. Track one hand in VIDEO mode; process a frame only when the video time changes. Keep inference from freezing the interface by throttling or using a worker.
Add an explicit Start camera button, explain camera permission before requesting it and add a Stop camera button that stops every media track. Process frames locally; do not transmit frames or topic data. List the domains from which libraries or models are downloaded.
Mirror the camera and graph coordinates consistently. Smooth the palm position so the graph follows it without jumping. Map a normalized open-hand measure to expansion and a closed hand to contraction; calibrate against palm size rather than hard-coded pixels. Add distinct layouts for one, two and three raised fingers only after reliable open/closed tracking works. Rotate the graph gently from wrist orientation. These gestures are derived application logic, not classifications that the landmarker automatically supplies.
Ship a mouse/touch fallback with drag-to-move and an expansion slider so the demo remains usable without a camera. Add a visible status for model loading, camera denied, no hand found and tracking active. Start the local server bound to 127.0.0.1, using a free port. Never expose the server on the network by default.
Run available build checks, open the page if browser tools exist, inspect console errors and fix them. Exercise the mouse fallback automatically. For the hardware-only check, tell me the exact four actions: allow camera, open palm, close fist, stop camera. Do not claim those were tested without a real webcam. Include a short README with the startup and stop commands, dependency versions and the source of the hand model.
My topics: [paste your list here]Google’s Hand Landmarker Web guide documents landmark detection, model setup and video processing. The graph design, smoothing and open-palm controls above are a custom application built on those landmarks.
Claude Code quickstart covers installing, signing in and working in a folder. Cindy’s existing demo is the visual reference. This guide does not require TouchDesigner or claim that the original reel was built with it.