ハクソク

世界を動かす技術を、日本語で。

アニメーションカーソル

304日前原文(tattoy.sh)

概要

Tattoy が アニメーションカーソル のサポートを開始。 Ghostty フォーマットとの互換性を実現。 ピクセル描画方式の違いによる表現の差異。 アンチエイリアスや透過処理の課題と解決策。 今後の パフォーマンス改善 の展望。

Tattoyのアニメーションカーソル対応について

  • Tattoy が アニメーションカーソル のサポートを開始
  • Ghostty と同じカーソルフォーマットを採用
  • Ghostty 用の人気カーソルを Tattoy でそのまま利用可能
  • Ghostty は実際のピクセル単位でカーソルを描画
  • Tattoy はUTF8テキストベースの「 ▀」「 ▄」でカーソルを表現
  • 表現の違いにより Ghostty の微細な表現が一部再現不可
  • ピクセル化された表現が好まれるケースも存在

実装と技術的課題

  • Tattoy のシェーダーフレームワークを活用し、短時間で初期実装
  • 完全な動作までには一週間以上の調整期間
  • 最大の課題はアンチエイリアス端の 透明度サポート
  • Ghostty シェーダーはターミナルのピクセル情報をサンプリング
  • Tattoy は純粋なテキストベースでピクセル情報取得不可
  • テキストの 色情報 を利用し、粗いピクセル化ターミナル画像をGPUにアップロード
  • アンチエイリアスは改善されたが、カーソル画像にピクセル化ターミナルも含まれる問題
  • GPUにアップロードしたターミナル画像と最終カーソル画像を比較し、差分のみを描画する 後処理 を実装
  • この手法で 透明度 と アンチエイリアス の課題を解決

パフォーマンスと今後の展望

  • 大きなターミナルでは 遅延 が発生する場合あり
  • 一般的な パフォーマンス改善 の余地が多い現状
  • 遅延の一因は、 アニメーションカーソル と ホストカーソル の同時描画
  • Tattoy がカーソル描画全体を管理すれば遅延改善の可能性
  • 今回は 最初の試み として良好な結果
  • 利用者からの フィードバック を歓迎

Hackerたちの意見

思ってたより全然クールだね。端末のカーソルが位置を移動するアニメーションが派手で、どこに動いたか分かりやすい。てっきりマウスカーソルのアニメーションかと思ってたけど、これなら使ってみたいかも。もっとTUIアプリを使ってたら、もうちょっと控えめだったらいいな。

└

Neovideによって人気になったと思うよ。 https://neovide.dev/features.html#animated-cursor

└

昔のCompizプラグインを思い出すな。ウィンドウを閉じると炎が出るやつ。

└

ホームページには、シンプルなスミアフェードカーソルと、ワイルドなマンガスラッシュカーソルのGIFがあるよ。 https://tattoy.sh

ほとんど使えない、ぷふっ。少なくとも3つのうち2つは必要だね - エアホーンやライトセーバーの効果音、- シクスルベースのレンズフレアのレンダリング、または - カーソルが動く道に沿って文字が波打つのをシミュレートする流体力学エンジン（冗談だけど、見た目はめっちゃクールだよね。多分、ちょっと気が散りすぎるかもだけど）

└
  • エアホーンやライトセーバーの効果音、ライトセーバーの音がいいな。ステレオ空間変換で、音の「方向」と「距離」がカーソルの動きに対して自分の物理的な動きと一致するようにしたい。それと、小さなウィンドウを開いて、カーソルの視点を表示してほしいな。画面のグラフィックスをズームしながらね。また、カーソルが通過する文字は「熱く」なって、0.25秒間安定した光を放ち、その後1秒かけて指数的にフェードアウトするべきだと思う。流れに乗っているときは、機能的な気が散り要素がもっと効果的になるように、もっと没入感が必要だよね。
└

これだよ。 https://ash-k.itch.io/textreme

└

体験談: > Tattoyを使い始めてから、ペアを組むように頼まれたことは一度もない。

これ、結構いいね。カーソルがどこに行くか追いやすい。Ghosttyスタイルの方が好きだけど、でもクールなUI機能だね。

マウスカーソルのことかと思ってたから、同じ動画でポインターが動かないのが不思議だった。録画の時はオフにしておいた方が良かったね。

この取り組みを称賛するし、ttyにしてはグラフィックがすごく素晴らしいと思うけど、真面目な質問なんだけど、これを日常的に使ってる人いる？

└

Tattoyのクリエイターなんで、ありがとう。プロジェクトの大きな動機は、名前が示すように「おもちゃ」のように楽しいことなんだ。毎日使ってるけど、唯一の真剣な使い道は、Twitchのチャット参加者がエモートを送ってターミナルと視覚的にインタラクションできるようにすること。アニメーションカーソルにはあまり興味ないけど、Ghosttyの背景シェーダーのサポートをすでに作ってたから、実装が簡単だったんだ。でも、もし本当に真剣な使い道を求めるなら、TattoyがANSIコードやterminfoデータベースから進化した新しいプロトコルの「XWayland」になるのが夢なんだ。このアイデアについてブログ記事を書いたよ: https://tattoy.sh/news/an-end-to-terminal-ansi-codes

