Interactive Gesture-Controlled Scenes with Three.js and WebGLInteractive Gesture-Controlled Scenes with Three.js and WebGL
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Anton's avatar
pro
โ€ข Mar 3
Curtains, cameras, and hand gestures.
For the Figma Makeathon I built a small experiment Iโ€™ve wanted to try for a long time: controlling a scene with your hands in front of the camera.
It started with a simple idea โ€” opening and closing curtains with a gesture. Raise both hands ๐Ÿ™Œ, the curtains pull apart in 3D, and light floods in. I used three.js and WebGL to make the fabric feel as realistic as possible.
Then I kept going.
Now different hand signs โ€” ๐Ÿ™Œ ๐Ÿ‘ ๐Ÿ‘Ž ๐Ÿ‘Œ ๐Ÿค˜ โœŒ๏ธ โ€” each trigger their own music video behind the window. Thereโ€™s also a small database layer so you can map your own tracks to each gesture and share a link with friends.
Itโ€™s a playful controller for turning a simple โ€œwindowโ€ into an interactive music experience. https://curtainplayer.figma.site/
Vanshika 's avatar
this one is sick
Stephanie's avatar
Opening curtains with hand gestures is such a cinematic interaction. Only in Figma Make could you pull this off so smoothly!
Back to feed
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started