A wall of real Midjourney prompts swirled into a slow CRT vortex with the wordmark fading up at its eye.
This is a faithful port of the actual <canvas> hero on midjourney.com/home — not the image grid further down the page, which is just static PNGs. The real effect is a two-stage pipeline pulled verbatim from Midjourney's clientSideEntry bundle.
Stage 1 — the swirl (offscreen 2D canvas). A block of 65 genuine Midjourney /imagine prompts (the same wall of text the site ships) is treated as a character grid. For every output cell the renderer doesn't just copy the source character — it computes the cell's normalized position (nx, ny), its radius from centre, and a rotation angle ang = time*0.1 / max(0.1, radius), then samples the source grid at the rotated coordinate. Because the angle grows as radius shrinks, the centre spins far faster than the edges, winding the prompt wall into an ever-tightening vortex. Text is drawn in hsl(220, 48%, 48%) on a #061434 field, one fillText per row. The Midjourney figlet banner is centred on top: each of its glyphs is produced by lerp-ing the underlying swirl character's char-code toward the banner glyph's char-code over an eased 1 - (1 - t)2 ramp, while a white overlay (rgba(255,255,255,U)) fades in over the first two seconds — so the wordmark appears to crystallize out of the noise.
Stage 2 — the CRT shader (WebGL2).** That 2D canvas is uploaded as a texture each frame and drawn through Midjourney's real fragment shader. It applies barrel curvature that eases in over 3000 ms (easeOutQuad), an RGB chroma split of 0.005 * exp(-uTime/750) that decays away over the first second, moving subtractive scanlines (sin((uv.y + uTime*5e-7) * uResolution.y) at 0.4 opacity), a 1 - length(uv-0.5)*0.7 vignette, a 2.5x brightness boost, and an 1 - exp(-c) soft-clip to keep highlights from blowing out. Pixels pushed outside the curved frame are output transparent, letting the page's linear-gradient(0deg, #06051d 30%, #061434) show through the rounded corners.
Everything is reconstructed from the source: both GLSL shaders, the swirl maths (IA3), the clamp/lerp/ease helpers, the exact colours and timings, and the prompt text itself. It is fully standalone — no CDN, no fonts, no images. The only deviation is a devicePixelRatio cap of 2 for performance; the live site uses the raw ratio.
This is a complete, self-contained HTML document — copy it verbatim rather than reconstructing it. Markdown version: https://fx.statico.io/effects/midjourney-home.md. Full writeup and live preview: https://fx.statico.io/demos/midjourney-home.
Effect originally seen on Midjourney (https://www.midjourney.com/home) — credit to Midjourney. This is an independent recreation built from scratch for educational use; no proprietary source code was copied. Released under the Unlicense.
Terms used above are defined in the glossary. See also the site map, AGENTS.md and llms.txt.