Webページをレトロに彩る!CSSで動くASCIIアートの作り方
Animated ASCII Art for Web Pages
Animated ASCII Art for Web Pages
Webサイトに少し遊び心が欲しいですか?実は、CSSと少々の工夫でASCIIアートをアニメーションさせることができます。シンプルかつインパクト抜群の演出をあなたのプロジェクトに取り入れてみましょう!
美しいね。ただ、ピースがアニメーションしているようには見えないんだけど。何か見落としてるかな?
最高だね。自分も似たようなこと(もっと小規模だけど)をClaude Code/Piのためにやったよ。どれくらい動いてるか視覚化するやつ https://github.com/robdmac/flow (https://github.com/robdmac/flow) でも、このASCIIアートを見てたら、昔SSHでサーバーに入るたびに、今どこにいるのか頭の中で地図を描くための何かが欲しいと思ってたことを思い出したよ。今はもうSSHでサーバーに入ったりはしないけど、もし今やってたら、間違いなくターミナルでこのシーンを再現しようとしてたはず!
いい感じ。自分のオンライン活動の最初期の貢献といえば、ローカルのダイヤルアップBBSだったな。掲示板のテーマに合わせて、丸一日かけてアニメーションするASCIIシーケンスを作ったりしたものだよ。
見た目はすごくいいけど、これASCIIアートじゃないよね?ASCIIはどこにあるの?大きさがバラバラの点ばかりで、これってASCII文字じゃないよね。もしかしてユニコードアートなのかな?
豪華で、印象的で、よくできてるよ。でも、技術的な「簡素さ」を装っている感じが拭えないな。つまり、制限の多いメディアの信頼性を借りているのに、その制約自体は受け入れていないというか。繰り返すけど、すごく綺麗だよ。でも…テスラを改造してシトロエン2CVっぽく見せてるような感じかな。
システム側で「視差効果を減らす」設定にしてるから、アニメーションが何も動いてない。配慮としては素晴らしいんだけど、デモページでその旨をもっと分かりやすく表示してほしかったな。あと、アートシーンのセクションはASCIIじゃないよ。
「シーン」は、ディザリングの回りくどい試みみたいに見える。期待してたものとは違うな。他の部分もかなりマキシマリストで装飾的だね。アニメーションとしては好きだけど、UIやTUIの一部としてはちょっと遠慮したい。
スクロールしていくうちに、投稿者がこのライブラリを作るのをどれだけ楽しんでいたかが伝わってきて、どんどん感心させられたよ。スプリットフラップ(https://ascii.rest/split-flap/ )は最高だね。あと自然をテーマにしたやつ(https://ascii.rest/fern/ )を見て、これらを表示するデジタルフレームが欲しくなったよ。壁掛けアートとしてすごくクールだと思う。このASCIIはリラックスしたムードを作ってくれるね。あの震えるスピナーのページ以外はね @ZeWaka :)。投稿者さん、貢献してくれてありがとう!
これを見て、別の素晴らしいガチなASCIIアニメーションライブラリを思い出したよ https://play.ertdfgcvb.xyz/ (https://play.ertdfgcvb.xyz/)
これかっこいいね!固定グリッドを使わずに同じ感覚を再現できるのか気になるところ。点描画とかハーフトーンレンダリングみたいな感じで、点を自由に配置できたらどうなるんだろう。