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).

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Midjourney ASCII Swirl to your project and fits it to your theme.

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

const settings = {
  text: "MIDJOURNEY",
  ink: "#8b5cf6",
  logoColor: "#ffffff",
  bg: "#08070d",
  rows: 44,
  speed: 1,
  swirl: 1,
  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>
  );
}