Yongseok's Blog
Back
2 min read
Leisure Activity

I loved the Midjourney landing page so much that I looked into what library they used, and that led me to a cloning video.

Looking at their work, the amount of code wasn’t that much, so I decided to try cloning it myself.

I extracted just the transform logic and made it pluggable in a pipeline style. Then I wrapped it all up nicely as a Lit element.

Here’s what it can do.

Basic

Midjourney-style spiral

<AsciiElement
  transforms={['spiral']} />
  • -----
  • spiral
  • -----
  • FPS:
  • 0.00
  • -----

spiral -> zoom -> wave

<AsciiElement
  transforms={['spiral', 'zoom', 'wave']}/>
  • -----
  • spiral
  • zoom
  • wave
  • -----
  • FPS:
  • 0.00
  • -----

Wait long enough and it forms a galaxy shape

  • -----
  • hurricane
  • spiral
  • -----
  • FPS:
  • 0.00
  • -----

I was going to attach a few more, but adding more almost crashed the browser… so I’ll stop here.
After reducing the DOM count, it runs fine now.
With proper management, this could be pretty fun to use.