Project_2026-02-09_17-44-50

GLSL shader by merrypranxter · created 2026-02-09 · 10s loop · 2 passes

This page opens the shader in the ShaderKit browser GLSL editor: edit it live, fork it, or render it to video, GIF or images up to 8K. Also available as a full-screen view and an embeddable player.

Shader source (GLSL)

Common

#define pi acos(-1.)
#define deg pi/180.  //1 degree
#define time iTime*2.*pi/10. //sin(time) loops 10 seconds
#define R iResolution.xy //shorthand
#define ar R.x/R.y //aspect ratio
#define M iMouse //shorthand
#define xm (M.xy/R) //normalized mouse
#define nm ((xm.xy-0.5)*vec2(ar,1.)+0.5) //aspect ratio correction
vec3 cs = vec3(1.,2.,3.);
mat2 r2d(float a) {
    return mat2(cos(a),sin(a),-sin(a),cos(a));
}

Buffer A (iChannel0)

// "Merry & Kevin: The Hybrid"
// Background: Chunky 8-Bit Pixel Heart & Spiral
// Foreground: Smooth Neon Line-Segment Text (SDFs)

// --- 🎛️ CONTROLS ---
#define PIXEL_SIZE 50.0    // Background blockiness
#define HEART_BEAT 3.5     // Pulse speed
#define TEXT_SCALE 0.13    // Size of the neon letters (Lower = Bigger)
#define NEON_GLOW 0.008    // How thick/glowy the text is

// --- 🎨 PALETTE ---
vec3 palette(float t) {
    vec3 a = vec3(0.5, 0.5, 0.5);
    vec3 b = vec3(0.5, 0.5, 0.5);
    vec3 c = vec3(1.0, 1.0, 1.0);
    vec3 d = vec3(0.0, 0.33, 0.67);
    return a + b * cos(6.28318 * (c * t + d));
}

// --- 📐 TEXT SHAPES (The Readable Lines) ---

// Draw a line segment
float sdSegment( in vec2 p, in vec2 a, in vec2 b ) {
    vec2 pa = p-a, ba = b-a;
    float h = clamp( dot(pa,ba)/dot(ba,ba), 0.0, 1.0 );
    return length( pa - ba*h );
}

// LETTER DEFINITIONS (Constructed from lines)
float charM(vec2 p) {
    p.x += 0.2; 
    float d = sdSegment(p, vec2(-0.2,-0.3), vec2(-0.2,0.3)); // Left
    d = min(d, sdSegment(p, vec2(0.2,-0.3), vec2(0.2,0.3))); // Right
    d = min(d, sdSegment(p, vec2(-0.2,0.3), vec2(0.0,0.0))); // V
    d = min(d, sdSegment(p, vec2(0.2,0.3), vec2(0.0,0.0))); 
    return d;
}
float charE(vec2 p) {
    float d = sdSegment(p, vec2(-0.15,-0.3), vec2(-0.15,0.3));
    d = min(d, sdSegment(p, vec2(-0.15,0.3), vec2(0.15,0.3)));
    d = min(d, sdSegment(p, vec2(-0.15,0.0), vec2(0.1,0.0)));
    d = min(d, sdSegment(p, vec2(-0.15,-0.3), vec2(0.15,-0.3)));
    return d;
}
float charR(vec2 p) {
    float d = sdSegment(p, vec2(-0.15,-0.3), vec2(-0.15,0.3));
    d = min(d, sdSegment(p, vec2(-0.15,0.3), vec2(0.15,0.3)));
    d = min(d, sdSegment(p, vec2(0.15,0.3), vec2(0.15,0.0)));
    d = min(d, sdSegment(p, vec2(0.15,0.0), vec2(-0.15,0.0)));
    d = min(d, sdSegment(p, vec2(-0.05,0.0), vec2(0.15,-0.3)));
    return d;
}
float charY(vec2 p) {
    float d = sdSegment(p, vec2(0.0,0.0), vec2(0.0,-0.3));
    d = min(d, sdSegment(p, vec2(0.0,0.0), vec2(-0.2,0.3)));
    d = min(d, sdSegment(p, vec2(0.0,0.0), vec2(0.2,0.3)));
    return d;
}
float charAnd(vec2 p) { // The Plus Sign
    float d = sdSegment(p, vec2(-0.2,0.0), vec2(0.2,0.0));
    d = min(d, sdSegment(p, vec2(0.0,-0.2), vec2(0.0,0.2)));
    return d;
}
float charK(vec2 p) {
    float d = sdSegment(p, vec2(-0.15,-0.3), vec2(-0.15,0.3));
    d = min(d, sdSegment(p, vec2(-0.15,0.0), vec2(0.15,0.3)));
    d = min(d, sdSegment(p, vec2(-0.15,0.0), vec2(0.15,-0.3)));
    return d;
}
float charV(vec2 p) {
    float d = sdSegment(p, vec2(-0.2,0.3), vec2(0.0,-0.3));
    d = min(d, sdSegment(p, vec2(0.2,0.3), vec2(0.0,-0.3)));
    return d;
}
float charI(vec2 p) {
    return sdSegment(p, vec2(0.0,-0.3), vec2(0.0,0.3));
}
float charN(vec2 p) {
    float d = sdSegment(p, vec2(-0.15,-0.3), vec2(-0.15,0.3));
    d = min(d, sdSegment(p, vec2(0.15,-0.3), vec2(0.15,0.3)));
    d = min(d, sdSegment(p, vec2(-0.15,0.3), vec2(0.15,-0.3)));
    return d;
}

