Background

This experiment was inspired by a post I came across on Instagram by @alaaoyya, who shared an interactive design along with the prompt behind it. I was intrigued by the result and wanted to recreate the experience myself.

Challenge

However, even with the original prompt from Alaa, I wasn’t able to reproduce the same outcome. This highlighted a common challenge with AI-generated work: prompts are often highly sensitive to nuance and context.

Process

To build the interactive tool and experiment the AI tools, I described the expected behaviours and visual elements on ChatGPT, together with a screenshot of the original instagram-post from Alaa, and ask ChatGPT to write a more accurate prompt for me.

I then brought this refined prompt into Lovable, where I iterated further. Beyond replication, I explored variations: such as adapting the design for a dark background and removing human figures, to test how flexible the interaction could be. These variations were implemented as optional settings for users.

Result

The final result is an interactive prototype that not only recreates the original concept more closely but also extends it with additional customization options.

Explore the interactive version here: Lovable Prototype

Energy-Hands-Prototype-with-dark-background

Prompt

Create a web-based interactive prototype that uses the user’s webcam to detect both hands in real time and render glowing, animated lines between key points on the hands, inspired by the attached reference image.

🧠 Core Concept

The experience should simulate “energy strings” or “light threads” flowing between the user’s two hands. When the user moves their hands, the lines dynamically follow and stretch, creating a fluid, magical visual effect.

⚙️ Technical Requirements

  • Use JavaScript (frontend only)

  • Use MediaPipe Hands OR TensorFlow.js Handpose for real-time hand tracking

  • Use HTML5 Canvas or WebGL (Three.js optional) for rendering visuals

  • Must run in the browser (no backend required)

✋ Hand Detection

  • Detect both hands simultaneously

  • Track key landmarks (e.g. fingertips, palm center)

  • At minimum, use:

    • Fingertips (index, middle, ring, pinky, thumb)

    • Wrist or palm base

✨ Visual Effects

  • Draw multiple glowing lines connecting points between the two hands:

    • e.g. fingertip → fingertip

    • or create a “curtain” of lines between palms

  • Lines should:

    • Be semi-transparent

    • Have a glowing/neon effect

    • Use gradients (e.g. pink → yellow → green like the reference)

    • Slightly animate (flicker, pulse, or flow)

🌈 Interaction Behavior

  • Lines appear only when both hands are visible

  • The distance between hands affects:

    • Line length

    • Brightness or intensity

  • Optional enhancements:

    • Add particle effects along the lines

    • Add trailing motion (like light streaks)

    • Add subtle physics (elastic/stretch feel)

🎨 Design Details

  • Dark or neutral background for contrast

  • Smooth animation (use requestAnimationFrame)

  • Visual style should feel:

    • Soft

    • Magical

    • Responsive

    • Slightly organic (not rigid straight lines)

📦 Output

  1. Full working code (HTML + CSS + JS)

  2. Clear setup instructions

  3. Comments explaining key parts:

    • Hand tracking logic

    • Rendering logic

  4. Keep dependencies minimal and easy to run locally

⭐ Bonus (if possible)

  • Add a UI toggle:

    • Switch between different line styles (straight / curved / particle)

  • Add mobile support (if feasible)

Use the attached image as inspiration for the visual style and interaction feel.

Create a web-based interactive prototype that uses the user’s webcam to detect both hands in real time and render glowing, animated lines between key points on the hands, inspired by the attached reference image.

🧠 Core Concept

The experience should simulate “energy strings” or “light threads” flowing between the user’s two hands. When the user moves their hands, the lines dynamically follow and stretch, creating a fluid, magical visual effect.

⚙️ Technical Requirements

  • Use JavaScript (frontend only)

  • Use MediaPipe Hands OR TensorFlow.js Handpose for real-time hand tracking

  • Use HTML5 Canvas or WebGL (Three.js optional) for rendering visuals

  • Must run in the browser (no backend required)

✋ Hand Detection

  • Detect both hands simultaneously

  • Track key landmarks (e.g. fingertips, palm center)

  • At minimum, use:

    • Fingertips (index, middle, ring, pinky, thumb)

    • Wrist or palm base

✨ Visual Effects

  • Draw multiple glowing lines connecting points between the two hands:

    • e.g. fingertip → fingertip

    • or create a “curtain” of lines between palms

  • Lines should:

    • Be semi-transparent

    • Have a glowing/neon effect

    • Use gradients (e.g. pink → yellow → green like the reference)

    • Slightly animate (flicker, pulse, or flow)

🌈 Interaction Behavior

  • Lines appear only when both hands are visible

  • The distance between hands affects:

    • Line length

    • Brightness or intensity

  • Optional enhancements:

    • Add particle effects along the lines

    • Add trailing motion (like light streaks)

    • Add subtle physics (elastic/stretch feel)

🎨 Design Details

  • Dark or neutral background for contrast

  • Smooth animation (use requestAnimationFrame)

  • Visual style should feel:

    • Soft

    • Magical

    • Responsive

    • Slightly organic (not rigid straight lines)

📦 Output अपेक्षित

  1. Full working code (HTML + CSS + JS)

  2. Clear setup instructions

  3. Comments explaining key parts:

    • Hand tracking logic

    • Rendering logic

  4. Keep dependencies minimal and easy to run locally

⭐ Bonus (if possible)

  • Add a UI toggle:

    • Switch between different line styles (straight / curved / particle)

  • Add mobile support (if feasible)

Use the attached image as inspiration for the visual style and interaction feel.