Ghostty - Use Fragment Shader as Terminal Background

What is Ghostty?

👻Ghostty is a GPU-based terminal emulator developed by Mitchell Hashimoto, co-founder of HashiCorp. It utilizes Metal on macOS and OpenGL on Linux for GPU rendering and takes advantage of this architecture to support custom shader functionality.

ghostty-org / ghostty

👻 Ghostty is a fast, feature-rich, and cross-platform terminal emulator that uses platform-native UI and GPU acceleration.

Ghostty

Fast, native, feature-rich terminal emulator pushing modern features


About
·
Download
·
Documentation
·
Contributing
·
Developing

About

Ghostty is a terminal emulator that differentiates itself by being fast, feature-rich, and native. While there are many excellent terminal emulators available, they all force you to choose between speed, features, or native UIs. Ghostty provides all three.

In all categories, I am not trying to claim that Ghostty is the best (i.e. the fastest, most feature-rich, or most native). But Ghostty is competitive in all three categories and Ghostty doesn't make you choose between them.

Ghostty also intends to push the boundaries of what is possible with a terminal emulator by exposing modern, opt-in features that enable CLI tool developers to build more feature rich, interactive applications.

While aiming for this ambitious goal, our first step is to make Ghostty one of the best fully standards compliant terminal emulator, remaining…

View on GitHub

How to run a Shader as the terminal background?

Step1 Create Ghostty config

mkdir ~/.config/ghostty
touch ~/.config/ghostty/config

Configuration

Ghostty supports hundreds of configuration options to make it look and behave exactly how you want.

ghostty.org

Step2 Create or download a Shader

mkdir shaders

noise.glsl

float random(in vec2 st) {
    return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);
}

vec2 random_gradient(in vec2 i) {
    float r = 2.0 * 3.1415926535 * random(i);
    return vec2(cos(r), sin(r));
}

float perlin_noise(in vec2 st) {
    vec2 i = floor(st);
    vec2 f = fract(st);

    vec2 g00 = random_gradient(i + vec2(0.0, 0.0));
    vec2 g10 = random_gradient(i + vec2(1.0, 0.0));
    vec2 g01 = random_gradient(i + vec2(0.0, 1.0));
    vec2 g11 = random_gradient(i + vec2(1.0, 1.0));

    vec2 p00 = f - vec2(0.0, 0.0);
    vec2 p10 = f - vec2(1.0, 0.0);
    vec2 p01 = f - vec2(0.0, 1.0);
    vec2 p11 = f - vec2(1.0, 1.0);

    float n00 = dot(g00, p00);
    float n10 = dot(g10, p10);
    float n01 = dot(g01, p01);
    float n11 = dot(g11, p11);

    vec2 u = f * f * (3.0 - 2.0 * f);

    float nx0 = mix(n00, n10, u.x);
    float nx1 = mix(n01, n11, u.x);
    float nxy = mix(nx0, nx1, u.y);

    return (nxy + 1.0) / 2.0;
}


void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 uv = fragCoord / iResolution.xy;
    vec2 noiseUV = uv * 4.0;
    noiseUV += iTime * 0.5;

    vec3 col = 0.5 + 0.5 * cos(iTime + noiseUV.xyx + vec3(0.0, 2.0, 4.0));
    float noise_val = perlin_noise(noiseUV);
    col *= noise_val;

    vec4 terminalColor = texture(iChannel0, uv);
    vec3 blendedColor = terminalColor.rgb + col.rgb * 0.7;

    fragColor = vec4(blendedColor,1.0);
}

custom-shader

Option Reference - Configuration

Reference of all Ghostty configuration options.

ghostty.org

If you don't have any Shader you want to use as the background, you can find out something cool in the following repo.

0xhckr / ghostty-shaders

A repository containing many free shaders to use with ghostty (the terminal)

Installation

Clone the repository:

git clone --depth 1 https://github.com/hackr-sh/ghostty-shaders
cd ghostty-shaders

Copy your preferred shader file to the Ghostty config directory:

cp <your-choice>.glsl ~/.config/ghostty/shaders/shader.glsl

Add the following line to your ~/.config/ghostty/config file to enable the custom shader:

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

View on GitHub

Step3 Add the Shader to the config

I downloaded water.glsl from the above repo. The nice thing is that Ghostty allows us to use multiple shaders.

custom-shader = ~/.config/ghostty/shaders/noise.glsl
custom-shader = ~/.config/ghostty/shaders/water.glsl
custom-shader-animation = true

After saving config, hit Cmd + Shift + , to apply the change to Ghostty.

Troubleshooting

If the background doesn’t change, check ‎custom-shader path exists and the Shader itself.

Happy hacking with Ghostty and shaders!

My Ghostty config

#==================================
# appearance
#==================================
# color theme
theme = Calamity
# shaders
custom-shader = ~/.config/ghostty/shaders/noise.glsl
custom-shader = ~/.config/ghostty/shaders/water.glsl
custom-shader-animation = true

#-----------------------------------
# Resize panes with arrow keys
#-----------------------------------
keybind = ctrl+comma=resize_split:left,10
keybind = ctrl+period=resize_split:right,10
keybind = ctrl+semicolon=resize_split:down,10
keybind = ctrl+apostrophe=resize_split:up,10

#-----------------------------------
# Split panes
#-----------------------------------
keybind = ctrl+shift+v=new_split:right
keybind = ctrl+shift+h=new_split:down

#-----------------------------------
# Move panes
#-----------------------------------
keybind = shift+arrow_left=goto_split:left
keybind = shift+arrow_right=goto_split:right
keybind = shift+arrow_up=goto_split:up
keybind = shift+arrow_down=goto_split:down


#-----------------------------------
# Control panes
#-----------------------------------
keybind = ctrl+x=close_surface