Makepad Graphics & Effects

GPU-accelerated shaders, SDF drawing, and animations in Makepad.

Category	Description
Shader Basics	Structure, variables, math functions
SDF Drawing	Circle, box, capsule, path drawing
Animation	Animator, easing, keyframes, loops
Visual Effects	Hover, gradients, shadow, glow

Shader Structure

live_design! {
    MyShader = {{MyShader}} {
        fn pixel(self) -> vec4 {
            let sdf = Sdf2d::viewport(self.pos * self.rect_size);
 
            // Draw shapes
            sdf.circle(50.0, 50.0, 20.0);
            sdf.fill(#FF0000);
 
            return sdf.result;
        }
    }
}

SDF Operations

// Basic shapes
sdf.circle(x, y, radius)
sdf.box(x, y, width, height, border_radius)
sdf.capsule(x1, y1, x2, y2, width)
 
// Fill and stroke
sdf.fill(color)              // Fill shape
sdf.stroke(color, width)     // Stroke outline
sdf.fill_keep(color)         // Fill, keep shape for more ops

Animator System

live_design! {
    <Button> {
        animator: {
            hover = {
                default: off
                off = { from: {all: Forward {duration: 0.15}} }
                on = { from: {all: Snap} }
            }
        }
 
        draw_bg: {
            color: #2196F3
            color_hover: #42A5F5
        }
    }
}

Easing Functions

Easing	Use Case
`OutQuad`	Enter animations
`InQuad`	Exit animations
`InOutQuad`	Smooth transitions
`ExpDecay {d1: 0.8, d2: 0.97}`	Physics-like motion

Animation Example

live_design! {
    LoadingSpinner = {{LoadingSpinner}} {
        animator: {
            spin = {
                default: on
                on = {
                    from: {all: Loop {duration: 1.0}}
                    apply: { draw_bg: { rotation: 360.0 } }
                }
            }
        }
 
        draw_bg: {
            fn pixel(self) -> vec4 {
                // Rotating arc shader
                let sdf = Sdf2d::viewport(self.pos * self.rect_size);
                let angle = self.rotation * PI / 180.0;
                // Draw rotating arc
                return sdf.result;
            }
        }
    }
}

Gradient Effects

draw_bg: {
    fn pixel(self) -> vec4 {
        // Linear gradient
        let grad = self.pos.y;
        let color = mix(#FF0000, #0000FF, grad);
        return vec4(color, 1.0);
    }
}

Resources

All Tags

Items tagged with Animation (2)

Slack GIF Creator Skill

Makepad Graphics & Effects