Web Effect Extractor

Use this plugin when the user gives a website URL and asks OpenDesign to recreate, remix, or learn from its visual effects. It is especially useful for hero backgrounds, WebGL scenes, Canvas animations, shader effects, cursor trails, scroll-driven motion, animated typography, and interaction patterns that are hard to understand from screenshots alone.

This workflow is inspired by the MIT-licensed web-shader-extractor skill from lixiaolin94/skills, adapted for OpenDesign's website recreation and editable artifact workflow.

Scope

The goal is to produce a faithful, editable OpenDesign artifact that preserves the reference site's visual effect and interaction logic while replacing private content, trademarks, tracking code, and nonessential app logic.

Extract only what is needed to understand and recreate the visual behavior:

• Layout structure, viewport behavior, breakpoints, and composition rhythm
• Color, typography, blend modes, gradients, texture, lighting, and post-processing
• Motion timing, easing, scroll triggers, pointer response, and idle animation loops
• Canvas, WebGL, Three.js, shader, particle, and framebuffer pipeline details
• Public static assets needed for visual parity, with provenance noted

Do not copy private product copy, hidden application state, user data, analytics, auth flows, or unrelated business logic.

Workflow

1. Prepare The Capture

Start from the supplied URL and define the exact effect to recreate. If the user is vague, inspect the first viewport first and infer the likely target effect.

Before extracting runtime details, prefer a browser context that can evaluate page scripts and inspect canvas/WebGL state. If Chrome DevTools MCP is available, use it for runtime interception. If it is not available, continue with the strongest available browser automation and clearly state that shader/runtime capture may be incomplete.

Record:

• URL and capture timestamp
• Viewport sizes to test, usually desktop and mobile
• Main effect target and fallback effect targets
• Framework clues from HTML, network requests, globals, and package signatures

2. Runtime Inspection

Capture runtime evidence before simplifying anything.

Inspect:

• DOM tree, computed styles, fonts, CSS variables, custom properties, and animation names
• Canvas elements, WebGL contexts, renderer attributes, supported extensions, and resolution scaling
• Global framework markers such as THREE, BABYLON, __NEXT_DATA__, __NUXT__, vite, GSAP, Lenis, Framer Motion, or custom scene globals
• Networked JS bundles, images, videos, fonts, LUTs, textures, HDRIs, and data files

When WebGL is present and tooling allows pre-page-load injection, intercept:

• gl.shaderSource() for vertex and fragment source
• gl.uniform*() calls for names and observed values
• gl.bindFramebuffer() to understand multipass render order
• gl.drawArrays() and gl.drawElements() to understand draw-call order
• texture and buffer setup when it affects the final look

When 2D Canvas is present, inspect the render loop, draw primitives, image sources, compositing operations, and device-pixel-ratio handling.

3. Extract The Visual Model

Turn the raw capture into a compact visual model:

• Scene graph or layer stack
• Asset list with source, dimensions, and role
• Shader/material list with uniforms and dependencies
• Motion map with trigger, duration, easing, repeat behavior, and responsive differences
• Interaction map for pointer, keyboard, scroll, resize, and reduced-motion handling
• Known uncertainties, such as minified bundle branches or runtime values that could not be observed

Prefer evidence over guesses. If an effect cannot be observed directly, mark it as an inference.

4. Rebuild In OpenDesign

Create a standalone web artifact that can be inspected and edited.

Choose the simplest implementation that preserves the effect:

• Static DOM/CSS for layout-only references
• CSS animation or WAAPI for simple motion
• GSAP for sequenced or scroll-linked motion
• Canvas 2D for 2D procedural effects
• Native WebGL2 for compact full-screen shader effects
• Three.js when the reference uses 3D, cameras, materials, textures, post-processing, or GPGPU patterns

Keep the rebuild self-contained unless a dependency materially reduces complexity. If dependencies are used, load them in a transparent, reviewable way.

Important reconstruction rules:

…