FIELD NOTES 02 / 02
A gaze that follows you.
The watercolor panda in the corner of an article does one small thing: it looks toward you. No chat box. No quests to interrupt the reading.
Where is it looking?
Move all the way around it. Instead of switching between eight videos, it takes the shortest path through one continuous circular atlas.
Preparing the atlas…
In articles it is just 144px wide and hidden on narrow screens. This exhibit brings it onto the stage so phones can try it too.
A whole turn, inside one image.
These eight samples come from the actual production atlas. The motion is already drawn; the browser chooses which cell to show.
Make motion a function of input.
A regular video chooses its picture by time. This panda chooses it by pointer direction. Start with one continuous H3 gaze loop, extract frames, clean its seam, remove the background, and pack a transparent WebP atlas.
Avoid snapping angles to eight directions or repeatedly seeking video currentTime. Continuous target frames and damping keep movement coherent, including across the circular seam.
pointer → atan2(dy, dx) → target frame
target → shortest circular path → damping
rounded frame → canvas.drawImage()One identity, one locked camera
Keep body and composition fixed while the head and gaze trace a closed path. One continuous generation preserves identity better than eight independent videos.
Clean the seam and calibrate
Remove duplicate holds and inspect last-to-first continuity. In this atlas, frame 0 faces upper-left at −135°. That calibration is specific to this asset.
Take the shorter way around
Frame 53 to frame 0 is one step forward, not 53 steps back. A center dead zone prevents erratic turns when the pointer sits on its nose.
Keep the reading quiet
Cap device pixel ratio and stop RAF when settled. The real widget leaves article clicks alone, can be dismissed, and becomes a still under reduced motion.
Implementation notes for another agent
Validate a full turn with an angle slider before connecting the pointer. Calibrate against the real atlas; a new character needs a new start angle. This exhibit reuses the production renderer, animator, and pointer-vector helpers.
angle = atan2(pointerY - centerY, pointerX - centerX)
frame = wrap(angle - startAngle, 2π) / (2π) * frameCount
delta = shortestCircularDelta(current, target, frameCount)Source entry points: animator + renderer · pointer vector · manifest · BlogPetWidget