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.