Liquid Lens Interaction
I created an interactive web experience that combines WebGL rendering, real-time camera input, and MediaPipe hand tracking.
After enabling the camera, your hand becomes the controller. Move either hand to push and manipulate a liquid-like lens floating on the screen. The lens refracts and distorts the live camera feed beneath it, creating an organic and tactile interaction.
The goal was to make the digital object feel responsive and alive, blurring the boundary between the physical and virtual worlds while maintaining smooth real-time performance.
Try enabling the camera and see how the lens reacts to your movement.
Built with: Framer, WebGL, GLSL, MediaPipe Hands
Liquid Lens Interaction
I created an interactive web experience that combines WebGL rendering, real-time camera input, and MediaPipe hand tracking.
After enabling the camera, your hand becomes the controller. Move either hand to push and manipulate a liquid-like lens floating on the screen. The lens refracts and distorts the live camera feed beneath it, creating an organic and tactile interaction.
The goal was to make the digital object feel responsive and alive, blurring the boundary between the physical and virtual worlds while maintaining smooth real-time performance.
Try enabling the camera and see how the lens reacts to your movement.
Built with: Framer, WebGL, GLSL, MediaPipe Hands