๐๐ฒ๐บ๐๐๐๐ถ๐ณ๐๐ถ๐ป๐ด ๐ฉ๐ถ๐ฏ๐ฒ ๐๐ผ๐ฑ๐ถ๐ป๐ด
AI helps you build apps fast. This is often called 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 between your fingertips. It turns red when you pinch your fingers.
It looks like magic. It is actually computer science. Here is how it works:
The Eyes Browsers cannot see. I used Google MediaPipe to recognize hands. It finds 21 points on each hand. Running AI in a browser can freeze it. I used WebAssembly and offloaded the work to the GPU. This keeps the UI smooth.
The Brain The app does not use AI to detect a pinch. It uses math. MediaPipe gives every joint a number. The thumb tip is number 4. The index tip is number 8. I use the Pythagorean theorem to find the distance between these two points. If the distance is small, the app registers a pinch.
The Illusion The neon effect is not a video. It is a drawing on an HTML5 canvas. 60 times every second, the app:
- Grabs a webcam frame.
- Clears the canvas.
- Draws the frame with a dark overlay.
- Draws the neon lines.
To get the glow, I draw every line twice. I draw a thick line with a blur effect. Then I draw a thin white line on top. This creates the neon tube look.
AI is a tool to speed up work. It helped me build the base of this project quickly. But reading the code and tracing the math makes you a developer.
Do not just vibe code. Read the code. Break the code. Understand why it works.
Live Demo: [Insert Your GitHub Pages Link] Source Code: [Insert Your GitHub Repo Link]