Paper Shaders.

Paper Shadersis a free, open-source library of animated visual effects — flowing gradients, liquid metal, halftone prints, water ripples, grain, and more — that you can drop into any website. It's built by the team behind Paper, a design tool, and lives on GitHub with around 2,800 stars.

A "shader" is a tiny program that runs on your computer's graphics chip and paints moving pixels — the same technology behind video-game visuals. Normally, writing one requires a specialist programming language. Paper Shaders does that hard part for you: each effect is pre-built, pre-polished, and controlled by a handful of simple settings like colors, speed, and scale. You pick an effect from a gallery, tweak sliders until it looks right, and copy out a few lines of code — or hand the whole job to an AI agent.

The obvious alternatives to a shader background are a static image or a looping video — and both have real costs. An image doesn't move. A video file is heavy, slow to load, and looks blurry when stretched. A shader is generated live on the visitor's device, so it's a few kilobytes instead of megabytes, stays pin-sharp at any screen size, and can run forever without a visible loop.

The library is deliberately built for this job. Its stated goals: give designers a visual way to use common shaders, keep everything zero-dependency (it adds no other code to your project), maximise performance, and work across a wide range of browsers and devices. Typical uses are page backgrounds, effects masked inside text or shapes, animated logo treatments, and filters applied to images.

Start at shaders.paper.design — the interactive gallery and documentation site. Every effect has a live, full-screen preview page with controls you can play with in the browser, no account and no install. The effects fall into three groups:

• Image filters — apply a treatment to a photo or illustration you upload: paper texture, fluted glass, water, dithering, and halftone prints.
• Logo animations — feed in a logo and get it back animated: heatmap, liquid metal, and gem smoke.
• Effects — generated backgrounds and textures: mesh gradient, grain gradient, dot orbit, warp, spiral, waves, neuro noise, voronoi, metaballs, smoke ring, god rays, and more.

Each page also has presets — designer-made starting points — so you can get to a good-looking result before touching a single slider.

Paper Shaders is distributed through npm, the standard package registry websites are built from. If your site is built with React or Next.js (most modern sites made with AI tools are), the install is one command, run in your project folder:

If that sentence meant nothing to you, that's fine — this is exactly the kind of step an AI agent handles well. In Claude Code, Cursor, or whatever tool you build with, you can simply ask it to install and wire up the shader for you (a ready-made prompt is in the next section). For sites that don't use React, there's a vanilla JavaScript version called @paper-design/shaders that works the same way.

Every shader is a ready-made component: you place it on a page like an image, and its settings are written as readable name–value pairs. Here's the mesh gradient, exactly as the official docs show it — even without knowing code, you can spot where the colours, the distortion, and the animation speed live:

The workflow for non-coders: pick your effect in the gallery, adjust it until it looks right, hit copy on the code, and give it to your AI agent with a prompt like this:

Linking the shader's docs page in your prompt matters — it gives the agent the exact component name and settings, so it doesn't guess or invent an outdated version.

Each shader has its own settings (the mesh gradient has distortion and swirl; the halftone has dot size and angle), but a shared set of controls works across all of them, and knowing four is enough:

• colors — a list of hex codes, the same colour format used everywhere on the web. Swap in your brand palette; most shaders accept up to 10.
• speed — how fast the animation runs. 1 is normal, lower is calmer, and 0 freezes it completely — which turns any shader into a static texture.
• scale — the zoom level of the pattern, from fine texture to big soft shapes.
• frame — with speed at 0, this picks which frozen moment you get. Scrub it until the static composition looks best.

Change a value, save, and the effect updates — no re-exporting, no re-uploading. Iterating on a shader is closer to editing text than editing a video.

The library's second big idea is that these shaders are the same ones built into Paper, the design tool made by the same team. You can compose a shader visually on a design canvas — layering it with your type and layout, no code window in sight — and what you make is directly exportable as the same lightweight code, ready for any codebase. Every gallery page has an "open Paper" link that jumps you straight in.

That makes the split simple: design-minded people set the look in Paper or in the gallery's live controls; whoever (or whatever) writes the code just receives a finished snippet. Nothing is lost in translation between the mockup and the site.

• Price: free. The library is open source under the Apache 2.0 license — there is no paid tier, no account, and no usage limit.
• Commercial use is allowed — websites, apps, games, videos, prototypes, and internal tools, all without visible attribution.
• One condition:if you redistribute the code as part of another shader library, plugin, or tool, keep the included LICENSE and NOTICE files. A visible "Powered by Paper Shaders" credit is appreciated but optional.

The project is actively maintained by Lost Coast Labs (the company behind Paper), with regular fixes and new shaders landing on GitHub.