WebGL shaders used across various Scribe surfaces on web.
npm install @scribehow/shadersA collection of interactive WebGL shaders used at Scribe.
Shaders are built with OGL—a lightweight WebGL Library—and Tweakpane, dev tool for fine-tuning parameters.
``bash`
npm install @scribehow/shadersor
yarn add @scribehow/shaders
`javascript
import { FluidLight } from '@scribehow/shaders';
const canvas = document.getElementById('canvas');
if (canvas) {
const shader = await FluidLight.create(canvas, {
// Config options
});
}
`
`typescript
import { useRef, useEffect, useState } from 'react';
import { FluidLight, type FluidLightShader } from '@scribehow/shaders';
export const FluidLightBackground = () => {
const canvasRef = useRef
useEffect(() => {
if (!canvasRef.current) return;
await FluidLight.create(canvasRef.current, {
// Config options
});
}, [canvasRef]);
return
}
`
For usage without a bundler, the package provides a global build, with methods accessed through the global ScribeShaders namespace:
`html`
The package includes optional development tools powered by Tweakpane for real-time parameter adjustment. These tools are not bundled unless you explicitly enable them and install the required dependencies.
#### Installing Development Dependencies
If you want to use the development tools, install the optional peer dependencies:
`bash`
npm install tweakpane @tweakpane/plugin-essentialsor
yarn add tweakpane @tweakpane/plugin-essentials
#### Enabling Development Tools
`javascript
import { FluidLight } from '@scribehow/shaders';
const canvas = document.getElementById('canvas');
if (canvas) {
const shader = await FluidLight.create(canvas, {
// Config options
});
await FluidLight.attachDevtools(shader);
}
`
Note: If you haven't installed the Tweakpane dependencies, the attachDevtools call will fail gracefully.
Creates a new FluidLight shader instance.
Parameters:
- canvas (HTMLCanvasElement): The canvas element to render toconfig
- (Partial, optional): Configuration
options
Returns: Promise
Parameters:
- shader (FluidLightShader): The shader instance to attach
devtools to
Returns: Promise
The second argument passed into FluidLight.create() is FluidLightConfig — an object which allows adjusting the colors, movement, distortion, and other effects of the shader. The default settings are below.
`javascript
await FluidLight.create(canvas, {
// Side to orient effects around
// 0 = bottom, 1 = top, 2 = right, 3 = left
side: 0,
// Background color
background: "#020617",
// Light wave configuration
lightWave: {
amplitude: 0.04, // Wave height/intensity
speed: 0.4, // Animation speed
frequency: 1.2, // Wave frequency/density
color1: "#5648FB", // Outermost color
color2: "#3AC3FF", // Second color
color3: "#CE7FFF", // Third color
color4: "#F45397", // Fourth color
color5: "#FFB525", // Center color
minFalloff: 6.0, // Minimum falloff intensity
maxFalloff: 8.0, // Maximum falloff intensity
},
// Echo / ripple effect configuration
echo: {
enabled: true,
offset: 0.1, // Distance from edge
radius: 0.9, // Initial radius
frequency: 20.0, // Ripple frequency
ringSize: 2.0, // Ring thickness
strokeOpacity: 0.2, // Ring stroke opacity
fillOpacity: 0.01, // Ring fill opacity
animateIn: true, // Animate entrance
animationDuration: 3000, // Animation duration (ms)
animationDelay: 200, // Animation delay (ms)
},
});
``