Shader Canvas

beta

Minimal WebGL2 fragment-shader runner with time/resolution/pointer uniforms, DPR capping, offscreen pausing, reduced-motion still frame and CSS fallback.

@kura-ui/react/shader-canvasCopy page for agents.md registry.json

minimal

Silk with custom uniforms

Custom color uniforms, speed control, pause and pointer response.

full

Feature card with a live band

A ShaderCanvas header behind a glass chip, with copy, stats and Buttons on a token surface.

composition

Deep research

Hand off the reading, keep the judgement

Kura searches, reads and cross-checks dozens of sources, then brings back a cited brief you can question line by line.

Typical run: 4–6 min
Sources: 30–60
Included: 25 / month

Installation

npx shadcn@latest add https://kuro.abstergo.fyi/r/shader-canvas.json

Copies the source into components/kura/shader-canvas with its dependencies (kura-theme, kura-merge-refs, use-reduced-motion, utils). Tokens come from the kura-theme item.

When to use it

Use it for

Building any GPU visual: mesh gradients, auroras, grain, glows, orbs, generative backgrounds.
A custom decorative shader behind a hero, card or voice surface.

Reach for something else when

A ready-made effect exists — use mesh-gradient, agent-orb, grain or border-beam.
Static gradients — plain CSS is cheaper.
Anything that conveys information — it is aria-hidden and may fall back to a static gradient.

Props

Prop	Type	Default	Description
fragmentShader*	string	—	GLSL ES 3.00 source. Without a #version line, a header declaring u_time, u_resolution, u_pointer and `out vec4 fragColor` is prepended.
uniforms	Record<string, UniformInput>	—	Custom uniforms: number→float, [x,y]→vec2, [x,y,z]→vec3, [x,y,z,w]→vec4, or a function of time evaluated every frame. Declare them in the shader.
paused	boolean	false	Freeze time on the current frame.
speed	number	1	Time multiplier.
maxDpr	number	2	Device-pixel-ratio cap.
pauseWhenOffscreen	boolean	true	Stop rendering when not visible.
staticTime	number	1.5	u_time used for the reduced-motion still frame.
respectReducedMotion	boolean	true	Render a single still frame when the user prefers reduced motion.
fallback	React.ReactNode	—	Shown when WebGL2 is unavailable or the shader fails. Default: a soft token gradient.
onError	(message: string) => void	—	Compile/link error callback.

All native attributes of the root element, className and ref pass through.

Anatomy

ShaderCanvasContainer div (size it with classes); `data-state` = running | paused | static | fallback.data-slot="shader-canvas"

Accessibility

Decorative: the container is aria-hidden. Never put meaning only in the shader.
Respects prefers-reduced-motion with a single still frame.
Reduced motion: Renders one frame at `staticTime` and stops the animation loop.

Notes for agents

Give the container an explicit size (e.g. `className="h-64 w-full rounded-kura-xl"`); the canvas fills it.
Animate custom uniforms with function values `(t) => …` or by mutating an object you pass — not React state per frame.
Colors in shaders cannot read CSS variables; pass them as vec3 uniforms (linear 0–1 RGB).

Gradient in a few lines