Skip to content

piyush kacha.Let’s talk

Character Select / CLIENT PROJECT

One face. Four personalities.

An interactive portfolio hero for an art director: one illustrated likeness, four rigged personalities, and a switch the website drives with two lines of code.

ANIMATION BY

MY ROLE

Illustration · Rigging · Character animation · State machines · Data binding

The shipped .riv rendered frame by frame, woven with real Rive editor footage: likeness, rig, personalities, the state machine and switching.

4

Personalities, one face

70 · 15

Bones · IK chains across the four rigs

3.1 MB

One .riv for the whole system, no scripts

YOUR TURN · THE DELIVERED FILE

Watched it?
Now switch him yourself.

This is the 3.1 MB .riv the client received, running in your browser. Pick a side, hover him, and watch the page and the file talk to each other.

01 / 04Signature · Pencil spin

Artist

Thinks it through, pencil at his temple.

Select a side

A still of the Artist. Play the animation to switch live.

What this page runs

// on select
vm.string("selectedPersonality")
  .value = "Artist";
vm.trigger("switchPersonality").trigger();

File → page · currentPersonality"—"

The Artist: one of four personalities of the same illustrated face

Still

BEHIND THE MOTION

A hero that is someone.

An art director wanted his portfolio site to open on himself: an illustrated character visitors can switch between four sides of his life. The Artist, the Gamer, the Athlete and the Traveler had to read as the same person at a glance, then each show a different personality. The client stays unnamed in this case study.

Likeness first.

I drew the face once, from reference photos, and locked it before any character work began. Four features carry the likeness: the sharp hairline, his raised brow, the moustache into a chin goatee, and the diamond studs. The same face sits on every rig, so a switch changes the person’s world, not the person.

Rigged to move like him.

Each personality is its own artboard with its own bones, IK and skinned artwork: 70 bones and 15 IK chains across the four rigs. Every side has an entrance, a signature move and an idle. The Artist spins his pencil, the Gamer’s headset lights up, the Athlete flicks the ball up and traps it under his sole, and the Traveler twirls his passport. Hover reactions live in the file too.

One contract. Any character.

All four characters share one view-model contract: start, hover and exit. A main artboard nests them, and its state machine handles the exit, a 0.43 second hand-off and the next entrance. The website only names a character and fires one trigger. The file reports back which character is on screen, and a click during a switch simply wins.

Built for the site it lives on.

The whole system ships as a single 3.1 MB Rive file with no scripts, wired for Framer, with a short developer reference. The switcher on this page runs that same file, through the same two lines of code.

FROM THE CASE STUDY

Likeness, rig, contract.
One switch.

Frames from the case-study film. Every character in them is the real file running in the Rive runtime, not a screen capture.

The Artist, Gamer, Athlete and Traveler side by side under the title One face. Four personalities. — One face. Four personalities.

A reference photo and the live Rive vector face, split down the middle — 01 · Drawn from a real face

Matching landmarks drawn between the reference photo and the approved concept — 01 · Four features carry the likeness

The Gamer's skeleton shown as an X-ray over the artwork, with its bone hierarchy and IK chains — 02 · 70 bones, 15 IK chains

The Rive editor with a bone selected beside the live runtime lighting the same bone — 02 · Editor and runtime, same bones

The Athlete personality card with his signature move, The Return — 03 · Every side has its own signature

The Gamer's state machine in the editor beside a diagram of the runtime's current state — 04 · One contract on every character

A site menu choosing the Athlete, with the two lines of code that switch characters — 05 · Two lines of code switch sides

For the developers: animation handoff details

This page loads the delivered file (character-select.riv, 3.1 MB, no scripts) with the MainArtboard artboard, the Personality Switch state machine and the auto-bound MainViewModel. A choice sets selectedPersonality and fires switchPersonality; the readout listens to currentPersonality, which the file updates 0.43 s into a switch. The new character lands at about 1 s. Replay recreates the runtime with autoplay off, names the character before the state machine first runs, then plays, so the file opens straight on that character. Hover reactions run inside the file. The auto tour moves on after 6.5 s of visible playback and stops at the first choice. Rendering and the tour pause offscreen, in a hidden tab, while paused, and while a mouse rests on the character. Reduced-motion visitors browse stills until they choose to play.

Rive artboards, state machines, and controls
Animation	Artboard	State machine / view model	Controls / timelines
Character Select	MainArtboard	Personality SwitchMainViewModel	selectedPersonality (string), switchPersonality (trigger), currentPersonality (string, read)

Read the Rive handoff guide

UP NEXT

Dead Still

YOUR NEXT GOOD IDEA

Let’s make
something move.

A thoughtful interaction. A character with personality.
Something you haven’t quite figured out yet. I’m in.