The page starts in the dark. Loose characters become jungle, two eyes light up and the jaguar fills with characters from the eye outwards. He starts walking, trots, gallops and sprints. After that he keeps galloping, with a short sprint every twenty seconds. Scrolling, swiping or the right arrow key gives him a brief burst of extra speed.
Every frame the GPU draws four small images: the jungle outside the jaguar, the same jungle inside the jaguar (slower and brighter), the jaguar itself and the foreground. A shader turns these into ASCII, one character per cell. Outside the jaguar it picks the character from the brightness of the jungle; only the brighter parts get a character, in muted colours. Inside the jaguar the fur decides where characters go: the rosettes become holes, the outline stays solid. The light of the jungle inside decides how full each character is. The characters keep the colours of that jungle, with a warm amber tint and a minimum brightness, and one empty cell runs around the jaguar. That keeps him the clearest shape on screen. When the jaguar runs through a ray of light, his characters fill up.
The jaguar is one painted side view, cut into a body and four legs, with a 2D skeleton and skinning. The legs follow foot paths for walk, trot and rotary gallop, with inverse kinematics, so they do not slide over the ground. Rain, mist, lianas, five parallax layers and puddles with splashes are made of characters too; the puddles are ripple lines that move with the ground. Underneath lies the painted forest, dimmed. Leaves and lianas in the foreground darken the jaguar when they pass in front of him, but do not cover him. Sound is optional: the rainforest and the rain were synthesised in advance, the footsteps are made live, in step with the animation. The images were made in advance with gpt-image-2 and gpt-image-1.5; the page never calls an AI service.
Every frame the GPU draws four small images: the jungle outside the jaguar, the same jungle inside the jaguar (slower and brighter), the jaguar itself and the foreground. A shader turns these into ASCII, one character per cell. Outside the jaguar it picks the character from the brightness of the jungle; only the brighter parts get a character, in muted colours. Inside the jaguar the fur decides where characters go: the rosettes become holes, the outline stays solid. The light of the jungle inside decides how full each character is. The characters keep the colours of that jungle, with a warm amber tint and a minimum brightness, and one empty cell runs around the jaguar. That keeps him the clearest shape on screen. When the jaguar runs through a ray of light, his characters fill up.
The jaguar is one painted side view, cut into a body and four legs, with a 2D skeleton and skinning. The legs follow foot paths for walk, trot and rotary gallop, with inverse kinematics, so they do not slide over the ground. Rain, mist, lianas, five parallax layers and puddles with splashes are made of characters too; the puddles are ripple lines that move with the ground. Underneath lies the painted forest, dimmed. Leaves and lianas in the foreground darken the jaguar when they pass in front of him, but do not cover him. Sound is optional: the rainforest and the rain were synthesised in advance, the footsteps are made live, in step with the animation. The images were made in advance with gpt-image-2 and gpt-image-1.5; the page never calls an AI service.
More work
Interactive 3D WebGL Experience
A 3D WebGL piece with animated chrome letters, a neon grid and warp-speed stars. Move your mouse to pan the camera.
Interactive World Globe
A 3D globe of 2,000 points of light, built with Three.js. Pick the Netherlands, Suriname or England and the globe turns to that country, with a short text.
Interactive DOS Experience
An MS-DOS simulation with CRT effects and real commands such as DIR, CD, TYPE and HELP. CAROUSEL.EXE breaks the screen into ASCII blocks that turn into a 3D carousel.