Rive Ichiban Kuji Interactive Ticket Peel

Kitakuji is an Indonesian e-commerce platform where users open digital blind-boxes to win real, physical pop-culture collectibles. My role here is to audit and improve the end-to-end user experience, from first-touch brand perception to community engagement to the UX design of the app itself.

The goal of both this and my interactive card pack project is the same: make the unboxing moment more exciting.

However, the interactive card pack had an obvious benchmark: Pokémon TCG Pocket. This was different. Digital Ichiban Kuji is a new feature for Kitakuji, and there isn't really a widely recognized, premium example to benchmark against. I had to figure out what this interaction should feel like from scratch.

For anyone unfamiliar with Ichiban Kuji, the basic idea is simple: you draw a ticket, peel it open, and the letter underneath tells you which prize you've won.

Comparable products have attempted to do a digital ichiban kuji, but they were always either a button that then plays canned animations, or a linear experience where it feels like you're just scrubbing through a canned animation.

I wanted the digital version to preserve that sense of physically handling the ticket.

The experience starts with a short cutscene of an Ichiban Kuji box dropping onto the screen, followed by a ticket being drawn and presented to the user.

The art for both the box and ticket are data-bound images, so they can be swapped on the fly for different sets.

You pull on the tab, dragging it to the right to peel the ticket open. I achieved this using Rive's Pointer Drag Listener.

Under the hood, the effect is actually two versions of the ticket being displayed simultaneously. One represents the front of the ticket, while another contains the revealed side. Masks determine which parts are visible as the user drags.

The result is a convincing 3D-like peel without actually modelling a 3D object.

I also added shadows and lighting to sell the illusion of the ticket curling away from the screen.

More importantly, the user is actually controlling that movement. You can tear it open immediately, or drag slowly and reveal the ticket a little at a time.

If you let go halfway through, the ticket simply snaps back into place. It doesn't behave like a progress bar where you're just scrubbing through a pre-baked animation. You're actually manipulating the ticket.

There's another detail hidden in the ticket itself.

As you peel it open, Japanese text is gradually revealed:

But the message changes depending on the rarity of the prize. Rarer prizes have progressively longer, more exaggerated versions:

This means the player can start learning something about their prize before actually seeing the prize.

This is a pattern you see throughout gacha design. Genshin Impact, for example, gives players visual clues about rarity before the actual reward is revealed.

The result is essentially two moments of excitement: first, discovering how rare the prize is, and then discovering what the prize actually is. There's of course also the same audio cue I used in my interactive card pack project, where an anime girl voiceover would shot "Kitaaa!~" if you got a rare prize.

Once the ticket is fully peeled, the prize is revealed!

Like the card pack interaction, the prize image, name, rarity, and supporting graphics are all data-driven. Developers can inject the relevant prize information without creating a separate Rive animation for every possible result.

One limitation of the current implementation is that I couldn't reproduce the black silhouette treatment I originally wanted before the final reveal. Unlike After Effects, Rive currently can't use images as masks in the same way, so I had to work within that limitation.

The goal wasn't to make a video of someone peeling an Ichiban Kuji ticket.

By translating the physical interaction into a responsive Rive experience, the user controls the pace of the reveal, hears the ticket react to their movements, and gets an additional rarity reveal before they even see their prize.

This was my first interactive Ichiban Kuji experience for Kitakuji, alongside the interactive card pack. More prize-opening experiences are in the works.