Kirill Gipsov

Working with vector graphics in @Rive has its own specifics.

I still remember the feeling when I realized I could work directly with vertices, and I immediately wanted to make something more complex than the simple geometry of a button or a card.

A mascot, of course!

There is so much hype around them that it would have been strange to ignore the topic:)

On the other side of the gap, there are meshes and bones over raster graphics. And yes, that is a powerful tool, especially for realistic looping idle animations.

But I still decided to dive into this sandbox of vector-node dependencies and angles, draw-order changes, clipping automation, animated gradient movement, and keeping all of it working across every state of the character.

What still genuinely makes me laugh is that this girl mascot was originally inspired by a website template created by our web development team. By the way, here it is: @Hella Fast:))

Then, somewhere in the middle of our usual work chaos, we got carried away and built an entire web app around it.

Inside the app, we connected Rive to an AI-powered nutrition agent that helps users plan their daily meals — and now it can express emotions through the mascot.

The creative side of planning was also surprisingly interesting 😅 Most animated mascot requests we receive are built around reactions to streaks and achievements, so naturally, I initially planned those kinds of screens as well.But once this Rive girl found her place inside the agent chat, the achievement page gradually turned into an internal shop for skins and visual themes.

Anyway, I was glad to share this story 🫶🫰

If you have any questions or suggestions, we would be happy to hear them.

I won’t throw links around here🤓 but if anyone wants to play around with the app, leave a comment and I’ll drop the link in the replies :)

There’s actually quite a lot of functionality in it.всем Rive:)

By the way, has anyone tried deploying a web app in Framer?

You do realize this isn’t a video, right?

Yes, yes, yes, I know how much you all “love” long videos 🤓

But I finally finished the first version of this little Rive experiment — and if you’re too lazy to watch, you can just poke around yourself: ↗ here

Started with an animated hand

Then it turned into a small bilingual web app with animated hands, key highlights, translation mode, learning mode, custom skins, achievements, and a Russian ↔ English dictionary

The main idea was simple:

Can Rive be used not just for animation, but as a visual engine for interactive web apps?

After building this, my answer is definitely yes.

@Rive handles the living visual system 🫰🤌

JavaScript handles the logic 🫠

ChatGPT helped me a lot as a coding and debugging partner 🫡

And somewhere between all of that, this became a small interactive product that feels more like a toy than a usual language tool.

Try it here :)

Once I wrap up my current major project, I’m going to try implementing all these mechanics in Framer. I’d really love to pull this off, but so far I’ve only worked with websites in Framer—never web apps. Is that even a thing?

Feels like I'm on LinkedIn here, haha! Funny how this is the place where I actually want to post random cool stuff from my web work.

Right now I'm having fun building a keyboard visualization in Rive. And once I started, I couldn't stop. So far I've added a typing tutor and a translator. Now I'm sitting here wondering — what else could actually be useful to add?

Btw, the nail polish color and the key/glow shades are all easily tweakable via code (that's the magic of Rive :)) Also thinking about adding custom skin uploads, or maybe unlocking skins as achievements.

Basically, I'm out of ideas at this point. Would be awesome if you could throw some solid suggestions my way — I'll actually build them :))

Hey Chat!

I need a quick post for my Framer feed.

Topic: components within components within components.

I’m looking for an English saying that captures the vibe of "components all the way down" or "a component driving a component driving a component."

The idea is to get people's take on whether it makes sense to nest components three or four levels deep—exposing properties all the way up—just to achieve hyper-customization of the final result.

I can't be the only one who obsesses over this stuff, right? I really hope I get some replies, or else I’m gonna lose my mind.

Max out the human touch—write it so no one would guess it came from GPT.

I got a bit carried away playing around with frame-by-frame animations in Rive, and it turned out to be a perfect example of how not to overload a project

ahaha!

Unfortunately, that kind of screen causes terrible lag in Framer.

I think I could try rendering the animation externally—loading it from GitHub, for instance—instead of having it directly on the page.

Hmm, I need to find a way to get around the file size limits.

Here’s the link to the example itself:

https://mobile-opportunities-049345.framer.app/

Built entirely in Rive.

Would you use something like this on a real client website?

Look at this, pls!

I don't know if I should make this template publicly available. I've spent so much effort on getting it right that I don't want to give it away for free, and with the current competition, I don't even know what the minimum price would be.

We're all here for wealth and profit, aren't we?