Rive Interactivity

Design Challenges

Incorporate interactive elements to make your portfolio website more engaging, such as an animated name, responsive buttons, seamless transitions, or an independent hero animation.

Software Used:

Rive

Credits:

Design and Animator:
Teja Hickenbottom

Research

For my research, I reviewed my previous website and analyzed the work I had included on it. I took notes on what I liked and didn’t like about both the site and the logo, and used those observations to inform my new concepts moving forward.

Concepts

Name Pronunciation

This concept highlights the pronunciation of my name, which is often misread. By turning that challenge into an interactive moment, visitors who may not have heard my name before can learn how to say it correctly in a playful way. On hover, the letters transform from Teja into Tay-ah, visually reinforcing the proper pronunciation while adding a fun, memorable interaction.

Particle Simulation

This concept leans into the type of VFX work I aspire to create professionally. While true particle simulations can’t be imported into Rive, I wanted to capture the same feeling by recreating a particle like effect with vectors. The result ties my name animation directly to VFX, showcasing both my interests and my ability to adapt high-end visual techniques into interactive design.

Animation

For the first pass of the animation, I focused on creating a smooth transition from my name, Teja, to its phonetic pronunciation, Tay-ah. I also developed a wave animation that activates on hover, adding a subtle interactive element. While this version doesn't yet include full interactivity, that's planned for the next stage of development. Lastly I updated the font to Anek Malayam. The feedback I received was to incorporate more expressive motion, which I’ll be exploring in the upcoming iterations to enhance the overall personality and impact of the animation.

For my second pass on the animation, I added interactivity and refined the easing to create smoother, more natural motion. One of the key challenges during this phase involved technical issues when transitioning between animations. I discovered that the way I structured my assets was causing confusion within the state machine, which led to these problems. After reorganizing the assets more clearly, the transitions began working as expected. I also received valuable feedback from the director, who encouraged me to push the movement further and introduce greater contrast for a more dynamic and engaging animation.

For the third pass, I enhanced the animation by adding more exaggerated movements and resolving the technical issues related to transitioning between animations. I also adjusted the typography, starting with a thinner font that will become bolder when the name "Tay-ah" is shown in the final animation. This change creates a stronger contrast between "Teja" and "Tay-ah," adding visual emphasis that supports the narrative and timing of the piece.

Technical Explorations

I faced a technical challenge where the wiggle animation stopped after the click animation and failed to resume. To fix it, I duplicated each letter and separated the animation groups, allowing independent control and preventing the sequence from breaking.

I used Rive’s Data Binding feature to create both hover and click interactivity. Compared to using Rive’s standard inputs, Data Binding proved to be significantly more powerful and effective. I tested the interactivity thoroughly after every small change to catch any breaks in the animation. Issues did occur a few times, but I was able to troubleshoot and resolve them successfully.

Technical help and advice from Ana Kuster

While exploring a new animation program through self-directed learning, I found the letter K wasn’t appearing in the animation. After checking opacity, blending modes, and keyframes, and testing for a display bug, the issue remained. I fixed it by creating a new K and transferring the animation keyframes, reinforcing my problem-solving skills.

My Learning Approach

This project has been an insightful experience in learning and applying Rive. My approach to learning new software is rooted in hands on experimentation and problem solving. By actively engaging with real projects and troubleshooting challenges as they arise, I develop a deeper, practical understanding of the tools. This method allows me to build strong, adaptable skills that extend beyond traditional tutorials or passive learning.

Mock Ups

Screen Shot 2025-10-17 at 1.25.15 PM.png