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
Back to feedPost
I've always wondered if I could recreate those JavaScript drum
machines I used to obsess over on CodePen, you know the ones.
Blinking step sequencers. Keyboard-mapped pads. That satisfying thwack on a synthesised kick.
Years later, I finally did it. Not in code. In Figma Make. 🤯
WebDrums is my answer to that childhood what-if, a fully
interactive drum machine where every pad fires, every step toggles mid-beat, and a hand-drawn kit animates with every hit.
The kid who used to fork CodePen experiments at 2am didn't expect to build this in a design tool. But here we are. 🥁🔥
#FigmaMakeathon #FigmaMake
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
Related posts
Most avatar builders are just static pictures. For the #FigmaMakeathon, I used Figma Make to build a character that actually feels alive. https://patio-thorn-71742756.figma.site
It’s not just about clicking buttons; it’s about how it feels to use it:
👀 It Watches You: The eyes and face follow your mouse cursor around the screen.
🎲 Shake to Shuffle: Want a random look? Just shake your mouse back and forth to roll the dice.
⚛️ Real Code, Not Just Pics: It doesn't just save an image. It gives you the actual React code and Lottie animation files so you can use them in your app immediately.
Guess this direction was the most voted in the taste test, so here’s a motion touch added to the concept.🙌
I’m also thinking about publishing my first template on the Framer marketplace.
Creators who’ve already launched one, what’s the biggest thing I should prepare for?
ILLUME has such a moody, cinematic feel — that lighting and the hand composition are stunning! Definitely launch it on the Framer marketplace. My biggest tip: have the preview video ready before launch day. It converts like crazy!
I made a website you could control with your webcam! 👀🔥
View in Desktop: https://telepath.figma.site/
Here's Telepath, a fully functional infinite image gallery portfolio website. You can deploy this website as is, with your pictures right now. This whole website took over 30 prompts and was made with media-pipe. All images are fetched from a supabase bucket.
Now for the fun part: Enable gesture controls and give permission of your webcam (Your data is not stored and is only used for processing locally in the browser).
1. Closed Fist or Index Finger ☝️ : Move around cursor in the canvas
2. Index and Middle Finger ✌️ : Swipe and drag to move around the canvas
3. Index and Thumb "L sign": Open the hovered image
4. Hold Palm open for 1s ✋ : Close the Image
5. Devil Horns 🤘 (Thumb closed): Change view between flat<>fisheye
figmamakeathonfigmasitesfigmamakemadeitpossibleVibe CodingInteraction DesignUI DesignClaudeFigmaFigma Make
Interesting Shuvo! Good to see you again!
Trending
maxearnings
The next frontier of payments is live on Contra. How are you maximizing revenue?
freelancerlife
Freelancer life is wins, pivots, and everything in between. What’s yours right now?
aidesignflow
AI tools are redefining how designer work. What does your workflow look like?
micrographics
Micrographics started as utility - barcodes, packaging, instruction labels. How would you use them?
aivideo
AI video tools are moving at warp speed. What tools are you using?