Skip to content

A Love Triangle

A red circle and a black triangle chase each other round a blue spring and a yellow doorway, then four shapes lock into one heart. A Bauhaus poster in motion.

Background, V1 Effects3D160 lines of codev1.0.0

In Art & illustration styles, Made for phones

Next: A Door Into Four SeasonsSurprise me

A Love Triangle preview
Starting live preview…
00:00:00:00 / 00:00:00:01

Live, running the real source at reduced resolution.

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

A kinetic poster in the Bauhaus manner, printed in primary inks on warm ivory paper with a fine grain and small registration marks. A red circle and a black triangle fall, rebound and chase each other around a cobalt spring and a yellow doorway. After a beat of anticipation the four shapes settle into a single architectural heart that holds to the last frame. There is no text, and the film has no settings.

Reuse it in your own idea

  • Valentine clip: play the whole film; the heart is in place by about 5.5 s and holds.
  • Poster-style intro: stop on the held heart and set your title in the empty paper at the bottom.
  • A "styles of print" reel: cut it beside the other Impossible Worlds posters.

Which part is reusable

src/bauhaus-love.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.
  • The end does not return to the start, so repeating it is a hard cut.

Technical details

Technical details
Implementation
Three.js 0.185.1 (WebGL) · ES module src/bauhaus-love.js
Exports
  • createBauhausLove() => { 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: None: flat printed inks on ivory stock with a fine paper grain and registration marks.

Timing: The shapes fall and rebound, the circle and triangle chase each other round the spring and doorway, then all four lock into a heart that holds to the end.

Output
1080×1350, 30 fps, 8 s · procedural (computed from the frame number) · not a loop — A one-shot film: it builds to a finished picture that holds to the last frame, so the end does not return to the start.
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.
Performance
One full-screen fragment shader. About 3 ms a frame at 1080 by 1350 on an integrated Intel GPU (Iris Xe), and under a second 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 -- bauhaus-love/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:559b6299d1196d1c…
Files
License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder. License details
Provenance
From the owner's collection Twenty Impossible Worlds: the original GLSL ES 3.00 shader of the film “A Love Triangle”, 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