Ghosttyおすすめシェーダー集｜花火・CRT・カーソルトレイルでターミナルを彩る

Mac

Claude CodeやCodex CLIみたいなAIコーディングエージェントが増えて、ターミナルに張り付く時間が長くなってませんか？黒い画面とにらめっこし続けると、正直飽きる。たまにはド派手な演出で気分転換なんてどうですか？

Ghosttyにカスタムシェーダー機能があるのでピッタシです。ターミナルの画面にGPUシェーダーを適用して、花火を飛ばしたり、CRTモニター風にしたり、星空を背景にしたりできます。

僕はパステルカラーの花火エフェクトを作って、カーソルを動かすたびにキラキラさせています。おじさんキュンキュンしちゃう可愛さ。

Ghosttyの基本設定がまだの人は、先にこちらを読んでおくとスムーズです。

Ghostty入門｜HashiCorp創業者が作った次世代ターミナルの設定ガイドMac

シェーダーの基本設定

まずは設定方法から。~/.config/ghostty/configに以下を追加するだけです。

# シェーダーファイルを指定
custom-shader = ~/.config/ghostty/shaders/your-shader.glsl

# アニメーションを有効化（重要）
custom-shader-animation = always

custom-shader-animation = alwaysがないと、カーソル移動時にエフェクトがフリーズすることがあります。これがないとハマります。

シェーダーは複数重ねがけできます。

custom-shader = ~/.config/ghostty/shaders/crt.glsl
custom-shader = ~/.config/ghostty/shaders/bloom.glsl

上から順に適用されるので、順番も大事です。

パステルカラーの花火シェーダー

僕が作ったシェーダーを公開します。カーソルを動かすとパステルカラーの火花が飛び散ります。

実はこのシェーダー、Claude Codeに「パステルカラーの花火作って」って投げたらサクッと作ってくれました。GLSLの知識ゼロでも、やりたいことを伝えればいい時代。

筆者 
/*
 * mode-glow.glsl - カーソル移動で火花が飛び散るシェーダー
 */

const int PARTICLE_COUNT = 12;
const float EXPLOSION_DURATION = 0.8;
const float SPARK_DISTANCE = 50.0;
const float SPARK_DISTANCE_RAND = 150.0;

// Cupertinoパステルカラー
const vec3 PASTEL_PINK = vec3(1.0, 0.6, 0.7);
const vec3 PASTEL_BLUE = vec3(0.6, 0.8, 1.0);
const vec3 PASTEL_GREEN = vec3(0.6, 1.0, 0.7);
const vec3 PASTEL_PURPLE = vec3(0.8, 0.6, 1.0);
const vec3 PASTEL_ORANGE = vec3(1.0, 0.75, 0.5);
const vec3 PASTEL_YELLOW = vec3(1.0, 1.0, 0.6);

float hash(float n) {
    return fract(sin(n) * 43758.5453);
}

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
    vec2 uv = fragCoord / iResolution.xy;
    vec4 termColor = texture(iChannel0, uv);

    float timeSinceChange = iTime - iTimeCursorChange;
    vec2 cursorCenter = iCurrentCursor.xy + vec2(iCurrentCursor.z * 0.5, -iCurrentCursor.w * 0.5);

    if (timeSinceChange < EXPLOSION_DURATION) {
        float explosionProgress = timeSinceChange / EXPLOSION_DURATION;
        float timeSeed = fract(iTimeCursorChange * 0.123) * 1000.0;

        for (int i = 0; i < PARTICLE_COUNT; i++) {
            float fi = float(i);
            float seed = fi * 73.156 + timeSeed;
            float angle = hash(seed * 1.234) * 6.28318;
            float speed = SPARK_DISTANCE + hash(seed * 2.345) * SPARK_DISTANCE_RAND;
            float size = 4.0 + hash(seed * 3.456) * 6.0;

            vec2 particleDir = vec2(cos(angle), sin(angle));
            vec2 particlePos = cursorCenter + particleDir * speed * explosionProgress;

            float gravity = 40.0 + hash(seed * 4.567) * 80.0;
            particlePos.y -= gravity * explosionProgress * explosionProgress;

            float particleDist = distance(fragCoord, particlePos);
            float fade = 1.0 - explosionProgress;
            fade *= fade;

            if (particleDist < size * fade) {
                float colorChoice = hash(seed * 5.678);
                vec3 sparkColor;
                if (colorChoice < 0.166) sparkColor = PASTEL_PINK;
                else if (colorChoice < 0.333) sparkColor = PASTEL_BLUE;
                else if (colorChoice < 0.5) sparkColor = PASTEL_GREEN;
                else if (colorChoice < 0.666) sparkColor = PASTEL_PURPLE;
                else if (colorChoice < 0.833) sparkColor = PASTEL_ORANGE;
                else sparkColor = PASTEL_YELLOW;

                float brightness = 1.0 - (particleDist / (size * fade));
                sparkColor *= brightness * fade * 2.0;

                fragColor = vec4(termColor.rgb + sparkColor, termColor.a);
                return;
            }
        }
    }

    fragColor = termColor;
}

PARTICLE_COUNTで火花の数、EXPLOSION_DURATIONでエフェクトの持続時間を調整できます。色も好みで変えてください。

カーソルトレイル（Ghostty 1.2.0〜）

Ghostty 1.2.0から、カーソル情報がシェーダーに渡されるようになりました。これでNeovide風のカーソルトレイルが実現できます。

sahaj-b/ghostty-cursor-shadersがおすすめです。以下のエフェクトが揃っています。

