Skip to main content

How Rive Helped Us Bring Ambitious Ideas to Life for Chia.com

Challenge

The Chia project was our opportunity to push our abilities and think big. It wasn’t a complete free for all, however, we still needed to create something that could actually be developed and also load in a reasonable amount of time.

Enter Rive, a program we had heard could address our concerns.

“…from my point of view, what I was really excited about, was the experimentation and exploration side of the project.”

-Petar

Remy the Ram Please hover
Remy the Ram Please hover

Tools

Learning a new program at the start of a design project is a dicey move, but the tools and interface have a familiar use and layout. Rive’s community gallery also allows visitors to open the files shown and see how the elements are built and work. This along with good tutorials, got us up and running with the program.

Even though we weren’t a team of technical artists and animators, Rive’s tools and processes gave us confidence and allowed us to:

  1. Rig and animate characters fairly quickly
  2. Test our designs and animations rapidly for iterative improvements
  3. Take files to code efficiently, allowing our developers to quickly stage and test our design

“The magic here is…we added the functionality piece by piece by using state machines. Something that would take you a lot of hours was just a few clicks away with Rive”

-Gus

Steve the Cat Idle State

Implementation

Once we saw the small file sizes our designs were generating, we realized that some of our bigger ideas were doable.

We created Chia plants that grow over the entire screen if visitors haven’t moved the mouse in a while. We also brought attention to the Add to Cart button on hover, and added animations to other elements throughout the site.

“We were able to create a running sequence, a walking sequence and even startle them [the ram and cat] with the cursor”

-Nick
Steve the Cat running sequence
CTA hover state Built on Rive

Helping Chia® re-discover it’s playful side in the digital world