Midjourneyのランディングページがとても気に入って、どんなライブラリを使っているのか調べていたら、クローニングした動画を見つけた。

この方の作業を見ると、コード量はそれほど多くなかったので、自分でもクローニングしてみた。

トランスフォームのロジックだけ少し分離して、パイプライン形式で入れられるようにした。 作った後、Lit Elementでうまくラップした。

こんなことができる。

基本

Midjourneyスタイル spiral

<AsciiElement
  transforms={['spiral']} />

spiral -> zoom -> wave

<AsciiElement
  transforms={['spiral', 'zoom', 'wave']}/>

しばらく待つと銀河の形になる

もっといくつか追加しようとしたけど、これ以上入れるとブラウザが固まりそうだった…なのでここまでにしておく。
DOM数を少し減らしてみたら大丈夫になった。
うまく管理して使えば面白そうだ。