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 2,005 stars 295 forks Updated 5 days ago AGPL-3.0

Install

View on GitHub

Quality Score: 93/100

Stars 20%
100
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
2 months ago
Last Updated
5 days ago
Language
TypeScript
License
AGPL-3.0

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category

AI & Automation Listed

shader-craft

Use when cockpit motion is wrong — avatar frozen, console slow, fps drops, black canvas, banding, crawling grain, shredded rows — or when editing the light bed (scripts/aurora-shader.js), the agent avatar (scripts/agent-avatar.js), the activity line, a design/vfx-sketches/*.frag sketch, or the VFX bench. Use when asked for glow, fog, swarms, particles, trails, "shock factor", or a more alive background. Use BEFORE accepting outside shader code (Shadertoy, a skills pack) and before calling a shader change done.

8 Updated today
balanced7
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.

3 Updated 2 days ago
Firzus
Web & Frontend Solid

grainient

Recreate grainient.supply's 16 dark-mode visual effects as single-file HTML pages: WebGL shader gradients, vignette overlays, 9-layer box shadows, smooth scroll, spring animations, hover-zoom, ticker marquees, glassmorphism, 3D card flips, bento grids, gradient CTAs. Dark-mode-first with lime green (#C2F13C) accent. Triggers on grainient effects, dark-mode landing page, cinematic depth, glow effects, SaaS showcase, visual effects page.

41 Updated yesterday
tdimino