How do these webcam effects work, and what happens to the image?

Everything runs in the visitor’s browser: hand and face detection happens locally (MediaPipe, in WebAssembly), and no image is ever uploaded or recorded. Every effect starts in demo mode, driven by the cursor, with no camera; the camera is only requested after a click on its button, and it stops on the second click, when the effect leaves the screen or when the tab is hidden.

How to choose, performance and accessibility
  • The page must be served over HTTPS (browsers require it for the camera).
  • The first click downloads the detection engine and its model from a CDN (about 20 MB), then keeps them in cache.
  • Each effect is self-contained: three HTML, CSS and JavaScript blocks to copy, all messages grouped at the top of the script for translation, a unique class prefix.
  • Without a camera, without permission or without WebGL, the effect stays in demo mode and says so.
  • The 11 effects in this category are included in Premium.

Lightning Hands

Blue-white lightning crackles between your fingertips, from one hand to the other, in front of your webcam. Without a camera, the demo follows the cursor and animates on its own.

💡 Perfect for: event kiosks, game launch screens, trade-show booths.

Webcam MediaPipe Hand tracking Canvas 2D Premium

Particle Sphere

A sphere of thousands of dots settles on your hand. Raise fingers to change its colour, spread your hand wide to burst it, show both hands to make it grow.

💡 Perfect for: museum or planetarium lobbies, tech product showcases.

Webcam MediaPipe Hand tracking WebGL Premium

Plasma Orb

An energy orb charges in your open hand: white-hot core, plasma filaments, orbiting rings. Close your fist to release it as a shock wave across the screen.

💡 Perfect for: game launches, energy drinks, event kiosks.

Webcam MediaPipe Hand tracking WebGL Premium

Neon Face Scan

A neon mesh hugs your face and follows your every move, while your holographic double spins in the corner. Hand gestures change the colour; a fist dissolves it.

💡 Perfect for: festival photo booths, avatar creation, museum installations.

Webcam MediaPipe Face tracking Gestures Canvas 2D Premium

Energy Crystal

A faceted crystal floats between your hands and refracts the camera image. Open palm: it charges. Fist: it shatters. Pinch: it re-forms at the size you set.

💡 Perfect for: launch-page heroes, interactive exhibitions, 3D studio showcases.

Webcam MediaPipe Hand tracking WebGL Particles Premium

Runic Fire Circles

One hand: fire filaments wrap around it and let embers rise. Two hands: a rune circle opens on each palm and spins, sized to your hand.

💡 Perfect for: fantasy or tabletop festivals, video-game launches, escape rooms.

Webcam MediaPipe Hand tracking Canvas 2D Premium

Palm Figurines

Open your hand: a 3D figurine lands in your palm on its glowing stand and turns with it. Close your fist to switch to the next one (robot, astronaut, golem).

💡 Perfect for: figurine or toy shops, mascot launches, collector pages.

Webcam MediaPipe Three.js Hand tracking Premium

Finger Frame Filter

Shape a frame with your fingers: whatever it holds turns thermal, pop art, X-ray, neon or night vision. Close and reopen the frame to switch filters.

💡 Perfect for: museum kiosks, interactive photo booths, event waiting screens.

Webcam MediaPipe Hand tracking WebGL Premium

Hand Cursor

Drive an interface without touching it: your index finger moves the cursor, a pinch clicks, an open hand swipes, a fist lets go. Without a camera, a ghost hand plays the demo.

💡 Perfect for: museum or trade-show kiosks, interactive shop windows, touch-free menus.

Webcam MediaPipe Hand tracking Touch-free Premium

Head-Tracked Parallax

The top of your page becomes a 3D window: move your head in front of the webcam and the scene shifts in depth, like looking through real glass. Without a camera, the mouse plays the head.

💡 Perfect for: product-launch heroes, 3D studio portfolios, showrooms.

Webcam MediaPipe Face tracking 3D parallax Canvas 2D Premium

Air Drawing

Raise your index finger in front of the webcam and draw in the air: a smooth neon line follows your fingertip. Two fingers lift the pen, a fist erases, then download your drawing.

💡 Perfect for: trade-show guestbooks, signature walls, booth entertainment.

Webcam MediaPipe Hand tracking Canvas 2D Neon Premium

Frequently Asked Questions

Does the camera turn on by itself? +

No. Every effect starts in demo mode, driven by the cursor or a finger, with no camera. The camera is only requested after a click on the “Turn camera on” button, with the browser permission prompt, and it stops on the second click, when the effect leaves the screen or when the tab is hidden.

Are webcam images sent anywhere? +

No. Hand and face detection runs in the visitor’s browser (MediaPipe, in WebAssembly). No image is sent to a server or recorded. Only the detection engine and its model are downloaded once from a CDN, on the first click (about 20 MB), then cached.

Which browsers and devices are supported? +

Recent Chrome, Edge, Safari and Firefox, on desktop and mobile, as long as the page is served over HTTPS (browsers require it for the camera). Without a camera, without permission or without WebGL, the effect stays usable in demo mode and shows a clear message instead of breaking.

How do I add one of these effects to my site? +

Copy the three HTML, CSS and JavaScript blocks into your page: each effect is self-contained, with no framework and no file to host. Four things to plan for, also listed at the top of the script: your page must be served over HTTPS (browsers require it for the camera); on the first click on "Turn camera on", the detection module (about 20 MB) is downloaded from cdn.jsdelivr.net and storage.googleapis.com, two addresses to allow in your CSP security rule (script-src and connect-src); if your site sends a Permissions-Policy header that blocks the camera, allow it with camera=(self); and if the effect sits inside an iframe, give it allow="camera". All messages sit at the top of the script so you can translate them, and the CSS class prefix avoids any clash with your styles.

Are these effects accessible? +

States are announced in an aria-live region, the camera button exposes its pressed state, no full-screen flash is used and prefers-reduced-motion freezes the autonomous animations. A “high contrast” mode darkens the video and makes the controls opaque.