Another way to visualize AI product's feature with motion
4
153
It's not easy to visualize how AI products work under the hood.
But not easy doesn't mean impossible 😎
2
5
377
This is the most complex animation I've built so far.
The brief was to create a scroll-driven section for a Framer site, where scroll progress not only triggers few mini-animations inside, each running its own state machine, but it's also connected directly to website elements inside Framer.
A few things that made this one hard:
✅ Scroll-to-reveal had to feel smooth and intentional, not like a triggered cutscene. Scroll position needed to map continuously to animation progress, not just fire at thresholds.
✅ 6 separate mini-animations, each with its own state machine, all nested inside one parent composition and orchestrated together without fighting each other.
✅ Getting Framer and Rive to talk to each other cleanly meant building 2 custom code components. Rive's native Framer plugin wasn't enough to pass scroll data through the way this needed.
The result is a piece that reacts to the user in real time instead of just playing on load - which is a much harder problem than it looks like from the outside, and honestly the first time I've built something at this level of interactivity.
2
155
Wrote up my latest project as a case study, then realized the rest of my site wasn't built to back it up.
Rebuilt it: a real process breakdown for studios, fixed pricing instead of "let's discuss", and the case study getting its own page.
2
3
164
Product section Centerpiece
0
4
Fintech Features Cards
0
6
Integrations Panel | Rive Animation
1
8
Product Showcase | Rive Animation
0
12
Ready to run expandable sidebar | Rive animation
0
3
Micro-interaction | Rive animation
1
7
Users Reviews Component | Rive animation
0
6
Upload | Rive animation
0
5
Animated logo | Rive animation
0
5