WebGL Shader Effects
When to use: Adding high-impact WebGL visuals: animated liquid/fluid hero backgrounds, particle systems, distortion effects, and generative art surfaces.
npx skills add shader-visual-effectsgit clone https://github.com/skillhub-community/shader-visual-effects.gitDescription
A collection of production WebGL effects built with Three.js and raw GLSL: LiquidBackground (fluid-displacement background reacting to mouse position), NoiseGlitch (value-noise glitch distortion for cyberpunk headers), ParticleField (mouse-repelling particle system, GPU-accelerated), GradientMesh (flowing multi-color mesh gradients), and MorphingGrid (distorted plane grid). Each effect is a self-contained component with uniforms exposed as React props (speed, color, intensity).
Includes the essential shader infrastructure: a useFrame-powered render loop, ResizeObserver-driven viewport resizing, devicePixelRatio clamping for performance, WebGL context management on unmount, and a graceful fallback (static CSS gradient) when WebGL is unavailable. Performance guidance: keep fragment shaders cheap, cap DPR at 2, pause rendering when tab is hidden or effect is off-screen. Includes a comment-annotated GLSL tutorial inside each shader so teams can learn as they customize.
AI Hub
Need a model endpoint?
AI Hub is an OpenAI-compatible endpoint for Cursor, Claude Code, and Agent workflows.
Open AI Hub