P · a living site experiment
A little curiosity.
A little company.
How little motion does it take to make a character feel attentive?
I wanted this website to feel inhabited. P is its small, floating companion: curious about your pointer, occasionally distracted, and usually trying to help. P stands for prototype, with a nod to my home in ProtoLab.
Move your pointer nearby, or try a gesture. P’s head leads; the rest catches up.
A little room to be curious.
Looking is a small conversation
A quick head turn says “I noticed.” A held tilt leaves a moment for curiosity. The antennae settle a little later, and the body takes its time. Those differences matter more to me than adding another facial expression.
I built a small vocabulary around those moments: a greeting, a curious lean, an affirmative nod, a glance away, and a startled recovery. Each gesture has an arrival, a pause, and a way back to rest. Pointer tracking blends into that movement; it does not restart the whole performance every time you move.
Notice
The lens eyes and head turn first. A tilt and an uneven antenna pose make the attention feel a little less mechanical.
Follow
The floating body accelerates gently and settles above its shadow. Sometimes P loses interest and wanders.
Make room
P waits in gaps around the reading. A small accidental nudge is followed by a repair; the words and links stay intact.
One companion, two places
A thought in the way.
A little room to get around it.
Invite P out into the page.
P begins beside the homepage record. Enter the 3D home and it appears inside, hovering between places to perch. Scroll back into the reading and it can follow you out. The white shell, optical lenses, orange detail, and gestures keep that identity recognizable.
On the page, P looks for a clear way around the words and cards. It usually flies around an edge, sometimes tucks into a smaller gap, and opens a pair of little portals when a crossing is blocked. A rare bump has a visible approach, a small wobble, and a repair. The reading stays where it belongs.
The surface responds to the site’s four times of day: softer morning light, cooler daylight, a warm afternoon, and a quiet evening rim. The page version draws a tiny analytic 3D portrait; the room uses the articulated Blender model. They share their motion vocabulary, attention, and brief rests.
This is an authored character experiment. P’s remarks and actions are local, with no language-model requests, camera access, or microphone access. Reduced motion gives it a composed still pose, and its brief rests end automatically.
What changed after the first pass
The first P had a rectangular visor and a small round body. In review, I asked for the physical charm of Reachy Mini and the floating ease of EVE. Separate convex lenses and a tapered shell helped, but the hollow eye rings still felt cold and the antennae too wiry. The next pass uses softer filled pupils that widen, squint and wink, shorter flexible antennae, and shaped flippers. The larger playground makes those small differences easier to judge.
The useful lesson: a character needs a coherent silhouette and a few legible gestures before it needs more behavior. The next question is whether its occasional interruptions remain welcome during a longer reading session; I have not run a visitor study yet.
Inside the little robot
The room model has separate pivots for the head, two antennae, two optical pupils, and two arms. Blender exports those parts to a GLB; a small JavaScript controller poses them at runtime. The page portrait draws the matching silhouette directly in a small WebGL canvas, so the default reading page does not need to download Three.js or the house.
Both renderers use the same gesture controller. Authored poses blend with pointer attention, antennae follow damped springs, and a quintic minimum-jerk curve eases into and out of each pose. An interrupted gesture starts from its current pose. Hidden tabs stop drawing; a failed graphics context leaves a still portrait.
The Blender authoring script and motion controller are available to inspect and adapt.
Inspiration & resources
- Pollen Robotics and Hugging Face’s Reachy Mini: the expressive head, unequal lens eyes, and independently posed antennae. Its movement API informed the separation of head, antennae, and body, and the use of minimum-jerk timing.
- The Reachy Mini Dances Library: a reference for nods, side tilts, glances, and recovery gestures. P’s smaller, quieter browser choreography is original; no dance recordings, choreography files, or SDK code are bundled.
- Pixar’s WALL·E, especially EVE: the floating tapered silhouette, detached arms, and expressive pauses. These are visual and motion influences; P uses original geometry, with no film images or studio models in the site.
- Blender and Three.js: the editable articulated model, GLB export, and room renderer. The lightweight page portrait and motion controller are original WebGL and JavaScript.
- Sirui Tao, with OpenAI Codex: character direction, references, critique, implementation, and iteration. Model source and provenance · browser source.