Shaders

egaki supports WebGL2 fragment shaders as built-in components via defineShader(). Time is frame-based (u_time = frame / fps), making shaders deterministic and seekable.

Built-in shader components

Available in MDX without imports:

123<Background>
  <BandsShader speed={0.5} />
</Background>

Porting Framer shaders

Framer shader modules (defineShader() from framer) can be ported to egaki using defineShader() from cli/src/vite/shader-renderer.tsx.

Steps

Fetch the Framer module source from framerusercontent.com
Extract the GLSL fragment body (uniforms are auto-generated)
Map property controls to defineShader config
Export a typed props interface and component
Wire into MDX_BUILTIN_COMPONENTS in mdx-video.tsx

Rules

All props must be exposed in tweakpane UI
Preserve original defaults exactly from the Framer module
Time is frame-based: u_time = frame / fps
preserveDrawingBuffer: true is set automatically for WebCodecs compatibility
Include the original Framer URL as a comment at the top of the file

Creating custom shaders

12345678910111213import { defineShader } from 'egaki/src/vite/shader-renderer'

const MyShader = defineShader({
  title: 'MyShader',
  fragment: `
    float d = length(v_uv - 0.5);
    float pulse = sin(u_time * speed + d * 10.0) * 0.5 + 0.5;
    fragColor = vec4(pulse, 0.2, 0.8, 1.0);
  `,
  propertyControls: {
    speed: { type: 'number', defaultValue: 1.0, min: 0, max: 5, step: 0.1 },
  },
})

Ask AI about this page