Adding beautiful shaders to your site with paper-design/shaders

I've used shaders, GPU-backed canvases—in a bunch of my projects. While I love them, I've always been a bit frustrated by the boilerplate for setting up simple ones. The visual possibilities are endless, but there's a steep learning curve and a bunch of setup complexity. That's why paper-design/shaders is great. Zero-dependency shaders out of the box.

Getting it running

The setup is refreshingly simple. Just grab the package that matches your environment:

# For React projects
npm i @paper-design/shaders-react

# For vanilla JavaScript
npm i @paper-design/shaders

Examples that actually work

Let me show you a couple of ways I've been using Paper Shaders:

React: Animated mesh gradient

This one creates a flowing, organic background effect that works great for hero sections.

Here's what that looks like in action:

import { MeshGradient } from '@paper-design/shaders-react'

export default function App() {
  return (
    <div className="relative h-full">
      <MeshGradient
        colors={['#5100ff', '#00ff80', '#ffcc00', '#ea00ff']}
        distortion={1}
        swirl={0.8}
        speed={0.2}
        height='100%'
      />
      <div className="absolute inset-0 flex items-center justify-center">
        👋
      </div>
    </div>
  )
}

Vanilla JavaScript: Custom shader effect

For non-React projects, the vanilla JavaScript approach is just as straightforward:

import { createShader } from '@paper-design/shaders'

const canvas = document.querySelector('#shader-canvas')
const shader = createShader(canvas, {
  type: 'dithering',
  colors: ['#ff6b6b', '#4ecdc4', '#45b7d1'],
  intensity: 0.5,
  speed: 0.1
})

// Start the animation
shader.start()

The library comes with various shader effects - mesh gradients, dithering, dot orbit, warp effects, and more. Each one lets you tweak settings through props or configuration objects, so you can dial in exactly the look you're after.

Why I think you'll like it

Paper Shaders hits that sweet spot I'm always looking for - powerful enough for real work but simple enough that I can mess around with it on a weekend without getting bogged down in setup. The zero-dependency approach means you're not taking on technical debt, and the performance focus means your effects won't turn someone's phone into a space heater.

If you want to check it out, the documentation and examples at shaders.paper.design are pretty solid, and you can poke around the GitHub repository to see what's under the hood.