Expérience · NavigateurExperience · Browser体验 · 浏览器

NEON

Une animation interactive de « cat's cradle » : des fils néon relient les doigts de vos deux mains en temps réel grâce au suivi MediaPipe. Détection du visage, effets lumineux et explosions de particules au contact des doigts — directement dans votre navigateur. An interactive cat's cradle animation: neon strings connect both hands' fingertips in real time via MediaPipe tracking. Face detection, glow effects, and particle explosions when fingertips touch — right in your browser. 一个交互式「翻花绳」动画,完全在浏览器中运行:通过 MediaPipe Hands 追踪双手,霓虹丝线在指尖之间动态张紧,借助 Face Mesh 检测面部,指尖接触时迸发粒子,并带有 CRT 复古风格。p5.js 渲染,100% 本地处理。

Ce que fait NEONWhat NEON doesNEON 的功能

Suivi des deux mainsTwo-hand tracking双手追踪

MediaPipe Hands suit jusqu'à deux mains (21 points chacune) en temps réel, avec une couleur néon par doigt — sans matériel dédié.MediaPipe Hands tracks up to two hands (21 points each) in real time, with a neon color per finger — no dedicated hardware.MediaPipe Hands 实时追踪最多两只手(每只 21 个关键点),每根手指配有独立的霓虹颜色——无需专用硬件。

Berceau du chatCat's cradle翻花绳

Des fils relient les doigts opposés, doublés d'entrelacs croisés entre doigts non adjacents — une véritable résille néon.Strings link opposing fingertips, layered with cross-connections between non-adjacent fingers — a true neon lattice.丝线连接对应指尖,并在非相邻手指之间叠加交叉编织——构成真正的霓虹网格。

Tension dynamiqueDynamic tension动态张力

Plus vos mains se rapprochent, plus les fils se tendent, s'épaississent et virent au blanc incandescent.The closer your hands, the tauter and thicker the strings grow, glowing white-hot.双手越靠近,丝线越绷紧、越粗壮,并发出白炽般的光芒。

Explosions de particulesParticle bursts粒子爆炸

Quand deux doigts se touchent, une gerbe de particules et une onde de choc viennent ponctuer le contact.When two fingertips meet, a burst of particles and a shockwave ring punctuate the contact.当两根指尖相触,一束粒子和冲击波随即迸发,点亮接触瞬间。

Détection du visageFace detection面部检测

MediaPipe Face Mesh trace les yeux, l'iris, le nez et la bouche en néon, intégrés à la scène.MediaPipe Face Mesh outlines eyes, irises, nose, and mouth in neon, woven into the scene.MediaPipe Face Mesh 以霓虹线条勾勒眼睛、虹膜、鼻子和嘴巴,融入整体场景。

Contrôles & esthétique CRTControls & CRT look控制面板与 CRT 美学

Activez Mains, Fils ou Visage, réglez l'opacité de la vidéo ; scanlines, vignette, scintillement et compteur FPS complètent l'ambiance rétro.Toggle Hands, Strings, or Face, adjust the video opacity; scanlines, vignette, flicker, and an FPS counter complete the retro vibe.切换手部、丝线或面部显示,调节视频不透明度;扫描线、暗角、闪烁效果和 FPS 计数器共同营造复古氛围。

NavigateurBrowser浏览器 MediaPipe p5.js Webcam requiseWebcam required需要摄像头 100 % local100% local100% 本地

Lancez l'expérienceLaunch the experience启动体验

NEON s'exécute entièrement dans votre navigateur et utilise votre webcam pour suivre vos mains. Aucune image n'est envoyée à un serveur — tout reste sur votre machine. Autorisez l'accès à la webcam, puis présentez vos deux mains face à la caméra et rapprochez vos doigts. À privilégier sur ordinateur, dans une pièce bien éclairée. NEON runs entirely in your browser and uses your webcam to track your hands. No image is sent to any server — everything stays on your machine. Allow webcam access, then show both hands to the camera and bring your fingers together. Best on a computer, in a well-lit room. NEON 完全在浏览器中运行,使用摄像头追踪您的双手。任何图像均不会发送至服务器——一切处理留在本地。请授权摄像头访问,然后将双手置于镜头前,靠近手指即可开始。建议在光线充足的环境下使用电脑体验。