Quickstart (Svelte)

Install the npm package

npm install shaders

Import some components

import { Shader, LinearGradient, CursorTrail } from 'shaders/svelte'

Your first shader

Let's create a very simple shader:

<Shader class="w-full h-64">
  <LinearGradient colorA="#0f172a" colorB="#7c3aed" />
  <CursorTrail />
</Shader>

<Shader> renders a <canvas> element. Child components are visual layers evaluated top to bottom, blended together on the GPU. In this example, we render the linear gradient first, and then the cursor trail effect on top of that.

Sizing the canvas

The <canvas> has no intrinsic size. The class or style you apply to <Shader> controls the canvas size and position.

<!-- Fill the viewport -->
<Shader class="w-screen h-screen">
  <LinearGradient />
</Shader>

<!-- Fixed dimensions -->
<Shader style="width: 600px; height: 400px;">
  <LinearGradient />
</Shader>

<!-- Fluid with aspect ratio -->
<Shader class="w-full aspect-video">
  <LinearGradient />
</Shader>

Applying a class or style to the <Shader> tag is preferred over trying to target the <canvas> element directly, as the internal DOM structure may change in the future.

Configuring components

Pass props directly to configure each component. String values can be passed plain; everything else uses Svelte's {expression} syntax:

<Shader class="w-full h-64">
  <LinearGradient
    colorA="#ff6b6b"
    colorB="#4ecdc4"
    angle={45}
    colorSpace="oklch"
  />
</Shader>

Props also accept reactive state — Svelte's $state rune (or let in Svelte 4) works exactly as you'd expect:

<script>
  import { Shader, LinearGradient } from 'shaders/svelte'

  let angle = $state(0)
</script>

<Shader class="w-full h-64">
  <LinearGradient colorA="#ff6b6b" colorB="#4ecdc4" {angle} />
</Shader>

<input type="range" min="0" max="360" bind:value={angle} />

When angle changes, the shader updates on the GPU instantly — no recompilation, no flicker.

Browse the Component Docs for the full prop reference on every component.

Using with SvelteKit / SSR

Shaders only works client-side, as it needs a GPU to run. See the SvelteKit / SSR guide for how to set it up with server-side rendering.

Next steps

• Composing Effects — stack and nest components for complex results
• Layout & Positioning — position the canvas in your UI
• Component Docs — browse all available shaders