Comment fonctionnent ces effets à la webcam, et que devient l'image ?

Tout se passe dans le navigateur du visiteur : la détection des mains et du visage tourne localement (MediaPipe, en WebAssembly), aucune image n'est envoyée ni enregistrée. Chaque effet démarre en mode démo, piloté par le curseur, sans caméra ; la caméra n'est demandée qu'après un clic sur son bouton, et elle s'arrête au second clic, quand l'effet sort de l'écran ou quand l'onglet est masqué.

Comment choisir, performances et accessibilité
  • La page doit être servie en HTTPS (le navigateur l'exige pour la caméra).
  • Le premier clic télécharge le moteur de détection et son modèle depuis un CDN (environ 20 Mo), ensuite gardés en cache.
  • Chaque effet est autonome : trois blocs HTML, CSS et JavaScript à copier, messages regroupés en tête du script pour les traduire, préfixe de classes unique.
  • Sans caméra, sans autorisation ou sans WebGL, l'effet reste en mode démo et l'explique.
  • Les 11 effets de cette catégorie sont inclus dans Premium.

Lightning Hands

Des éclairs bleu-blanc crépitent entre les bouts de vos doigts, d'une main à l'autre, devant votre webcam. Sans caméra, la démo suit le curseur et s'anime toute seule.

💡 Idéal pour : borne d'événement, écran de lancement de jeu, stand de salon.

Webcam MediaPipe Suivi des mains Canvas 2D Premium

Particle Sphere

Une sphère de milliers de points se pose sur votre main. Levez des doigts pour changer sa couleur, ouvrez grand la main pour la faire éclater, montrez deux mains pour la faire grandir.

💡 Idéal pour : accueil de musée ou de planétarium, vitrine de produit tech.

Webcam MediaPipe Suivi des mains WebGL Premium

Plasma Orb

Un orbe d'énergie se charge dans votre main ouverte : cœur incandescent, filaments de plasma, anneaux en orbite. Fermez le poing pour le libérer en onde de choc.

💡 Idéal pour : lancement de jeu, boisson énergisante, borne d'événement.

Webcam MediaPipe Suivi des mains WebGL Premium

Neon Face Scan

Un maillage néon épouse votre visage et suit vos mouvements, pendant que votre double holographique tourne dans le coin. Vos gestes de la main changent la couleur ; le poing le dissout.

💡 Idéal pour : cabine photo de festival, création d'avatar, installation de musée.

Webcam MediaPipe Suivi du visage Gestes Canvas 2D Premium

Energy Crystal

Un cristal à facettes flotte entre vos mains et réfracte l'image de la caméra. Paume ouverte : il se charge. Poing : il vole en éclats. Pince : il se reforme à la taille voulue.

💡 Idéal pour : hero de page de lancement, exposition interactive, vitrine de studio 3D.

Webcam MediaPipe Suivi des mains WebGL Particules Premium

Runic Fire Circles

Une main : des filaments de feu l'enveloppent et laissent monter des braises. Deux mains : un cercle runique s'ouvre sur chaque paume et tourne à la taille de votre main.

💡 Idéal pour : festival fantasy ou jeu de rôle, lancement de jeu vidéo, escape game.

Webcam MediaPipe Suivi des mains Canvas 2D Premium

Palm Figurines

Ouvrez la main : une figurine 3D se pose dans votre paume, sur son socle lumineux, et tourne avec elle. Fermez le poing pour passer à la suivante (robot, astronaute, golem).

💡 Idéal pour : boutique de figurines ou de jouets, lancement de mascotte, page collector.

Webcam MediaPipe Three.js Suivi des mains Premium

Finger Frame Filter

Formez un cadre avec vos doigts : tout ce qu'il encadre passe en thermique, pop art, rayons X, néon ou vision nocturne. Refermez puis rouvrez le cadre pour changer de filtre.

💡 Idéal pour : borne de musée, photomaton interactif, écran d'attente d'événement.

Webcam MediaPipe Suivi des mains WebGL Premium

Hand Cursor

Pilotez une interface sans la toucher : l'index déplace le curseur, un pincement clique, la main ouverte fait défiler, le poing relâche. Sans caméra, une main fantôme joue la démo.

💡 Idéal pour : borne de musée ou de salon, vitrine interactive, menu sans contact.

Webcam MediaPipe Suivi des mains Sans contact Premium

Head-Tracked Parallax

Le haut de page devient une fenêtre en 3D : bougez la tête devant la webcam et la scène se décale en profondeur, comme à travers une vraie vitre. Sans caméra, la souris joue la tête.

💡 Idéal pour : hero de lancement produit, portfolio de studio 3D, showroom.

Webcam MediaPipe Suivi du visage Parallaxe 3D Canvas 2D Premium

Air Drawing

Levez l'index devant la webcam et dessinez en l'air : un trait néon lissé suit votre doigt. Deux doigts pour lever le crayon, le poing pour effacer, puis téléchargez votre dessin.

💡 Idéal pour : livre d'or de salon, mur de signatures, animation de stand.

Webcam MediaPipe Suivi des mains Canvas 2D Néon Premium

Questions frequentes

La caméra s'allume-t-elle toute seule sur ces effets ? +

Non. Chaque effet démarre en mode démo, piloté par le curseur ou le doigt, sans caméra. La caméra n'est demandée qu'après un clic sur le bouton « Activer la caméra », avec l'autorisation du navigateur, et elle s'arrête au second clic, quand l'effet sort de l'écran ou quand l'onglet est masqué.

Les images de la webcam sont-elles envoyées quelque part ? +

Non. La détection des mains et du visage tourne dans le navigateur du visiteur (MediaPipe, en WebAssembly). Aucune image n'est envoyée à un serveur ni enregistrée. Seuls le moteur de détection et son modèle sont téléchargés une fois depuis un CDN, au premier clic (environ 20 Mo), puis gardés en cache.

Quels navigateurs et quels appareils sont compatibles ? +

Chrome, Edge, Safari et Firefox récents, sur ordinateur comme sur mobile, à condition que la page soit servie en HTTPS (le navigateur l'exige pour la caméra). Sans caméra, sans autorisation ou sans WebGL, l'effet reste utilisable en mode démo et affiche un message clair au lieu de casser.

Comment intégrer un de ces effets sur mon site ? +

Copiez les trois blocs HTML, CSS et JavaScript dans votre page : chaque effet est autonome, sans framework ni fichier à héberger. Quatre points à prévoir, rappelés en tête du script : votre page doit être en HTTPS (le navigateur l'exige pour la caméra) ; au premier clic sur « Activer la caméra », le module de détection (environ 20 Mo) est téléchargé depuis cdn.jsdelivr.net et storage.googleapis.com, deux adresses à autoriser dans votre règle de sécurité CSP (script-src et connect-src) ; si votre site envoie un en-tête Permissions-Policy qui bloque la caméra, autorisez-la avec camera=(self) ; et si l'effet est placé dans une iframe, ajoutez-lui allow="camera". Les messages sont regroupés en tête du script pour être traduits, et le préfixe des classes CSS évite toute collision avec votre style.

Ces effets sont-ils accessibles ? +

Les états sont annoncés dans une zone aria-live, le bouton caméra expose son état pressé, aucun flash plein écran n'est utilisé et prefers-reduced-motion fige les animations autonomes. Un mode « contraste fort » assombrit la vidéo et opacifie les commandes.