All recipes

R12 · Stills · Imagined Worlds

Denoise

An image resolves out of noise in forty visible steps like a generation preview, then the camera dives through it into a page that renders card by card.

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

The intro film for this site's Stills page. Its own prompt types out, an eye resolves out of diffusion noise in forty steps, the camera dives through the pupil into the page as it renders, and the last card pulls back into the wall of every still.

An original score composed in code. 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 10-second 1920x1080 intro film in HyperFrames for the Stills page of my site, on #0b0a09.
The page's own prompt "/imagine stills --curated --upscaled" types out in IBM Plex Mono with an ember #ff6d3b
caret. On Enter, my still "Pure Form", a close-up of an eye, resolves out of noise like a generation preview:
mosaic, blur, grain and grey fall away in forty visible steps while the HUD counts "step 00 / 40".
The camera pushes in and dives through the pupil into the Stills page, which renders card by card in its real
one, two and three column rhythm, each card denoising on the beat. The last card turns out to be one tile of a
wall of all my stills: the camera pulls back as the other tiles resolve outwards from it, empty cells and a
"/imagine" caret in the corner, and the wall dims under the title "Stills" in Fraunces with
"Hand-picked from thousands of generations." below.
No counts anywhere: the collection grows.
Technique: one painter draws every frame from time; one denoise function draws any image at any step on a
canvas (downscale for the mosaic, a blur filter, desaturation and seeded grain); camera keyframes with zoom in
log space.
Score: compose it in code with numpy, D major: a tick per typed letter, a click on each of the forty steps, a
bell when the eye is clean, a whoosh into the dive, a rising note per card and one hit for the title.

Remix it

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

  • A product range resolving into a shop's grid.
  • A photographer's portfolio, starting from one portrait.
  • A lookbook where the dive goes through a button.
  • A team page, from one face to every face.
prompt · template
Make a {duration}-second {width}x{height} film in HyperFrames for {subject}, on {background}.
The prompt "{prompt}" types out, then {hero_image} resolves out of noise in forty visible steps
(mosaic, blur, grain and grey fall away) while the HUD counts them.
The camera dives through {focus_point} into {page}, which renders card by card, each card denoising on the beat.
The last card becomes one tile of a wall of {collection}; pull back as the tiles resolve outwards, then dim the
wall under the title "{title}".
One painter draws every frame from time; one denoise function draws any image at any step.
Score composed in code: a click per step, a rising note per card, one hit for the title.

Ingredients

stack
HyperFramesCanvas 2DHTMLGSAPPython (score)
length
10 s · 1920×1080 · 30 fps · one take
steps
40 visible denoise steps, six seeded grain tiles
palette
#0b0a09 · #ece7dd · #ff6d3b · #99927f
type
Fraunces · Instrument Sans · IBM Plex Mono
sound
D major, composed in Python, -15 LUFS
cost
€0, all free and open source

how it's built

  1. 01 · 00:00

    The prompt types

    The page's own prompt types out with an ember caret, and on Enter the frame fills with noise.

  2. 02 · 00:02

    One denoise function

    One function draws any image at any of forty steps: drawn tiny and scaled up for the mosaic, blurred and greyed, with seeded grain on top that fades as the steps run out.

  3. 03 · 00:04

    The dive

    At the last step the canvas hands over to the clean image, which zooms 26 times about the pupil in log space.

  4. 04 · 00:05

    The page renders

    The page's cards are canvases in their real layout. Each starts on the beat and denoises in under a second while the camera moves down the column.

  5. 05 · 00:07

    Card to wall

    The last card and its tile in the wall share the same screen size at the swap, so the cut is invisible. The other tiles resolve outwards by their distance from it.

  6. 06 · 00:09

    The title

    The wall dims under the title, and the corner keeps an empty cell with a caret for the next prompt.

gotchas

  • Quantise the progress into steps. A smooth denoise reads as a blur; forty hard steps read as a generation.
  • Hand over from the canvas to a plain image before the big zoom: a frame-sized canvas goes soft scaled up 26 times.
  • Match the last card and its wall tile in screen size at the swap, or the cut shows.

source

Take the whole project

MIT for the code, composition and score. The images (João Queirós' Midjourney stills, included so the film runs), the names Imagined Worlds and João Queirós and the site's own prompt and title are not included in the licence.

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