Design & visuals Claude

4 GitHub repos for insane design effects (with Claude Code)

Hey, it's Cindy 🌱 Those glassy, liquid, slow-moving-gradient effects you see on expensive startup sites? A lot of them are free, open-source GitHub repos that anyone can use. You don't have to be a designer or write the shader math yourself. You point Claude Code at the repo, describe the effect you want in plain English, and it installs it and wires it into your site. Here are the 4 repos I keep coming back to, what each one actually does, and the exact starter prompt to use for each.

💡 The whole move is the same every time. Point Claude Code at the repo, tell it the effect you want and your brand colours, and let it drop it into your site. You're directing, not coding. The repos below are just the raw materials.

the workflow

How to use any of these with Claude Code 🧩

🔗 Point Claude at the repo. Paste the GitHub link into Claude Code and tell it to read the README first. It'll learn how the library installs and what it needs before it touches your project.
🗣️ Describe the effect in plain English. Say exactly where it goes (hero background, nav bar, logo), your brand colours in hex, and how loud or subtle you want it. Vague in means vague out, so be specific: "slow, soft, cream to warm orange" beats "make it cool".
🛠️ Let it install and wire it in, then tweak live. Claude installs the dependencies, adds the component to the right section, and runs your site locally so you can see it. Then you iterate in words: "slower", "less grain", "only behind the hero".

🎯 Tell Claude what your site is built with. Two of these want a React project, one drops into plain HTML, one you can use straight from a hosted demo. Say "my site is plain HTML" or "my site is Next.js" up front so Claude picks the right way to install it.

moving gradients

1. ShaderGradient: soft moving gradient backgrounds 🌈

Animated 3D gradient backgrounds made with WebGL shaders, the soft, slowly shifting colour wash you see behind so many hero sections. Fully customisable colours, shape, grain and lighting. It's a React library (installs alongside three and @react-three/fiber), and there are also official Framer and Figma plugins if you'd rather not touch code at all. Free and open source.

starter prompt for Claude Code

Read the ShaderGradient repo at https://github.com/ruucm/shadergradient and its README.

My site is built in [React / Next.js / plain HTML, tell it which]. I want a slow, subtle
moving gradient as my hero background, not a loud one. Please:
1. Install @shadergradient/react and its peer deps (@react-three/fiber, three).
2. Add a full-width ShaderGradientCanvas behind my hero section only.
3. Use my brand colours: cream #FAF7F2 and warm orange #D97757.
4. Keep the motion slow and add a light grain so it feels soft.
Then run it locally so I can see it and tune the speed with me.

liquid metal

2. Liquid Logo: turn your logo into liquid metal 🪙

Drop in your logo as a transparent PNG and it becomes animated liquid metal, that chrome, mercury-looking effect. Built on Paper's shaders (@paper-design/shaders-react). There's a hosted version at liquid.paper.design where you just upload and tweak, so you can get a result with zero setup, and the repo is there when you want to customise it deeper. Free and open source.

starter prompt for Claude Code

I want to turn my logo into animated liquid metal using
https://github.com/paper-design/liquid-logo (built on @paper-design/shaders-react).

Here's my logo as a transparent PNG: [drop the file in].
1. Clone and run the repo locally so I can load my logo into it.
2. Help me tune the metal colour, refraction and speed to a warm chrome that fits a
   cream-and-orange brand.
3. Export the result as a short loop I can use on my site and on socials.
If running the full app is overkill, show me how to use the hosted demo at
liquid.paper.design instead and just lift the settings.

glass ui

3. Liquid Glass JS: Apple-style frosted glass panels 🫧

The Apple Vision Pro / iOS 26 "liquid glass" look: frosted panels with real refraction, blur and edge distortion, so whatever is behind them warps through the glass. It's vanilla JavaScript with no build step, so it drops into any plain HTML page. Ships with Container and Button classes you point at nav bars, cards and modals. This is the most beginner-friendly of the four because there's no React or build tooling to set up. Free and open source (live demo here).

starter prompt for Claude Code

Read the Liquid Glass JS repo at https://github.com/dashersw/liquid-glass-js.
It's vanilla JS with no build step.

My site is a plain HTML page. Please:
1. Add the library to my page.
2. Turn my top navigation bar and my pricing cards into frosted "liquid glass" panels
   using the Container class, so the background shows through with real refraction.
3. Make sure text on top of the glass stays readable (enough contrast behind it).
Show me the exact HTML and JS to paste in, then preview it so we can tune the blur.

real 3d

4. React Three Fiber: real interactive 3D on your page 🧊

The big one. A React renderer for Three.js, so you can put real, interactive 3D on your page (floating objects, your logo extruded into 3D, particles, models) as normal React components. Anything Three.js can do works here, and there's a huge ecosystem around it (@react-three/drei for ready-made helpers, and more). It needs a React project and it's the steepest of the four to learn, but the ceiling is basically unlimited. Free and open source.

starter prompt for Claude Code

Read the React Three Fiber docs and repo at https://github.com/pmndrs/react-three-fiber.

My site is a React project. I want one gentle 3D moment in my hero: a soft, slowly
rotating rounded shape (or my logo extruded into 3D) that reacts a little to the mouse.
1. Install @react-three/fiber, three, and @react-three/drei.
2. Build a small  component with a Canvas, soft lighting, and one floating
   object in my brand orange (#D97757).
3. Keep it lightweight and pause the animation when the tab isn't visible.
Then run it locally so I can see it and slow it down with me.

the honest bit

Keep it to one moment 📌

🚫 These are WebGL-heavy. Use one, not all four. Each of these runs real graphics on the visitor's device, so stacking them will slow the page and drain phone batteries. Pick ONE hero moment per page, test it on a real phone, and add a prefers-reduced-motion fallback (just ask Claude to do this) so it calms down for people who ask for less motion.

💡 The repos are free, your job is taste. All four cost nothing to use. What makes a site look expensive isn't the effect, it's restraint: one beautiful moving thing on a calm page beats five effects fighting each other. Direct Claude toward subtle.

the links

All 4 repos in one place 🔗

🌈 ShaderGradient Moving 3D gradient backgrounds. React, plus Framer and Figma plugins. github.com/ruucm/shadergradient

🪙 Liquid Logo Turn a logo into animated liquid metal. Hosted demo at liquid.paper.design. github.com/paper-design/liquid-logo

🫧 Liquid Glass JS Apple-style frosted glass panels. Vanilla JS, no build step. github.com/dashersw/liquid-glass-js

🧊 React Three Fiber Real interactive 3D as React components. github.com/pmndrs/react-three-fiber

Follow @cindiezhu for more AI you can actually use 🌱

Want more like this? Follow @cindiezhu for daily AI you can actually use.