Open Source Design Effects You Can Add with Claude Code

The soft moving gradients, liquid metal logos and glassy panels you see on polished product sites look like months of graphics work. Most of them come from a handful of open source libraries, and Claude Code can wire them into your site in an afternoon. The hard part was never the code. It is choosing one effect, tuning it with restraint, and checking the license before it goes live.

How to add any of these with Claude Code

The workflow is the same for every library below. I use it every time I add a visual effect to one of my own sites.

1. Tell Claude your stack first. Plain HTML, React with Vite, Next.js. Some of these libraries need React and some do not, so this decides the install path.
2. Point it at the official README. Ask Claude to read it and the package's current peer dependencies before touching your project.
3. Describe the effect in design terms. Where it goes, your colors as hex values, the speed, how loud it should feel. "Slow, low contrast, only behind the hero" works. "Make it cool" does not.
4. Ask for a preview and tune in words. Slower. Less grain. Smaller on mobile.

Then give every effect the same finishing checklist:

Before we finish:
1. Respect prefers-reduced-motion: show a still frame instead of animation.
2. Pause the animation when the section is off screen or the tab is hidden.
3. Show a static fallback image if WebGL is not available.
4. Test on a real phone and tell me the frame rate and page weight added.
5. Add the library's license notice to our third-party notices file.

ShaderGradient for moving gradient backgrounds

ShaderGradient makes animated 3D gradients with WebGL: the slow color wash behind so many hero sections. You can design the look visually on its customizer, and there are Figma and Framer versions if you are not in code. The README states an MIT license.

In React it installs with its renderer and Three.js dependencies. The README lists the exact set, which currently looks like this:

npm i @shadergradient/react @react-three/fiber three three-stdlib camera-controls

A prompt that works well:

Read the README at https://github.com/ruucm/shadergradient.
My site is [Next.js App Router / Vite React]. Check the compatibility table
for my React and @react-three/fiber versions before installing.
Add a ShaderGradient behind the hero section only.
Colors: [#hex], [#hex], [#hex]. Slow motion, light grain, low contrast
so the headline stays readable. Lazy load it so it does not block first paint.

The compatibility table matters. It pins which React Three Fiber version works with which React and Next.js setup, and ignoring it is an easy way to end up with a blank canvas.

Paper Shaders for lightweight effects, including liquid metal

Paper Shaders is a collection of zero-dependency canvas shaders: mesh gradients, grain gradients, dithering, halftone, water, and a liquid metal effect. It works in plain JavaScript or React, and it is licensed under Apache 2.0. You can browse and tune every shader on the documentation site and copy the settings straight into code.

The README asks you to pin the version, because the package is still on 0.0.x and ships breaking changes. Tell Claude that explicitly.

Install @paper-design/shaders-react and pin the exact version.
Add a MeshGradient as the background of the pricing section
with colors [#hex], [#hex], [#hex] and a slow speed.
Keep text on a solid surface above it.

You may also see the separate Liquid Logo repo from the same team, which turns a logo into animated metal. Read its license before using it at work. It uses the PolyForm Shield license, which makes the code source-available with conditions, and that is different from the Apache license on the shader library itself.

Liquid Glass JS for glass panels on plain HTML

Liquid Glass JS recreates the refractive glass look with WebGL, with container and button classes you attach to a nav bar or card. It is MIT licensed and needs no build step, which makes it the easiest of these to try on a static page. Look at the live demo first.

Two honest notes. It samples the page behind the glass using html2canvas, which costs real performance on long or busy pages. And the repo has not been updated in a while. For a nav bar on a simple site it is fun. For a production app, ask Claude to compare it with a CSS backdrop-filter version first, which gets you most of the look for a fraction of the cost.

React Three Fiber for real 3D

React Three Fiber is a React renderer for Three.js, MIT licensed, and a widely used way to build 3D in React. Pair it with drei for ready-made cameras, lights, text and loaders. It has the highest ceiling here and the steepest learning curve, so start with one small object.

Using @react-three/fiber and @react-three/drei, add one slowly rotating
rounded shape in [#hex] to the hero. Soft lighting, subtle mouse parallax.
Cap the device pixel ratio at 2 and stop rendering when off screen.

The official docs are good, and Claude reads them well when you paste the relevant page.

A static texture when motion is too much

Sometimes the page needs warmth and no movement at all. nnnoise and the other generators on fffuel export SVG grain and shapes you can drop in as a background. Its license allows personal and commercial use without attribution, but not redistributing the images as your own asset pack.

Restraint is the real skill

Every effect here runs on your visitor's device. Stacking two or three drains phone batteries, slows the page and makes it look busier. One moving moment on a calm page reads as expensive. Five read as a template.

Pick one page, pick one effect, and give Claude the stack, the README and your colors. Run the finishing checklist, look at it on your phone in daylight, and only keep it if the page is clearer with it than without it.