Beluga & John Hawaii B. Luga in 3D

The two little characters that run along the bottom of this site: how they were made, and how they learned to move.

Two original characters, built to wear a platformer's skeleton and move by its rules

Creative & lab · Oct 2026

At a glance

Challenge: Give the site two characters that move like the platformer they come from, without using that game's character models, inside a web page.
Solution: Original low-poly meshes on the fork's 21-bone skeleton, its animation clips played by name, and its movement rebuilt from a written behaviour spec.
Result: 36 moves, jumps and speeds that match the spec's numbers, faces that change with the mood, and touch controls; loaded only when they first appear.

The show on the home in Playful mode: Beluga and John chase pixel Beluga across the page

The v2 blockouts on the fork's skeleton: Beluga and John in their base designs, plus Beluga's small, big and fire forms and John's small form

From sheet to model: my character sheet for Beluga's three forms, against the first and second blockouts

Faces: my pixel-art expressions against the first two versions. Each is a 32×32 tile swapped at runtime

All 36 moves from the fork's animation set playing on big Beluga, one frame each, with the clip each role uses

The fit and clearance pass: how closely each version matches the sheet, and the worst jump and dash frames before and after the head fix

The problem

Playful mode needed someone to bring it to life. Beluga and John Hawaii B. Luga already existed as pixel art and character sheets; the question was how to make them move in 3D the way the fork's characters do, with the same jumps, skids and ground pounds, without copying the fork's code or using its Mario and Luigi models.

Approach

Simplified view: the meshes and faces are original; the skeleton, the 36 clips and the movement rules follow the fork.

Build both characters as low-poly meshes in Blender with Python scripts, against my own character sheets and in the fork's bind pose, then bind them to its 21-bone player skeleton so its animation clips play on them unchanged. Big Beluga is 778 triangles; John is 672 plus 60 for the sunglasses.
Give each face its own texture island, so an expression is a swap between four 32×32 tiles: normal, wink, happy and hurt.
Check every frame of the core clips for limbs passing through the head, and fix it in the skin weights rather than the animation, because the clips were made for a smaller head.
Write a behaviour spec from the fork's movement code and rebuild it as a fixed-step 60 Hz simulation: walking and running speeds, jump heights, skids, wall jumps, ground pounds and knockback. The fork has no licence file, so its code was read as a reference only and none of it was copied.
Let a small bot press the buttons for the show; a visitor can click a character to play as it, drag either one to throw it, or use a stick and taps on a phone.

Outcome

A short show along the bottom of the home in Playful mode whenever the visitor pauses: the two chase or flee pixel Beluga with triple jumps, wall jumps, stomps and throws, then wave and leave. The models and three.js load only when the characters first appear, and never in Calm mode or with reduced motion.

Evidence

Measured in the simulation against the spec: a held standing jump peaks at 2.29 units on tick 30 and lands on tick 57; walking reaches 2.8125 units a second in 34 ticks and running 5.625 in 90. A clearance check over the 12 core clips found no paw or flipper inside the head on any frame. The two character files are about 100 KB each and the shared moves file 233 KB.

Limitations

The skeleton and the 36 animation clips come from the NSMB-MarioVsLuigi fork and are credited; its Mario and Luigi meshes, UVs and textures are not used. The physics follows the fork's behaviour, not its code. The meshes are blockouts rather than final art, and power-ups are not in yet.

Built with

three.js
JavaScript
Blender
Python
glTF
WebGL2

Meet them on the home (Playful mode)The fork