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
Built this Fully interactive smartwatch with Figma Make, Claude and Motion.
Inspired by Skeuomorphism and the iconic Teenage Engineering style, I wanted the watch to feel as tactile as possible.
Figma Make paired with Claude, did an amazing job in getting all the ScrollTrigger animations and watch faces interactivity done right. The design and colors turned out pretty well too.
My personal fav thing is that you can even play a game on it 🎮
Live: https://activewatch.figma.site/ 🚀
Checkout my LinkedIn post too😊:
https://www.linkedin.com/posts/abhrajitray77_figmamakeathon-motion-react-activity-7433532536296841216-Gv0F
Community file: https://www.figma.com/community/file/1609590243231299630/interactive-smartwatch
Thanks! Have fun remixing it! ✨
Very cool- how did you utilize Claude and GSAP with it?
Thanks Eric! ✌️ I did not use GSAP, motion.dev was enough as I've kept the animations pretty simple.
As for Claude, I used the Opus 4.6 model. Feed it detailed steps in specific technical terms in the prompt, and it yields pretty good results. 😄
motion.dev
Motion - A modern animation library for JavaScript and React
Motion is built on native browser APIs for a tiny filesize and superfast performance. It uses hardware acceleration for smooth and eco-friendly animations. Previously Framer Motion.
Oh nice! I've implemented a little using the same motion package on what I'm building too. Thought about integrating GSAP, but time is running out!
Niceee. Would love to see what you're building when you're done with it. 🙌
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
Trending
retrofuturism
Share your favorite designs from the past exploring the distant future. Or your own take on the aesthetic 🚀
halftone
Dots. Texture. Grain. Let's see your designs using the halftone technique.
Midjourney
Creatives are showing off what they're making with Midjourney.
colorgrade
Video editors sound off: How do you enhance the mood of your video in color grading?
Related posts
Most sites tell you they're premium. Almost none of them make you feel it.
I spent the last stretch building thirteen concept sites chasing that
difference, and the thing that kept proving itself is that the feeling comes
from motion you control, not motion you watch.
Four are real-time 3D in the browser. A crystalline brand hero turning under
studio lighting, a perfume landing lit entirely by a real HDRI environment, a
neural field of instanced particles for an AI product, an architectural
monolith that reveals itself out of near-black. The other nine are
scroll-scrubbed video, where you drag a whiskey pour or open a box or drive
into a sunrise at whatever pace you want. The visitor is the animator, which
is a very different thing from watching an autoplay loop.
I design it, build it, and ship it myself, so there's no handoff where the
feeling leaks out between the mockup and the browser.
Two things I learned that I'd want someone else to know.
If you light a translucent material without a real environment map, your
scene renders black. Lighting is not polish you add at the end, it's a design
decision you make first, before you have anything to look at.
And if you want video to scrub frame for frame off scroll position with no
stutter, re-encode it all keyframe. Every frame becomes a seek target. Most
people fight that stutter in JavaScript when the fix lives in the encode.
Who it actually serves is anyone selling on craft rather than spec. Fragrance,
architecture, spirits, dev tools. The interaction buys a few more seconds of
attention right where the headline and the call to action live, and those
seconds are usually the whole game.
All thirteen are live and interactive, and labeled as concepts because that's
what they are.
Still chewing on one thing. Where's the line where motion stops serving the
brand and becomes the thing people remember instead of the brand?
FocusFlow is a mobile application built in Framer, designed to help users build momentum, eliminate digital noise, and protect their focus. The objective was to design an intuitive, frictionless ecosystem that merges habit tracking, daily task management, and deep-work timers into one cohesive platform.
Visual Strategy & Branding
To ensure the interface felt modern and reduced eye strain during long working sessions, I developed a "Dark Slate" visual theme.
Color Palette: Deep, muted backgrounds paired with high-contrast neon pastel accents (purples, cyans, and greens) to guide the user’s eye toward primary actions without overwhelming the screen.
Typography: Clean, highly legible typography establishes a strict information hierarchy, ensuring data-heavy screens remain scannable.
Component Design: Soft, rounded corners across all cards and progress rings create a welcoming, tactile aesthetic.
Core Workflows Designed
The Dashboard: A high-level view of daily momentum, gamifying progress with a clear percentage tracker and immediate access to priority tasks.
Habit Engine: A visual consistency tracker that leverages bar charts and streak counts to encourage daily retention and user engagement.
Focus Timer: A distraction-free, Pomodoro-style interface dedicated entirely to single-task execution.
Profile & Settings: A personalized hub showcasing user streaks, focus time, and gamified "Level" badges to drive long-term motivation.
Platform & Execution
Built in: Framer
Disciplines: UI/UX Design, Visual Branding, Mobile App Prototyping, Interaction Design.
Amazing 😍
AI tools don’t always understand design the same way.
Some are really good at creating beautiful, spacious and aesthetically pleasing interfaces.
Others focus more on functionality, user flow and UX — even if the final interface doesn’t look as polished.
And that is why you need to understand the strengths of your AI tools and direct them accordingly.
For this design, I tested Claude, ChatGPT, and Figma Make.
Now I want to know which one was the best.
Pick your winner 👇
Figma make is better visual🔥