Clap : deux mains en 3D et une onde de choc qui traverse toute la page

Comment c'est fait

Les mains ne viennent d'aucune banque de modèles : une main droite est décrite par un script Python dans Blender, environ 70 formes (cônes arrondis, ellipsoïdes, paume extrudée) fondues entre elles par des unions douces, avec les plis et les ongles creusés dans la même équation. Elle reçoit un squelette de 18 os et des animations calculées image par image : respiration, clap, charge et clap chargé. La main gauche est son reflet, un seul fichier part sur le réseau.

Dans la page, three.js joue le clap en porcelaine satinée, éclairée de bords indigo, menthe et rose. Au contact exact des paumes, la scène lance un éclair, deux anneaux et des centaines de particules d'air comprimé, puis annonce l'impact à toute la page, avec sa position à l'écran et sa force.

L'onde de choc part de là et traverse tout : chaque titre, paragraphe, image, carte et bouton reçoit une oscillation calculée d'avance selon sa distance au point de contact, que le navigateur joue seul sur la carte graphique. Les lettres des grands titres sautent une à une, les surfaces s'enfoncent, les contours s'allument au passage du front, un écho repart du bord. Par-dessus, un calque WebGL dessine l'anneau électrique. Le son est synthétisé dans le navigateur : salves de bruit filtré comme un vrai clap, sous-basse qui chute de 130 à 48 Hz, réverbération.

1. Une main en équations dans Blender 4.2, maillée à 0,5 mm puis réduite à 25 002 sommets.
2. Squelette de 18 os, clap de 1,1 s : armé 200 ms, frappe 80 ms, paume écrasée à 87 %, rebond.
3. Lumière cuite par Cycles dans les couleurs des sommets, export GLB compressé en Draco.
4. three.js 0.160 : porcelaine physique, éclair, anneaux, particules et post-traitement maison.
5. Onde sur toute la page : ressorts amortis joués par le navigateur, calque WebGL de l'anneau, tout revient en place au pixel près.
6. Son synthétisé une fois en quatre variantes, joué au contact après un premier geste.
7. Mouvement réduit : pose fixe et anneau doux. Sans WebGL : image rendue dans Blender et anneau en CSS.