shader-gen

Featured

AI 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.

AI & Automation 573 stars 61 forks Updated today AGPL-3.0

Install

View on GitHub

Quality Score: 91/100

Stars 20%
92
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# Shader Generator Submit-only: creates a backend generation job, returns `jobId`. Use the `track_progress` tool for job lifecycle after submission. **Always use `generate.ts` for new shaders.** Manual authoring is only for editing existing asset code — never as a fallback when generation fails. ## Catalog-first rule — try existing assets before generation Before generating a shader, call `browse_library` unless the user names an exact asset id that is already visible in `read_project`. `browse_library` is the source of truth for built-in effects, built-in transitions, and project effect/transition assets. Built-ins are stable global asset ids, not per-project DB assets, so they may not appear in `read_project` asset lists. Apply catalog entries with `edit_item`, do **not** call `submit_shader`. Good catalog searches: ```text browse_library(query: "zoom") browse_library(category: "transitions", query: "dissolve") browse_library(category: "audio-fx") ``` Generate only when no catalog entry matches the user's intent closely enough. ### `builtin:zoom` is track-bound only — DO NOT use item-bound The default effect mode is `"item-bound"` (attach to a single item via `targetItemId`). **`builtin:zoom` does NOT render in item-bound mode** — the renderer reads zoom data exclusively from track-bound effect items. An item-bound zoom inserts into the DB silently but shows nothing in preview. Use `mode: "track-bound"` with `trackId` + `trackBoundFrom` + `trackBoundDurationInFr...

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

Web & Frontend Listed

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.

1 Updated today
Firzus
AI & Automation Listed

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".

1 Updated 2 days ago
JagZ999
AI & Automation Featured

webgl-card-effects

Standalone WebGL fragment shaders for card visual effects: holographic foil, shimmer, rarity glow.

412 Updated 3 days ago
notque