ambient pixel loop
A cat, clocked in
after hours.
Coffee's hot, the paw sign's buzzing violet, and something is compiling on the second monitor. The deadline can wait — it's night shift.
anatomy of the scene
Six things happening at once
Nothing in this room is a static sprite. Every element below runs on its own clock, seeded so the loop never quite repeats itself.
Fairy lights
Fourteen bulbs sag across the wall. Each one cycles hue on its own clock, so the string never quite repeats.
Neon paw sign
A paw-shaped sign breathes through violet, bleeding a soft glow across the ceiling above the desk.
Steaming mug
Three wisps rise, wobble, and fade — each timed just slightly out of sync so it never looks mechanical.
RGB keyboard
Thirty keys chase color left to right. The row under a paw brightens the instant it's pressed.
Drifting particles
Sixteen motes drift up past the screen glow, each with its own seeded speed, sway, and lifespan.
The night-shift cat
Breathes, blinks, turns to check the room, and taps out a rhythm on the keys only it understands.
behind the pixels
How the loop is built
No video, no sprite sheet — just a canvas, a handful of functions, and one time value.
Lay the grid
The whole room lives on a 160×100 pixel grid, scaled up 6× through a single px() helper. Every shape, from a window to a whisker, is just rectangles on that grid.
Bake the backdrop
The wall, window, skyline, rug, and shelf are drawn once to an offscreen canvas. The animation loop never repaints them — it just stamps that image down each frame.
Layer the motion
Lights, sign, mug, monitor, keyboard, cat, and particles are each redrawn from scratch every frame, driven entirely by one shared time value t.
Composite the frame
Everything stacks back onto the visible canvas roughly sixty times a second, and requestAnimationFrame asks for the next one.
desk notes
Pinned near the monitor
good to know
Spec sheet
Keep it running.
Pop it fullscreen on a second monitor, or take the whole file with you.