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
A two-week stretch of Rive builds: interactive flow builder, ops dashboard, six-state-machine bento, and a live coin embed. All production-ready, all state-machine driven. Open for similar work.
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
I’m excited to announce that I’ve started a collaboration with @Consensys MetaMask 🦊 as a Motion/Interaction Designer, with @Rive playing a significant role in my workflow.
To celebrate this, I’m sharing a warm-up exercise I did a while ago, where I explored my own take on what the logo intro could look like 🔊 👇
🔥
Most product animations just… play. These ones listen and react.
You've gotta love @Rive!
I built two interactive Rive animations for my website — same isometric car, two completely different ways to explore it.
The Slider — drag to peel back the car’s exterior and reveal the internals underneath. Engine, radiator, suspension — it all appears as you scrub. The state machine uses a single numeric input bound to the drag position, so the reveal is continuous, not a toggle.
The Hotspot Explorer — tap any component and get its detail. Each part is its own input in the state machine, so users discover things in whatever order they want.
The fun part was designing for both modes from the same illustration. Every layer — shell, engine, springs, wheels — had to work independently so the state machines could control them. One asset system, two interaction models.
Love this!
Every year, I build a design advent calendar to push my creative limits.
Creating an interactive advent calendar has been my personal creative tradition for several years. For my latest iteration, the goal was to evolve this tradition by building an interface that truly feels alive.
I designed and engineered the "Summer Font Advent"—a motion-rich Single Page Application (SPA). Moving away from standard static screens, I built an immersive experience utilizing a continuous looping video background, tactile 3D CSS card reveals, and seamless state transitions without any page reloads.
I wanted to test the limits of modern AI tools to see if they could handle the complex front-end logic of my annual project. The initial workflow started with the visual concept and asset creation in Figma.
When the direct .fig import into Google Stitch couldn't fully parse my custom layout (due to raw files lacking strict design tokens), I had to pivot my strategy. As a designer, real-world workflows require adaptability.
I shifted to a prompt-driven engineering workflow. I used Stitch’s in-place AI edits and conversational prompting to manually orchestrate the experience. By feeding the AI my assets and guiding it step-by-step, I was able to build the HTML-native motion, ensure a fully responsive layout, and map out the complex state logic state-by-state.
The Outcome
Stitch proved to be a powerhouse for prototyping complex state logic and native HTML motion. Orchestrating the interactive states and fluid transitions through conversational prompting felt like magic and completely elevated the project.
To bring the project to the finish line, I used Stitch's export integrations to push the polished, heavy-lifting code into Lovable for the final, pixel-perfect deployment. This project perfectly illustrates my approach to modern design: using AI not to replace the creative process, but to elevate it into a living, tactile interface.
Tools & Tech Stack
Figma (Visual Design & Asset Generation)
Google Stitch (State Logic, Layout & Native HTML Motion)
Lovable (Final Build & Deployment)
Link https://adventbykris.lovable.app
Stitch project https://stitch.withgoogle.com/projects/8912616702499530796
Fantastic work🔥🔥👏👏
Challenges
View all
Trending
Claude
Claude has entered the design space. How are you using Claude Design?
Contra University
Learn from expert creatives how to earn more using next-gen AI tools.
creativeaiflow
Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?
portfolioreview
The best portfolios tell a story, not just show a grid. Share yours for feedback.
freelancerlife
Freelancer life is wins, pivots, and everything in between. What’s yours right now?