Rive Personal Branding
Deep Dive Into Rive
From Rive's website, showing their clients.
Challenge
The goal of this project was to incorporate Rive into my portfolio. This is a chance to show my love of Rive in my personal branding!
So why Rive?
Because Rive sets a new standard for interactivity. It lets my website reflect personality, expression, and humor; Things usually reserved for in-person chats.
Previous Work In Rive (Interactive!)
You can click the sun, the gator, and the chicken. The gator's eyes follow the mouse.
Rive works through a state machine which can set up multiple timelines and events. The looping waves, eyes following the mouse, and the feeding animation are all independent of each other.
Rive is a new, free vector-based animation app that allows for interactivity and the ability to have separate animations, all while staying extremely lightweight. These qualities have made it a new major player in online expression, having been embraced by companies like Duolingo, Dropbox, and Figma.
Proposed Directions
For enhancing my branding, Rive would be the perfect method of adding an animation to my name on my website. This was a 3 week project, and lightning-fast decisions had to be made to stay on schedule.
During Ideation, I struggled between with choosing between my love of clean, glowing graphics...
and chicken nuggets!
(Making my name out of chicken nuggets that the user could dip in sauce and take bites out of.)
Given my previous rive work involving chicken, I decided that a fresh start with glowing type was the way to go.
Design Solutions
Besides high contrast black and white, found that cyan and magenta best matched the energy I wanted to convey. When used with Rive's new feathering feature, these colors appeared realistically fluorescent.
Color
Typography
Simple, legible, and reminiscent of neon lights. Bebas communicated without creating the tangents that a serif font might be responsible for.
Timelines
Rive's innovative UI let me independently animate my name's movement, the outline glow, the internal glow, and the outside sparks.
Development
First Pass (Not Interactive)
Second Pass (Interactive!)
First pass at integrating Rive into a website. Unfortunately, Wix doesn't use Rive's render engine, which means the feathering attribute doesn't carry over. This is quite apparent in the "surge" effect, which appears blocky, and in the glow, which is now just a circle. It was also too aggressive, and a simpler, more ambient animation would communicate more clearly without distracting the user.
Early versions required the user to hold down on the name to charge it, then release for a power surge. This was not very intuitive, and could be more compelling if a simple click triggered an action instead.
The loss of Rive's native render engine meant I had to rework all of the glows using opacity gradients in lieu of the feather tool.
To add some dimensionality, I added a backing light as well as a shadow. I accomplished the shadow by constraining it inversely to the mouse target, so that it would move away from the mouse around a center point. The backlight's brightness was linked to a joystick that reacted to the mouse's distance from a specific point.
Third Pass (Interactive)
The backlight added some nice perspective. Even though clicking the name triggers a unique animation, the ambient animation is the best part of this piece.
Final Troubleshooting
The final setback that bothered me was a short but noticeable glitch. Upon switching pages, the rive files displayed full size for a split second. I couldn't find out what was causing this. It finally hit me: The rive file was showing its design layout before triggering its state machine animation. To fix this, I re-exported the Rive file with the design state at 0% opacity, and made the first frame of the animation set opacity to 100%. Sure enough, the glitch was gone when changing pages.
Final
Rive has opened my eyes to online interactivity. There are so many opportunities to infuse my personality into my website. My site doesn't just have to showcase my artwork; it can also be a piece of art in itself. This project boosted my confidence with using Rive as a software, engineering interactivity, and problem-solving within UIs.