All recipes

R09 · Recipes · Imagined Worlds

Aurora in ASCII

A live 3D scene drawn only in text characters, like an old terminal: every cell picks a glyph by brightness and takes that spot's colour.

26.0s · 1920×1080 · 30fps · one take

The film for the Recipes library, drawn only in text characters like an old terminal. A command types itself, curtains of aurora rise over a ridge as glyphs in green, teal and violet, the cells shrink until the aurora is almost a smooth picture and grow back, and the glyphs settle into the title.

An original score composed in code: key clicks, a digital crackle, a slow synth pad and a shimmering arpeggio. No spoken dialogue. On-screen text carries the story.

scene breakdown · select a scene to play

The prompt

The brief I gave Claude Code, with the HyperFrames skills installed, to start this film. Approvals and fixes came after, but this is where it began.

prompt · verbatim
Make a 26-second 1920x1080 film in HyperFrames for the Recipes library on my site. Draw it like an old terminal:
on near-black #07090C, a cursor blinks and the command "render aurora --ascii" types itself. Then a live
Three.js scene appears only as text characters: curtains of aurora rise and ripple over a dark ridge under
stars, green #5CF2A2 at the hem through teal #3FC8D8 to violet #9B7BFF at the tops. Halfway, the character cells
shrink until the aurora is almost a smooth picture, then grow back. The aurora dims and the cells settle into
the title "Recipes", with "films, prompts and source" and visions.joaoqueiros.com/recipes typed under it.
Technique: render the scene to a texture; one post shader cuts the frame into 12x20 px cells, samples the
scene at each cell's centre and draws the matching glyph from " .:-=+*#%@" out of a font atlas drawn on a canvas
in IBM Plex Mono, tinted with that cell's colour. Cells switch on at seeded random times with a flicker of
random glyphs. The cell size is a uniform for the shrink; the title is a second mask texture read by the same
pass. Fraunces for the title mask. One painter computes every frame from time.
Score: compose it in code with numpy: key clicks for every typed character, a digital crackle as cells switch
on, a slow analog-style pad in A minor and a shimmering arpeggio that rises with the aurora, and a low hum that
swells when the cells shrink.

Remix it

Swap the parts in braces and paste it in. Some starting points:

  • A product turning on a stand, drawn in characters.
  • A city at night where every lit window is an @.
  • A 3D logo that resolves out of the text.
  • A weather map whose clouds are made of glyphs.
prompt · template
Make a {duration}-second {width}x{height} film in HyperFrames, drawn only in text characters like a terminal.
A cursor types "{command}". Then {scene_3d}, rendered live in Three.js, appears as glyphs from "{ramp}",
each in its own colour, on {background}. At {moment} the cells shrink to almost a smooth picture and grow back.
End on {title} built from the same glyphs, with {subtitle} and {url} typed under it.
One post shader: cells of {cell_size}, sample the scene at the cell centre, glyph from a canvas font atlas.
Score composed in code: key clicks, a crackle as cells switch on, {score_idea}.

Ingredients

stack
HyperFramesThree.jsTSLGSAPCanvas 2DPython (score)
length
26 s · 1920×1080 · 30 fps · one take
grid
12 × 20 px cells, 160 × 54 glyphs, shrinking to a quarter
ramp
" .:-=+*#%@" in IBM Plex Mono
palette
#07090C · #5CF2A2 · #3FC8D8 · #9B7BFF
type
IBM Plex Mono · Fraunces (title mask)
sound
Clicks, crackle, pad and arpeggio composed in Python, -17 LUFS
cost
€0, all free and open source

how it's built

  1. 01 · 00:00

    A terminal first

    The command types itself in the DOM, one character per key click in the score, before any glyph is drawn.

  2. 02 · 00:03

    Cells switch on

    Each cell has a seeded time to switch on and shows random glyphs for a third of a second around it, so the picture boots rather than fades.

  3. 03 · 00:06

    A real scene underneath

    Three aurora curtains are ribbon meshes moved by noise, with stars and a ridge, rendered to a texture that is never shown directly.

  4. 04 · 00:10

    One pass makes the text

    The post shader samples the scene at each cell's centre, maps brightness onto the ramp and reads that glyph from a canvas font atlas, tinted with the cell's hue at full strength.

  5. 05 · 00:15

    Shrink with one number

    The cell size is a uniform and the grid zooms about the centre; when the cells are tiny the picture shows through, then they grow back.

  6. 06 · 00:20

    The title is a mask

    "Recipes" is drawn once in Fraunces on a canvas, softened so its edges make a ramp, and read by the same pass as a second brightness.

gotchas

  • A canvas texture and the screen can disagree on which way is up: check the title mask in the first snapshot.
  • Too much light turns every cell into @. Keep the scene darker than looks right and let the ramp do the work.
  • Several additive curtains on top of each other become one flat wall of glyphs. Fewer curtains, patchy and bright at the hem, read as aurora.

source

Take the whole project

MIT for the code, composition and score. The names Imagined Worlds and João Queirós are not included in the licence.

download source zip view on github the film page
Back to Recipes