Components
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).
npx @21st-dev/cli@beta add arlanoska/midjourney-asciiLoading preview...
"use client"
import { CursorTrail } from "@/components/ui/midjourney-ascii"
const STYLE = `
.swirl-demo{--text-primary:#1b1b1b;--text-secondary:#6b6b6b;--text-tertiary:#b5b5b5;--text-body:#2f2f2f;--border-ring:rgba(0,0,0,0.1);--border-line:#f0f0f0;--bg-page:#fcfcfc;--bg-hover:#f7f7f7;--bg-surface:#fff;--ease-out:cubic-bezier(.215,.61,.355,1);--ease-expo:cubic-bezier(.16,1,.3,1)}
@keyframes swirl-pop{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.swirl-tabscroll{scrollbar-width:none}
.swirl-tabscroll::-webkit-scrollbar{display:none}
.hue-track::before{content:"";position:absolute;inset:0;border-radius:9999px;background:linear-gradient(90deg,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}
.swirl-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:transparent;border:none;width:16px;height:16px}
.swirl-range::-moz-range-thumb{background:transparent;border:none;width:16px;height:16px}
.swirl-range::-webkit-slider-runnable-track{background:transparent}
.swirl-range::-moz-range-track{background:transparent}
`
export default function CursorTrailDemo() {
return (
<>
<style>{STYLE}</style>
<div className="swirl-demo flex min-h-screen w-full justify-center bg-[#fcfcfc] px-8 py-10 font-sans text-[var(--text-primary)]">
<div className="w-full max-w-[656px] self-start">
<CursorTrail />
</div>
</div>
</>
)
}
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...