Interactive Character Mascot - Select Screen for Portfolio Site

Client is an art director whose portfolio site needed a hero that felt like him. I built an interactive character-select screen where visitors pick between four sides of the same person: the Artist, the Gamer, the Athlete and the Traveler.

Each character is a layered vector illustration on a shared master rig, with its own entrance, personality idle, hover reaction, signature move and exit. Picking a new side plays a fighting-game style hand-off, inspired by the character select in Bleach: Rebirth of Souls. Everything ships as one 2.4 MB Rive file, wired for Framer.

All four characters reuse one face, so it was locked first: reference photos, a concept, and a written sign-off on the face before any final vector. Four features carry the likeness: the sharp line-up and temple fade, his raised right brow, the thin moustache into a chin goatee, and diamond studs in both ears.

All four characters share one master rig structure (Hip, Spine, Chest, Neck, Head) with IK on the legs and on any arm that holds a prop. Across the set: 70 bones, 15 IK chains and 1,983 skinned vector paths, so jackets, shorts and straps bend with the body instead of sliding over it.

Every moving limb has an underlay, so no gaps open when it moves.

The Athlete's shorts anchor to the pelvis, so a lifted knee never splits them.

Rigs and timelines are in the Rive editor.

Every character plays the same moments, each with its own personality: an entrance, a signature on select, a looping idle, a hover reaction and an exit.

Artist: dashes in as the lime stage sweeps across; signature: pencil to the temple, thinking it through.

Gamer: dashes in as the blue banner drops; signature "Connected": the headset lights up as he presses the ear cup.

Athlete: stamps his boot on the incoming ball; signature "The Return": a flick over the shoulder, then a trap under the sole.

Traveler: leaps at the camera with his suitcase; signature "Boarding Call": a double passport twirl.

The site embeds one artboard. Each character is a self-contained component with the same contract (start, hover, exit), and a switch machine above them runs the hand-off: the outgoing character is gone by 0.35 s, the next one starts at 0.43 s and lands at about 1.0 s. A click mid-switch re-targets to the newest choice.

On the page it takes two lines: set selectedPersonality, then fire switchPersonality. The file writes currentPersonality back, so the profile panel updates when the new character lands. No scripts, no Rive Events.

One 2.4 MB .riv with 47 timelines and 84 state-machine transitions, and no scripts.

Delivered: the .riv, the editable Rive file, layered vector art for all four characters, and a Framer quick reference.

Ready to grow: adding the Socialite or the Professional means one new component, with nothing rebuilt.

Illustration, rigging and animation by Piyush Kacha for Client.