Skyler Liu
RIVE
PERSONAL BRANDING
2025
In this project, my design challenge is to use interactivity to breathe new life into my portfolio website. This could include an animated name, buttons, transitions, or independent hero animation.
Softwares
Special Thanks
Rive
Adobe Illustrator
Ana Kuster
01
Developing the Character
To develop the character, I first created hand-drawn sketches on paper and then translated these drafts into vector artwork using Adobe Illustrator. This allowed me to establish clear shapes, proportions, and design details before moving into animation.
At the end, I changed the design to a fully front-facing, symmetrical head. Non-symmetrical facial features tend to produce awkward results when combined with eye-tracking, so a symmetrical structure is more suitable for this type of interaction. After reviewing the Rive Marketplace, I also found that most artists similarly use front-facing, symmetrical faces for this reason.
02
Rive Animation
In this stage, I focused primarily on creating mouse-tracking animations. My approach involved using constraints to define the movement range for each animated component and then applying the listener function to enable these elements to respond dynamically to the user’s cursor. This setup allowed the character to feel interactive and responsive.
Additionally, when the cursor enters the area of the character’s face, it triggers both a change in expression and the appearance of a dialogue box. This effect is achieved using a combination of trigger inputs and a pointer-enter listener.
03
Improving the Hair Animation
For the hair, my initial method also relied on constraints, with the hair moving in the opposite direction of the mouse to create a sense of perspective and subtle 3D depth. However, this approach lacked a convincing sense of weight and gravity. To address this, I switched to using a joystick controller, which functions similarly to controllers in After Effects and is well suited for mouse-driven motion. One advantage of the joystick system is its ability to bind data, a newer feature in Rive that allows for more nuanced adjustments. By fine-tuning the interpolator graph, I achieved a delayed motion effect, giving the hair greater weight and a more natural sense of movement.
using contraints
using joystick
In addition, I added a hair-jiggle effect. I bound a bone to the hair at the back of the head, allowing it to wobble like jelly when the character moves.
04
Problem Solving
After completing the hair animation, I noticed that the hair’s initial position appeared incorrect. Through a series of troubleshooting steps, I discovered that the issue stemmed from the placement of the controller. This controller—a rectangular shape—follows the mouse movement and indirectly determines the position of the hair. Because its initial location was not centered on the canvas, the hair was offset from where it should have been.
To resolve the problem, I adjusted the rectangle to the correct position on the rest timeline and added a keyframe, which restored the intended alignment.
Version with the Issue
Revised Version
05
Conclusion
Overall, Rive is an exceptionally powerful tool for building interactive systems. Without it, I would have needed to invest significantly more time and effort into learning coding and web development in order to create an interactive element of this kind for a website. With its 2025 update introducing the new data system, Rive has gained a level of flexibility and creative potential that meaningfully expands what the platform can achieve. For this project, I would like to express my sincere appreciation to Ana Kuster, a highly skilled and experienced Rive artist, whose guidance was invaluable. She helped me troubleshoot numerous glitches and used the data system to refine and enhance several aspects of the animation. I am deeply grateful for her support.