The Silver Swan
Background3DSeamless loopPortrait8 seconds
Source
Cathedral of a Butterfly
A bronze cocoon unfolds into a jewel-coloured stained-glass butterfly; the panes become a cathedral rose window casting coloured light across the stone floor. Loops.
Background, V1 Effects3DSeamless loop, verified179 lines of codev1.0.0
In Light, glass & shine, Nature & weather, Art & illustration styles, Made for phones
Combine several clips and hand them over together from your sequence.
A finished film
It plays exactly as rendered and has nothing to adjust. The preview runs the same code your AI receives.
Info
What it is
In a carved stone arch a bronze cocoon unfolds into a stained-glass butterfly with dark raised lead lines and eight jewel colours in mottled, mouth-blown panes. The wings spread, then the same panes rearrange into a round rose window, and coloured light from the glass is projected onto the stone floor below. It folds back into the cocoon, so the 8 seconds loop. The film has no settings.
Reuse it in your own idea
- Transformation story: cocoon, butterfly, rose window in one 8-second shot.
- Seamless loop: it folds back to the cocoon, so it repeats for any length.
- Spring greeting: the open butterfly holds for a second or two, which suits a short message.
Which part is reusable
src/stained-butterfly.js is the ingredient your AI reuses. demo.js is only the example scene around it, and uses the demo harness only for the demo.
Good to know
- The film is finished: it has no settings. To change colours or timing, edit the shader.
- It is composed for a 4:5 portrait frame.
- Its length is fixed at 8 seconds; repeat the loop to fill a longer clip.
Technical details
Technical details
- Implementation
- Three.js 0.185.1 (WebGL) · ES module
src/stained-butterfly.js - Exports
createStainedButterfly() => { scene, camera, setSize(width, height), update(time), dispose() }
- Dependencies (exact)
three@0.185.1(source) — Renderer and a full-screen shader material.apw-runtime@1.0.0(demo) — Demo harness.
- How it fits a scene
Coordinates: Composed for a 4:5 portrait frame and measured by the frame height: in a wider frame the picture stays centred at full height and its background fills the sides; in a narrower one, such as 9:16, the sides are cropped.
Lighting: Light passes through the glass: the panes glow from behind and project coloured light onto the stone floor.
Timing: The cocoon unfolds into a butterfly, the panes become a rose window, then everything folds back into the cocoon.
- Output
- 1080×1350, 30 fps, 8 s · procedural (computed from the frame number) · seamless loop — Every part of the film is a function of the time modulo its length, and every motion completes whole cycles, so the last frame meets the first.
- Tested
- Rendered 240 frames on 2026-10-10 in Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0 (WebGL 2 via SwiftShader (software)). Same frame twice from fresh pages: identical. Loop: Frame 0 vs end state (progress 1): mean |Δ| 0.0000, max |Δ| 0 of 255.
- Performance
- One full-screen fragment shader. About 4 ms a frame at 1080 by 1350 on an integrated Intel GPU (Iris Xe), and about 1 s a frame with software WebGL. Plays at 30 frames a second at full size on an integrated GPU.
- Export a video yourself
- Download the source, then in the folder:
npm install npm run render -- stained-butterfly/1.0.0 --out my-video.mp4Needs Node 18+, ffmpeg and Chrome/Chromium. Add--params my-settings.json(from Copy settings) for your own settings. - Version
- 1.0.0 ·
sha256:6a9c9988d966f1fe… - Files
- LICENSE 1 KB · demo
- asset.json 6 KB
- demo.js 1 KB · demo
- index.html 1 KB · demo
- src/stained-butterfly.js 8 KB · reusable
- License
- MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder. License details
- For agents
- agent.md · JSON manifest · standalone demo
- Provenance
- From the owner's collection Twenty Impossible Worlds: the original GLSL ES 3.00 shader of the film “Cathedral of a Butterfly”, created with ChatGPT / Codex and used as published, wrapped for AI Pixel Wizard as a three.js full-screen shader in October 2026. The collection's synthesised soundtrack is not part of this ingredient.
BinMore like this
More like this
Play these full screen
A Door Into Four Seasons
Background3DSeamless loopPortrait8 seconds
Neon Koi
Background3DSeamless loopPortrait8 seconds
Paper Birds, Real Shadows
Background3DSeamless loopPortrait12 seconds
A Flower Made of Ink
Background3DPortrait12 seconds
A Wave Becomes a Mountain
Background3DPortrait8 seconds
The Drawing That Breathes
Background3DPortrait8 seconds
The Last Green Pixel
Background3DPortrait8 seconds