S-TIER repo
GitHub as a design asset library — shader gradients, liquid glass, R3F
100k ft — What is this?
GitHub as a design asset library — shader gradients, liquid glass, R3F
50k ft — Why care?
Four free repos for high-end web visuals you can now vibe-code with Claude Code or Cursor: ShaderGradient for animated gradients, liquid-logo for chrome/metal effects, liquid-glass-js for Apple-style liquid glass, and react-three-fiber to drive three.js in React.
10k ft — Key takeaways
• ShaderGradient gives customizable animated gradients in React.
• link: http://github.com/dashersw/liquid-glass-js
• link: http://github.com/paper-design/liquid-logo
• link: http://github.com/pmndrs/react-three-fiber
• link: http://github.com/ruucm/shadergradient
5k ft — Tools & techniques
Claude, Claude Code, Cursor, OpenAI, React, ShaderGradient, liquid-glass-js, liquid-logo, react-three-fiber, three.js
WebGL shaders, code generation, vibe coding
1k ft — Deep-dive / try it
The most insane 3D, liquid, gradient & more UI effects you’ve seen are free on GitHub. This truly is your new design asset library — and now that you can vibe code, you can use them too.
🔗 REPOS:
ShaderGradient
→ http://github.com/ruucm/shadergradient
liquid-logo
→ http://github.com/paper-design/liquid-logo
liquid-glass-js
→ http://github.com/dashersw/liquid-glass-js
react-three-fiber
→ http://github.com/pmndrs/react-three-fiber
#aitools #productdesign #webdevelopment #github #3ddesign
Transcript excerpt
If you've ever seen one of these insane visual effects online, and you're like, I could never build that, yes you can. Because GitHub is your new design asset library, and I promise you it's not intimidating. This is actually my favorite application of live coding, because designers have all these cool ideas and visions, but they could never execute it themselves so far. And now it tools like clock code and cursor. GitHub is no longer a place for just developers. Let me show you how. The first one is shader gradient, and this is how you get those super cool moving gradients and react. These are some examples of what they could look like, and they're fully customizable by shape, colors, and motion. The second one is liquid logo. This one lets you have the super cool metal chrome look to anything. Three liquid class JS. This one lets you customize Apple liquid class inspired effects with these controls. And finally, this is probably the coolest one. This basically lets you render 3JS and react. And what that means is you can take this whole three library called 3JS and customize it for your website like this, this or this. This is part one my favorite repos and part two I'll show you how to use them.