worker-visualizer

name: worker-visualizerdescription: |  A real-time data/particle/simulation visualizer whose heavy compute runs in  a Web Worker (off the main thread), optionally sharing memory with the UI via  SharedArrayBuffer, and renders to a canvas at 60fps. Produced as a single  self-contained `index.html`. Use when the brief asks for a "web worker",  "simulation", "particle system", "physics", "off-main-thread", "fractal",  "real-time compute", or "audio/data visualizer". OpenDesign serves this in  powered-preview mode so Workers and SharedArrayBuffer actually work.triggers:   - "web worker"  - "worker"  - "simulation"  - "particle system"  - "physics sim"  - "fractal"  - "off main thread"  - "sharedarraybuffer"  - "real-time compute"  - "visualizer"  - "多线程"  - "粒子"od:   mode: prototype  platform: web  scenario: design  preview:     type: html    entry: index.html    reload: debounce-100  design_system:     requires: false    sections: [color, typography]  craft:     requires: [animation-discipline, state-coverage]

Worker Visualizer Skill

Produce a single self-contained index.html that moves heavy per-frame compute into a Web Worker and renders the result to a canvas, keeping the main thread at a smooth 60fps.

Why this is a powered artifact

OpenDesign detects new Worker( / SharedArrayBuffer / OffscreenCanvas and renders this file in powered preview — a cross-origin-isolated iframe with allow-same-origin. That means external and blob Web Workers construct successfully, SharedArrayBuffer is defined (crossOriginIsolated === true), and importScripts works. In the old opaque sandbox all three failed; here they just work.

Resource map

worker-visualizer/
├── SKILL.md      ← you're reading this
└── example.html  ← a working 12k-particle SharedArrayBuffer sim (READ FIRST)

Workflow

Step 0 — Read the reference

Read example.html. Note the split: the worker integrates positions each tick; the main thread only reads + draws. It feature-detects crossOriginIsolated and uses a SharedArrayBuffer for zero-copy when available, falling back to a transferable postMessage copy otherwise. Always ship that fallback so the artifact still animates if isolation is off.

Step 1 — Choose the workload

Pick ONE compute-bound job worth offloading:

• Particle / N-body field (default): thousands of bodies with a cheap force law.
• Fractal: Mandelbrot/Julia escape-time into an ImageData buffer.
• Cellular automata / reaction-diffusion: grid updated in the worker.
• Data/audio visualizer: transform a stream into bars/rings each frame.

Step 2 — Build index.html

• One file, zero external requests. Build the worker from a Blob + URL.createObjectURL (inline its source), or embed it as a data: URL.
• Prefer SharedArrayBuffer for large per-frame state: allocate on the main thread, pass the SharedArrayBuffer to the worker, and read the same Float32Array/Uint8ClampedArray view while drawing. Guard on typeof SharedArrayBuffer !== 'undefined' && crossOriginIsolated.
• Fallback path: if not isolated, postMessage a transferable ArrayBuffer each frame.
• Consider OffscreenCanvas + canvas.transferControlToOffscreen() to render inside the worker for the heaviest scenes.

Step 3 — Overlay + brand

• HUD with the title and 2–3 live stat tiles (particle count, transport mode, fps). Map accent color to the active DESIGN.md when present; otherwise a dark ground with one vivid accent.

Step 4 — Self-review (P0)

• Worker constructs with no SecurityError; sim runs.
• Main-thread render holds ~60fps under the full workload.
• SharedArrayBuffer path engages when crossOriginIsolated is true; postMessage fallback engages otherwise — verify BOTH branches degrade cleanly.
• No unbounded growth: velocities/positions stay stable over minutes.
• The "Transport" stat truthfully reports which path is live.