// --- ❤️ BACKGROUND SHAPES ---
float pixelHeart(vec2 p) {
    p.y -= 0.1;
    float x = p.x * 1.3;
    float y = p.y * 1.3;
    float eq = pow(x*x + y*y - 1.0, 3.0) - x*x * y*y*y;
    return step(eq, 0.0);
}

void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
    
    // 1. Setup TWO Coordinate Systems
    // Smooth UV for text
    vec2 uv = (fragCoord * 2.0 - iResolution.xy) / iResolution.y;
    // Pixelated UV for background
    vec2 pixelUV = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
    pixelUV = floor(pixelUV * PIXEL_SIZE) / PIXEL_SIZE;
    
    // --- 2. RENDER PIXEL BACKGROUND ---
    
    // Spiral
    float dist = length(pixelUV);
    float angle = atan(pixelUV.y, pixelUV.x);
    float spiral = sin(dist * 15.0 - iTime * 3.0 + angle * 7.0);
    vec3 bgCol = palette(dist * 0.4 + iTime * 0.3);
    bgCol += step(0.8, spiral) * 0.15; // Lighter stripes

    vec3 col = bgCol;
    
    // Pixel Heart
    float pulse = 1.0 + 0.08 * sin(iTime * HEART_BEAT);
    vec2 heartUV = pixelUV * 3.0 / pulse; 
    float heartMask = pixelHeart(heartUV);
    
    // Fill Heart
    if (heartMask > 0.5) {
        col = vec3(1.0, 0.6, 0.85); // Bubblegum Pink
        if (heartUV.x + heartUV.y < -0.3) col *= 0.85; // Shadow
        if (heartUV.x + heartUV.y > 0.4) col += 0.15;  // Highlight
    }

    // --- 3. RENDER NEON TEXT ---
    
    float dText = 100.0;
    
    // Animation: Bob the text up and down
    vec2 tPos = uv;
    tPos.y -= sin(iTime * 2.0) * 0.05; // Gentle float
    
    // Scale for text
    vec2 p = tPos / TEXT_SCALE; 
    
    // --- ROW 1: MERRY ---
    vec2 row1 = p - vec2(-3.5, 1.5); 
    dText = min(dText, charM(row1)); row1.x -= 1.0; 
    dText = min(dText, charE(row1)); row1.x -= 0.8; 
    dText = min(dText, charR(row1)); row1.x -= 0.8; 
    dText = min(dText, charR(row1)); row1.x -= 0.8; 
    dText = min(dText, charY(row1)); 
    
    // --- ROW 2: & ---
    vec2 row2 = p - vec2(0.0, 0.0);
    dText = min(dText, charAnd(row2));
    
    // --- ROW 3: KEVIN ---
    vec2 row3 = p - vec2(-3.5, -1.5);
    dText = min(dText, charK(row3)); row3.x -= 0.8; 
    dText = min(dText, charE(row3)); row3.x -= 0.8; 
    dText = min(dText, charV(row3)); row3.x -= 0.8; 
    dText = min(dText, charI(row3)); row3.x -= 0.6; 
    dText = min(dText, charN(row3)); 

    // --- 4. COMPOSITE ---
    
    // Neon Outline Logic
    float neon = NEON_GLOW / (abs(dText) + 0.0001);
    neon = pow(neon, 1.3); // Sharpen the glow
    
    // Text Core (White)
    float core = smoothstep(0.02, 0.0, dText);
    
    // Add text on top of pixel art
    // We use yellow/gold for the glow
    vec3 textCol = vec3(1.0, 0.9, 0.2) * neon;
    textCol += vec3(1.0) * core;
    
    // Only add text color where the text actually is
    col += textCol;

    fragColor = vec4(col, 1.0);
}

Image

Not used

More shaders by merrypranxter

Browse all public shaders · All shaders by merrypranxter · ShaderKit home

Vibe Mode BETA
💰 ~0 credits
Uniforms
FPS: 0
Time: 0
Resolution: 0 x 0

Account

FPS: -- Time: -- --×-- 1x