How do I add a preset web shader to an NPM project?

Start with the package’s documentation, since each shader library usually exposes a different setup function and expects specific HTML or canvas elements. In a normal local project, create a package file with `npm init`, install the shader package with `npm install `, and use a build tool such as Vite. Your JavaScript would then import the package, select a canvas or container, and initialize the preset according to the library’s example. Running the Vite development server will bundle the imported code for you. If the library provides a browser build, you may also be able to use a regular `` tag instead of NPM, which may be easier for a Webflow embed.

For the least confusing first test, use a tiny Vite project rather than trying to install packages directly into your home folder: run `npm create vite@latest shader-test`, choose a basic JavaScript template, then run `npm install` and `npm run dev`. Put the shader package installation and import in the generated JavaScript file, and follow the package’s preset example for creating the canvas and passing its options. Once it works locally, you can either copy the library’s browser script into Webflow or host the bundled JavaScript and load it with a script tag. NPM itself does not compile or display a shader; it only installs dependencies, while the bundler prepares the JavaScript for the browser.