Built a custom @Rive component for the About section of my agency site.
The lanyard and badge are fully interactive. You can grab them, throw them around, and spin the badge 360° to see both sides.
It doesn’t necessarily need to do all of that, but that’s kind of the point.
Small interactive moments like this can turn a pretty standard section of a website into something people actually want to play with, remember, and come back to.
To help attract players’ attention, I created a looping bounce animation for both the gift box and coin stack, along with a subtle gleam effect to make the rewards feel more eye-catching.
Since the message box uses a responsive layout, I used constraints, Follow Path, and Data Binding in Rive to connect the animations to the layout while keeping everything flexible and responsive.
It was a great opportunity to combine animation and interactive UI techniques to make the experience feel more dynamic without being too distracting.