Quickstart (Solid)

Install the npm package

npm install shaders

Import some components

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

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. All props use camelCase, consistent with Solid's JSX conventions:

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

Props also accept signals — createSignal and any other reactive primitive work exactly as you'd expect:

import { createSignal } from 'solid-js'
import { Shader, LinearGradient } from 'shaders/solid'

export default function MyShader() {
  const [angle, setAngle] = createSignal(0)

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

      <input
        type="range"
        min={0}
        max={360}
        value={angle()}
        onInput={e => setAngle(Number(e.currentTarget.value))}
      />
    </>
  )
}

When the signal updates, 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 SolidStart / SSR

Shaders only works client-side, as it needs a GPU to run. See the SolidStart / 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