This portrait

Overview

The face at the top of this page is a scanned likeness running in the browser — eye saccades and pursuit, blinking, breathing, micro-expressions — with a three-layer robotic endoskeleton fitted beneath the skin and revealed through a GPU shader where you point.

Who it’s for. Anyone visiting — on a laptop with a cursor or a phone with a finger, with or without a fast GPU, with or without motion.

My role. Art direction and build, with an AI coding agent.

The interesting parts

The skin is cut on the GPU with a 3D distance field in the head's own coordinate frame, so openings follow the face through every expression.
The endoskeleton was fitted procedurally and audited by ray visibility against every skin state — nothing pokes through.
KTX2 textures cut GPU texture memory from 464 MB to 94 MB with no visible loss (48 dB PSNR).

The problem

A portfolio usually says “I care about detail.” I wanted the first thing a visitor touches to show it: a believable human that behaves like one, and an engineering surprise under the surface that only works if a hundred small things are right.

Architecture

One persistent React Three Fiber canvas (root layout — never remounted)
  KeenFace head (51 morph targets) ── neck pivot ── robot layers (same frame)
        │
  Pointer → BVH raycast on a morph-synced copy of the skin (60 Hz, sparse updates)
        │
  Reveal brush: 6 trailing points in head-local space
        │
  Skin shader: distance field → alpha-to-coverage cut + layered edge
  Robot shaders: armor · internals · chassis, robot-only key light (GGX)

Fitting a robot under a face

The Meshy robot was aligned to the face by landmarks and ICP, then only its low-frequency depth was conformed to sit ~5 mm under the skin, keeping its relief. A Blender pass split it into plates with real thickness, added procedural servos, actuators, gears, cable looms and a perforated inner chassis, and checked every part by casting rays toward the camera against every skin state the site animates.

Making the eyes feel alive

Gaze is a single fixation point both eyes aim at: ballistic saccades for jumps over 2°, timed by the main sequence (≈21 ms + 2.2 ms per degree), smooth pursuit for a moving cursor, microsaccades during fixation, and a head that follows the eyes rather than the cursor.

Measured, not assumed

Every change was checked with scripted real-browser captures at an identical camera and pose (Chrome and WebKit).
60 fps during reveals; p99 frame time 16.8 ms in Chrome.
Original assets kept byte-identical; every generated asset is versioned.