๐๐ฒ๐บ๐๐๐๐ถ๐ณ๐๐ถ๐ป๐ด ๐ฉ๐ถ๐ฏ๐ฒ ๐๐ผ๐ฑ๐ถ๐ป๐ด
AI helps you build apps fast. People call this vibe coding. You prompt an AI and see a complex app appear.
But there is a trap. If you do not understand the code, you cannot fix it. You cannot optimize it. You are not the creator.
I built Neon Bridge. It is a web app that tracks your hands via webcam. It draws neon lines on your fingertips. It turns red when you pinch your fingers.
It looks like magic. Here is the computer science behind it.
- The Eyes Browsers do not see. I used Google MediaPipe to recognize hands. It finds 21 specific points on each hand.
Running AI in a browser can freeze your screen. To prevent this, I used WebAssembly and offloaded work to the GPU. This keeps the UI smooth while the graphics card handles the heavy math.
- The Brain The AI does not know what a pinch is. It only provides dots. I used math to find the gesture.
Every finger joint has an index number. The thumb tip is Landmark 4. The index tip is Landmark 8. I calculated the distance between these two points using the Pythagorean theorem.
If the distance falls below a certain number, the app registers a pinch. No complex AI needed. Just geometry.
- The Illusion The neon glow is not a video. It is a drawing loop using HTML5 Canvas.
Sixty times per second, the app:
- Grabs a webcam frame.
- Clears the canvas.
- Draws a dark layer over the video.
- Draws the lines.
To create the glow, I drew every line twice. I drew a thick line with a heavy shadow. Then I drew a thin white line on top. This creates the bright core of a neon tube.
AI is a great tool for prototyping. It helped me build the skeleton of this project quickly. But understanding the code makes you a developer.
Do not just vibe code. Read the code. Break it. Find out why it works.
Live Demo: [Insert Your GitHub Pages Link] Source Code: [Insert Your GitHub Repo Link]