Build a hand‑controlled brain visual with Ultron
You can turn your webcam into a glowing, hand-controlled map of your own ideas, and build the whole thing by pasting one prompt into Ultron.
You can turn your webcam into a glowing, hand-controlled map of your own ideas, and build the whole thing by pasting one prompt into Ultron.
You know those mesmerising videos where someone waves their hand and a glowing web of ideas moves with it? This is how you build your own, with your own notes, by pasting one prompt into Ultron. It runs in your browser, uses your webcam, and nothing gets uploaded. No design background and no paid tools needed, about 15 to 20 minutes.
See one in action first
Before you build your own, it helps to play with a live version. 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.
One heads-up: open it in a real browser like Chrome or Safari, not the little in-app browser inside Instagram, because that one often blocks the camera.
What you need
0 of 4
The mega prompt
Copy everything in the box and paste it into Ultron. It will ask you a couple of quick questions, then build the whole thing for you, around your notes, not mine.
Prompt
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 a linked-notes 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 markdown notes files, an export from my notes app, 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.
How to run it
Let Ultron finish building and start the local server for you.
Move your hand to carry the web, open your palm to expand it, make a fist to collapse it, hold up 1, 2, or 3 fingers to change the shape, and rotate your wrist to spin it.
Screen record it, then add your captions, music, and effects after.
The camera only works on the http://localhost link (or a deployed https site). If you just double-click the file, the camera will not turn on. That is normal, always use the localhost link.
Want the real-deal version (TouchDesigner)
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.
TouchDesigner, free for Mac and PC: derivative.ca
MediaPipe plugin, free hand and face tracking into TouchDesigner: github.com/torinmb/mediapipe-touchdesigner
Hand tracking master class, free tutorial: on derivative.ca
Why this is the fun one
Most AI demos are someone typing into a box. This one you control with your body, it is your actual ideas, and it looks like something from a film. That is what makes people stop scrolling. Build it with your own notes, film it once, and you have a piece nobody else can copy because the brain inside it is yours.
Run this on autopilot.
Everything in this guide becomes an agent inside Ultron: set it up once, keep it running. You review, it executes.
