I'm trying to add a preset web shader from a shader library or Paper to a website. I've installed NPM and downloaded the shader package, but I'm confused about the next step: how do I import the shader into a local project, compile or bundle it, and get it running in the browser? I'm primarily a front-end developer and am used to adding a script tag and writing a small HTML code block, so the NPM workflow is unfamiliar. I'm looking for help getting an existing shader preset running, not guidance on writing a shader from scratch. Eventually I'd like to use it in Webflow, but first I need to understand the local setup.
2 Answers
The basic workflow is usually: create a project folder, run `npm init` or scaffold a small Vite app, install the shader package inside that folder, import its JavaScript entry point from `main.js`, and run the development server. Once it works locally, build the project and upload or embed the generated assets where needed. Webflow can potentially host the compiled JavaScript, but it’s much easier to troubleshoot the package in a normal local project first.
Start with the shader library’s component documentation and follow the setup example for the specific preset you want. NPM packages generally aren’t loaded just by installing them; your project needs an entry JavaScript file that imports the package, and a build tool such as Vite, Parcel, or Webpack to bundle it for the browser. The resulting build files are what you include in your HTML. If you only have a standalone browser-ready JavaScript file, you can still use a normal script tag, but an NPM package usually expects a bundler and may require a canvas element or other initialization code.
That helps clarify the difference. I was expecting installation to automatically make the shader available to my HTML, but I still need an import and a build step before the browser can use it.