rogue-agency/shaders

Paper Shaders is a browser-side shader library distributed as vanilla JavaScript and React packages. The principal workflow starts when an external website’s developer renders a shader component or constructs a vanilla mount: React props (or direct uniforms) configure a shader, image inputs may be prepared, and the library renders the effect to a WebGL canvas. The packages include many independent visual effects; they are not a hosted rendering service.

Components

Public interfaces and React adapters

• Vanilla package exports — packages/shaders/src/index.ts: Exposes the core mount, sizing utilities, shader presets, fragment shader sources, and parameter/uniform types for direct use by browser applications.

• React package exports — packages/shaders-react/src/index.ts: Exposes React shader components, presets, and prop types; its client entry point re-exports the framework adapters.

• React shader adapters — packages/shaders-react/src/shaders/mesh-gradient.tsx: The per-effect adapter pattern is represented by this component; adapters provide React props/default presets, convert colors into uniforms, and render through the shared React mount. The tree shows adapters for many effects.

• React mount and input handling — packages/shaders-react/src/shader-mount.tsx: Provides the shared React wrapper, asynchronously prepares image uniforms, creates and retains the vanilla mount, and updates uniforms, speed, and pixel limits as props change.

Rendering and shader implementation

• WebGL rendering engine — packages/shaders/src/shader-mount.ts: Creates and manages the WebGL2 program and canvas, sets uniforms and textures, and controls animation, sizing, and visibility-aware speed.

• Shader sizing and shared utilities — packages/shaders/src/shader-sizing.ts: Defines shared sizing parameters and uniforms used to fit shader output to its rendered element.

• Effect shader library — packages/shaders/src/shaders/mesh-gradient.ts: Represents the effect modules that define fragment-shader programs and their parameter/uniform contracts; the tree contains a broad catalog of distinct effects.

• Shared shader helpers and types — packages/shaders/src/shader-utils.ts: Provides reusable shader-level helpers imported by effect modules; shared type definitions are in packages/shaders/src/types.ts.

Image-based effects

• Gem Smoke image processing and effect — packages/shaders/src/shaders/gem-smoke.ts: In addition to its fragment shader, exports toProcessedGemSmoke, which loads an image, derives shape masks and pixel neighborhoods, solves image data, and produces a PNG blob for the effect.

• Liquid Metal image effect — packages/shaders/src/shaders/liquid-metal.ts: Implements an image-aware fragment shader that samples image textures and applies animated material treatment; the excerpt also contains image-processing routines, but their complete relationship to this effect cannot be determined from the sample.

Package build and release

• Package build — build.js: Builds both package source trees into browser ESM bundles and declaration files.

• Package publication — publish.js: Publishes the vanilla and React packages sequentially through the npm CLI, substituting workspace dependency versions during publication.

Relationships

• External website developer -> React package exports: Imports and renders a published React component; README documents npm installation and examples.

• External website developer -> Vanilla package exports: Imports the vanilla package for browser use; README documents this package and framework-independent usage.

• React package exports -> React shader adapters: Re-exports effect components and presets; evidenced by the entry-point exports.

• React shader adapters -> React mount and input handling: Passes fragment shaders, uniforms, speed, and frame into the shared wrapper; evidenced by packages/shaders-react/src/shaders/gem-smoke.tsx.

• React mount and input handling -> WebGL rendering engine: Constructs the vanilla ShaderMount and calls its update methods; evidenced by packages/shaders-react/src/shader-mount.tsx.

• Vanilla package exports -> WebGL rendering engine: Exports the mount as the direct-use API; evidenced by packages/shaders/src/index.ts.

• WebGL rendering engine -> Effect shader library: Compiles and renders the fragment shader supplied by the caller; engine compilation is evidenced in packages/shaders/src/shader-mount.ts, while effect modules and exports establish the shader sources.

• Effect shader library -> Shader sizing and shared utilities: Effect modules use shared sizing or shader helpers; evidenced by imports in packages/shaders/src/shaders/liquid-metal.ts.

• React shader adapters -> Gem Smoke image processing and effect: Calls toProcessedGemSmoke for image inputs and supplies the processed image as a uniform; evidenced by packages/shaders-react/src/shaders/gem-smoke.tsx.

• Gem Smoke image processing and effect -> React mount and input handling: The adapter passes its processed image and shader uniforms into the shared React mount; evidenced by the same adapter.

• Build invocation -> Package build: The root build script runs build.js; evidenced by package.json.

• Package build -> Vanilla package exports: Builds the vanilla source tree into distributable output; evidenced by build.js.

• Package build -> React package exports: Builds the React source tree into distributable output; evidenced by build.js.

• Publication invocation -> Package publication: Root publication scripts run the publisher after building; evidenced by package.json.

• Package publication -> npm registry: Runs npm publish for each package; the registry is an external system with no repository path.

Coverage limits

The sample does not include the documentation application’s source, most shader implementations, package manifests for both libraries, or the full mount and image-processing code. The README documents designer workflows and examples, but does not establish an in-repository connection from the Paper design product to these package APIs.