web-shader-extractor

Extract WebGL and Canvas visual effects from websites into standalone JS projects.

Updated Apr 7, 2026
One-click install
npx skills add https://github.com/felipesantiago-coder/fluxo-quadra --skill web-shader-extractor-felipesantiago-coder
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-shader-extractor
Source: https://github.com/felipesantiago-coder/fluxo-quadra/tree/main/skills/web-shader-extractor
Command: npx skills add https://github.com/felipesantiago-coder/fluxo-quadra --skill web-shader-extractor-felipesantiago-coder

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, and includes scripts (resource) and references (resource) components.

What problem does it solve?

Manually reverse-engineering visual effects from websites is extremely time-consuming and requires deep expertise in WebGL, shader code, and web rendering pipelines. This skill eliminates that manual work by automating the entire extraction and porting process.

Core Features & Use Cases

  • Automated Effect Extraction: Pulls WebGL, Canvas, and shader-based visual effects from any provided website URL, including minified and obfuscated code.
  • Deobfuscation & Porting: Automatically deobfuscates shader and JS bundle code, then ports the effect to a standalone native JS project with no unnecessary dependencies.
  • Use Case: If you want to replicate the animated background effect from a popular design portfolio site, this skill can extract the underlying shader code, fix any obfuscation, and generate a working standalone project you can customize for your own use.

Quick Start

Provide the URL of the website with the visual effect you want to extract, and the skill will automatically pull, deobfuscate, and port the effect to a standalone JS project for you.

Frequently Asked Questions about web-shader-extractor

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I extract WebGL shader code from a live website?

You extract WebGL shader code from a live website by providing its URL to an automated extraction process. This process coordinates Playwright page rendering to pull shader-based visual effects directly from minified and obfuscated bundles.

Can I port an obfuscated Canvas visual effect to a standalone JS project?

Yes, you can port an obfuscated Canvas visual effect to a standalone JS project. The process automatically deobfuscates shader and JS bundle code, then generates a portable project with correct rendering pipelines and no unnecessary dependencies.

Does this shader extraction approach work with minified WebGL bundles?

Yes, shader extraction works with minified WebGL bundles. The process applies deobfuscation techniques to the extracted code, allowing you to replicate, modify, or study third-party web visual effects without needing access to the original source code.

What is the best way to reverse-engineer web visual effects without source code?

The best way to reverse-engineer web visual effects without source code is using an automated extraction and porting process. It eliminates manual reverse-engineering by pulling WebGL and Canvas shaders, deobfuscating the code, and generating a standalone native JS project.

Do I need Playwright to extract and port shader effects from websites?

Yes, Playwright is required to extract and port shader effects from websites. The process coordinates Playwright page rendering to accurately capture WebGL and Canvas visual effects from the live target URL before applying deobfuscation.

What are the limitations of automated shader code deobfuscation?

Automated shader code deobfuscation focuses on generating portable projects with correct rendering pipelines, but heavily obfuscated bundles may require manual modification. The process targets WebGL, Canvas, and shader-based effects, generating native JS without unnecessary dependencies.