--- title: "Midjourney Prompt Vortex" description: "A wall of real Midjourney prompts swirled into a slow CRT vortex with the wordmark fading up at its eye." canonical: "https://fx.statico.io/demos/midjourney-home" doc_version: "0.1.0" last_updated: "2026-07-27" date_modified: "2026-07-27T19:06:35-07:00" source: "https://github.com/statico/cool-web-fx" license: "Unlicense" --- > Canonical HTML version: # Midjourney Prompt Vortex A wall of real Midjourney prompts swirled into a slow CRT vortex with the wordmark fading up at its eye. Seen on [Midjourney](https://www.midjourney.com/home) · credit Midjourney. ## How it works This is a faithful port of the actual `` 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. ## Code Copy this whole file. It is a complete, runnable HTML document — also served verbatim at . ```html Midjourney — Prompt Vortex

Midjourney Prompt Vortex

A wall of real Midjourney prompts swirled into a slow CRT vortex with the wordmark fading up at its eye.

How it works

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.

How to use this file

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.

Source and credit

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.

More

Terms used above are defined in the glossary. See also the site map, AGENTS.md and llms.txt.

``` ## Source & credit Effect seen on — credit to Midjourney. This is an independent recreation of the effect built from scratch for educational use. No proprietary source code was copied. ## Sitemap - [All effects](https://fx.statico.io/index.md) — gallery index - [Site map](https://fx.statico.io/sitemap.md) — every page, grouped - [sitemap.xml](https://fx.statico.io/sitemap.xml) — machine-readable, with lastmod - [AGENTS.md](https://fx.statico.io/AGENTS.md) — how to grab and reuse an effect - [skill.md](https://fx.statico.io/skill.md) — full agent skill file - [llms.txt](https://fx.statico.io/llms.txt) — short index of every effect - [Glossary](https://fx.statico.io/glossary.md) — terminology used in the writeups