API ArcadeISSUE #15 of 23

worklets · paint · audio · animation

ApiaVSLegacy Larry

Apia saysWorklets are lightweight modules that extend rendering — paint, audio, and animation.

Worklets run small, focused code in the browser's rendering pipeline. The Paint Worklet (CSS Houdini) draws custom CSS backgrounds; the Audio Worklet processes audio in real time on the audio thread; the Animation Worklet drives off-main-thread animations. You register them with CSS.paintWorklet.addModule / audioContext.audioWorklet.addModule. Advanced and progressively supported.

Power-ups you unlock

Tiny modules in the rendering pipeline
Paint (CSS), Audio, and Animation worklets
Run off the main thread for smoothness
Advanced — progressive enhancement

Legacy Larry attacks — common mistakes

Reaching for worklets before simpler tools
Assuming broad support
Heavy logic in a paint worklet

Boss battleRecognize the three worklet types and what each one extends.

Example code

<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-family:monospace;padding:20px"><pre>// paint worklet (CSS Houdini)
await CSS.paintWorklet.addModule('paint.js');
// audio worklet (real-time audio thread)
await ctx.audioWorklet.addModule('processor.js');</pre></body></html>

▶ Open the interactive comic issue

‹ Shared Workers · Cross-Tab Compute Crypto Api · RandomUUID · Subtle.Digest ›