あなたのターミナル、ちょっと寂しくないですか？少しだけ可愛くしてみませんか。
Claude Codeが処理している間、tmuxのpaneの左上でClaudeイカが歩き回ります。Claude Codeを3つ動かしていれば3匹。足踏みしたり、跳ねたり、きょろきょろしたり。
役には立ちません。でも見ていると楽しいんですよね。
GhosttyとtmuxをClaude Codeといじっていたら、一日でここまで来ました。ほかにも、非アクティブなpaneをぼかしたり、popupをアプリのモーダルみたいにしたり、git pushで花火を上げたりできるようになりました。くだらないけど、アイデア次第でいろいろできるなという話です。
コードはclawd-in-ghosttyとしてGitHubに置いています。
きっかけは、どのpaneにいるかわからないこと
最近はClaude Codeのセッションを何個も同時に動かしているので、tmuxのpaneを行ったり来たりすることが増えました。
困ったのが、今どのpaneがアクティブなのかわかりにくいこと。tmuxでも非アクティブなpaneの色は変えられるんですが、Claude Codeの青い文字などは暗くならずに残ってしまうんです。
あとは単純に、見た目へのこだわりが強いので。背景の色を塗り分けるだけなのが、ずっと気に入っていませんでした。
アプリのモーダルみたいにしたかった
頭にあったのは、アプリでダイアログを開いたときに背景がすっと暗くなる、あの感じです。非アクティブなpaneの上に、薄い長方形を重ねられないかなと。
Claude Codeに聞いてみたら、tmuxだけでは無理だけど、Ghosttyのシェーダーなら画面全体に効果をかけられるとのこと。そこから話が転がり始めました。
できあがったのがこれです。非アクティブなpaneは、すりガラス越しのようにぼけて暗く沈みます。Claude Codeの青い文字も、ちゃんと一緒に暗くなりました。
paneを切り替えると、新しくアクティブになったpaneがふわっと明るくなります。
これは本当に実用的でした。どのpaneにいるか、一目でわかります。
popupがモーダルになったときは、さすがに驚きました
調子に乗って、tmuxのpopupにも同じことをしてもらいました。popupを開くと、背景がぼけて沈み、popupの下に影が落ちて、縁がうっすら光ります。
まさにアプリのモーダルです。ターミナルでこれが見られるとは思っていなかったので、今日一番びっくりしました。fishのpopupでも、fzfで履歴を探すpopupでも、同じように動きます。
位置がぴったり合ったとき、思わず「完璧」と言いました。
光はうざい、でもイカならかわいい
次に考えたのが、Claude Codeが作業しているpaneを目立たせること。最初はpaneの縁に光を流したり、ゆっくり明滅させたりしてみました。
でも、ずっと光っているのはうざいんですよね。光はうざいけど、キャラならかわいいかなと思って、Claude Codeの起動画面にいるイカを動かしてもらうことにしました。それが冒頭の動画です。
Claude Codeが許可や質問で止まると、イカが跳ねながら頭の上に「！」を出して呼んでくれます。
作業が終わると、バンザイして紙吹雪が舞います。
Claude Codeが待機中のpaneで文字を打っていると、今度はパーカーを着た小さな開発者が出てきて、走ったりコーヒーを飲んだりします。処理中に打つと、イカにプレゼントを投げて渡します。
イカが初めて動いたときは、ただただ楽しい気持ちになりました。完全に遊びです。
ついでに、いろいろ光らせました
ここまで来ると、画面に出したいものはだいたい出せる気がしてきます。tmuxの状態も、画面の縁の光で見せるようにしました。
tmuxのprefixキーを押すと、次のキーを押すまで画面の外周がタブの色で光ります。
コピーモード中は、paneの内側の縁がラベンダー色に光ります。ここは一番迷いました。最初はpane全体を塗ってみて、次にセピア、ラベンダーと試して、どれもしっくりこず、最後に縁を光らせる形に落ち着きました。
ほかにも、paneをズームしている間は画面の外周が黄色に、コマンドが失敗したらpaneの縁が赤く光ります。
git pushで花火を上げる
最後は花火です。「git pushが成功したら花火」はClaude Codeが出してくれた案で、面白そうなので乗りました。
最初の花火はかなりしょぼかったので、もっと派手にしてもらいました。下からロケットが上がって、弾けて、火花が尾を引いて落ちていきます。これも完全に遊びです。
「こうしたい」を言い続けたら、一日でできた
シェーダーは、Web制作で少し書いたことがあるのと、p5.jsでジェネラティブアートを勉強したときに少し触ったくらいです。今回はほとんど、こうしたい、これは違う、をClaude Codeに伝え続けただけでした。
大変だったのは、微妙なずれです。popupや暗くする範囲が数ピクセルずれていて、スクリーンショットを撮っては「上がちょっとずれてる」と何度も伝えました。もうひとつは、ちょうどいい見た目を探すこと。コピーモードの色のように、作ってもらっては違うと言うのを何度も繰り返しました。
途中から、なんでもできる気がしてきました。
おまけ: どうやって動いているのか
ざっくり言うと、tmuxがステータスバーの隅に色付きのマスで合図を出していて、Ghosttyのシェーダーがその色を読んで絵を描いています。
マスの色には「アクティブなpaneの位置」や「Claude Codeが作業中か」などが入っていて、シェーダーは毎フレームそれを読み取ります。読み終わったマスは周りの色で塗りつぶして隠しているので、見た目にはわかりません。
Ghosttyのシェーダーそのものについては、Ghosttyおすすめシェーダー集｜花火・CRT・カーソルトレイルでターミナルを彩るMac便利ツール
でも紹介しています。
コードについて
ここで紹介した演出のコードは、clawd-in-ghosttyとしてGitHubに置いています。
自分の環境から切り出したもので、インストーラーはありません。macOSのGhosttyとtmuxが前提で、Ghosttyの余白の色やtmuxのステータスバーの位置も合わせる必要があるので、そのままでは動かないと思います。仕組みを覗いてみたい人向けの参考としてどうぞ。
まとめ
paneのぼかしとpopupのモーダルは、毎日使っていて本当に見やすくなりました。イカと花火は完全に遊びです。
見慣れたターミナルも、まだまだ遊べます。自分で全部書けなくても、アイデアさえあれば、Claude Codeと一緒にくだらないものまで形にできる。それが一番楽しかったところです。