Midjourney ASCII Swirl

An interactive rebuild of Midjourney Medical's ASCII intro: a vortex of monospace characters that slowly spins and condenses into a logo — it's all real text, moved around by code. Pure WebGL2 (no three.js, zero dependencies): a glyph atlas, an instanced text renderer, per-cell vortex field math, and a CRT post pass with scanlines, chromatic aberration and barrel curvature — all tunable live. Ships the author's full engine as readable modules, plus five experiments riding it: type your own logo (nine figlet block fonts, dark/light themes, per-font accent palettes), the same swirl scored with a live WebAudio synth (entrance sweep, hover ticks, click thuds, an ambient churn drone — no audio files), a draggable hot trail that churns the letters, multi-stop gradient ink that flows through the field, and click shockwaves with four sustained wave patterns (wavefront, ripples, flow, cloth).

by Arlan

import { SwirlPlayground } from "@/components/ui/midjourney-ascii";

const settings = {
  text: "INK",
  ink: "#fbbf24",
  logoColor: "#fb7185",
  bg: "#140a02",
  rows: 42,
  speed: 1,
  swirl: 1.4,
  density: 0.6,
  zoom: 1,
};

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <div className="h-screen w-screen">
      <SwirlPlayground {...s} />
    </div>
  );
}