Back to projects

Project case study

Neon Runner: Cyber Hand

Cyberpunk infinite runner with real-time hand visualization and neon atmosphere.

My roleDeveloper
Technologies used
  • React
  • TypeScript
  • Vite
  • Three.js
  • @react-three/fiber
  • Zustand
  • MediaPipe Tasks Vision
Open video
Neon Runner: Cyber Hand cover
Project cover

Problem

Translate gestures (jump, slide, left/right) into reliable commands.

Render a 3D scene with lighting and post-effects without performance loss.

Solution

Architecture at a glance
  • Camera frames and MediaPipe Tasks Vision landmarks.
  • Hand position for gesture detection and movement.
  • Game state (speed, obstacles, collisions).
Technical decisions
  1. Local hand detection with MediaPipe Tasks Vision in the browser.
  2. Gesture service mapping jump, slide, and lateral movement.
  3. 3D scene with Three.js + R3F and stylized lighting.

Result

Delivered a playable cyberpunk runner with gesture control.

  • MediaPipe + React integration for real-time control.
  • Three.js with R3F for web games.
  • State management with Zustand.
  • Gesture interaction and HUD design.

More about the project

Full case details, collapsed for optional reading.

Full description

Author project to build a gesture-controlled 3D runner with fast response and a neon aesthetic.

React + TypeScript + Vite with Three.js/R3F, Zustand, and MediaPipe Tasks Vision for a gesture-controlled 3D runner.

Kept stylized 3D visuals with stable performance.

Built an extensible base for new mechanics.

Problem

  • Visualize the hand as a cybernetic skeleton in real time.
  • Keep the HUD readable and responsive across screen sizes.
Features and highlights
  • Gesture controls (jump, slide, left/right).
  • Real-time cyber hand skeleton visualization.
  • 3D scene with neon lighting and post-effects.
  • Responsive HUD overlay.
  • Local processing with no data upload.
  • Immersive cyberpunk feel.
  • Low-latency gesture control.
  • Modular architecture with dedicated services and store.
  • Base ready for new levels and challenges.
Technical architecture and data
  • Zustand for global state and reactive HUD.

Technical architecture

How the case was designed as a product

Cyberpunk infinite runner with real-time hand visualization and neon atmosphere.

ReactFrameworkTypeScriptLanguageViteFrameworkThree.jsVisualization@react-three/fiberVisualizationZustandFrameworkMediaPipe Tasks VisionAI

Data used

  • Camera frames and MediaPipe Tasks Vision landmarks.
  • Hand position for gesture detection and movement.
  • Game state (speed, obstacles, collisions).
  • HUD events and gameplay feedback.

Core components

  • Gesture controls (jump, slide, left/right).
  • Real-time cyber hand skeleton visualization.
  • 3D scene with neon lighting and post-effects.
  • Responsive HUD overlay.
  • Local processing with no data upload.

Technical decisions

  • MediaPipe + React integration for real-time control.
  • Three.js with R3F for web games.
  • State management with Zustand.
  • Gesture interaction and HUD design.
How to run
  1. Prerequisites: Node.js 18+.
  2. Clone the repository.
  3. Install dependencies: npm install.
  4. Optional: set APP_API_KEY in .env.local.
  5. Download the model and place it in public/models/hand_landmarker.task.
  6. Run: npm run dev.
  7. Open the browser and allow camera access.
Additional media
Neon runner with gesture control and cyber hand overlay.
Credits

Developed by Matheus Siqueira.

Next projectAd Performance Intelligence

Next.js BI dashboard comparing Google Ads and Meta Ads on simulated data: KPIs, funnel and ROAS.

View full case