└

カーソルが新しい位置に追従するってこと？それを使ってるけど、違うエミュレーターでね。ターミナルから何かをデモする時に、複数のスプリットを開いてるとすごく助かるよ。

Emacsには https://github.com/Malabarba/beacon があるよ。

Ghosttyの新しいカーソル機能のデモはこちら: https://www.youtube.com/watch?v=enwDjM7pNNE

見た目がすごく良くて楽しいし、かなり役立ちそうだね。モーションブラーを模倣するためにグラデーション効果があった方がいいって言おうと思ったけど、動画を見てたらすでにそれに似たものを実装してるのがわかった。でも、大きな動きをするときはちょっと混乱する感じがして、動画ではグラデーション効果がすごく微妙に見えるね。実際のモーションブラーみたいに、距離によって効果を変えるのもいいかも？上下に動くときに色が変わるのも考えてたけど、それはどうかな。試してみたいことの一つではあるね。

└

Ghosttyコミュニティでは、これがかなり活発に探求されていると思うよ。Tattooは同じカーソルシェーダーをサポートしているから、自動的に恩恵を受けてるね。興味があったらGhosttyのDiscordをチェックしてみて。もちろん、自分のカーソルシェーダーを試すこともできるよ。Shader Toyと同じ構文に従ってるからね。https://tattoy.sh/docs/shaders

これ、かっこいいね。ちょっと話がそれちゃうけど、唯一の心配は、これが時間が経つにつれてターミナルのデフォルトにされちゃうことなんだ。今のモダンなUIはアニメーションがあって、すごく遅いのから、個人的にはほとんど速く感じないものまで様々だよね。そして、そういうアニメーションを無効にするのがどんどん難しくなってきてる。どこにでも忍び込んでくるし、ほんとイライラする。コンピュータは瞬時に反応してほしいんだ。8ms以内に再描画してほしい。ほとんどのアニメーションは中断したりスキップしたりもできないし、さらに多くのアニメーションが同時に動いてるから、ウェブページでアニメーションよりも早くジャンプして、また戻されてゆっくりアニメーションすることになる。私の人生は有限なのに、コンピュータは信じられないくらい速い。貴重な時間を無駄にしたくないよ。アニメーションを作る開発者は、どれだけ人々の人生の分を奪ってるんだろう？視覚的な刺激を処理するのが他の人より早いのは分かるけど、私って異端者なのかな。モダンなインターフェースは、識別可能なボタンがなくて、空白の中にテキストやバーガーアイコンがちょっとあるだけで、何が変わったのか気づきにくいんだ。だから、アニメーションが必要になってるのかもね。とにかく、アニメーションには本当に悩まされてるよ。

└

Macで、最近間違ってShift（か何かのキーコンボ？）を押しながら、スペースを押してQuickLookを開こうとしたら、すごく遅いアニメーション（>5秒）でQuickLookが開いちゃって、ほんとイライラしたよ :S

tattoyのことは聞いたことなかったけど、見つけてよかった。使い方はあまり好みじゃないけど、ずっと欲しかったものを満たしてくれそうだね。エラーメッセージに注釈をつけるような、ターミナルエミュレーター？シェル？エディタープラグイン？のアイデアを考えてたんだ。例えば、> 次のリリースで修正されるから、ここには何もないよとか、> これは実際に問題だと思う、イシュー1657を見てね、みたいな感じで。そうすれば、同僚たちがログを何らかの方法で見られて（特別なターミナルエミュレーター？フィルターを通して？よく分からないけど）、注釈がログの横に表示されて、どの注釈がどのログメッセージに対応しているのか背景色で示されるかもしれない。こうすれば、特定のエラーが心配する価値があるかどうかをみんなで重複して考える必要がなくなるし、エラーのそばにそのままメモを残せるんだ（コンテキストトリガーの部分的ハッシュで固定されて）。tattoyプロトコルは、マッチする注釈が画面に表示されたときにログにハイライトを適用するのに良さそうだね。https://tattoy.sh/docs/plugins/

└

これこそ、Tattoyにインスパイアされて、実装が簡単になるようなクリエイティブな考え方だよね。

└

それ、実際にいいアイデアだね。フロントとバックエンドのインターフェースにいくつかの問題パターンがあって、フロントエンドの人たちがAPIコールが失敗する理由をいつも誤解しちゃうんだ。「このエラーメッセージは通常、別のエラーメッセージによって引き起こされます。これを確認してから仮定してください…」みたいに注釈をつけられたらいいな。