skills.rest
e2662020
e2662020COMMUNITY
Explore all skills by this author →
GitHub

web-shader-extractor

Extract WebGL, Canvas, and shader effects from websites into standalone JavaScript projects.

1|Updated May 1, 2026
Search Tags:#canvas#webgl#three.js#deobfuscation#shader#code porting#effect extraction
One-click install
npx skills add https://github.com/e2662020/QuickMovie --skill web-shader-extractor-e2662020
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-shader-extractor
Source: https://github.com/e2662020/QuickMovie/tree/main/skills/web-shader-extractor
Command: npx skills add https://github.com/e2662020/QuickMovie --skill web-shader-extractor-e2662020

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 live websites is extremely time-consuming, requiring deep expertise in graphics programming, shader languages, and minified code deobfuscation. This skill automates the entire end-to-end workflow of extracting WebGL, Canvas, and shader-based visual effects from any public website, eliminating the need for manual code analysis and reducing extraction time from days to minutes.

Core Features & Use Cases

  • Automated Source Extraction: Fetches both rendered DOM (via Playwright) and static source code (via curl) to capture all runtime assets including shader code, configuration parameters, and network requests.
  • Framework-Aware Workflows: Includes dedicated extraction paths for popular web graphics platforms including Three.js, Unicorn Studio, and shaders.com, with pre-built rules for handling their unique code structures and obfuscation patterns.
  • Deobfuscation & Porting: Automatically deobfuscates minified JavaScript bundles to recover readable shader logic, configuration values, and rendering pipelines, then ports the effect to a standalone, runnable JavaScript project with no unnecessary dependencies.
  • Use Case Example: If you want to replicate the animated gradient background effect from a design portfolio website, provide the site URL to the skill, and it will automatically extract the shader code, reverse-engineer the parameters, and generate a standalone HTML/JS project that replicates the effect exactly.

Quick Start

Provide the URL of the website with the visual effect you want to extract, and the skill will automatically pull all required source code, deobfuscate the shader logic, and generate a standalone portable project that replicates the original effect.

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?▼

To extract WebGL shader code from a live website, you need to fetch the rendered DOM and static source to capture runtime assets. This process pulls shader code, configuration parameters, and network requests automatically using Playwright.

Can I port a Three.js visual effect to a standalone JavaScript project?▼

Yes, you can port a Three.js visual effect to a standalone JavaScript project. Framework-aware workflows handle Three.js code structures, deobfuscate minified bundles, and generate a runnable project with no unnecessary dependencies.

What is the best way to deobfuscate minified shader logic from web graphics frameworks?▼

The best way to deobfuscate minified shader logic is through automated source extraction that analyzes both rendered DOM and static code. This recovers readable shader code, rendering pipelines, and configuration values without manual reverse-engineering.

Does this shader extraction approach work with Unicorn Studio and shaders.com?▼

Yes, this shader extraction approach works with Unicorn Studio and shaders.com. It includes dedicated extraction paths with pre-built rules for handling the unique code structures and obfuscation patterns of these specific web graphics platforms.

Do I need Playwright to replicate animated canvas background effects?▼

Yes, you need Playwright to replicate animated canvas background effects because it fetches the rendered DOM required to capture all runtime assets. This browser automation is essential for extracting the live shader behavior before porting it to a standalone project.

Why does manual reverse-engineering of web shader effects take so long?▼

Manual reverse-engineering of web shader effects takes long because it requires deep expertise in graphics programming and deobfuscating minified code. Automating the end-to-end workflow eliminates manual code analysis and reduces extraction time from days to minutes.

Related Skills

Explore More Software Engineering Skills→
chrismccoychrismccoy
2

page-cloner

Clones a live webpage into standalone HTML with preserved markup, styles, and assets.

Community
Advanced
AshesOfTheUndeadAshesOfTheUndead

web-shader-extractor

Extract WebGL, Canvas, and Shader effects from live websites for porting.

Community
Advanced
pacphipacphi
14

Chrome DevTools

Debug web pages via Chrome DevTools MCP with performance, network, and DOM inspection.

Community
Advanced
zeroix07zeroix07

web-shader-extractor

Extract WebGL, Canvas, and shader effects from live web pages.

Community
Advanced