shader-gen
FeaturedAI shader generator for WebGL video effects, transitions, masks, and color grading (LUT / 调色 / 电影感 / film look). Use when the user wants a video effect (滤镜 / 特效), a transition (转场 / crossfade / wipe / cube / 3d), a mask (蒙版 / 遮罩 / reveal), a zoom / push-in (推近 / 推镜头), or a color grade — try the built-in effects (zoom, builtin LUTs) before generating a new shader.
Install
Quality Score: 91/100
Skill Content
Details
- Author
- 0xsline
- Repository
- 0xsline/OpenChatCut
- Created
- 1 weeks ago
- Last Updated
- today
- Language
- TypeScript
- License
- AGPL-3.0
Integrates with
Similar Skills
Semantically similar based on skill content — not just same category
shaders
Guides building GPU-accelerated visual effects in React / Next.js with the `shaders` npm package from shaders.com — declarative `<Shader>` component trees, composition (stacking, nesting, blend modes, masking), reactive props, dynamic prop drivers (`auto-animate`, `mouse-position`, `map`), shape (SDF) effects, color space, performance budget (RTT / generator vs filter), and SSR safety. Use when the user asks to add a "shader background", "WebGPU effect", "aurora / plasma / swirl / glass / cursor-trail" hero, mentions shaders.com, the `shaders/react` package, the `<Shader>` component, or wants animated GPU-rendered visuals in a React or Next.js app. Not for raw GLSL / WebGL / Three.js / react-three-fiber work — those use different APIs.
backgrounds-gradients
Living backgrounds & moving gradients for motion-graphics videos — the layer that makes a frame feel alive instead of a static slide. Color-arc gradient that shifts per scene with drifting blobs, a soft mesh light-wash that glides across, blueprint line grids, dot-matrix fields, glowing neon curved paths with travelling light-dots, starfields, and grain/paper/paint texture overlays. Use when a scene looks flat or slide-like, when adding a moving gradient behind the whole piece, or matching a reference reel's animated background. Triggers: "moving gradient background", "gradient that shifts through the video", "make the background alive", "mesh gradient wash", "blueprint grid", "dotted background", "neon lines", "starfield", "film grain / texture overlay".
webgl-card-effects
Standalone WebGL fragment shaders for card visual effects: holographic foil, shimmer, rarity glow.