Interactive Text ✋

three.js mediapipe svelte webgl
launch project

A stunning Particle Text Dispersion experience with AI hand tracking. Touch the text and watch thousands of particles scatter and reform in real-time!

Technologies Used

  • Three.js: Beautiful 3D particle system with 2000+ particles.
  • MediaPipe Hands: Real-time AI finger tracking.
  • Canvas 2D Sampling: Convert text to particle coordinates.
  • Spring Physics: Smooth push and reform animations.
  • Svelte Stores: Centralized state management.

Key Features

  • 👆 Touch Dispersion: Particles scatter away from your fingertip.
  • 🔄 Spring Reform: Particles smoothly return to text shape.
  • 🎯 Precise Tracking: Camera unprojection for accurate 3D mapping.
  • ✨ Real-time Physics: 60 FPS physics simulation.
  • 🎨 Particle Beauty: Thousands of glowing points form text.

How It Works

  1. Text is rendered to a 2D canvas and sampled for pixel positions
  2. Each white pixel becomes a 3D particle with physics properties
  3. Your finger position is projected into 3D space via camera unprojection
  4. Nearby particles receive push forces away from finger
  5. Spring forces pull particles back to their original positions
  6. Damping smooths the motion for natural feel

Architecture Highlights

  • Modular Config: All physics parameters in centralized config.ts
  • JSDoc Documentation: Comprehensive code documentation
  • Clean Separation: Hand tracking, physics, and rendering are decoupled

Experience the magic of interactive WebGL and AI-powered particle physics!