シェーダー効果
cursor_tail.glslカーソルの残像が尾を引く（Kitty風）
cursor_warp.glslNeovide風カーソルトレイル
ripple_cursor.glslカーソル移動時に波紋が広がる

設定も簡単。

git clone https://github.com/sahaj-b/ghostty-cursor-shaders ~/.config/ghostty/shaders/cursor
custom-shader = ~/.config/ghostty/shaders/cursor/cursor_tail.glsl
custom-shader-animation = always

各シェーダーの先頭に色や持続時間のパラメータがあるので、好みに合わせて調整できます。

CRT・レトロ系シェーダー

ブラウン管モニター風のエフェクトは根強い人気があります。0xhckr/ghostty-shadersに30種類以上のシェーダーが揃っています。

おすすめの組み合わせ

海外記事で紹介されていた効果的なコンビネーション。

# ゆがみ + レトロ + 光拡散
custom-shader = ~/.config/ghostty/shaders/drunkard.glsl
custom-shader = ~/.config/ghostty/shaders/retro-terminal.glsl
custom-shader = ~/.config/ghostty/shaders/bloom.glsl
# グリッチ + CRT + 水面 + 光拡散
custom-shader = ~/.config/ghostty/shaders/glitchy.glsl
custom-shader = ~/.config/ghostty/shaders/bettercrt.glsl
custom-shader = ~/.config/ghostty/shaders/water.glsl
custom-shader = ~/.config/ghostty/shaders/bloom.glsl

ド派手だけど、頭痛くなるで。

筆者

色違いCRT

thijskok/ghostty-shadersには色違いのCRTシェーダーがあります。

  • amber-crt.glsl - 琥珀色（温かみのあるビンテージ感）
  • green-crt.glsl - 緑（古典的なターミナル）
  • blue-crt.glsl - 青（クールな雰囲気）

背景アニメーション系

0xhckr/ghostty-shaders には、ターミナルの背景に動くエフェクトを追加するシェーダーも含まれています。

シェーダー効果
starfield.glsl星が流れる宇宙空間
galaxy.glsl回転する銀河
just-snow.glsl雪が降る
matrix-hallway.glslマトリックス風の廊下
underwater.glsl水中の揺らぎ

僕も色々試しましたが、正直なところ背景系のシェーダーはない方が集中できます。ネタとしては面白いけど、常用は厳しい。

ターミナルの見た目だけでなく、キーボードの打鍵音もカスタマイズすると没入感が上がります。

MacBookの打鍵音をメカニカルキーボード風に変えるKlackを3ヶ月使った感想｜遅延やバッテリー消費も検証Mac

実用・アクセシビリティ系

ネタだけじゃなく、実用的なシェーダーも作れます。以下はサンプルコードです。

現在行ハイライト

カーソルのある行だけ少し明るくするシェーダー。シンプルだけど地味に便利。

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
    vec2 uv = fragCoord / iResolution.xy;
    vec4 termColor = texture(iChannel0, uv);

    float rowDist = abs(fragCoord.y - iCurrentCursor.y);
    float highlight = smoothstep(iCurrentCursor.w * 2.0, 0.0, rowDist);

    fragColor = vec4(termColor.rgb + vec3(0.05) * highlight, termColor.a);
}

便利な場面もあるかもしれない。いや、ないかも笑

フォーカスビネット

カーソル付近だけを明るくして集中させる。

フォーカスビネット

とんでもない集中力がでそう笑

筆者 
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
    vec2 uv = fragCoord / iResolution.xy;
    vec4 termColor = texture(iChannel0, uv);

    // カーソル位置を正規化 (0-1)
    vec2 cursorPos = iCurrentCursor.xy / iResolution.xy;

    // カーソルからの距離でフォーカス効果
    float dist = length(uv - cursorPos);
    float vignette = 1.0 - smoothstep(0.2, 0.6, dist);

    fragColor = vec4(termColor.rgb * vignette, termColor.a);
}

色覚補正

シェーダーは色覚特性に合わせた補正など、アクセシビリティ用途にも活用できます。

パフォーマンスについて

「シェーダーって重くないの？」と思うかもしれませんが、実測でCPU約1%、GPU約2%程度です。ファンが回るほどではありません。

ただし、複数のシェーダーを重ねると負荷が増えます。3つ以上重ねる場合は、一度パフォーマンスを見ておくといいです。

シェーダー開発のヒント

自分でシェーダーを書きたい人向けに、Ghosttyで使えるuniform変数をまとめておきます。

uniform vec2 iResolution;        // 画面解像度
uniform float iTime;             // 経過時間（秒）
uniform sampler2D iChannel0;     // ターミナルのテクスチャ
uniform vec4 iCurrentCursor;     // カーソル位置 (x, y, width, height)
uniform vec4 iPreviousCursor;    // 前のカーソル位置
uniform float iTimeCursorChange; // カーソル変更時刻
uniform int iFrame;              // フレーム番号

Shadertoyのシェーダーは、ほぼそのまま移植できます。iChannel0でターミナルの描画結果を受け取れるのがポイントです。

まとめ

Ghosttyのカスタムシェーダーは、思った以上に自由度が高いです。

  • パステルカラーの花火でテンションを上げる
  • CRTエフェクトでレトロな雰囲気を出す
  • 星空の背景で宇宙を飛ぶ
  • 現在行ハイライトで実用性を上げる

パフォーマンスへの影響も最小限。遊んでみて。

おすすめのシェーダーあったらぜひ教えてください。

Thanks for reading!
GhosttyターミナルシェーダーGLSLMac