repository·main·Indexed 25 days ago
https://github.com/paper-design/shadersA collection of lightweight, zero-dependency HTML canvas shaders for high-performance animated or static textures. It provides a vanilla JavaScript implementation via `@paper-design/shaders` and a comprehensive React wrapper via `@paper-design/shaders-react`, featuring components like MeshGradient, DotOrbit, and FlutedGlass, along with a `ShaderMount` component for managing shader lifecycles and uniforms.
@paper-design/shaders is the vanilla JavaScript implementation of Paper Shaders. Use this package if you are working in a framework-agnostic environment. For React-specific implementations, use the @paper-design/shaders-react wrapper instead.Import shader components like MeshGradient and DotOrbit from @paper-design/shaders-react to add animated visual effects to your React application. These components accept color arrays, effect parameters (such as distortion, swirl, or scale), and standard React style props.
import { MeshGradient, DotOrbit } from '@paper-design/shaders-react';
// Example: MeshGradient
<MeshGradient
colors={['#5100ff', '#00ff80', '#ffcc00', '#ea00ff']}
distortion={1}
swirl={0.8}
speed={0.2}
style={{width: 200, height: 200}}
/>
// Example: DotOrbit
<DotOrbit
colors={['#d2822d', '#0c3b7e', '#b31a57', '#37a066']}
colorBack={'#000000'}
scale={0.3}
style={{width: 200, height: 200}}
/>Paper Shaders provides zero-dependency HTML canvas shaders. Depending on your environment, install the appropriate package.
Note: Because the project is currently in 0.0.x versioning, it is recommended to pin your dependency to avoid breaking changes.
You can use pre-built shader components like MeshGradient and DotOrbit from the @paper-design/shaders-react package. These components are highly customizable via props such as colors, distortion, swirl, speed, and scale.
import {MeshGradient, DotOrbit} from '@paper-design/shaders-react';
<MeshGradient
colors={['#5100ff', '#00ff80', '#ffcc00', '#ea00ff']}
distortion={1}
swirl={0.8}
speed={0.2}
style={{width: 200, height: 200}}
/>
<DotOrbit
colors={['#d2822d', '#0c3b7e', '#b31a57', '#37a066']}
colorBack={'#000000'}
scale={0.3}
style={{width: 200, height: 200}}
/>The POISSON_CONFIG_OPTIMIZED object controls the performance and quality of the image processing step used by toProcessedGemSmoke.
export const POISSON_CONFIG_OPTIMIZED = {
measurePerformance: false, // Set to true to see performance metrics
workingSize: 512, // Size to solve Poisson at (will upscale to original size)
iterations: 32, // SOR converges ~2-20x faster than standard Gauss-Seidel
};The GodRaysParams interface defines the high-level configuration options for the God Rays shader. These parameters allow you to control colors, ray density, intensity, and the central glow effect. Most properties are optional and can be passed as strings (for colors) or numbers.
Available Parameters:
colorBack (string, optional): Background color.colorBloom (string, optional): Color overlay blended with the rays.colors (string[], optional): Up to 5 ray colors.spotty (number, optional): Length of the rays (higher = more spots/shorter rays, 0 to 1).midSize (number, optional): Size of the circular glow shape in the center (0 to 1).midIntensity (number, optional): Brightness/intensity of the central glow (0 to 1).density (number, optional): The number of rays (0 to 1).intensity (number, optional): Visibility/strength of the rays (0 to 1).bloom (number, optional): Strength of the bloom/overlay effect (0 = alpha blend, 1 = additive blend, 0 to 1).The GrainGradient shader provides multi-color gradients with grainy, noise-textured distortion in 7 animated abstract forms. You can configure the visual style using the following parameters:
colorBack: Background color (CSS color string).colors: Array of gradient colors (CSS color strings).softness: Color transition sharpness, where 0 is a hard edge and 1 is a smooth gradient.intensity: Distortion between color bands (0 to 1).noise: Grainy noise overlay intensity (0 to 1).shape: The animated abstract form to use.The @paper-design/shaders-react package provides several pre-configured presets for the FlutedGlass component. You can use these to quickly apply specific styles like 'Waves', 'Abstract', or 'Folds'.
Available presets:
defaultPreset: Standard fluted glass look.wavesPreset: A wavy, fluid glass effect.abstractPreset: High distortion, irregular lines with grain.foldsPreset: A cascading, folded glass effect.The @paper-design/shaders-react package exports several pre-configured WaterPreset objects that can be used to quickly apply specific visual styles to the Water component.
Available presets in waterPresets array:
defaultPreset: Standard water look.abstractPreset: High scale, low layering/highlights for an abstract feel.streamingPreset: Fast speed, contained fit.slowMoPreset: Very low speed with high highlights.The @paper-design/shaders-react package provides several pre-configured PaperTexturePreset objects that can be used to quickly apply specific styles. These are available in the paperTexturePresets array.
Available presets:
defaultPreset: The standard paper look.abstractPreset: High contrast, vibrant colors.cardboardPreset: Mimics cardboard texture with specific colors and crumples.detailsPreset: High-scale, high-detail texture for close-up effects.The package provides pre-configured HeatmapPreset objects that can be used to quickly apply specific styles like 'Default' or 'Sepia'.
Available presets:
defaultPreset: A standard multi-color heatmap.sepiaPreset: A warm, low-speed sepia-toned effect.The @paper-design/shaders-react package exports several pre-configured DitheringPreset objects that can be used to quickly apply specific visual styles. Available presets include:
defaultPreset: Standard sphere pattern.sinePreset: Sine wave pattern.bugsPreset: Random dot pattern.ripplePreset: Ripple effect.swirlPreset: Swirl effect.warpPreset: Warp effect.You can access the full list via the ditheringPresets array.