gsap-core
Official GSAP skill for the core API — gsap.to(), from(), fromTo(), easing, duration, stagger, defaults, gsap.matchMedia()…
@nexu-ioInstall SkillDevelopment
Skill
/web-shader-extractor
Extract a real WebGL / WebGPU / Canvas / shader effect from a live webpage (e.g. an animated gradient mesh, fluid/metaball, gaussian-splat scene, image distortion) and port it to a standalone, dependency-light JS project you can run locally or drop into an HTML artifact. Use
Claude Code
$ npx -y skills add nexu-io/motion-anything --skill web-shader-extractor --agent claude-code
Codex
$ npx skills add nexu-io/motion-anything --skill web-shader-extractor -a codex -y
Cursor
$ npx skills add nexu-io/motion-anything --skill web-shader-extractor -a cursor -y
Gemini CLI
$ npx skills add nexu-io/motion-anything --skill web-shader-extractor -a gemini-cli -y
GitHub Copilot
$ npx skills add nexu-io/motion-anything --skill web-shader-extractor -a github-copilot -y
OpenCode
$ npx skills add nexu-io/motion-anything --skill web-shader-extractor -a opencode -y
Windsurf
$ npx skills add nexu-io/motion-anything --skill web-shader-extractor -a windsurf -y
SKILL.md
web-shader-extractor.SKILL.mdname: web-shader-extractor
description: |
Extract a real WebGL / WebGPU / Canvas / shader effect from a live webpage (e.g. an animated
gradient mesh, fluid/metaball, gaussian-splat scene, image distortion) and port it to a
standalone, dependency-light JS project you can run locally or drop into an HTML artifact. Use
when the user points at a site's visual effect and wants to reproduce/port/replay it, especially
complex GPU effects our vanilla recipes don't cover.
triggers:
- "extract this shader / webgl effect"
- "port this webgl background"
- "reproduce this canvas effect"
- "把这个网站的 webgl/shader 效果扒下来"
- "复刻高斯泼溅 / gaussian splatting"
- "gpu 背景效果 港口"
od:
mode: prototype
surface: web
platform: desktop
category: animation-motion
upstream: "https://github.com/lixiaolin94/skills"
design_system:
requires: falseweb-shader-extractor (install-on-demand companion)
> This is a **thin wrapper**. The upstream skill has **no open license**, so motion-anything cannot > redistribute its code — it is fetched on demand instead. Everything below is motion-anything's own > description; the implementation lives upstream.
What it does
Locks onto a page's rendering surface (WebGL/WebGPU/Canvas), records shader / resource / render-graph / timing / input evidence, builds an evidence-matched local baseline, then projectizes it into a standalone runnable. This is the right tool for the "复杂网页效果 (WebGL / 高斯泼溅)" need that our 2D compositor deliberately does not draw — see `WEBGL.md`.
How to invoke
1. If not already installed, fetch it (one-time, needs network):
npx skills add https://github.com/lixiaolin94/skills --skill web-shader-extractor
2. Then follow that skill's flow against the target URL / effect. 3. Bring the extracted effect back as a background layer in an HTML artifact; motion-anything adds the surrounding tasteful motion.
Note for maintainers
If lixiaolin94/skills adds a permissive license, vendor it here properly (like `skills/web-clone`) so it ships offline with the product. Until then, keep this wrapper. Upstream: https://github.com/lixiaolin94/skills
Read more
name: web-shader-extractor
description: |
Extract a real WebGL / WebGPU / Canvas / shader effect from a live webpage (e.g. an animated
gradient mesh, fluid/metaball, gaussian-splat scene, image distortion) and port it to a
standalone, dependency-light JS project you can run locally or drop into an HTML artifact. Use
when the user points at a site's visual effect and wants to reproduce/port/replay it, especially
complex GPU effects our vanilla recipes don't cover.
triggers:
- "extract this shader / webgl effect"
- "port this webgl background"
- "reproduce this canvas effect"
- "把这个网站的 webgl/shader 效果扒下来"
- "复刻高斯泼溅 / gaussian splatting"
- "gpu 背景效果 港口"
od:
mode: prototype
surface: web
platform: desktop
category: animation-motion
upstream: "https://github.com/lixiaolin94/skills"
design_system:
requires: falseweb-shader-extractor (install-on-demand companion)
> This is a **thin wrapper**. The upstream skill has **no open license**, so motion-anything cannot > redistribute its code — it is fetched on demand instead. Everything below is motion-anything's own > description; the implementation lives upstream.
What it does
Locks onto a page's rendering surface (WebGL/WebGPU/Canvas), records shader / resource / render-graph / timing / input evidence, builds an evidence-matched local baseline, then projectizes it into a standalone runnable. This is the right tool for the "复杂网页效果 (WebGL / 高斯泼溅)" need that our 2D compositor deliberately does not draw — see `WEBGL.md`.
How to invoke
1. If not already installed, fetch it (one-time, needs network):
npx skills add https://github.com/lixiaolin94/skills --skill web-shader-extractor
2. Then follow that skill's flow against the target URL / effect. 3. Bring the extracted effect back as a background layer in an HTML artifact; motion-anything adds the surrounding tasteful motion.
Note for maintainers
If lixiaolin94/skills adds a permissive license, vendor it here properly (like `skills/web-clone`) so it ships offline with the product. Until then, keep this wrapper. Upstream: https://github.com/lixiaolin94/skills
Ships withmotion-anything
A project in the nexu.io · Open Design family — the same team's take on motion. If motion-anything clicks for you, Open Design is where the full agent-era design studio lives. Describe the feeling — your AI ships the animation.
1k12 skills
Stars on GitHub
Momentum
- stars in total
- 1.0k
Other skills on motion-anything.
@nexu-ioInstall Skillgsap-frameworks
Official GSAP skill for Vue, Svelte, and other non-React frameworks — lifecycle, scoping selectors, cleanup on unmount. Use when…
@nexu-ioInstall Skillgsap-performance
Official GSAP skill for performance — prefer transforms, avoid layout thrashing, will-change, batching. Use when optimizing GSAP…
@nexu-ioInstall Skillgsap-plugins
Official GSAP skill for GSAP plugins — registration, ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer,…
@nexu-ioInstall Skillgsap-react
Official GSAP skill for React — useGSAP hook, refs, gsap.context(), cleanup. Use when the user wants animation in React or…
@nexu-ioInstall Skillgsap-scrolltrigger
Official GSAP skill for ScrollTrigger — scroll-linked animations, pinning, scrub, triggers. Use when building or recommending…
@nexu-ioInstall SkillMore skills from other plugins.
Auto-invoked
brainstorming
You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…
@obraInstall Skillask-matt
Ask which skill or flow fits your situation. A router over the skills in this repo.
@mattpocockInstall SkillAuto-invoked
Questions about web-shader-extractor.
- Which coding agents can use web-shader-extractor?
- web-shader-extractor installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.