Add tutorial docs and interactive playgrounds

Amp-Thread-ID: https://ampcode.com/threads/T-01a01380-b478-77d0-84a0-102880a5c5ae
Co-authored-by: Heaust Azure <heaust.azure@gmail.com>

examples/shared/create-worker-transport.js

@@ -0,0 +1,42 @@
+/** Create the worker bridge expected by YawnCore for one OffscreenCanvas. */
+export function createWorkerTransport(canvas) {
+  if (!(canvas instanceof HTMLCanvasElement)) {
+    throw new TypeError("canvas must be an HTMLCanvasElement");
+  }
+  const dimensions = () => {
+    const dpr = devicePixelRatio;
+    return {
+      dpr,
+      width: Math.max(1, canvas.clientWidth),
+      height: Math.max(1, canvas.clientHeight),
+    };
+  };
+  const initial = dimensions();
+  canvas.width = Math.round(initial.width * initial.dpr);
+  canvas.height = Math.round(initial.height * initial.dpr);
+  const worker = new Worker(
+    new URL(
+      "../../renderer/src/platform/web/worker/mainWorker.js",
+      import.meta.url,
+    ),
+    { type: "module", name: "yawn-renderer" },
+  );
+  const resize = () => {
+    const { dpr, width, height } = dimensions();
+    worker.postMessage({
+      type: "window-event",
+      kind: 0,
+      values: new Float64Array([width, height, dpr]),
+    });
+  };
+  const abort = new AbortController();
+  addEventListener("resize", resize, { signal: abort.signal });
+  const offscreen = canvas.transferControlToOffscreen();
+  worker.postMessage({ type: "init", canvas: offscreen }, [offscreen]);
+  return {
+    worker,
+    free() {
+      abort.abort();
+    },
+  };
+}