RIVE
INTERACTIVE
CHALLANGE
The challenge was to create an interactive experience using Rive that would guide potential students in exploring their academic interests. The goal was to help them identify the best choice of major that aligns with their passions while keeping the interaction simple, engaging, and visually appealing.
year
2025
role
Animator Designer
category
Interactive Motion Design
software
Rive
OBJECTIVE
I created a card matching game to make exploring my projects more engaging. Out of six cards, finding the first matching pair reveals a link to the corresponding project website, turning my portfolio into an interactive showcase.
I researched memory card game systems to add a playful discovery element to portfolio navigation, adapting the “flip match” mechanic so that a correct pair leads directly to a project page. To support this, I explored the Rive marketplace, studying existing interactive card systems and state machine setups as references for my implementation.
RSEARCH
DESIGN
The card design combined personal branding with portfolio highlights. The back side of each card featured my personal branding logo, ensuring consistency and identity. The front side displayed a highlight image from one of my projects, making each pair visually distinct and meaningful within the game.
FIRST PASS ANIMATION
In the first animation pass, I implemented the core interactive behaviors of the cards. This included the card flip animation (front ↔ back transition) and the hover states: when hovered, the card scaled up to feel more responsive, and on the front side the image darkened slightly to reveal the project title text. These interactions established the foundation for the overall game flow and made the cards feel alive and interactive.
SECOND PASS ANIMATION
The second pass focused on building the card-matching logic inside Rive.
-
First Approach: I tried using nested artboards with data inputs to assign unique card values. The idea was simple, if cards 1–2 were opened, it triggered a success; if 1–3, it triggered a failure. While conceptually elegant, this approach proved difficult to resolve fully within Rive.
-
Card randomization : I experimented with adding a card randomization system, shuffling the card order each time for replayability. While it introduced variety, it also made the logic tree more complex, and I needed to simplify the setup for stability.
-
Second Approach: I switched to a more straightforward method, manually building timeline-based outcomes for all possible card-flip sequences. This ensured the system worked reliably, even though it required more setup.
RANDOMIZATION
I implemented randomization by creating several possible card layouts on the Rive timeline and connecting them to the state machine. By enabling Randomize Exit, the system selects one of the card positions each time the game restarts, allowing the game to begin with a different card arrangement every time.
PROGRESS 1
-
The Entry node initializes the game state.
-
Directly below, the first timeline represents the first card flip.
-
From here, five branches extend to account for the second card flip possibilities.
-
Each branch compares the second card with the first:
-
Match: Triggers the “correct” timeline immediately.
-
Mismatch: Pushes the game toward the failure or continuation paths.
-
PROGRESS 2
-
Once a matching pair is identified, the system executes three key steps:
-
Lower opacity of all other cards, visually emphasizing the matched pair.
-
Reset unmatched cards back to their back facing state, keeping the board clean.
-
Trigger the correct match animation, which highlights the matched pair with a polished visual cue.
-
-
This ensures clarity for the player: matched pairs stand out, and unmatched cards quietly reset.
PROGRESS 3
-
At the third card flip, two cards are already revealed. The system now handles more complex logic:
-
If the third card matches one of the revealed cards, the flow jumps directly to that card’s correct match timeline.
-
If it’s a new, unmatched card type, the system branches into the fourth card flip sequence.
-
-
By the fourth flip, all possibilities are cross-checked, ensuring the gameplay remains consistent regardless of sequence.
-
This final screenshot shows the entire branching structure in a top view.
-
Importantly, this flow isn’t built once it must be replicated for all six cards as possible first selections.
-
Each card has its own entry → branching logic → match/fail sequences.
-
The result is six parallel systems that collectively ensure the game runs correctly no matter which card the player clicks first.
OVERALL
I initially tried using Wix’s code embed to inject my Rive file with JavaScript, but the code execution was inconsistent and opening other Wix page URLs via script was restrictive. To avoid these limitations, I embedded the Rive file on Webflow, published it, and then linked that published page to the Play button on my Wix site. This workflow kept the interaction stable while preserving my Wix layout and navigation.
EMBED
