Gesture Carousel is an experimental Framer component built around touchless interaction. The original idea started with eye-tracking and gaze-based effects, but the results were not reliable enough for a smooth browsing experience. That exploration evolved into a webcam-powered carousel controlled by hand gestures.
The component uses React, Framer, framer-motion, and MediaPipe Tasks Vision to detect hand landmarks in real time through the webcam. A tilt-based gesture system translates hand movement into carousel navigation, with gesture hygiene built in: transition locks, cooldowns, neutral re-arming, missing-hand tolerance, and fallback arrows for manual control.
Camera access is optional and only used for gesture detection. The experience is designed as a dark editorial carousel, combining cinematic motion, depth-stacked slides, and a simple onboarding flow that explains the ideal conditions for hand tracking.
Created entirely with Framer Agents 3.0 using Claude Opus 4.8.
Gesture Carousel is an experimental Framer component built around touchless interaction. The original idea started with eye-tracking and gaze-based effects, but the results were not reliable enough for a smooth browsing experience. That exploration evolved into a webcam-powered carousel controlled by hand gestures.
The component uses React, Framer, framer-motion, and MediaPipe Tasks Vision to detect hand landmarks in real time through the webcam. A tilt-based gesture system translates hand movement into carousel navigation, with gesture hygiene built in: transition locks, cooldowns, neutral re-arming, missing-hand tolerance, and fallback arrows for manual control.
Camera access is optional and only used for gesture detection. The experience is designed as a dark editorial carousel, combining cinematic motion, depth-stacked slides, and a simple onboarding flow that explains the ideal conditions for hand tracking.
Created entirely with Framer Agents 3.0 using Claude Opus 4.8.