Shaders

When complex, interactive visual effects are required, it can be helpful to use shaders—code that runs directly on the GPU, making them fast and performant. The public @scribehow/shaders package contains a collection of effects for Scribe.

Installation

Install the @scribehow/shaders package.

yarn add @scribehow/shaders

// 1. Import the package
import { FluidLight } from "@scribehow/shaders";
import { useRef, useEffect } from "react";

export default () => {
  // 2. Add a canvas element and attach a ref
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(async () => {
    if (!canvasRef.current) return;

    // 3. Initiate the shader once the ref is available
    await FluidLight.create(canvasRef.current);
  }, [canvasRef]);

  return (
    <div className="size-full">
      <canvas ref={canvasRef} className="size-full"></canvas>
    </div>
  );
};

API Reference

For more details about the shaders available and how to customize them, see the @scribehow/shaders readme.