R07 · Imagined Worlds · Stills
Gommage
An image comes apart from one edge into thousands of leaves in its own colours, a wind gathers them into a cloud, and they settle into the next image.
26.0s · 1920×1080 · 30fps · one take
Two of my Midjourney stills, joined without a cut. Lantern Festival comes apart from the left into about 32,000 leaves in its own colours, a wind gathers them into one swirling cloud, and they settle, bottom up, into Sea of Blooms.
An original score composed in code: an autumn waltz on felt piano and strings, with wind and rustling leaves. 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.
Make a 26-second 1920x1080 film in HyperFrames from two of my Midjourney stills: "Lantern Festival" and "Sea of Blooms". Lantern Festival holds full frame with a slow push-in. Then a gold-edged dissolve front crosses it from left to right and the picture comes apart into about 32,000 small leaves, one per 8 px cell, each carrying the colour of the spot it left. A gust throws them up and to the right, then they gather into one slow swirling cloud in the dark. The cloud opens and the leaves fall, bottom up, each into a random place in Sea of Blooms, turning to that spot's colour as the picture resolves under them. A few keep drifting. End on "Stills · Midjourney", "Imagined Worlds" and visions.joaoqueiros.com/stills, bottom left over a soft shade. Call the style Gommage, the name the effect goes by, but take nothing else from the game it comes from. Technique: Three.js WebGPURenderer with the WebGL2 backend and TSL. Two image planes whose opacity comes from a noise-shaped front in time; instanced sprite leaves whose birth and landing times use the same front functions, so leaf and picture always agree. Every position comes from time and a per-leaf seed: no simulation. Bloom pass. Score: compose it in code with numpy: an autumn waltz in 3/4, D minor to F, felt piano and string pads, wind, and a leaf rustle that follows how many leaves are in the air.
Remix it
Swap the parts in braces and paste it in. Some starting points:
- A product shot breaking into its own ingredients.
- A before photo settling into the after.
- A season changing on the same landscape.
- A logo dissolving into confetti on launch day.
Make a {duration}-second {width}x{height} film in HyperFrames.
{image_a} holds, then comes apart from {edge} into {n} small {particle_shape}s in its own colours.
A wind {wind_path}, and they settle {direction} into {image_b}.
Close on {final_line} and {url}.
Three.js with TSL: image planes masked by a noise front in time, instanced sprites using the same front.
Score composed in code: {score_idea}, with a rustle that follows the particles in the air.Ingredients
- stack
- HyperFramesThree.jsTSLWebGLGSAPPython (score)
- length
- 26 s · 1920×1080 · 30 fps · one take
- particles
- 32,400 instanced leaf sprites, one per 8 px cell
- images
- Two Midjourney stills from this site, 1920×1280
- type
- Instrument Serif · Manrope
- sound
- An autumn waltz composed in Python, -17 LUFS
- cost
- €0, all free and open source
how it's built
01 · 00:00
Fronts, not a simulation
Each spot of the frame has a time it leaves the first image and a time it lands in the second, from two small noise-shaped functions shared by the planes and the leaves.
02 · 00:03
One leaf per cell
32,400 instanced sprites, one per 8 px cell, each assigned a random cell of the second image. A leaf takes its colour from where it left and blends to where it lands.
03 · 00:06
Gold at the edges
The front adds gold for a fraction of a second where the picture is about to let go, and new leaves start warm; a bloom pass makes both glow.
04 · 00:09
A shape in the wind
Mid-flight every leaf is pulled toward a shared two-arm vortex, so the storm reads as one swirling cloud with dark space around it, not even confetti.
05 · 00:15
Settling bottom up
Each leaf eases into its target as the second picture resolves under it along a soft gold line. A few never land and keep drifting.
06 · 00:21
Sound from the same fronts
The rustle's density is the share of leaves in the air, computed from the same leave and land times as the picture.
gotchas
- Hide the WebGL extension KHR_parallel_shader_compile and render a few warm-up frames before the first capture, or the first frame of a render can come out blank.
- Thousands of small moving leaves are hard to compress: check the web encode up close and expect a bigger file than a flat film.
- An evenly spread cloud of particles reads as static. Pull it into a shape mid-flight and leave dark space.
source
Take the whole project
MIT for the code, composition and score. The two images, the name João Queirós and the site's brand are not included in the licence.