@viji-dev/core 0.3.24 → 0.3.26

package/dist/docs-api.js

@@ -1,7 +1,7 @@
 export const docsApi = {
   "version": "1.0.0",
-  "coreVersion": "0.3.23",
-  "generatedAt": "2026-03-25T18:17:02.150Z",
+  "coreVersion": "0.3.26",
+  "generatedAt": "2026-03-30T19:41:22.735Z",
   "navigation": [
     {
       "id": "getting-started",
@@ -178,9 +178,9 @@ export const docsApi = {
               "path": "native/audio"
             },
             {
-              "id": "native-audio-is-connected",
-              "title": "isConnected",
-              "path": "native/audio/is-connected"
+              "id": "native-audio-connection",
+              "title": "Connection & Lifecycle",
+              "path": "native/audio/connection"
             },
             {
               "id": "native-audio-volume",
@@ -224,9 +224,9 @@ export const docsApi = {
               "path": "native/video"
             },
             {
-              "id": "native-video-is-connected",
-              "title": "isConnected",
-              "path": "native/video/is-connected"
+              "id": "native-video-connection",
+              "title": "Connection & Lifecycle",
+              "path": "native/video/connection"
             },
             {
               "id": "native-video-basics",
@@ -266,34 +266,56 @@ export const docsApi = {
           ]
         },
         {
-          "id": "native-pointer",
-          "title": "Pointer (Unified)",
-          "path": "native/pointer"
-        },
-        {
-          "id": "native-mouse",
-          "title": "Mouse",
-          "path": "native/mouse"
-        },
-        {
-          "id": "native-keyboard",
-          "title": "Keyboard",
-          "path": "native/keyboard"
-        },
-        {
-          "id": "native-touch",
-          "title": "Touch",
-          "path": "native/touch"
-        },
-        {
-          "id": "native-sensors",
-          "title": "Device Sensors",
-          "path": "native/sensors"
+          "id": "native-input",
+          "title": "Input",
+          "children": [
+            {
+              "id": "native-pointer",
+              "title": "Pointer (Unified)",
+              "path": "native/pointer"
+            },
+            {
+              "id": "native-mouse",
+              "title": "Mouse",
+              "path": "native/mouse"
+            },
+            {
+              "id": "native-keyboard",
+              "title": "Keyboard",
+              "path": "native/keyboard"
+            },
+            {
+              "id": "native-touch",
+              "title": "Touch",
+              "path": "native/touch"
+            },
+            {
+              "id": "native-sensors",
+              "title": "Device Sensors",
+              "path": "native/sensors"
+            }
+          ]
         },
         {
           "id": "native-external-devices",
           "title": "External Devices",
-          "path": "native/external-devices"
+          "children": [
+            {
+              "id": "native-ext-overview",
+              "title": "Overview",
+              "path": "native/external-devices"
+            },
+            {
+              "id": "native-ext-video",
+              "title": "Device Video",
+              "path": "native/external-devices/video"
+            },
+            {
+              "id": "native-ext-sensors",
+              "title": "Device Sensors",
+              "path": "native/external-devices/sensors"
+            }
+          ]
         }
       ]
     },
@@ -408,9 +430,9 @@ export const docsApi = {
               "path": "p5/audio"
             },
             {
-              "id": "p5-audio-is-connected",
-              "title": "isConnected",
-              "path": "p5/audio/is-connected"
+              "id": "p5-audio-connection",
+              "title": "Connection & Lifecycle",
+              "path": "p5/audio/connection"
             },
             {
               "id": "p5-audio-volume",
@@ -454,9 +476,9 @@ export const docsApi = {
               "path": "p5/video"
             },
             {
-              "id": "p5-video-is-connected",
-              "title": "isConnected",
-              "path": "p5/video/is-connected"
+              "id": "p5-video-connection",
+              "title": "Connection & Lifecycle",
+              "path": "p5/video/connection"
             },
             {
               "id": "p5-video-basics",
@@ -496,34 +518,56 @@ export const docsApi = {
           ]
         },
         {
-          "id": "p5-pointer",
-          "title": "Pointer (Unified)",
-          "path": "p5/pointer"
-        },
-        {
-          "id": "p5-mouse",
-          "title": "Mouse",
-          "path": "p5/mouse"
-        },
-        {
-          "id": "p5-keyboard",
-          "title": "Keyboard",
-          "path": "p5/keyboard"
-        },
-        {
-          "id": "p5-touch",
-          "title": "Touch",
-          "path": "p5/touch"
-        },
-        {
-          "id": "p5-sensors",
-          "title": "Device Sensors",
-          "path": "p5/sensors"
+          "id": "p5-input",
+          "title": "Input",
+          "children": [
+            {
+              "id": "p5-pointer",
+              "title": "Pointer (Unified)",
+              "path": "p5/pointer"
+            },
+            {
+              "id": "p5-mouse",
+              "title": "Mouse",
+              "path": "p5/mouse"
+            },
+            {
+              "id": "p5-keyboard",
+              "title": "Keyboard",
+              "path": "p5/keyboard"
+            },
+            {
+              "id": "p5-touch",
+              "title": "Touch",
+              "path": "p5/touch"
+            },
+            {
+              "id": "p5-sensors",
+              "title": "Device Sensors",
+              "path": "p5/sensors"
+            }
+          ]
         },
         {
           "id": "p5-external-devices",
           "title": "External Devices",
-          "path": "p5/external-devices"
+          "children": [
+            {
+              "id": "p5-ext-overview",
+              "title": "Overview",
+              "path": "p5/external-devices"
+            },
+            {
+              "id": "p5-ext-video",
+              "title": "Device Video",
+              "path": "p5/external-devices/video"
+            },
+            {
+              "id": "p5-ext-sensors",
+              "title": "Device Sensors",
+              "path": "p5/external-devices/sensors"
+            }
+          ]
         }
       ]
     },
@@ -706,34 +750,56 @@ export const docsApi = {
           ]
         },
         {
-          "id": "shader-pointer",
-          "title": "Pointer Uniforms",
-          "path": "shader/pointer"
-        },
-        {
-          "id": "shader-mouse",
-          "title": "Mouse Uniforms",
-          "path": "shader/mouse"
-        },
-        {
-          "id": "shader-keyboard",
-          "title": "Keyboard Uniforms",
-          "path": "shader/keyboard"
-        },
-        {
-          "id": "shader-touch",
-          "title": "Touch Uniforms",
-          "path": "shader/touch"
-        },
-        {
-          "id": "shader-sensors",
-          "title": "Sensor Uniforms",
-          "path": "shader/sensors"
+          "id": "shader-input",
+          "title": "Input Uniforms",
+          "children": [
+            {
+              "id": "shader-pointer",
+              "title": "Pointer",
+              "path": "shader/pointer"
+            },
+            {
+              "id": "shader-mouse",
+              "title": "Mouse",
+              "path": "shader/mouse"
+            },
+            {
+              "id": "shader-keyboard",
+              "title": "Keyboard",
+              "path": "shader/keyboard"
+            },
+            {
+              "id": "shader-touch",
+              "title": "Touch",
+              "path": "shader/touch"
+            },
+            {
+              "id": "shader-sensors",
+              "title": "Sensor Uniforms",
+              "path": "shader/sensors"
+            }
+          ]
         },
         {
           "id": "shader-external-devices",
           "title": "External Device Uniforms",
-          "path": "shader/external-devices"
+          "children": [
+            {
+              "id": "shader-ext-overview",
+              "title": "Overview",
+              "path": "shader/external-devices"
+            },
+            {
+              "id": "shader-ext-video",
+              "title": "Video Textures",
+              "path": "shader/external-devices/video"
+            },
+            {
+              "id": "shader-ext-sensors",
+              "title": "Sensor Uniforms",
+              "path": "shader/external-devices/sensors"
+            }
+          ]
         },
         {
           "id": "shader-backbuffer",
@@ -746,35 +812,6 @@ export const docsApi = {
           "path": "shader/shadertoy"
         }
       ]
-    },
-    {
-      "id": "advanced",
-      "title": "Advanced",
-      "icon": "settings",
-      "pages": [
-        {
-          "id": "advanced-multi-stream",
-          "title": "Multi-Stream",
-          "path": "advanced/multi-stream"
-        },
-        {
-          "id": "advanced-performance",
-          "title": "Performance",
-          "path": "advanced/performance"
-        }
-      ]
-    },
-    {
-      "id": "platform-features",
-      "title": "Platform Features",
-      "icon": "layers",
-      "pages": [
-        {
-          "id": "platform-compositor",
-          "title": "Compositor",
-          "path": "platform/compositor"
-        }
-      ]
     }
   ],
   "pages": {
@@ -795,7 +832,7 @@ export const docsApi = {
         },
         {
           "type": "text",
-          "markdown": "A few things to notice:\n\n- **[`viji.slider()`](/native/parameters/slider)** creates a UI slider the user can adjust — defined once at the top level, read via `.value` inside `render()`.\n- **[`viji.deltaTime`](/native/timing)** is the time since the last frame in seconds — use it with an accumulator (`angle +=`) for smooth, frame-rate-independent animation that doesn't jump when you change parameters.\n- **[`viji.width`](/native/canvas-context) / [`viji.height`](/native/canvas-context)** keep your scene resolution-agnostic.\n- **`render(viji)`** is called every frame. This is where you draw.\n\n## What You Can Access\n\nEverything is available through the `viji` object:\n\n| Category | What It Gives You |\n|----------|------------------|\n| **Canvas** | [`viji.canvas`](/native/canvas-context), [`viji.width`](/native/canvas-context), [`viji.height`](/native/canvas-context) |\n| **Timing** | [`viji.time`](/native/timing), [`viji.deltaTime`](/native/timing), [`viji.frameCount`](/native/timing), [`viji.fps`](/native/timing) |\n| **Parameters** | [`viji.slider()`](/native/parameters/slider), [`viji.color()`](/native/parameters/color), [`viji.toggle()`](/native/parameters/toggle), [`viji.select()`](/native/parameters/select), [`viji.number()`](/native/parameters/number), [`viji.text()`](/native/parameters/text), [`viji.image()`](/native/parameters/image), [`viji.button()`](/native/parameters/button) |\n| **Audio** | Volume, frequency bands, beat detection, spectral analysis, FFT & waveform data |\n| **Video & CV** | Video frames, face detection, face mesh, emotion detection, hand tracking, pose detection, body segmentation |\n| **Interaction** | Unified pointer, mouse buttons & wheel, keyboard state, multi-touch with pressure & velocity |\n| **Sensors** | Accelerometer, gyroscope, device orientation |\n\n## Three Ways to Create\n\nViji supports three rendering modes:\n\n| Renderer | Best For | Entry Point |\n|----------|----------|-------------|\n| **Native** | Full control — Canvas 2D, WebGL, Three.js | `render(viji)` |\n| **P5.js** | Artists familiar with Processing / P5.js | `render(viji, p5)` |\n| **Shader** | GPU effects, raymarching, generative patterns | `void main()` in GLSL |\n\nAll three share the same audio, video, parameter, and interaction APIs. See [Renderers Overview](../renderers-overview/) for how each works.\n\n## Next Steps\n\n- [Renderers Overview](../renderers-overview/) — how to choose and use each renderer\n- [Best Practices](../best-practices/) — essential patterns for robust, performant scenes\n- [Common Mistakes](../common-mistakes/) — pitfalls to avoid\n- [Native Quick Start](/native/quickstart) — build with JavaScript and full canvas control\n- [P5 Quick Start](/p5/quickstart) — build with the familiar P5.js API\n- [Shader Quick Start](/shader/quickstart) — build with GLSL fragment shaders"
+          "markdown": "A few things to notice:\n\n- **[`viji.slider()`](/native/parameters/slider)** creates a UI slider the user can adjust — defined once at the top level, read via `.value` inside `render()`.\n- **[`viji.deltaTime`](/native/timing)** is the time since the last frame in seconds — use it with an accumulator (`angle +=`) for smooth, frame-rate-independent animation that doesn't jump when you change parameters.\n- **[`viji.width`](/native/canvas-context) / [`viji.height`](/native/canvas-context)** keep your scene resolution-agnostic.\n- **`render(viji)`** is called every frame. This is where you draw.\n\n## What You Can Access\n\nEverything is available through the `viji` object:\n\n| Category | What It Gives You |\n|----------|------------------|\n| **Canvas** | [`viji.canvas`](/native/canvas-context), [`viji.width`](/native/canvas-context), [`viji.height`](/native/canvas-context) |\n| **Timing** | [`viji.time`](/native/timing), [`viji.deltaTime`](/native/timing), [`viji.frameCount`](/native/timing), [`viji.fps`](/native/timing) |\n| **Parameters** | [`viji.slider()`](/native/parameters/slider), [`viji.color()`](/native/parameters/color), [`viji.toggle()`](/native/parameters/toggle), [`viji.select()`](/native/parameters/select), [`viji.number()`](/native/parameters/number), [`viji.text()`](/native/parameters/text), [`viji.image()`](/native/parameters/image), [`viji.button()`](/native/parameters/button) |\n| **Audio** | [Volume, frequency bands, beat detection, spectral analysis, FFT & waveform data](/native/audio) |\n| **Video & CV** | [Video frames, face detection, hand tracking, pose estimation, body segmentation](/native/video) |\n| **Interaction** | Unified pointer, mouse buttons & wheel, keyboard state, multi-touch with pressure & velocity |\n| **Sensors** | Accelerometer, gyroscope, device orientation |\n\n## Three Ways to Create\n\nViji supports three rendering modes:\n\n| Renderer | Best For | Entry Point |\n|----------|----------|-------------|\n| **Native** | Full control — Canvas 2D, WebGL, Three.js | `render(viji)` |\n| **P5.js** | Artists familiar with Processing / P5.js | `render(viji, p5)` |\n| **Shader** | GPU effects, raymarching, generative patterns | `void main()` in GLSL |\n\nAll three share the same audio, video, parameter, and interaction APIs. See [Renderers Overview](../renderers-overview/) for how each works.\n\n## Next Steps\n\n- [Renderers Overview](../renderers-overview/) — how to choose and use each renderer\n- [Best Practices](../best-practices/) — essential patterns for robust, performant scenes\n- [Common Mistakes](../common-mistakes/) — pitfalls to avoid\n- [Native Quick Start](/native/quickstart) — build with JavaScript and full canvas control\n- [P5 Quick Start](/p5/quickstart) — build with the familiar P5.js API\n- [Shader Quick Start](/shader/quickstart) — build with GLSL fragment shaders"
         }
       ]
     },
@@ -816,7 +853,7 @@ export const docsApi = {
         },
         {
           "type": "text",
-          "markdown": "**Key characteristics:**\n\n- **No setup function.** All initialization happens at the top level of your scene code. Top-level `await` is supported, which enables dynamic imports.\n- **Full canvas control.** Call [`viji.useContext('2d')`](/native/canvas-context) for Canvas 2D, [`viji.useContext('webgl')`](/native/canvas-context) for WebGL 1, or [`viji.useContext('webgl2')`](/native/canvas-context) for WebGL 2. Choose one and use it consistently — switching context types discards the previous one.\n- **External libraries** can be loaded via dynamic import from a CDN. Here's a full Three.js scene running inside the native renderer:"
+          "markdown": "**Key characteristics:**\n\n- **No setup function.** All initialization happens at the top level of your scene code. Top-level `await` is supported, which enables dynamic imports.\n- **Full canvas control.** Call [`viji.useContext('2d')`](/native/canvas-context) for Canvas 2D, [`viji.useContext('webgl')`](/native/canvas-context) for WebGL 1, or [`viji.useContext('webgl2')`](/native/canvas-context) for WebGL 2. Choose one and use it for the entire scene — a canvas only supports one context type, and requesting a different type returns `null`.\n- **External libraries** can be loaded via dynamic import from a CDN. Here's a full Three.js scene running inside the native renderer:"
         },
         {
           "type": "live-example",
@@ -846,7 +883,7 @@ export const docsApi = {
         },
         {
           "type": "text",
-          "markdown": "> [!NOTE]\n> The Viji shader renderer automatically injects `precision mediump float;` and all `uniform` declarations. Write only your helper functions and `void main() { ... }`. Do NOT redeclare `precision` or built-in uniforms — they will conflict.\n\n**Key characteristics:**\n\n- **Fragment shader only.** Viji renders a fullscreen quad; your shader defines the color of every pixel.\n- **GLSL ES 1.00 by default.** If you add `#version 300 es` as the first line, Viji switches to WebGL 2. Note that ES 3.00 requires `out vec4` for output instead of `gl_FragColor`, and `texture()` instead of `texture2D()`. ES 1.00 is recommended for maximum compatibility.\n- **Built-in uniforms** like `u_time`, `u_resolution`, `u_mouse`, `u_audioVolume`, `u_video`, and many more are always available — no declaration needed.\n- **Parameters via comments.** Declare parameters with `// @viji-TYPE:uniformName key:value` syntax. They become uniforms automatically.\n- **Accumulators for smooth animation.** Use `// @viji-accumulator:phase rate:speed` instead of `u_time * speed` — the value grows smoothly without jumping when the rate parameter changes.\n- **No `u_` prefix for your parameters.** The `u_` prefix is reserved for Viji's built-in uniforms. Name your parameters descriptively: `speed`, `colorMix`, `intensity`.\n\nIf you have existing Shadertoy shaders, see [Shadertoy Compatibility](/shader/shadertoy) for a compatibility layer that lets you paste code with minimal changes.\n\n---\n\n## Comparison\n\n| | Native | P5.js | Shader |\n|---|--------|-------|--------|\n| **Language** | JavaScript / TypeScript | JavaScript with P5 API | GLSL ES 1.00 (or 3.00 with `#version 300 es`) |\n| **Directive** | None (default) | `// @renderer p5` | `// @renderer shader` |\n| **Entry point** | `render(viji)` | `render(viji, p5)` | `void main()` |\n| **Setup** | Top-level code + `await` | Optional `setup(viji, p5)` | N/A |\n| **Canvas access** | [`viji.useContext('2d'/'webgl'/'webgl2')`](/native/canvas-context) | P5 drawing functions | Automatic fullscreen quad |\n| **External libraries** | Yes (`await import(...)`) | P5.js only | No |\n| **Best for** | Full control, WebGL, Three.js | Familiar P5 workflows | GPU effects, raymarching |\n| **Parameters** | [`viji.slider()`](/native/parameters/slider), etc. | [`viji.slider()`](/native/parameters/slider), etc. | `// @viji-slider:name ...` |\n\n## Next Steps\n\n- [Native Quick Start](/native/quickstart) — build your first native scene\n- [P5 Quick Start](/p5/quickstart) — build your first P5.js scene\n- [Shader Quick Start](/shader/quickstart) — build your first shader\n- [Best Practices](../best-practices/) — essential patterns all artists should follow"
+          "markdown": "> [!NOTE]\n> The Viji shader renderer automatically injects `precision mediump float;` and all `uniform` declarations — both built-in uniforms (`u_resolution`, `u_time`, etc.) and parameter uniforms from `@viji-*` directives. Write only your helper functions and `void main() { ... }`. Do NOT redeclare `precision` or any uniforms — they will conflict.\n\n**Key characteristics:**\n\n- **Fragment shader only.** Viji renders a fullscreen quad; your shader defines the color of every pixel.\n- **GLSL ES 1.00 by default.** If you add `#version 300 es` as the first line, Viji switches to WebGL 2. Note that ES 3.00 requires `out vec4` for output instead of `gl_FragColor`, and `texture()` instead of `texture2D()`. ES 1.00 is recommended for maximum compatibility.\n- **Built-in uniforms** like `u_time`, `u_resolution`, `u_mouse`, `u_audioVolume`, `u_video`, and many more are always available — no declaration needed.\n- **Parameters via comments.** Declare parameters with `// @viji-TYPE:uniformName key:value` syntax. They become uniforms automatically.\n- **Accumulators for smooth animation.** Use `// @viji-accumulator:phase rate:speed` instead of `u_time * speed` — the value grows smoothly without jumping when the rate parameter changes.\n- **No `u_` prefix for your parameters.** The `u_` prefix is reserved for Viji's built-in uniforms. Name your parameters descriptively: `speed`, `colorMix`, `intensity`.\n\nIf you have existing Shadertoy shaders, see [Shadertoy Compatibility](/shader/shadertoy) for a compatibility layer that lets you paste code with minimal changes.\n\n---\n\n## Comparison\n\n| | Native | P5.js | Shader |\n|---|--------|-------|--------|\n| **Language** | JavaScript / TypeScript | JavaScript with P5 API | GLSL ES 1.00 (or 3.00 with `#version 300 es`) |\n| **Directive** | None (default) | `// @renderer p5` | `// @renderer shader` |\n| **Entry point** | `render(viji)` | `render(viji, p5)` | `void main()` |\n| **Setup** | Top-level code + `await` | Optional `setup(viji, p5)` | N/A |\n| **Canvas access** | [`viji.useContext('2d'/'webgl'/'webgl2')`](/native/canvas-context) | P5 drawing functions | Automatic fullscreen quad |\n| **External libraries** | Yes (`await import(...)`) | P5.js only | No |\n| **Best for** | Full control, WebGL, Three.js | Familiar P5 workflows | GPU effects, raymarching |\n| **Parameters** | [`viji.slider()`](/native/parameters/slider), etc. | [`viji.slider()`](/native/parameters/slider), etc. | `// @viji-slider:name ...` |\n\n## Next Steps\n\n- [Native Quick Start](/native/quickstart) — build your first native scene\n- [P5 Quick Start](/p5/quickstart) — build your first P5.js scene\n- [Shader Quick Start](/shader/quickstart) — build your first shader\n- [Best Practices](../best-practices/) — essential patterns all artists should follow"
         }
       ]
     },
@@ -857,7 +894,7 @@ export const docsApi = {
       "content": [
         {
           "type": "text",
-          "markdown": "# Best Practices\n\nThese practices apply to all three renderers (Native, P5, Shader). Following them ensures your scenes look correct at any resolution, run smoothly at any frame rate, and work reliably across devices.\n\n---\n\n## Use `viji.time` and `viji.deltaTime` for Animation\n\nViji provides two timing values. Use the right one for the job:\n\n- **[`viji.time`](/native/timing)** — seconds since the scene started. Use this for most animations (oscillations, rotations, color cycling). This is the most common choice.\n- **[`viji.deltaTime`](/native/timing)** — seconds since the last frame. Use this when you need to accumulate values smoothly regardless of frame rate (movement, physics, fading).\n\n```javascript\n// viji.time — animation that looks identical regardless of frame rate\nconst angle = viji.time * speed.value;\nconst x = Math.cos(angle) * radius;\n\n// viji.deltaTime — accumulation that stays smooth at any FPS\nposition += velocity * viji.deltaTime;\nopacity -= fadeRate * viji.deltaTime;\n```\n\nFor shaders, the equivalents are `u_time` and `u_deltaTime`. When animation speed is driven by a parameter, use an **accumulator** to avoid jumps:\n\n```glsl\n// Instead of: float wave = sin(u_time * speed);  ← jumps when slider moves\n// @viji-accumulator:phase rate:speed\nfloat wave = sin(phase + uv.x * 10.0);            // smooth at any slider value\n```\n\n> [!NOTE]\n> Always use [`viji.time`](/native/timing) or [`viji.deltaTime`](/native/timing) for animation. Never count frames or assume a specific frame rate — the host application may run your scene at different rates (`full` or `half` mode) or the actual FPS may vary by device.\n\n---\n\n## Design for Any Resolution\n\nThe host application controls your scene's resolution. It may change at any time (window resize, resolution scaling for performance, high-DPI displays). Never hardcode pixel values.\n\n**Use [`viji.width`](/native/canvas-context) and [`viji.height`](/native/canvas-context)** for all positioning and sizing:\n\n```javascript\n// Good — scales to any resolution\nconst centerX = viji.width / 2;\nconst centerY = viji.height / 2;\nconst radius = Math.min(viji.width, viji.height) * 0.1;\n\n// Bad — breaks at different resolutions\nconst centerX = 960;\nconst centerY = 540;\nconst radius = 50;\n```\n\nFor parameters that control sizes, use normalized values (0–1) and multiply by canvas dimensions:\n\n```javascript\nconst size = viji.slider(0.15, { min: 0.02, max: 0.5, label: 'Size' });\n\nfunction render(viji) {\n  const pixelSize = size.value * Math.min(viji.width, viji.height);\n}\n```\n\nFor shaders, use `u_resolution`:\n\n```glsl\nvec2 uv = gl_FragCoord.xy / u_resolution;  // normalized 0–1 coordinates\n```\n\n> [!NOTE]\n> Always use [`viji.width`](/native/canvas-context) and [`viji.height`](/native/canvas-context) for positioning and sizing, and [`viji.deltaTime`](/native/timing) for frame-rate-independent animation. Never hardcode pixel values or assume a specific frame rate.\n\n---\n\n## Declare Parameters at the Top Level\n\nParameter functions ([`viji.slider()`](/native/parameters/slider), [`viji.color()`](/native/parameters/color), etc.) register controls with the host application. They must be called **once**, at the top level of your scene code — never inside `render()`.\n\n```javascript\n// Correct — declared once at top level\nconst speed = viji.slider(1, { min: 0.1, max: 5, label: 'Speed' });\nconst bgColor = viji.color('#1a1a2e', { label: 'Background' });\n\nfunction render(viji) {\n  // Read current values inside render\n  const s = speed.value;\n  const bg = bgColor.value;\n}\n```\n\n> [!NOTE]\n> Parameters must be defined at the top level of your scene, not inside `render()`. They are registered once during initialization. Defining them inside `render()` would re-register the parameter every frame, resetting its value to the default and making user changes ineffective.\n\n---\n\n## Avoid Allocations in the Render Loop\n\nCreating objects, arrays, or strings inside `render()` triggers garbage collection, causing frame drops and stuttering. Pre-allocate at the top level and reuse.\n\n> [!TIP]\n> Avoid allocating objects, arrays, or strings inside `render()`. Pre-allocate at the top level and reuse them:\n> ```javascript\n> // Good — pre-allocated\n> const pos = { x: 0, y: 0 };\n> function render(viji) {\n>   pos.x = viji.width / 2;\n>   pos.y = viji.height / 2;\n> }\n>\n> // Bad — creates a new object every frame\n> function render(viji) {\n>   const pos = { x: viji.width / 2, y: viji.height / 2 };\n> }\n> ```\n\nThis is especially important for particle systems, arrays of positions, or any data structure that persists across frames.\n\n---\n\n## No DOM APIs (but `fetch` Is Fine)\n\nYour scene runs in a Web Worker. Standard DOM APIs are not available:\n\n- No `window`, `document`, `Image()`, `localStorage`\n- No `createElement`, `querySelector`, `addEventListener`\n\nHowever, **`fetch()` works** and can be used to load JSON, text, or other data from external URLs:\n\n```javascript\n// This works — fetch is available in workers\nconst response = await fetch('https://cdn.example.com/data.json');\nconst data = await response.json();\n```\n\nFor images, use Viji's [`viji.image()`](/native/parameters/image) parameter — the host application handles file selection and transfers the image to the worker.\n\n> [!WARNING]\n> Scenes run in a Web Worker — there is no `window`, `document`, `Image()`, `localStorage`, or any DOM API. All inputs (audio, video, images) are provided through the Viji API. Note: `fetch()` IS available and can be used to load external data (JSON, etc.) from CDNs.\n\n---\n\n## Guard Audio and Video with `isConnected`\n\nAudio and video streams are provided by the host and may not always be available. Always check `isConnected` before using audio or video data:\n\n```javascript\nfunction render(viji) {\n  if (viji.audio.isConnected) {\n    const bass = viji.audio.bands.low;\n    // ... use audio data\n  }\n\n  if (viji.video.isConnected && viji.video.currentFrame) {\n    ctx.drawImage(viji.video.currentFrame, 0, 0, viji.width, viji.height);\n  }\n}\n```\n\nWithout this guard, your scene would reference undefined or zero values when no audio/video source is connected.\n\n---\n\n## Be Mindful of Computer Vision Costs\n\nCV features (face detection, hand tracking, pose detection, etc.) are powerful but expensive. Each feature runs ML inference in its own WebGL context.\n\n| Feature | Relative Cost | Notes |\n|---------|--------------|-------|\n| Face Detection | Low | Bounding box + basic landmarks only |\n| Face Mesh | Medium-High | 468 facial landmarks |\n| Emotion Detection | High | 7 expressions + 52 blendshape coefficients |\n| Hand Tracking | Medium | Up to 2 hands, 21 landmarks each |\n| Pose Detection | Medium | 33 body landmarks |\n| Body Segmentation | High | Per-pixel mask, large tensor output |\n\n> [!WARNING]\n> **WebGL Context Limits:** Each CV feature requires its own WebGL context for ML inference. Browsers typically allow 8-16 active WebGL contexts. Enabling too many CV features simultaneously can cause context eviction, potentially breaking the scene's own rendering. Use only the CV features you need.\n\n**Don't enable CV features by default.** Instead, expose a toggle parameter so users can activate them on capable devices:\n\n> [!TIP]\n> **Best practice:** Don't enable CV features by default. Instead, expose a toggle parameter so users can activate them on capable devices:\n> ```javascript\n> const useFace = viji.toggle(false, { label: 'Enable Face Detection', category: 'video' });\n> if (useFace.value) {\n>   await viji.video.cv.enableFaceDetection(true);\n> }\n> ```\n\n---\n\n## Pick One Canvas Context Type\n\nThe native renderer lets you choose between 2D and WebGL contexts via [`viji.useContext()`](/native/canvas-context). Options are `'2d'`, `'webgl'` (WebGL 1), and `'webgl2'` (WebGL 2). Pick one and stick with it.\n\n> [!WARNING]\n> Calling [`useContext('2d')`](/native/canvas-context) and [`useContext('webgl')`](/native/canvas-context)/[`useContext('webgl2')`](/native/canvas-context) on the same canvas is mutually exclusive. Once a context type is obtained, switching to the other discards the previous one. Choose one context type and use it consistently.\n\n---\n\n## Related\n\n- [Common Mistakes](../common-mistakes/) — specific wrong/right code examples\n- [Performance](/advanced/performance) — deep dive into optimization\n- [Renderers Overview](../renderers-overview/) — choosing the right renderer"
+          "markdown": "# Best Practices\n\nThese practices apply to all three renderers (Native, P5, Shader). Following them ensures your scenes look correct at any resolution, run smoothly at any frame rate, and work reliably across devices.\n\n---\n\n## Use `viji.time` and `viji.deltaTime` for Animation\n\nViji provides two timing values. Use the right one for the job:\n\n- **[`viji.time`](/native/timing)** — seconds since the scene started. Use this for most animations (oscillations, rotations, color cycling). This is the most common choice.\n- **[`viji.deltaTime`](/native/timing)** — seconds since the last frame. Use this when you need to accumulate values smoothly regardless of frame rate (movement, physics, fading).\n\n```javascript\n// viji.time — animation that looks identical regardless of frame rate\nconst angle = viji.time * speed.value;\nconst x = Math.cos(angle) * radius;\n\n// viji.deltaTime — accumulation that stays smooth at any FPS\nposition += velocity * viji.deltaTime;\nopacity -= fadeRate * viji.deltaTime;\n```\n\nFor shaders, the equivalents are `u_time` and `u_deltaTime`. When animation speed is driven by a parameter, use an [**accumulator**](/shader/parameters/accumulator) to avoid jumps:\n\n```glsl\n// Instead of: float wave = sin(u_time * speed);  ← jumps when slider moves\n// @viji-accumulator:phase rate:speed\nfloat wave = sin(phase + uv.x * 10.0);            // smooth at any slider value\n```\n\n> [!NOTE]\n> Always use [`viji.time`](/native/timing) or [`viji.deltaTime`](/native/timing) for animation. Never count frames or assume a specific frame rate — the host application may run your scene at different rates (`full` or `half` mode) or the actual FPS may vary by device.\n\n---\n\n## Design for Any Resolution\n\nThe host application controls your scene's resolution. It may change at any time (window resize, resolution scaling for performance, high-DPI displays). Never hardcode pixel values.\n\n**Use [`viji.width`](/native/canvas-context) and [`viji.height`](/native/canvas-context)** for all positioning and sizing:\n\n```javascript\n// Good — scales to any resolution\nconst centerX = viji.width / 2;\nconst centerY = viji.height / 2;\nconst radius = Math.min(viji.width, viji.height) * 0.1;\n\n// Bad — breaks at different resolutions\nconst centerX = 960;\nconst centerY = 540;\nconst radius = 50;\n```\n\nFor parameters that control sizes, use normalized values (0–1) and multiply by canvas dimensions:\n\n```javascript\nconst size = viji.slider(0.15, { min: 0.02, max: 0.5, label: 'Size' });\n\nfunction render(viji) {\n  const pixelSize = size.value * Math.min(viji.width, viji.height);\n}\n```\n\nFor shaders, use `u_resolution`:\n\n```glsl\nvec2 uv = gl_FragCoord.xy / u_resolution;  // normalized 0–1 coordinates\n```\n\n> [!NOTE]\n> Always use [`viji.width`](/native/canvas-context) and [`viji.height`](/native/canvas-context) for positioning and sizing, and [`viji.deltaTime`](/native/timing) for frame-rate-independent animation. Never hardcode pixel values or assume a specific frame rate.\n\n---\n\n## Declare Parameters at the Top Level\n\nParameter functions ([`viji.slider()`](/native/parameters/slider), [`viji.color()`](/native/parameters/color), etc.) register controls with the host application. They must be called **once**, at the top level of your scene code — never inside `render()`.\n\n```javascript\n// Correct — declared once at top level\nconst speed = viji.slider(1, { min: 0.1, max: 5, label: 'Speed' });\nconst bgColor = viji.color('#1a1a2e', { label: 'Background' });\n\nfunction render(viji) {\n  // Read current values inside render\n  const s = speed.value;\n  const bg = bgColor.value;\n}\n```\n\n> [!NOTE]\n> Parameters must be defined at the top level of your scene, not inside `render()`. They are registered once during initialization. Defining them inside `render()` would re-register the parameter every frame, resetting its value to the default and making user changes ineffective.\n\n---\n\n## Avoid Allocations in the Render Loop\n\nCreating objects, arrays, or strings inside `render()` triggers garbage collection, causing frame drops and stuttering. Pre-allocate at the top level and reuse.\n\n> [!TIP]\n> Avoid allocating objects, arrays, or strings inside `render()`. Pre-allocate at the top level and reuse them:\n> ```javascript\n> // Good — pre-allocated\n> const pos = { x: 0, y: 0 };\n> function render(viji) {\n>   pos.x = viji.width / 2;\n>   pos.y = viji.height / 2;\n> }\n>\n> // Bad — creates a new object every frame\n> function render(viji) {\n>   const pos = { x: viji.width / 2, y: viji.height / 2 };\n> }\n> ```\n\nThis is especially important for particle systems, arrays of positions, or any data structure that persists across frames.\n\n---\n\n## No DOM APIs (but `fetch` Is Fine)\n\nYour scene runs in a Web Worker. Standard DOM APIs are not available:\n\n- No `window`, `document`, `Image()`, `localStorage`\n- No `createElement`, `querySelector`, `addEventListener`\n\nHowever, **`fetch()` works** and can be used to load JSON, text, or other data from external URLs:\n\n```javascript\n// This works — fetch is available in workers\nconst response = await fetch('https://cdn.example.com/data.json');\nconst data = await response.json();\n```\n\nFor images, use Viji's [`viji.image()`](/native/parameters/image) parameter — the host application handles file selection and transfers the image to the worker.\n\n> [!WARNING]\n> Scenes run in a Web Worker — there is no `window`, `document`, `Image()`, `localStorage`, or any DOM API. All inputs (audio, video, images) are provided through the Viji API. Note: `fetch()` IS available and can be used to load external data (JSON, etc.) from CDNs.\n\n---\n\n## Guard Audio and Video with `isConnected`\n\nAudio and video streams are provided by the host and may not always be available. Always check `isConnected` before using audio or video data:\n\n```javascript\nfunction render(viji) {\n  if (viji.audio.isConnected) {\n    const bass = viji.audio.bands.low;\n    // ... use audio data\n  }\n\n  if (viji.video.isConnected && viji.video.currentFrame) {\n    ctx.drawImage(viji.video.currentFrame, 0, 0, viji.width, viji.height);\n  }\n}\n```\n\nWithout this guard, your scene would reference undefined or zero values when no audio/video source is connected.\n\n---\n\n## Be Mindful of Computer Vision Costs\n\nCV features (face detection, hand tracking, pose detection, etc.) are powerful but expensive. Each feature runs ML inference in its own WebGL context.\n\n| Feature | Relative Cost | Notes |\n|---------|--------------|-------|\n| Face Detection | Low | Bounding box + basic landmarks only |\n| Face Mesh | Medium-High | 468 facial landmarks |\n| Emotion Detection | High | 7 expressions + 52 blendshape coefficients |\n| Hand Tracking | Medium | Up to 2 hands, 21 landmarks each |\n| Pose Detection | Medium | 33 body landmarks |\n| Body Segmentation | High | Per-pixel mask, large tensor output |\n\n> [!WARNING]\n> **WebGL Context Limits:** Each CV feature requires its own WebGL context for ML inference. Browsers typically allow 8-16 active WebGL contexts. Enabling too many CV features simultaneously can cause context eviction, potentially breaking the scene's own rendering. Use only the CV features you need.\n\n**Don't enable CV features by default.** Instead, expose a toggle parameter so users can activate them on capable devices:\n\n> [!TIP]\n> **Best practice:** Don't enable CV features by default. Instead, expose a toggle parameter so users can activate them on capable devices:\n> ```javascript\n> const useFace = viji.toggle(false, { label: 'Enable Face Detection', category: 'video' });\n> if (useFace.value) {\n>   await viji.video.cv.enableFaceDetection(true);\n> }\n> ```\n\n---\n\n## Pick One Canvas Context Type\n\nThe native renderer lets you choose between 2D and WebGL contexts via [`viji.useContext()`](/native/canvas-context). Options are `'2d'`, `'webgl'` (WebGL 1), and `'webgl2'` (WebGL 2). Pick one and stick with it.\n\n> [!WARNING]\n> A canvas only supports one context type. If you call [`useContext('2d')`](/native/canvas-context) and later call [`useContext('webgl')`](/native/canvas-context) (or vice versa), the second call returns `null`. Choose one context type and use it for the entire scene.\n\n---\n\n## Related\n\n- [Common Mistakes](../common-mistakes/) — specific wrong/right code examples\n- [Renderers Overview](../renderers-overview/) — choosing the right renderer"
         }
       ]
     },
@@ -868,7 +905,62 @@ export const docsApi = {
       "content": [
         {
           "type": "text",
-          "markdown": "# Common Mistakes\r\n\r\nThis page collects the most frequent mistakes artists make when writing Viji scenes. Each section shows the wrong approach and the correct alternative.\r\n\r\n---\r\n\r\n## Using DOM APIs\r\n\r\nScenes run in a Web Worker. There is no DOM.\r\n\r\n```javascript\r\n// Wrong — DOM APIs don't exist in workers\r\nconst img = new Image();\r\nimg.src = 'photo.jpg';\r\n\r\ndocument.createElement('canvas');\r\nwindow.innerWidth;\r\nlocalStorage.setItem('key', 'value');\r\n```\r\n\r\n```javascript\r\n// Right — use Viji's API for inputs\r\nconst photo = viji.image(null, { label: 'Photo' });\r\n\r\n// Use viji.canvas, viji.width, viji.height instead\r\n// Use fetch() for loading external data:\r\nconst data = await fetch('https://cdn.example.com/data.json').then(r => r.json());\r\n```\r\n\r\n---\r\n\r\n## Declaring Parameters Inside `render()`\r\n\r\nParameter functions register UI controls with the host. Calling them in `render()` re-registers the parameter every frame, resetting its value to the default and making user changes ineffective.\r\n\r\n```javascript\r\n// Wrong — re-registers the slider every frame, resetting its value\r\nfunction render(viji) {\r\n  const speed = viji.slider(1, { min: 0, max: 5, label: 'Speed' });\r\n  // ...\r\n}\r\n```\r\n\r\n```javascript\r\n// Right — declare once at top level, read .value in render()\r\nconst speed = viji.slider(1, { min: 0, max: 5, label: 'Speed' });\r\n\r\nfunction render(viji) {\r\n  const s = speed.value;\r\n  // ...\r\n}\r\n```\r\n\r\n---\r\n\r\n## Forgetting `.value` on Parameters\r\n\r\nParameter objects are not raw values. You need to access `.value` to get the current value.\r\n\r\n```javascript\r\n// Wrong — uses the parameter object, not its value\r\nconst radius = viji.slider(50, { min: 10, max: 200, label: 'Radius' });\r\n\r\nfunction render(viji) {\r\n  ctx.arc(x, y, radius, 0, Math.PI * 2);  // radius is an object, not a number\r\n}\r\n```\r\n\r\n```javascript\r\n// Right — access .value\r\nfunction render(viji) {\r\n  ctx.arc(x, y, radius.value, 0, Math.PI * 2);\r\n}\r\n```\r\n\r\n---\r\n\r\n## Hardcoding Pixel Values\r\n\r\nThe host controls your scene's resolution. Hardcoded values break at different sizes.\r\n\r\n```javascript\r\n// Wrong — only looks right at one specific resolution\r\nfunction render(viji) {\r\n  ctx.arc(960, 540, 50, 0, Math.PI * 2);\r\n}\r\n```\r\n\r\n```javascript\r\n// Right — adapts to any resolution\r\nfunction render(viji) {\r\n  const cx = viji.width / 2;\r\n  const cy = viji.height / 2;\r\n  const r = Math.min(viji.width, viji.height) * 0.05;\r\n  ctx.arc(cx, cy, r, 0, Math.PI * 2);\r\n}\r\n```\r\n\r\n---\r\n\r\n## Frame-Rate-Dependent Animation\r\n\r\nCounting frames or using fixed increments makes animation speed depend on the device's frame rate.\r\n\r\n```javascript\r\n// Wrong — faster on 120Hz displays, slower on 30Hz\r\nlet angle = 0;\r\nfunction render(viji) {\r\n  angle += 0.02;\r\n}\r\n```\r\n\r\n```javascript\r\n// Right — use viji.time for consistent speed regardless of FPS\r\nfunction render(viji) {\r\n  const angle = viji.time * speed.value;\r\n}\r\n\r\n// Or use viji.deltaTime for accumulation\r\nlet position = 0;\r\nfunction render(viji) {\r\n  position += velocity * viji.deltaTime;\r\n}\r\n```\r\n\r\n---\r\n\r\n## Allocating Objects in `render()`\r\n\r\nCreating new objects every frame causes garbage collection pauses.\r\n\r\n```javascript\r\n// Wrong — new object every frame\r\nfunction render(viji) {\r\n  const particles = [];\r\n  for (let i = 0; i < 100; i++) {\r\n    particles.push({ x: Math.random() * viji.width, y: Math.random() * viji.height });\r\n  }\r\n}\r\n```\r\n\r\n```javascript\r\n// Right — pre-allocate and reuse\r\nconst particles = Array.from({ length: 100 }, () => ({ x: 0, y: 0 }));\r\n\r\nfunction render(viji) {\r\n  for (const p of particles) {\r\n    p.x = Math.random() * viji.width;\r\n    p.y = Math.random() * viji.height;\r\n  }\r\n}\r\n```\r\n\r\n---\r\n\r\n## P5: Missing the `p5.` Prefix\r\n\r\nViji runs P5 in **instance mode**. All P5 functions must be called on the `p5` object.\r\n\r\n```javascript\r\n// @renderer p5\r\n\r\n// Wrong — global P5 functions don't exist\r\nfunction render(viji, p5) {\r\n  background(0);                    // ReferenceError\r\n  fill(255, 0, 0);                  // ReferenceError\r\n  circle(width / 2, height / 2, 100); // ReferenceError\r\n}\r\n```\r\n\r\n```javascript\r\n// @renderer p5\r\n\r\n// Right — use p5. prefix for P5 functions, viji.* for dimensions\r\nfunction render(viji, p5) {\r\n  p5.background(0);\r\n  p5.fill(255, 0, 0);\r\n  p5.circle(viji.width / 2, viji.height / 2, 100);\r\n}\r\n```\r\n\r\n---\r\n\r\n## P5: Using `draw()` Instead of `render()`\r\n\r\nP5's built-in draw loop is disabled in Viji. Your function must be named `render`, not `draw`.\r\n\r\n```javascript\r\n// @renderer p5\r\n\r\n// Wrong — Viji never calls draw()\r\nfunction draw(viji, p5) {\r\n  p5.background(0);\r\n}\r\n```\r\n\r\n```javascript\r\n// @renderer p5\r\n\r\n// Right — Viji calls render() every frame\r\nfunction render(viji, p5) {\r\n  p5.background(0);\r\n}\r\n```\r\n\r\n---\r\n\r\n## P5: Calling `createCanvas()`\r\n\r\nThe canvas is created and managed by Viji. Calling `createCanvas()` creates a second canvas that won't be displayed.\r\n\r\n```javascript\r\n// @renderer p5\r\n\r\n// Wrong — creates a separate, invisible canvas\r\nfunction setup(viji, p5) {\r\n  p5.createCanvas(800, 600);\r\n}\r\n```\r\n\r\n```javascript\r\n// @renderer p5\r\n\r\n// Right — canvas is already provided, just configure settings\r\nfunction setup(viji, p5) {\r\n  p5.colorMode(p5.HSB);\r\n}\r\n```\r\n\r\n---\r\n\r\n## P5: Using Event Callbacks\r\n\r\nP5 event callbacks like `mousePressed()`, `keyPressed()`, `touchStarted()` do not work in Viji's worker environment. Use Viji's interaction APIs instead.\r\n\r\n```javascript\r\n// @renderer p5\r\n\r\n// Wrong — these callbacks are never called\r\nfunction mousePressed() {\r\n  console.log('clicked');\r\n}\r\n```\r\n\r\n```javascript\r\n// @renderer p5\r\n\r\n// Right — check Viji's interaction state in render()\r\nfunction render(viji, p5) {\r\n  if (viji.pointer.wasPressed) {\r\n    console.log('clicked');\r\n  }\r\n}\r\n```\r\n\r\n---\r\n\r\n## Shader: Redeclaring Auto-Injected Code\r\n\r\nViji auto-injects `precision` and all built-in uniform declarations. Redeclaring them causes conflicts.\r\n\r\n```glsl\r\n// @renderer shader\r\n\r\n// Wrong — these are already injected by Viji\r\nprecision mediump float;\r\nuniform vec2 u_resolution;\r\nuniform float u_time;\r\n\r\nvoid main() {\r\n  vec2 uv = gl_FragCoord.xy / u_resolution;\r\n  gl_FragColor = vec4(uv, sin(u_time), 1.0);\r\n}\r\n```\r\n\r\n```glsl\r\n// @renderer shader\r\n\r\n// Right — just write your code, uniforms are available automatically\r\nvoid main() {\r\n  vec2 uv = gl_FragCoord.xy / u_resolution;\r\n  gl_FragColor = vec4(uv, sin(u_time), 1.0);\r\n}\r\n```\r\n\r\n---\r\n\r\n## Shader: Using `u_` Prefix for Parameters\r\n\r\nThe `u_` prefix is reserved for Viji's built-in uniforms. Using it for your parameters risks naming collisions.\r\n\r\n```glsl\r\n// Wrong — u_ prefix is reserved\r\n// @viji-slider:u_speed label:\"Speed\" default:1.0\r\n```\r\n\r\n```glsl\r\n// Right — use descriptive names without u_ prefix\r\n// @viji-slider:speed label:\"Speed\" default:1.0\r\n```\r\n\r\n---\r\n\r\n## Shader: Missing `@renderer shader`\r\n\r\nWithout the directive, your GLSL code is treated as JavaScript and will throw syntax errors.\r\n\r\n```glsl\r\n// Wrong — no directive, treated as JavaScript\r\nvoid main() {\r\n  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\r\n}\r\n```\r\n\r\n```glsl\r\n// Right — directive tells Viji to use the shader renderer\r\n// @renderer shader\r\n\r\nvoid main() {\r\n  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\r\n}\r\n```\r\n\r\n---\r\n\r\n## Shader: Using Block Comments for `@viji-*` Parameters\r\n\r\nThe `@viji-*` parameter declarations only work with single-line `//` comments. Block comments `/* */` are silently ignored.\r\n\r\n```glsl\r\n// @renderer shader\r\n\r\n// Wrong — block comments are not parsed for parameters\r\n/* @viji-slider:speed label:\"Speed\" default:1.0 min:0.0 max:5.0 */\r\n\r\nvoid main() {\r\n  gl_FragColor = vec4(speed, 0.0, 0.0, 1.0); // speed is undefined\r\n}\r\n```\r\n\r\n```glsl\r\n// @renderer shader\r\n\r\n// Right — use single-line comments for parameter declarations\r\n// @viji-slider:speed label:\"Speed\" default:1.0 min:0.0 max:5.0\r\n\r\nvoid main() {\r\n  gl_FragColor = vec4(speed, 0.0, 0.0, 1.0);\r\n}\r\n```\r\n\r\n> [!NOTE]\r\n> The `@renderer` directive supports both `//` and `/* */` styles, but `@viji-*` parameter declarations require `//`.\r\n\r\n---\r\n\r\n## Shader: Using `u_time * speed` for Parameter-Driven Animation\r\n\r\nMultiplying `u_time` by a parameter causes the entire phase to jump when the slider moves, because the full history is recalculated instantly.\r\n\r\n```glsl\r\n// Wrong — animation jumps when speed slider changes\r\n// @viji-slider:speed label:\"Speed\" default:1.0 min:0.1 max:5.0\r\nvoid main() {\r\n  float wave = sin(u_time * speed);\r\n  gl_FragColor = vec4(vec3(wave * 0.5 + 0.5), 1.0);\r\n}\r\n```\r\n\r\n```glsl\r\n// Right — accumulator integrates smoothly, no jumps\r\n// @viji-slider:speed label:\"Speed\" default:1.0 min:0.1 max:5.0\r\n// @viji-accumulator:phase rate:speed\r\nvoid main() {\r\n  float wave = sin(phase);\r\n  gl_FragColor = vec4(vec3(wave * 0.5 + 0.5), 1.0);\r\n}\r\n```\r\n\r\n---\r\n\r\n## Not Checking `isConnected` for Audio/Video\r\n\r\nAudio and video streams may not be available. Accessing their properties without checking `isConnected` gives meaningless zero values with no indication that something is missing.\r\n\r\n```javascript\r\n// Wrong — no guard, silently uses zero values\r\nfunction render(viji) {\r\n  const bass = viji.audio.bands.low;\r\n  ctx.drawImage(viji.video.currentFrame, 0, 0);\r\n}\r\n```\r\n\r\n```javascript\r\n// Right — check connection state first\r\nfunction render(viji) {\r\n  if (viji.audio.isConnected) {\r\n    const bass = viji.audio.bands.low;\r\n    // ... react to audio\r\n  }\r\n\r\n  if (viji.video.isConnected && viji.video.currentFrame) {\r\n    ctx.drawImage(viji.video.currentFrame, 0, 0, viji.width, viji.height);\r\n  }\r\n}\r\n```\r\n\r\n---\r\n\r\n## Enabling All CV Features by Default\r\n\r\nEnabling CV features without user consent wastes resources on devices that can't handle it, and risks WebGL context loss.\r\n\r\n```javascript\r\n// Wrong — activates expensive CV on every device\r\nawait viji.video.cv.enableFaceDetection(true);\r\nawait viji.video.cv.enableHandTracking(true);\r\nawait viji.video.cv.enablePoseDetection(true);\r\nawait viji.video.cv.enableBodySegmentation(true);\r\n```\r\n\r\n```javascript\r\n// Right — let the user opt in\r\nconst useFace = viji.toggle(false, { label: 'Enable Face Tracking', category: 'video' });\r\nconst useHands = viji.toggle(false, { label: 'Enable Hand Tracking', category: 'video' });\r\n\r\nfunction render(viji) {\r\n  if (useFace.value) await viji.video.cv.enableFaceDetection(true);\r\n  else await viji.video.cv.enableFaceDetection(false);\r\n\r\n  if (useHands.value) await viji.video.cv.enableHandTracking(true);\r\n  else await viji.video.cv.enableHandTracking(false);\r\n}\r\n```\r\n\r\n---\r\n\r\n## Related\r\n\r\n- [Best Practices](../best-practices/) — positive guidance for writing robust scenes\r\n- [Performance](/advanced/performance) — deep dive into optimization\r\n- [Renderers Overview](../renderers-overview/) — choosing the right renderer"
+          "markdown": "# Common Mistakes\r\n\r\nThis page collects the most frequent mistakes artists make when writing Viji scenes. Each section shows the wrong approach and the correct alternative.\r\n\r\n---\r\n\r\n## Using DOM APIs\r\n\r\nScenes run in a Web Worker. There is no DOM.\r\n\r\n```javascript\r\n// Wrong — DOM APIs don't exist in workers\r\nconst img = new Image();\r\nimg.src = 'photo.jpg';\r\n\r\ndocument.createElement('canvas');\r\nwindow.innerWidth;\r\nlocalStorage.setItem('key', 'value');\r\n```\r\n\r\n```javascript\r\n// Right — use Viji's API for inputs\r\nconst photo = viji.image(null, { label: 'Photo' });\r\n\r\n// Use viji.canvas, viji.width, viji.height instead\r\n// Use fetch() for loading external data:\r\nconst data = await fetch('https://cdn.example.com/data.json').then(r => r.json());\r\n```\r\n\r\n---\r\n\r\n## Declaring Parameters Inside `render()`\r\n\r\nParameter functions register UI controls with the host. Calling them in `render()` re-registers the parameter every frame, resetting its value to the default and making user changes ineffective.\r\n\r\n```javascript\r\n// Wrong — re-registers the slider every frame, resetting its value\r\nfunction render(viji) {\r\n  const speed = viji.slider(1, { min: 0, max: 5, label: 'Speed' });\r\n  // ...\r\n}\r\n```\r\n\r\n```javascript\r\n// Right — declare once at top level, read .value in render()\r\nconst speed = viji.slider(1, { min: 0, max: 5, label: 'Speed' });\r\n\r\nfunction render(viji) {\r\n  const s = speed.value;\r\n  // ...\r\n}\r\n```\r\n\r\n---\r\n\r\n## Forgetting `.value` on Parameters\r\n\r\nParameter objects are not raw values. You need to access `.value` to get the current value.\r\n\r\n```javascript\r\n// Wrong — uses the parameter object, not its value\r\nconst radius = viji.slider(50, { min: 10, max: 200, label: 'Radius' });\r\n\r\nfunction render(viji) {\r\n  ctx.arc(x, y, radius, 0, Math.PI * 2);  // radius is an object, not a number\r\n}\r\n```\r\n\r\n```javascript\r\n// Right — access .value\r\nfunction render(viji) {\r\n  ctx.arc(x, y, radius.value, 0, Math.PI * 2);\r\n}\r\n```\r\n\r\n---\r\n\r\n## Hardcoding Pixel Values\r\n\r\nThe host controls your scene's resolution. Hardcoded values break at different sizes.\r\n\r\n```javascript\r\n// Wrong — only looks right at one specific resolution\r\nfunction render(viji) {\r\n  ctx.arc(960, 540, 50, 0, Math.PI * 2);\r\n}\r\n```\r\n\r\n```javascript\r\n// Right — adapts to any resolution\r\nfunction render(viji) {\r\n  const cx = viji.width / 2;\r\n  const cy = viji.height / 2;\r\n  const r = Math.min(viji.width, viji.height) * 0.05;\r\n  ctx.arc(cx, cy, r, 0, Math.PI * 2);\r\n}\r\n```\r\n\r\n---\r\n\r\n## Frame-Rate-Dependent Animation\r\n\r\nCounting frames or using fixed increments makes animation speed depend on the device's frame rate.\r\n\r\n```javascript\r\n// Wrong — faster on 120Hz displays, slower on 30Hz\r\nlet angle = 0;\r\nfunction render(viji) {\r\n  angle += 0.02;\r\n}\r\n```\r\n\r\n```javascript\r\n// Right — use viji.time for consistent speed regardless of FPS\r\nfunction render(viji) {\r\n  const angle = viji.time * speed.value;\r\n}\r\n\r\n// Or use viji.deltaTime for accumulation\r\nlet position = 0;\r\nfunction render(viji) {\r\n  position += velocity * viji.deltaTime;\r\n}\r\n```\r\n\r\n---\r\n\r\n## Allocating Objects in `render()`\r\n\r\nCreating new objects every frame causes garbage collection pauses.\r\n\r\n```javascript\r\n// Wrong — new object every frame\r\nfunction render(viji) {\r\n  const particles = [];\r\n  for (let i = 0; i < 100; i++) {\r\n    particles.push({ x: Math.random() * viji.width, y: Math.random() * viji.height });\r\n  }\r\n}\r\n```\r\n\r\n```javascript\r\n// Right — pre-allocate and reuse\r\nconst particles = Array.from({ length: 100 }, () => ({ x: 0, y: 0 }));\r\n\r\nfunction render(viji) {\r\n  for (const p of particles) {\r\n    p.x = Math.random() * viji.width;\r\n    p.y = Math.random() * viji.height;\r\n  }\r\n}\r\n```\r\n\r\n---\r\n\r\n## P5: Missing the `p5.` Prefix\r\n\r\nViji runs P5 in **instance mode**. All P5 functions must be called on the `p5` object.\r\n\r\n```javascript\r\n// @renderer p5\r\n\r\n// Wrong — global P5 functions don't exist\r\nfunction render(viji, p5) {\r\n  background(0);                    // ReferenceError\r\n  fill(255, 0, 0);                  // ReferenceError\r\n  circle(width / 2, height / 2, 100); // ReferenceError\r\n}\r\n```\r\n\r\n```javascript\r\n// @renderer p5\r\n\r\n// Right — use p5. prefix for P5 functions, viji.* for dimensions\r\nfunction render(viji, p5) {\r\n  p5.background(0);\r\n  p5.fill(255, 0, 0);\r\n  p5.circle(viji.width / 2, viji.height / 2, 100);\r\n}\r\n```\r\n\r\n---\r\n\r\n## P5: Using `draw()` Instead of `render()`\r\n\r\nP5's built-in draw loop is disabled in Viji. Your function must be named `render`, not `draw`.\r\n\r\n```javascript\r\n// @renderer p5\r\n\r\n// Wrong — Viji never calls draw()\r\nfunction draw(viji, p5) {\r\n  p5.background(0);\r\n}\r\n```\r\n\r\n```javascript\r\n// @renderer p5\r\n\r\n// Right — Viji calls render() every frame\r\nfunction render(viji, p5) {\r\n  p5.background(0);\r\n}\r\n```\r\n\r\n---\r\n\r\n## P5: Calling `createCanvas()`\r\n\r\nThe canvas is created and managed by Viji. Calling `createCanvas()` creates a second canvas that won't be displayed.\r\n\r\n```javascript\r\n// @renderer p5\r\n\r\n// Wrong — creates a separate, invisible canvas\r\nfunction setup(viji, p5) {\r\n  p5.createCanvas(800, 600);\r\n}\r\n```\r\n\r\n```javascript\r\n// @renderer p5\r\n\r\n// Right — canvas is already provided, just configure settings\r\nfunction setup(viji, p5) {\r\n  p5.colorMode(p5.HSB);\r\n}\r\n```\r\n\r\n---\r\n\r\n## P5: Using Event Callbacks\r\n\r\nP5 event callbacks like `mousePressed()`, `keyPressed()`, `touchStarted()` do not work in Viji's worker environment. Use Viji's interaction APIs instead.\r\n\r\n```javascript\r\n// @renderer p5\r\n\r\n// Wrong — these callbacks are never called\r\nfunction mousePressed() {\r\n  console.log('clicked');\r\n}\r\n```\r\n\r\n```javascript\r\n// @renderer p5\r\n\r\n// Right — check Viji's interaction state in render()\r\nfunction render(viji, p5) {\r\n  if (viji.pointer.wasPressed) {\r\n    console.log('clicked');\r\n  }\r\n}\r\n```\r\n\r\n---\r\n\r\n## Shader: Redeclaring Auto-Injected Code\r\n\r\nViji auto-injects `precision`, all built-in uniform declarations, and all parameter uniforms from `@viji-*` directives. Redeclaring any of them causes compilation errors.\r\n\r\n```glsl\r\n// @renderer shader\r\n\r\n// Wrong — these are already injected by Viji\r\nprecision mediump float;\r\nuniform vec2 u_resolution;\r\nuniform float u_time;\r\n\r\nvoid main() {\r\n  vec2 uv = gl_FragCoord.xy / u_resolution;\r\n  gl_FragColor = vec4(uv, sin(u_time), 1.0);\r\n}\r\n```\r\n\r\n```glsl\r\n// @renderer shader\r\n\r\n// Right — just write your code, uniforms are available automatically\r\nvoid main() {\r\n  vec2 uv = gl_FragCoord.xy / u_resolution;\r\n  gl_FragColor = vec4(uv, sin(u_time), 1.0);\r\n}\r\n```\r\n\r\n---\r\n\r\n## Shader: Using `u_` Prefix for Parameters\r\n\r\nThe `u_` prefix is reserved for Viji's built-in uniforms. Using it for your parameters risks naming collisions.\r\n\r\n```glsl\r\n// Wrong — u_ prefix is reserved\r\n// @viji-slider:u_speed label:\"Speed\" default:1.0\r\n```\r\n\r\n```glsl\r\n// Right — use descriptive names without u_ prefix\r\n// @viji-slider:speed label:\"Speed\" default:1.0\r\n```\r\n\r\n---\r\n\r\n## Shader: Missing `@renderer shader`\r\n\r\nWithout the directive, your GLSL code is treated as JavaScript and will throw syntax errors.\r\n\r\n```glsl\r\n// Wrong — no directive, treated as JavaScript\r\nvoid main() {\r\n  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\r\n}\r\n```\r\n\r\n```glsl\r\n// Right — directive tells Viji to use the shader renderer\r\n// @renderer shader\r\n\r\nvoid main() {\r\n  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\r\n}\r\n```\r\n\r\n---\r\n\r\n## Shader: Using Block Comments for `@viji-*` Parameters\r\n\r\nThe `@viji-*` parameter declarations only work with single-line `//` comments. Block comments `/* */` are silently ignored.\r\n\r\n```glsl\r\n// @renderer shader\r\n\r\n// Wrong — block comments are not parsed for parameters\r\n/* @viji-slider:speed label:\"Speed\" default:1.0 min:0.0 max:5.0 */\r\n\r\nvoid main() {\r\n  gl_FragColor = vec4(speed, 0.0, 0.0, 1.0); // speed is undefined\r\n}\r\n```\r\n\r\n```glsl\r\n// @renderer shader\r\n\r\n// Right — use single-line comments for parameter declarations\r\n// @viji-slider:speed label:\"Speed\" default:1.0 min:0.0 max:5.0\r\n\r\nvoid main() {\r\n  gl_FragColor = vec4(speed, 0.0, 0.0, 1.0);\r\n}\r\n```\r\n\r\n> [!NOTE]\r\n> The `@renderer` directive supports both `//` and `/* */` styles, but `@viji-*` parameter declarations require `//`.\r\n\r\n---\r\n\r\n## Shader: Using `u_time * speed` for Parameter-Driven Animation\r\n\r\nMultiplying `u_time` by a parameter causes the entire phase to jump when the slider moves, because the full history is recalculated instantly.\r\n\r\n```glsl\r\n// Wrong — animation jumps when speed slider changes\r\n// @viji-slider:speed label:\"Speed\" default:1.0 min:0.1 max:5.0\r\nvoid main() {\r\n  float wave = sin(u_time * speed);\r\n  gl_FragColor = vec4(vec3(wave * 0.5 + 0.5), 1.0);\r\n}\r\n```\r\n\r\n```glsl\r\n// Right — accumulator integrates smoothly, no jumps\r\n// @viji-slider:speed label:\"Speed\" default:1.0 min:0.1 max:5.0\r\n// @viji-accumulator:phase rate:speed\r\nvoid main() {\r\n  float wave = sin(phase);\r\n  gl_FragColor = vec4(vec3(wave * 0.5 + 0.5), 1.0);\r\n}\r\n```\r\n\r\n---\r\n\r\n## Not Checking `isConnected` for Audio/Video\r\n\r\nAudio and video streams may not be available. Accessing their properties without checking `isConnected` gives meaningless zero values with no indication that something is missing.\r\n\r\n```javascript\r\n// Wrong — no guard, silently uses zero values\r\nfunction render(viji) {\r\n  const bass = viji.audio.bands.low;\r\n  ctx.drawImage(viji.video.currentFrame, 0, 0);\r\n}\r\n```\r\n\r\n```javascript\r\n// Right — check connection state first\r\nfunction render(viji) {\r\n  if (viji.audio.isConnected) {\r\n    const bass = viji.audio.bands.low;\r\n    // ... react to audio\r\n  }\r\n\r\n  if (viji.video.isConnected && viji.video.currentFrame) {\r\n    ctx.drawImage(viji.video.currentFrame, 0, 0, viji.width, viji.height);\r\n  }\r\n}\r\n```\r\n\r\n---\r\n\r\n## Enabling All CV Features by Default\r\n\r\nEnabling CV features without user consent wastes resources on devices that can't handle it, and risks WebGL context loss.\r\n\r\n```javascript\r\n// Wrong — activates expensive CV on every device\r\nawait viji.video.cv.enableFaceDetection(true);\r\nawait viji.video.cv.enableHandTracking(true);\r\nawait viji.video.cv.enablePoseDetection(true);\r\nawait viji.video.cv.enableBodySegmentation(true);\r\n```\r\n\r\n```javascript\r\n// Right — let the user opt in\r\nconst useFace = viji.toggle(false, { label: 'Enable Face Tracking', category: 'video' });\r\nconst useHands = viji.toggle(false, { label: 'Enable Hand Tracking', category: 'video' });\r\n\r\nfunction render(viji) {\r\n  if (useFace.value) await viji.video.cv.enableFaceDetection(true);\r\n  else await viji.video.cv.enableFaceDetection(false);\r\n\r\n  if (useHands.value) await viji.video.cv.enableHandTracking(true);\r\n  else await viji.video.cv.enableHandTracking(false);\r\n}\r\n```\r\n\r\n---\r\n\r\n## Related\r\n\r\n- [Best Practices](../best-practices/) — positive guidance for writing robust scenes\r\n- [Renderers Overview](../renderers-overview/) — choosing the right renderer\r\n- [Audio](/native/audio) — audio connection and analysis API\r\n- [Video & CV](/native/video) — video stream and computer vision features"
+        }
+      ]
+    },
+    "ai-create-scene": {
+      "id": "ai-create-scene",
+      "title": "\"Create Your First Scene\"",
+      "description": "A guided AI prompt that helps beginners choose a renderer and build their first Viji scene — no prior coding experience required.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Create Your First Scene\n\nNew to Viji? This prompt turns an AI assistant into a creative coding guide that helps you choose the right renderer and build your first scene — even if you've never written code before.\n\n## How It Works\n\n1. Copy the prompt below and paste it into your AI assistant (ChatGPT, Claude, etc.).\n2. Describe what you want to create — as simple or detailed as you like.\n3. The AI will ask questions, recommend a renderer, and generate a complete scene.\n\n## Renderer Quick Comparison\n\n| | Native | P5 | Shader |\n|---|---|---|---|\n| **Language** | JavaScript (Canvas 2D / WebGL) | JavaScript + P5.js | GLSL (GPU fragment shader) |\n| **Best for** | Full control, Three.js, generative art | Creative coding, familiar P5 API, shapes & colors | GPU effects, patterns, raymarching, post-processing |\n| **Learning curve** | Medium | Low (if you know P5) | Medium–High |\n| **External libraries** | Yes (Three.js, etc.) | P5.js built-in | No |\n| **3D support** | Yes (WebGL, Three.js) | No (2D only) | Yes (raymarching, SDF) |\n\n## The Prompt\n\n````\nYou are a creative coding assistant for the Viji platform. Your job is to help artists create interactive visual scenes — even if they have no coding experience.\n\n## YOUR BEHAVIOR\n\n1. Ask the artist what they want to create. If their description is vague, ask clarifying questions:\n   - What kind of visual? (patterns, shapes, particles, video effects, 3D, etc.)\n   - Should it react to audio/music?\n   - Should it use a camera/video?\n   - Should it respond to mouse/touch/device tilt?\n   - What mood or style? (abstract, organic, geometric, glitchy, minimal, etc.)\n2. Assess their experience level and recommend a renderer:\n   - **No coding experience** → recommend **P5** (most approachable for beginners)\n   - **Knows JavaScript/Canvas** → recommend **Native** (maximum control)\n   - **Wants GPU effects, patterns, or has shader experience** → recommend **Shader**\n   - **Wants 3D with Three.js or custom WebGL** → recommend **Native**\n   - **Knows P5.js/Processing** → recommend **P5**\n3. Generate a complete, working scene with parameters for everything the artist might want to adjust.\n4. Explain what the code does in simple terms.\n5. Suggest ways to iterate and improve.\n\n## RENDERER DECISION MATRIX\n\n- **Native**: Full control over Canvas 2D or WebGL. Supports `await import()` for external libraries like Three.js. Best for custom renderers, particle systems with CPU logic, complex state machines, or Three.js 3D scenes.\n- **P5**: Uses P5.js v1.9.4 with familiar `setup()`/`render()` pattern. Best for creative coding with shapes, colors, transforms, text. No WEBGL mode — 2D only.\n- **Shader**: GLSL fragment shader on a GPU fullscreen quad. Best for generative patterns, fractals, raymarching, SDF scenes, audio-reactive gradients, video post-processing. Extremely fast — runs entirely on the GPU.\n\n## REFERENCE (for AI assistants with web access)\n\nFor the latest API documentation, type definitions, and all uniform details:\n- Complete docs (all pages + examples): https://unpkg.com/@viji-dev/core/dist/docs-api.js\n- TypeScript API types: https://unpkg.com/@viji-dev/core/dist/artist-global.d.ts\n- Shader uniforms reference: https://unpkg.com/@viji-dev/core/dist/shader-uniforms.js\n- NPM package: https://www.npmjs.com/package/@viji-dev/core\n\n## VIJI ARCHITECTURE (all renderers)\n\n- Scenes run in a **Web Worker** with an **OffscreenCanvas**. There is NO DOM access.\n- The global `viji` object provides everything: canvas, timing, audio, video, CV, input, sensors, parameters.\n- **Top-level code** runs once (parameters, state, imports).\n- **`render(viji)` / `render(viji, p5)` / `void main()`** runs every frame.\n- `fetch()` is available. `window`, `document`, `Image()` are NOT.\n\n## SCENE STRUCTURE PER RENDERER\n\n### Native\n```javascript\nconst speed = viji.slider(1, { min: 0.1, max: 5, label: 'Speed' });\nlet angle = 0;\nfunction render(viji) {\n  const ctx = viji.useContext('2d');\n  angle += speed.value * viji.deltaTime;\n  ctx.clearRect(0, 0, viji.width, viji.height);\n  // draw with ctx...\n}\n```\n\n### P5\n```javascript\n// @renderer p5\nconst speed = viji.slider(1, { min: 0.1, max: 5, label: 'Speed' });\nlet angle = 0;\nfunction setup(viji, p5) { p5.colorMode(p5.HSB, 360, 100, 100); }\nfunction render(viji, p5) {\n  angle += speed.value * viji.deltaTime;\n  p5.background(0);\n  // draw with p5.circle(), p5.rect(), etc. (all need p5. prefix)\n}\n```\n\n### Shader (GLSL)\n```glsl\n// @renderer shader\n// @viji-slider:speed label:\"Speed\" default:1.0 min:0.1 max:5.0\n// @viji-accumulator:phase rate:speed\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  gl_FragColor = vec4(uv, sin(phase) * 0.5 + 0.5, 1.0);\n}\n```\n\n## PARAMETERS (all renderers)\n\nArtists control scenes through parameters — declared once, shown as UI controls.\n\n**Native/P5 syntax** (top-level):\n```javascript\nviji.slider(default, { min, max, step, label, group, category })   // → .value: number\nviji.color(default, { label })                                      // → .value: '#rrggbb'\nviji.toggle(default, { label })                                     // → .value: boolean\nviji.select(default, { options: [...], label })                     // → .value: string|number\nviji.number(default, { min, max, step, label })                    // → .value: number\nviji.text(default, { label, maxLength })                            // → .value: string\nviji.image(null, { label })                                         // → .value: ImageBitmap|null\nviji.button({ label })                                              // → .value: boolean (1 frame)\n```\n\n**Shader syntax** (comment directives):\n```glsl\n// @viji-slider:name label:\"Label\" default:1.0 min:0.0 max:5.0       → uniform float name;\n// @viji-color:name label:\"Color\" default:#ff6600                      → uniform vec3 name;\n// @viji-toggle:name label:\"Toggle\" default:false                      → uniform bool name;\n// @viji-select:name label:\"Mode\" default:0 options:[\"A\",\"B\"]         → uniform int name;\n// @viji-number:name label:\"Count\" default:10.0 min:1.0 max:100.0    → uniform float name;\n// @viji-image:name label:\"Texture\"                                    → uniform sampler2D name;\n// @viji-button:name label:\"Reset\"                                     → uniform bool name;\n// @viji-accumulator:name rate:speed                                   → uniform float name;\n```\n\n## AUDIO — `viji.audio` / Shader uniforms\n\nALWAYS check `isConnected` / `u_audioVolume > 0.0` before using audio data.\n\nKey members (Native/P5):\n- `isConnected`, `volume.current`, `volume.peak`, `volume.smoothed`\n- `bands.low`, `bands.lowMid`, `bands.mid`, `bands.highMid`, `bands.high` (+ smoothed variants)\n- `beat.kick`, `beat.snare`, `beat.hat`, `beat.any` (+ `.triggers.kick` etc. for single-frame)\n- `beat.bpm`, `beat.confidence`, `beat.isLocked`\n- `spectral.brightness`, `spectral.flatness`\n- `getFrequencyData()`, `getWaveform()`\n\nKey shader uniforms: `u_audioVolume`, `u_audioLow`–`u_audioHigh`, `u_audioKick`–`u_audioAny`, `u_audioKickTrigger`–`u_audioAnyTrigger`, `u_audioBPM`, `u_audioBrightness`, `u_audioFlatness`, `u_audioFFT`, `u_audioWaveform`.\n\n## VIDEO & CV — `viji.video` / Shader uniforms\n\nALWAYS check `isConnected` / `u_videoConnected` first.\n\nKey members (Native/P5):\n- `isConnected`, `currentFrame`, `frameWidth`, `frameHeight`, `frameRate`, `getFrameData()`\n- CV toggle: `cv.enableFaceDetection(bool)`, `cv.enableFaceMesh(bool)`, `cv.enableEmotionDetection(bool)`, `cv.enableHandTracking(bool)`, `cv.enablePoseDetection(bool)`, `cv.enableBodySegmentation(bool)`\n- NEVER enable CV by default — use toggle parameters.\n- Data: `faces[]` (FaceData), `hands[]` (HandData), `pose` (PoseData|null), `segmentation` (SegmentationData|null)\n\nKey shader uniforms: `u_video`, `u_videoResolution`, `u_videoConnected`, `u_faceCount`, `u_face0*`, `u_handCount`, `u_leftHand*`, `u_rightHand*`, `u_poseDetected`, `u_pose*Position`, `u_segmentationMask`.\n\n## INPUT\n\n**Pointer** (unified): `viji.pointer.x/y`, `isDown`, `wasPressed`, `wasReleased`, `isInCanvas` / Shader: `u_pointer`, `u_pointerDown`, `u_pointerWasPressed`\n**Mouse**: `viji.mouse.x/y`, `isPressed`, `leftButton`, `wheelDelta` / Shader: `u_mouse`, `u_mousePressed`, `u_mouseWheel`\n**Keyboard**: `viji.keyboard.isPressed(key)`, `wasPressed(key)`, `activeKeys`, `shift/ctrl/alt/meta` / Shader: `u_keySpace`, `u_keyW/A/S/D`, `u_keyUp/Down/Left/Right`, `u_keyboard` texture\n**Touch**: `viji.touches.count`, `points[]`, `started[]`, `primary` / Shader: `u_touchCount`, `u_touch0`–`u_touch4`\n\n## SENSORS & EXTERNAL DEVICES\n\n**Device sensors**: `viji.device.motion` (acceleration, rotationRate), `viji.device.orientation` (alpha, beta, gamma) / Shader: `u_deviceAcceleration`, `u_deviceOrientation`\n**External devices**: `viji.devices[]` (id, name, motion, orientation, video) / Shader: `u_device0`–`u_device7` textures, sensors, connection status\n**Streams**: `viji.streams[]` (host-provided additional video sources) / Shader: `u_stream0`–`u_stream7`\n\n## CRITICAL RULES (all renderers)\n\n1. NEVER access `window`, `document`, `Image()`, `localStorage`. `fetch()` IS available.\n2. ALWAYS declare parameters at the TOP LEVEL, never inside `render()` / `main()`.\n3. ALWAYS use `viji.width`/`viji.height` or `u_resolution` — NEVER hardcode pixel sizes.\n4. ALWAYS use `viji.deltaTime` / `u_deltaTime` / `@viji-accumulator` for animation — NEVER count frames.\n5. NEVER allocate objects/arrays inside `render()` — pre-allocate at top level.\n6. ALWAYS check `isConnected` / connection uniforms before using audio or video data.\n7. NEVER enable CV features by default — use toggle parameters.\n8. In P5: ALWAYS prefix every P5 function/constant with `p5.`. NEVER use `createCanvas()`.\n9. In shaders: NEVER redeclare precision, built-in uniforms, or parameter uniforms. NEVER use `u_` prefix for parameter names.\n\n## FOR ADVANCED FEATURES\n\nWhen the artist needs the full API surface, use the renderer-specific prompts:\n- **Native**: Use the \"Prompt: Native Scenes\" page for the complete API reference\n- **P5**: Use the \"Prompt: P5 Scenes\" page for the complete API reference + P5 mapping\n- **Shader**: Use the \"Prompt: Shader Scenes\" page for all 270+ uniforms and directive details\n\nNow help the artist create their Viji scene. Start by asking what they want to build.\n````\n\n## Usage\n\n1. Copy the entire prompt block above.\n2. Paste it into your AI assistant.\n3. Describe what you want — even something simple like \"colorful circles that react to music.\"\n4. The AI will guide you through choosing a renderer and building a scene.\n\n> [!TIP]\n> Don't worry about technical details — the AI will handle those. Focus on describing what you want to **see** and **feel**. Mention colors, motion, mood, and what should drive the visuals (music, camera, mouse movement, etc.).\n\n## Next Steps\n\nOnce you've created your first scene and want more control, use the full renderer-specific prompts:\n\n- [Prompt: Native Scenes](/ai-prompts/native-prompt) — exhaustive Native API prompt\n- [Prompt: P5 Scenes](/ai-prompts/p5-prompt) — exhaustive P5 API prompt\n- [Prompt: Shader Scenes](/ai-prompts/shader-prompt) — exhaustive Shader API prompt\n- [Prompting Tips](/ai-prompts/prompting-tips) — how to get better results from AI\n\n## Related\n\n- [Overview](/getting-started/overview) — what Viji is and how it works\n- [Best Practices](/getting-started/best-practices) — essential patterns for robust scenes\n- [Common Mistakes](/getting-started/common-mistakes) — pitfalls to avoid"
+        }
+      ]
+    },
+    "ai-prompt-native": {
+      "id": "ai-prompt-native",
+      "title": "\"Prompt: Native Scenes\"",
+      "description": "A complete, self-contained AI prompt for generating Viji native scenes from scratch — covers the entire API surface.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Prompt: Native Scenes\n\nCopy the prompt below and paste it into your AI assistant. Then describe the scene you want. The prompt gives the AI everything it needs about Viji to generate a correct, working native scene.\n\n## The Prompt\n\n````\nYou are generating a Viji native scene — a creative visual that runs inside an OffscreenCanvas Web Worker.\nArtists describe what they want; you produce complete, working scene code. Apply every rule below exactly.\n\n## REFERENCE (for AI assistants with web access)\n\nThis prompt is self-contained — all information needed is included below.\nFor the latest API documentation and type definitions:\n- Complete docs (all pages + examples): https://unpkg.com/@viji-dev/core/dist/docs-api.js\n- TypeScript API types: https://unpkg.com/@viji-dev/core/dist/artist-global.d.ts\n- NPM package: https://www.npmjs.com/package/@viji-dev/core\n\n## ARCHITECTURE\n\n- Scenes run in a **Web Worker** with an **OffscreenCanvas**. There is no DOM.\n- The global `viji` object provides canvas, timing, audio, video, CV, input, sensors, and parameters.\n- **Top-level code** runs once (initialization, parameter declarations, state, imports).\n- **`function render(viji) { ... }`** is called every frame. This is where you draw.\n- Optional **`async function setup(viji) { ... }`** runs once before the first `render`.\n- **Top-level `await`** is supported — you can dynamically import libraries.\n\n## RULES\n\n1. NEVER access `window`, `document`, `Image()`, `localStorage`, or any DOM API. `fetch()` and `await import()` ARE available.\n2. ALWAYS declare parameters at the TOP LEVEL, never inside `render()` or `setup()`:\n   ```javascript\n   const speed = viji.slider(1, { min: 0.1, max: 5, label: 'Speed' });\n   function render(viji) { /* use speed.value */ }\n   ```\n3. ALWAYS read parameters via `.value`: `speed.value`, `color.value`, `toggle.value`.\n4. ALWAYS use `viji.width` and `viji.height` for canvas dimensions. NEVER hardcode pixel sizes.\n5. ALWAYS use `viji.time` or `viji.deltaTime` for animation. NEVER count frames or assume a fixed frame rate.\n   - `viji.time` — elapsed seconds, best for oscillations and direct time-based effects.\n   - `viji.deltaTime` — seconds since last frame, best for accumulators: `angle += speed.value * viji.deltaTime;`\n6. NEVER allocate objects, arrays, or strings inside `render()`. Pre-allocate at the top level and reuse.\n7. ALWAYS call `viji.useContext()` to get a canvas context. Choose ONE type and use it for the entire scene:\n   - `viji.useContext('2d')` — Canvas 2D\n   - `viji.useContext('webgl')` — WebGL 1\n   - `viji.useContext('webgl2')` — WebGL 2\n   Calling a different type after the first returns `null`.\n8. ALWAYS check `viji.audio.isConnected` before using audio data.\n9. ALWAYS check `viji.video.isConnected && viji.video.currentFrame` before drawing video.\n10. NEVER enable CV features by default. Use a toggle parameter so the user can opt in:\n    ```javascript\n    const useFace = viji.toggle(false, { label: 'Enable Face Detection', category: 'video' });\n    // In render:\n    if (useFace.value) await viji.video.cv.enableFaceDetection(true);\n    else await viji.video.cv.enableFaceDetection(false);\n    ```\n11. Be mindful of WebGL context limits — each CV feature uses its own WebGL context for ML. Enabling too many can cause context loss.\n12. For external libraries, use dynamic import with a pinned version:\n    ```javascript\n    const THREE = await import('https://esm.sh/three@0.160.0');\n    ```\n    Pass `viji.canvas` to the library's renderer. ALWAYS pass `false` as the third argument to Three.js `setSize()`.\n\n## COMPLETE API REFERENCE\n\n### Canvas & Context\n\n| Member | Type | Description |\n|--------|------|-------------|\n| `viji.canvas` | `OffscreenCanvas` | The canvas element |\n| `viji.useContext('2d')` | `OffscreenCanvasRenderingContext2D` | Get 2D context |\n| `viji.useContext('webgl')` | `WebGLRenderingContext` | Get WebGL 1 context |\n| `viji.useContext('webgl2')` | `WebGL2RenderingContext` | Get WebGL 2 context |\n| `viji.ctx` | `OffscreenCanvasRenderingContext2D` | Shortcut (after useContext('2d')) |\n| `viji.gl` | `WebGLRenderingContext` | Shortcut (after useContext('webgl')) |\n| `viji.width` | `number` | Current canvas width in pixels |\n| `viji.height` | `number` | Current canvas height in pixels |\n\n### Timing\n\n| Member | Type | Description |\n|--------|------|-------------|\n| `viji.time` | `number` | Seconds since scene start |\n| `viji.deltaTime` | `number` | Seconds since last frame |\n| `viji.frameCount` | `number` | Total frames rendered |\n| `viji.fps` | `number` | Current frames per second |\n\n### Parameters\n\nDeclare at top level. Read `.value` inside `render()`. All support `{ label, description?, group?, category? }`.\nCategory values: `'audio'`, `'video'`, `'interaction'`, `'general'`.\n\n```javascript\nviji.slider(default, { min?, max?, step?, label, group?, category? })   // { value: number }\nviji.color(default, { label, group?, category? })                       // { value: '#rrggbb' }\nviji.toggle(default, { label, group?, category? })                      // { value: boolean }\nviji.select(default, { options: [...], label, group?, category? })      // { value: string|number }\nviji.number(default, { min?, max?, step?, label, group?, category? })   // { value: number }\nviji.text(default, { label, group?, category?, maxLength? })            // { value: string }\nviji.image(null, { label, group?, category? })                          // { value: ImageBitmap|null }\nviji.button({ label, description?, group?, category? })                 // { value: boolean } (true one frame)\n```\n\n### Audio — `viji.audio`\n\nALWAYS check `viji.audio.isConnected` first.\n\n| Member | Type | Description |\n|--------|------|-------------|\n| `isConnected` | `boolean` | Whether audio source is active |\n| `volume.current` | `number` | RMS volume 0–1 |\n| `volume.peak` | `number` | Peak amplitude 0–1 |\n| `volume.smoothed` | `number` | Smoothed volume (200ms decay) |\n| `bands.low` | `number` | 20–120 Hz energy 0–1 |\n| `bands.lowMid` | `number` | 120–400 Hz energy 0–1 |\n| `bands.mid` | `number` | 400–1600 Hz energy 0–1 |\n| `bands.highMid` | `number` | 1600–6000 Hz energy 0–1 |\n| `bands.high` | `number` | 6000–16000 Hz energy 0–1 |\n| `bands.lowSmoothed` … `bands.highSmoothed` | `number` | Smoothed variants of each band |\n| `beat.kick` | `number` | Kick energy 0–1 |\n| `beat.snare` | `number` | Snare energy 0–1 |\n| `beat.hat` | `number` | Hi-hat energy 0–1 |\n| `beat.any` | `number` | Any beat energy 0–1 |\n| `beat.kickSmoothed` … `beat.anySmoothed` | `number` | Smoothed beat values |\n| `beat.triggers.kick` | `boolean` | True on kick frame |\n| `beat.triggers.snare` | `boolean` | True on snare frame |\n| `beat.triggers.hat` | `boolean` | True on hat frame |\n| `beat.triggers.any` | `boolean` | True on any beat frame |\n| `beat.events` | `Array<{type,time,strength}>` | Recent beat events |\n| `beat.bpm` | `number` | Estimated BPM (60–240) |\n| `beat.confidence` | `number` | BPM tracking confidence 0–1 |\n| `beat.isLocked` | `boolean` | True when BPM is locked |\n| `spectral.brightness` | `number` | Spectral centroid 0–1 |\n| `spectral.flatness` | `number` | Spectral flatness 0–1 |\n| `getFrequencyData()` | `Uint8Array` | Raw FFT bins (0–255) |\n| `getWaveform()` | `Float32Array` | Time-domain waveform (−1 to 1) |\n\n### Video — `viji.video`\n\nALWAYS check `viji.video.isConnected` first. Check `currentFrame` before drawing.\n\n| Member | Type | Description |\n|--------|------|-------------|\n| `isConnected` | `boolean` | Whether video source is active |\n| `currentFrame` | `OffscreenCanvas\\|ImageBitmap\\|null` | Current video frame |\n| `frameWidth` | `number` | Frame width in pixels |\n| `frameHeight` | `number` | Frame height in pixels |\n| `frameRate` | `number` | Video frame rate |\n| `getFrameData()` | `ImageData\\|null` | Pixel data for CPU access |\n\nDraw video: `ctx.drawImage(viji.video.currentFrame, 0, 0, viji.width, viji.height)`\n\n### Computer Vision — `viji.video.cv` & `viji.video.faces/hands/pose/segmentation`\n\nEnable features via toggle parameters (NEVER enable by default):\n\n```javascript\nawait viji.video.cv.enableFaceDetection(true/false);\nawait viji.video.cv.enableFaceMesh(true/false);\nawait viji.video.cv.enableEmotionDetection(true/false);\nawait viji.video.cv.enableHandTracking(true/false);\nawait viji.video.cv.enablePoseDetection(true/false);\nawait viji.video.cv.enableBodySegmentation(true/false);\nviji.video.cv.getActiveFeatures();  // CVFeature[]\nviji.video.cv.isProcessing();       // boolean\n```\n\n**`viji.video.faces: FaceData[]`**\nEach face: `id` (number), `bounds` ({x,y,width,height}), `center` ({x,y}), `confidence` (0–1), `landmarks` ({x,y,z?}[]), `expressions` ({neutral,happy,sad,angry,surprised,disgusted,fearful} all 0–1), `headPose` ({pitch,yaw,roll}), `blendshapes` (52 ARKit coefficients: browDownLeft, browDownRight, browInnerUp, browOuterUpLeft, browOuterUpRight, cheekPuff, cheekSquintLeft, cheekSquintRight, eyeBlinkLeft, eyeBlinkRight, eyeLookDownLeft, eyeLookDownRight, eyeLookInLeft, eyeLookInRight, eyeLookOutLeft, eyeLookOutRight, eyeLookUpLeft, eyeLookUpRight, eyeSquintLeft, eyeSquintRight, eyeWideLeft, eyeWideRight, jawForward, jawLeft, jawOpen, jawRight, mouthClose, mouthDimpleLeft, mouthDimpleRight, mouthFrownLeft, mouthFrownRight, mouthFunnel, mouthLeft, mouthLowerDownLeft, mouthLowerDownRight, mouthPressLeft, mouthPressRight, mouthPucker, mouthRight, mouthRollLower, mouthRollUpper, mouthShrugLower, mouthShrugUpper, mouthSmileLeft, mouthSmileRight, mouthStretchLeft, mouthStretchRight, mouthUpperUpLeft, mouthUpperUpRight, noseSneerLeft, noseSneerRight, tongueOut — all 0–1).\n\n**`viji.video.hands: HandData[]`**\nEach hand: `id` (number), `handedness` ('left'|'right'), `confidence` (0–1), `bounds` ({x,y,width,height}), `landmarks` ({x,y,z}[], 21 points), `palm` ({x,y,z}), `gestures` ({fist,openPalm,peace,thumbsUp,thumbsDown,pointing,iLoveYou} all 0–1 confidence).\n\n**`viji.video.pose: PoseData | null`**\n`confidence` (0–1), `landmarks` ({x,y,z,visibility}[], 33 points), plus body-part arrays: `face` ({x,y}[]), `torso`, `leftArm`, `rightArm`, `leftLeg`, `rightLeg`.\n\n**`viji.video.segmentation: SegmentationData | null`**\n`mask` (Uint8Array, 0=background 255=person), `width`, `height`.\n\n### Input — Pointer (unified mouse/touch) — `viji.pointer`\n\n| Member | Type | Description |\n|--------|------|-------------|\n| `x`, `y` | `number` | Position in pixels |\n| `deltaX`, `deltaY` | `number` | Movement since last frame |\n| `isDown` | `boolean` | True if pressed/touching |\n| `wasPressed` | `boolean` | True on press frame |\n| `wasReleased` | `boolean` | True on release frame |\n| `isInCanvas` | `boolean` | True if inside canvas |\n| `type` | `string` | `'mouse'`, `'touch'`, or `'none'` |\n\n### Input — Mouse — `viji.mouse`\n\n| Member | Type | Description |\n|--------|------|-------------|\n| `x`, `y` | `number` | Position in pixels |\n| `isInCanvas` | `boolean` | Inside canvas bounds |\n| `isPressed` | `boolean` | Any button pressed |\n| `leftButton`, `rightButton`, `middleButton` | `boolean` | Specific buttons |\n| `deltaX`, `deltaY` | `number` | Movement delta |\n| `wheelDelta` | `number` | Scroll wheel delta |\n| `wheelX`, `wheelY` | `number` | Horizontal/vertical scroll |\n| `wasPressed`, `wasReleased`, `wasMoved` | `boolean` | Frame-edge events |\n\n### Input — Keyboard — `viji.keyboard`\n\n| Member | Type | Description |\n|--------|------|-------------|\n| `isPressed(key)` | `boolean` | True while key is held |\n| `wasPressed(key)` | `boolean` | True on key-down frame |\n| `wasReleased(key)` | `boolean` | True on key-up frame |\n| `activeKeys` | `Set<string>` | Currently held keys |\n| `pressedThisFrame` | `Set<string>` | Keys pressed this frame |\n| `releasedThisFrame` | `Set<string>` | Keys released this frame |\n| `lastKeyPressed` | `string` | Most recent key-down |\n| `lastKeyReleased` | `string` | Most recent key-up |\n| `shift`, `ctrl`, `alt`, `meta` | `boolean` | Modifier states |\n\n### Input — Touch — `viji.touches`\n\n| Member | Type | Description |\n|--------|------|-------------|\n| `count` | `number` | Active touch count |\n| `points` | `TouchPoint[]` | All active touches |\n| `started` | `TouchPoint[]` | Touches started this frame |\n| `moved` | `TouchPoint[]` | Touches moved this frame |\n| `ended` | `TouchPoint[]` | Touches ended this frame |\n| `primary` | `TouchPoint\\|null` | First active touch |\n\n**TouchPoint:** `id`, `x`, `y`, `pressure`, `radius`, `radiusX`, `radiusY`, `rotationAngle`, `force`, `isInCanvas`, `deltaX`, `deltaY`, `velocity` ({x,y}), `isNew`, `isActive`, `isEnding`.\n\n### Device Sensors — `viji.device`\n\n| Member | Type | Description |\n|--------|------|-------------|\n| `motion` | `DeviceMotionData\\|null` | Accelerometer/gyroscope |\n| `orientation` | `DeviceOrientationData\\|null` | Device orientation |\n\n**DeviceMotionData:** `acceleration` ({x,y,z} m/s²), `accelerationIncludingGravity`, `rotationRate` ({alpha,beta,gamma} deg/s), `interval` (ms).\n**DeviceOrientationData:** `alpha` (0–360° compass), `beta` (−180–180° tilt), `gamma` (−90–90° tilt), `absolute` (boolean).\n\n### External Devices — `viji.devices`\n\nArray of connected external devices. Each `DeviceState`:\n`id` (string), `name` (string), `motion` (DeviceMotionData|null), `orientation` (DeviceOrientationData|null), `video` (VideoAPI|null — same as viji.video but without CV).\n\n### Streams — `viji.streams`\n\n`VideoAPI[]` — additional video sources provided by the host application (used by the compositor for scene mixing). May be empty. Each element has the same shape as `viji.video`.\n\n### External Libraries\n\n```javascript\nconst THREE = await import('https://esm.sh/three@0.160.0');\nconst renderer = new THREE.WebGLRenderer({ canvas: viji.canvas, antialias: true });\nrenderer.setSize(viji.width, viji.height, false); // false = no CSS styles\n```\n\nALWAYS pin library versions. ALWAYS pass `viji.canvas` to the renderer. Handle resize in `render()`.\n\n## BEST PRACTICES\n\n1. Use `viji.deltaTime` accumulators for parameter-driven animation to prevent jumps:\n   ```javascript\n   let angle = 0;\n   function render(viji) { angle += speed.value * viji.deltaTime; }\n   ```\n2. Guard audio/video with `isConnected` checks.\n3. Pre-allocate all objects/arrays at top level — never inside `render()`.\n4. For CV, use toggle parameters — never enable by default.\n5. For WebGL scenes with Three.js, handle resize by comparing `viji.width/height` with previous values.\n\n## TEMPLATE\n\n```javascript\nconst bgColor = viji.color('#1a1a2e', { label: 'Background' });\nconst speed = viji.slider(1, { min: 0.1, max: 5, label: 'Speed' });\nconst count = viji.slider(12, { min: 3, max: 30, step: 1, label: 'Count' });\n\nlet angle = 0;\n\nfunction render(viji) {\n  const ctx = viji.useContext('2d');\n  angle += speed.value * viji.deltaTime;\n\n  ctx.fillStyle = bgColor.value;\n  ctx.fillRect(0, 0, viji.width, viji.height);\n\n  const cx = viji.width / 2;\n  const cy = viji.height / 2;\n  const radius = Math.min(viji.width, viji.height) * 0.3;\n  const dotSize = Math.min(viji.width, viji.height) * 0.02;\n  const n = Math.floor(count.value);\n\n  for (let i = 0; i < n; i++) {\n    const a = angle + (i / n) * Math.PI * 2;\n    const x = cx + Math.cos(a) * radius;\n    const y = cy + Math.sin(a) * radius;\n    const hue = (i / n) * 360;\n    ctx.beginPath();\n    ctx.arc(x, y, dotSize, 0, Math.PI * 2);\n    ctx.fillStyle = `hsl(${hue}, 80%, 60%)`;\n    ctx.fill();\n  }\n}\n```\n\nNow generate a Viji native scene based on the artist's description below. Return ONLY the scene code.\nFollow all rules. Use `viji.deltaTime` for animation. Use parameters for anything the user might want to adjust. Check `isConnected` before using audio or video.\n````\n\n## Usage\n\n1. Copy the entire prompt block above.\n2. Paste it into your AI assistant (ChatGPT, Claude, etc.).\n3. After the prompt, describe the scene you want — be as specific as you like.\n4. The AI will return a complete Viji native scene.\n\n> [!TIP]\n> For better results, mention which data sources you want (audio, video, camera, mouse) and what kind of controls the user should have (sliders, toggles, color pickers).\n\n## Related\n\n- [Create Your First Scene](/ai-prompts/create-first-scene) — guided prompt for beginners\n- [Prompting Tips](/ai-prompts/prompting-tips) — how to get better results from AI\n- [Native Quick Start](/native/quickstart) — your first Viji native scene\n- [Native API Reference](/native/api-reference) — full API reference\n- [Best Practices](/getting-started/best-practices) — essential patterns for robust scenes\n- [Common Mistakes](/getting-started/common-mistakes) — pitfalls to avoid"
+        }
+      ]
+    },
+    "ai-prompt-p5": {
+      "id": "ai-prompt-p5",
+      "title": "\"Prompt: P5 Scenes\"",
+      "description": "A complete, self-contained AI prompt for generating Viji P5.js scenes from scratch — covers the entire API surface.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Prompt: P5 Scenes\n\nCopy the prompt below and paste it into your AI assistant. Then describe the scene you want. The prompt gives the AI everything it needs about Viji's P5 renderer to generate a correct, working scene.\n\n## The Prompt\n\n````\nYou are generating a Viji P5.js scene — a creative visual that runs inside an OffscreenCanvas Web Worker using P5.js.\nArtists describe what they want; you produce complete, working scene code. Apply every rule below exactly.\n\n## REFERENCE (for AI assistants with web access)\n\nThis prompt is self-contained — all information needed is included below.\nFor the latest API documentation and type definitions:\n- Complete docs (all pages + examples): https://unpkg.com/@viji-dev/core/dist/docs-api.js\n- TypeScript API types: https://unpkg.com/@viji-dev/core/dist/artist-global.d.ts\n- NPM package: https://www.npmjs.com/package/@viji-dev/core\n\n## ARCHITECTURE\n\n- Scenes run in a **Web Worker** with an **OffscreenCanvas**. There is no DOM.\n- Viji automatically loads **P5.js v1.9.4** when you use `// @renderer p5`.\n- The global `viji` object provides canvas, timing, audio, video, CV, input, sensors, and parameters.\n- **Top-level code** runs once (initialization, parameter declarations, state).\n- **`function render(viji, p5) { ... }`** is called every frame. This is where you draw.\n- Optional **`function setup(viji, p5) { ... }`** runs once for configuration (e.g., `p5.colorMode()`).\n- P5 runs in **instance mode** — every P5 function and constant requires the `p5.` prefix.\n\n## RULES\n\n1. ALWAYS add `// @renderer p5` as the very first line.\n2. ALWAYS use `render(viji, p5)` — not `draw()`. ALWAYS use `setup(viji, p5)` — not `setup()`.\n3. ALWAYS prefix every P5 function and constant with `p5.`:\n   - `background(0)` → `p5.background(0)`\n   - `fill(255)` → `p5.fill(255)`\n   - `PI` → `p5.PI`, `TWO_PI` → `p5.TWO_PI`, `HSB` → `p5.HSB`\n   - `createVector(1, 0)` → `p5.createVector(1, 0)`\n   - `map(v, 0, 1, 0, 255)` → `p5.map(v, 0, 1, 0, 255)`\n   - `noise(x)` → `p5.noise(x)`, `random()` → `p5.random()`\n   This applies to ALL P5 functions and constants without exception.\n4. NEVER call `createCanvas()`. The canvas is created and managed by Viji.\n5. NEVER use `preload()`. Use `viji.image(null, { label: 'Name' })` for images, or `fetch()` in `setup()`.\n6. NEVER use P5 event callbacks: `mousePressed()`, `mouseDragged()`, `mouseReleased()`, `keyPressed()`, `keyReleased()`, `keyTyped()`, `touchStarted()`, `touchMoved()`, `touchEnded()`. Check state in `render()`:\n   - `mouseIsPressed` → `viji.pointer.isDown` or `viji.mouse.isPressed`\n   - `mouseX` / `mouseY` → `viji.pointer.x` / `viji.pointer.y` or `viji.mouse.x` / `viji.mouse.y`\n   - `keyIsPressed` → `viji.keyboard.isPressed('keyName')`\n   - For press-edge detection: `viji.pointer.wasPressed` / `viji.pointer.wasReleased`.\n7. NEVER use `loadImage()`, `loadFont()`, `loadJSON()`, `loadModel()`, `loadShader()`. Use `viji.image()` or `fetch()`.\n8. NEVER use `p5.frameRate()`, `p5.save()`, `p5.saveCanvas()`, `p5.saveFrames()`.\n9. NEVER use `createCapture()`, `createVideo()`. Use `viji.video.*` instead.\n10. NEVER use `p5.dom` or `p5.sound` libraries. Use Viji parameters for UI and `viji.audio.*` for audio.\n11. NEVER access `window`, `document`, `Image()`, or `localStorage`. `fetch()` IS available.\n12. ALWAYS declare parameters at the TOP LEVEL, never inside `render()` or `setup()`.\n13. ALWAYS read parameters via `.value`: `size.value`, `color.value`, `toggle.value`.\n14. ALWAYS use `viji.width` and `viji.height` for canvas dimensions. NEVER hardcode pixel sizes.\n15. ALWAYS use `viji.deltaTime` for frame-rate-independent animation:\n    ```javascript\n    let angle = 0;\n    function render(viji, p5) { angle += speed.value * viji.deltaTime; }\n    ```\n16. NEVER allocate objects, arrays, or strings inside `render()`. Pre-allocate at the top level and reuse.\n17. For image parameters displayed with P5, use `.p5` (not `.value`) with `p5.image()`:\n    ```javascript\n    const photo = viji.image(null, { label: 'Photo' });\n    function render(viji, p5) {\n      if (photo.value) p5.image(photo.p5, 0, 0, viji.width, viji.height);\n    }\n    ```\n18. For video frames with P5, use the drawing context directly:\n    ```javascript\n    if (viji.video.isConnected && viji.video.currentFrame) {\n      p5.drawingContext.drawImage(viji.video.currentFrame, 0, 0, viji.width, viji.height);\n    }\n    ```\n19. `p5.createGraphics()` works (creates OffscreenCanvas internally). Use for off-screen buffers.\n20. Fonts: `p5.textFont()` only with CSS generic names (`monospace`, `serif`, `sans-serif`). `loadFont()` is NOT available.\n21. `p5.tint()` and `p5.blendMode()` work normally.\n22. WEBGL mode is NOT supported. Only use 2D rendering.\n23. `p5.pixelDensity()` defaults to 1 in the worker. `p5.loadPixels()` and `p5.pixels[]` work.\n24. ALWAYS check `viji.audio.isConnected` before using audio data.\n25. ALWAYS check `viji.video.isConnected && viji.video.currentFrame` before drawing video.\n26. NEVER enable CV features by default — use toggle parameters for user opt-in.\n27. `viji.useContext()` is NOT available in P5 scenes — the canvas is managed by P5.\n\n## COMPLETE API REFERENCE\n\nAll `viji.*` members are identical to the native renderer (same object, same types).\n\n### Canvas & Timing\n\n| Member | Type | Description |\n|--------|------|-------------|\n| `viji.canvas` | `OffscreenCanvas` | The canvas element (managed by P5) |\n| `viji.width` | `number` | Current canvas width in pixels |\n| `viji.height` | `number` | Current canvas height in pixels |\n| `viji.time` | `number` | Seconds since scene start |\n| `viji.deltaTime` | `number` | Seconds since last frame |\n| `viji.frameCount` | `number` | Total frames rendered |\n| `viji.fps` | `number` | Current frames per second |\n\nNote: `viji.useContext()` is NOT available in P5. The canvas context is managed by P5 internally.\n\n### Parameters\n\nDeclare at top level. Read `.value` inside `render()`. All support `{ label, description?, group?, category? }`.\nCategory values: `'audio'`, `'video'`, `'interaction'`, `'general'`.\n\n```javascript\nviji.slider(default, { min?, max?, step?, label, group?, category? })   // { value: number }\nviji.color(default, { label, group?, category? })                       // { value: '#rrggbb' }\nviji.toggle(default, { label, group?, category? })                      // { value: boolean }\nviji.select(default, { options: [...], label, group?, category? })      // { value: string|number }\nviji.number(default, { min?, max?, step?, label, group?, category? })   // { value: number }\nviji.text(default, { label, group?, category?, maxLength? })            // { value: string }\nviji.image(null, { label, group?, category? })                          // { value: ImageBitmap|null, p5: P5Image }\nviji.button({ label, description?, group?, category? })                 // { value: boolean } (true one frame)\n```\n\n### Audio — `viji.audio`\n\nALWAYS check `viji.audio.isConnected` first.\n\n| Member | Type | Description |\n|--------|------|-------------|\n| `isConnected` | `boolean` | Whether audio source is active |\n| `volume.current` | `number` | RMS volume 0–1 |\n| `volume.peak` | `number` | Peak amplitude 0–1 |\n| `volume.smoothed` | `number` | Smoothed volume (200ms decay) |\n| `bands.low` | `number` | 20–120 Hz energy 0–1 |\n| `bands.lowMid` | `number` | 120–400 Hz energy 0–1 |\n| `bands.mid` | `number` | 400–1600 Hz energy 0–1 |\n| `bands.highMid` | `number` | 1600–6000 Hz energy 0–1 |\n| `bands.high` | `number` | 6000–16000 Hz energy 0–1 |\n| `bands.lowSmoothed` … `bands.highSmoothed` | `number` | Smoothed variants of each band |\n| `beat.kick` | `number` | Kick energy 0–1 |\n| `beat.snare` | `number` | Snare energy 0–1 |\n| `beat.hat` | `number` | Hi-hat energy 0–1 |\n| `beat.any` | `number` | Any beat energy 0–1 |\n| `beat.kickSmoothed` … `beat.anySmoothed` | `number` | Smoothed beat values |\n| `beat.triggers.kick` | `boolean` | True on kick frame |\n| `beat.triggers.snare` | `boolean` | True on snare frame |\n| `beat.triggers.hat` | `boolean` | True on hat frame |\n| `beat.triggers.any` | `boolean` | True on any beat frame |\n| `beat.events` | `Array<{type,time,strength}>` | Recent beat events |\n| `beat.bpm` | `number` | Estimated BPM (60–240) |\n| `beat.confidence` | `number` | BPM tracking confidence 0–1 |\n| `beat.isLocked` | `boolean` | True when BPM is locked |\n| `spectral.brightness` | `number` | Spectral centroid 0–1 |\n| `spectral.flatness` | `number` | Spectral flatness 0–1 |\n| `getFrequencyData()` | `Uint8Array` | Raw FFT bins (0–255) |\n| `getWaveform()` | `Float32Array` | Time-domain waveform (−1 to 1) |\n\n### Video — `viji.video`\n\nALWAYS check `viji.video.isConnected` first. Check `currentFrame` before drawing.\n\n| Member | Type | Description |\n|--------|------|-------------|\n| `isConnected` | `boolean` | Whether video source is active |\n| `currentFrame` | `OffscreenCanvas\\|ImageBitmap\\|null` | Current video frame |\n| `frameWidth` | `number` | Frame width in pixels |\n| `frameHeight` | `number` | Frame height in pixels |\n| `frameRate` | `number` | Video frame rate |\n| `getFrameData()` | `ImageData\\|null` | Pixel data for CPU access |\n\nDraw video with P5: `p5.drawingContext.drawImage(viji.video.currentFrame, 0, 0, viji.width, viji.height)`\n\n### Computer Vision — `viji.video.cv` & `viji.video.faces/hands/pose/segmentation`\n\nEnable features via toggle parameters (NEVER enable by default):\n\n```javascript\nawait viji.video.cv.enableFaceDetection(true/false);\nawait viji.video.cv.enableFaceMesh(true/false);\nawait viji.video.cv.enableEmotionDetection(true/false);\nawait viji.video.cv.enableHandTracking(true/false);\nawait viji.video.cv.enablePoseDetection(true/false);\nawait viji.video.cv.enableBodySegmentation(true/false);\nviji.video.cv.getActiveFeatures();  // CVFeature[]\nviji.video.cv.isProcessing();       // boolean\n```\n\n**`viji.video.faces: FaceData[]`**\nEach face: `id` (number), `bounds` ({x,y,width,height}), `center` ({x,y}), `confidence` (0–1), `landmarks` ({x,y,z?}[]), `expressions` ({neutral,happy,sad,angry,surprised,disgusted,fearful} all 0–1), `headPose` ({pitch,yaw,roll}), `blendshapes` (52 ARKit coefficients: browDownLeft, browDownRight, browInnerUp, browOuterUpLeft, browOuterUpRight, cheekPuff, cheekSquintLeft, cheekSquintRight, eyeBlinkLeft, eyeBlinkRight, eyeLookDownLeft, eyeLookDownRight, eyeLookInLeft, eyeLookInRight, eyeLookOutLeft, eyeLookOutRight, eyeLookUpLeft, eyeLookUpRight, eyeSquintLeft, eyeSquintRight, eyeWideLeft, eyeWideRight, jawForward, jawLeft, jawOpen, jawRight, mouthClose, mouthDimpleLeft, mouthDimpleRight, mouthFrownLeft, mouthFrownRight, mouthFunnel, mouthLeft, mouthLowerDownLeft, mouthLowerDownRight, mouthPressLeft, mouthPressRight, mouthPucker, mouthRight, mouthRollLower, mouthRollUpper, mouthShrugLower, mouthShrugUpper, mouthSmileLeft, mouthSmileRight, mouthStretchLeft, mouthStretchRight, mouthUpperUpLeft, mouthUpperUpRight, noseSneerLeft, noseSneerRight, tongueOut — all 0–1).\n\n**`viji.video.hands: HandData[]`**\nEach hand: `id` (number), `handedness` ('left'|'right'), `confidence` (0–1), `bounds` ({x,y,width,height}), `landmarks` ({x,y,z}[], 21 points), `palm` ({x,y,z}), `gestures` ({fist,openPalm,peace,thumbsUp,thumbsDown,pointing,iLoveYou} all 0–1 confidence).\n\n**`viji.video.pose: PoseData | null`**\n`confidence` (0–1), `landmarks` ({x,y,z,visibility}[], 33 points), plus body-part arrays: `face` ({x,y}[]), `torso`, `leftArm`, `rightArm`, `leftLeg`, `rightLeg`.\n\n**`viji.video.segmentation: SegmentationData | null`**\n`mask` (Uint8Array, 0=background 255=person), `width`, `height`.\n\n### Input — Pointer (unified mouse/touch) — `viji.pointer`\n\n| Member | Type | Description |\n|--------|------|-------------|\n| `x`, `y` | `number` | Position in pixels |\n| `deltaX`, `deltaY` | `number` | Movement since last frame |\n| `isDown` | `boolean` | True if pressed/touching |\n| `wasPressed` | `boolean` | True on press frame |\n| `wasReleased` | `boolean` | True on release frame |\n| `isInCanvas` | `boolean` | True if inside canvas |\n| `type` | `string` | `'mouse'`, `'touch'`, or `'none'` |\n\n### Input — Mouse — `viji.mouse`\n\n| Member | Type | Description |\n|--------|------|-------------|\n| `x`, `y` | `number` | Position in pixels |\n| `isInCanvas` | `boolean` | Inside canvas bounds |\n| `isPressed` | `boolean` | Any button pressed |\n| `leftButton`, `rightButton`, `middleButton` | `boolean` | Specific buttons |\n| `deltaX`, `deltaY` | `number` | Movement delta |\n| `wheelDelta` | `number` | Scroll wheel delta |\n| `wheelX`, `wheelY` | `number` | Horizontal/vertical scroll |\n| `wasPressed`, `wasReleased`, `wasMoved` | `boolean` | Frame-edge events |\n\n### Input — Keyboard — `viji.keyboard`\n\n| Member | Type | Description |\n|--------|------|-------------|\n| `isPressed(key)` | `boolean` | True while key is held |\n| `wasPressed(key)` | `boolean` | True on key-down frame |\n| `wasReleased(key)` | `boolean` | True on key-up frame |\n| `activeKeys` | `Set<string>` | Currently held keys |\n| `pressedThisFrame` | `Set<string>` | Keys pressed this frame |\n| `releasedThisFrame` | `Set<string>` | Keys released this frame |\n| `lastKeyPressed` | `string` | Most recent key-down |\n| `lastKeyReleased` | `string` | Most recent key-up |\n| `shift`, `ctrl`, `alt`, `meta` | `boolean` | Modifier states |\n\n### Input — Touch — `viji.touches`\n\n| Member | Type | Description |\n|--------|------|-------------|\n| `count` | `number` | Active touch count |\n| `points` | `TouchPoint[]` | All active touches |\n| `started` | `TouchPoint[]` | Touches started this frame |\n| `moved` | `TouchPoint[]` | Touches moved this frame |\n| `ended` | `TouchPoint[]` | Touches ended this frame |\n| `primary` | `TouchPoint\\|null` | First active touch |\n\n**TouchPoint:** `id`, `x`, `y`, `pressure`, `radius`, `radiusX`, `radiusY`, `rotationAngle`, `force`, `isInCanvas`, `deltaX`, `deltaY`, `velocity` ({x,y}), `isNew`, `isActive`, `isEnding`.\n\n### Device Sensors — `viji.device`\n\n| Member | Type | Description |\n|--------|------|-------------|\n| `motion` | `DeviceMotionData\\|null` | Accelerometer/gyroscope |\n| `orientation` | `DeviceOrientationData\\|null` | Device orientation |\n\n**DeviceMotionData:** `acceleration` ({x,y,z} m/s²), `accelerationIncludingGravity`, `rotationRate` ({alpha,beta,gamma} deg/s), `interval` (ms).\n**DeviceOrientationData:** `alpha` (0–360° compass), `beta` (−180–180° tilt), `gamma` (−90–90° tilt), `absolute` (boolean).\n\n### External Devices — `viji.devices`\n\nArray of connected external devices. Each `DeviceState`:\n`id` (string), `name` (string), `motion` (DeviceMotionData|null), `orientation` (DeviceOrientationData|null), `video` (VideoAPI|null — same as viji.video but without CV).\n\n### Streams — `viji.streams`\n\n`VideoAPI[]` — additional video sources provided by the host application (used by the compositor for scene mixing). May be empty. Each element has the same shape as `viji.video`.\n\n## P5 ↔ VIJI MAPPING\n\n| Standard P5.js | Viji-P5 |\n|---|---|\n| `width` / `height` | `viji.width` / `viji.height` |\n| `mouseX` / `mouseY` | `viji.pointer.x` / `viji.pointer.y` |\n| `mouseIsPressed` | `viji.pointer.isDown` |\n| `mouseButton === LEFT` | `viji.mouse.leftButton` |\n| `keyIsPressed` | `viji.keyboard.isPressed('keyName')` |\n| `key` | `viji.keyboard.lastKeyPressed` |\n| `frameCount` | Use `viji.time` or `viji.deltaTime` accumulator |\n| `frameRate(n)` | Remove — host controls frame rate |\n| `createCanvas(w, h)` | Remove — canvas is provided |\n| `preload()` | Remove — use `viji.image()` or `fetch()` in `setup()` |\n| `loadImage(url)` | `viji.image(null, { label: 'Image' })` |\n| `save()` | Remove — host handles capture |\n\n## BEST PRACTICES\n\n1. Use `viji.deltaTime` accumulators for smooth, frame-rate-independent animation.\n2. Guard audio/video with `isConnected` checks.\n3. Pre-allocate all objects/arrays at top level — never inside `render()`.\n4. For CV, use toggle parameters — never enable by default.\n5. Use `p5.drawingContext.drawImage()` for video frames (faster than wrapping).\n6. Use `p5.createGraphics()` for off-screen buffers when needed.\n\n## TEMPLATE\n\n```javascript\n// @renderer p5\n\nconst bgColor = viji.color('#1a1a2e', { label: 'Background' });\nconst speed = viji.slider(1, { min: 0.1, max: 5, label: 'Speed' });\nconst count = viji.slider(8, { min: 3, max: 30, step: 1, label: 'Count' });\n\nlet angle = 0;\n\nfunction setup(viji, p5) {\n  p5.colorMode(p5.HSB, 360, 100, 100);\n}\n\nfunction render(viji, p5) {\n  angle += speed.value * viji.deltaTime;\n\n  p5.background(bgColor.value);\n\n  const cx = viji.width / 2;\n  const cy = viji.height / 2;\n  const radius = p5.min(viji.width, viji.height) * 0.3;\n  const dotSize = p5.min(viji.width, viji.height) * 0.04;\n  const n = p5.floor(count.value);\n\n  p5.noStroke();\n  for (let i = 0; i < n; i++) {\n    const a = angle + (i / n) * p5.TWO_PI;\n    const x = cx + p5.cos(a) * radius;\n    const y = cy + p5.sin(a) * radius;\n    p5.fill((i / n) * 360, 80, 90);\n    p5.circle(x, y, dotSize);\n  }\n}\n```\n\nNow generate a Viji P5 scene based on the artist's description below. Return ONLY the scene code.\nFollow all rules. Use `// @renderer p5` as the first line. Prefix ALL P5 functions with `p5.`. Use `viji.deltaTime` for animation. Use parameters for anything adjustable. Check `isConnected` before using audio or video.\n````\n\n## Usage\n\n1. Copy the entire prompt block above.\n2. Paste it into your AI assistant (ChatGPT, Claude, etc.).\n3. After the prompt, describe the scene you want.\n4. The AI will return a complete Viji P5 scene.\n\n> [!TIP]\n> For better results, mention which data sources you want (audio, video, camera, mouse) and what kind of controls the user should have. If you have existing P5 sketches to convert, use the [Convert: P5 Sketches](/ai-prompts/convert-p5) prompt instead.\n\n## Related\n\n- [Create Your First Scene](/ai-prompts/create-first-scene) — guided prompt for beginners\n- [Prompting Tips](/ai-prompts/prompting-tips) — how to get better results from AI\n- [Convert: P5 Sketches](/ai-prompts/convert-p5) — convert existing P5 sketches to Viji\n- [P5 Quick Start](/p5/quickstart) — your first Viji P5 scene\n- [P5 API Reference](/p5/api-reference) — full API reference\n- [Drawing with P5](/p5/drawing) — Viji-specific P5 drawing guide\n- [p5js.org Reference](https://p5js.org/reference/) — full P5.js documentation"
+        }
+      ]
+    },
+    "ai-prompt-shader": {
+      "id": "ai-prompt-shader",
+      "title": "\"Prompt: Shader Scenes\"",
+      "description": "A complete, self-contained AI prompt for generating Viji GLSL shader scenes from scratch — covers every auto-injected uniform and directive.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Prompt: Shader Scenes\n\nCopy the prompt below and paste it into your AI assistant. Then describe the shader effect you want. The prompt gives the AI everything it needs about Viji's shader renderer to generate a correct, working scene.\n\n## The Prompt\n\n````\nYou are generating a Viji GLSL shader scene — a fragment shader that runs on a fullscreen quad inside a Web Worker.\nArtists describe what they want; you produce complete, working GLSL code. Apply every rule below exactly.\n\n## REFERENCE (for AI assistants with web access)\n\nThis prompt is self-contained — all information needed is included below.\nFor the latest API documentation and type definitions:\n- Complete docs (all pages + examples): https://unpkg.com/@viji-dev/core/dist/docs-api.js\n- TypeScript API types: https://unpkg.com/@viji-dev/core/dist/artist-global.d.ts\n- Shader uniforms reference: https://unpkg.com/@viji-dev/core/dist/shader-uniforms.js\n- NPM package: https://www.npmjs.com/package/@viji-dev/core\n\n## ARCHITECTURE\n\n- Viji renders a **fullscreen quad**. Your shader defines the color of every pixel.\n- Viji **auto-injects** `precision mediump float;` and ALL uniform declarations — both built-in uniforms and parameter uniforms from `@viji-*` directives.\n- You write only helper functions and `void main() { ... }`.\n- **GLSL ES 1.00** by default. Add `#version 300 es` as the very first line for ES 3.00.\n- ES 3.00 requires `out vec4 fragColor;` (before `main`) and `fragColor = ...` instead of `gl_FragColor`.\n- ES 3.00 uses `texture()` instead of `texture2D()`.\n- If the shader uses `fwidth`, Viji auto-injects `#extension GL_OES_standard_derivatives : enable`.\n\n## RULES\n\n1. ALWAYS add `// @renderer shader` as the first line (or after `#version 300 es` if using ES 3.00).\n2. NEVER declare `precision mediump float;` or `precision highp float;` — Viji auto-injects precision.\n3. NEVER redeclare built-in uniforms (`u_time`, `u_resolution`, `u_mouse`, etc.) — they are auto-injected.\n4. NEVER redeclare parameter uniforms — they are auto-generated from `@viji-*` directives.\n5. NEVER use the `u_` prefix for your own parameter names — it is reserved for built-in uniforms. Name parameters descriptively: `speed`, `colorMix`, `intensity`.\n6. `@viji-*` parameter directives ONLY work with `//` comments. NEVER use `/* */` for directives.\n7. ALWAYS use `@viji-accumulator` instead of `u_time * speed` for parameter-driven animation — this prevents jumps when sliders change:\n   ```glsl\n   // @viji-slider:speed label:\"Speed\" default:1.0 min:0.1 max:5.0\n   // @viji-accumulator:phase rate:speed\n   float wave = sin(phase); // smooth, no jumps\n   ```\n8. For `backbuffer` (previous frame), just reference it in code — Viji auto-detects and enables it.\n9. Remove any `#ifdef GL_ES` / `precision` blocks — Viji handles this.\n\n## COMPLETE UNIFORM REFERENCE\n\nAll uniforms below are always available — do NOT declare them.\n\n### Core\n\n| Uniform | Type | Description |\n|---------|------|-------------|\n| `u_resolution` | `vec2` | Canvas width and height in pixels |\n| `u_time` | `float` | Elapsed seconds since scene start |\n| `u_deltaTime` | `float` | Seconds since last frame |\n| `u_frame` | `int` | Current frame number |\n| `u_fps` | `float` | Current frames per second |\n\n### Mouse\n\n| Uniform | Type | Description |\n|---------|------|-------------|\n| `u_mouse` | `vec2` | Mouse position in pixels (WebGL coords: bottom-left origin) |\n| `u_mouseInCanvas` | `bool` | True if mouse is inside canvas |\n| `u_mousePressed` | `bool` | True if any mouse button is pressed |\n| `u_mouseLeft` | `bool` | True if left button is pressed |\n| `u_mouseRight` | `bool` | True if right button is pressed |\n| `u_mouseMiddle` | `bool` | True if middle button is pressed |\n| `u_mouseDelta` | `vec2` | Mouse movement delta per frame |\n| `u_mouseWheel` | `float` | Mouse wheel scroll delta |\n| `u_mouseWasPressed` | `bool` | True on the frame a button was pressed |\n| `u_mouseWasReleased` | `bool` | True on the frame a button was released |\n\n### Keyboard\n\n| Uniform | Type | Description |\n|---------|------|-------------|\n| `u_keySpace` | `bool` | Spacebar |\n| `u_keyShift` | `bool` | Shift key |\n| `u_keyCtrl` | `bool` | Ctrl/Cmd key |\n| `u_keyAlt` | `bool` | Alt/Option key |\n| `u_keyW`, `u_keyA`, `u_keyS`, `u_keyD` | `bool` | WASD keys |\n| `u_keyUp`, `u_keyDown`, `u_keyLeft`, `u_keyRight` | `bool` | Arrow keys |\n| `u_keyboard` | `sampler2D` | Full keyboard state texture (256×3, LUMINANCE). Row 0: held, Row 1: pressed this frame, Row 2: toggle. Access: `texelFetch(u_keyboard, ivec2(keyCode, row), 0).r` |\n\n### Touch\n\n| Uniform | Type | Description |\n|---------|------|-------------|\n| `u_touchCount` | `int` | Number of active touches (0–5) |\n| `u_touch0` – `u_touch4` | `vec2` | Touch point positions in pixels |\n\n### Pointer (unified mouse/touch)\n\n| Uniform | Type | Description |\n|---------|------|-------------|\n| `u_pointer` | `vec2` | Primary input position in pixels (WebGL coords) |\n| `u_pointerDelta` | `vec2` | Primary input movement delta |\n| `u_pointerDown` | `bool` | True if primary input is active |\n| `u_pointerWasPressed` | `bool` | True on frame input became active |\n| `u_pointerWasReleased` | `bool` | True on frame input was released |\n| `u_pointerInCanvas` | `bool` | True if inside canvas |\n\n### Audio — Scalars\n\n| Uniform | Type | Description |\n|---------|------|-------------|\n| `u_audioVolume` | `float` | RMS volume 0–1 |\n| `u_audioPeak` | `float` | Peak amplitude 0–1 |\n| `u_audioVolumeSmoothed` | `float` | Smoothed volume (200ms decay) |\n| `u_audioLow` | `float` | Low band 20–120 Hz |\n| `u_audioLowMid` | `float` | Low-mid 120–400 Hz |\n| `u_audioMid` | `float` | Mid 400–1600 Hz |\n| `u_audioHighMid` | `float` | High-mid 1600–6000 Hz |\n| `u_audioHigh` | `float` | High 6000–16000 Hz |\n| `u_audioLowSmoothed` – `u_audioHighSmoothed` | `float` | Smoothed band variants |\n| `u_audioKick` | `float` | Kick energy 0–1 |\n| `u_audioSnare` | `float` | Snare energy 0–1 |\n| `u_audioHat` | `float` | Hi-hat energy 0–1 |\n| `u_audioAny` | `float` | Any beat energy 0–1 |\n| `u_audioKickSmoothed` – `u_audioAnySmoothed` | `float` | Smoothed beat values |\n| `u_audioKickTrigger` | `bool` | True on kick beat frame |\n| `u_audioSnareTrigger` | `bool` | True on snare beat frame |\n| `u_audioHatTrigger` | `bool` | True on hat beat frame |\n| `u_audioAnyTrigger` | `bool` | True on any beat frame |\n| `u_audioBPM` | `float` | Estimated BPM (60–240) |\n| `u_audioConfidence` | `float` | Beat tracking confidence 0–1 |\n| `u_audioIsLocked` | `bool` | True when BPM is locked |\n| `u_audioBrightness` | `float` | Spectral brightness 0–1 |\n| `u_audioFlatness` | `float` | Spectral flatness 0–1 |\n\n### Audio — Textures\n\n| Uniform | Type | Description |\n|---------|------|-------------|\n| `u_audioFFT` | `sampler2D` | FFT frequency spectrum (1024 bins, 0–255) |\n| `u_audioWaveform` | `sampler2D` | Time-domain waveform (−1 to 1) |\n\n### Video\n\n| Uniform | Type | Description |\n|---------|------|-------------|\n| `u_video` | `sampler2D` | Current video frame texture |\n| `u_videoResolution` | `vec2` | Video frame size in pixels |\n| `u_videoFrameRate` | `float` | Video frame rate |\n| `u_videoConnected` | `bool` | True if video source is active |\n\n### CV — Face Detection\n\n| Uniform | Type | Description |\n|---------|------|-------------|\n| `u_faceCount` | `int` | Number of detected faces (0–1) |\n| `u_face0Bounds` | `vec4` | Bounding box (x, y, width, height) normalized 0–1 |\n| `u_face0Center` | `vec2` | Face center (x, y) normalized 0–1 |\n| `u_face0HeadPose` | `vec3` | Head rotation (pitch, yaw, roll) in degrees |\n| `u_face0Confidence` | `float` | Detection confidence 0–1 |\n| `u_face0Neutral` – `u_face0Fearful` | `float` | 7 expression scores (neutral, happy, sad, angry, surprised, disgusted, fearful) |\n\n**52 Blendshape uniforms** (all `float`, 0–1, ARKit names prefixed with `u_face0`):\n`u_face0BrowDownLeft`, `u_face0BrowDownRight`, `u_face0BrowInnerUp`, `u_face0BrowOuterUpLeft`, `u_face0BrowOuterUpRight`, `u_face0CheekPuff`, `u_face0CheekSquintLeft`, `u_face0CheekSquintRight`, `u_face0EyeBlinkLeft`, `u_face0EyeBlinkRight`, `u_face0EyeLookDownLeft`, `u_face0EyeLookDownRight`, `u_face0EyeLookInLeft`, `u_face0EyeLookInRight`, `u_face0EyeLookOutLeft`, `u_face0EyeLookOutRight`, `u_face0EyeLookUpLeft`, `u_face0EyeLookUpRight`, `u_face0EyeSquintLeft`, `u_face0EyeSquintRight`, `u_face0EyeWideLeft`, `u_face0EyeWideRight`, `u_face0JawForward`, `u_face0JawLeft`, `u_face0JawOpen`, `u_face0JawRight`, `u_face0MouthClose`, `u_face0MouthDimpleLeft`, `u_face0MouthDimpleRight`, `u_face0MouthFrownLeft`, `u_face0MouthFrownRight`, `u_face0MouthFunnel`, `u_face0MouthLeft`, `u_face0MouthLowerDownLeft`, `u_face0MouthLowerDownRight`, `u_face0MouthPressLeft`, `u_face0MouthPressRight`, `u_face0MouthPucker`, `u_face0MouthRight`, `u_face0MouthRollLower`, `u_face0MouthRollUpper`, `u_face0MouthShrugLower`, `u_face0MouthShrugUpper`, `u_face0MouthSmileLeft`, `u_face0MouthSmileRight`, `u_face0MouthStretchLeft`, `u_face0MouthStretchRight`, `u_face0MouthUpperUpLeft`, `u_face0MouthUpperUpRight`, `u_face0NoseSneerLeft`, `u_face0NoseSneerRight`, `u_face0TongueOut`.\n\n### CV — Hands\n\n| Uniform | Type | Description |\n|---------|------|-------------|\n| `u_handCount` | `int` | Number of detected hands (0–2) |\n| `u_leftHandPalm`, `u_rightHandPalm` | `vec3` | Palm position (x, y, z) |\n| `u_leftHandConfidence`, `u_rightHandConfidence` | `float` | Detection confidence 0–1 |\n| `u_leftHandBounds`, `u_rightHandBounds` | `vec4` | Bounding box normalized 0–1 |\n| `u_leftHandFist` – `u_leftHandILoveYou` | `float` | 7 left-hand gesture scores (fist, open, peace, thumbsUp, thumbsDown, pointing, iLoveYou) |\n| `u_rightHandFist` – `u_rightHandILoveYou` | `float` | 7 right-hand gesture scores |\n\n### CV — Pose\n\n| Uniform | Type | Description |\n|---------|------|-------------|\n| `u_poseDetected` | `bool` | True if a pose is detected |\n| `u_poseConfidence` | `float` | Detection confidence 0–1 |\n| `u_nosePosition` | `vec2` | Nose landmark (normalized 0–1) |\n| `u_leftShoulderPosition`, `u_rightShoulderPosition` | `vec2` | Shoulder positions |\n| `u_leftElbowPosition`, `u_rightElbowPosition` | `vec2` | Elbow positions |\n| `u_leftWristPosition`, `u_rightWristPosition` | `vec2` | Wrist positions |\n| `u_leftHipPosition`, `u_rightHipPosition` | `vec2` | Hip positions |\n| `u_leftKneePosition`, `u_rightKneePosition` | `vec2` | Knee positions |\n| `u_leftAnklePosition`, `u_rightAnklePosition` | `vec2` | Ankle positions |\n\n### CV — Body Segmentation\n\n| Uniform | Type | Description |\n|---------|------|-------------|\n| `u_segmentationMask` | `sampler2D` | Segmentation mask (0=background, 1=person) |\n| `u_segmentationRes` | `vec2` | Mask resolution in pixels |\n\n### Device Sensors\n\n| Uniform | Type | Description |\n|---------|------|-------------|\n| `u_deviceAcceleration` | `vec3` | Acceleration without gravity (m/s²) |\n| `u_deviceAccelerationGravity` | `vec3` | Acceleration with gravity (m/s²) |\n| `u_deviceRotationRate` | `vec3` | Rotation rate (deg/s) |\n| `u_deviceOrientation` | `vec3` | Orientation (alpha, beta, gamma) degrees |\n| `u_deviceOrientationAbsolute` | `bool` | True if using magnetometer |\n\n### External Devices\n\n| Uniform | Type | Description |\n|---------|------|-------------|\n| `u_deviceCount` | `int` | Number of device video sources (0–8) |\n| `u_externalDeviceCount` | `int` | Number of external devices (0–8) |\n| `u_device0` – `u_device7` | `sampler2D` | Device camera textures |\n| `u_device0Resolution` – `u_device7Resolution` | `vec2` | Device camera resolutions |\n| `u_device0Connected` – `u_device7Connected` | `bool` | Device connection status |\n| `u_device0Acceleration` – `u_device7Acceleration` | `vec3` | Per-device acceleration |\n| `u_device0AccelerationGravity` – `u_device7AccelerationGravity` | `vec3` | Per-device acceleration w/ gravity |\n| `u_device0RotationRate` – `u_device7RotationRate` | `vec3` | Per-device rotation rate |\n| `u_device0Orientation` – `u_device7Orientation` | `vec3` | Per-device orientation |\n\n### Streams (Compositor)\n\n| Uniform | Type | Description |\n|---------|------|-------------|\n| `u_streamCount` | `int` | Number of active streams (0–8) |\n| `u_stream0` – `u_stream7` | `sampler2D` | Stream textures |\n| `u_stream0Resolution` – `u_stream7Resolution` | `vec2` | Stream resolutions |\n| `u_stream0Connected` – `u_stream7Connected` | `bool` | Stream connection status |\n\nStreams are host-provided video sources used internally by the compositor.\n\n### Backbuffer\n\n| Uniform | Type | Description |\n|---------|------|-------------|\n| `backbuffer` | `sampler2D` | Previous frame (auto-enabled when referenced) |\n\nNo `u_` prefix. RGBA 8-bit, LINEAR filtering, CLAMP_TO_EDGE wrapping. First frame samples as black. Content clears on canvas resize.\nSample: `texture2D(backbuffer, uv)` (ES 1.00) or `texture(backbuffer, uv)` (ES 3.00).\n\n## PARAMETER DIRECTIVES\n\nDeclare with `// @viji-TYPE:uniformName key:value ...` syntax. They become uniforms automatically.\n\n```glsl\n// @viji-slider:speed label:\"Speed\" default:1.0 min:0.1 max:5.0 step:0.1\n//   → uniform float speed;\n\n// @viji-color:tint label:\"Tint\" default:#ff6600\n//   → uniform vec3 tint;  (RGB 0–1)\n\n// @viji-toggle:invert label:\"Invert\" default:false\n//   → uniform bool invert;\n\n// @viji-select:mode label:\"Mode\" default:0 options:[\"Solid\",\"Gradient\",\"Noise\"]\n//   → uniform int mode;  (0-based index)\n\n// @viji-number:count label:\"Count\" default:10.0 min:1.0 max:100.0 step:1.0\n//   → uniform float count;\n\n// @viji-image:tex label:\"Texture\"\n//   → uniform sampler2D tex;\n\n// @viji-button:reset label:\"Reset\"\n//   → uniform bool reset;  (true for one frame on press)\n\n// @viji-accumulator:phase rate:speed\n//   → uniform float phase;  (CPU-side: += speed × deltaTime each frame)\n```\n\nAll directives support `group:\"GroupName\"` and `category:\"audio|video|interaction|general\"`.\n\n## TEMPLATE\n\n```glsl\n// @renderer shader\n// @viji-slider:speed label:\"Speed\" default:1.0 min:0.1 max:5.0\n// @viji-color:baseColor label:\"Color\" default:#ff6600\n// @viji-accumulator:phase rate:speed\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n\n  float wave = sin(uv.x * 10.0 + phase) * 0.5 + 0.5;\n  float pulse = 1.0 + u_audioLow * 0.5;\n  vec3 color = baseColor * wave * pulse;\n\n  gl_FragColor = vec4(color, 1.0);\n}\n```\n\nNow generate a Viji shader scene based on the artist's description below. Return ONLY the GLSL code.\nFollow all rules. Use `// @renderer shader` as the first line. Do NOT declare precision or uniforms. Use `@viji-accumulator` for parameter-driven animation. Use `@viji-slider/color/toggle` for artist controls.\n````\n\n## Usage\n\n1. Copy the entire prompt block above.\n2. Paste it into your AI assistant (ChatGPT, Claude, etc.).\n3. After the prompt, describe the shader effect you want.\n4. The AI will return a complete Viji shader scene.\n\n> [!TIP]\n> For better results, describe the visual effect you want (patterns, colors, motion), mention data sources (audio, video, mouse), and what controls the user should have. If you have existing Shadertoy shaders to convert, use the [Convert: Shadertoy](/ai-prompts/convert-shadertoy) prompt instead.\n\n## Related\n\n- [Create Your First Scene](/ai-prompts/create-first-scene) — guided prompt for beginners\n- [Prompting Tips](/ai-prompts/prompting-tips) — how to get better results from AI\n- [Convert: Shadertoy](/ai-prompts/convert-shadertoy) — convert existing Shadertoy shaders to Viji\n- [Shader Quick Start](/shader/quickstart) — your first Viji shader\n- [Shader API Reference](/shader/api-reference) — full uniform reference\n- [Backbuffer & Feedback](/shader/backbuffer) — previous-frame feedback effects\n- [Shadertoy Compatibility](/shader/shadertoy) — compatibility layer for Shadertoy code"
+        }
+      ]
+    },
+    "ai-prompting-tips": {
+      "id": "ai-prompting-tips",
+      "title": "\"Prompting Tips\"",
+      "description": "Human-readable advice for getting the best results when using AI to create Viji scenes.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Prompting Tips\n\nThese tips help you communicate with AI assistants more effectively when creating Viji scenes. No coding knowledge required — just better descriptions lead to better results.\n\n## Start With What You See\n\nDescribe the visual, not the code. AI assistants are great at translating visual descriptions into working scenes.\n\n**Vague (harder for AI):**\n> \"Make something cool with audio\"\n\n**Specific (better results):**\n> \"A field of circles that pulse outward from the center when the bass hits. Use warm colors — oranges and reds. The circles should fade out as they expand.\"\n\n### What to Include in Your Description\n\n- **Shapes and objects**: circles, lines, particles, grid, waves, text, images\n- **Colors and mood**: warm, cool, neon, pastel, monochrome, gradient, dark background\n- **Motion**: spinning, pulsing, flowing, bouncing, drifting, exploding, morphing\n- **Data sources**: \"reacts to music,\" \"uses the camera,\" \"follows the mouse,\" \"responds to device tilt\"\n- **Controls**: \"let me adjust the speed,\" \"add a color picker,\" \"toggle the effect on/off\"\n\n## Build Up, Don't Over-specify\n\nStart with a simple version and iterate. This gives you a working base to refine.\n\n**Round 1** — Get the basics:\n> \"Colorful particles that float upward and fade out\"\n\n**Round 2** — Add reactivity:\n> \"Make them react to audio — spawn more particles on kick beats, and make particle size follow the bass level\"\n\n**Round 3** — Polish:\n> \"Add a slider for particle count, a color picker for the base color, and make the background slowly shift hue over time\"\n\nThis iterative approach works better than a single long prompt because you can see each step and correct course.\n\n## Request Specific Data Sources\n\nBe explicit about what should drive the visuals:\n\n| You want... | Say... |\n|---|---|\n| Audio-reactive | \"React to the music,\" \"pulse with the bass,\" \"follow the beat\" |\n| Camera/video | \"Use the camera feed,\" \"show the video as a background\" |\n| Face tracking | \"Track my face,\" \"use face expressions,\" \"follow eye blinks\" |\n| Hand tracking | \"Track my hands,\" \"respond to gestures,\" \"follow palm position\" |\n| Pose detection | \"Track my body,\" \"use body position,\" \"full body skeleton\" |\n| Mouse/touch | \"Follow the mouse,\" \"draw where I touch,\" \"drag to control\" |\n| Device tilt | \"Respond to tilting the phone,\" \"use accelerometer\" |\n| Keyboard | \"Use arrow keys to move,\" \"press space to trigger\" |\n\n## Request Parameters\n\nParameters give you sliders, toggles, and other controls in the Viji UI. Ask for them explicitly:\n\n> \"Add a slider for speed from 0.1 to 5\"\n> \"Add a color picker for the main color\"\n> \"Add a toggle to enable/disable the camera effect\"\n> \"Let me choose between 3 blend modes with a dropdown\"\n> \"Add an image upload for a texture\"\n\n## Choose the Right Renderer\n\nIf you're not sure which renderer to use, the [Create Your First Scene](/ai-prompts/create-first-scene) prompt will help you decide. But here's a quick guide:\n\n| If you want... | Use... |\n|---|---|\n| Familiar creative coding (shapes, colors, transforms) | **P5** |\n| Full control, Three.js, complex state | **Native** |\n| GPU patterns, fractals, raymarching | **Shader** |\n| Video post-processing | **Shader** or **Native** |\n| Particle systems with physics | **Native** |\n| Audio visualizer with bars/circles | **P5** or **Native** |\n| Abstract generative art | **Shader** |\n\n## Troubleshoot Common AI Mistakes\n\nIf the generated scene doesn't work, here are common issues and how to fix them:\n\n| Symptom | Likely cause | What to tell the AI |\n|---|---|---|\n| Jerky or speed-dependent animation | Using frame count instead of time | \"Use `viji.deltaTime` for animation, not frame counting\" |\n| Nothing renders / blank screen | Missing `isConnected` check | \"Check `isConnected` before using audio/video data\" |\n| P5 functions don't work | Missing `p5.` prefix | \"Every P5 function needs the `p5.` prefix — it's instance mode\" |\n| Shader compilation error | Redeclared uniforms | \"Don't declare `precision`, `u_time`, or other built-in uniforms — Viji injects them\" |\n| Shader animation jumps when slider moves | Using `u_time * speed` | \"Use `@viji-accumulator` instead of multiplying `u_time` by a parameter\" |\n| Parameters not appearing | Declared inside render | \"Move parameter declarations to the top level, outside `render()`\" |\n| Images/fonts won't load | Using `loadImage()`/`loadFont()` | \"Use `viji.image()` for images. For fonts, use CSS generic names like `monospace`\" |\n| DOM errors | Accessing `window`/`document` | \"The scene runs in a Web Worker — there's no DOM. Use `viji.*` for everything\" |\n| P5 canvas wrong size | Called `createCanvas()` | \"Don't call `createCanvas()` — Viji manages the canvas\" |\n| Camera not showing | Not using Viji video API | \"Use `viji.video.currentFrame` to get the camera feed, not `createCapture()`\" |\n\n## Tips for Non-Coders\n\nIf you've never written code:\n\n1. **Use the guided prompt**: Start with [Create Your First Scene](/ai-prompts/create-first-scene) — it asks you questions and guides the process.\n2. **Describe what you see**: Talk about colors, shapes, and motion. Don't worry about code.\n3. **Ask for explanations**: Say \"explain what each part does\" and the AI will add comments.\n4. **Iterate**: \"Make the circles bigger,\" \"change the color to blue,\" \"make it faster.\"\n5. **Ask for parameters**: \"Add controls so I can adjust the speed and colors without code.\"\n\n## Advanced Prompting\n\n### Combining Effects\n\nYou can describe multiple layers of behavior:\n\n> \"A particle field that reacts to audio beats — particles explode outward on kick beats and slowly drift back. Overlay the camera feed in the background with a slight blur. Add a slider for particle count and a toggle to show/hide the camera.\"\n\n### Converting Existing Code\n\nIf you have code from other platforms:\n\n- **P5.js sketches** → Use [Convert: P5 Sketches](/ai-prompts/convert-p5)\n- **Shadertoy shaders** → Use [Convert: Shadertoy](/ai-prompts/convert-shadertoy)\n- **Three.js scenes** → Use [Convert: Three.js](/ai-prompts/convert-threejs)\n\n### Getting Maximum Quality\n\nFor the most accurate results, use the full renderer-specific prompts instead of the beginner prompt:\n\n- [Prompt: Native Scenes](/ai-prompts/native-prompt) — complete Native API\n- [Prompt: P5 Scenes](/ai-prompts/p5-prompt) — complete P5 API\n- [Prompt: Shader Scenes](/ai-prompts/shader-prompt) — complete Shader API (270+ uniforms)\n\nThese contain the entire API surface, ensuring the AI never misses a feature or uses incorrect syntax.\n\n## Related\n\n- [Create Your First Scene](/ai-prompts/create-first-scene) — guided prompt for beginners\n- [Best Practices](/getting-started/best-practices) — essential patterns for robust scenes\n- [Common Mistakes](/getting-started/common-mistakes) — pitfalls to avoid"
         }
       ]
     },
@@ -922,13 +1014,13 @@ export const docsApi = {
         },
         {
           "type": "text",
-          "markdown": "### What's Happening\r\n\r\n**Top level — runs once:**\r\n\r\n- `viji.color()` and `viji.slider()` create parameters that appear in the UI. They must be declared at the top level, not inside `render()`.\r\n\r\n**`render(viji)` — called every frame:**\r\n\r\n- `viji.useContext('2d')` returns a standard `CanvasRenderingContext2D`. Call it once; the context is cached.\r\n- `viji.width` and `viji.height` give the current canvas size — use them instead of hardcoded pixels.\r\n- `viji.time` is elapsed seconds since the scene started — use it for animation.\r\n- Each parameter's `.value` is read inside `render()` and updates live as the user moves sliders.\r\n\r\n> [!NOTE]\r\n> Parameters must be defined at the top level of your scene, not inside `render()`. They are registered once during initialization. Defining them inside `render()` would re-register the parameter every frame, resetting its value to the default and making user changes ineffective.\r\n\r\n## Scene Structure\r\n\r\nA native scene has two parts:\r\n\r\n```javascript\r\n// 1. Top level — initialization, parameters, state\r\nconst speed = viji.slider(1, { min: 0.1, max: 5, label: 'Speed' });\r\nlet angle = 0;\r\n\r\n// 2. render() — called every frame\r\nfunction render(viji) {\r\n  const ctx = viji.useContext('2d');\r\n  angle += speed.value * viji.deltaTime;\r\n  // ... draw using ctx\r\n}\r\n```\r\n\r\n- **No `setup()` function.** All initialization happens at the top level. Top-level `await` is supported for dynamic imports.\r\n- **`render(viji)` is the only required function.** It receives the Viji API object with canvas, timing, audio, video, parameters, and interaction data.\r\n\r\n## Canvas Context\r\n\r\nUse `viji.useContext()` to get a rendering context:\r\n\r\n```javascript\r\nconst ctx = viji.useContext('2d');     // Canvas 2D\r\nconst gl = viji.useContext('webgl');   // WebGL 1\r\nconst gl2 = viji.useContext('webgl2'); // WebGL 2\r\n```\r\n\r\nPick one and use it consistently — switching context types discards the previous one.\r\n\r\n## Essential Patterns\r\n\r\n> [!NOTE]\r\n> Always use `viji.width` and `viji.height` for positioning and sizing, and `viji.deltaTime` for frame-rate-independent animation. Never hardcode pixel values or assume a specific frame rate.\r\n\r\n> [!WARNING]\r\n> Scenes run in a Web Worker — there is no `window`, `document`, `Image()`, `localStorage`, or any DOM API. All inputs (audio, video, images) are provided through the Viji API. Note: `fetch()` IS available and can be used to load external data (JSON, etc.) from CDNs.\r\n\r\n> [!TIP]\r\n> Avoid allocating objects, arrays, or strings inside `render()`. Pre-allocate at the top level and reuse them:\r\n> ```javascript\r\n> // Good — pre-allocated\r\n> const pos = { x: 0, y: 0 };\r\n> function render(viji) {\r\n>   pos.x = viji.width / 2;\r\n>   pos.y = viji.height / 2;\r\n> }\r\n>\r\n> // Bad — creates a new object every frame\r\n> function render(viji) {\r\n>   const pos = { x: viji.width / 2, y: viji.height / 2 };\r\n> }\r\n> ```\r\n\r\n## External Libraries\r\n\r\nTop-level `await` lets you load libraries from a CDN:\r\n\r\n```javascript\r\nconst THREE = await import('https://esm.sh/three@0.160.0');\r\n// ... set up your Three.js scene at the top level\r\nfunction render(viji) { /* ... */ }\r\n```\r\n\r\nSee [External Libraries](/native/external-libraries) for detailed patterns.\r\n\r\n## TypeScript Support\r\n\r\nThe Viji editor provides full TypeScript support with autocomplete and type checking out of the box. All Viji types — `VijiAPI`, `SliderParameter`, `AudioAPI`, `MouseAPI`, and others — are available globally without imports. Add type annotations to get full IntelliSense:\r\n\r\n```typescript\r\nfunction render(viji: VijiAPI) {\r\n  const ctx = viji.useContext('2d'); // ctx is typed as CanvasRenderingContext2D\r\n  // ... full autocomplete for viji.audio, viji.mouse, etc.\r\n}\r\n```\r\n\r\nTypeScript is optional — the same code works as plain JavaScript without the annotations."
+          "markdown": "### What's Happening\r\n\r\n**Top level — runs once:**\r\n\r\n- `viji.color()` and `viji.slider()` create parameters that appear in the UI. They must be declared at the top level, not inside `render()`.\r\n\r\n**`render(viji)` — called every frame:**\r\n\r\n- `viji.useContext('2d')` returns a standard `CanvasRenderingContext2D`. Call it once; the context is cached.\r\n- `viji.width` and `viji.height` give the current canvas size — use them instead of hardcoded pixels.\r\n- `viji.time` is elapsed seconds since the scene started — use it for animation.\r\n- Each parameter's `.value` is read inside `render()` and updates live as the user moves sliders.\r\n\r\n> [!NOTE]\r\n> Parameters must be defined at the top level of your scene, not inside `render()`. They are registered once during initialization. Defining them inside `render()` would re-register the parameter every frame, resetting its value to the default and making user changes ineffective.\r\n\r\n## Scene Structure\r\n\r\nA native scene has two parts:\r\n\r\n```javascript\r\n// 1. Top level — initialization, parameters, state\r\nconst speed = viji.slider(1, { min: 0.1, max: 5, label: 'Speed' });\r\nlet angle = 0;\r\n\r\n// 2. render() — called every frame\r\nfunction render(viji) {\r\n  const ctx = viji.useContext('2d');\r\n  angle += speed.value * viji.deltaTime;\r\n  // ... draw using ctx\r\n}\r\n```\r\n\r\n- **No `setup()` function.** All initialization happens at the top level. Top-level `await` is supported for dynamic imports.\r\n- **`render(viji)` is the only required function.** It receives the Viji API object with canvas, timing, audio, video, parameters, and interaction data.\r\n\r\n## Canvas Context\r\n\r\nUse `viji.useContext()` to get a rendering context:\r\n\r\n```javascript\r\nconst ctx = viji.useContext('2d');     // Canvas 2D\r\nconst gl = viji.useContext('webgl');   // WebGL 1\r\nconst gl2 = viji.useContext('webgl2'); // WebGL 2\r\n```\r\n\r\nPick one and use it for the entire scene — a canvas only supports one context type, and requesting a different type returns `null`.\r\n\r\n## Essential Patterns\r\n\r\n> [!NOTE]\r\n> Always use `viji.width` and `viji.height` for positioning and sizing, and `viji.deltaTime` for frame-rate-independent animation. Never hardcode pixel values or assume a specific frame rate.\r\n\r\n> [!WARNING]\r\n> Scenes run in a Web Worker — there is no `window`, `document`, `Image()`, `localStorage`, or any DOM API. All inputs (audio, video, images) are provided through the Viji API. Note: `fetch()` IS available and can be used to load external data (JSON, etc.) from CDNs.\r\n\r\n> [!TIP]\r\n> Avoid allocating objects, arrays, or strings inside `render()`. Pre-allocate at the top level and reuse them:\r\n> ```javascript\r\n> // Good — pre-allocated\r\n> const pos = { x: 0, y: 0 };\r\n> function render(viji) {\r\n>   pos.x = viji.width / 2;\r\n>   pos.y = viji.height / 2;\r\n> }\r\n>\r\n> // Bad — creates a new object every frame\r\n> function render(viji) {\r\n>   const pos = { x: viji.width / 2, y: viji.height / 2 };\r\n> }\r\n> ```\r\n\r\n## External Libraries\r\n\r\nTop-level `await` lets you load libraries from a CDN:\r\n\r\n```javascript\r\nconst THREE = await import('https://esm.sh/three@0.160.0');\r\n// ... set up your Three.js scene at the top level\r\nfunction render(viji) { /* ... */ }\r\n```\r\n\r\nSee [External Libraries](/native/external-libraries) for detailed patterns.\r\n\r\n## TypeScript Support\r\n\r\nThe Viji editor provides built-in TypeScript support with autocomplete, inline hints, and type checking. All Viji types — `VijiAPI`, `SliderParameter`, `AudioAPI`, `MouseAPI`, and others — are available globally without imports. Add type annotations for richer editor assistance:\r\n\r\n```typescript\r\nfunction render(viji: VijiAPI) {\r\n  const ctx = viji.useContext('2d'); // ctx is typed as CanvasRenderingContext2D\r\n  // ... full autocomplete for viji.audio, viji.mouse, etc.\r\n}\r\n```\r\n\r\nTypeScript is optional — the same code works as plain JavaScript without the annotations."
         },
         {
           "type": "live-example",
           "title": "TypeScript Scene",
-          "sceneCode": "const speed = viji.slider(1, { min: 0.1, max: 5, label: 'Speed' });\r\nconst size = viji.slider(0.05, { min: 0.02, max: 0.15, step: 0.01, label: 'Size' });\r\nconst color = viji.color('#ff6600', { label: 'Color' });\r\n\r\nlet angle = 0;\r\n\r\nfunction render(viji) {\r\n  const ctx = viji.useContext('2d');\r\n  const w = viji.width;\r\n  const h = viji.height;\r\n\r\n  angle += speed.value * viji.deltaTime;\r\n\r\n  ctx.fillStyle = '#0a0a2e';\r\n  ctx.fillRect(0, 0, w, h);\r\n\r\n  const cx = w / 2 + Math.cos(angle) * w * 0.3;\r\n  const cy = h / 2 + Math.sin(angle) * h * 0.3;\r\n  const r = Math.min(w, h) * size.value;\r\n\r\n  ctx.beginPath();\r\n  ctx.arc(cx, cy, r, 0, Math.PI * 2);\r\n  ctx.fillStyle = color.value;\r\n  ctx.fill();\r\n}\r\n",
-          "sceneFile": "quickstart-ts.scene.js"
+          "sceneCode": "const speed: SliderParameter = viji.slider(1, { min: 0.1, max: 5, label: 'Speed' });\r\nconst size: SliderParameter = viji.slider(0.05, { min: 0.02, max: 0.15, step: 0.01, label: 'Size' });\r\nconst color: ColorParameter = viji.color('#ff6600', { label: 'Color' });\r\n\r\nlet angle: number = 0;\r\n\r\nfunction render(viji: VijiAPI) {\r\n  const ctx = viji.useContext('2d');\r\n  const w: number = viji.width;\r\n  const h: number = viji.height;\r\n\r\n  angle += speed.value * viji.deltaTime;\r\n\r\n  ctx.fillStyle = '#0a0a2e';\r\n  ctx.fillRect(0, 0, w, h);\r\n\r\n  const cx: number = w / 2 + Math.cos(angle) * w * 0.3;\r\n  const cy: number = h / 2 + Math.sin(angle) * h * 0.3;\r\n  const r: number = Math.min(w, h) * size.value;\r\n\r\n  ctx.beginPath();\r\n  ctx.arc(cx, cy, r, 0, Math.PI * 2);\r\n  ctx.fillStyle = color.value;\r\n  ctx.fill();\r\n}\r\n",
+          "sceneFile": "quickstart-ts.scene.ts"
         },
         {
           "type": "text",
@@ -936,6 +1028,17 @@ export const docsApi = {
         }
       ]
     },
+    "native-api-reference": {
+      "id": "native-api-reference",
+      "title": "API Reference",
+      "description": "Complete reference of every property and method available on the viji object in Native renderer scenes.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# API Reference\n\nThis page lists every property and method available on the `viji` object passed to your scene functions. Use it as a quick lookup — each entry links to its dedicated documentation page for full details, examples, and patterns.\n\nNew to Viji? Start with the [Quick Start](/native/quickstart) instead.\n\n## Entry Points\n\n```javascript\nfunction setup(viji) {\n  // Called once when the scene starts (optional)\n}\n\nfunction render(viji) {\n  // Called every frame\n}\n```\n\n## Canvas & Context\n\n| Member | Type | Description | Details |\n|--------|------|-------------|---------|\n| [`viji.canvas`](/native/canvas-context) | `OffscreenCanvas` | The rendering canvas | [Canvas & Context](/native/canvas-context) |\n| [`viji.ctx`](/native/canvas-context) | `OffscreenCanvasRenderingContext2D` | 2D context (after `useContext('2d')`) | [Canvas & Context](/native/canvas-context) |\n| [`viji.gl`](/native/canvas-context) | `WebGLRenderingContext \\| WebGL2RenderingContext` | WebGL context (after `useContext('webgl'\\|'webgl2')`) | [Canvas & Context](/native/canvas-context) |\n| [`viji.width`](/native/canvas-context) | `number` | Canvas width in pixels | [Canvas & Context](/native/canvas-context) |\n| [`viji.height`](/native/canvas-context) | `number` | Canvas height in pixels | [Canvas & Context](/native/canvas-context) |\n| [`viji.useContext(type)`](/native/canvas-context) | `Method` | Request a rendering context: `'2d'`, `'webgl'`, `'webgl2'` | [Canvas & Context](/native/canvas-context) |\n\n## Timing\n\n| Member | Type | Description | Details |\n|--------|------|-------------|---------|\n| [`viji.time`](/native/timing) | `number` | Seconds elapsed since the scene started | [Timing](/native/timing) |\n| [`viji.deltaTime`](/native/timing) | `number` | Seconds since the previous frame | [Timing](/native/timing) |\n| [`viji.frameCount`](/native/timing) | `number` | Monotonically increasing frame counter | [Timing](/native/timing) |\n| [`viji.fps`](/native/timing) | `number` | Target FPS based on the host's frame rate mode | [Timing](/native/timing) |\n\n## Parameters\n\nAll parameter methods are called at the top level of your scene file. Read `.value` inside `render()` to get the current value.\n\n| Method | Returns | `.value` Type | Details |\n|--------|---------|---------------|---------|\n| [`viji.slider(default, config)`](/native/parameters/slider) | `SliderParameter` | `number` | [Slider](/native/parameters/slider) |\n| [`viji.color(default, config)`](/native/parameters/color) | `ColorParameter` | `string` (hex) | [Color](/native/parameters/color) |\n| [`viji.toggle(default, config)`](/native/parameters/toggle) | `ToggleParameter` | `boolean` | [Toggle](/native/parameters/toggle) |\n| [`viji.select(default, config)`](/native/parameters/select) | `SelectParameter` | `string \\| number` | [Select](/native/parameters/select) |\n| [`viji.number(default, config)`](/native/parameters/number) | `NumberParameter` | `number` | [Number](/native/parameters/number) |\n| [`viji.text(default, config)`](/native/parameters/text) | `TextParameter` | `string` | [Text](/native/parameters/text) |\n| [`viji.image(null, config)`](/native/parameters/image) | `ImageParameter` | `ImageBitmap \\| null` | [Image](/native/parameters/image) |\n| [`viji.button(config)`](/native/parameters/button) | `ButtonParameter` | `boolean` (true for one frame) | [Button](/native/parameters/button) |\n\nSee [Parameters Overview](/native/parameters) for the declaration pattern, [Grouping](/native/parameters/grouping) and [Categories](/native/parameters/categories) for organization.\n\n## Audio\n\n| Member | Type | Description | Details |\n|--------|------|-------------|---------|\n| [`viji.audio.isConnected`](/native/audio) | `boolean` | Whether an audio source is active | [Overview](/native/audio) |\n| [`viji.audio.volume.current`](/native/audio/volume) | `number` | Current RMS volume 0–1 | [Volume](/native/audio/volume) |\n| [`viji.audio.volume.peak`](/native/audio/volume) | `number` | Peak volume 0–1 | [Volume](/native/audio/volume) |\n| [`viji.audio.volume.smoothed`](/native/audio/volume) | `number` | Smoothed volume 0–1 | [Volume](/native/audio/volume) |\n| [`viji.audio.bands.low`](/native/audio/bands) | `number` | Low frequency band energy (20–120 Hz) | [Frequency Bands](/native/audio/bands) |\n| [`viji.audio.bands.lowMid`](/native/audio/bands) | `number` | Low-mid band energy (120–500 Hz) | [Frequency Bands](/native/audio/bands) |\n| [`viji.audio.bands.mid`](/native/audio/bands) | `number` | Mid band energy (500–2 kHz) | [Frequency Bands](/native/audio/bands) |\n| [`viji.audio.bands.highMid`](/native/audio/bands) | `number` | High-mid band energy (2–6 kHz) | [Frequency Bands](/native/audio/bands) |\n| [`viji.audio.bands.high`](/native/audio/bands) | `number` | High band energy (6–16 kHz) | [Frequency Bands](/native/audio/bands) |\n| [`viji.audio.bands.lowSmoothed`](/native/audio/bands) | `number` | Smoothed low band | [Frequency Bands](/native/audio/bands) |\n| [`viji.audio.bands.lowMidSmoothed`](/native/audio/bands) | `number` | Smoothed low-mid band | [Frequency Bands](/native/audio/bands) |\n| [`viji.audio.bands.midSmoothed`](/native/audio/bands) | `number` | Smoothed mid band | [Frequency Bands](/native/audio/bands) |\n| [`viji.audio.bands.highMidSmoothed`](/native/audio/bands) | `number` | Smoothed high-mid band | [Frequency Bands](/native/audio/bands) |\n| [`viji.audio.bands.highSmoothed`](/native/audio/bands) | `number` | Smoothed high band | [Frequency Bands](/native/audio/bands) |\n| [`viji.audio.beat.kick`](/native/audio/beat) | `number` | Kick beat energy | [Beat Detection](/native/audio/beat) |\n| [`viji.audio.beat.snare`](/native/audio/beat) | `number` | Snare beat energy | [Beat Detection](/native/audio/beat) |\n| [`viji.audio.beat.hat`](/native/audio/beat) | `number` | Hi-hat beat energy | [Beat Detection](/native/audio/beat) |\n| [`viji.audio.beat.any`](/native/audio/beat) | `number` | Combined beat energy | [Beat Detection](/native/audio/beat) |\n| [`viji.audio.beat.kickSmoothed`](/native/audio/beat) | `number` | Smoothed kick | [Beat Detection](/native/audio/beat) |\n| [`viji.audio.beat.snareSmoothed`](/native/audio/beat) | `number` | Smoothed snare | [Beat Detection](/native/audio/beat) |\n| [`viji.audio.beat.hatSmoothed`](/native/audio/beat) | `number` | Smoothed hi-hat | [Beat Detection](/native/audio/beat) |\n| [`viji.audio.beat.anySmoothed`](/native/audio/beat) | `number` | Smoothed combined | [Beat Detection](/native/audio/beat) |\n| [`viji.audio.beat.triggers.kick`](/native/audio/beat) | `boolean` | Kick trigger (true for one frame) | [Beat Detection](/native/audio/beat) |\n| [`viji.audio.beat.triggers.snare`](/native/audio/beat) | `boolean` | Snare trigger (true for one frame) | [Beat Detection](/native/audio/beat) |\n| [`viji.audio.beat.triggers.hat`](/native/audio/beat) | `boolean` | Hi-hat trigger (true for one frame) | [Beat Detection](/native/audio/beat) |\n| [`viji.audio.beat.triggers.any`](/native/audio/beat) | `boolean` | Any beat trigger (true for one frame) | [Beat Detection](/native/audio/beat) |\n| [`viji.audio.beat.events`](/native/audio/beat) | `Array<{ type, time, strength }>` | Beat events this frame | [Beat Detection](/native/audio/beat) |\n| [`viji.audio.beat.bpm`](/native/audio/beat) | `number` | Tracked BPM | [Beat Detection](/native/audio/beat) |\n| [`viji.audio.beat.confidence`](/native/audio/beat) | `number` | Beat-tracker confidence 0–1 | [Beat Detection](/native/audio/beat) |\n| [`viji.audio.beat.isLocked`](/native/audio/beat) | `boolean` | Whether beat tracking is locked | [Beat Detection](/native/audio/beat) |\n| [`viji.audio.spectral.brightness`](/native/audio/spectral) | `number` | Spectral brightness 0–1 | [Spectral Analysis](/native/audio/spectral) |\n| [`viji.audio.spectral.flatness`](/native/audio/spectral) | `number` | Spectral flatness 0–1 | [Spectral Analysis](/native/audio/spectral) |\n| [`viji.audio.getFrequencyData()`](/native/audio/frequency-data) | `() => Uint8Array` | Raw FFT frequency bins (0–255) | [Frequency Data](/native/audio/frequency-data) |\n| [`viji.audio.getWaveform()`](/native/audio/waveform) | `() => Float32Array` | Time-domain waveform (-1 to 1) | [Waveform](/native/audio/waveform) |\n\n## Video & CV\n\n| Member | Type | Description | Details |\n|--------|------|-------------|---------|\n| [`viji.video.isConnected`](/native/video) | `boolean` | Whether a video source is active | [Overview](/native/video) |\n| [`viji.video.currentFrame`](/native/video/basics) | `OffscreenCanvas \\| ImageBitmap \\| null` | Current video frame | [Video Basics](/native/video/basics) |\n| [`viji.video.frameWidth`](/native/video/basics) | `number` | Frame width in pixels | [Video Basics](/native/video/basics) |\n| [`viji.video.frameHeight`](/native/video/basics) | `number` | Frame height in pixels | [Video Basics](/native/video/basics) |\n| [`viji.video.frameRate`](/native/video/basics) | `number` | Video frame rate | [Video Basics](/native/video/basics) |\n| [`viji.video.getFrameData()`](/native/video/basics) | `() => ImageData \\| null` | Pixel data for the current frame | [Video Basics](/native/video/basics) |\n| [`viji.video.faces`](/native/video/face-detection) | `FaceData[]` | Detected faces | [Face Detection](/native/video/face-detection) |\n| [`viji.video.hands`](/native/video/hand-tracking) | `HandData[]` | Detected hands | [Hand Tracking](/native/video/hand-tracking) |\n| [`viji.video.pose`](/native/video/pose-detection) | `PoseData \\| null` | Detected body pose | [Pose Detection](/native/video/pose-detection) |\n| [`viji.video.segmentation`](/native/video/body-segmentation) | `SegmentationData \\| null` | Body segmentation mask | [Body Segmentation](/native/video/body-segmentation) |\n| [`viji.video.cv.enableFaceDetection(enabled)`](/native/video/face-detection) | `(boolean) => Promise<void>` | Enable/disable face detection | [Face Detection](/native/video/face-detection) |\n| [`viji.video.cv.enableFaceMesh(enabled)`](/native/video/face-mesh) | `(boolean) => Promise<void>` | Enable/disable face mesh | [Face Mesh](/native/video/face-mesh) |\n| [`viji.video.cv.enableEmotionDetection(enabled)`](/native/video/emotion-detection) | `(boolean) => Promise<void>` | Enable/disable emotion detection | [Emotion Detection](/native/video/emotion-detection) |\n| [`viji.video.cv.enableHandTracking(enabled)`](/native/video/hand-tracking) | `(boolean) => Promise<void>` | Enable/disable hand tracking | [Hand Tracking](/native/video/hand-tracking) |\n| [`viji.video.cv.enablePoseDetection(enabled)`](/native/video/pose-detection) | `(boolean) => Promise<void>` | Enable/disable pose detection | [Pose Detection](/native/video/pose-detection) |\n| [`viji.video.cv.enableBodySegmentation(enabled)`](/native/video/body-segmentation) | `(boolean) => Promise<void>` | Enable/disable body segmentation | [Body Segmentation](/native/video/body-segmentation) |\n| [`viji.video.cv.getActiveFeatures()`](/native/video) | `() => CVFeature[]` | List of active CV features | [Overview](/native/video) |\n| [`viji.video.cv.isProcessing()`](/native/video) | `() => boolean` | Whether CV is currently processing | [Overview](/native/video) |\n\n## Mouse\n\n| Member | Type | Description | Details |\n|--------|------|-------------|---------|\n| [`viji.mouse.x`](/native/mouse) | `number` | Cursor X position in pixels | [Mouse](/native/mouse) |\n| [`viji.mouse.y`](/native/mouse) | `number` | Cursor Y position in pixels | [Mouse](/native/mouse) |\n| [`viji.mouse.isInCanvas`](/native/mouse) | `boolean` | Whether cursor is inside the canvas | [Mouse](/native/mouse) |\n| [`viji.mouse.isPressed`](/native/mouse) | `boolean` | Whether any button is pressed | [Mouse](/native/mouse) |\n| [`viji.mouse.leftButton`](/native/mouse) | `boolean` | Left button state | [Mouse](/native/mouse) |\n| [`viji.mouse.rightButton`](/native/mouse) | `boolean` | Right button state | [Mouse](/native/mouse) |\n| [`viji.mouse.middleButton`](/native/mouse) | `boolean` | Middle button state | [Mouse](/native/mouse) |\n| [`viji.mouse.deltaX`](/native/mouse) | `number` | Horizontal movement since last frame | [Mouse](/native/mouse) |\n| [`viji.mouse.deltaY`](/native/mouse) | `number` | Vertical movement since last frame | [Mouse](/native/mouse) |\n| [`viji.mouse.wheelDelta`](/native/mouse) | `number` | Scroll wheel delta | [Mouse](/native/mouse) |\n| [`viji.mouse.wheelX`](/native/mouse) | `number` | Horizontal scroll delta | [Mouse](/native/mouse) |\n| [`viji.mouse.wheelY`](/native/mouse) | `number` | Vertical scroll delta | [Mouse](/native/mouse) |\n| [`viji.mouse.wasPressed`](/native/mouse) | `boolean` | True for one frame when pressed | [Mouse](/native/mouse) |\n| [`viji.mouse.wasReleased`](/native/mouse) | `boolean` | True for one frame when released | [Mouse](/native/mouse) |\n| [`viji.mouse.wasMoved`](/native/mouse) | `boolean` | True for one frame when moved | [Mouse](/native/mouse) |\n\n## Keyboard\n\n| Member | Type | Description | Details |\n|--------|------|-------------|---------|\n| [`viji.keyboard.isPressed(key)`](/native/keyboard) | `(string) => boolean` | Whether a key is currently held | [Keyboard](/native/keyboard) |\n| [`viji.keyboard.wasPressed(key)`](/native/keyboard) | `(string) => boolean` | True for one frame when pressed | [Keyboard](/native/keyboard) |\n| [`viji.keyboard.wasReleased(key)`](/native/keyboard) | `(string) => boolean` | True for one frame when released | [Keyboard](/native/keyboard) |\n| [`viji.keyboard.activeKeys`](/native/keyboard) | `Set<string>` | All currently held keys | [Keyboard](/native/keyboard) |\n| [`viji.keyboard.pressedThisFrame`](/native/keyboard) | `Set<string>` | Keys pressed this frame | [Keyboard](/native/keyboard) |\n| [`viji.keyboard.releasedThisFrame`](/native/keyboard) | `Set<string>` | Keys released this frame | [Keyboard](/native/keyboard) |\n| [`viji.keyboard.lastKeyPressed`](/native/keyboard) | `string` | Most recently pressed key | [Keyboard](/native/keyboard) |\n| [`viji.keyboard.lastKeyReleased`](/native/keyboard) | `string` | Most recently released key | [Keyboard](/native/keyboard) |\n| [`viji.keyboard.shift`](/native/keyboard) | `boolean` | Shift key state | [Keyboard](/native/keyboard) |\n| [`viji.keyboard.ctrl`](/native/keyboard) | `boolean` | Ctrl/Cmd key state | [Keyboard](/native/keyboard) |\n| [`viji.keyboard.alt`](/native/keyboard) | `boolean` | Alt/Option key state | [Keyboard](/native/keyboard) |\n| [`viji.keyboard.meta`](/native/keyboard) | `boolean` | Meta/Win key state | [Keyboard](/native/keyboard) |\n\n## Touch\n\n> **Note:** The property is `viji.touches` (plural), not `viji.touch`.\n\n| Member | Type | Description | Details |\n|--------|------|-------------|---------|\n| [`viji.touches.points`](/native/touch) | `TouchPoint[]` | All active touch points | [Touch](/native/touch) |\n| [`viji.touches.count`](/native/touch) | `number` | Number of active touches | [Touch](/native/touch) |\n| [`viji.touches.started`](/native/touch) | `TouchPoint[]` | Touch points that started this frame | [Touch](/native/touch) |\n| [`viji.touches.moved`](/native/touch) | `TouchPoint[]` | Touch points that moved this frame | [Touch](/native/touch) |\n| [`viji.touches.ended`](/native/touch) | `TouchPoint[]` | Touch points that ended this frame | [Touch](/native/touch) |\n| [`viji.touches.primary`](/native/touch) | `TouchPoint \\| null` | The first active touch point | [Touch](/native/touch) |\n\n**`TouchPoint` fields:** `id`, `x`, `y`, `pressure`, `radius`, `radiusX`, `radiusY`, `rotationAngle`, `force` (numbers); `isInCanvas`, `isNew`, `isActive`, `isEnding` (booleans); `deltaX`, `deltaY` (numbers); `velocity` `{ x, y }`.\n\n## Pointer (Unified)\n\n| Member | Type | Description | Details |\n|--------|------|-------------|---------|\n| [`viji.pointer.x`](/native/pointer) | `number` | Primary pointer X position | [Pointer](/native/pointer) |\n| [`viji.pointer.y`](/native/pointer) | `number` | Primary pointer Y position | [Pointer](/native/pointer) |\n| [`viji.pointer.deltaX`](/native/pointer) | `number` | Horizontal movement since last frame | [Pointer](/native/pointer) |\n| [`viji.pointer.deltaY`](/native/pointer) | `number` | Vertical movement since last frame | [Pointer](/native/pointer) |\n| [`viji.pointer.isDown`](/native/pointer) | `boolean` | Whether the pointer is active (click or touch) | [Pointer](/native/pointer) |\n| [`viji.pointer.wasPressed`](/native/pointer) | `boolean` | True for one frame when pressed | [Pointer](/native/pointer) |\n| [`viji.pointer.wasReleased`](/native/pointer) | `boolean` | True for one frame when released | [Pointer](/native/pointer) |\n| [`viji.pointer.isInCanvas`](/native/pointer) | `boolean` | Whether pointer is inside the canvas | [Pointer](/native/pointer) |\n| [`viji.pointer.type`](/native/pointer) | `'mouse' \\| 'touch' \\| 'none'` | Current input source | [Pointer](/native/pointer) |\n\n## Device Sensors\n\n| Member | Type | Description | Details |\n|--------|------|-------------|---------|\n| [`viji.device.motion`](/native/sensors) | `DeviceMotionData \\| null` | Accelerometer and gyroscope data | [Device Sensors](/native/sensors) |\n| [`viji.device.orientation`](/native/sensors) | `DeviceOrientationData \\| null` | Device orientation (alpha, beta, gamma) | [Device Sensors](/native/sensors) |\n\n**`DeviceMotionData`:** `acceleration` `{ x, y, z }`, `accelerationIncludingGravity` `{ x, y, z }`, `rotationRate` `{ alpha, beta, gamma }`, `interval`.\n\n**`DeviceOrientationData`:** `alpha`, `beta`, `gamma` (numbers or null), `absolute` (boolean).\n\n## External Devices\n\n| Member | Type | Description | Details |\n|--------|------|-------------|---------|\n| [`viji.devices`](/native/external-devices) | `DeviceState[]` | Connected external devices | [Overview](/native/external-devices) |\n| [`viji.devices[i].id`](/native/external-devices) | `string` | Unique device identifier | [Overview](/native/external-devices) |\n| [`viji.devices[i].name`](/native/external-devices) | `string` | User-friendly device name | [Overview](/native/external-devices) |\n| [`viji.devices[i].motion`](/native/external-devices/sensors) | `DeviceMotionData \\| null` | Device accelerometer/gyroscope | [Device Sensors](/native/external-devices/sensors) |\n| [`viji.devices[i].orientation`](/native/external-devices/sensors) | `DeviceOrientationData \\| null` | Device orientation | [Device Sensors](/native/external-devices/sensors) |\n| [`viji.devices[i].video`](/native/external-devices/video) | `VideoAPI \\| null` | Device camera video | [Device Video](/native/external-devices/video) |\n\n## Streams\n\n| Member | Type | Description |\n|--------|------|-------------|\n| `viji.streams` | `VideoAPI[]` | Additional video streams provided by the host |\n\nEach element has the same shape as [`viji.video`](/native/video). Streams are additional video sources injected by the host application — they are used internally by Viji's compositor for mixing multiple scenes together. The array may be empty if the host does not provide additional streams. Your scene can read them the same way it reads `viji.video`.\n\n## Related\n\n- [Quick Start](/native/quickstart) — getting started with the Native renderer\n- [Best Practices](/getting-started/best-practices) — essential patterns for all renderers\n- [Common Mistakes](/getting-started/common-mistakes) — pitfalls to avoid\n- [P5 API Reference](/p5/api-reference) — the same API in the P5 renderer\n- [Shader API Reference](/shader/api-reference) — built-in uniforms for shaders"
+        }
+      ]
+    },
     "native-canvas": {
       "id": "native-canvas",
       "title": "Canvas & Context",
@@ -943,7 +1046,7 @@ export const docsApi = {
       "content": [
         {
           "type": "text",
-          "markdown": "# Canvas & Context\n\nEvery native scene gets a canvas and a set of properties for resolution-agnostic drawing. This page covers `viji.canvas`, `viji.useContext()`, `viji.width`, `viji.height`, `viji.ctx`, and `viji.gl`.\n\n## The Canvas\n\n`viji.canvas` is an [`OffscreenCanvas`](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas) — not a DOM `<canvas>` element. It lives inside a Web Worker and has no associated DOM node. You never create or resize it yourself; the host application manages its lifecycle and dimensions.\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `viji.canvas` | `OffscreenCanvas` | The raw canvas. Rarely needed — use `viji.useContext()` instead. |\n| `viji.width` | `number` | Current canvas width in pixels |\n| `viji.height` | `number` | Current canvas height in pixels |\n\n`viji.width` and `viji.height` always reflect the actual pixel dimensions of the canvas and update automatically when the host resizes it. Use them for all positioning and sizing.\n\n## Choosing a Context\n\nCall `viji.useContext()` to get a rendering context:\n\n```javascript\nconst ctx = viji.useContext('2d');     // OffscreenCanvasRenderingContext2D\nconst gl  = viji.useContext('webgl');  // WebGLRenderingContext\nconst gl2 = viji.useContext('webgl2'); // WebGL2RenderingContext\n```\n\n| Argument | Return Type | Also Sets |\n|----------|------------|-----------|\n| `'2d'` | `OffscreenCanvasRenderingContext2D` | `viji.ctx` |\n| `'webgl'` | `WebGLRenderingContext` | `viji.gl` |\n| `'webgl2'` | `WebGL2RenderingContext` | `viji.gl` |\n\nThe context is created once and cached — calling `useContext()` again with the same argument returns the same instance. Call it at the top of `render()` or once at the top level and store the result.\n\n> [!WARNING]\n> Calling `useContext('2d')` and `useContext('webgl')`/`useContext('webgl2')` on the same canvas is mutually exclusive. Once a context type is obtained, switching to the other discards the previous one. Choose one context type and use it consistently.\n\n## 2D Context\n\nThe most common choice. You get a standard [`CanvasRenderingContext2D`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D) with full access to paths, fills, strokes, transforms, gradients, and compositing."
+          "markdown": "# Canvas & Context\n\nEvery native scene gets a canvas and a set of properties for resolution-agnostic drawing. This page covers `viji.canvas`, `viji.useContext()`, `viji.width`, `viji.height`, `viji.ctx`, and `viji.gl`.\n\n## The Canvas\n\n`viji.canvas` is an [`OffscreenCanvas`](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas) — not a DOM `<canvas>` element. It lives inside a Web Worker and has no associated DOM node. You never create or resize it yourself; the host application manages its lifecycle and dimensions.\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `viji.canvas` | `OffscreenCanvas` | The raw canvas. Rarely needed — use `viji.useContext()` instead. |\n| `viji.width` | `number` | Current canvas width in pixels |\n| `viji.height` | `number` | Current canvas height in pixels |\n\n`viji.width` and `viji.height` always reflect the actual pixel dimensions of the canvas and update automatically when the host resizes it. Use them for all positioning and sizing.\n\n## Choosing a Context\n\nCall `viji.useContext()` to get a rendering context:\n\n```javascript\nconst ctx = viji.useContext('2d');     // OffscreenCanvasRenderingContext2D\nconst gl  = viji.useContext('webgl');  // WebGLRenderingContext\nconst gl2 = viji.useContext('webgl2'); // WebGL2RenderingContext\n```\n\n| Argument | Return Type | Also Sets |\n|----------|------------|-----------|\n| `'2d'` | `OffscreenCanvasRenderingContext2D` | `viji.ctx` |\n| `'webgl'` | `WebGLRenderingContext` | `viji.gl` |\n| `'webgl2'` | `WebGL2RenderingContext` | `viji.gl` |\n\nThe context is created once and cached — calling `useContext()` again with the same argument returns the same instance. Call it at the top of `render()` or once at the top level and store the result.\n\n> [!WARNING]\n> A canvas only supports one context type. If you call `useContext('2d')` and later call `useContext('webgl')` (or vice versa), the second call returns `null`. Choose one context type and use it for the entire scene.\n\n## 2D Context\n\nThe most common choice. You get a standard [`CanvasRenderingContext2D`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D) with full access to paths, fills, strokes, transforms, gradients, and compositing."
         },
         {
           "type": "live-example",
@@ -958,7 +1061,7 @@ export const docsApi = {
         {
           "type": "live-example",
           "title": "WebGL 2 — Gradient Quad",
-          "sceneCode": "const topColor = viji.color('#ff3366', { label: 'Top Color' });\nconst bottomColor = viji.color('#3366ff', { label: 'Bottom Color' });\n\nconst vsSource = `\n  attribute vec2 a_position;\n  varying vec2 v_uv;\n  void main() {\n    v_uv = a_position * 0.5 + 0.5;\n    gl_Position = vec4(a_position, 0.0, 1.0);\n  }\n`;\n\nconst fsSource = `\n  precision mediump float;\n  varying vec2 v_uv;\n  uniform vec3 u_topColor;\n  uniform vec3 u_bottomColor;\n  uniform float u_time;\n  void main() {\n    float wave = sin(v_uv.x * 6.28 + u_time * 2.0) * 0.05;\n    float t = v_uv.y + wave;\n    vec3 color = mix(u_bottomColor, u_topColor, t);\n    gl_FragColor = vec4(color, 1.0);\n  }\n`;\n\nlet program, timeLoc, topLoc, bottomLoc;\n\nfunction initGL(gl) {\n  function compile(type, src) {\n    const s = gl.createShader(type);\n    gl.shaderSource(s, src);\n    gl.compileShader(s);\n    return s;\n  }\n  const vs = compile(gl.VERTEX_SHADER, vsSource);\n  const fs = compile(gl.FRAGMENT_SHADER, fsSource);\n  program = gl.createProgram();\n  gl.attachShader(program, vs);\n  gl.attachShader(program, fs);\n  gl.linkProgram(program);\n  gl.useProgram(program);\n\n  const buf = gl.createBuffer();\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf);\n  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 1,-1, -1,1, 1,1]), gl.STATIC_DRAW);\n  const pos = gl.getAttribLocation(program, 'a_position');\n  gl.enableVertexAttribArray(pos);\n  gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);\n\n  timeLoc = gl.getUniformLocation(program, 'u_time');\n  topLoc = gl.getUniformLocation(program, 'u_topColor');\n  bottomLoc = gl.getUniformLocation(program, 'u_bottomColor');\n}\n\nfunction hexToRGB(hex) {\n  const n = parseInt(hex.slice(1), 16);\n  return [(n >> 16 & 255) / 255, (n >> 8 & 255) / 255, (n & 255) / 255];\n}\n\nfunction render(viji) {\n  const gl = viji.useContext('webgl2');\n  if (!program) initGL(gl);\n\n  gl.viewport(0, 0, viji.width, viji.height);\n  gl.uniform1f(timeLoc, viji.time);\n\n  const top = hexToRGB(topColor.value);\n  const bottom = hexToRGB(bottomColor.value);\n  gl.uniform3f(topLoc, top[0], top[1], top[2]);\n  gl.uniform3f(bottomLoc, bottom[0], bottom[1], bottom[2]);\n\n  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);\n}\n",
+          "sceneCode": "const topColor = viji.color('#ff3366', { label: 'Top Color' });\nconst bottomColor = viji.color('#3366ff', { label: 'Bottom Color' });\n\nconst vsSource = `\n  attribute vec2 a_position;\n  varying vec2 v_uv;\n  void main() {\n    v_uv = a_position * 0.5 + 0.5;\n    gl_Position = vec4(a_position, 0.0, 1.0);\n  }\n`;\n\nconst fsSource = `\n  precision mediump float;\n  varying vec2 v_uv;\n  uniform vec3 u_topColor;\n  uniform vec3 u_bottomColor;\n  uniform float u_time;\n  void main() {\n    float wave = sin(v_uv.x * 6.28 + u_time * 2.0) * 0.15\n               + sin(v_uv.x * 12.56 - u_time * 3.0) * 0.05;\n    float t = clamp(v_uv.y + wave, 0.0, 1.0);\n    vec3 color = mix(u_bottomColor, u_topColor, t);\n    gl_FragColor = vec4(color, 1.0);\n  }\n`;\n\nlet program, timeLoc, topLoc, bottomLoc;\n\nfunction initGL(gl) {\n  function compile(type, src) {\n    const s = gl.createShader(type);\n    gl.shaderSource(s, src);\n    gl.compileShader(s);\n    return s;\n  }\n  const vs = compile(gl.VERTEX_SHADER, vsSource);\n  const fs = compile(gl.FRAGMENT_SHADER, fsSource);\n  program = gl.createProgram();\n  gl.attachShader(program, vs);\n  gl.attachShader(program, fs);\n  gl.linkProgram(program);\n  gl.useProgram(program);\n\n  const buf = gl.createBuffer();\n  gl.bindBuffer(gl.ARRAY_BUFFER, buf);\n  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 1,-1, -1,1, 1,1]), gl.STATIC_DRAW);\n  const pos = gl.getAttribLocation(program, 'a_position');\n  gl.enableVertexAttribArray(pos);\n  gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);\n\n  timeLoc = gl.getUniformLocation(program, 'u_time');\n  topLoc = gl.getUniformLocation(program, 'u_topColor');\n  bottomLoc = gl.getUniformLocation(program, 'u_bottomColor');\n}\n\nfunction hexToRGB(hex) {\n  const n = parseInt(hex.slice(1), 16);\n  return [(n >> 16 & 255) / 255, (n >> 8 & 255) / 255, (n & 255) / 255];\n}\n\nfunction render(viji) {\n  const gl = viji.useContext('webgl2');\n  if (!program) initGL(gl);\n\n  gl.viewport(0, 0, viji.width, viji.height);\n  gl.uniform1f(timeLoc, viji.time);\n\n  const top = hexToRGB(topColor.value);\n  const bottom = hexToRGB(bottomColor.value);\n  gl.uniform3f(topLoc, top[0], top[1], top[2]);\n  gl.uniform3f(bottomLoc, bottom[0], bottom[1], bottom[2]);\n\n  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);\n}\n",
           "sceneFile": "canvas-context-webgl.scene.js"
         },
         {
@@ -1222,7 +1325,11 @@ export const docsApi = {
           "type": "live-example",
           "title": "Parameter Categories",
           "sceneCode": "const baseColor = viji.color('#4488ff', { label: 'Base Color', category: 'general' });\r\nconst pulseAmount = viji.slider(0.3, { min: 0, max: 1, step: 0.01, label: 'Audio Pulse', category: 'audio' });\r\nconst showMouse = viji.toggle(true, { label: 'Mouse Trail', category: 'interaction' });\r\n\r\nlet angle = 0;\r\nlet mouseTrailX = 0;\r\nlet mouseTrailY = 0;\r\n\r\nfunction render(viji) {\r\n  const ctx = viji.useContext('2d');\r\n  const w = viji.width;\r\n  const h = viji.height;\r\n\r\n  ctx.fillStyle = 'rgba(10, 10, 30, 0.15)';\r\n  ctx.fillRect(0, 0, w, h);\r\n\r\n  angle += viji.deltaTime;\r\n\r\n  const r = parseInt(baseColor.value.slice(1, 3), 16);\r\n  const g = parseInt(baseColor.value.slice(3, 5), 16);\r\n  const b = parseInt(baseColor.value.slice(5, 7), 16);\r\n\r\n  let pulse = 0;\r\n  if (viji.audio.isConnected) {\r\n    pulse = viji.audio.volume.current * pulseAmount.value;\r\n  }\r\n\r\n  const baseR = Math.min(w, h) * (0.1 + pulse * 0.15);\r\n  const cx = w / 2 + Math.cos(angle) * w * 0.2;\r\n  const cy = h / 2 + Math.sin(angle * 0.7) * h * 0.2;\r\n\r\n  ctx.beginPath();\r\n  ctx.arc(cx, cy, baseR, 0, Math.PI * 2);\r\n  ctx.fillStyle = `rgb(${r}, ${g}, ${b})`;\r\n  ctx.fill();\r\n\r\n  if (showMouse.value && viji.mouse.isInCanvas) {\r\n    mouseTrailX += (viji.mouse.x - mouseTrailX) * 0.1;\r\n    mouseTrailY += (viji.mouse.y - mouseTrailY) * 0.1;\r\n    ctx.beginPath();\r\n    ctx.arc(mouseTrailX, mouseTrailY, Math.min(w, h) * 0.02, 0, Math.PI * 2);\r\n    ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';\r\n    ctx.fill();\r\n  }\r\n}\r\n",
-          "sceneFile": "categories-demo.scene.js"
+          "sceneFile": "categories-demo.scene.js",
+          "capabilities": {
+            "audio": true,
+            "interaction": true
+          }
         },
         {
           "type": "text",
@@ -1230,261 +1337,785 @@ export const docsApi = {
         }
       ]
     },
-    "native-pointer": {
-      "id": "native-pointer",
-      "title": "Pointer (Unified)",
-      "description": "A single input abstraction that works identically for mouse and touch — the recommended starting point for position, click, and drag interactions.",
+    "native-audio-overview": {
+      "id": "native-audio-overview",
+      "title": "Audio",
+      "description": "Real-time audio analysis API — volume, frequency bands, beat detection, spectral features, and raw FFT/waveform data.",
       "content": [
         {
           "type": "text",
-          "markdown": "# Pointer (Unified Input)\n\n`viji.pointer` provides a single, unified input that works the same way whether the user is on a desktop with a mouse or on a mobile device using touch. **For most interactions — click, drag, position tracking — start here.**\n\n## Why Use Pointer?\n\nDrag-to-orbit, click-to-place, and cursor-following effects work identically for mouse and touch. `viji.pointer` gives you one set of coordinates, one pressed state, and one delta — no separate code paths needed.\n\nUse [`viji.mouse`](../mouse/) when you need mouse-specific features like right-click, middle-click, or scroll wheel. Use [`viji.touches`](../touch/) when you need multi-touch, pressure, radius, or per-finger tracking.\n\n## API Reference\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `x` | `number` | Canvas-space X position (pixels) |\n| `y` | `number` | Canvas-space Y position (pixels) |\n| `deltaX` | `number` | Horizontal movement since last frame (pixels) |\n| `deltaY` | `number` | Vertical movement since last frame (pixels) |\n| `isDown` | `boolean` | `true` if left mouse button is held or a touch is active |\n| `wasPressed` | `boolean` | `true` for exactly one frame when input becomes active, then resets |\n| `wasReleased` | `boolean` | `true` for exactly one frame when input is released, then resets |\n| `isInCanvas` | `boolean` | `true` if the input position is within the canvas bounds |\n| `type` | `'mouse' \\| 'touch' \\| 'none'` | Which input device is currently active |\n\n## Coordinate System\n\nPointer coordinates are in **canvas-space pixels**, with `(0, 0)` at the top-left corner. Values range from `0` to [`viji.width`](/native/canvas-context) horizontally and `0` to [`viji.height`](/native/canvas-context) vertically.\n\nThe coordinates always match the canvas dimensions regardless of how the canvas is displayed on screen. Viji handles display scaling automatically, so your code works with canvas-space values directly.\n\n## How It Works\n\nWhen a touch is active, the pointer follows the primary touch point. Otherwise, it follows the mouse. This switching happens automatically each frame.\n\n- **When a touch is active** (`viji.touches.count > 0`): pointer tracks the primary touch. `isDown` is always `true`, `type` is `'touch'`.\n- **When no touch is active**: pointer falls back to the mouse. `isDown` reflects the left mouse button, `type` is `'mouse'` when the cursor is over the canvas, or `'none'` when it's outside.\n\n`wasPressed` and `wasReleased` reflect frame-to-frame transitions of `isDown` — each is `true` for exactly one frame, then automatically resets.\n\n## Basic Example"
+          "markdown": "# Audio\n\nViji provides real-time audio analysis when the host application connects an audio stream. All analysis runs on the host side and results are delivered to the scene through `viji.audio`.\n\n## API Overview\n\n| Sub-object | Description | Page |\n|------------|-------------|------|\n| [`isConnected`](connection/) | Whether an audio stream is active | [Connection & Lifecycle](connection/) |\n| [`volume`](volume/) | RMS level, peak amplitude, smoothed volume | [Volume](volume/) |\n| [`bands`](bands/) | Five frequency bands (instant and smoothed) | [Frequency Bands](bands/) |\n| [`beat`](beat/) | Beat energy curves, triggers, events, BPM | [Beat Detection](beat/) |\n| [`spectral`](spectral/) | Brightness and flatness features | [Spectral Analysis](spectral/) |\n| [`getFrequencyData()`](frequency-data/) | Raw FFT spectrum as `Uint8Array` | [Frequency Data](frequency-data/) |\n| [`getWaveform()`](waveform/) | Raw time-domain samples as `Float32Array` | [Waveform](waveform/) |\n\n## Basic Usage\n\n```javascript\nfunction render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  if (!viji.audio.isConnected) {\n    ctx.fillStyle = '#555';\n    ctx.font = `${Math.min(w, h) * 0.04}px sans-serif`;\n    ctx.textAlign = 'center';\n    ctx.fillText('Waiting for audio...', w / 2, h / 2);\n    return;\n  }\n\n  const vol = viji.audio.volume.smoothed;\n  const r = Math.min(w, h) * 0.1 + vol * Math.min(w, h) * 0.3;\n\n  ctx.beginPath();\n  ctx.arc(w / 2, h / 2, r, 0, Math.PI * 2);\n  ctx.fillStyle = `hsl(${200 + vol * 160}, 80%, 60%)`;\n  ctx.fill();\n}\n```\n\n> [!NOTE]\n> Always check [`viji.audio.isConnected`](connection/) before reading audio values. When no audio stream is connected, all values are at their defaults (zeros, with `bpm` at 120)."
         },
         {
           "type": "live-example",
-          "title": "Pointer — Drag Trail",
-          "sceneCode": "const ctx = viji.useContext('2d');\nconst trail = [];\nconst maxTrail = 80;\n\nfunction render(viji) {\n  const w = viji.width, h = viji.height;\n  const p = viji.pointer;\n\n  ctx.fillStyle = 'rgba(10, 10, 30, 0.15)';\n  ctx.fillRect(0, 0, w, h);\n\n  if (p.isDown) {\n    trail.push({ x: p.x, y: p.y });\n    if (trail.length > maxTrail) trail.shift();\n  } else if (trail.length > 0) {\n    trail.shift();\n  }\n\n  for (let i = 0; i < trail.length; i++) {\n    const t = i / trail.length;\n    const radius = 3 + t * 12;\n    ctx.beginPath();\n    ctx.arc(trail[i].x, trail[i].y, radius, 0, Math.PI * 2);\n    ctx.fillStyle = `hsla(${200 + t * 60}, 80%, 65%, ${t * 0.8})`;\n    ctx.fill();\n  }\n\n  const size = Math.min(w, h);\n  ctx.fillStyle = p.isDown ? 'rgba(100, 220, 255, 0.9)' : 'rgba(200, 200, 200, 0.5)';\n  ctx.beginPath();\n  ctx.arc(p.x, p.y, size * 0.015, 0, Math.PI * 2);\n  ctx.fill();\n\n  ctx.fillStyle = 'rgba(255,255,255,0.5)';\n  ctx.font = `${size * 0.025}px monospace`;\n  ctx.textAlign = 'left';\n  ctx.fillText(`pointer: (${Math.round(p.x)}, ${Math.round(p.y)})  type: ${p.type}`, size * 0.03, h - size * 0.03);\n  ctx.fillText(`isDown: ${p.isDown}  inCanvas: ${p.isInCanvas}`, size * 0.03, h - size * 0.06);\n}\n",
-          "sceneFile": "pointer-demo.scene.js"
+          "title": "Audio-Reactive Circle",
+          "sceneCode": "function render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  if (!viji.audio.isConnected) {\n    ctx.fillStyle = '#555';\n    ctx.font = `${Math.min(w, h) * 0.04}px sans-serif`;\n    ctx.textAlign = 'center';\n    ctx.fillText('Waiting for audio...', w / 2, h / 2);\n    return;\n  }\n\n  const vol = viji.audio.volume.smoothed;\n  const r = Math.min(w, h) * 0.1 + vol * Math.min(w, h) * 0.3;\n\n  ctx.beginPath();\n  ctx.arc(w / 2, h / 2, r, 0, Math.PI * 2);\n  ctx.fillStyle = `hsl(${200 + vol * 160}, 80%, 60%)`;\n  ctx.fill();\n}\n",
+          "sceneFile": "audio-overview.scene.js"
         },
         {
           "type": "text",
-          "markdown": "## Common Patterns\n\n### Click Detection\n\n```javascript\nfunction render(viji) {\n  if (viji.pointer.wasPressed) {\n    spawnParticle(viji.pointer.x, viji.pointer.y);\n  }\n}\n```\n\n### Drag Interaction\n\n```javascript\nlet offsetX = 0, offsetY = 0;\n\nfunction render(viji) {\n  if (viji.pointer.isDown) {\n    offsetX += viji.pointer.deltaX;\n    offsetY += viji.pointer.deltaY;\n  }\n}\n```\n\n### Conditional by Input Type\n\n```javascript\nfunction render(viji) {\n  if (viji.pointer.type === 'touch') {\n    drawTouchIndicator(viji.pointer.x, viji.pointer.y);\n  }\n}\n```\n\n## When to Use Mouse or Touch Instead\n\n| Need | Use |\n|------|-----|\n| Right-click or middle-click | [`viji.mouse`](../mouse/) |\n| Scroll wheel / zoom | [`viji.mouse`](../mouse/) — `wheelDelta`, `wheelX`, `wheelY` |\n| Multi-touch (pinch, two-finger rotation) | [`viji.touches`](../touch/) |\n| Per-touch pressure, radius, or velocity | [`viji.touches`](../touch/) |\n| Individual button states | [`viji.mouse`](../mouse/) — `leftButton`, `rightButton`, `middleButton` |\n\n## Related\n\n- [Mouse](../mouse/) — device-specific mouse access with buttons, wheel, and movement deltas\n- [Keyboard](../keyboard/) — key state queries and modifier tracking\n- [Touch](../touch/) — multi-touch with pressure, radius, velocity, and per-finger tracking\n- [P5 Pointer](/p5/pointer) — same API in the P5 renderer\n- [Shader Pointer Uniforms](/shader/pointer) — GLSL uniforms for unified pointer input"
+          "markdown": "## Related\n\n- [Connection & Lifecycle](connection/)\n- [Volume](volume/)\n- [Frequency Bands](bands/)\n- [Beat Detection](beat/)\n- [Spectral Analysis](spectral/)\n- [Frequency Data](frequency-data/)\n- [Waveform](waveform/)\n- [P5 Audio](/p5/audio)\n- [Shader Audio Uniforms](/shader/audio)"
         }
       ]
     },
-    "native-mouse": {
-      "id": "native-mouse",
-      "title": "Mouse",
-      "description": "Full mouse API — position, buttons, movement deltas, scroll wheel, and frame-based press/release detection.",
+    "native-audio-connection": {
+      "id": "native-audio-connection",
+      "title": "Connection & Lifecycle",
+      "description": "Audio connection state, guard patterns, and default values when no audio stream is active.",
       "content": [
         {
           "type": "text",
-          "markdown": "# Mouse\n\n`viji.mouse` provides detailed mouse input including individual button states, movement deltas, and scroll wheel data.\n\n> [!TIP]\n> For simple position, click, and drag interactions that should work on both mouse and touch devices, use [`viji.pointer`](../pointer/) instead. The mouse API is for when you need mouse-specific features like right-click, middle-click, or scroll wheel.\n\n## API Reference\n\n### Position\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `x` | `number` | Canvas-space X position (pixels) |\n| `y` | `number` | Canvas-space Y position (pixels) |\n| `isInCanvas` | `boolean` | `true` when the cursor is over the canvas |\n\n### Buttons\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `isPressed` | `boolean` | `true` if any mouse button is currently held |\n| `leftButton` | `boolean` | Left button state |\n| `rightButton` | `boolean` | Right button state |\n| `middleButton` | `boolean` | Middle button state |\n\n### Movement\n\n| Property | Type | Description | Resets each frame |\n|----------|------|-------------|-------------------|\n| `deltaX` | `number` | Horizontal movement this frame (pixels) | Yes → `0` |\n| `deltaY` | `number` | Vertical movement this frame (pixels) | Yes → `0` |\n| `wasMoved` | `boolean` | `true` if the mouse moved this frame | Yes → `false` |\n\n### Scroll Wheel\n\n| Property | Type | Description | Resets each frame |\n|----------|------|-------------|-------------------|\n| `wheelDelta` | `number` | Vertical scroll accumulated this frame | Yes → `0` |\n| `wheelX` | `number` | Horizontal scroll accumulated this frame | Yes → `0` |\n| `wheelY` | `number` | Vertical scroll accumulated this frame | Yes → `0` |\n\n> [!NOTE]\n> `wheelDelta` and `wheelY` report the same value. `wheelX` is for horizontal scrolling (trackpad gestures, tilt-wheel mice).\n\n### Frame Events\n\n| Property | Type | Description | Resets each frame |\n|----------|------|-------------|-------------------|\n| `wasPressed` | `boolean` | `true` for exactly one frame when any button is first pressed | Yes → `false` |\n| `wasReleased` | `boolean` | `true` for exactly one frame when any button is released | Yes → `false` |\n\n## Coordinate System\n\nMouse coordinates are in **canvas-space pixels**, with `(0, 0)` at the top-left corner. Values range from `0` to [`viji.width`](/native/canvas-context) horizontally and `0` to [`viji.height`](/native/canvas-context) vertically. The right-click context menu is automatically suppressed on the canvas.\n\n## Frame Lifecycle\n\nPer-frame properties (`deltaX`, `deltaY`, `wheelDelta`, `wheelX`, `wheelY`, `wasPressed`, `wasReleased`, `wasMoved`) reset to zero/false at the start of each frame. If multiple mouse events occur within a single frame, deltas and wheel values **accumulate**, and `wasPressed`/`wasReleased` are OR'd across all events.\n\nPersistent properties (`x`, `y`, `isInCanvas`, `isPressed`, `leftButton`, `rightButton`, `middleButton`) retain their values until the next event changes them.\n\n## Basic Example"
+          "markdown": "# Connection & Lifecycle\n\nThe `viji.audio.isConnected` property indicates whether the host application has provided an active audio stream. All other audio properties depend on this — when disconnected, they hold default values.\n\n## Property Reference\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `viji.audio.isConnected` | `boolean` | `true` when an audio stream is active and analysis results are flowing |\n\n## Guard Pattern\n\nAlways check `isConnected` before using audio data. This prevents your scene from reacting to default values as if they were real audio input.\n\n```javascript\nfunction render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  if (!viji.audio.isConnected) {\n    ctx.fillStyle = '#444';\n    ctx.font = `${Math.min(w, h) * 0.04}px sans-serif`;\n    ctx.textAlign = 'center';\n    ctx.fillText('No audio connected', w / 2, h / 2);\n    return;\n  }\n\n  // Safe to use audio data here\n  const vol = viji.audio.volume.current;\n  ctx.fillStyle = `rgba(100, 200, 255, ${vol})`;\n  ctx.fillRect(0, 0, w * vol, h);\n}\n```\n\n## Connection Lifecycle\n\n1. **Disconnected (default)** — `isConnected` is `false`. All audio values are at their defaults.\n2. **Connected** — The host provides a `MediaStream`. `isConnected` becomes `true` and audio analysis values begin updating every frame.\n3. **Disconnected again** — The stream is removed. `isConnected` returns to `false` and all values reset to defaults.\n\n## Default Values\n\nWhen `isConnected` is `false`, all audio properties hold these values:\n\n| Property | Default |\n|----------|---------|\n| `volume.current`, `volume.peak`, `volume.smoothed` | `0` |\n| All `bands.*` (instant and smoothed) | `0` |\n| `beat.kick`, `.snare`, `.hat`, `.any` (and smoothed) | `0` |\n| `beat.triggers.kick`, `.snare`, `.hat`, `.any` | `false` |\n| `beat.events` | `[]` (empty array) |\n| `beat.bpm` | `120` |\n| `beat.confidence` | `0` |\n| `beat.isLocked` | `false` |\n| `spectral.brightness`, `spectral.flatness` | `0` |\n| `getFrequencyData()` | Empty `Uint8Array` (length 0) |\n| `getWaveform()` | Empty `Float32Array` (length 0) |\n\n> [!NOTE]\n> The default `bpm` is `120`, not `0`. This allows BPM-based calculations to produce sensible output even before audio is connected."
         },
         {
           "type": "live-example",
-          "title": "Mouse — Buttons & Wheel",
-          "sceneCode": "const ctx = viji.useContext('2d');\nlet hue = 200;\nlet zoom = 1;\nlet prevRight = false;\n\nfunction render(viji) {\n  const w = viji.width, h = viji.height;\n  const m = viji.mouse;\n  const size = Math.min(w, h);\n\n  if (m.rightButton && !prevRight) hue = (hue + 50) % 360;\n  prevRight = m.rightButton;\n\n  zoom -= m.wheelDelta * 0.001;\n  zoom = Math.max(0.3, Math.min(5, zoom));\n\n  ctx.fillStyle = 'rgba(10, 10, 30, 0.2)';\n  ctx.fillRect(0, 0, w, h);\n\n  const speed = Math.sqrt(m.deltaX ** 2 + m.deltaY ** 2);\n  const radius = (size * 0.02 + speed * 1.5) * zoom;\n\n  if (m.isInCanvas) {\n    ctx.beginPath();\n    ctx.arc(m.x, m.y, radius, 0, Math.PI * 2);\n    const alpha = m.isPressed ? 0.9 : 0.4;\n    ctx.fillStyle = `hsla(${hue}, 80%, 65%, ${alpha})`;\n    ctx.fill();\n\n    if (m.leftButton) {\n      ctx.strokeStyle = `hsla(${hue}, 80%, 75%, 0.6)`;\n      ctx.lineWidth = 2;\n      ctx.stroke();\n    }\n  }\n\n  ctx.fillStyle = 'rgba(255,255,255,0.5)';\n  ctx.font = `${size * 0.022}px monospace`;\n  ctx.textAlign = 'left';\n  const y0 = h - size * 0.15;\n  ctx.fillText(`pos: (${Math.round(m.x)}, ${Math.round(m.y)})  inCanvas: ${m.isInCanvas}`, size * 0.03, y0);\n  ctx.fillText(`buttons: L[${m.leftButton ? '\\u25A0' : '\\u25A1'}] R[${m.rightButton ? '\\u25A0' : '\\u25A1'}] M[${m.middleButton ? '\\u25A0' : '\\u25A1'}]`, size * 0.03, y0 + size * 0.03);\n  ctx.fillText(`delta: (${m.deltaX.toFixed(0)}, ${m.deltaY.toFixed(0)})  wheel: ${m.wheelDelta.toFixed(1)}`, size * 0.03, y0 + size * 0.06);\n  ctx.fillText(`zoom: ${zoom.toFixed(2)}  hue: ${hue}`, size * 0.03, y0 + size * 0.09);\n}\n",
-          "sceneFile": "mouse-demo.scene.js"
+          "title": "Connection State",
+          "sceneCode": "function render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  const fontSize = Math.min(w, h) * 0.035;\n  ctx.font = `${fontSize}px sans-serif`;\n  ctx.textAlign = 'center';\n\n  if (!viji.audio.isConnected) {\n    const pulse = 0.4 + Math.sin(viji.time * 2) * 0.15;\n    ctx.fillStyle = `rgba(255, 255, 255, ${pulse})`;\n    ctx.fillText('Waiting for audio stream...', w / 2, h / 2 - fontSize);\n    ctx.fillStyle = '#444';\n    ctx.fillText('Connect a microphone or audio source', w / 2, h / 2 + fontSize);\n    return;\n  }\n\n  const vol = viji.audio.volume.smoothed;\n  const barW = w * 0.6;\n  const barH = Math.min(w, h) * 0.06;\n  const barX = (w - barW) / 2;\n  const barY = h / 2 - barH / 2;\n\n  ctx.fillStyle = '#222';\n  ctx.fillRect(barX, barY, barW, barH);\n  ctx.fillStyle = '#4CAF50';\n  ctx.fillRect(barX, barY, barW * vol, barH);\n\n  ctx.fillStyle = '#aaa';\n  ctx.fillText('Audio connected — volume: ' + vol.toFixed(2), w / 2, barY - fontSize);\n}\n",
+          "sceneFile": "connection-demo.scene.js"
         },
         {
           "type": "text",
-          "markdown": "## Common Patterns\n\n### Right-Click Action\n\n```javascript\nlet prevRight = false;\n\nfunction render(viji) {\n  const m = viji.mouse;\n  if (m.rightButton && !prevRight) {\n    cycleColor();\n  }\n  prevRight = m.rightButton;\n}\n```\n\n### Scroll Zoom\n\n```javascript\nlet zoom = 1;\n\nfunction render(viji) {\n  zoom -= viji.mouse.wheelDelta * 0.001;\n  zoom = Math.max(0.1, Math.min(10, zoom));\n}\n```\n\n### Movement Speed\n\n```javascript\nfunction render(viji) {\n  const m = viji.mouse;\n  const speed = Math.sqrt(m.deltaX ** 2 + m.deltaY ** 2);\n  drawParticle(m.x, m.y, speed);\n}\n```\n\n## Related\n\n- [Pointer (Unified)](../pointer/) — recommended starting point for cross-device interactions\n- [Keyboard](../keyboard/) — key state queries and modifier tracking\n- [Touch](../touch/) — multi-touch input with pressure, radius, and velocity\n- [P5 Mouse](/p5/mouse) — same API in the P5 renderer\n- [Shader Mouse Uniforms](/shader/mouse) — GLSL uniforms for mouse input"
+          "markdown": "## Related\n\n- [Audio Overview](../)\n- [Volume](../volume/)\n- [Beat Detection](../beat/)\n- [P5 Connection & Lifecycle](/p5/audio/connection)"
         }
       ]
     },
-    "native-keyboard": {
-      "id": "native-keyboard",
-      "title": "Keyboard",
-      "description": "Full keyboard API — key state queries, modifier tracking, and frame-based press/release detection.",
+    "native-audio-volume": {
+      "id": "native-audio-volume",
+      "title": "Volume",
+      "description": "Real-time volume level, peak amplitude, and smoothed volume for animations.",
       "content": [
         {
           "type": "text",
-          "markdown": "# Keyboard\n\n`viji.keyboard` provides real-time keyboard state with per-key press detection, modifier tracking, and frame-based event queries.\n\n## API Reference\n\n### Methods\n\n| Method | Returns | Description |\n|--------|---------|-------------|\n| `isPressed(key)` | `boolean` | `true` if the key is currently held down |\n| `wasPressed(key)` | `boolean` | `true` for exactly one frame when the key is first pressed, then resets |\n| `wasReleased(key)` | `boolean` | `true` for exactly one frame when the key is released, then resets |\n\nAll three methods are **case-insensitive** — `isPressed('a')` and `isPressed('A')` are equivalent.\n\n### Properties\n\n| Property | Type | Description | Resets each frame |\n|----------|------|-------------|-------------------|\n| `activeKeys` | `Set<string>` | All currently held keys (lowercase) | No |\n| `pressedThisFrame` | `Set<string>` | Keys pressed this frame (lowercase) | Yes → cleared |\n| `releasedThisFrame` | `Set<string>` | Keys released this frame (lowercase) | Yes → cleared |\n| `lastKeyPressed` | `string` | Most recently pressed key (original case) | No |\n| `lastKeyReleased` | `string` | Most recently released key (original case) | No |\n\n### Modifier Keys\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `shift` | `boolean` | Shift key state |\n| `ctrl` | `boolean` | Ctrl key state |\n| `alt` | `boolean` | Alt key state |\n| `meta` | `boolean` | Meta/Cmd key state |\n\n## Key Names\n\nKey names follow the browser's `event.key` standard. Common values:\n\n| Key | Name to use |\n|-----|-------------|\n| Letters | `'a'`, `'b'`, `'z'` (case-insensitive) |\n| Digits | `'0'`, `'1'`, `'9'` |\n| Arrows | `'arrowup'`, `'arrowdown'`, `'arrowleft'`, `'arrowright'` |\n| Space | `' '` (a space character) |\n| Enter | `'enter'` |\n| Escape | `'escape'` |\n| Tab | `'tab'` |\n| Backspace | `'backspace'` |\n| Shift | `'shift'` |\n| Control | `'control'` |\n\n> [!NOTE]\n> The `activeKeys`, `pressedThisFrame`, and `releasedThisFrame` sets store keys in lowercase. However, `lastKeyPressed` and `lastKeyReleased` retain the original case as reported by the browser (e.g., `'A'` when Shift is held, `'ArrowUp'` for arrows).\n\n## Frame Lifecycle\n\n- `pressedThisFrame` and `releasedThisFrame` are cleared at the start of each frame.\n- Key repeats are suppressed — holding a key down fires `wasPressed()` only on the first frame, not on subsequent repeat events.\n- `activeKeys` persists across frames until a `keyup` event is received.\n\n## Keyboard Event Capture\n\nKeyboard events are captured on the iframe document, not the canvas element itself. This means keys are registered even when the canvas doesn't have direct focus within the iframe. The following keys are allowed through without `preventDefault()`: Tab, F1–F5, F11, F12.\n\n## Basic Example"
+          "markdown": "# Volume\n\nThe `viji.audio.volume` object provides three measures of the overall audio loudness — instant RMS level, peak amplitude, and a smoothed value ideal for driving animations.\n\n## Property Reference\n\n| Property | Type | Range | Description |\n|----------|------|-------|-------------|\n| `viji.audio.volume.current` | `number` | 0–1 | RMS volume level (instant) |\n| `viji.audio.volume.peak` | `number` | 0–1 | Peak amplitude (instant) |\n| `viji.audio.volume.smoothed` | `number` | 0–1 | Smoothed volume (200ms decay envelope) |\n\n### Instant vs Smoothed\n\n- **`current`** and **`peak`** update every frame to reflect the latest audio analysis. They can jump sharply between frames.\n- **`smoothed`** follows a 200ms decay envelope — it rises quickly with the signal but falls gradually. Use this for smooth animations that should not flicker.\n\n## Usage\n\n```javascript\nfunction render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  if (!viji.audio.isConnected) return;\n\n  const vol = viji.audio.volume;\n  const barH = h * 0.06;\n  const gap = barH * 0.5;\n  const barW = w * 0.7;\n  const x = (w - barW) / 2;\n  let y = h * 0.3;\n\n  ctx.fillStyle = '#666';\n  ctx.font = `${barH * 0.7}px sans-serif`;\n  ctx.textAlign = 'left';\n\n  // Current (instant RMS)\n  ctx.fillStyle = '#4CAF50';\n  ctx.fillRect(x, y, barW * vol.current, barH);\n  ctx.fillStyle = '#aaa';\n  ctx.fillText('current: ' + vol.current.toFixed(3), x, y - 4);\n  y += barH + gap;\n\n  // Peak\n  ctx.fillStyle = '#FF9800';\n  ctx.fillRect(x, y, barW * vol.peak, barH);\n  ctx.fillStyle = '#aaa';\n  ctx.fillText('peak: ' + vol.peak.toFixed(3), x, y - 4);\n  y += barH + gap;\n\n  // Smoothed\n  ctx.fillStyle = '#2196F3';\n  ctx.fillRect(x, y, barW * vol.smoothed, barH);\n  ctx.fillStyle = '#aaa';\n  ctx.fillText('smoothed: ' + vol.smoothed.toFixed(3), x, y - 4);\n}\n```\n\n> [!NOTE]\n> All volume values are normalized to 0–1 using auto-gain (3-second window). This means the values adapt to the input level over time, providing consistent visual output regardless of whether the audio source is quiet or loud."
         },
         {
           "type": "live-example",
-          "title": "Keyboard — Movement & State",
-          "sceneCode": "const ctx = viji.useContext('2d');\nlet px, py;\n\nfunction render(viji) {\n  const w = viji.width, h = viji.height;\n  const size = Math.min(w, h);\n  const kb = viji.keyboard;\n\n  if (px === undefined) { px = w / 2; py = h / 2; }\n\n  const speed = size * 0.4 * viji.deltaTime * (kb.shift ? 2.5 : 1);\n  if (kb.isPressed('w') || kb.isPressed('arrowup')) py -= speed;\n  if (kb.isPressed('s') || kb.isPressed('arrowdown')) py += speed;\n  if (kb.isPressed('a') || kb.isPressed('arrowleft')) px -= speed;\n  if (kb.isPressed('d') || kb.isPressed('arrowright')) px += speed;\n  px = Math.max(0, Math.min(w, px));\n  py = Math.max(0, Math.min(h, py));\n\n  ctx.fillStyle = 'rgba(10, 10, 30, 0.15)';\n  ctx.fillRect(0, 0, w, h);\n\n  const r = size * 0.03;\n  ctx.beginPath();\n  ctx.arc(px, py, r, 0, Math.PI * 2);\n  ctx.fillStyle = `hsl(${(viji.time * 40) % 360}, 80%, 65%)`;\n  ctx.fill();\n\n  ctx.fillStyle = 'rgba(255,255,255,0.5)';\n  ctx.font = `${size * 0.022}px monospace`;\n  ctx.textAlign = 'left';\n  const y0 = h - size * 0.12;\n  const keys = [...kb.activeKeys];\n  ctx.fillText(`active: [${keys.join(', ')}]`, size * 0.03, y0);\n  ctx.fillText(`mods: ${kb.shift ? '[Shift] ' : ''}${kb.ctrl ? '[Ctrl] ' : ''}${kb.alt ? '[Alt] ' : ''}${kb.meta ? '[Meta]' : ''}${!kb.shift && !kb.ctrl && !kb.alt && !kb.meta ? 'none' : ''}`, size * 0.03, y0 + size * 0.03);\n  ctx.fillText(`last pressed: \"${kb.lastKeyPressed}\"  released: \"${kb.lastKeyReleased}\"`, size * 0.03, y0 + size * 0.06);\n\n  ctx.fillStyle = 'rgba(255,255,255,0.3)';\n  ctx.textAlign = 'center';\n  ctx.fillText('WASD / Arrows to move \\u2022 Shift for speed', w / 2, size * 0.04);\n}\n",
-          "sceneFile": "keyboard-demo.scene.js"
+          "title": "Volume Meters",
+          "sceneCode": "function render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  if (!viji.audio.isConnected) {\n    ctx.fillStyle = '#555';\n    ctx.font = `${Math.min(w, h) * 0.04}px sans-serif`;\n    ctx.textAlign = 'center';\n    ctx.fillText('Waiting for audio...', w / 2, h / 2);\n    return;\n  }\n\n  const vol = viji.audio.volume;\n  const barH = h * 0.06;\n  const gap = barH * 0.5;\n  const barW = w * 0.7;\n  const x = (w - barW) / 2;\n  let y = h * 0.3;\n  const fontSize = barH * 0.7;\n\n  ctx.font = `${fontSize}px sans-serif`;\n  ctx.textAlign = 'left';\n\n  // Current (instant RMS)\n  ctx.fillStyle = '#4CAF50';\n  ctx.fillRect(x, y, barW * vol.current, barH);\n  ctx.fillStyle = '#aaa';\n  ctx.fillText('current: ' + vol.current.toFixed(3), x, y - 4);\n  y += barH + gap;\n\n  // Peak\n  ctx.fillStyle = '#FF9800';\n  ctx.fillRect(x, y, barW * vol.peak, barH);\n  ctx.fillStyle = '#aaa';\n  ctx.fillText('peak: ' + vol.peak.toFixed(3), x, y - 4);\n  y += barH + gap;\n\n  // Smoothed\n  ctx.fillStyle = '#2196F3';\n  ctx.fillRect(x, y, barW * vol.smoothed, barH);\n  ctx.fillStyle = '#aaa';\n  ctx.fillText('smoothed: ' + vol.smoothed.toFixed(3), x, y - 4);\n}\n",
+          "sceneFile": "volume-demo.scene.js"
         },
         {
           "type": "text",
-          "markdown": "## Common Patterns\n\n### WASD Movement\n\n```javascript\nlet x = 0, y = 0;\n\nfunction render(viji) {\n  const kb = viji.keyboard;\n  const speed = 200 * viji.deltaTime * (kb.shift ? 2.5 : 1);\n\n  if (kb.isPressed('w') || kb.isPressed('arrowup')) y -= speed;\n  if (kb.isPressed('s') || kb.isPressed('arrowdown')) y += speed;\n  if (kb.isPressed('a') || kb.isPressed('arrowleft')) x -= speed;\n  if (kb.isPressed('d') || kb.isPressed('arrowright')) x += speed;\n}\n```\n\n### Single-Press Toggle\n\n```javascript\nlet showGrid = false;\n\nfunction render(viji) {\n  if (viji.keyboard.wasPressed('g')) {\n    showGrid = !showGrid;\n  }\n}\n```\n\n### Key Combination\n\n```javascript\nfunction render(viji) {\n  const kb = viji.keyboard;\n  if (kb.ctrl && kb.wasPressed('z')) {\n    undo();\n  }\n}\n```\n\n## Related\n\n- [Pointer (Unified)](../pointer/) — recommended starting point for position and click interactions\n- [Mouse](../mouse/) — mouse position, buttons, and scroll wheel\n- [Touch](../touch/) — multi-touch input with pressure and velocity\n- [P5 Keyboard](/p5/keyboard) — same API in the P5 renderer\n- [Shader Keyboard Uniforms](/shader/keyboard) — GLSL uniforms for common keys"
+          "markdown": "## Related\n\n- [Audio Overview](../)\n- [Connection & Lifecycle](../connection/)\n- [Frequency Bands](../bands/)\n- [Beat Detection](../beat/)"
         }
       ]
     },
-    "native-touch": {
-      "id": "native-touch",
-      "title": "Touch",
-      "description": "Multi-touch API — per-finger tracking with position, pressure, radius, velocity, and lifecycle events.",
+    "native-audio-bands": {
+      "id": "native-audio-bands",
+      "title": "Frequency Bands",
+      "description": "Five frequency bands with instant and smoothed variants for audio-reactive visuals.",
       "content": [
         {
           "type": "text",
-          "markdown": "# Touch\n\n`viji.touches` provides full multi-touch input with per-finger position, pressure, contact radius, velocity, and lifecycle tracking.\n\n> [!TIP]\n> For single-point interactions (click, drag, follow) that should work on both touch and mouse, use [`viji.pointer`](../pointer/) instead. The touch API is for when you need multi-touch gestures, pressure sensitivity, contact radius, or per-finger velocity.\n\n## API Reference\n\n### TouchAPI (`viji.touches`)\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `points` | `TouchPoint[]` | All currently active touch points |\n| `count` | `number` | Number of active touches |\n| `started` | `TouchPoint[]` | Touches that started this frame |\n| `moved` | `TouchPoint[]` | Touches that moved this frame |\n| `ended` | `TouchPoint[]` | Touches that ended this frame |\n| `primary` | `TouchPoint \\| null` | First active touch (convenience) |\n\n### TouchPoint\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `id` | `number` | Unique touch identifier (stable across frames) |\n| `x` | `number` | Canvas-space X position (pixels) |\n| `y` | `number` | Canvas-space Y position (pixels) |\n| `pressure` | `number` | Touch pressure (0–1, device-dependent) |\n| `force` | `number` | Same as `pressure` (alias) |\n| `radius` | `number` | Contact radius — `Math.max(radiusX, radiusY)` |\n| `radiusX` | `number` | Horizontal contact radius (pixels) |\n| `radiusY` | `number` | Vertical contact radius (pixels) |\n| `rotationAngle` | `number` | Contact area rotation (radians) |\n| `isInCanvas` | `boolean` | `true` if this touch is within the canvas bounds |\n| `deltaX` | `number` | Horizontal movement since last frame (pixels) |\n| `deltaY` | `number` | Vertical movement since last frame (pixels) |\n| `velocity` | `{ x: number, y: number }` | Movement velocity (pixels/second) |\n| `isNew` | `boolean` | `true` for exactly one frame when this touch starts, then resets |\n| `isActive` | `boolean` | `true` while the touch is ongoing |\n| `isEnding` | `boolean` | `true` for exactly one frame when this touch ends, then resets |\n\n## Coordinate System\n\nTouch coordinates are in **canvas-space pixels**, with `(0, 0)` at the top-left corner — identical to [`viji.mouse`](../mouse/) coordinates. When a touch starts on the canvas and is dragged outside, the browser continues delivering events, and `isInCanvas` correctly reports `false`.\n\n## Frame Lifecycle\n\n- `started`, `moved`, and `ended` arrays are cleared at the start of each frame.\n- `points` and `count` reflect the current state after all events in the frame.\n- A touch appears in `started` on the frame it begins (with `isNew: true`), in `ended` on the frame it lifts (with `isEnding: true`).\n- `primary` is always `points[0]` or `null` when no touches are active.\n\n## Raw Device Values\n\nViji passes through raw device values without injecting defaults. If a device reports `radiusX: 0` or `force: 0`, that is what your code sees. Pressure and radius behavior varies across devices:\n\n| Property | iOS | Android | Desktop |\n|----------|-----|---------|---------|\n| `x`, `y` | Reliable | Reliable | N/A (use mouse) |\n| `radiusX`, `radiusY` | Updates on move | Updates on move | N/A |\n| `pressure` / `force` | Brief value on start, often `0` during move (no 3D Touch on newer iPhones) | Varies by device | N/A |\n| `rotationAngle` | Supported | Supported | N/A |\n| `deltaX/Y`, `velocity` | Computed in Viji — reliable on all devices | Same | N/A |\n\n## Basic Example"
+          "markdown": "# Frequency Bands\n\nThe `viji.audio.bands` object splits the audio spectrum into five named frequency bands. Each band has an instant value and a smoothed variant.\n\n## Property Reference\n\n### Instant Bands\n\n| Property | Hz Range | Description |\n|----------|----------|-------------|\n| `viji.audio.bands.low` | 20–120 Hz | Bass / kick range (0–1) |\n| `viji.audio.bands.lowMid` | 120–400 Hz | Low-mid range (0–1) |\n| `viji.audio.bands.mid` | 400–1600 Hz | Vocals, instruments (0–1) |\n| `viji.audio.bands.highMid` | 1600–6000 Hz | Cymbals, hi-hats (0–1) |\n| `viji.audio.bands.high` | 6000–16000 Hz | Air, brilliance (0–1) |\n\n### Smoothed Bands\n\nSmoothed variants follow a 150ms decay envelope — they rise quickly but fall gradually.\n\n| Property | Hz Range | Description |\n|----------|----------|-------------|\n| `viji.audio.bands.lowSmoothed` | 20–120 Hz | Smoothed bass (0–1) |\n| `viji.audio.bands.lowMidSmoothed` | 120–400 Hz | Smoothed low-mid (0–1) |\n| `viji.audio.bands.midSmoothed` | 400–1600 Hz | Smoothed mid (0–1) |\n| `viji.audio.bands.highMidSmoothed` | 1600–6000 Hz | Smoothed high-mid (0–1) |\n| `viji.audio.bands.highSmoothed` | 6000–16000 Hz | Smoothed high (0–1) |\n\n### Instant vs Smoothed\n\n- **Instant** values reflect the current frame's frequency energy. They can change abruptly between frames.\n- **Smoothed** values follow a 150ms decay envelope. Use these for animations that should move fluidly rather than flicker.\n\n## Usage\n\n```javascript\nfunction render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  if (!viji.audio.isConnected) return;\n\n  const bands = viji.audio.bands;\n  const names = ['low', 'lowMid', 'mid', 'highMid', 'high'];\n  const colors = ['#e74c3c', '#e67e22', '#f1c40f', '#2ecc71', '#3498db'];\n  const barW = w / names.length;\n\n  for (let i = 0; i < names.length; i++) {\n    const instant = bands[names[i]];\n    const smoothed = bands[names[i] + 'Smoothed'];\n    const x = i * barW;\n\n    // Smoothed bar (background)\n    ctx.fillStyle = colors[i] + '44';\n    ctx.fillRect(x + 2, h - smoothed * h, barW - 4, smoothed * h);\n\n    // Instant bar (foreground)\n    ctx.fillStyle = colors[i];\n    ctx.fillRect(x + 2, h - instant * h, barW - 4, instant * h);\n  }\n\n  ctx.fillStyle = '#aaa';\n  ctx.font = `${Math.min(w, h) * 0.03}px sans-serif`;\n  ctx.textAlign = 'center';\n  for (let i = 0; i < names.length; i++) {\n    ctx.fillText(names[i], i * barW + barW / 2, h - 8);\n  }\n}\n```\n\n> [!NOTE]\n> All band values are independently normalized to 0–1 using per-band auto-gain (3-second window). A quiet high-frequency signal can produce the same band value as a loud bass signal."
         },
         {
           "type": "live-example",
-          "title": "Touch — Multi-Point Tracker",
-          "sceneCode": "const ctx = viji.useContext('2d');\nconst ripples = [];\n\nfunction render(viji) {\n  const w = viji.width, h = viji.height;\n  const size = Math.min(w, h);\n  const touch = viji.touches;\n  const dt = viji.deltaTime;\n\n  for (const pt of touch.started) {\n    ripples.push({ x: pt.x, y: pt.y, r: 0, alpha: 1 });\n  }\n\n  ctx.fillStyle = 'rgba(10, 10, 30, 0.2)';\n  ctx.fillRect(0, 0, w, h);\n\n  for (let i = ripples.length - 1; i >= 0; i--) {\n    const rp = ripples[i];\n    rp.r += size * 0.3 * dt;\n    rp.alpha -= dt * 0.8;\n    if (rp.alpha <= 0) { ripples.splice(i, 1); continue; }\n    ctx.beginPath();\n    ctx.arc(rp.x, rp.y, rp.r, 0, Math.PI * 2);\n    ctx.strokeStyle = `hsla(200, 80%, 70%, ${rp.alpha})`;\n    ctx.lineWidth = 2;\n    ctx.stroke();\n  }\n\n  for (let i = 0; i < touch.count; i++) {\n    const pt = touch.points[i];\n    const r = size * 0.02 + pt.pressure * size * 0.04;\n\n    ctx.beginPath();\n    ctx.arc(pt.x, pt.y, r, 0, Math.PI * 2);\n    ctx.fillStyle = `hsla(${120 + i * 60}, 80%, 65%, 0.8)`;\n    ctx.fill();\n\n    const speed = Math.sqrt(pt.velocity.x ** 2 + pt.velocity.y ** 2);\n    if (speed > 10) {\n      const len = Math.min(speed * 0.05, size * 0.08);\n      const angle = Math.atan2(pt.velocity.y, pt.velocity.x);\n      ctx.beginPath();\n      ctx.moveTo(pt.x, pt.y);\n      ctx.lineTo(pt.x + Math.cos(angle) * len, pt.y + Math.sin(angle) * len);\n      ctx.strokeStyle = `hsla(${120 + i * 60}, 80%, 75%, 0.5)`;\n      ctx.lineWidth = 2;\n      ctx.stroke();\n    }\n\n    ctx.fillStyle = 'rgba(255,255,255,0.6)';\n    ctx.font = `${size * 0.02}px monospace`;\n    ctx.textAlign = 'center';\n    ctx.fillText(`T${pt.id}`, pt.x, pt.y - r - size * 0.01);\n  }\n\n  ctx.fillStyle = 'rgba(255,255,255,0.4)';\n  ctx.font = `${size * 0.022}px monospace`;\n  ctx.textAlign = 'left';\n  ctx.fillText(`touches: ${touch.count}  primary: ${touch.primary ? 'T' + touch.primary.id : '-'}`, size * 0.03, h - size * 0.03);\n}\n",
-          "sceneFile": "touch-demo.scene.js"
+          "title": "Frequency Band Bars",
+          "sceneCode": "function render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  if (!viji.audio.isConnected) {\n    ctx.fillStyle = '#555';\n    ctx.font = `${Math.min(w, h) * 0.04}px sans-serif`;\n    ctx.textAlign = 'center';\n    ctx.fillText('Waiting for audio...', w / 2, h / 2);\n    return;\n  }\n\n  const bands = viji.audio.bands;\n  const names = ['low', 'lowMid', 'mid', 'highMid', 'high'];\n  const colors = ['#e74c3c', '#e67e22', '#f1c40f', '#2ecc71', '#3498db'];\n  const barW = w / names.length;\n\n  for (let i = 0; i < names.length; i++) {\n    const instant = bands[names[i]];\n    const smoothed = bands[names[i] + 'Smoothed'];\n    const x = i * barW;\n\n    ctx.fillStyle = colors[i] + '44';\n    ctx.fillRect(x + 2, h - smoothed * h, barW - 4, smoothed * h);\n\n    ctx.fillStyle = colors[i];\n    ctx.fillRect(x + 2, h - instant * h, barW - 4, instant * h);\n  }\n\n  ctx.fillStyle = '#aaa';\n  ctx.font = `${Math.min(w, h) * 0.03}px sans-serif`;\n  ctx.textAlign = 'center';\n  for (let i = 0; i < names.length; i++) {\n    ctx.fillText(names[i], i * barW + barW / 2, h - 8);\n  }\n}\n",
+          "sceneFile": "bands-demo.scene.js"
         },
         {
           "type": "text",
-          "markdown": "## Common Patterns\n\n### Iterate All Touches\n\n```javascript\nfunction render(viji) {\n  for (const pt of viji.touches.points) {\n    drawCircle(pt.x, pt.y, 10 + pt.pressure * 30);\n  }\n}\n```\n\n### Detect New Touches\n\n```javascript\nfunction render(viji) {\n  for (const pt of viji.touches.started) {\n    spawnRipple(pt.x, pt.y);\n  }\n}\n```\n\n### Two-Finger Pinch Distance\n\n```javascript\nfunction render(viji) {\n  if (viji.touches.count >= 2) {\n    const a = viji.touches.points[0];\n    const b = viji.touches.points[1];\n    const dist = Math.sqrt((a.x - b.x) ** 2 + (a.y - b.y) ** 2);\n    applyZoom(dist);\n  }\n}\n```\n\n### Velocity-Based Effects\n\n```javascript\nfunction render(viji) {\n  const p = viji.touches.primary;\n  if (p) {\n    const speed = Math.sqrt(p.velocity.x ** 2 + p.velocity.y ** 2);\n    drawTrail(p.x, p.y, speed);\n  }\n}\n```\n\n## Related\n\n- [Pointer (Unified)](../pointer/) — recommended starting point for single-point cross-device interactions\n- [Mouse](../mouse/) — mouse position, buttons, and scroll wheel\n- [Keyboard](../keyboard/) — key state queries and modifier tracking\n- [P5 Touch](/p5/touch) — same API in the P5 renderer\n- [Shader Touch Uniforms](/shader/touch) — GLSL uniforms for touch positions"
+          "markdown": "## Related\n\n- [Audio Overview](../)\n- [Volume](../volume/)\n- [Beat Detection](../beat/)\n- [Frequency Data](../frequency-data/)\n- [Spectral Analysis](../spectral/)"
         }
       ]
     },
-    "p5-quickstart": {
-      "id": "p5-quickstart",
-      "title": "p5-quickstart",
-      "description": "Build your first Viji scene using the familiar P5.js creative coding API.",
+    "native-audio-beat": {
+      "id": "native-audio-beat",
+      "title": "Beat Detection",
+      "description": "Energy curves, boolean triggers, detailed beat events, BPM tracking, and confidence scoring.",
       "content": [
         {
           "type": "text",
-          "markdown": "# P5.js Quick Start\r\n\r\nThe P5.js renderer gives you the familiar Processing/P5.js drawing API. Viji loads P5.js automatically — no installation needed.\r\n\r\n> [!IMPORTANT]\r\n> P5 and shader scenes must declare their renderer type as the first comment:\r\n> ```\r\n> // @renderer p5\r\n> ```\r\n> Without this directive, the scene defaults to the native renderer.\r\n\r\n## Your First Scene"
+          "markdown": "# Beat Detection\n\nThe `viji.audio.beat` object provides multiple layers of beat information — from simple energy curves to precise boolean triggers, detailed event arrays, and BPM tracking.\n\n## Property Reference\n\n### Energy Curves (fast decay)\n\nEnergy curves track beat intensity with a 300ms fast decay. They peak at the moment of a beat and decay smoothly, making them ideal for scaling, pulsing, or flash effects.\n\n| Property | Type | Range | Description |\n|----------|------|-------|-------------|\n| `viji.audio.beat.kick` | `number` | 0–1 | Kick energy (300ms decay) |\n| `viji.audio.beat.snare` | `number` | 0–1 | Snare energy (300ms decay) |\n| `viji.audio.beat.hat` | `number` | 0–1 | Hi-hat energy (300ms decay) |\n| `viji.audio.beat.any` | `number` | 0–1 | Any-beat energy (300ms decay) |\n\n### Energy Curves (smoothed)\n\nSmoothed variants use a slower 500ms decay, producing a more gradual response suitable for ambient or background effects.\n\n| Property | Type | Range | Description |\n|----------|------|-------|-------------|\n| `viji.audio.beat.kickSmoothed` | `number` | 0–1 | Kick smoothed energy (500ms decay) |\n| `viji.audio.beat.snareSmoothed` | `number` | 0–1 | Snare smoothed energy (500ms decay) |\n| `viji.audio.beat.hatSmoothed` | `number` | 0–1 | Hi-hat smoothed energy (500ms decay) |\n| `viji.audio.beat.anySmoothed` | `number` | 0–1 | Any-beat smoothed energy (500ms decay) |\n\n### Triggers\n\nBoolean triggers fire on beat detection. Each trigger is **true for exactly one frame when a beat is detected, then resets**. Multiple audio analysis messages can arrive between render frames — triggers are OR-accumulated so no beat is ever lost.\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `viji.audio.beat.triggers.kick` | `boolean` | `true` for one frame when a kick is detected |\n| `viji.audio.beat.triggers.snare` | `boolean` | `true` for one frame when a snare is detected |\n| `viji.audio.beat.triggers.hat` | `boolean` | `true` for one frame when a hi-hat is detected |\n| `viji.audio.beat.triggers.any` | `boolean` | `true` for one frame when any beat is detected |\n\n### Events\n\nThe `events` array provides detailed information about every beat detected since the last frame. It may contain zero, one, or multiple events per frame.\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `viji.audio.beat.events` | `Array<BeatEvent>` | Beat events accumulated since the last frame |\n\nEach `BeatEvent` contains:\n\n| Field | Type | Description |\n|-------|------|-------------|\n| `type` | `'kick' \\| 'snare' \\| 'hat'` | Beat type |\n| `time` | `number` | Timestamp in milliseconds |\n| `strength` | `number` | Beat strength (0–1) |\n\n### Tempo\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `viji.audio.beat.bpm` | `number` | Current detected BPM (defaults to 120 when no audio) |\n| `viji.audio.beat.confidence` | `number` | Beat tracking confidence (0–1) |\n| `viji.audio.beat.isLocked` | `boolean` | `true` when the beat tracker has a stable lock on tempo |\n\n## Usage — Energy Curves\n\nEnergy curves are the simplest way to react to beats. Use the fast decay values for punchy effects and the smoothed values for ambient motion.\n\n```javascript\nfunction render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  if (!viji.audio.isConnected) return;\n\n  const beat = viji.audio.beat;\n  const cx = w / 2;\n  const cy = h / 2;\n  const baseR = Math.min(w, h) * 0.08;\n\n  // Kick — large red pulse\n  ctx.beginPath();\n  ctx.arc(cx - w * 0.2, cy, baseR + beat.kick * baseR * 2, 0, Math.PI * 2);\n  ctx.fillStyle = `rgba(231, 76, 60, ${0.3 + beat.kick * 0.7})`;\n  ctx.fill();\n\n  // Snare — medium yellow pulse\n  ctx.beginPath();\n  ctx.arc(cx, cy, baseR + beat.snare * baseR * 1.5, 0, Math.PI * 2);\n  ctx.fillStyle = `rgba(241, 196, 15, ${0.3 + beat.snare * 0.7})`;\n  ctx.fill();\n\n  // Hat — small blue pulse\n  ctx.beginPath();\n  ctx.arc(cx + w * 0.2, cy, baseR + beat.hat * baseR, 0, Math.PI * 2);\n  ctx.fillStyle = `rgba(52, 152, 219, ${0.3 + beat.hat * 0.7})`;\n  ctx.fill();\n}\n```\n\n## Usage — Triggers\n\nTriggers are ideal for discrete, one-shot actions — spawning particles, changing colors, or advancing a sequence.\n\n```javascript\nlet hue = 0;\n\nfunction render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  if (!viji.audio.isConnected) return;\n\n  if (viji.audio.beat.triggers.kick) {\n    hue = (hue + 30) % 360;\n  }\n\n  ctx.fillStyle = `hsla(${hue}, 70%, 50%, 0.1)`;\n  ctx.fillRect(0, 0, w, h);\n\n  if (viji.audio.beat.triggers.any) {\n    const x = Math.random() * w;\n    const y = Math.random() * h;\n    const r = Math.min(w, h) * (0.02 + Math.random() * 0.06);\n    ctx.beginPath();\n    ctx.arc(x, y, r, 0, Math.PI * 2);\n    ctx.fillStyle = `hsl(${hue}, 80%, 60%)`;\n    ctx.fill();\n  }\n}\n```\n\n> [!NOTE]\n> Triggers and events are accumulated between render frames and reset after each frame. This guarantees no beat is silently lost, even when the audio analysis rate (125Hz) exceeds the frame rate."
         },
         {
           "type": "live-example",
-          "title": "P5 — Rainbow Trail",
-          "sceneCode": "// @renderer p5\r\n\r\nconst trailLength = viji.slider(40, { min: 5, max: 100, step: 1, label: 'Trail Length' });\r\nconst hueSpeed = viji.slider(30, { min: 5, max: 100, label: 'Hue Speed' });\r\n\r\nfunction setup(viji, p5) {\r\n  p5.colorMode(p5.HSB, 360, 100, 100, 100);\r\n}\r\n\r\nfunction render(viji, p5) {\r\n  p5.background(0, 0, 10, 15);\r\n\r\n  for (let i = 0; i < trailLength.value; i++) {\r\n    const t = viji.time - i * 0.02;\r\n    const x = viji.width / 2 + p5.cos(t * 1.5) * viji.width * 0.3;\r\n    const y = viji.height / 2 + p5.sin(t * 2.0) * viji.height * 0.25;\r\n    const hue = (viji.time * hueSpeed.value + i * 3) % 360;\r\n    const size = p5.map(i, 0, trailLength.value, viji.width * 0.04, viji.width * 0.005);\r\n\r\n    p5.noStroke();\r\n    p5.fill(hue, 80, 100, p5.map(i, 0, trailLength.value, 100, 0));\r\n    p5.circle(x, y, size);\r\n  }\r\n}\r\n",
-          "sceneFile": "quickstart-p5.scene.js"
+          "title": "Beat Pulses",
+          "sceneCode": "let hue = 0;\n\nfunction render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  if (!viji.audio.isConnected) {\n    ctx.fillStyle = '#111';\n    ctx.fillRect(0, 0, w, h);\n    ctx.fillStyle = '#555';\n    ctx.font = `${Math.min(w, h) * 0.04}px sans-serif`;\n    ctx.textAlign = 'center';\n    ctx.fillText('Waiting for audio...', w / 2, h / 2);\n    return;\n  }\n\n  const beat = viji.audio.beat;\n\n  if (beat.triggers.kick) {\n    hue = (hue + 30) % 360;\n  }\n\n  ctx.fillStyle = `hsla(${hue}, 70%, 50%, 0.08)`;\n  ctx.fillRect(0, 0, w, h);\n\n  const cx = w / 2;\n  const cy = h / 2;\n  const baseR = Math.min(w, h) * 0.08;\n\n  // Kick pulse\n  ctx.beginPath();\n  ctx.arc(cx - w * 0.2, cy, baseR + beat.kick * baseR * 2, 0, Math.PI * 2);\n  ctx.fillStyle = `rgba(231, 76, 60, ${0.3 + beat.kick * 0.7})`;\n  ctx.fill();\n\n  // Snare pulse\n  ctx.beginPath();\n  ctx.arc(cx, cy, baseR + beat.snare * baseR * 1.5, 0, Math.PI * 2);\n  ctx.fillStyle = `rgba(241, 196, 15, ${0.3 + beat.snare * 0.7})`;\n  ctx.fill();\n\n  // Hat pulse\n  ctx.beginPath();\n  ctx.arc(cx + w * 0.2, cy, baseR + beat.hat * baseR, 0, Math.PI * 2);\n  ctx.fillStyle = `rgba(52, 152, 219, ${0.3 + beat.hat * 0.7})`;\n  ctx.fill();\n\n  // Particle spawn on any trigger\n  if (beat.triggers.any) {\n    const x = Math.random() * w;\n    const y = Math.random() * h;\n    const r = Math.min(w, h) * (0.02 + Math.random() * 0.06);\n    ctx.beginPath();\n    ctx.arc(x, y, r, 0, Math.PI * 2);\n    ctx.fillStyle = `hsl(${hue}, 80%, 60%)`;\n    ctx.fill();\n  }\n}\n",
+          "sceneFile": "beat-demo.scene.js"
         },
         {
           "type": "text",
-          "markdown": "### What's Happening\r\n\r\n**Top level — runs once:**\r\n\r\n- `// @renderer p5` tells Viji to use the P5 renderer.\r\n- `viji.slider()` creates UI parameters — declared at the top level, read via `.value` in `render()`.\r\n\r\n**`setup(viji, p5)` — optional, runs once:**\r\n\r\n- Use for one-time configuration like `p5.colorMode()`. If you don't need it, omit it entirely.\r\n\r\n**`render(viji, p5)` — called every frame:**\r\n\r\n- `p5` is a full P5.js instance in **instance mode** — all P5 functions require the `p5.` prefix.\r\n- `viji.width` and `viji.height` give the canvas size — use them for resolution-agnostic positioning.\r\n- `viji.time` is elapsed seconds — use it for animation.\r\n\r\n> [!NOTE]\r\n> Parameters must be defined at the top level of your scene, not inside `setup()` or `render()`. They are registered once and sent to the host before either function runs. Defining them inside `setup()` would register the parameter too late — no UI control would appear. Defining them inside `render()` would re-register the parameter every frame, resetting its value to the default.\r\n\r\n## Scene Structure\r\n\r\n```javascript\r\n// @renderer p5\r\n\r\n// 1. Top level — parameters and state\r\nconst size = viji.slider(50, { min: 10, max: 200, label: 'Size' });\r\n\r\n// 2. setup() — optional one-time config\r\nfunction setup(viji, p5) {\r\n  p5.colorMode(p5.HSB);\r\n}\r\n\r\n// 3. render() — called every frame\r\nfunction render(viji, p5) {\r\n  p5.background(0);\r\n  p5.circle(viji.width / 2, viji.height / 2, size.value);\r\n}\r\n```\r\n\r\n- **`render(viji, p5)` is required.** It replaces P5's `draw()`.\r\n- **`setup(viji, p5)` is optional.** Use it for one-time configuration.\r\n- **No `createCanvas()`.** The canvas is created and managed by Viji.\r\n- **No `preload()`.** Use `viji.image()` parameters or `fetch()` in `setup()`.\r\n\r\n## Instance Mode\r\n\r\n> [!WARNING]\r\n> Viji uses P5 in **instance mode**. All P5 functions require the `p5.` prefix:\r\n> ```javascript\r\n> // Correct\r\n> p5.background(0);\r\n> p5.circle(viji.width / 2, viji.height / 2, 100);\r\n>\r\n> // Wrong — will throw ReferenceError\r\n> background(0);\r\n> circle(width / 2, height / 2, 100);\r\n> ```\r\n\r\n## Input and Interaction\r\n\r\nP5's built-in input globals (`mouseX`, `mouseY`, `keyIsPressed`, etc.) are not updated in the worker environment. Use the Viji API instead. For most interactions, [`viji.pointer`](/p5/pointer) works across both mouse and touch:\r\n\r\n```javascript\r\nfunction render(viji, p5) {\r\n  if (viji.pointer.isDown) {\r\n    p5.circle(viji.pointer.x, viji.pointer.y, 20);\r\n  }\r\n}\r\n```\r\n\r\nFor mouse-specific features (right-click, wheel) use [`viji.mouse`](/p5/mouse). For multi-touch use [`viji.touches`](/p5/touch). For keyboard use [`viji.keyboard`](/p5/keyboard).\r\n\r\n## Essential Patterns\r\n\r\n> [!NOTE]\r\n> Always use `viji.width` and `viji.height` for positioning and sizing, and `viji.deltaTime` for frame-rate-independent animation. Never hardcode pixel values or assume a specific frame rate.\r\n\r\n> [!WARNING]\r\n> Scenes run in a Web Worker — there is no `window`, `document`, `Image()`, `localStorage`, or any DOM API. All inputs (audio, video, images) are provided through the Viji API. Note: `fetch()` IS available and can be used to load external data (JSON, etc.) from CDNs.\r\n\r\n> [!TIP]\r\n> Avoid allocating objects, arrays, or strings inside `render()`. Pre-allocate at the top level and reuse them.\r\n\r\n## Converting Existing Sketches\r\n\r\nIf you have existing P5.js sketches, see [Converting P5 Sketches](/p5/converting-sketches) for a step-by-step migration guide. Key differences: `draw()` → `render()`, instance mode, no `createCanvas()`, Viji APIs for input.\r\n\r\n## Next Steps\r\n\r\n- [Scene Structure](/p5/scene-structure) — `setup()`, `render()`, and lifecycle details\r\n- [Drawing with P5](/p5/drawing) — P5 drawing functions in Viji\r\n- [Converting P5 Sketches](/p5/converting-sketches) — migrate existing sketches\r\n- [Parameters](/p5/parameters) — sliders, colors, toggles, and more\r\n- [Audio](/p5/audio) — react to music and sound\r\n- [API Reference](/p5/api-reference) — full list of everything available\r\n- [Best Practices](/getting-started/best-practices) — essential patterns for all renderers"
+          "markdown": "## Related\n\n- [Audio Overview](../)\n- [Volume](../volume/)\n- [Frequency Bands](../bands/)\n- [Spectral Analysis](../spectral/)"
         }
       ]
     },
-    "p5-scene-structure": {
-      "id": "p5-scene-structure",
-      "title": "Scene Structure",
-      "description": "The setup/render lifecycle, instance mode, and how P5 scenes are organized in Viji.",
+    "native-audio-spectral": {
+      "id": "native-audio-spectral",
+      "title": "Spectral Analysis",
+      "description": "Spectral brightness and flatness features for tonal and textural audio analysis.",
       "content": [
         {
           "type": "text",
-          "markdown": "# Scene Structure\n\nA P5 scene in Viji follows a specific lifecycle. This page covers the `@renderer p5` directive, the `setup()` and `render()` functions, instance mode, and how P5 scenes differ from standard sketches.\n\n## The `@renderer` Directive\n\n> [!IMPORTANT]\n> P5 and shader scenes must declare their renderer type as the first comment:\n> ```\n> // @renderer p5\n> ```\n> or\n> ```\n> // @renderer shader\n> ```\n> Without this directive, the scene defaults to the native renderer.\n\n## Scene Lifecycle\n\nA P5 scene has three parts: top-level code, an optional `setup()`, and a required `render()`:\n\n```javascript\n// @renderer p5\n\n// 1. Top level — runs once: parameters, constants, state\nconst speed = viji.slider(1, { min: 0.1, max: 5, label: 'Speed' });\nlet angle = 0;\n\n// 2. setup(viji, p5) — optional, runs once after P5 initializes\nfunction setup(viji, p5) {\n  p5.colorMode(p5.HSB);\n}\n\n// 3. render(viji, p5) — called every frame\nfunction render(viji, p5) {\n  p5.background(0);\n  angle += speed.value * viji.deltaTime;\n  p5.circle(viji.width / 2, viji.height / 2, 100);\n}\n```\n\n### Top Level\n\nTop-level code runs once when the scene is first loaded. Use it for:\n\n- **Parameter declarations** — `viji.slider()`, `viji.color()`, `viji.toggle()`, etc.\n- **Constants** — precomputed values, lookup tables\n- **Mutable state** — variables that accumulate across frames\n- **Dynamic imports** — top-level `await` is supported (e.g., `const lib = await import('https://esm.sh/...')`)\n\n### `setup(viji, p5)` — Optional\n\nRuns once after P5 has initialized. Use it for one-time P5 configuration:\n\n```javascript\nfunction setup(viji, p5) {\n  p5.colorMode(p5.HSB, 360, 100, 100);\n  p5.textFont('monospace');\n  p5.noStroke();\n}\n```\n\nIf you don't need any P5 configuration, omit `setup()` entirely. Unlike standard P5, **there is no `createCanvas()` call** — the canvas is already created and sized by Viji.\n\n### `render(viji, p5)` — Required\n\nCalled every frame. This replaces P5's `draw()` function. Both arguments are always provided:\n\n| Argument | Type | Description |\n|----------|------|-------------|\n| `viji` | `VijiAPI` | Full Viji API — timing, audio, video, parameters, input |\n| `p5` | P5 instance | Full P5.js API in instance mode |"
+          "markdown": "# Spectral Analysis\n\nThe `viji.audio.spectral` object provides two high-level features derived from the frequency spectrum — brightness and flatness. These capture the tonal character of the audio without requiring you to work with raw FFT data.\n\n## Property Reference\n\n| Property | Type | Range | Description |\n|----------|------|-------|-------------|\n| `viji.audio.spectral.brightness` | `number` | 0–1 | Spectral centroid, normalized. Higher values indicate brighter, more treble-heavy sound |\n| `viji.audio.spectral.flatness` | `number` | 0–1 | Spectral flatness. Higher values indicate noisier, white-noise-like sound; lower values indicate tonal, pitched sound |\n\n### What They Measure\n\n- **Brightness** is the normalized spectral centroid — the \"center of mass\" of the frequency spectrum. A deep bass drone has low brightness; a cymbal crash has high brightness.\n- **Flatness** measures how evenly energy is distributed across frequencies. A pure sine wave has very low flatness (all energy in one bin). White noise has high flatness (energy spread evenly).\n\n## Usage\n\n```javascript\nfunction render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  if (!viji.audio.isConnected) return;\n\n  const brightness = viji.audio.spectral.brightness;\n  const flatness = viji.audio.spectral.flatness;\n\n  // Map brightness to hue (warm → cool)\n  const hue = 20 + brightness * 200;\n  // Map flatness to saturation (tonal → noisy)\n  const sat = 30 + (1 - flatness) * 60;\n\n  const r = Math.min(w, h) * 0.25;\n  ctx.beginPath();\n  ctx.arc(w / 2, h / 2, r, 0, Math.PI * 2);\n  ctx.fillStyle = `hsl(${hue}, ${sat}%, 55%)`;\n  ctx.fill();\n\n  ctx.fillStyle = '#aaa';\n  ctx.font = `${Math.min(w, h) * 0.03}px sans-serif`;\n  ctx.textAlign = 'center';\n  ctx.fillText(`brightness: ${brightness.toFixed(2)}  flatness: ${flatness.toFixed(2)}`, w / 2, h * 0.88);\n}\n```\n\n> [!NOTE]\n> Spectral features are derived from the same FFT data as [frequency bands](../bands/) and [frequency data](../frequency-data/), but provide a higher-level summary. Use them when you want to distinguish between tonal and noisy sections without analyzing individual bands or bins."
         },
         {
           "type": "live-example",
-          "title": "P5 Lifecycle — Expanding Rings",
-          "sceneCode": "// @renderer p5\n\nconst ringCount = viji.slider(5, { min: 1, max: 12, step: 1, label: 'Ring Count' });\nconst speed = viji.slider(1, { min: 0.2, max: 3, label: 'Speed' });\nconst strokeColor = viji.color('#ff44aa', { label: 'Ring Color' });\n\nfunction setup(viji, p5) {\n  p5.colorMode(p5.HSB, 360, 100, 100, 100);\n  p5.noFill();\n}\n\nfunction render(viji, p5) {\n  p5.background(0, 0, 5);\n\n  const cx = viji.width / 2;\n  const cy = viji.height / 2;\n  const maxR = Math.min(viji.width, viji.height) * 0.45;\n\n  for (let i = 0; i < ringCount.value; i++) {\n    const t = (viji.time * speed.value + i * 0.4) % 3;\n    const radius = (t / 3) * maxR;\n    const alpha = p5.map(t, 0, 3, 100, 0);\n    const sw = p5.map(t, 0, 3, Math.min(viji.width, viji.height) * 0.01, 1);\n\n    p5.stroke(strokeColor.value);\n    p5.drawingContext.globalAlpha = alpha / 100;\n    p5.strokeWeight(sw);\n    p5.circle(cx, cy, radius * 2);\n  }\n\n  p5.drawingContext.globalAlpha = 1;\n}\n",
-          "sceneFile": "scene-structure-lifecycle.scene.js"
+          "title": "Spectral Features",
+          "sceneCode": "function render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  if (!viji.audio.isConnected) {\n    ctx.fillStyle = '#555';\n    ctx.font = `${Math.min(w, h) * 0.04}px sans-serif`;\n    ctx.textAlign = 'center';\n    ctx.fillText('Waiting for audio...', w / 2, h / 2);\n    return;\n  }\n\n  const brightness = viji.audio.spectral.brightness;\n  const flatness = viji.audio.spectral.flatness;\n\n  const hue = 20 + brightness * 200;\n  const sat = 30 + (1 - flatness) * 60;\n\n  const r = Math.min(w, h) * 0.25;\n  ctx.beginPath();\n  ctx.arc(w / 2, h / 2, r, 0, Math.PI * 2);\n  ctx.fillStyle = `hsl(${hue}, ${sat}%, 55%)`;\n  ctx.fill();\n\n  ctx.fillStyle = '#aaa';\n  ctx.font = `${Math.min(w, h) * 0.03}px sans-serif`;\n  ctx.textAlign = 'center';\n  ctx.fillText(\n    `brightness: ${brightness.toFixed(2)}  flatness: ${flatness.toFixed(2)}`,\n    w / 2,\n    h * 0.88\n  );\n}\n",
+          "sceneFile": "spectral-demo.scene.js"
         },
         {
           "type": "text",
-          "markdown": "## Instance Mode\n\n> [!WARNING]\n> Viji uses P5 in **instance mode**. All P5 functions require the `p5.` prefix:\n> ```javascript\n> // Correct\n> p5.background(0);\n> p5.circle(p5.width / 2, p5.height / 2, 100);\n>\n> // Wrong — will throw ReferenceError\n> background(0);\n> circle(width / 2, height / 2, 100);\n> ```\n\nInstance mode means there are no global P5 functions. Every P5 API call — `background()`, `circle()`, `fill()`, `noise()`, `map()`, `constrain()`, `random()`, and all others — must use the `p5.` prefix.\n\nConstants are also namespaced: use `p5.PI`, `p5.TWO_PI`, `p5.HSB`, `p5.CENTER`, etc.\n\n## What's Different from Standard P5.js\n\n| Standard P5.js | Viji P5 | Reason |\n|----------------|---------|--------|\n| `function draw() { ... }` | `function render(viji, p5) { ... }` | Viji controls the render loop |\n| `createCanvas(800, 600)` | Not needed | Canvas is managed by Viji |\n| `resizeCanvas(w, h)` | Not needed | Resizing is automatic |\n| `preload()` | Not available | Use `viji.image()` parameters or `fetch()` in `setup()` |\n| `mouseX`, `mouseY` | [`viji.pointer.x`](/p5/pointer), [`viji.pointer.y`](/p5/pointer) (or [`viji.mouse.x`](/p5/mouse), [`viji.mouse.y`](/p5/mouse)) | P5 input globals don't update in workers |\n| `frameRate(30)` | Not available | Viji controls the frame rate |\n| `keyPressed()`, `mouseClicked()` | Check state in `render()` | No event callbacks in worker environment |\n| Global mode (`background(0)`) | Instance mode (`p5.background(0)`) | Worker environment requires explicit namespacing |\n\n## Environment Constraints\n\n> [!WARNING]\n> Scenes run in a Web Worker — there is no `window`, `document`, `Image()`, `localStorage`, or any DOM API. All inputs (audio, video, images) are provided through the Viji API. Note: `fetch()` IS available and can be used to load external data (JSON, etc.) from CDNs.\n\n## Next Steps\n\n- [Canvas & Resolution](/p5/canvas-resolution) — [`viji.width`](/p5/canvas-resolution), [`viji.height`](/p5/canvas-resolution), responsive layouts\n- [Timing](/p5/timing) — [`viji.time`](/p5/timing), [`viji.deltaTime`](/p5/timing), frame counting\n- [Drawing with P5](/p5/drawing) — P5 drawing functions in Viji\n- [Parameters](/p5/parameters) — sliders, colors, toggles\n- [Converting P5 Sketches](/p5/converting-sketches) — migrate existing sketches\n- [API Reference](/p5/api-reference) — full list of everything available"
+          "markdown": "## Related\n\n- [Audio Overview](../)\n- [Frequency Bands](../bands/)\n- [Frequency Data](../frequency-data/)\n- [Volume](../volume/)"
         }
       ]
     },
-    "p5-canvas-resolution": {
-      "id": "p5-canvas-resolution",
-      "title": "Canvas & Resolution",
-      "description": "How P5 manages the canvas, and using viji.width and viji.height for resolution-agnostic drawing.",
+    "native-audio-frequency-data": {
+      "id": "native-audio-frequency-data",
+      "title": "Frequency Data",
+      "description": "Raw FFT spectrum as a Uint8Array for custom frequency analysis and visualization.",
       "content": [
         {
           "type": "text",
-          "markdown": "# Canvas & Resolution\n\nIn the P5 renderer, the canvas and its rendering context are managed for you. You draw with P5 functions — no need to call `viji.useContext()`. This page covers how resolution works, what `viji.width` and `viji.height` mean, and how to build layouts that adapt to any canvas size.\n\n## Canvas Management\n\nViji creates the canvas and passes it to P5 automatically. Key differences from standard P5.js:\n\n- **No `createCanvas()`.** The canvas already exists. Calling `p5.createCanvas()` is unnecessary and should be avoided.\n- **No `resizeCanvas()`.** When the host resizes the canvas, Viji handles the resize and updates P5 internally. Your `render()` function is always called with the correct dimensions.\n- **P5 owns the rendering context.** You don't call `viji.useContext()` — P5 creates its own 2D context on the provided canvas.\n\n## Resolution Properties\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `viji.width` | `number` | Current canvas width in pixels |\n| `viji.height` | `number` | Current canvas height in pixels |\n| `p5.width` | `number` | Same value — P5's internal width |\n| `p5.height` | `number` | Same value — P5's internal height |\n| `viji.canvas` | `OffscreenCanvas` | The underlying canvas (rarely needed in P5 scenes) |\n\n`viji.width` and `p5.width` are always in sync — they reflect the same canvas. Use whichever feels natural, but `viji.width` is the canonical source across all renderers.\n\n## Resolution-Agnostic Layouts\n\n> [!NOTE]\n> Always use `viji.width` and `viji.height` for positioning and sizing, and `viji.deltaTime` for frame-rate-independent animation. Never hardcode pixel values or assume a specific frame rate.\n\nThe canvas can be any size — from a small preview to a fullscreen 4K display. Position and scale everything relative to `viji.width` and `viji.height`:\n\n```javascript\n// @renderer p5\n\nfunction render(viji, p5) {\n  const cx = viji.width / 2;\n  const cy = viji.height / 2;\n  const r = Math.min(viji.width, viji.height) * 0.3;\n  p5.circle(cx, cy, r * 2);\n}\n```"
+          "markdown": "# Frequency Data\n\nThe `viji.audio.getFrequencyData()` method returns the raw FFT magnitude spectrum as a `Uint8Array`. This is the lowest-level frequency data available — use it when you need full control over how audio frequencies are visualized or analyzed.\n\n## Method Reference\n\n| Method | Returns | Description |\n|--------|---------|-------------|\n| `viji.audio.getFrequencyData()` | `Uint8Array` | FFT magnitude spectrum, 1024 bins, each 0–255 |\n\n### Data Format\n\n- **Length**: 1024 bins (derived from an FFT size of 2048)\n- **Value range**: 0–255 per bin (unsigned byte magnitude)\n- **Frequency mapping**: Bin `i` corresponds to frequency `i × (sampleRate / fftSize)`. At 44.1kHz, the first bin is ~21.5Hz and the last bin is ~22050Hz.\n- **Snapshot**: The returned array is a copy from the most recent audio analysis update — not a live buffer. Calling it multiple times in the same frame returns the same data.\n\n## Usage — Spectrum Visualizer\n\n```javascript\nfunction render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  if (!viji.audio.isConnected) return;\n\n  const fft = viji.audio.getFrequencyData();\n  if (fft.length === 0) return;\n\n  const binCount = fft.length;\n  const barW = w / binCount;\n\n  for (let i = 0; i < binCount; i++) {\n    const value = fft[i] / 255;\n    const barH = value * h;\n    const hue = (i / binCount) * 280;\n    ctx.fillStyle = `hsl(${hue}, 80%, ${30 + value * 40}%)`;\n    ctx.fillRect(i * barW, h - barH, Math.max(barW - 0.5, 0.5), barH);\n  }\n}\n```\n\n## Usage — Logarithmic Spectrum\n\nFor a more musical visualization, use logarithmic frequency scaling so that each octave gets equal visual width.\n\n```javascript\nfunction render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  if (!viji.audio.isConnected) return;\n\n  const fft = viji.audio.getFrequencyData();\n  if (fft.length === 0) return;\n\n  const binCount = fft.length;\n  const bars = 64;\n  const logMax = Math.log(binCount);\n\n  for (let i = 0; i < bars; i++) {\n    const logStart = Math.exp((i / bars) * logMax);\n    const logEnd = Math.exp(((i + 1) / bars) * logMax);\n    const startBin = Math.floor(logStart);\n    const endBin = Math.min(Math.floor(logEnd), binCount - 1);\n\n    let sum = 0;\n    let count = 0;\n    for (let b = startBin; b <= endBin; b++) {\n      sum += fft[b];\n      count++;\n    }\n    const value = count > 0 ? (sum / count) / 255 : 0;\n\n    const barW = w / bars;\n    const barH = value * h * 0.9;\n    const hue = (i / bars) * 280;\n    ctx.fillStyle = `hsl(${hue}, 70%, ${35 + value * 35}%)`;\n    ctx.fillRect(i * barW + 1, h - barH, barW - 2, barH);\n  }\n}\n```\n\n> [!NOTE]\n> When `viji.audio.isConnected` is `false`, `getFrequencyData()` returns an empty `Uint8Array` (length 0). Always check the length before iterating."
         },
         {
           "type": "live-example",
-          "title": "Responsive Grid",
-          "sceneCode": "// @renderer p5\n\nconst cols = viji.slider(6, { min: 2, max: 12, step: 1, label: 'Columns' });\nconst padding = viji.slider(0.02, { min: 0, max: 0.05, label: 'Padding' });\nconst cornerRadius = viji.slider(0.3, { min: 0, max: 1, label: 'Corner Roundness' });\nconst bgColor = viji.color('#0f0f1a', { label: 'Background' });\nconst cellColor = viji.color('#3388ff', { label: 'Cell Color' });\n\nfunction setup(viji, p5) {\n  p5.colorMode(p5.HSB, 360, 100, 100);\n}\n\nfunction render(viji, p5) {\n  p5.background(bgColor.value);\n\n  const c = cols.value;\n  const pad = Math.min(viji.width, viji.height) * padding.value;\n  const cellW = (viji.width - pad) / c - pad;\n  const rows = Math.floor((viji.height - pad) / (cellW + pad));\n  const cellH = (viji.height - pad) / rows - pad;\n\n  for (let row = 0; row < rows; row++) {\n    for (let col = 0; col < c; col++) {\n      const x = pad + col * (cellW + pad);\n      const y = pad + row * (cellH + pad);\n      const hue = (col / c * 180 + row / rows * 180 + viji.time * 30) % 360;\n\n      p5.noStroke();\n      p5.fill(hue, 70, 90);\n      p5.rect(x, y, cellW, cellH, Math.min(cellW, cellH) * 0.5 * cornerRadius.value);\n    }\n  }\n}\n",
-          "sceneFile": "canvas-resolution-responsive.scene.js"
+          "title": "Spectrum Visualizer",
+          "sceneCode": "function render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  if (!viji.audio.isConnected) {\n    ctx.fillStyle = '#555';\n    ctx.font = `${Math.min(w, h) * 0.04}px sans-serif`;\n    ctx.textAlign = 'center';\n    ctx.fillText('Waiting for audio...', w / 2, h / 2);\n    return;\n  }\n\n  const fft = viji.audio.getFrequencyData();\n  if (fft.length === 0) return;\n\n  const binCount = fft.length;\n  const bars = 64;\n  const logMax = Math.log(binCount);\n\n  for (let i = 0; i < bars; i++) {\n    const logStart = Math.exp((i / bars) * logMax);\n    const logEnd = Math.exp(((i + 1) / bars) * logMax);\n    const startBin = Math.floor(logStart);\n    const endBin = Math.min(Math.floor(logEnd), binCount - 1);\n\n    let sum = 0;\n    let count = 0;\n    for (let b = startBin; b <= endBin; b++) {\n      sum += fft[b];\n      count++;\n    }\n    const value = count > 0 ? (sum / count) / 255 : 0;\n\n    const barW = w / bars;\n    const barH = value * h * 0.9;\n    const hue = (i / bars) * 280;\n    ctx.fillStyle = `hsl(${hue}, 70%, ${35 + value * 35}%)`;\n    ctx.fillRect(i * barW + 1, h - barH, barW - 2, barH);\n  }\n}\n",
+          "sceneFile": "frequency-data-demo.scene.js"
         },
         {
           "type": "text",
-          "markdown": "## `viji.canvas` in P5 Scenes\n\n`viji.canvas` is the same `OffscreenCanvas` that P5 draws to. While you _can_ access it directly (e.g., to get raw pixel data), in practice you should use P5 drawing functions for all rendering. The raw canvas is useful in advanced scenarios like reading back pixels with `viji.canvas.getContext('2d').getImageData(...)`.\n\n## Comparison Across Renderers\n\n| Concept | Native | P5 | Shader |\n|---------|--------|-----|--------|\n| Canvas dimensions | `viji.width`, `viji.height` | `viji.width`, `viji.height` (= `p5.width`, `p5.height`) | `u_resolution.x`, `u_resolution.y` |\n| Context creation | `viji.useContext('2d')` | Automatic (P5 manages it) | Automatic (shader adapter manages it) |\n| Resize handling | Use current `viji.width`/`viji.height` each frame | Automatic | Automatic via `u_resolution` |\n\n## Next Steps\n\n- [Scene Structure](/p5/scene-structure) — `setup()`, `render()`, instance mode\n- [Timing](/p5/timing) — [`viji.time`](/p5/timing), [`viji.deltaTime`](/p5/timing), frame counting\n- [Native Canvas & Context](/native/canvas-context) — `viji.useContext()` and manual context management\n- [Shader Resolution](/shader/resolution) — `u_resolution` and coordinate normalization\n- [API Reference](/p5/api-reference) — full list of everything available"
+          "markdown": "## Related\n\n- [Audio Overview](../)\n- [Frequency Bands](../bands/)\n- [Waveform](../waveform/)\n- [Spectral Analysis](../spectral/)"
         }
       ]
     },
-    "p5-converting": {
-      "id": "p5-converting",
-      "title": "p5-converting",
-      "description": "Step-by-step guide to converting standard P5.js sketches into Viji scenes.",
+    "native-audio-waveform": {
+      "id": "native-audio-waveform",
+      "title": "Waveform",
+      "description": "Raw time-domain PCM samples as a Float32Array for oscilloscope-style visualizations.",
       "content": [
         {
           "type": "text",
-          "markdown": "# Converting P5 Sketches\r\n\r\nThis guide shows how to take any standard P5.js sketch and convert it into a Viji scene. The changes are mechanical — once you learn the pattern, converting takes a few minutes.\r\n\r\n> [!TIP]\r\n> Want an AI to do it for you? See [Convert: P5 Sketches](/ai-prompts/convert-p5) for a ready-to-paste prompt that applies all the rules below automatically.\r\n\r\n## Quick Reference\r\n\r\n| Standard P5.js | Viji-P5 |\r\n|---|---|\r\n| `function setup() { ... }` | `function setup(viji, p5) { ... }` |\r\n| `function draw() { ... }` | `function render(viji, p5) { ... }` |\r\n| `createCanvas(800, 600)` | Remove — canvas is provided |\r\n| `background(0)` | `p5.background(0)` |\r\n| `ellipse(x, y, d)` | `p5.ellipse(x, y, d)` |\r\n| `mouseX`, `mouseY` | [`viji.pointer.x`](/p5/pointer), [`viji.pointer.y`](/p5/pointer) (or [`viji.mouse.x`](/p5/mouse), [`viji.mouse.y`](/p5/mouse)) |\r\n| `keyIsPressed` | [`viji.keyboard.isPressed('a')`](/p5/keyboard) |\r\n| `width`, `height` | `viji.width`, `viji.height` |\r\n| `frameRate(30)` | Remove — host controls frame rate |\r\n| `preload()` | Remove — use `viji.image()` or `fetch()` in `setup()` |\r\n| `save()` / `saveCanvas()` | Remove — host-side `captureFrame()` |\r\n| `loadImage('url')` | `viji.image(null, { label: 'Image' })` |\r\n\r\n## Step by Step\r\n\r\n### 1. Add the renderer directive\r\n\r\nAdd `// @renderer p5` as the very first line:\r\n\r\n```javascript\r\n// @renderer p5\r\n```\r\n\r\n> [!IMPORTANT]\r\n> Without `// @renderer p5`, the scene defaults to the native renderer and the `p5` parameter will be `undefined`.\r\n\r\n### 2. Rename `draw()` to `render(viji, p5)`\r\n\r\nStandard P5:\r\n```javascript\r\nfunction draw() {\r\n  background(0);\r\n  ellipse(width / 2, height / 2, 100);\r\n}\r\n```\r\n\r\nViji-P5:\r\n```javascript\r\nfunction render(viji, p5) {\r\n  p5.background(0);\r\n  p5.ellipse(viji.width / 2, viji.height / 2, 100);\r\n}\r\n```\r\n\r\nBoth `viji` and `p5` are required parameters. `viji` gives access to the Viji API; `p5` is the P5.js instance.\r\n\r\n### 3. Add the `p5.` prefix to all P5 functions\r\n\r\n> [!WARNING]\r\n> Viji uses P5 in **instance mode**. Every P5 function and constant needs the `p5.` prefix. This is the most common source of errors during conversion.\r\n\r\n```javascript\r\n// Standard P5.js (global mode)\r\ncolorMode(HSB);\r\nfill(255, 80, 100);\r\nrect(10, 10, 50, 50);\r\nlet v = createVector(1, 0);\r\n\r\n// Viji-P5 (instance mode)\r\np5.colorMode(p5.HSB);\r\np5.fill(255, 80, 100);\r\np5.rect(10, 10, 50, 50);\r\nlet v = p5.createVector(1, 0);\r\n```\r\n\r\nThis applies to constants too: `PI` → `p5.PI`, `TWO_PI` → `p5.TWO_PI`, `HALF_PI` → `p5.HALF_PI`, `HSB` → `p5.HSB`, `WEBGL` → `p5.WEBGL`.\r\n\r\n### 4. Remove `createCanvas()`\r\n\r\nViji creates and manages the canvas for you. Remove any `createCanvas()` call:\r\n\r\n```javascript\r\n// Standard P5.js\r\nfunction setup() {\r\n  createCanvas(800, 600);\r\n}\r\n\r\n// Viji-P5 — no createCanvas() needed\r\nfunction setup(viji, p5) {\r\n  p5.colorMode(p5.HSB);\r\n}\r\n```\r\n\r\nFor resolution-agnostic sizing, use `viji.width` and `viji.height` instead of hardcoded values.\r\n\r\n### 5. Replace P5 input globals with Viji APIs\r\n\r\nP5's built-in input variables (`mouseX`, `mouseY`, `keyIsPressed`, etc.) are not available in the worker environment. Use the Viji API instead. For most position/click interactions, [`viji.pointer`](/p5/pointer) works across both mouse and touch:\r\n\r\n```javascript\r\n// Standard P5.js\r\nfunction draw() {\r\n  if (mouseIsPressed) {\r\n    ellipse(mouseX, mouseY, 50);\r\n  }\r\n  if (keyIsPressed && key === 'r') {\r\n    background(255, 0, 0);\r\n  }\r\n}\r\n\r\n// Viji-P5\r\nfunction render(viji, p5) {\r\n  if (viji.pointer.isDown) {\r\n    p5.ellipse(viji.pointer.x, viji.pointer.y, 50);\r\n  }\r\n  if (viji.keyboard.isPressed('r')) {\r\n    p5.background(255, 0, 0);\r\n  }\r\n}\r\n```\r\n\r\n### 6. Remove event callbacks\r\n\r\nP5 event callbacks (`mousePressed()`, `mouseDragged()`, `keyPressed()`, etc.) do not work in the worker environment. Check state in `render()` instead:\r\n\r\n```javascript\r\n// Standard P5.js\r\nfunction mousePressed() {\r\n  particles.push(new Particle(mouseX, mouseY));\r\n}\r\n\r\n// Viji-P5 — track state manually\r\nlet wasPressed = false;\r\n\r\nfunction render(viji, p5) {\r\n  if (viji.mouse.leftButton && !wasPressed) {\r\n    particles.push(new Particle(viji.mouse.x, viji.mouse.y));\r\n  }\r\n  wasPressed = viji.mouse.leftButton;\r\n}\r\n```\r\n\r\n### 7. Replace `preload()` and `loadImage()`\r\n\r\nThere is no `preload()` phase in Viji. For images, use Viji's image parameter or `fetch()` in `setup()`:\r\n\r\n```javascript\r\n// Standard P5.js\r\nlet img;\r\nfunction preload() {\r\n  img = loadImage('photo.jpg');\r\n}\r\nfunction draw() {\r\n  image(img, 0, 0);\r\n}\r\n\r\n// Viji-P5 — use image parameter\r\nconst photo = viji.image(null, { label: 'Photo' });\r\n\r\nfunction render(viji, p5) {\r\n  if (photo.value) {\r\n    p5.image(photo.p5, 0, 0, viji.width, viji.height);\r\n  }\r\n}\r\n```\r\n\r\n> [!NOTE]\r\n> Use `photo.p5` (not `photo.value`) when passing images to P5 drawing functions like `p5.image()`. The `.p5` property provides a P5-compatible wrapper around the raw image data.\r\n\r\nFor JSON or text data, use `fetch()` in an async `setup()`:\r\n\r\n```javascript\r\nlet data = null;\r\n\r\nasync function setup(viji, p5) {\r\n  const response = await fetch('https://cdn.example.com/data.json');\r\n  data = await response.json();\r\n}\r\n```\r\n\r\n### 8. Replace `save()` and `frameRate()`\r\n\r\nThese host-level concerns are handled outside the scene:\r\n\r\n- **Saving frames**: The host application uses `core.captureFrame()`.\r\n- **Frame rate**: The host controls it via `core.setFrameRate()`.\r\n\r\nSimply remove these calls from your scene code.\r\n\r\n## Complete Conversion Example\r\n\r\nHere is the same scene implemented both ways, followed by the live Viji version:\r\n\r\n**Standard P5.js:**\r\n\r\n```javascript\r\nfunction setup() {\r\n  createCanvas(400, 400);\r\n  colorMode(HSB, 360, 100, 100, 100);\r\n}\r\n\r\nfunction draw() {\r\n  background(0, 0, 10);\r\n  let count = 8;\r\n  let radius = 120;\r\n  for (let i = 0; i < count; i++) {\r\n    let a = frameCount * 0.02 + (i / count) * TWO_PI;\r\n    let x = width / 2 + cos(a) * radius;\r\n    let y = height / 2 + sin(a) * radius;\r\n    noStroke();\r\n    fill(255, 150, 0);\r\n    circle(x, y, 16);\r\n  }\r\n}\r\n```\r\n\r\n**Converted Viji-P5:**"
+          "markdown": "# Waveform\n\nThe `viji.audio.getWaveform()` method returns raw time-domain audio samples as a `Float32Array`. This is the audio waveform — use it for oscilloscope displays, wave-based animations, or any effect that reacts to the shape of the audio signal rather than its frequency content.\n\n## Method Reference\n\n| Method | Returns | Description |\n|--------|---------|-------------|\n| `viji.audio.getWaveform()` | `Float32Array` | Time-domain PCM samples, 2048 values, each –1 to +1 |\n\n### Data Format\n\n- **Length**: 2048 samples (equal to the FFT size)\n- **Value range**: –1.0 to +1.0 (signed float PCM)\n- **Snapshot**: The returned array is a copy from the most recent audio analysis update — not a live buffer. Calling it multiple times in the same frame returns the same data.\n\n## Usage — Oscilloscope\n\n```javascript\nfunction render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  if (!viji.audio.isConnected) return;\n\n  const waveform = viji.audio.getWaveform();\n  if (waveform.length === 0) return;\n\n  ctx.strokeStyle = '#4CAF50';\n  ctx.lineWidth = 2;\n  ctx.beginPath();\n\n  const samples = waveform.length;\n  for (let i = 0; i < samples; i++) {\n    const x = (i / samples) * w;\n    const y = h / 2 + waveform[i] * h * 0.4;\n    if (i === 0) ctx.moveTo(x, y);\n    else ctx.lineTo(x, y);\n  }\n\n  ctx.stroke();\n}\n```\n\n## Usage — Circular Waveform\n\n```javascript\nfunction render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  if (!viji.audio.isConnected) return;\n\n  const waveform = viji.audio.getWaveform();\n  if (waveform.length === 0) return;\n\n  const cx = w / 2;\n  const cy = h / 2;\n  const baseR = Math.min(w, h) * 0.25;\n  const step = 4;\n\n  ctx.strokeStyle = '#3498db';\n  ctx.lineWidth = 1.5;\n  ctx.beginPath();\n\n  for (let i = 0; i < waveform.length; i += step) {\n    const angle = (i / waveform.length) * Math.PI * 2;\n    const r = baseR + waveform[i] * baseR * 0.5;\n    const x = cx + Math.cos(angle) * r;\n    const y = cy + Math.sin(angle) * r;\n    if (i === 0) ctx.moveTo(x, y);\n    else ctx.lineTo(x, y);\n  }\n\n  ctx.closePath();\n  ctx.stroke();\n}\n```\n\n> [!NOTE]\n> When `viji.audio.isConnected` is `false`, `getWaveform()` returns an empty `Float32Array` (length 0). Always check the length before iterating."
         },
         {
           "type": "live-example",
-          "title": "Converted Sketch — Orbiting Dots",
-          "sceneCode": "// @renderer p5\r\n\r\nconst speed = viji.slider(2, { min: 0.5, max: 8, label: 'Speed' });\r\nconst count = viji.slider(8, { min: 3, max: 20, step: 1, label: 'Count' });\r\nconst dotColor = viji.color('#ff6600', { label: 'Color' });\r\n\r\nlet angle = 0;\r\n\r\nfunction render(viji, p5) {\r\n  angle += speed.value * viji.deltaTime;\r\n\r\n  p5.background(10);\r\n\r\n  const cx = viji.width / 2;\r\n  const cy = viji.height / 2;\r\n  const radius = Math.min(viji.width, viji.height) * 0.3;\r\n  const dotSize = Math.min(viji.width, viji.height) * 0.04;\r\n\r\n  const r = parseInt(dotColor.value.slice(1, 3), 16);\r\n  const g = parseInt(dotColor.value.slice(3, 5), 16);\r\n  const b = parseInt(dotColor.value.slice(5, 7), 16);\r\n\r\n  for (let i = 0; i < count.value; i++) {\r\n    const a = angle + (i / count.value) * p5.TWO_PI;\r\n    const x = cx + p5.cos(a) * radius;\r\n    const y = cy + p5.sin(a) * radius;\r\n\r\n    p5.noStroke();\r\n    p5.fill(r, g, b);\r\n    p5.circle(x, y, dotSize);\r\n  }\r\n}\r\n",
-          "sceneFile": "converted-sketch.scene.js"
+          "title": "Oscilloscope",
+          "sceneCode": "function render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  if (!viji.audio.isConnected) {\n    ctx.fillStyle = '#555';\n    ctx.font = `${Math.min(w, h) * 0.04}px sans-serif`;\n    ctx.textAlign = 'center';\n    ctx.fillText('Waiting for audio...', w / 2, h / 2);\n    return;\n  }\n\n  const waveform = viji.audio.getWaveform();\n  if (waveform.length === 0) return;\n\n  // Oscilloscope line\n  ctx.strokeStyle = '#4CAF50';\n  ctx.lineWidth = 2;\n  ctx.beginPath();\n\n  const samples = waveform.length;\n  for (let i = 0; i < samples; i++) {\n    const x = (i / samples) * w;\n    const y = h / 2 + waveform[i] * h * 0.4;\n    if (i === 0) ctx.moveTo(x, y);\n    else ctx.lineTo(x, y);\n  }\n\n  ctx.stroke();\n\n  // Center line\n  ctx.strokeStyle = '#333';\n  ctx.lineWidth = 1;\n  ctx.beginPath();\n  ctx.moveTo(0, h / 2);\n  ctx.lineTo(w, h / 2);\n  ctx.stroke();\n}\n",
+          "sceneFile": "waveform-demo.scene.js"
         },
         {
           "type": "text",
-          "markdown": "Key changes made:\r\n\r\n1. Added `// @renderer p5` at the top.\r\n2. Renamed `draw()` → `render(viji, p5)`, added `setup(viji, p5)`.\r\n3. Prefixed all P5 functions with `p5.`.\r\n4. Removed `createCanvas()`.\r\n5. Replaced hardcoded `400` and `120` with `viji.width`, `viji.height`, and proportional math.\r\n6. Replaced `frameCount * 0.02` with a `deltaTime`-based accumulator for frame-rate-independent animation.\r\n7. Extracted the hardcoded color and count into Viji parameters so they become live controls.\r\n\r\n## What Doesn't Work\r\n\r\nThese P5 features are unavailable in the worker environment:\r\n\r\n| Feature | Alternative |\r\n|---|---|\r\n| `p5.dom` (sliders, buttons) | Use Viji parameters (`viji.slider()`, `viji.toggle()`, etc.) |\r\n| `p5.sound` | Use Viji audio API (`viji.audio.*`) |\r\n| `loadImage()`, `loadFont()`, `loadJSON()` | `viji.image()` parameter or `fetch()` in `setup()` |\r\n| `save()`, `saveCanvas()`, `saveFrames()` | Host-side `core.captureFrame()` |\r\n| `createCapture()`, `createVideo()` | Use Viji video API (`viji.video.*`) |\r\n| `cursor()`, `noCursor()` | Not available in workers |\r\n| `fullscreen()` | Host-side concern |\r\n| `frameRate()` | Host-side `core.setFrameRate()` |\r\n| `mousePressed()`, `keyPressed()`, etc. | Check state in `render()` via Viji APIs |\r\n\r\n## Tips\r\n\r\n- **Start with `setup()` and `render()`.** Get the basic structure right first, then fix individual function calls.\r\n- **Search and replace `p5.` prefix.** Most editors support regex — replace `\\b(background|fill|stroke|rect|ellipse|circle|...)\\(` with `p5.$1(`.\r\n- **Use `viji.width` / `viji.height`** everywhere instead of hardcoded dimensions. This makes the scene resolution-agnostic.\r\n- **Convert animation timing.** Replace `frameCount`-based animation with `viji.time` or `viji.deltaTime` accumulators for frame-rate independence.\r\n- **Test incrementally.** Convert the structure first, then one feature at a time.\r\n\r\n## Related\r\n\r\n- [P5 Quick Start](/p5/quickstart) — building P5 scenes from scratch in Viji\r\n- [Drawing with P5](/p5/drawing) — P5 drawing functions in the Viji environment\r\n- [Parameters](/p5/parameters) — sliders, colors, toggles, images\r\n- [Best Practices](/getting-started/best-practices) — essential patterns for all renderers"
+          "markdown": "## Related\n\n- [Audio Overview](../)\n- [Frequency Data](../frequency-data/)\n- [Volume](../volume/)\n- [Frequency Bands](../bands/)"
         }
       ]
     },
-    "p5-timing": {
-      "id": "p5-timing",
-      "title": "Timing",
-      "description": "Use viji.time, viji.deltaTime, viji.frameCount, and viji.fps for animation in P5 scenes.",
+    "native-video-overview": {
+      "id": "native-video-overview",
+      "title": "Video & CV",
+      "description": "Video stream access and computer vision features — face detection, hand tracking, pose estimation, and body segmentation.",
       "content": [
         {
           "type": "text",
-          "markdown": "# Timing\n\nThe same timing properties available in native scenes work identically in P5. This page covers P5-specific usage patterns and clarifies the relationship between Viji's timing API and P5's own frame utilities.\n\n## Properties\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `viji.time` | `number` | Seconds elapsed since the scene started |\n| `viji.deltaTime` | `number` | Seconds since the previous frame |\n| `viji.frameCount` | `number` | Integer frame counter (monotonically increasing) |\n| `viji.fps` | `number` | Target FPS based on the host's frame rate mode |\n\n## `viji.time` — Oscillations & Cycles\n\nUse `viji.time` for effects that depend on absolute position in time — oscillations, rotations, and cycling:\n\n```javascript\n// @renderer p5\n\nfunction render(viji, p5) {\n  p5.background(0);\n  const x = viji.width / 2 + p5.cos(viji.time * 2) * viji.width * 0.3;\n  const y = viji.height / 2 + p5.sin(viji.time * 3) * viji.height * 0.2;\n  p5.circle(x, y, viji.width * 0.05);\n}\n```"
+          "markdown": "# Video & CV\n\nViji provides access to a live video stream and MediaPipe-powered computer vision features through `viji.video`. The video frame can be drawn directly to the canvas, while CV features provide face, hand, pose, and body segmentation data for interactive scenes.\n\n## API Overview\n\n| Sub-object | Description | Page |\n|------------|-------------|------|\n| [`isConnected`](connection/) | Whether a video stream is active | [Connection & Lifecycle](connection/) |\n| [`currentFrame`](basics/) | Current video frame as a drawable surface | [Video Basics](basics/) |\n| [`faces`](face-detection/) | Face detection results with bounds, landmarks, expressions | [Face Detection](face-detection/) |\n| [`hands`](hand-tracking/) | Hand tracking with landmarks and ML gesture recognition | [Hand Tracking](hand-tracking/) |\n| [`pose`](pose-detection/) | 33-point body pose landmarks | [Pose Detection](pose-detection/) |\n| [`segmentation`](body-segmentation/) | Per-pixel person/background mask | [Body Segmentation](body-segmentation/) |\n| [`cv`](connection/) | CV feature control — enable/disable individual features | [Connection & Lifecycle](connection/) |\n\n## Basic Usage\n\n```javascript\nfunction render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) {\n    ctx.fillStyle = '#555';\n    ctx.font = `${Math.min(w, h) * 0.04}px sans-serif`;\n    ctx.textAlign = 'center';\n    ctx.fillText('Waiting for video...', w / 2, h / 2);\n    return;\n  }\n\n  ctx.drawImage(viji.video.currentFrame, 0, 0, w, h);\n\n  viji.video.faces.forEach(face => {\n    ctx.strokeStyle = '#4ecdc4';\n    ctx.lineWidth = 2;\n    ctx.strokeRect(\n      face.bounds.x * w, face.bounds.y * h,\n      face.bounds.width * w, face.bounds.height * h\n    );\n  });\n}\n```\n\n> [!NOTE]\n> Always check [`viji.video.isConnected`](connection/) and [`viji.video.currentFrame`](basics/) before using video data. When no video stream is connected, all values are at their defaults (null, zero, or empty arrays).\n\n| Feature | Relative Cost | Notes |\n|---------|--------------|-------|\n| Face Detection | Low | Bounding box + basic landmarks only |\n| Face Mesh | Medium-High | 468 facial landmarks |\n| Emotion Detection | High | 7 expressions + 52 blendshape coefficients |\n| Hand Tracking | Medium | Up to 2 hands, 21 landmarks each |\n| Pose Detection | Medium | 33 body landmarks |\n| Body Segmentation | High | Per-pixel mask, large tensor output |\n\n> [!WARNING]\n> **WebGL Context Limits:** Each CV feature requires its own WebGL context for ML inference. Browsers typically allow 8-16 active WebGL contexts. Enabling too many CV features simultaneously can cause context eviction, potentially breaking the scene's own rendering. Use only the CV features you need.\n\n> [!TIP]\n> **Best practice:** Don't enable CV features by default. Instead, expose a toggle parameter so users can activate them on capable devices:\n> ```javascript\n> const useFace = viji.toggle(false, { label: 'Enable Face Detection', category: 'video' });\n> if (useFace.value) {\n>   await viji.video.cv.enableFaceDetection(true);\n> }\n> ```"
         },
         {
           "type": "live-example",
-          "title": "Time-Based — Lissajous Curve",
-          "sceneCode": "// @renderer p5\n\nconst freqX = viji.slider(2, { min: 1, max: 7, step: 1, label: 'Frequency X' });\nconst freqY = viji.slider(3, { min: 1, max: 7, step: 1, label: 'Frequency Y' });\nconst trailLen = viji.slider(200, { min: 20, max: 600, step: 10, label: 'Trail Length' });\nconst lineColor = viji.color('#ff6644', { label: 'Curve Color' });\n\nfunction setup(viji, p5) {\n  p5.noFill();\n}\n\nfunction render(viji, p5) {\n  p5.background(10, 10, 26);\n\n  const cx = viji.width / 2;\n  const cy = viji.height / 2;\n  const ax = viji.width * 0.38;\n  const ay = viji.height * 0.38;\n\n  p5.stroke(lineColor.value);\n  p5.strokeWeight(Math.max(1, viji.width * 0.003));\n  p5.beginShape();\n  for (let i = 0; i < trailLen.value; i++) {\n    const t = viji.time - i * 0.005;\n    const x = cx + p5.sin(t * freqX.value) * ax;\n    const y = cy + p5.cos(t * freqY.value) * ay;\n    p5.vertex(x, y);\n  }\n  p5.endShape();\n}\n",
-          "sceneFile": "timing-oscillation.scene.js"
+          "title": "Video with Face Detection",
+          "sceneCode": "const useFace = viji.toggle(false, { label: 'Face Detection', category: 'video' });\n\nfunction render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) {\n    ctx.fillStyle = '#555';\n    ctx.font = `${Math.min(w, h) * 0.04}px sans-serif`;\n    ctx.textAlign = 'center';\n    ctx.fillText('Waiting for video...', w / 2, h / 2);\n    return;\n  }\n\n  if (useFace.value) {\n    viji.video.cv.enableFaceDetection(true);\n  } else {\n    viji.video.cv.enableFaceDetection(false);\n  }\n\n  ctx.globalAlpha = 0.6;\n  ctx.drawImage(viji.video.currentFrame, 0, 0, w, h);\n  ctx.globalAlpha = 1.0;\n\n  viji.video.faces.forEach(face => {\n    const bx = face.bounds.x * w;\n    const by = face.bounds.y * h;\n    const bw = face.bounds.width * w;\n    const bh = face.bounds.height * h;\n\n    ctx.strokeStyle = '#4ecdc4';\n    ctx.lineWidth = 2;\n    ctx.strokeRect(bx, by, bw, bh);\n\n    ctx.fillStyle = '#4ecdc4';\n    ctx.font = `${Math.min(w, h) * 0.03}px sans-serif`;\n    ctx.textAlign = 'left';\n    ctx.fillText('Face #' + face.id + ' (' + (face.confidence * 100).toFixed(0) + '%)', bx, by - 6);\n  });\n}\n",
+          "sceneFile": "video-overview.scene.js",
+          "capabilities": {
+            "video": true
+          }
         },
         {
           "type": "text",
-          "markdown": "## `viji.deltaTime` — Accumulation\n\nUse `viji.deltaTime` for anything that accumulates frame-to-frame — movement, rotation, fading, physics:\n\n```javascript\n// @renderer p5\n\nlet hue = 0;\n\nfunction setup(viji, p5) {\n  p5.colorMode(p5.HSB, 360, 100, 100);\n}\n\nfunction render(viji, p5) {\n  hue = (hue + 60 * viji.deltaTime) % 360; // 60 degrees per second\n  p5.background(hue, 60, 90);\n}\n```"
+          "markdown": "## Related\n\n- [Connection & Lifecycle](connection/)\n- [Video Basics](basics/)\n- [Face Detection](face-detection/)\n- [Face Mesh](face-mesh/)\n- [Emotion Detection](emotion-detection/)\n- [Hand Tracking](hand-tracking/)\n- [Pose Detection](pose-detection/)\n- [Body Segmentation](body-segmentation/)\n- [P5 Video & CV](/p5/video)\n- [Shader Video & CV Uniforms](/shader/video)"
+        }
+      ]
+    },
+    "native-video-connection": {
+      "id": "native-video-connection",
+      "title": "Connection & Lifecycle",
+      "description": "Video connection state, CV feature control, guard patterns, and default values when no video stream is active.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Connection & Lifecycle\n\nThe `viji.video.isConnected` property indicates whether the host application has provided an active video stream. All other video and CV properties depend on this — when disconnected, they hold default values.\n\n## Property Reference\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `viji.video.isConnected` | `boolean` | `true` when a video stream is active |\n| `viji.video.currentFrame` | `OffscreenCanvas \\| null` | Current video frame — drawable with `ctx.drawImage()` |\n| `viji.video.frameWidth` | `number` | Video frame width in pixels |\n| `viji.video.frameHeight` | `number` | Video frame height in pixels |\n| `viji.video.frameRate` | `number` | Video frame rate (Hz) |\n| `viji.video.getFrameData()` | `ImageData \\| null` | Raw pixel data for per-pixel analysis |\n\n> [!TIP]\n> Use [`viji.video.currentFrame`](../basics/) for drawing video to canvas (fast, GPU-friendly). Use `viji.video.getFrameData()` only when you need per-pixel access — it is much slower as it reads back pixel data.\n\n## CV Control API\n\nThe `viji.video.cv` object provides methods to enable and disable individual CV features. All methods accept a boolean parameter.\n\n| Method | Feature | What it activates |\n|--------|---------|-------------------|\n| `enableFaceDetection(enabled)` | `'faceDetection'` | Face bounds, center, confidence, id |\n| `enableFaceMesh(enabled)` | `'faceMesh'` | 468-point face landmarks + head pose |\n| `enableEmotionDetection(enabled)` | `'emotionDetection'` | 7 expressions + 52 blendshapes |\n| `enableHandTracking(enabled)` | `'handTracking'` | 21-point hand landmarks + ML gestures |\n| `enablePoseDetection(enabled)` | `'poseDetection'` | 33-point BlazePose body landmarks |\n| `enableBodySegmentation(enabled)` | `'bodySegmentation'` | Per-pixel person/background mask |\n\n| Method | Returns | Description |\n|--------|---------|-------------|\n| `getActiveFeatures()` | `CVFeature[]` | Array of currently active feature strings |\n| `isProcessing()` | `boolean` | `true` if CV worker is actively processing frames |\n\n## Guard Pattern\n\nAlways check `isConnected` and `currentFrame` before using video data. This prevents your scene from drawing a null frame or reacting to default CV values as if they were real input.\n\n```javascript\nfunction render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) {\n    ctx.fillStyle = '#444';\n    ctx.font = `${Math.min(w, h) * 0.04}px sans-serif`;\n    ctx.textAlign = 'center';\n    ctx.fillText('No video connected', w / 2, h / 2);\n    return;\n  }\n\n  ctx.drawImage(viji.video.currentFrame, 0, 0, w, h);\n}\n```\n\n## Connection Lifecycle\n\n1. **Disconnected (default)** — `isConnected` is `false`. All video values are at their defaults.\n2. **Connected** — The host provides a video stream. `isConnected` becomes `true` and `currentFrame` begins updating every frame.\n3. **Disconnected again** — The stream is removed. `isConnected` returns to `false` and all values reset to defaults.\n\n## Default Values\n\nWhen `isConnected` is `false`, all video properties hold these values:\n\n| Property | Default |\n|----------|---------|\n| `currentFrame` | `null` |\n| `frameWidth` | `0` |\n| `frameHeight` | `0` |\n| `frameRate` | `0` |\n| `getFrameData()` | `null` |\n| `faces` | `[]` (empty array) |\n| `hands` | `[]` (empty array) |\n| `pose` | `null` |\n| `segmentation` | `null` |\n\nWhen the user leaves the camera frame, CV data also resets — `faces` and `hands` become empty arrays, `pose` and `segmentation` become `null`. This prevents stale data from persisting."
         },
         {
           "type": "live-example",
-          "title": "DeltaTime — Drifting Particles",
-          "sceneCode": "// @renderer p5\n\nconst particleCount = viji.slider(60, { min: 10, max: 200, step: 1, label: 'Particles' });\nconst driftSpeed = viji.slider(40, { min: 10, max: 150, label: 'Drift Speed' });\nconst dotSize = viji.slider(0.01, { min: 0.003, max: 0.03, label: 'Dot Size' });\nconst dotColor = viji.color('#44ddff', { label: 'Dot Color' });\n\nconst particles = [];\nfor (let i = 0; i < 200; i++) {\n  particles.push({ x: Math.random(), y: Math.random(), vx: (Math.random() - 0.5) * 2, vy: (Math.random() - 0.5) * 2 });\n}\n\nfunction render(viji, p5) {\n  p5.background(10, 10, 26, 40);\n\n  const n = Math.min(particleCount.value, particles.length);\n  const s = driftSpeed.value / Math.max(viji.width, viji.height);\n  const r = Math.min(viji.width, viji.height) * dotSize.value;\n\n  p5.noStroke();\n  p5.fill(dotColor.value);\n  for (let i = 0; i < n; i++) {\n    const p = particles[i];\n    p.x += p.vx * s * viji.deltaTime;\n    p.y += p.vy * s * viji.deltaTime;\n\n    if (p.x < 0 || p.x > 1) p.vx = -p.vx;\n    if (p.y < 0 || p.y > 1) p.vy = -p.vy;\n    p.x = Math.max(0, Math.min(1, p.x));\n    p.y = Math.max(0, Math.min(1, p.y));\n\n    p5.circle(p.x * viji.width, p.y * viji.height, r * 2);\n  }\n}\n",
-          "sceneFile": "timing-delta-p5.scene.js"
+          "title": "Connection State",
+          "sceneCode": "function render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  const fontSize = Math.min(w, h) * 0.035;\n  ctx.font = `${fontSize}px sans-serif`;\n  ctx.textAlign = 'center';\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) {\n    const pulse = 0.4 + Math.sin(viji.time * 2) * 0.15;\n    ctx.fillStyle = `rgba(255, 255, 255, ${pulse})`;\n    ctx.fillText('Waiting for video stream...', w / 2, h / 2 - fontSize);\n    ctx.fillStyle = '#444';\n    ctx.fillText('Connect a camera or video source', w / 2, h / 2 + fontSize);\n    return;\n  }\n\n  ctx.drawImage(viji.video.currentFrame, 0, 0, w, h);\n\n  const infoY = h - fontSize * 4;\n  ctx.fillStyle = 'rgba(0, 0, 0, 0.6)';\n  ctx.fillRect(0, infoY, w, fontSize * 4);\n\n  ctx.fillStyle = '#4CAF50';\n  ctx.textAlign = 'left';\n  const pad = w * 0.04;\n  ctx.fillText('Video connected', pad, infoY + fontSize * 1.2);\n  ctx.fillStyle = '#aaa';\n  ctx.fillText(\n    viji.video.frameWidth + ' x ' + viji.video.frameHeight + ' @ ' + viji.video.frameRate.toFixed(0) + ' fps',\n    pad, infoY + fontSize * 2.6\n  );\n}\n",
+          "sceneFile": "connection-demo.scene.js",
+          "capabilities": {
+            "video": true
+          }
         },
         {
           "type": "text",
-          "markdown": "## When to Use `viji.time` vs `viji.deltaTime`\n\n| Use Case | Property | Why |\n|----------|----------|-----|\n| `p5.sin()` / `p5.cos()` animation | `viji.time` | Periodic functions need absolute time |\n| Hue cycling, color animation | `viji.time` | Continuous monotonic input |\n| Position += velocity | `viji.deltaTime` | Distance = speed × elapsed time |\n| Rotation += angular speed | `viji.deltaTime` | Angle increments must be per-second |\n| Opacity fading | `viji.deltaTime` | Fade rate is per-second |\n\n## `viji.frameCount` vs `p5.frameCount`\n\nBoth exist but have different origins:\n\n| Property | Source | Starts At |\n|----------|--------|-----------|\n| `viji.frameCount` | Viji runtime | 0 |\n| `p5.frameCount` | P5 internal | 1 |\n\n`viji.frameCount` is the canonical frame counter across all renderers. It increments by 1 every frame and is consistent whether you're in a native, P5, or shader scene. `p5.frameCount` is maintained by P5 internally and may differ by 1. Use `viji.frameCount` for consistency.\n\n## `viji.fps` — Target Frame Rate\n\n`viji.fps` is the **target** frame rate based on the host's configuration, not a measured value:\n\n- `frameRateMode: 'full'` → screen refresh rate (typically 60 or 120)\n- `frameRateMode: 'half'` → half the screen refresh rate (typically 30 or 60)\n\nThis value is stable and does not fluctuate. Don't use it for animation timing — use `viji.time` or `viji.deltaTime` instead.\n\n> [!NOTE]\n> P5's `frameRate()` function is not available in Viji — the host controls the render loop.\n\n## Frame-Rate Independence\n\n> [!NOTE]\n> Always use `viji.width` and `viji.height` for positioning and sizing, and `viji.deltaTime` for frame-rate-independent animation. Never hardcode pixel values or assume a specific frame rate.\n\n```javascript\n// Bad — speed depends on frame rate\nangle += 0.02;\n\n// Good — same visual speed at any frame rate\nangle += 1.2 * viji.deltaTime; // 1.2 radians per second\n```\n\n## Next Steps\n\n- [Canvas & Resolution](/p5/canvas-resolution) — [`viji.width`](/p5/canvas-resolution), [`viji.height`](/p5/canvas-resolution), responsive layouts\n- [Scene Structure](/p5/scene-structure) — `setup()`, `render()`, lifecycle\n- [Parameters](/p5/parameters) — sliders, colors, toggles\n- [Native Timing](/native/timing) — timing in the native renderer\n- [Shader Timing](/shader/timing) — `u_time`, `u_deltaTime`, `u_frame`, `u_fps`\n- [API Reference](/p5/api-reference) — full list of everything available"
+          "markdown": "## Related\n\n- [Video & CV Overview](../)\n- [Video Basics](../basics/)\n- [Face Detection](../face-detection/)\n- [Hand Tracking](../hand-tracking/)\n- [P5 Connection & Lifecycle](/p5/video/connection)"
         }
       ]
     },
-    "p5-parameters-overview": {
-      "id": "p5-parameters-overview",
-      "title": "Parameters",
-      "description": "The Viji parameter system in P5 scenes — sliders, colors, toggles, and more for artist-controllable inputs.",
+    "native-video-basics": {
+      "id": "native-video-basics",
+      "title": "Video Basics",
+      "description": "Drawing video frames, accessing frame dimensions, and understanding currentFrame vs getFrameData.",
       "content": [
         {
           "type": "text",
-          "markdown": "# Parameters\n\nParameters give users real-time control over your P5 scene. Define them at the top level, and Viji renders corresponding UI controls in the host application. Read `.value` inside `render()` to get the current state.\n\n## Parameter Types\n\n| Type | Function | Value | Use For |\n|---|---|---|---|\n| [Slider](slider/) | [`viji.slider(default, config)`](slider/) | `number` | Continuous numeric ranges (speed, size, opacity) |\n| [Number](number/) | [`viji.number(default, config)`](number/) | `number` | Precise numeric input (counts, thresholds) |\n| [Color](color/) | [`viji.color(default, config)`](color/) | `string` | Hex color values (`'#rrggbb'`) |\n| [Toggle](toggle/) | [`viji.toggle(default, config)`](toggle/) | `boolean` | On/off switches (enable audio, show trail) |\n| [Select](select/) | [`viji.select(default, config)`](select/) | `string \\| number` | Dropdown from predefined options (blend mode, shape type) |\n| [Text](text/) | [`viji.text(default, config)`](text/) | `string` | Free-form text input (titles, labels) |\n| [Image](image/) | [`viji.image(default, config)`](image/) | `ImageBitmap \\| null` | User-uploaded images and textures |\n| [Button](button/) | [`viji.button(config)`](button/) | `boolean` | Momentary trigger — true for 1 frame (resets, spawns) |\n\n## Basic Pattern\n\n```javascript\n// @renderer p5\n\n// 1. Define at top level — runs once\nconst speed = viji.slider(1, { min: 0.1, max: 5, label: 'Speed' });\nconst color = viji.color('#ff6600', { label: 'Color' });\nconst mirror = viji.toggle(false, { label: 'Mirror' });\n\n// 2. Read .value in render() — updates in real-time\nfunction render(viji, p5) {\n  const r = parseInt(color.value.slice(1, 3), 16);\n  const g = parseInt(color.value.slice(3, 5), 16);\n  const b = parseInt(color.value.slice(5, 7), 16);\n  p5.fill(r, g, b);\n  // speed.value, mirror.value, etc.\n}\n```\n\n> [!WARNING]\n> Parameters must be declared at the **top level** of your scene, never inside `setup()` or `render()`. They are registered once and sent to the host before either function runs. Declaring them inside `setup()` would register the parameter too late — no UI control would appear. Declaring them inside `render()` would re-register the parameter every frame, resetting its value to the default.\n\n## Image Parameters in P5\n\nWhen using [`viji.image()`](image/) with P5 drawing functions, use the `.p5` property instead of `.value`:\n\n```javascript\nconst photo = viji.image(null, { label: 'Photo' });\n\nfunction render(viji, p5) {\n  if (photo.value) {\n    p5.image(photo.p5, 0, 0, viji.width, viji.height);\n  }\n}\n```\n\nThe `.p5` property wraps the raw image data in a P5-compatible object. Use `.value` to check if an image is loaded, and `.p5` when passing to P5 drawing functions.\n\n## Common Config Keys\n\nAll parameter types share these optional configuration keys:\n\n| Key | Type | Default | Description |\n|---|---|---|---|\n| `label` | `string` | **(required)** | Display name shown in the parameter UI |\n| `description` | `string` | — | Tooltip or help text |\n| `group` | `string` | `'general'` | Group name for organizing parameters — see [Grouping](grouping/) |\n| `category` | `ParameterCategory` | `'general'` | Controls visibility based on capabilities — see [Categories](categories/) |\n\n## Organization\n\nAs scenes grow, you'll want to organize parameters into logical sections and control when they're visible:\n\n- **[Grouping](grouping/)** — Collect related parameters under named groups (e.g., \"animation\", \"shape\", \"audio\"). Parameters with the same `group` string appear together in the UI.\n- **[Categories](categories/)** — Tag parameters as `'general'`, `'audio'`, `'video'`, or `'interaction'` to automatically show/hide them based on what inputs are currently active.\n\n## Related\n\n- [Slider](slider/) — the most common parameter type\n- [Image](image/) — image parameters with the `.p5` property\n- [Grouping](grouping/) — organizing parameters into named groups\n- [Categories](categories/) — visibility based on capabilities\n- [Native Parameters](/native/parameters) — same system in the native renderer\n- [Shader Parameters](/shader/parameters) — comment-directive syntax for shaders\n- [Best Practices](/getting-started/best-practices) — essential patterns for all renderers"
+          "markdown": "# Video Basics\n\nThe video stream provides a drawable frame each render cycle through `viji.video.currentFrame`. This section covers how to draw the video feed, read its dimensions, and when to use raw pixel data.\n\n## Property Reference\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `viji.video.currentFrame` | `OffscreenCanvas \\| null` | Current video frame — pass to `ctx.drawImage()` |\n| `viji.video.frameWidth` | `number` | Video frame width in pixels |\n| `viji.video.frameHeight` | `number` | Video frame height in pixels |\n| `viji.video.frameRate` | `number` | Video frame rate (Hz) |\n| `viji.video.getFrameData()` | `ImageData \\| null` | Raw RGBA pixel data for per-pixel analysis |\n\n### `currentFrame` vs `getFrameData()`\n\n- **`currentFrame`** is an OffscreenCanvas that can be drawn directly with `ctx.drawImage()`. This is fast and GPU-friendly — use it for all rendering.\n- **`getFrameData()`** returns an `ImageData` object for per-pixel CPU analysis. It allocates a new `ImageData` each call and is significantly slower. Use only when you need to read individual pixel values.\n\n> [!TIP]\n> Use `viji.video.currentFrame` for drawing video to canvas (fast, GPU-friendly). Use `viji.video.getFrameData()` only when you need per-pixel access — it is much slower as it reads back pixel data.\n\n## Usage — Drawing Video\n\n```javascript\nfunction render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) {\n    return;\n  }\n\n  ctx.drawImage(viji.video.currentFrame, 0, 0, w, h);\n}\n```\n\n## Usage — Aspect-Ratio-Correct Drawing\n\nTo preserve the video's aspect ratio instead of stretching to fill the canvas:\n\n```javascript\nfunction render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) return;\n\n  const vw = viji.video.frameWidth;\n  const vh = viji.video.frameHeight;\n  const scale = Math.min(w / vw, h / vh);\n  const dw = vw * scale;\n  const dh = vh * scale;\n\n  ctx.drawImage(viji.video.currentFrame, (w - dw) / 2, (h - dh) / 2, dw, dh);\n}\n```\n\n## Usage — Raw Pixel Analysis\n\n```javascript\nfunction render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  if (!viji.video.isConnected) return;\n\n  const frameData = viji.video.getFrameData();\n  if (!frameData) return;\n\n  const { data, width, height } = frameData;\n  let totalBrightness = 0;\n  for (let i = 0; i < data.length; i += 4) {\n    totalBrightness += (data[i] + data[i + 1] + data[i + 2]) / 3;\n  }\n  const avg = totalBrightness / (data.length / 4) / 255;\n\n  ctx.fillStyle = `hsl(${avg * 360}, 60%, 50%)`;\n  ctx.fillRect(0, 0, w, h);\n}\n```\n\n## Coordinate System\n\nAll CV data coordinates are **normalized 0-1**:\n- `x` ranges from 0 (left) to 1 (right)\n- `y` ranges from 0 (top) to 1 (bottom)\n\nTo draw CV data on the canvas, multiply by canvas dimensions: `point.x * viji.width`, `point.y * viji.height`."
+        },
+        {
+          "type": "live-example",
+          "title": "Video Feed",
+          "sceneCode": "function render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) {\n    ctx.fillStyle = '#555';\n    ctx.font = `${Math.min(w, h) * 0.04}px sans-serif`;\n    ctx.textAlign = 'center';\n    ctx.fillText('Waiting for video...', w / 2, h / 2);\n    return;\n  }\n\n  const vw = viji.video.frameWidth;\n  const vh = viji.video.frameHeight;\n  const scale = Math.min(w / vw, h / vh);\n  const dw = vw * scale;\n  const dh = vh * scale;\n\n  ctx.drawImage(viji.video.currentFrame, (w - dw) / 2, (h - dh) / 2, dw, dh);\n\n  const fontSize = Math.min(w, h) * 0.03;\n  ctx.fillStyle = 'rgba(0,0,0,0.5)';\n  ctx.fillRect(0, h - fontSize * 2, w, fontSize * 2);\n  ctx.fillStyle = '#aaa';\n  ctx.font = `${fontSize}px sans-serif`;\n  ctx.textAlign = 'center';\n  ctx.fillText(vw + ' x ' + vh + ' @ ' + viji.video.frameRate.toFixed(0) + ' fps', w / 2, h - fontSize * 0.5);\n}\n",
+          "sceneFile": "basics-demo.scene.js",
+          "capabilities": {
+            "video": true
+          }
+        },
+        {
+          "type": "text",
+          "markdown": "## Related\n\n- [Video & CV Overview](../)\n- [Connection & Lifecycle](../connection/)\n- [Face Detection](../face-detection/)\n- [P5 Video Basics](/p5/video/basics)\n- [Shader Video Basics](/shader/video/basics)"
         }
       ]
     },
-    "p5-param-slider": {
-      "id": "p5-param-slider",
-      "title": "Slider Parameter",
-      "description": "Create a numeric slider control with configurable range and step size in P5.js scenes.",
+    "native-cv-face": {
+      "id": "native-cv-face",
+      "title": "Face Detection",
+      "description": "Detect faces in the video stream with bounding boxes, center points, confidence scores, and face IDs.",
       "content": [
         {
           "type": "text",
-          "markdown": "# viji.slider()\n\n```\nslider(defaultValue: number, config: SliderConfig): SliderParameter\n```\n\nCreates a numeric slider parameter. The host renders it as a draggable slider control. Define it at the top level and read `.value` inside `render()`.\n\n## Parameters\n\n| Name | Type | Required | Default | Description |\n|------|------|----------|---------|-------------|\n| `defaultValue` | `number` | Yes | — | Initial value of the slider |\n| `config.min` | `number` | No | `0` | Minimum allowed value |\n| `config.max` | `number` | No | `100` | Maximum allowed value |\n| `config.step` | `number` | No | `1` | Increment between values |\n| `config.label` | `string` | Yes | — | Display name shown in the parameter UI |\n| `config.description` | `string` | No | — | Tooltip or help text |\n| `config.group` | `string` | No | `'general'` | Group name — see [Grouping](../grouping/) |\n| `config.category` | `ParameterCategory` | No | `'general'` | Visibility category — see [Categories](../categories/) |\n\n## Return Value\n\nReturns a `SliderParameter` object:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `value` | `number` | Current slider value. Updates in real-time when the user moves the slider. |\n| `min` | `number` | Minimum value |\n| `max` | `number` | Maximum value |\n| `step` | `number` | Step increment |\n| `label` | `string` | Display label |\n| `description` | `string \\| undefined` | Description text |\n| `group` | `string` | Group name |\n| `category` | `ParameterCategory` | Parameter category |\n\n## Usage\n\n```javascript\nconst radius = viji.slider(0.15, {\n  min: 0.02,\n  max: 0.5,\n  step: 0.01,\n  label: 'Radius'\n});\n\nfunction render(viji, p5) {\n  p5.background(0);\n  p5.fill(255);\n  p5.noStroke();\n  const r = radius.value * Math.min(p5.width, p5.height);\n  p5.ellipse(p5.width / 2, p5.height / 2, r * 2);\n}\n```\n\n> [!NOTE]\n> Parameters must be defined at the top level of your scene, not inside `setup()` or `render()`. They are registered once and sent to the host before either function runs. Defining them inside `setup()` would register the parameter too late — no UI control would appear. Defining them inside `render()` would re-register the parameter every frame, resetting its value to the default."
+          "markdown": "# Face Detection\n\nFace detection provides the position, size, and confidence of faces in the video stream. Enable it with [`viji.video.cv.enableFaceDetection(true)`](../connection/).\n\n## Property Reference\n\nResults appear in `viji.video.faces` — an array of `FaceData` objects. When no faces are detected or the feature is disabled, the array is empty.\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `face.id` | `number` | Index-based face identifier (0, 1, 2, ...) |\n| `face.bounds` | `{ x, y, width, height }` | Bounding box, normalized 0-1 |\n| `face.center` | `{ x, y }` | Bounding box center, normalized 0-1 |\n| `face.confidence` | `number` | Detection confidence (0-1) |\n| `face.landmarks` | `{ x, y, z? }[]` | Empty `[]` — requires [Face Mesh](../face-mesh/) for landmarks |\n| `face.expressions` | object | All zeros — requires [Emotion Detection](../emotion-detection/) |\n| `face.headPose` | `{ pitch, yaw, roll }` | All zeros — requires [Face Mesh](../face-mesh/) for head pose |\n| `face.blendshapes` | `FaceBlendshapes` | All zeros — requires [Emotion Detection](../emotion-detection/) |\n\n### Coordinate System\n\nAll coordinates are normalized 0-1. To draw on the canvas, multiply by canvas dimensions:\n\n```javascript\nconst screenX = face.bounds.x * viji.width;\nconst screenY = face.bounds.y * viji.height;\n```\n\n## Usage\n\n```javascript\nconst useFace = viji.toggle(false, { label: 'Face Detection', category: 'video' });\n\nfunction render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  if (useFace.value) {\n    viji.video.cv.enableFaceDetection(true);\n  } else {\n    viji.video.cv.enableFaceDetection(false);\n  }\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) return;\n\n  ctx.drawImage(viji.video.currentFrame, 0, 0, w, h);\n\n  viji.video.faces.forEach(face => {\n    ctx.strokeStyle = '#4ecdc4';\n    ctx.lineWidth = 2;\n    ctx.strokeRect(\n      face.bounds.x * w, face.bounds.y * h,\n      face.bounds.width * w, face.bounds.height * h\n    );\n\n    ctx.fillStyle = '#4ecdc4';\n    ctx.beginPath();\n    ctx.arc(face.center.x * w, face.center.y * h, 4, 0, Math.PI * 2);\n    ctx.fill();\n\n    ctx.font = `${Math.min(w, h) * 0.025}px sans-serif`;\n    ctx.fillText(\n      'Face #' + face.id + ' (' + (face.confidence * 100).toFixed(0) + '%)',\n      face.bounds.x * w,\n      face.bounds.y * h - 6\n    );\n  });\n}\n```\n\n**Cost: Low** — face detection is the lightest CV feature, providing only bounding boxes and basic metadata.\n\n> [!WARNING]\n> **WebGL Context Limits:** Each CV feature requires its own WebGL context for ML inference. Browsers typically allow 8-16 active WebGL contexts. Enabling too many CV features simultaneously can cause context eviction, potentially breaking the scene's own rendering. Use only the CV features you need.\n\n> [!TIP]\n> **Best practice:** Don't enable CV features by default. Instead, expose a toggle parameter so users can activate them on capable devices:\n> ```javascript\n> const useFace = viji.toggle(false, { label: 'Enable Face Detection', category: 'video' });\n> if (useFace.value) {\n>   await viji.video.cv.enableFaceDetection(true);\n> }\n> ```\n\nWhen face detection is disabled or no faces are visible, `viji.video.faces` becomes an empty array `[]`."
         },
         {
           "type": "live-example",
-          "title": "Slider Control",
-          "sceneCode": "const bg = viji.color('#0f0f1a', { label: 'Background' });\nconst dotColor = viji.color('#44ddff', { label: 'Color' });\nconst radius = viji.slider(0.25, { min: 0.05, max: 0.45, step: 0.01, label: 'Radius' });\nconst count = viji.slider(12, { min: 3, max: 30, step: 1, label: 'Count' });\nconst speed = viji.slider(1, { min: 0, max: 5, step: 0.1, label: 'Speed' });\n\nfunction render(viji, p5) {\n  p5.background(bg.value);\n  p5.fill(dotColor.value);\n  p5.noStroke();\n\n  const unit = Math.min(p5.width, p5.height);\n  const r = unit * radius.value;\n  const n = count.value;\n  const dotR = unit * 0.02;\n\n  for (let i = 0; i < n; i++) {\n    const a = (i / n) * p5.TWO_PI + viji.time * speed.value;\n    const x = p5.width / 2 + Math.cos(a) * r;\n    const y = p5.height / 2 + Math.sin(a) * r;\n    p5.ellipse(x, y, dotR * 2);\n  }\n}\n",
-          "sceneFile": "slider-p5.scene.js"
+          "title": "Face Detection",
+          "sceneCode": "const useFace = viji.toggle(false, { label: 'Face Detection', category: 'video' });\n\nfunction render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  if (useFace.value) {\n    viji.video.cv.enableFaceDetection(true);\n  } else {\n    viji.video.cv.enableFaceDetection(false);\n  }\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) {\n    ctx.fillStyle = '#555';\n    ctx.font = `${Math.min(w, h) * 0.04}px sans-serif`;\n    ctx.textAlign = 'center';\n    ctx.fillText('Waiting for video...', w / 2, h / 2);\n    return;\n  }\n\n  ctx.drawImage(viji.video.currentFrame, 0, 0, w, h);\n\n  viji.video.faces.forEach(face => {\n    const bx = face.bounds.x * w;\n    const by = face.bounds.y * h;\n    const bw = face.bounds.width * w;\n    const bh = face.bounds.height * h;\n\n    ctx.strokeStyle = '#4ecdc4';\n    ctx.lineWidth = 2;\n    ctx.strokeRect(bx, by, bw, bh);\n\n    ctx.fillStyle = '#4ecdc4';\n    ctx.beginPath();\n    ctx.arc(face.center.x * w, face.center.y * h, 4, 0, Math.PI * 2);\n    ctx.fill();\n\n    ctx.font = `${Math.min(w, h) * 0.025}px sans-serif`;\n    ctx.textAlign = 'left';\n    ctx.fillText('Face #' + face.id + ' (' + (face.confidence * 100).toFixed(0) + '%)', bx, by - 6);\n  });\n}\n",
+          "sceneFile": "face-detection-demo.scene.js",
+          "capabilities": {
+            "video": true
+          }
         },
         {
           "type": "text",
-          "markdown": "## Resolution-Agnostic Sizing\n\nWhen using a slider to control sizes or positions, use normalized values (`0` to `1`) and scale relative to `p5.width` and `p5.height`:\n\n```javascript\nconst size = viji.slider(0.15, {\n  min: 0.02,\n  max: 0.5,\n  step: 0.01,\n  label: 'Size'\n});\n\nfunction render(viji, p5) {\n  const pixelSize = size.value * Math.min(p5.width, p5.height);\n  // pixelSize adapts automatically to any resolution\n}\n```\n\n## Related\n\n- [Color](../color/) — color picker parameter\n- [Number](../number/) — numeric input without a slider track\n- [Select](../select/) — dropdown selection from predefined options\n- [Grouping](../grouping/) — organizing parameters into named groups\n- [Categories](../categories/) — controlling parameter visibility\n- [Native Slider](/native/parameters/slider) — equivalent for the Native renderer\n- [Shader Slider](/shader/parameters/slider) — equivalent for the Shader renderer"
+          "markdown": "## Related\n\n- [Video & CV Overview](../)\n- [Face Mesh](../face-mesh/)\n- [Emotion Detection](../emotion-detection/)\n- [Hand Tracking](../hand-tracking/)\n- [P5 Face Detection](/p5/video/face-detection)\n- [Shader Face Detection](/shader/video/face-detection)"
         }
       ]
     },
-    "p5-param-color": {
-      "id": "p5-param-color",
-      "title": "Color Parameter",
-      "description": "Create a color picker control that returns a hex color string in P5.js scenes.",
+    "native-cv-face-mesh": {
+      "id": "native-cv-face-mesh",
+      "title": "Face Mesh",
+      "description": "468-point facial landmark mesh and head pose estimation from the video stream.",
       "content": [
         {
           "type": "text",
-          "markdown": "# viji.color()\n\n```\ncolor(defaultValue: string, config: ColorConfig): ColorParameter\n```\n\nCreates a color picker parameter. The host renders it as a color swatch that opens a full color picker when clicked.\n\n## Parameters\n\n| Name | Type | Required | Default | Description |\n|------|------|----------|---------|-------------|\n| `defaultValue` | `string` | Yes | — | Initial hex color (e.g., `'#ff6600'`) |\n| `config.label` | `string` | Yes | — | Display name shown in the parameter UI |\n| `config.description` | `string` | No | — | Tooltip or help text |\n| `config.group` | `string` | No | `'general'` | Group name — see [Grouping](../grouping/) |\n| `config.category` | `ParameterCategory` | No | `'general'` | Visibility category — see [Categories](../categories/) |\n\n## Return Value\n\nReturns a `ColorParameter` object:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `value` | `string` | Current hex color (e.g., `'#ff6600'`). Updates in real-time. |\n| `label` | `string` | Display label |\n| `description` | `string \\| undefined` | Description text |\n| `group` | `string` | Group name |\n| `category` | `ParameterCategory` | Parameter category |\n\n## Usage\n\n```javascript\nconst bg = viji.color('#1a1a2e', { label: 'Background' });\nconst accent = viji.color('#ff6600', { label: 'Accent' });\n\nfunction render(viji, p5) {\n  p5.background(bg.value);\n  p5.fill(accent.value);\n  p5.noStroke();\n  p5.ellipse(p5.width / 2, p5.height / 2, p5.width * 0.5);\n}\n```\n\nThe `.value` is always a 6-digit hex string (`#rrggbb`). P5.js accepts hex strings directly in `p5.fill()`, `p5.stroke()`, and `p5.background()`.\n\n> [!NOTE]\n> Parameters must be defined at the top level of your scene, not inside `setup()` or `render()`. They are registered once and sent to the host before either function runs. Defining them inside `setup()` would register the parameter too late — no UI control would appear. Defining them inside `render()` would re-register the parameter every frame, resetting its value to the default."
+          "markdown": "# Face Mesh\n\nFace mesh provides 468 detailed facial landmark points and head pose estimation (pitch, yaw, roll). Enable it with [`viji.video.cv.enableFaceMesh(true)`](../connection/). Face mesh is independent of [Face Detection](../face-detection/) — enabling mesh also populates `viji.video.faces` with landmark data.\n\n## Property Reference\n\nFace mesh data appears on each `FaceData` object in `viji.video.faces`:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `face.landmarks` | `{ x, y, z? }[]` | 468 facial landmark points, normalized 0-1 |\n| `face.headPose.pitch` | `number` | Up/down rotation (-90 to 90 degrees) |\n| `face.headPose.yaw` | `number` | Left/right rotation (-90 to 90 degrees) |\n| `face.headPose.roll` | `number` | Tilt rotation (-180 to 180 degrees) |\n\n### Landmarks\n\nThe 468-point mesh covers the entire face surface including eyes, eyebrows, nose, mouth, jawline, and forehead. Each point has `x` and `y` in normalized 0-1 coordinates, with an optional `z` for depth.\n\nWhen face mesh is disabled, `landmarks` is an empty array `[]`.\n\n### Head Pose\n\nHead pose is computed from the face mesh landmark geometry. Values are in degrees:\n\n| Axis | Range | Description |\n|------|-------|-------------|\n| `pitch` | -90 to 90 | Looking up (negative) or down (positive) |\n| `yaw` | -90 to 90 | Looking left (negative) or right (positive) |\n| `roll` | -180 to 180 | Tilting head left (negative) or right (positive) |\n\nWhen face mesh is disabled, all head pose values are `0`.\n\n## Usage\n\n```javascript\nconst useMesh = viji.toggle(false, { label: 'Face Mesh', category: 'video' });\n\nfunction render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  if (useMesh.value) {\n    viji.video.cv.enableFaceMesh(true);\n  } else {\n    viji.video.cv.enableFaceMesh(false);\n  }\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) return;\n\n  ctx.drawImage(viji.video.currentFrame, 0, 0, w, h);\n\n  viji.video.faces.forEach(face => {\n    if (face.landmarks.length === 0) return;\n\n    ctx.fillStyle = 'rgba(69, 183, 209, 0.6)';\n    face.landmarks.forEach(pt => {\n      ctx.beginPath();\n      ctx.arc(pt.x * w, pt.y * h, 1, 0, Math.PI * 2);\n      ctx.fill();\n    });\n\n    const fontSize = Math.min(w, h) * 0.025;\n    ctx.fillStyle = '#fff';\n    ctx.font = `${fontSize}px sans-serif`;\n    ctx.textAlign = 'left';\n    const hp = face.headPose;\n    ctx.fillText(\n      'Pitch: ' + hp.pitch.toFixed(1) + '  Yaw: ' + hp.yaw.toFixed(1) + '  Roll: ' + hp.roll.toFixed(1),\n      w * 0.03, h - fontSize\n    );\n  });\n}\n```\n\n**Cost: Medium-High** — face mesh processes 468 landmarks per face and computes head pose. More demanding than basic face detection.\n\n> [!WARNING]\n> **WebGL Context Limits:** Each CV feature requires its own WebGL context for ML inference. Browsers typically allow 8-16 active WebGL contexts. Enabling too many CV features simultaneously can cause context eviction, potentially breaking the scene's own rendering. Use only the CV features you need.\n\n> [!TIP]\n> **Best practice:** Don't enable CV features by default. Instead, expose a toggle parameter so users can activate them on capable devices:\n> ```javascript\n> const useMesh = viji.toggle(false, { label: 'Enable Face Mesh', category: 'video' });\n> if (useMesh.value) {\n>   await viji.video.cv.enableFaceMesh(true);\n> }\n> ```\n\nWhen face mesh is disabled, `face.landmarks` becomes `[]` and `face.headPose` values are all `0`."
         },
         {
           "type": "live-example",
-          "title": "Color Picker",
-          "sceneCode": "const bg = viji.color('#0f0f1a', { label: 'Background' });\nconst color1 = viji.color('#ff4488', { label: 'Color 1', group: 'colors' });\nconst color2 = viji.color('#4488ff', { label: 'Color 2', group: 'colors' });\nconst count = viji.slider(6, { min: 2, max: 16, step: 1, label: 'Count' });\n\nfunction render(viji, p5) {\n  p5.background(bg.value);\n  p5.noStroke();\n\n  const n = count.value;\n  for (let i = 0; i < n; i++) {\n    const t = i / (n - 1);\n    const col = p5.lerpColor(p5.color(color1.value), p5.color(color2.value), t);\n    p5.fill(col);\n    const a = (i / n) * p5.TWO_PI + viji.time;\n    const r = Math.min(p5.width, p5.height) * 0.3;\n    const x = p5.width / 2 + Math.cos(a) * r;\n    const y = p5.height / 2 + Math.sin(a) * r;\n    p5.ellipse(x, y, Math.min(p5.width, p5.height) * 0.08);\n  }\n}\n",
-          "sceneFile": "color-p5.scene.js"
+          "title": "Face Mesh",
+          "sceneCode": "const useMesh = viji.toggle(false, { label: 'Face Mesh', category: 'video' });\n\nfunction render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  if (useMesh.value) {\n    viji.video.cv.enableFaceMesh(true);\n  } else {\n    viji.video.cv.enableFaceMesh(false);\n  }\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) {\n    ctx.fillStyle = '#555';\n    ctx.font = `${Math.min(w, h) * 0.04}px sans-serif`;\n    ctx.textAlign = 'center';\n    ctx.fillText('Waiting for video...', w / 2, h / 2);\n    return;\n  }\n\n  ctx.globalAlpha = 0.4;\n  ctx.drawImage(viji.video.currentFrame, 0, 0, w, h);\n  ctx.globalAlpha = 1.0;\n\n  viji.video.faces.forEach(face => {\n    if (face.landmarks.length === 0) return;\n\n    ctx.fillStyle = 'rgba(69, 183, 209, 0.7)';\n    face.landmarks.forEach(pt => {\n      ctx.beginPath();\n      ctx.arc(pt.x * w, pt.y * h, 1, 0, Math.PI * 2);\n      ctx.fill();\n    });\n\n    const fontSize = Math.min(w, h) * 0.025;\n    ctx.fillStyle = '#fff';\n    ctx.font = `${fontSize}px sans-serif`;\n    ctx.textAlign = 'left';\n    const hp = face.headPose;\n    ctx.fillText(\n      face.landmarks.length + ' landmarks | Pitch: ' + hp.pitch.toFixed(1) +\n      ' Yaw: ' + hp.yaw.toFixed(1) + ' Roll: ' + hp.roll.toFixed(1),\n      w * 0.03, h - fontSize * 0.8\n    );\n  });\n}\n",
+          "sceneFile": "face-mesh-demo.scene.js",
+          "capabilities": {
+            "video": true
+          }
         },
         {
           "type": "text",
-          "markdown": "## Parsing for P5 Color Functions\n\nIf you need to decompose a hex value for use with `p5.color()` or alpha blending:\n\n```javascript\nconst c = viji.color('#ff6600', { label: 'Color' });\n\nfunction render(viji, p5) {\n  const col = p5.color(c.value);\n  col.setAlpha(128);\n  p5.fill(col);\n  // ...\n}\n```\n\n## Related\n\n- [Slider](../slider/) — numeric slider parameter\n- [Toggle](../toggle/) — boolean on/off parameter\n- [Grouping](../grouping/) — organizing parameters into named groups\n- [Categories](../categories/) — controlling parameter visibility\n- [Native Color](/native/parameters/color) — equivalent for the Native renderer\n- [Shader Color](/shader/parameters/color) — equivalent for the Shader renderer"
+          "markdown": "## Related\n\n- [Video & CV Overview](../)\n- [Face Detection](../face-detection/)\n- [Emotion Detection](../emotion-detection/)\n- [P5 Face Mesh](/p5/video/face-mesh)\n- [Shader Face Mesh Uniforms](/shader/video/face-mesh)"
         }
       ]
     },
-    "p5-param-toggle": {
-      "id": "p5-param-toggle",
-      "title": "Toggle Parameter",
+    "native-cv-emotion": {
+      "id": "native-cv-emotion",
+      "title": "Emotion Detection",
+      "description": "Seven facial expression scores and 52 ARKit-compatible blendshape coefficients from the video stream.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Emotion Detection\n\nEmotion detection provides 7 expression scores and 52 ARKit-compatible blendshape coefficients for each detected face. Enable it with [`viji.video.cv.enableEmotionDetection(true)`](../connection/).\n\n## Property Reference\n\nEmotion data appears on each `FaceData` object in `viji.video.faces`:\n\n### Expressions (7 emotions)\n\nEach value is a confidence score from 0 to 1.\n\n| Property | Type | Range | Description |\n|----------|------|-------|-------------|\n| `face.expressions.neutral` | `number` | 0-1 | Neutral expression |\n| `face.expressions.happy` | `number` | 0-1 | Happy / smiling |\n| `face.expressions.sad` | `number` | 0-1 | Sad |\n| `face.expressions.angry` | `number` | 0-1 | Angry |\n| `face.expressions.surprised` | `number` | 0-1 | Surprised |\n| `face.expressions.disgusted` | `number` | 0-1 | Disgusted |\n| `face.expressions.fearful` | `number` | 0-1 | Fearful |\n\n### Blendshapes (52 ARKit coefficients)\n\nThe `face.blendshapes` object contains 52 ARKit-compatible coefficients derived from MediaPipe FaceLandmarker, each ranging from 0 to 1. These provide fine-grained facial muscle control data:\n\n**Brow:** `browDownLeft`, `browDownRight`, `browInnerUp`, `browOuterUpLeft`, `browOuterUpRight`\n\n**Cheek:** `cheekPuff`, `cheekSquintLeft`, `cheekSquintRight`\n\n**Eye:** `eyeBlinkLeft`, `eyeBlinkRight`, `eyeLookDownLeft`, `eyeLookDownRight`, `eyeLookInLeft`, `eyeLookInRight`, `eyeLookOutLeft`, `eyeLookOutRight`, `eyeLookUpLeft`, `eyeLookUpRight`, `eyeSquintLeft`, `eyeSquintRight`, `eyeWideLeft`, `eyeWideRight`\n\n**Jaw:** `jawForward`, `jawLeft`, `jawOpen`, `jawRight`\n\n**Mouth:** `mouthClose`, `mouthDimpleLeft`, `mouthDimpleRight`, `mouthFrownLeft`, `mouthFrownRight`, `mouthFunnel`, `mouthLeft`, `mouthLowerDownLeft`, `mouthLowerDownRight`, `mouthPressLeft`, `mouthPressRight`, `mouthPucker`, `mouthRight`, `mouthRollLower`, `mouthRollUpper`, `mouthShrugLower`, `mouthShrugUpper`, `mouthSmileLeft`, `mouthSmileRight`, `mouthStretchLeft`, `mouthStretchRight`, `mouthUpperUpLeft`, `mouthUpperUpRight`\n\n**Nose & Tongue:** `noseSneerLeft`, `noseSneerRight`, `tongueOut`\n\n## Usage\n\n```javascript\nconst useEmotion = viji.toggle(false, { label: 'Emotion Detection', category: 'video' });\n\nfunction render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  if (useEmotion.value) {\n    viji.video.cv.enableEmotionDetection(true);\n  } else {\n    viji.video.cv.enableEmotionDetection(false);\n  }\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) return;\n\n  ctx.drawImage(viji.video.currentFrame, 0, 0, w, h);\n\n  const face = viji.video.faces[0];\n  if (!face) return;\n\n  const expr = face.expressions;\n  const labels = ['neutral', 'happy', 'sad', 'angry', 'surprised', 'disgusted', 'fearful'];\n  const values = [expr.neutral, expr.happy, expr.sad, expr.angry, expr.surprised, expr.disgusted, expr.fearful];\n\n  const barH = h * 0.04;\n  const barW = w * 0.3;\n  const x = w * 0.65;\n  let y = h * 0.15;\n  const fontSize = barH * 0.7;\n\n  ctx.font = `${fontSize}px sans-serif`;\n  labels.forEach((label, i) => {\n    ctx.fillStyle = '#aaa';\n    ctx.textAlign = 'right';\n    ctx.fillText(label, x - 8, y + barH * 0.75);\n\n    ctx.fillStyle = '#333';\n    ctx.fillRect(x, y, barW, barH);\n\n    ctx.fillStyle = `hsl(${i * 50}, 70%, 55%)`;\n    ctx.fillRect(x, y, barW * values[i], barH);\n\n    y += barH * 1.8;\n  });\n}\n```\n\n**Cost: High** — emotion detection computes 7 expression scores and 52 blendshape coefficients, requiring significant processing per face.\n\n> [!WARNING]\n> **WebGL Context Limits:** Each CV feature requires its own WebGL context for ML inference. Browsers typically allow 8-16 active WebGL contexts. Enabling too many CV features simultaneously can cause context eviction, potentially breaking the scene's own rendering. Use only the CV features you need.\n\n> [!TIP]\n> **Best practice:** Don't enable CV features by default. Instead, expose a toggle parameter so users can activate them on capable devices:\n> ```javascript\n> const useEmotion = viji.toggle(false, { label: 'Enable Emotion Detection', category: 'video' });\n> if (useEmotion.value) {\n>   await viji.video.cv.enableEmotionDetection(true);\n> }\n> ```\n\nWhen emotion detection is disabled, all `expressions` values are `0` and all `blendshapes` coefficients are `0`."
+        },
+        {
+          "type": "live-example",
+          "title": "Emotion Detection",
+          "sceneCode": "const useEmotion = viji.toggle(false, { label: 'Emotion Detection', category: 'video' });\n\nfunction render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  if (useEmotion.value) {\n    viji.video.cv.enableEmotionDetection(true);\n  } else {\n    viji.video.cv.enableEmotionDetection(false);\n  }\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) {\n    ctx.fillStyle = '#555';\n    ctx.font = `${Math.min(w, h) * 0.04}px sans-serif`;\n    ctx.textAlign = 'center';\n    ctx.fillText('Waiting for video...', w / 2, h / 2);\n    return;\n  }\n\n  ctx.globalAlpha = 0.4;\n  ctx.drawImage(viji.video.currentFrame, 0, 0, w, h);\n  ctx.globalAlpha = 1.0;\n\n  const face = viji.video.faces[0];\n  if (!face) return;\n\n  const expr = face.expressions;\n  const labels = ['neutral', 'happy', 'sad', 'angry', 'surprised', 'disgusted', 'fearful'];\n  const values = [expr.neutral, expr.happy, expr.sad, expr.angry, expr.surprised, expr.disgusted, expr.fearful];\n  const colors = ['#888', '#4CAF50', '#2196F3', '#f44336', '#FF9800', '#9C27B0', '#607D8B'];\n\n  const barH = h * 0.04;\n  const barW = w * 0.3;\n  const x = w * 0.65;\n  let y = h * 0.12;\n  const fontSize = barH * 0.7;\n\n  ctx.font = `${fontSize}px sans-serif`;\n  labels.forEach((label, i) => {\n    ctx.fillStyle = '#aaa';\n    ctx.textAlign = 'right';\n    ctx.fillText(label, x - 8, y + barH * 0.75);\n\n    ctx.fillStyle = '#222';\n    ctx.fillRect(x, y, barW, barH);\n\n    ctx.fillStyle = colors[i];\n    ctx.fillRect(x, y, barW * values[i], barH);\n\n    ctx.fillStyle = '#ddd';\n    ctx.textAlign = 'left';\n    ctx.fillText((values[i] * 100).toFixed(0) + '%', x + barW + 6, y + barH * 0.75);\n\n    y += barH * 1.8;\n  });\n}\n",
+          "sceneFile": "emotion-detection-demo.scene.js",
+          "capabilities": {
+            "video": true
+          }
+        },
+        {
+          "type": "text",
+          "markdown": "## Related\n\n- [Video & CV Overview](../)\n- [Face Detection](../face-detection/)\n- [Face Mesh](../face-mesh/)\n- [P5 Emotion Detection](/p5/video/emotion-detection)\n- [Shader Emotion Uniforms](/shader/video/emotion-detection)"
+        }
+      ]
+    },
+    "native-cv-hands": {
+      "id": "native-cv-hands",
+      "title": "Hand Tracking",
+      "description": "21-point hand landmarks, palm position, bounding boxes, and ML gesture recognition for up to two hands.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Hand Tracking\n\nHand tracking provides 21-point landmarks, palm position, bounding boxes, and ML-based gesture recognition for up to two hands. Enable it with [`viji.video.cv.enableHandTracking(true)`](../connection/).\n\n## Property Reference\n\nResults appear in `viji.video.hands` — an array of up to 2 `HandData` objects. When no hands are detected or the feature is disabled, the array is empty.\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `hand.id` | `number` | Index-based hand identifier (0, 1) |\n| `hand.handedness` | `'left' \\| 'right'` | Which hand (always lowercase) |\n| `hand.confidence` | `number` | Detection confidence (0-1) |\n| `hand.bounds` | `{ x, y, width, height }` | Bounding box, normalized 0-1 |\n| `hand.landmarks` | `{ x, y, z }[]` | 21 MediaPipe hand landmarks, normalized 0-1 |\n| `hand.palm` | `{ x, y, z }` | Palm center — `landmarks[9]` (middle finger MCP) |\n| `hand.gestures` | object | 7 ML gesture confidence scores (0-1 each) |\n\n### Gestures\n\nGestures are classified by MediaPipe's GestureRecognizer ML model, not computed from geometric heuristics. Each value is a confidence score from 0 to 1.\n\n| Property | Gesture |\n|----------|---------|\n| `hand.gestures.fist` | Closed fist |\n| `hand.gestures.openPalm` | Open hand |\n| `hand.gestures.peace` | Victory / peace sign |\n| `hand.gestures.thumbsUp` | Thumbs up |\n| `hand.gestures.thumbsDown` | Thumbs down |\n| `hand.gestures.pointing` | Pointing up |\n| `hand.gestures.iLoveYou` | ASL I-love-you sign |\n\n## Usage\n\n```javascript\nconst useHands = viji.toggle(false, { label: 'Hand Tracking', category: 'video' });\n\nfunction render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  if (useHands.value) {\n    viji.video.cv.enableHandTracking(true);\n  } else {\n    viji.video.cv.enableHandTracking(false);\n  }\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) return;\n\n  ctx.drawImage(viji.video.currentFrame, 0, 0, w, h);\n\n  viji.video.hands.forEach(hand => {\n    const color = hand.handedness === 'left' ? '#ff9ff3' : '#54a0ff';\n    ctx.fillStyle = color;\n\n    hand.landmarks.forEach(pt => {\n      ctx.beginPath();\n      ctx.arc(pt.x * w, pt.y * h, 3, 0, Math.PI * 2);\n      ctx.fill();\n    });\n\n    ctx.beginPath();\n    ctx.arc(hand.palm.x * w, hand.palm.y * h, 8, 0, Math.PI * 2);\n    ctx.strokeStyle = color;\n    ctx.lineWidth = 2;\n    ctx.stroke();\n\n    const g = hand.gestures;\n    const gestures = [\n      ['fist', g.fist], ['open', g.openPalm], ['peace', g.peace],\n      ['thumbsUp', g.thumbsUp], ['pointing', g.pointing]\n    ];\n    const top = gestures.reduce((a, b) => b[1] > a[1] ? b : a);\n    if (top[1] > 0.5) {\n      ctx.fillStyle = '#fff';\n      ctx.font = `${Math.min(w, h) * 0.03}px sans-serif`;\n      ctx.textAlign = 'center';\n      ctx.fillText(top[0], hand.palm.x * w, hand.bounds.y * h - 8);\n    }\n  });\n}\n```\n\n**Cost: Medium** — hand tracking processes up to 2 hands with 21 landmarks each, plus ML gesture classification.\n\n> [!WARNING]\n> **WebGL Context Limits:** Each CV feature requires its own WebGL context for ML inference. Browsers typically allow 8-16 active WebGL contexts. Enabling too many CV features simultaneously can cause context eviction, potentially breaking the scene's own rendering. Use only the CV features you need.\n\n> [!TIP]\n> **Best practice:** Don't enable CV features by default. Instead, expose a toggle parameter so users can activate them on capable devices:\n> ```javascript\n> const useHands = viji.toggle(false, { label: 'Enable Hand Tracking', category: 'video' });\n> if (useHands.value) {\n>   await viji.video.cv.enableHandTracking(true);\n> }\n> ```\n\nWhen hand tracking is disabled or no hands are visible, `viji.video.hands` becomes an empty array `[]`."
+        },
+        {
+          "type": "live-example",
+          "title": "Hand Tracking",
+          "sceneCode": "const useHands = viji.toggle(false, { label: 'Hand Tracking', category: 'video' });\n\nfunction render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  if (useHands.value) {\n    viji.video.cv.enableHandTracking(true);\n  } else {\n    viji.video.cv.enableHandTracking(false);\n  }\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) {\n    ctx.fillStyle = '#555';\n    ctx.font = `${Math.min(w, h) * 0.04}px sans-serif`;\n    ctx.textAlign = 'center';\n    ctx.fillText('Waiting for video...', w / 2, h / 2);\n    return;\n  }\n\n  ctx.globalAlpha = 0.4;\n  ctx.drawImage(viji.video.currentFrame, 0, 0, w, h);\n  ctx.globalAlpha = 1.0;\n\n  viji.video.hands.forEach(hand => {\n    const color = hand.handedness === 'left' ? '#ff9ff3' : '#54a0ff';\n\n    ctx.fillStyle = color;\n    hand.landmarks.forEach(pt => {\n      ctx.beginPath();\n      ctx.arc(pt.x * w, pt.y * h, 3, 0, Math.PI * 2);\n      ctx.fill();\n    });\n\n    ctx.beginPath();\n    ctx.arc(hand.palm.x * w, hand.palm.y * h, 8, 0, Math.PI * 2);\n    ctx.strokeStyle = color;\n    ctx.lineWidth = 2;\n    ctx.stroke();\n\n    const g = hand.gestures;\n    const names = ['fist', 'openPalm', 'peace', 'thumbsUp', 'thumbsDown', 'pointing', 'iLoveYou'];\n    const vals = [g.fist, g.openPalm, g.peace, g.thumbsUp, g.thumbsDown, g.pointing, g.iLoveYou];\n\n    const barW = w * 0.12;\n    const barH = h * 0.02;\n    let bx = hand.bounds.x * w;\n    let by = (hand.bounds.y + hand.bounds.height) * h + 8;\n    const fontSize = barH * 0.9;\n    ctx.font = `${fontSize}px sans-serif`;\n\n    names.forEach((name, i) => {\n      ctx.fillStyle = '#aaa';\n      ctx.textAlign = 'right';\n      ctx.fillText(name, bx + barW * 0.6 - 4, by + barH * 0.85);\n\n      ctx.fillStyle = '#333';\n      ctx.fillRect(bx + barW * 0.6, by, barW * 0.4, barH);\n      ctx.fillStyle = color;\n      ctx.fillRect(bx + barW * 0.6, by, barW * 0.4 * vals[i], barH);\n\n      by += barH * 1.5;\n    });\n  });\n}\n",
+          "sceneFile": "hand-tracking-demo.scene.js",
+          "capabilities": {
+            "video": true
+          }
+        },
+        {
+          "type": "text",
+          "markdown": "## Related\n\n- [Video & CV Overview](../)\n- [Face Detection](../face-detection/)\n- [Pose Detection](../pose-detection/)\n- [P5 Hand Tracking](/p5/video/hand-tracking)\n- [Shader Hand Tracking](/shader/video/hand-tracking)"
+        }
+      ]
+    },
+    "native-cv-pose": {
+      "id": "native-cv-pose",
+      "title": "Pose Detection",
+      "description": "33-point BlazePose body landmarks with named body part groups for easy access.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Pose Detection\n\nPose detection provides 33 body landmarks using MediaPipe's BlazePose model, with named groups for easy access to face, torso, arms, and legs. Enable it with [`viji.video.cv.enablePoseDetection(true)`](../connection/).\n\n## Property Reference\n\nResults appear in `viji.video.pose` — a single `PoseData` object, or `null` when no pose is detected or the feature is disabled.\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `pose.confidence` | `number` | Average landmark visibility (0-1) |\n| `pose.landmarks` | `{ x, y, z, visibility }[]` | 33 BlazePose points, normalized 0-1 |\n| `pose.face` | `{ x, y }[]` | Face region landmarks (indices 0-10) |\n| `pose.torso` | `{ x, y }[]` | Torso landmarks (indices 11, 12, 23, 24) |\n| `pose.leftArm` | `{ x, y }[]` | Left arm (indices 11, 13, 15) |\n| `pose.rightArm` | `{ x, y }[]` | Right arm (indices 12, 14, 16) |\n| `pose.leftLeg` | `{ x, y }[]` | Left leg (indices 23, 25, 27, 29, 31) |\n| `pose.rightLeg` | `{ x, y }[]` | Right leg (indices 24, 26, 28, 30, 32) |\n\n### Key Landmark Indices\n\n| Index | Landmark | Index | Landmark |\n|-------|----------|-------|----------|\n| 0 | Nose | 15 | Left wrist |\n| 11 | Left shoulder | 16 | Right wrist |\n| 12 | Right shoulder | 23 | Left hip |\n| 13 | Left elbow | 24 | Right hip |\n| 14 | Right elbow | 25 | Left knee |\n| 27 | Left ankle | 26 | Right knee |\n| 28 | Right ankle | | |\n\nEach landmark has a `visibility` score (0-1) indicating how confident the model is that this point is visible.\n\n## Usage\n\n```javascript\nconst usePose = viji.toggle(false, { label: 'Pose Detection', category: 'video' });\n\nfunction render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  if (usePose.value) {\n    viji.video.cv.enablePoseDetection(true);\n  } else {\n    viji.video.cv.enablePoseDetection(false);\n  }\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) return;\n\n  ctx.drawImage(viji.video.currentFrame, 0, 0, w, h);\n\n  const pose = viji.video.pose;\n  if (!pose) return;\n\n  ctx.fillStyle = '#ff6b6b';\n  pose.landmarks.forEach(pt => {\n    if (pt.visibility > 0.5) {\n      ctx.beginPath();\n      ctx.arc(pt.x * w, pt.y * h, 4, 0, Math.PI * 2);\n      ctx.fill();\n    }\n  });\n\n  ctx.strokeStyle = '#ff6b6b';\n  ctx.lineWidth = 2;\n  const drawGroup = (group) => {\n    if (group.length < 2) return;\n    ctx.beginPath();\n    ctx.moveTo(group[0].x * w, group[0].y * h);\n    for (let i = 1; i < group.length; i++) {\n      ctx.lineTo(group[i].x * w, group[i].y * h);\n    }\n    ctx.stroke();\n  };\n\n  drawGroup(pose.leftArm);\n  drawGroup(pose.rightArm);\n  drawGroup(pose.leftLeg);\n  drawGroup(pose.rightLeg);\n  drawGroup(pose.torso);\n}\n```\n\n**Cost: Medium** — pose detection processes 33 body landmarks with visibility scores.\n\n> [!WARNING]\n> **WebGL Context Limits:** Each CV feature requires its own WebGL context for ML inference. Browsers typically allow 8-16 active WebGL contexts. Enabling too many CV features simultaneously can cause context eviction, potentially breaking the scene's own rendering. Use only the CV features you need.\n\n> [!TIP]\n> **Best practice:** Don't enable CV features by default. Instead, expose a toggle parameter so users can activate them on capable devices:\n> ```javascript\n> const usePose = viji.toggle(false, { label: 'Enable Pose Detection', category: 'video' });\n> if (usePose.value) {\n>   await viji.video.cv.enablePoseDetection(true);\n> }\n> ```\n\nWhen pose detection is disabled or no body is visible, `viji.video.pose` becomes `null`."
+        },
+        {
+          "type": "live-example",
+          "title": "Pose Detection",
+          "sceneCode": "const usePose = viji.toggle(false, { label: 'Pose Detection', category: 'video' });\n\nfunction render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  if (usePose.value) {\n    viji.video.cv.enablePoseDetection(true);\n  } else {\n    viji.video.cv.enablePoseDetection(false);\n  }\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) {\n    ctx.fillStyle = '#555';\n    ctx.font = `${Math.min(w, h) * 0.04}px sans-serif`;\n    ctx.textAlign = 'center';\n    ctx.fillText('Waiting for video...', w / 2, h / 2);\n    return;\n  }\n\n  ctx.globalAlpha = 0.4;\n  ctx.drawImage(viji.video.currentFrame, 0, 0, w, h);\n  ctx.globalAlpha = 1.0;\n\n  const pose = viji.video.pose;\n  if (!pose) return;\n\n  ctx.fillStyle = '#ff6b6b';\n  pose.landmarks.forEach(pt => {\n    if (pt.visibility > 0.5) {\n      ctx.beginPath();\n      ctx.arc(pt.x * w, pt.y * h, 4, 0, Math.PI * 2);\n      ctx.fill();\n    }\n  });\n\n  ctx.strokeStyle = '#ff6b6b';\n  ctx.lineWidth = 2;\n  const drawGroup = (group) => {\n    if (group.length < 2) return;\n    ctx.beginPath();\n    ctx.moveTo(group[0].x * w, group[0].y * h);\n    for (let i = 1; i < group.length; i++) {\n      ctx.lineTo(group[i].x * w, group[i].y * h);\n    }\n    ctx.stroke();\n  };\n\n  ctx.strokeStyle = '#ff9ff3';\n  drawGroup(pose.leftArm);\n  ctx.strokeStyle = '#54a0ff';\n  drawGroup(pose.rightArm);\n  ctx.strokeStyle = '#ff9ff3';\n  drawGroup(pose.leftLeg);\n  ctx.strokeStyle = '#54a0ff';\n  drawGroup(pose.rightLeg);\n  ctx.strokeStyle = '#feca57';\n  drawGroup(pose.torso);\n\n  ctx.fillStyle = '#fff';\n  ctx.font = `${Math.min(w, h) * 0.025}px sans-serif`;\n  ctx.textAlign = 'left';\n  ctx.fillText('Confidence: ' + (pose.confidence * 100).toFixed(0) + '%', w * 0.03, h - Math.min(w, h) * 0.03);\n}\n",
+          "sceneFile": "pose-detection-demo.scene.js",
+          "capabilities": {
+            "video": true
+          }
+        },
+        {
+          "type": "text",
+          "markdown": "## Related\n\n- [Video & CV Overview](../)\n- [Hand Tracking](../hand-tracking/)\n- [Body Segmentation](../body-segmentation/)\n- [P5 Pose Detection](/p5/video/pose-detection)\n- [Shader Pose Detection](/shader/video/pose-detection)"
+        }
+      ]
+    },
+    "native-cv-segmentation": {
+      "id": "native-cv-segmentation",
+      "title": "Body Segmentation",
+      "description": "Per-pixel person/background segmentation mask for effects like background replacement.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Body Segmentation\n\nBody segmentation provides a per-pixel mask that separates the person from the background. Enable it with [`viji.video.cv.enableBodySegmentation(true)`](../connection/).\n\n## Property Reference\n\nResults appear in `viji.video.segmentation` — a `SegmentationData` object, or `null` when no mask is available or the feature is disabled.\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `segmentation.mask` | `Uint8Array` | Per-pixel mask: 0 = background, 1 = person |\n| `segmentation.width` | `number` | Mask width in pixels |\n| `segmentation.height` | `number` | Mask height in pixels |\n\n### Mask Format\n\nThe mask is a flat `Uint8Array` with `width * height` elements. Each element is `0` (background) or `1` (person). The mask dimensions may differ from the video frame dimensions — they reflect the ML model's output resolution.\n\nTo count person pixels or calculate presence ratio, iterate the mask array manually:\n\n```javascript\nlet personPixels = 0;\nfor (let i = 0; i < segmentation.mask.length; i++) {\n  if (segmentation.mask[i] > 0) personPixels++;\n}\nconst personRatio = personPixels / segmentation.mask.length;\n```\n\n## Usage\n\n```javascript\nconst useSeg = viji.toggle(false, { label: 'Body Segmentation', category: 'video' });\n\nfunction render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  if (useSeg.value) {\n    viji.video.cv.enableBodySegmentation(true);\n  } else {\n    viji.video.cv.enableBodySegmentation(false);\n  }\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) return;\n\n  ctx.drawImage(viji.video.currentFrame, 0, 0, w, h);\n\n  const seg = viji.video.segmentation;\n  if (!seg) return;\n\n  let personPixels = 0;\n  for (let i = 0; i < seg.mask.length; i++) {\n    if (seg.mask[i] > 0) personPixels++;\n  }\n  const personRatio = personPixels / seg.mask.length;\n\n  if (personRatio > 0.05) {\n    ctx.shadowBlur = 30 * personRatio;\n    ctx.shadowColor = `hsl(${170 + personRatio * 60}, 80%, 60%)`;\n    ctx.strokeStyle = `hsla(${170 + personRatio * 60}, 80%, 60%, 0.6)`;\n    ctx.lineWidth = 4;\n    ctx.strokeRect(0, 0, w, h);\n    ctx.shadowBlur = 0;\n  }\n\n  ctx.fillStyle = '#fff';\n  ctx.font = `${Math.min(w, h) * 0.03}px sans-serif`;\n  ctx.textAlign = 'left';\n  ctx.fillText(\n    'Person: ' + (personRatio * 100).toFixed(0) + '% (' + seg.width + 'x' + seg.height + ' mask)',\n    w * 0.03, h - Math.min(w, h) * 0.03\n  );\n}\n```\n\n**Cost: High** — body segmentation produces a per-pixel mask with a large tensor output, making it one of the most expensive CV features.\n\n> [!WARNING]\n> **WebGL Context Limits:** Each CV feature requires its own WebGL context for ML inference. Browsers typically allow 8-16 active WebGL contexts. Enabling too many CV features simultaneously can cause context eviction, potentially breaking the scene's own rendering. Use only the CV features you need.\n\n> [!TIP]\n> **Best practice:** Don't enable CV features by default. Instead, expose a toggle parameter so users can activate them on capable devices:\n> ```javascript\n> const useSeg = viji.toggle(false, { label: 'Enable Body Segmentation', category: 'video' });\n> if (useSeg.value) {\n>   await viji.video.cv.enableBodySegmentation(true);\n> }\n> ```\n\nWhen body segmentation is disabled or no body is visible, `viji.video.segmentation` becomes `null`."
+        },
+        {
+          "type": "live-example",
+          "title": "Body Segmentation",
+          "sceneCode": "const useSeg = viji.toggle(false, { label: 'Body Segmentation', category: 'video' });\n\nfunction render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  if (useSeg.value) {\n    viji.video.cv.enableBodySegmentation(true);\n  } else {\n    viji.video.cv.enableBodySegmentation(false);\n  }\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) {\n    ctx.fillStyle = '#555';\n    ctx.font = `${Math.min(w, h) * 0.04}px sans-serif`;\n    ctx.textAlign = 'center';\n    ctx.fillText('Waiting for video...', w / 2, h / 2);\n    return;\n  }\n\n  ctx.drawImage(viji.video.currentFrame, 0, 0, w, h);\n\n  const seg = viji.video.segmentation;\n  if (!seg) return;\n\n  let personPixels = 0;\n  for (let i = 0; i < seg.mask.length; i++) {\n    if (seg.mask[i] > 0) personPixels++;\n  }\n  const personRatio = personPixels / seg.mask.length;\n\n  if (personRatio > 0.05) {\n    ctx.shadowBlur = 30 * personRatio;\n    ctx.shadowColor = `hsl(${170 + personRatio * 60}, 80%, 60%)`;\n    ctx.strokeStyle = `hsla(${170 + personRatio * 60}, 80%, 60%, 0.6)`;\n    ctx.lineWidth = 4;\n    ctx.strokeRect(0, 0, w, h);\n    ctx.shadowBlur = 0;\n  }\n\n  const fontSize = Math.min(w, h) * 0.03;\n  ctx.fillStyle = 'rgba(0,0,0,0.5)';\n  ctx.fillRect(0, h - fontSize * 2, w, fontSize * 2);\n  ctx.fillStyle = '#fff';\n  ctx.font = `${fontSize}px sans-serif`;\n  ctx.textAlign = 'center';\n  ctx.fillText(\n    'Person: ' + (personRatio * 100).toFixed(0) + '% | Mask: ' + seg.width + 'x' + seg.height,\n    w / 2, h - fontSize * 0.5\n  );\n}\n",
+          "sceneFile": "body-segmentation-demo.scene.js",
+          "capabilities": {
+            "video": true
+          }
+        },
+        {
+          "type": "text",
+          "markdown": "## Related\n\n- [Video & CV Overview](../)\n- [Pose Detection](../pose-detection/)\n- [Face Detection](../face-detection/)\n- [P5 Body Segmentation](/p5/video/body-segmentation)\n- [Shader Body Segmentation](/shader/video/body-segmentation)"
+        }
+      ]
+    },
+    "native-pointer": {
+      "id": "native-pointer",
+      "title": "Pointer (Unified)",
+      "description": "A single input abstraction that works identically for mouse and touch — the recommended starting point for position, click, and drag interactions.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Pointer (Unified Input)\n\n`viji.pointer` provides a single, unified input that works the same way whether the user is on a desktop with a mouse or on a mobile device using touch. **For most interactions — click, drag, position tracking — start here.**\n\n## Why Use Pointer?\n\nDrag-to-orbit, click-to-place, and cursor-following effects work identically for mouse and touch. `viji.pointer` gives you one set of coordinates, one pressed state, and one delta — no separate code paths needed.\n\nUse [`viji.mouse`](../mouse/) when you need mouse-specific features like right-click, middle-click, or scroll wheel. Use [`viji.touches`](../touch/) when you need multi-touch, pressure, radius, or per-finger tracking.\n\n## API Reference\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `x` | `number` | Canvas-space X position (pixels) |\n| `y` | `number` | Canvas-space Y position (pixels) |\n| `deltaX` | `number` | Horizontal movement since last frame (pixels) |\n| `deltaY` | `number` | Vertical movement since last frame (pixels) |\n| `isDown` | `boolean` | `true` if left mouse button is held or a touch is active |\n| `wasPressed` | `boolean` | `true` for exactly one frame when input becomes active, then resets |\n| `wasReleased` | `boolean` | `true` for exactly one frame when input is released, then resets |\n| `isInCanvas` | `boolean` | `true` if the input position is within the canvas bounds |\n| `type` | `'mouse' \\| 'touch' \\| 'none'` | Which input device is currently active |\n\n## Coordinate System\n\nPointer coordinates are in **canvas-space pixels**, with `(0, 0)` at the top-left corner. Values range from `0` to [`viji.width`](/native/canvas-context) horizontally and `0` to [`viji.height`](/native/canvas-context) vertically.\n\nThe coordinates always match the canvas dimensions regardless of how the canvas is displayed on screen. Viji handles display scaling automatically, so your code works with canvas-space values directly.\n\n## How It Works\n\nWhen a touch is active, the pointer follows the primary touch point. Otherwise, it follows the mouse. This switching happens automatically each frame.\n\n- **When a touch is active** (`viji.touches.count > 0`): pointer tracks the primary touch. `isDown` is always `true`, `type` is `'touch'`.\n- **When no touch is active**: pointer falls back to the mouse. `isDown` reflects the left mouse button, `type` is `'mouse'` when the cursor is over the canvas, or `'none'` when it's outside.\n\n`wasPressed` and `wasReleased` reflect frame-to-frame transitions of `isDown` — each is `true` for exactly one frame, then automatically resets.\n\n## Basic Example"
+        },
+        {
+          "type": "live-example",
+          "title": "Pointer — Drag Trail",
+          "sceneCode": "const ctx = viji.useContext('2d');\nconst trail = [];\nconst maxTrail = 80;\n\nfunction render(viji) {\n  const w = viji.width, h = viji.height;\n  const p = viji.pointer;\n\n  ctx.fillStyle = 'rgba(10, 10, 30, 0.15)';\n  ctx.fillRect(0, 0, w, h);\n\n  if (p.isDown) {\n    trail.push({ x: p.x, y: p.y });\n    if (trail.length > maxTrail) trail.shift();\n  } else if (trail.length > 0) {\n    trail.shift();\n  }\n\n  for (let i = 0; i < trail.length; i++) {\n    const t = i / trail.length;\n    const radius = 3 + t * 12;\n    ctx.beginPath();\n    ctx.arc(trail[i].x, trail[i].y, radius, 0, Math.PI * 2);\n    ctx.fillStyle = `hsla(${200 + t * 60}, 80%, 65%, ${t * 0.8})`;\n    ctx.fill();\n  }\n\n  const size = Math.min(w, h);\n  ctx.fillStyle = p.isDown ? 'rgba(100, 220, 255, 0.9)' : 'rgba(200, 200, 200, 0.5)';\n  ctx.beginPath();\n  ctx.arc(p.x, p.y, size * 0.015, 0, Math.PI * 2);\n  ctx.fill();\n\n  ctx.fillStyle = 'rgba(255,255,255,0.5)';\n  ctx.font = `${size * 0.025}px monospace`;\n  ctx.textAlign = 'left';\n  ctx.fillText(`pointer: (${Math.round(p.x)}, ${Math.round(p.y)})  type: ${p.type}`, size * 0.03, h - size * 0.03);\n  ctx.fillText(`isDown: ${p.isDown}  inCanvas: ${p.isInCanvas}`, size * 0.03, h - size * 0.06);\n}\n",
+          "sceneFile": "pointer-demo.scene.js",
+          "capabilities": {
+            "interaction": true
+          }
+        },
+        {
+          "type": "text",
+          "markdown": "## Common Patterns\n\n### Click Detection\n\n```javascript\nfunction render(viji) {\n  if (viji.pointer.wasPressed) {\n    spawnParticle(viji.pointer.x, viji.pointer.y);\n  }\n}\n```\n\n### Drag Interaction\n\n```javascript\nlet offsetX = 0, offsetY = 0;\n\nfunction render(viji) {\n  if (viji.pointer.isDown) {\n    offsetX += viji.pointer.deltaX;\n    offsetY += viji.pointer.deltaY;\n  }\n}\n```\n\n### Conditional by Input Type\n\n```javascript\nfunction render(viji) {\n  if (viji.pointer.type === 'touch') {\n    drawTouchIndicator(viji.pointer.x, viji.pointer.y);\n  }\n}\n```\n\n## When to Use Mouse or Touch Instead\n\n| Need | Use |\n|------|-----|\n| Right-click or middle-click | [`viji.mouse`](../mouse/) |\n| Scroll wheel / zoom | [`viji.mouse`](../mouse/) — `wheelDelta`, `wheelX`, `wheelY` |\n| Multi-touch (pinch, two-finger rotation) | [`viji.touches`](../touch/) |\n| Per-touch pressure, radius, or velocity | [`viji.touches`](../touch/) |\n| Individual button states | [`viji.mouse`](../mouse/) — `leftButton`, `rightButton`, `middleButton` |\n\n## Related\n\n- [Mouse](../mouse/) — device-specific mouse access with buttons, wheel, and movement deltas\n- [Keyboard](../keyboard/) — key state queries and modifier tracking\n- [Touch](../touch/) — multi-touch with pressure, radius, velocity, and per-finger tracking\n- [P5 Pointer](/p5/pointer) — same API in the P5 renderer\n- [Shader Pointer Uniforms](/shader/pointer) — GLSL uniforms for unified pointer input"
+        }
+      ]
+    },
+    "native-mouse": {
+      "id": "native-mouse",
+      "title": "Mouse",
+      "description": "Full mouse API — position, buttons, movement deltas, scroll wheel, and frame-based press/release detection.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Mouse\n\n`viji.mouse` provides detailed mouse input including individual button states, movement deltas, and scroll wheel data.\n\n> [!TIP]\n> For simple position, click, and drag interactions that should work on both mouse and touch devices, use [`viji.pointer`](../pointer/) instead. The mouse API is for when you need mouse-specific features like right-click, middle-click, or scroll wheel.\n\n## API Reference\n\n### Position\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `x` | `number` | Canvas-space X position (pixels) |\n| `y` | `number` | Canvas-space Y position (pixels) |\n| `isInCanvas` | `boolean` | `true` when the cursor is over the canvas |\n\n### Buttons\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `isPressed` | `boolean` | `true` if any mouse button is currently held |\n| `leftButton` | `boolean` | Left button state |\n| `rightButton` | `boolean` | Right button state |\n| `middleButton` | `boolean` | Middle button state |\n\n### Movement\n\n| Property | Type | Description | Resets each frame |\n|----------|------|-------------|-------------------|\n| `deltaX` | `number` | Horizontal movement this frame (pixels) | Yes → `0` |\n| `deltaY` | `number` | Vertical movement this frame (pixels) | Yes → `0` |\n| `wasMoved` | `boolean` | `true` if the mouse moved this frame | Yes → `false` |\n\n### Scroll Wheel\n\n| Property | Type | Description | Resets each frame |\n|----------|------|-------------|-------------------|\n| `wheelDelta` | `number` | Vertical scroll accumulated this frame | Yes → `0` |\n| `wheelX` | `number` | Horizontal scroll accumulated this frame | Yes → `0` |\n| `wheelY` | `number` | Vertical scroll accumulated this frame | Yes → `0` |\n\n> [!NOTE]\n> `wheelDelta` and `wheelY` report the same value. `wheelX` is for horizontal scrolling (trackpad gestures, tilt-wheel mice).\n\n### Frame Events\n\n| Property | Type | Description | Resets each frame |\n|----------|------|-------------|-------------------|\n| `wasPressed` | `boolean` | `true` for exactly one frame when any button is first pressed | Yes → `false` |\n| `wasReleased` | `boolean` | `true` for exactly one frame when any button is released | Yes → `false` |\n\n## Coordinate System\n\nMouse coordinates are in **canvas-space pixels**, with `(0, 0)` at the top-left corner. Values range from `0` to [`viji.width`](/native/canvas-context) horizontally and `0` to [`viji.height`](/native/canvas-context) vertically. The right-click context menu is automatically suppressed on the canvas.\n\n## Frame Lifecycle\n\nPer-frame properties (`deltaX`, `deltaY`, `wheelDelta`, `wheelX`, `wheelY`, `wasPressed`, `wasReleased`, `wasMoved`) reset to zero/false at the start of each frame. If multiple mouse events occur within a single frame, deltas and wheel values **accumulate**, and `wasPressed`/`wasReleased` are OR'd across all events.\n\nPersistent properties (`x`, `y`, `isInCanvas`, `isPressed`, `leftButton`, `rightButton`, `middleButton`) retain their values until the next event changes them.\n\n## Basic Example"
+        },
+        {
+          "type": "live-example",
+          "title": "Mouse — Buttons & Wheel",
+          "sceneCode": "const ctx = viji.useContext('2d');\nlet hue = 200;\nlet zoom = 1;\nlet prevRight = false;\n\nfunction render(viji) {\n  const w = viji.width, h = viji.height;\n  const m = viji.mouse;\n  const size = Math.min(w, h);\n\n  if (m.rightButton && !prevRight) hue = (hue + 50) % 360;\n  prevRight = m.rightButton;\n\n  zoom -= m.wheelDelta * 0.001;\n  zoom = Math.max(0.3, Math.min(5, zoom));\n\n  ctx.fillStyle = 'rgba(10, 10, 30, 0.2)';\n  ctx.fillRect(0, 0, w, h);\n\n  const speed = Math.sqrt(m.deltaX ** 2 + m.deltaY ** 2);\n  const radius = (size * 0.02 + speed * 1.5) * zoom;\n\n  if (m.isInCanvas) {\n    ctx.beginPath();\n    ctx.arc(m.x, m.y, radius, 0, Math.PI * 2);\n    const alpha = m.isPressed ? 0.9 : 0.4;\n    ctx.fillStyle = `hsla(${hue}, 80%, 65%, ${alpha})`;\n    ctx.fill();\n\n    if (m.leftButton) {\n      ctx.strokeStyle = `hsla(${hue}, 80%, 75%, 0.6)`;\n      ctx.lineWidth = 2;\n      ctx.stroke();\n    }\n  }\n\n  ctx.fillStyle = 'rgba(255,255,255,0.5)';\n  ctx.font = `${size * 0.022}px monospace`;\n  ctx.textAlign = 'left';\n  const y0 = h - size * 0.15;\n  ctx.fillText(`pos: (${Math.round(m.x)}, ${Math.round(m.y)})  inCanvas: ${m.isInCanvas}`, size * 0.03, y0);\n  ctx.fillText(`buttons: L[${m.leftButton ? '\\u25A0' : '\\u25A1'}] R[${m.rightButton ? '\\u25A0' : '\\u25A1'}] M[${m.middleButton ? '\\u25A0' : '\\u25A1'}]`, size * 0.03, y0 + size * 0.03);\n  ctx.fillText(`delta: (${m.deltaX.toFixed(0)}, ${m.deltaY.toFixed(0)})  wheel: ${m.wheelDelta.toFixed(1)}`, size * 0.03, y0 + size * 0.06);\n  ctx.fillText(`zoom: ${zoom.toFixed(2)}  hue: ${hue}`, size * 0.03, y0 + size * 0.09);\n}\n",
+          "sceneFile": "mouse-demo.scene.js",
+          "capabilities": {
+            "interaction": true
+          }
+        },
+        {
+          "type": "text",
+          "markdown": "## Common Patterns\n\n### Right-Click Action\n\n```javascript\nlet prevRight = false;\n\nfunction render(viji) {\n  const m = viji.mouse;\n  if (m.rightButton && !prevRight) {\n    cycleColor();\n  }\n  prevRight = m.rightButton;\n}\n```\n\n### Scroll Zoom\n\n```javascript\nlet zoom = 1;\n\nfunction render(viji) {\n  zoom -= viji.mouse.wheelDelta * 0.001;\n  zoom = Math.max(0.1, Math.min(10, zoom));\n}\n```\n\n### Movement Speed\n\n```javascript\nfunction render(viji) {\n  const m = viji.mouse;\n  const speed = Math.sqrt(m.deltaX ** 2 + m.deltaY ** 2);\n  drawParticle(m.x, m.y, speed);\n}\n```\n\n## Related\n\n- [Pointer (Unified)](../pointer/) — recommended starting point for cross-device interactions\n- [Keyboard](../keyboard/) — key state queries and modifier tracking\n- [Touch](../touch/) — multi-touch input with pressure, radius, and velocity\n- [P5 Mouse](/p5/mouse) — same API in the P5 renderer\n- [Shader Mouse Uniforms](/shader/mouse) — GLSL uniforms for mouse input"
+        }
+      ]
+    },
+    "native-keyboard": {
+      "id": "native-keyboard",
+      "title": "Keyboard",
+      "description": "Full keyboard API — key state queries, modifier tracking, and frame-based press/release detection.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Keyboard\n\n`viji.keyboard` provides real-time keyboard state with per-key press detection, modifier tracking, and frame-based event queries.\n\n## API Reference\n\n### Methods\n\n| Method | Returns | Description |\n|--------|---------|-------------|\n| `isPressed(key)` | `boolean` | `true` if the key is currently held down |\n| `wasPressed(key)` | `boolean` | `true` for exactly one frame when the key is first pressed, then resets |\n| `wasReleased(key)` | `boolean` | `true` for exactly one frame when the key is released, then resets |\n\nAll three methods are **case-insensitive** — `isPressed('a')` and `isPressed('A')` are equivalent.\n\n### Properties\n\n| Property | Type | Description | Resets each frame |\n|----------|------|-------------|-------------------|\n| `activeKeys` | `Set<string>` | All currently held keys (lowercase) | No |\n| `pressedThisFrame` | `Set<string>` | Keys pressed this frame (lowercase) | Yes → cleared |\n| `releasedThisFrame` | `Set<string>` | Keys released this frame (lowercase) | Yes → cleared |\n| `lastKeyPressed` | `string` | Most recently pressed key (original case) | No |\n| `lastKeyReleased` | `string` | Most recently released key (original case) | No |\n\n### Modifier Keys\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `shift` | `boolean` | Shift key state |\n| `ctrl` | `boolean` | Ctrl key state |\n| `alt` | `boolean` | Alt key state |\n| `meta` | `boolean` | Meta/Cmd key state |\n\n## Key Names\n\nKey names follow the browser's `event.key` standard. Common values:\n\n| Key | Name to use |\n|-----|-------------|\n| Letters | `'a'`, `'b'`, `'z'` (case-insensitive) |\n| Digits | `'0'`, `'1'`, `'9'` |\n| Arrows | `'arrowup'`, `'arrowdown'`, `'arrowleft'`, `'arrowright'` |\n| Space | `' '` (a space character) |\n| Enter | `'enter'` |\n| Escape | `'escape'` |\n| Tab | `'tab'` |\n| Backspace | `'backspace'` |\n| Shift | `'shift'` |\n| Control | `'control'` |\n\n> [!NOTE]\n> The `activeKeys`, `pressedThisFrame`, and `releasedThisFrame` sets store keys in lowercase. However, `lastKeyPressed` and `lastKeyReleased` retain the original case as reported by the browser (e.g., `'A'` when Shift is held, `'ArrowUp'` for arrows).\n\n## Frame Lifecycle\n\n- `pressedThisFrame` and `releasedThisFrame` are cleared at the start of each frame.\n- Key repeats are suppressed — holding a key down fires `wasPressed()` only on the first frame, not on subsequent repeat events.\n- `activeKeys` persists across frames until a `keyup` event is received.\n\n## Keyboard Event Capture\n\nKeyboard events are captured on the iframe document, not the canvas element itself. This means keys are registered even when the canvas doesn't have direct focus within the iframe. The following keys are allowed through without `preventDefault()`: Tab, F1–F5, F11, F12.\n\n## Basic Example"
+        },
+        {
+          "type": "live-example",
+          "title": "Keyboard — Movement & State",
+          "sceneCode": "const ctx = viji.useContext('2d');\nlet px, py;\n\nfunction render(viji) {\n  const w = viji.width, h = viji.height;\n  const size = Math.min(w, h);\n  const kb = viji.keyboard;\n\n  if (px === undefined) { px = w / 2; py = h / 2; }\n\n  const speed = size * 0.4 * viji.deltaTime * (kb.shift ? 2.5 : 1);\n  if (kb.isPressed('w') || kb.isPressed('arrowup')) py -= speed;\n  if (kb.isPressed('s') || kb.isPressed('arrowdown')) py += speed;\n  if (kb.isPressed('a') || kb.isPressed('arrowleft')) px -= speed;\n  if (kb.isPressed('d') || kb.isPressed('arrowright')) px += speed;\n  px = Math.max(0, Math.min(w, px));\n  py = Math.max(0, Math.min(h, py));\n\n  ctx.fillStyle = 'rgba(10, 10, 30, 0.15)';\n  ctx.fillRect(0, 0, w, h);\n\n  const r = size * 0.03;\n  ctx.beginPath();\n  ctx.arc(px, py, r, 0, Math.PI * 2);\n  ctx.fillStyle = `hsl(${(viji.time * 40) % 360}, 80%, 65%)`;\n  ctx.fill();\n\n  ctx.fillStyle = 'rgba(255,255,255,0.5)';\n  ctx.font = `${size * 0.022}px monospace`;\n  ctx.textAlign = 'left';\n  const y0 = h - size * 0.12;\n  const keys = [...kb.activeKeys];\n  ctx.fillText(`active: [${keys.join(', ')}]`, size * 0.03, y0);\n  ctx.fillText(`mods: ${kb.shift ? '[Shift] ' : ''}${kb.ctrl ? '[Ctrl] ' : ''}${kb.alt ? '[Alt] ' : ''}${kb.meta ? '[Meta]' : ''}${!kb.shift && !kb.ctrl && !kb.alt && !kb.meta ? 'none' : ''}`, size * 0.03, y0 + size * 0.03);\n  ctx.fillText(`last pressed: \"${kb.lastKeyPressed}\"  released: \"${kb.lastKeyReleased}\"`, size * 0.03, y0 + size * 0.06);\n\n  ctx.fillStyle = 'rgba(255,255,255,0.3)';\n  ctx.textAlign = 'center';\n  ctx.fillText('WASD / Arrows to move \\u2022 Shift for speed', w / 2, size * 0.04);\n}\n",
+          "sceneFile": "keyboard-demo.scene.js",
+          "capabilities": {
+            "interaction": true
+          }
+        },
+        {
+          "type": "text",
+          "markdown": "## Common Patterns\n\n### WASD Movement\n\n```javascript\nlet x = 0, y = 0;\n\nfunction render(viji) {\n  const kb = viji.keyboard;\n  const speed = 200 * viji.deltaTime * (kb.shift ? 2.5 : 1);\n\n  if (kb.isPressed('w') || kb.isPressed('arrowup')) y -= speed;\n  if (kb.isPressed('s') || kb.isPressed('arrowdown')) y += speed;\n  if (kb.isPressed('a') || kb.isPressed('arrowleft')) x -= speed;\n  if (kb.isPressed('d') || kb.isPressed('arrowright')) x += speed;\n}\n```\n\n### Single-Press Toggle\n\n```javascript\nlet showGrid = false;\n\nfunction render(viji) {\n  if (viji.keyboard.wasPressed('g')) {\n    showGrid = !showGrid;\n  }\n}\n```\n\n### Key Combination\n\n```javascript\nfunction render(viji) {\n  const kb = viji.keyboard;\n  if (kb.ctrl && kb.wasPressed('z')) {\n    undo();\n  }\n}\n```\n\n## Related\n\n- [Pointer (Unified)](../pointer/) — recommended starting point for position and click interactions\n- [Mouse](../mouse/) — mouse position, buttons, and scroll wheel\n- [Touch](../touch/) — multi-touch input with pressure and velocity\n- [P5 Keyboard](/p5/keyboard) — same API in the P5 renderer\n- [Shader Keyboard Uniforms](/shader/keyboard) — GLSL uniforms for common keys"
+        }
+      ]
+    },
+    "native-touch": {
+      "id": "native-touch",
+      "title": "Touch",
+      "description": "Multi-touch API — per-finger tracking with position, pressure, radius, velocity, and lifecycle events.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Touch\n\n`viji.touches` provides full multi-touch input with per-finger position, pressure, contact radius, velocity, and lifecycle tracking.\n\n> [!TIP]\n> For single-point interactions (click, drag, follow) that should work on both touch and mouse, use [`viji.pointer`](../pointer/) instead. The touch API is for when you need multi-touch gestures, pressure sensitivity, contact radius, or per-finger velocity.\n\n## API Reference\n\n### TouchAPI (`viji.touches`)\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `points` | `TouchPoint[]` | All currently active touch points |\n| `count` | `number` | Number of active touches |\n| `started` | `TouchPoint[]` | Touches that started this frame |\n| `moved` | `TouchPoint[]` | Touches that moved this frame |\n| `ended` | `TouchPoint[]` | Touches that ended this frame |\n| `primary` | `TouchPoint \\| null` | First active touch (convenience) |\n\n### TouchPoint\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `id` | `number` | Unique touch identifier (stable across frames) |\n| `x` | `number` | Canvas-space X position (pixels) |\n| `y` | `number` | Canvas-space Y position (pixels) |\n| `pressure` | `number` | Touch pressure (0–1, device-dependent) |\n| `force` | `number` | Same as `pressure` (alias) |\n| `radius` | `number` | Contact radius — `Math.max(radiusX, radiusY)` |\n| `radiusX` | `number` | Horizontal contact radius (pixels) |\n| `radiusY` | `number` | Vertical contact radius (pixels) |\n| `rotationAngle` | `number` | Contact area rotation (radians) |\n| `isInCanvas` | `boolean` | `true` if this touch is within the canvas bounds |\n| `deltaX` | `number` | Horizontal movement since last frame (pixels) |\n| `deltaY` | `number` | Vertical movement since last frame (pixels) |\n| `velocity` | `{ x: number, y: number }` | Movement velocity (pixels/second) |\n| `isNew` | `boolean` | `true` for exactly one frame when this touch starts, then resets |\n| `isActive` | `boolean` | `true` while the touch is ongoing |\n| `isEnding` | `boolean` | `true` for exactly one frame when this touch ends, then resets |\n\n## Coordinate System\n\nTouch coordinates are in **canvas-space pixels**, with `(0, 0)` at the top-left corner — identical to [`viji.mouse`](../mouse/) coordinates. When a touch starts on the canvas and is dragged outside, the browser continues delivering events, and `isInCanvas` correctly reports `false`.\n\n## Frame Lifecycle\n\n- `started`, `moved`, and `ended` arrays are cleared at the start of each frame.\n- `points` and `count` reflect the current state after all events in the frame.\n- A touch appears in `started` on the frame it begins (with `isNew: true`), in `ended` on the frame it lifts (with `isEnding: true`).\n- `primary` is always `points[0]` or `null` when no touches are active.\n\n## Raw Device Values\n\nViji passes through raw device values without injecting defaults. If a device reports `radiusX: 0` or `force: 0`, that is what your code sees. Pressure and radius behavior varies across devices:\n\n| Property | iOS | Android | Desktop |\n|----------|-----|---------|---------|\n| `x`, `y` | Reliable | Reliable | N/A (use mouse) |\n| `radiusX`, `radiusY` | Updates on move | Updates on move | N/A |\n| `pressure` / `force` | Brief value on start, often `0` during move (no 3D Touch on newer iPhones) | Varies by device | N/A |\n| `rotationAngle` | Supported | Supported | N/A |\n| `deltaX/Y`, `velocity` | Computed in Viji — reliable on all devices | Same | N/A |\n\n## Basic Example"
+        },
+        {
+          "type": "live-example",
+          "title": "Touch — Multi-Point Tracker",
+          "sceneCode": "const ctx = viji.useContext('2d');\nconst ripples = [];\n\nfunction render(viji) {\n  const w = viji.width, h = viji.height;\n  const size = Math.min(w, h);\n  const touch = viji.touches;\n  const dt = viji.deltaTime;\n\n  for (const pt of touch.started) {\n    ripples.push({ x: pt.x, y: pt.y, r: 0, alpha: 1 });\n  }\n\n  ctx.fillStyle = 'rgba(10, 10, 30, 0.2)';\n  ctx.fillRect(0, 0, w, h);\n\n  for (let i = ripples.length - 1; i >= 0; i--) {\n    const rp = ripples[i];\n    rp.r += size * 0.3 * dt;\n    rp.alpha -= dt * 0.8;\n    if (rp.alpha <= 0) { ripples.splice(i, 1); continue; }\n    ctx.beginPath();\n    ctx.arc(rp.x, rp.y, rp.r, 0, Math.PI * 2);\n    ctx.strokeStyle = `hsla(200, 80%, 70%, ${rp.alpha})`;\n    ctx.lineWidth = 2;\n    ctx.stroke();\n  }\n\n  for (let i = 0; i < touch.count; i++) {\n    const pt = touch.points[i];\n    const r = size * 0.02 + pt.pressure * size * 0.04;\n\n    ctx.beginPath();\n    ctx.arc(pt.x, pt.y, r, 0, Math.PI * 2);\n    ctx.fillStyle = `hsla(${120 + i * 60}, 80%, 65%, 0.8)`;\n    ctx.fill();\n\n    const speed = Math.sqrt(pt.velocity.x ** 2 + pt.velocity.y ** 2);\n    if (speed > 10) {\n      const len = Math.min(speed * 0.05, size * 0.08);\n      const angle = Math.atan2(pt.velocity.y, pt.velocity.x);\n      ctx.beginPath();\n      ctx.moveTo(pt.x, pt.y);\n      ctx.lineTo(pt.x + Math.cos(angle) * len, pt.y + Math.sin(angle) * len);\n      ctx.strokeStyle = `hsla(${120 + i * 60}, 80%, 75%, 0.5)`;\n      ctx.lineWidth = 2;\n      ctx.stroke();\n    }\n\n    ctx.fillStyle = 'rgba(255,255,255,0.6)';\n    ctx.font = `${size * 0.02}px monospace`;\n    ctx.textAlign = 'center';\n    ctx.fillText(`T${pt.id}`, pt.x, pt.y - r - size * 0.01);\n  }\n\n  ctx.fillStyle = 'rgba(255,255,255,0.4)';\n  ctx.font = `${size * 0.022}px monospace`;\n  ctx.textAlign = 'left';\n  ctx.fillText(`touches: ${touch.count}  primary: ${touch.primary ? 'T' + touch.primary.id : '-'}`, size * 0.03, h - size * 0.03);\n}\n",
+          "sceneFile": "touch-demo.scene.js",
+          "capabilities": {
+            "interaction": true
+          }
+        },
+        {
+          "type": "text",
+          "markdown": "## Common Patterns\n\n### Iterate All Touches\n\n```javascript\nfunction render(viji) {\n  for (const pt of viji.touches.points) {\n    drawCircle(pt.x, pt.y, 10 + pt.pressure * 30);\n  }\n}\n```\n\n### Detect New Touches\n\n```javascript\nfunction render(viji) {\n  for (const pt of viji.touches.started) {\n    spawnRipple(pt.x, pt.y);\n  }\n}\n```\n\n### Two-Finger Pinch Distance\n\n```javascript\nfunction render(viji) {\n  if (viji.touches.count >= 2) {\n    const a = viji.touches.points[0];\n    const b = viji.touches.points[1];\n    const dist = Math.sqrt((a.x - b.x) ** 2 + (a.y - b.y) ** 2);\n    applyZoom(dist);\n  }\n}\n```\n\n### Velocity-Based Effects\n\n```javascript\nfunction render(viji) {\n  const p = viji.touches.primary;\n  if (p) {\n    const speed = Math.sqrt(p.velocity.x ** 2 + p.velocity.y ** 2);\n    drawTrail(p.x, p.y, speed);\n  }\n}\n```\n\n## Related\n\n- [Pointer (Unified)](../pointer/) — recommended starting point for single-point cross-device interactions\n- [Mouse](../mouse/) — mouse position, buttons, and scroll wheel\n- [Keyboard](../keyboard/) — key state queries and modifier tracking\n- [P5 Touch](/p5/touch) — same API in the P5 renderer\n- [Shader Touch Uniforms](/shader/touch) — GLSL uniforms for touch positions"
+        }
+      ]
+    },
+    "native-sensors": {
+      "id": "native-sensors",
+      "title": "Device Sensors",
+      "description": "Access accelerometer, gyroscope, and orientation data from the device running the scene.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Device Sensors\n\n`viji.device` provides real-time accelerometer, gyroscope, and orientation data from the device's hardware sensors (phone, tablet, or laptop).\n\n> [!NOTE]\n> Device sensors require the host to enable `allowDeviceInteraction: true`. If not enabled, `viji.device.motion` and `viji.device.orientation` remain `null`.\n\n## API Reference\n\n### DeviceSensorState (`viji.device`)\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `motion` | `DeviceMotionData \\| null` | Accelerometer and gyroscope data. `null` when unavailable. |\n| `orientation` | `DeviceOrientationData \\| null` | Device spatial orientation. `null` when unavailable. |\n\n### DeviceMotionData (`viji.device.motion`)\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `acceleration` | `{ x, y, z } \\| null` | Linear acceleration without gravity (m/s²). Each axis is `number \\| null`. |\n| `accelerationIncludingGravity` | `{ x, y, z } \\| null` | Acceleration including gravity (m/s²). Each axis is `number \\| null`. |\n| `rotationRate` | `{ alpha, beta, gamma } \\| null` | Gyroscope rotation rate (degrees/second). Each axis is `number \\| null`. |\n| `interval` | `number` | Interval between sensor updates (milliseconds). |\n\n### DeviceOrientationData (`viji.device.orientation`)\n\n| Property | Type | Range | Description |\n|----------|------|-------|-------------|\n| `alpha` | `number \\| null` | 0–360 | Rotation around Z-axis (compass heading) |\n| `beta` | `number \\| null` | -180 to 180 | Rotation around X-axis (front-to-back tilt) |\n| `gamma` | `number \\| null` | -90 to 90 | Rotation around Y-axis (left-to-right tilt) |\n| `absolute` | `boolean` | — | `true` if using magnetometer for absolute orientation |\n\n## Default Values\n\nWhen device sensors are unavailable:\n- `viji.device.motion` → `null`\n- `viji.device.orientation` → `null`\n\nIndividual axis values within a non-null motion or orientation object can also be `null` if the hardware doesn't provide that specific measurement.\n\n## Guard Patterns\n\nAlways check for `null` before accessing sensor data:\n\n```javascript\nfunction render(viji) {\n  const motion = viji.device.motion;\n  if (motion && motion.acceleration) {\n    const ax = motion.acceleration.x ?? 0;\n    const ay = motion.acceleration.y ?? 0;\n    const az = motion.acceleration.z ?? 0;\n    // Use acceleration values\n  }\n\n  const orient = viji.device.orientation;\n  if (orient) {\n    const tiltX = orient.beta ?? 0;\n    const tiltY = orient.gamma ?? 0;\n    // Use orientation values\n  }\n}\n```\n\n## Basic Example"
+        },
+        {
+          "type": "live-example",
+          "title": "Device Sensors — Tilt Visualization",
+          "sceneCode": "function render(viji) {\n  const ctx = viji.canvas.getContext('2d');\n  const w = viji.canvas.width;\n  const h = viji.canvas.height;\n\n  ctx.fillStyle = '#0a0a1a';\n  ctx.fillRect(0, 0, w, h);\n\n  const orient = viji.device.orientation;\n  const motion = viji.device.motion;\n\n  const beta = orient?.beta ?? 0;\n  const gamma = orient?.gamma ?? 0;\n  const alpha = orient?.alpha ?? 0;\n\n  const normX = gamma / 90;\n  const normY = beta / 180;\n\n  const cx = w / 2 + normX * (w * 0.35);\n  const cy = h / 2 + normY * (h * 0.35);\n\n  const accel = motion?.accelerationIncludingGravity;\n  const ax = accel?.x ?? 0;\n  const ay = accel?.y ?? 0;\n  const magnitude = Math.sqrt(ax * ax + ay * ay);\n  const radius = 20 + Math.min(magnitude, 15) * 3;\n\n  const hue = (alpha % 360);\n  ctx.fillStyle = `hsl(${hue}, 70%, 60%)`;\n  ctx.beginPath();\n  ctx.arc(cx, cy, radius, 0, Math.PI * 2);\n  ctx.fill();\n\n  ctx.strokeStyle = 'rgba(255, 255, 255, 0.15)';\n  ctx.lineWidth = 1;\n  ctx.beginPath();\n  ctx.moveTo(w / 2, 0);\n  ctx.lineTo(w / 2, h);\n  ctx.moveTo(0, h / 2);\n  ctx.lineTo(w, h / 2);\n  ctx.stroke();\n\n  ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';\n  ctx.font = '12px monospace';\n  ctx.textAlign = 'left';\n  ctx.fillText(`beta: ${beta.toFixed(1)}°  gamma: ${gamma.toFixed(1)}°`, 10, 20);\n  ctx.fillText(`alpha: ${alpha.toFixed(1)}°`, 10, 36);\n  ctx.fillText(`accel: ${magnitude.toFixed(2)} m/s²`, 10, 52);\n}\n",
+          "sceneFile": "sensors-demo.scene.js",
+          "capabilities": {
+            "interaction": true
+          }
+        },
+        {
+          "type": "text",
+          "markdown": "## Common Patterns\n\n### Tilt-Reactive Position\n\n```javascript\nfunction render(viji) {\n  const ctx = viji.canvas.getContext('2d');\n  const w = viji.canvas.width;\n  const h = viji.canvas.height;\n\n  const orient = viji.device.orientation;\n  const tiltX = orient?.gamma ?? 0; // -90 to 90\n  const tiltY = orient?.beta ?? 0;  // -180 to 180\n\n  const x = w / 2 + (tiltX / 90) * (w / 2);\n  const y = h / 2 + (tiltY / 180) * (h / 2);\n\n  ctx.clearRect(0, 0, w, h);\n  ctx.beginPath();\n  ctx.arc(x, y, 30, 0, Math.PI * 2);\n  ctx.fill();\n}\n```\n\n### Shake Detection\n\n```javascript\nlet lastAccel = 0;\n\nfunction render(viji) {\n  const accel = viji.device.motion?.acceleration;\n  if (accel) {\n    const magnitude = Math.sqrt(\n      (accel.x ?? 0) ** 2 +\n      (accel.y ?? 0) ** 2 +\n      (accel.z ?? 0) ** 2\n    );\n    if (magnitude > 15 && magnitude - lastAccel > 5) {\n      triggerShakeEffect();\n    }\n    lastAccel = magnitude;\n  }\n}\n```\n\n### Compass Heading\n\n```javascript\nfunction render(viji) {\n  const heading = viji.device.orientation?.alpha ?? 0;\n  const radians = (heading * Math.PI) / 180;\n  // Rotate a compass needle by `radians`\n}\n```\n\n## Related\n\n- [Pointer](../pointer/) — unified click/drag input\n- [Touch](../touch/) — multi-touch with pressure and radius\n- [External Device Sensors](../external-devices/sensors/) — sensor data from connected external devices\n- [P5 Device Sensors](/p5/sensors) — same API in the P5 renderer\n- [Shader Sensor Uniforms](/shader/sensors) — GLSL uniforms for device sensors"
+        }
+      ]
+    },
+    "native-ext-overview": {
+      "id": "native-ext-overview",
+      "title": "External Devices — Overview",
+      "description": "Access connected external devices — phones, tablets, and other hardware linked to your installation.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# External Devices\n\n`viji.devices` provides access to externally connected devices (phones, tablets, or other hardware) linked to your installation through the host platform.\n\n> [!NOTE]\n> External devices are managed entirely by the host application. Artists cannot control device connections — you only read the current state each render cycle. Devices appear and disappear from the array dynamically as they connect and disconnect.\n\n## API Reference\n\n### DeviceState (`viji.devices[i]`)\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `id` | `string` | Unique device identifier (assigned by host) |\n| `name` | `string` | User-friendly device name (assigned by host) |\n| `motion` | `DeviceMotionData \\| null` | Device accelerometer and gyroscope data |\n| `orientation` | `DeviceOrientationData \\| null` | Device spatial orientation |\n| `video` | `VideoAPI \\| null` | Device camera video feed, or `null` if no camera connected |\n\n### Device Limits\n\nUp to **8 external devices** can be connected simultaneously. The `viji.devices` array contains only currently connected devices.\n\n## Default Values\n\n- `viji.devices` → `[]` (empty array) when no devices are connected\n- `device.motion` → `null` when the device has no sensor data\n- `device.orientation` → `null` when the device has no orientation data\n- `device.video` → `null` when the device has no camera stream\n\n## Guard Patterns\n\nAlways check array length and null properties:\n\n```javascript\nfunction render(viji) {\n  if (viji.devices.length === 0) return;\n\n  for (const device of viji.devices) {\n    // Check for video\n    if (device.video?.isConnected) {\n      // Draw device camera feed\n    }\n\n    // Check for sensors\n    if (device.motion?.acceleration) {\n      // Use device acceleration\n    }\n  }\n}\n```\n\n## Basic Example"
+        },
+        {
+          "type": "live-example",
+          "title": "External Devices — Connected Devices",
+          "sceneCode": "function render(viji) {\n  const ctx = viji.canvas.getContext('2d');\n  const w = viji.canvas.width;\n  const h = viji.canvas.height;\n\n  ctx.fillStyle = '#0a0a1a';\n  ctx.fillRect(0, 0, w, h);\n\n  const devices = viji.devices;\n  const count = devices.length;\n\n  ctx.fillStyle = '#fff';\n  ctx.font = 'bold 20px sans-serif';\n  ctx.textAlign = 'center';\n  ctx.fillText(\n    `${count} device${count !== 1 ? 's' : ''} connected`,\n    w / 2, 40\n  );\n\n  if (count === 0) {\n    ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';\n    ctx.font = '14px sans-serif';\n    ctx.fillText('Waiting for external devices...', w / 2, h / 2);\n    return;\n  }\n\n  const cardW = Math.min(200, (w - 40) / Math.min(count, 4));\n  const startX = (w - cardW * Math.min(count, 4)) / 2;\n\n  devices.forEach((device, i) => {\n    const col = i % 4;\n    const row = Math.floor(i / 4);\n    const x = startX + col * cardW;\n    const y = 70 + row * 120;\n\n    ctx.fillStyle = 'rgba(255, 255, 255, 0.08)';\n    ctx.beginPath();\n    ctx.roundRect(x + 4, y, cardW - 8, 100, 8);\n    ctx.fill();\n\n    ctx.fillStyle = '#fff';\n    ctx.font = 'bold 13px sans-serif';\n    ctx.textAlign = 'center';\n    ctx.fillText(device.name || device.id, x + cardW / 2, y + 25);\n\n    ctx.font = '11px monospace';\n    ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';\n\n    const hasVideo = device.video?.isConnected ? '● Video' : '○ No video';\n    const hasSensors = device.motion ? '● Sensors' : '○ No sensors';\n\n    ctx.fillText(hasVideo, x + cardW / 2, y + 55);\n    ctx.fillText(hasSensors, x + cardW / 2, y + 72);\n  });\n}\n",
+          "sceneFile": "overview-demo.scene.js",
+          "capabilities": {
+            "interaction": true
+          }
+        },
+        {
+          "type": "text",
+          "markdown": "## Common Patterns\n\n### Display Device Count\n\n```javascript\nfunction render(viji) {\n  const ctx = viji.canvas.getContext('2d');\n  const count = viji.devices.length;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, viji.canvas.width, viji.canvas.height);\n\n  ctx.fillStyle = '#fff';\n  ctx.font = '24px sans-serif';\n  ctx.textAlign = 'center';\n  ctx.fillText(\n    `${count} device${count !== 1 ? 's' : ''} connected`,\n    viji.canvas.width / 2,\n    viji.canvas.height / 2\n  );\n}\n```\n\n### Find Device by Name\n\n```javascript\nfunction render(viji) {\n  const phone = viji.devices.find(d => d.name.includes('Phone'));\n  if (phone) {\n    // Use phone-specific data\n  }\n}\n```\n\n### Iterate All Devices\n\n```javascript\nfunction render(viji) {\n  viji.devices.forEach((device, index) => {\n    const hasVideo = device.video?.isConnected ?? false;\n    const hasSensors = device.motion !== null;\n    // Render device status at position based on index\n  });\n}\n```\n\n## What's Available on Each Device\n\n| Feature | Access | Notes |\n|---------|--------|-------|\n| **Identity** | `device.id`, `device.name` | Always available |\n| **Sensors** | `device.motion`, `device.orientation` | See [Device Sensors](sensors/) |\n| **Video** | `device.video` | See [Device Video](video/) |\n\n> [!WARNING]\n> Device video does **not** support Computer Vision (CV) features. CV processing (face detection, hand tracking, etc.) is only available on the main video stream (`viji.video`). The `device.video` object provides video frames only.\n\n## Related\n\n- [Device Video](video/) — accessing camera feeds from connected devices\n- [Device Sensors](sensors/) — accelerometer and orientation from connected devices\n- [Device Sensors (Internal)](../sensors/) — sensors from the device running the scene\n- [P5 External Devices](/p5/external-devices) — same API in the P5 renderer\n- [Shader External Device Uniforms](/shader/external-devices) — GLSL uniforms for external devices"
+        }
+      ]
+    },
+    "native-ext-video": {
+      "id": "native-ext-video",
+      "title": "Device Video",
+      "description": "Access camera feeds from externally connected devices — draw frames, check resolution, and read pixel data.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Device Video\n\nEach external device in `viji.devices` can provide a camera video feed through `device.video`. This gives you access to live video frames from connected phones, tablets, or other camera-equipped hardware.\n\n> [!WARNING]\n> Device video does **not** support Computer Vision (CV) features. Face detection, hand tracking, pose detection, and body segmentation are only available on the main video stream (`viji.video`). Device video provides raw video frames only.\n\n## API Reference\n\n### VideoAPI (`device.video`)\n\n`device.video` is `null` when the device has no camera stream connected by the host. When available, it provides:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `isConnected` | `boolean` | `true` when the device camera stream is actively providing frames |\n| `currentFrame` | `OffscreenCanvas \\| null` | Current video frame, drawable with `ctx.drawImage()` |\n| `frameWidth` | `number` | Video frame width in pixels (0 when not connected) |\n| `frameHeight` | `number` | Video frame height in pixels (0 when not connected) |\n| `frameRate` | `number` | Video frame rate in Hz (0 when not connected) |\n| `getFrameData()` | `ImageData \\| null` | Raw RGBA pixel data for per-pixel analysis |\n\n## Default Values\n\n- `device.video` → `null` when the device has no camera stream\n- `device.video.currentFrame` → `null` when video is not connected\n- `device.video.frameWidth` / `frameHeight` → `0` when not connected\n- `device.video.frameRate` → `0` when not connected\n- `device.video.getFrameData()` → `null` when not connected\n\n## Guard Pattern\n\nAlways check both `device.video` existence and connection status:\n\n```javascript\nfunction render(viji) {\n  for (const device of viji.devices) {\n    if (device.video?.isConnected && device.video.currentFrame) {\n      ctx.drawImage(device.video.currentFrame, x, y, w, h);\n    }\n  }\n}\n```\n\n## Basic Example"
+        },
+        {
+          "type": "live-example",
+          "title": "Device Video — Camera Grid",
+          "sceneCode": "function render(viji) {\n  const ctx = viji.canvas.getContext('2d');\n  const w = viji.canvas.width;\n  const h = viji.canvas.height;\n\n  ctx.fillStyle = '#0a0a1a';\n  ctx.fillRect(0, 0, w, h);\n\n  const cameras = viji.devices.filter(\n    d => d.video?.isConnected && d.video.currentFrame\n  );\n\n  if (cameras.length === 0) {\n    ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';\n    ctx.font = '14px sans-serif';\n    ctx.textAlign = 'center';\n    ctx.fillText('No device cameras connected', w / 2, h / 2);\n    return;\n  }\n\n  const cols = Math.ceil(Math.sqrt(cameras.length));\n  const rows = Math.ceil(cameras.length / cols);\n  const cellW = w / cols;\n  const cellH = h / rows;\n  const pad = 4;\n\n  cameras.forEach((device, i) => {\n    const col = i % cols;\n    const row = Math.floor(i / cols);\n    const x = col * cellW + pad;\n    const y = row * cellH + pad;\n    const cw = cellW - pad * 2;\n    const ch = cellH - pad * 2;\n\n    ctx.drawImage(device.video.currentFrame, x, y, cw, ch);\n\n    ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';\n    ctx.fillRect(x, y + ch - 24, cw, 24);\n    ctx.fillStyle = '#fff';\n    ctx.font = '11px sans-serif';\n    ctx.textAlign = 'left';\n    ctx.fillText(\n      `${device.name} — ${device.video.frameWidth}×${device.video.frameHeight}`,\n      x + 6, y + ch - 8\n    );\n  });\n}\n",
+          "sceneFile": "video-demo.scene.js",
+          "capabilities": {
+            "interaction": true
+          }
+        },
+        {
+          "type": "text",
+          "markdown": "## Common Patterns\n\n### Draw All Device Cameras in a Grid\n\n```javascript\nfunction render(viji) {\n  const ctx = viji.canvas.getContext('2d');\n  const w = viji.canvas.width;\n  const h = viji.canvas.height;\n\n  ctx.fillStyle = '#000';\n  ctx.fillRect(0, 0, w, h);\n\n  const cameras = viji.devices.filter(\n    d => d.video?.isConnected && d.video.currentFrame\n  );\n  if (cameras.length === 0) return;\n\n  const cols = Math.ceil(Math.sqrt(cameras.length));\n  const rows = Math.ceil(cameras.length / cols);\n  const cellW = w / cols;\n  const cellH = h / rows;\n\n  cameras.forEach((device, i) => {\n    const col = i % cols;\n    const row = Math.floor(i / cols);\n    ctx.drawImage(\n      device.video.currentFrame,\n      col * cellW, row * cellH, cellW, cellH\n    );\n  });\n}\n```\n\n### Picture-in-Picture from a Device Camera\n\n```javascript\nfunction render(viji) {\n  const ctx = viji.canvas.getContext('2d');\n  const w = viji.canvas.width;\n  const h = viji.canvas.height;\n\n  // Main scene drawing\n  ctx.fillStyle = '#1a1a2e';\n  ctx.fillRect(0, 0, w, h);\n\n  // Overlay first device camera as PiP\n  const device = viji.devices[0];\n  if (device?.video?.isConnected && device.video.currentFrame) {\n    const pipW = w * 0.3;\n    const pipH = pipW * (device.video.frameHeight / device.video.frameWidth);\n    ctx.drawImage(\n      device.video.currentFrame,\n      w - pipW - 10, 10, pipW, pipH\n    );\n\n    ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';\n    ctx.lineWidth = 2;\n    ctx.strokeRect(w - pipW - 10, 10, pipW, pipH);\n  }\n}\n```\n\n### Read Pixel Data from a Device Camera\n\n```javascript\nfunction render(viji) {\n  const device = viji.devices[0];\n  if (!device?.video?.isConnected) return;\n\n  const imageData = device.video.getFrameData();\n  if (!imageData) return;\n\n  const pixels = imageData.data; // Uint8ClampedArray — RGBA\n  let totalR = 0, totalG = 0, totalB = 0;\n  const pixelCount = imageData.width * imageData.height;\n\n  for (let i = 0; i < pixels.length; i += 4) {\n    totalR += pixels[i];\n    totalG += pixels[i + 1];\n    totalB += pixels[i + 2];\n  }\n\n  const avgR = totalR / pixelCount;\n  const avgG = totalG / pixelCount;\n  const avgB = totalB / pixelCount;\n  // Use average color for background or effects\n}\n```\n\n## Related\n\n- [External Devices — Overview](../) — device identity, connection lifecycle, and guard patterns\n- [External Device Sensors](../sensors/) — accelerometer and orientation from connected devices\n- [Video & CV — Video Basics](../../video/basics/) — main camera video API (with CV support)\n- [P5 Device Video](/p5/external-devices/video) — same API in the P5 renderer\n- [Shader Device Video Textures](/shader/external-devices/video) — GLSL uniforms for device camera textures"
+        }
+      ]
+    },
+    "native-ext-sensors": {
+      "id": "native-ext-sensors",
+      "title": "External Device Sensors",
+      "description": "Access accelerometer, gyroscope, and orientation data from externally connected devices.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# External Device Sensors\n\nEach external device in `viji.devices` can provide sensor data through `device.motion` and `device.orientation`. These use the same `DeviceMotionData` and `DeviceOrientationData` structures as the [internal device sensors](../../sensors/).\n\n## API Reference\n\n### DeviceMotionData (`device.motion`)\n\n`device.motion` is `null` when the device has no sensor data available.\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `acceleration` | `{ x, y, z } \\| null` | Linear acceleration without gravity (m/s²). Each axis is `number \\| null`. |\n| `accelerationIncludingGravity` | `{ x, y, z } \\| null` | Acceleration including gravity (m/s²). Each axis is `number \\| null`. |\n| `rotationRate` | `{ alpha, beta, gamma } \\| null` | Gyroscope rotation rate (degrees/second). Each axis is `number \\| null`. |\n| `interval` | `number` | Interval between sensor updates (milliseconds). |\n\n### DeviceOrientationData (`device.orientation`)\n\n`device.orientation` is `null` when the device has no orientation data available.\n\n| Property | Type | Range | Description |\n|----------|------|-------|-------------|\n| `alpha` | `number \\| null` | 0–360 | Rotation around Z-axis (compass heading) |\n| `beta` | `number \\| null` | -180 to 180 | Rotation around X-axis (front-to-back tilt) |\n| `gamma` | `number \\| null` | -90 to 90 | Rotation around Y-axis (left-to-right tilt) |\n| `absolute` | `boolean` | — | `true` if using magnetometer for absolute orientation |\n\n## Default Values\n\n- `device.motion` → `null` when the device has no sensor data\n- `device.orientation` → `null` when the device has no orientation data\n- Individual axis values within non-null objects can also be `null`\n\n## Guard Pattern\n\nAlways check for `null` at each level:\n\n```javascript\nfunction render(viji) {\n  for (const device of viji.devices) {\n    if (device.motion?.acceleration) {\n      const ax = device.motion.acceleration.x ?? 0;\n      const ay = device.motion.acceleration.y ?? 0;\n      // Use acceleration values\n    }\n\n    if (device.orientation) {\n      const tilt = device.orientation.gamma ?? 0;\n      // Use orientation values\n    }\n  }\n}\n```\n\n## Basic Example"
+        },
+        {
+          "type": "live-example",
+          "title": "External Device Sensors — Tilt Bars",
+          "sceneCode": "function render(viji) {\n  const ctx = viji.canvas.getContext('2d');\n  const w = viji.canvas.width;\n  const h = viji.canvas.height;\n\n  ctx.fillStyle = '#0a0a1a';\n  ctx.fillRect(0, 0, w, h);\n\n  const devices = viji.devices;\n\n  if (devices.length === 0) {\n    ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';\n    ctx.font = '14px sans-serif';\n    ctx.textAlign = 'center';\n    ctx.fillText('No external devices connected', w / 2, h / 2);\n    return;\n  }\n\n  const barH = 16;\n  const barW = w * 0.5;\n  const startX = w * 0.35;\n\n  ctx.fillStyle = '#fff';\n  ctx.font = 'bold 14px sans-serif';\n  ctx.textAlign = 'center';\n  ctx.fillText('External Device Sensors', w / 2, 30);\n\n  devices.forEach((device, di) => {\n    const baseY = 60 + di * 140;\n\n    ctx.fillStyle = '#fff';\n    ctx.font = 'bold 12px sans-serif';\n    ctx.textAlign = 'left';\n    ctx.fillText(device.name || device.id, 10, baseY);\n\n    const orient = device.orientation;\n    const axes = [\n      { label: 'alpha', value: orient?.alpha ?? 0, max: 360 },\n      { label: 'beta', value: orient?.beta ?? 0, max: 180 },\n      { label: 'gamma', value: orient?.gamma ?? 0, max: 90 }\n    ];\n\n    axes.forEach((axis, ai) => {\n      const y = baseY + 18 + ai * (barH + 8);\n      const norm = axis.value / axis.max;\n\n      ctx.fillStyle = 'rgba(255, 255, 255, 0.1)';\n      ctx.fillRect(startX, y, barW, barH);\n\n      const fillW = Math.abs(norm) * (barW / 2);\n      const fillX = norm >= 0 ? startX + barW / 2 : startX + barW / 2 - fillW;\n      ctx.fillStyle = norm >= 0 ? '#4af' : '#f64';\n      ctx.fillRect(fillX, y, fillW, barH);\n\n      ctx.fillStyle = 'rgba(255, 255, 255, 0.6)';\n      ctx.font = '11px monospace';\n      ctx.textAlign = 'right';\n      ctx.fillText(`${axis.label}: ${axis.value.toFixed(1)}°`, startX - 8, y + 12);\n    });\n\n    const accel = device.motion?.accelerationIncludingGravity;\n    if (accel) {\n      const y = baseY + 18 + 3 * (barH + 8);\n      const mag = Math.sqrt(\n        (accel.x ?? 0) ** 2 + (accel.y ?? 0) ** 2 + (accel.z ?? 0) ** 2\n      );\n      ctx.fillStyle = 'rgba(255, 255, 255, 0.6)';\n      ctx.font = '11px monospace';\n      ctx.textAlign = 'right';\n      ctx.fillText(`accel: ${mag.toFixed(1)} m/s²`, startX - 8, y + 12);\n\n      ctx.fillStyle = 'rgba(255, 255, 255, 0.1)';\n      ctx.fillRect(startX, y, barW, barH);\n      const normMag = Math.min(mag / 20, 1);\n      ctx.fillStyle = '#6f4';\n      ctx.fillRect(startX, y, normMag * barW, barH);\n    }\n  });\n}\n",
+          "sceneFile": "sensors-demo.scene.js",
+          "capabilities": {
+            "interaction": true
+          }
+        },
+        {
+          "type": "text",
+          "markdown": "## Common Patterns\n\n### Tilt-Reactive Effect from an External Device\n\n```javascript\nfunction render(viji) {\n  const ctx = viji.canvas.getContext('2d');\n  const w = viji.canvas.width;\n  const h = viji.canvas.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  const device = viji.devices[0];\n  if (!device?.orientation) return;\n\n  const tiltX = device.orientation.gamma ?? 0;\n  const tiltY = device.orientation.beta ?? 0;\n\n  const x = w / 2 + (tiltX / 90) * (w * 0.4);\n  const y = h / 2 + (tiltY / 180) * (h * 0.4);\n\n  ctx.fillStyle = '#4af';\n  ctx.beginPath();\n  ctx.arc(x, y, 25, 0, Math.PI * 2);\n  ctx.fill();\n}\n```\n\n### Compare Internal vs External Device Tilt\n\n```javascript\nfunction render(viji) {\n  const ctx = viji.canvas.getContext('2d');\n  const w = viji.canvas.width;\n  const h = viji.canvas.height;\n\n  ctx.fillStyle = '#111';\n  ctx.fillRect(0, 0, w, h);\n\n  // Internal device tilt\n  const selfTilt = viji.device.orientation?.gamma ?? 0;\n  ctx.fillStyle = '#f44';\n  ctx.beginPath();\n  ctx.arc(w * 0.3, h / 2 + (selfTilt / 90) * (h * 0.4), 20, 0, Math.PI * 2);\n  ctx.fill();\n\n  // External device tilt\n  const extDevice = viji.devices[0];\n  const extTilt = extDevice?.orientation?.gamma ?? 0;\n  ctx.fillStyle = '#4af';\n  ctx.beginPath();\n  ctx.arc(w * 0.7, h / 2 + (extTilt / 90) * (h * 0.4), 20, 0, Math.PI * 2);\n  ctx.fill();\n\n  ctx.fillStyle = '#fff';\n  ctx.font = '12px sans-serif';\n  ctx.textAlign = 'center';\n  ctx.fillText('This device', w * 0.3, h - 20);\n  ctx.fillText('External device', w * 0.7, h - 20);\n}\n```\n\n### Shake Detection from an External Device\n\n```javascript\nlet prevMag = 0;\n\nfunction render(viji) {\n  const device = viji.devices[0];\n  const accel = device?.motion?.acceleration;\n  if (!accel) return;\n\n  const mag = Math.sqrt(\n    (accel.x ?? 0) ** 2 +\n    (accel.y ?? 0) ** 2 +\n    (accel.z ?? 0) ** 2\n  );\n\n  if (mag > 15 && mag - prevMag > 5) {\n    triggerShakeEffect();\n  }\n  prevMag = mag;\n}\n```\n\n## Related\n\n- [External Devices — Overview](../) — device identity, connection lifecycle, and guard patterns\n- [Device Video](../video/) — camera feeds from connected devices\n- [Device Sensors (Internal)](../../sensors/) — sensors from the device running the scene\n- [P5 External Device Sensors](/p5/external-devices/sensors) — same API in the P5 renderer\n- [Shader External Device Sensor Uniforms](/shader/external-devices/sensors) — GLSL uniforms for external device sensors"
+        }
+      ]
+    },
+    "p5-quickstart": {
+      "id": "p5-quickstart",
+      "title": "p5-quickstart",
+      "description": "Build your first Viji scene using the familiar P5.js creative coding API.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# P5.js Quick Start\r\n\r\nThe P5.js renderer gives you the familiar Processing/P5.js drawing API. Viji loads P5.js automatically — no installation needed.\r\n\r\n> [!IMPORTANT]\r\n> P5 and shader scenes must declare their renderer type as the first comment:\r\n> ```\r\n> // @renderer p5\r\n> ```\r\n> Without this directive, the scene defaults to the native renderer.\r\n\r\n## Your First Scene"
+        },
+        {
+          "type": "live-example",
+          "title": "P5 — Rainbow Trail",
+          "sceneCode": "// @renderer p5\r\n\r\nconst trailLength = viji.slider(40, { min: 5, max: 100, step: 1, label: 'Trail Length' });\r\nconst hueSpeed = viji.slider(30, { min: 5, max: 100, label: 'Hue Speed' });\r\n\r\nfunction setup(viji, p5) {\r\n  p5.colorMode(p5.HSB, 360, 100, 100, 100);\r\n}\r\n\r\nfunction render(viji, p5) {\r\n  p5.background(0, 0, 10, 15);\r\n\r\n  for (let i = 0; i < trailLength.value; i++) {\r\n    const t = viji.time - i * 0.02;\r\n    const x = viji.width / 2 + p5.cos(t * 1.5) * viji.width * 0.3;\r\n    const y = viji.height / 2 + p5.sin(t * 2.0) * viji.height * 0.25;\r\n    const hue = (viji.time * hueSpeed.value + i * 3) % 360;\r\n    const size = p5.map(i, 0, trailLength.value, viji.width * 0.04, viji.width * 0.005);\r\n\r\n    p5.noStroke();\r\n    p5.fill(hue, 80, 100, p5.map(i, 0, trailLength.value, 100, 0));\r\n    p5.circle(x, y, size);\r\n  }\r\n}\r\n",
+          "sceneFile": "quickstart-p5.scene.js"
+        },
+        {
+          "type": "text",
+          "markdown": "### What's Happening\r\n\r\n**Top level — runs once:**\r\n\r\n- `// @renderer p5` tells Viji to use the P5 renderer.\r\n- `viji.slider()` creates UI parameters — declared at the top level, read via `.value` in `render()`.\r\n\r\n**`setup(viji, p5)` — optional, runs once:**\r\n\r\n- Use for one-time configuration like `p5.colorMode()`. If you don't need it, omit it entirely.\r\n\r\n**`render(viji, p5)` — called every frame:**\r\n\r\n- `p5` is a full P5.js instance in **instance mode** — all P5 functions require the `p5.` prefix.\r\n- `viji.width` and `viji.height` give the canvas size — use them for resolution-agnostic positioning.\r\n- `viji.time` is elapsed seconds — use it for animation.\r\n\r\n> [!NOTE]\r\n> Parameters must be defined at the top level of your scene, not inside `setup()` or `render()`. They are registered once and sent to the host before either function runs. Defining them inside `setup()` would register the parameter too late — no UI control would appear. Defining them inside `render()` would re-register the parameter every frame, resetting its value to the default.\r\n\r\n## Scene Structure\r\n\r\n```javascript\r\n// @renderer p5\r\n\r\n// 1. Top level — parameters and state\r\nconst size = viji.slider(50, { min: 10, max: 200, label: 'Size' });\r\n\r\n// 2. setup() — optional one-time config\r\nfunction setup(viji, p5) {\r\n  p5.colorMode(p5.HSB);\r\n}\r\n\r\n// 3. render() — called every frame\r\nfunction render(viji, p5) {\r\n  p5.background(0);\r\n  p5.circle(viji.width / 2, viji.height / 2, size.value);\r\n}\r\n```\r\n\r\n- **`render(viji, p5)` is required.** It replaces P5's `draw()`.\r\n- **`setup(viji, p5)` is optional.** Use it for one-time configuration.\r\n- **No `createCanvas()`.** The canvas is created and managed by Viji.\r\n- **No `preload()`.** Use `viji.image()` parameters or `fetch()` in `setup()`.\r\n\r\n## Instance Mode\r\n\r\n> [!WARNING]\r\n> Viji uses P5 in **instance mode**. All P5 functions require the `p5.` prefix:\r\n> ```javascript\r\n> // Correct\r\n> p5.background(0);\r\n> p5.circle(viji.width / 2, viji.height / 2, 100);\r\n>\r\n> // Wrong — will throw ReferenceError\r\n> background(0);\r\n> circle(width / 2, height / 2, 100);\r\n> ```\r\n\r\n## Input and Interaction\r\n\r\nP5's built-in input globals (`mouseX`, `mouseY`, `keyIsPressed`, etc.) are not updated in the worker environment. Use the Viji API instead. For most interactions, [`viji.pointer`](/p5/pointer) works across both mouse and touch:\r\n\r\n```javascript\r\nfunction render(viji, p5) {\r\n  if (viji.pointer.isDown) {\r\n    p5.circle(viji.pointer.x, viji.pointer.y, 20);\r\n  }\r\n}\r\n```\r\n\r\nFor mouse-specific features (right-click, wheel) use [`viji.mouse`](/p5/mouse). For multi-touch use [`viji.touches`](/p5/touch). For keyboard use [`viji.keyboard`](/p5/keyboard).\r\n\r\n## Essential Patterns\r\n\r\n> [!NOTE]\r\n> Always use `viji.width` and `viji.height` for positioning and sizing, and `viji.deltaTime` for frame-rate-independent animation. Never hardcode pixel values or assume a specific frame rate.\r\n\r\n> [!WARNING]\r\n> Scenes run in a Web Worker — there is no `window`, `document`, `Image()`, `localStorage`, or any DOM API. All inputs (audio, video, images) are provided through the Viji API. Note: `fetch()` IS available and can be used to load external data (JSON, etc.) from CDNs.\r\n\r\n> [!TIP]\r\n> Avoid allocating objects, arrays, or strings inside `render()`. Pre-allocate at the top level and reuse them.\r\n\r\n## Converting Existing Sketches\r\n\r\nIf you have existing P5.js sketches, see [Converting P5 Sketches](/p5/converting-sketches) for a step-by-step migration guide. Key differences: `draw()` → `render()`, instance mode, no `createCanvas()`, Viji APIs for input.\r\n\r\n## Next Steps\r\n\r\n- [Scene Structure](/p5/scene-structure) — `setup()`, `render()`, and lifecycle details\r\n- [Drawing with P5](/p5/drawing) — P5 drawing functions in Viji\r\n- [Converting P5 Sketches](/p5/converting-sketches) — migrate existing sketches\r\n- [Parameters](/p5/parameters) — sliders, colors, toggles, and more\r\n- [Audio](/p5/audio) — react to music and sound\r\n- [API Reference](/p5/api-reference) — full list of everything available\r\n- [Best Practices](/getting-started/best-practices) — essential patterns for all renderers"
+        }
+      ]
+    },
+    "p5-api-reference": {
+      "id": "p5-api-reference",
+      "title": "API Reference",
+      "description": "Complete reference of every property and method available on the viji and p5 objects in P5 renderer scenes.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# API Reference\n\nThis page lists every property and method available on the `viji` object passed to your P5 scene functions. The `viji` API is identical to the [Native renderer](/native/api-reference) — the difference is that P5 scenes also receive a `p5` instance as the second argument.\n\nNew to Viji P5? Start with the [Quick Start](/p5/quickstart) instead.\n\n## Entry Points\n\n```javascript\n// @renderer p5\n\nfunction setup(viji, p5) {\n  // Called once when the scene starts (optional)\n}\n\nfunction render(viji, p5) {\n  // Called every frame\n}\n```\n\nThe `p5` parameter is a full [P5.js](https://p5js.org/reference/) instance (v1.9.4) in instance mode. All P5 drawing methods (`p5.rect()`, `p5.fill()`, `p5.ellipse()`, etc.) are accessed through it. See [Drawing with P5](/p5/drawing) for Viji-specific drawing patterns.\n\n## Canvas & Context\n\n| Member | Type | Description | Details |\n|--------|------|-------------|---------|\n| [`viji.canvas`](/p5/canvas-resolution) | `OffscreenCanvas` | The rendering canvas | [Canvas & Resolution](/p5/canvas-resolution) |\n| [`viji.width`](/p5/canvas-resolution) | `number` | Canvas width in pixels | [Canvas & Resolution](/p5/canvas-resolution) |\n| [`viji.height`](/p5/canvas-resolution) | `number` | Canvas height in pixels | [Canvas & Resolution](/p5/canvas-resolution) |\n\n> [!WARNING]\n> `viji.useContext()` is **not available** in P5 scenes. The canvas and 2D rendering context are managed by P5 internally. Calling `useContext()` would conflict with P5's rendering pipeline.\n\n## Timing\n\n| Member | Type | Description | Details |\n|--------|------|-------------|---------|\n| [`viji.time`](/p5/timing) | `number` | Seconds elapsed since the scene started | [Timing](/p5/timing) |\n| [`viji.deltaTime`](/p5/timing) | `number` | Seconds since the previous frame | [Timing](/p5/timing) |\n| [`viji.frameCount`](/p5/timing) | `number` | Monotonically increasing frame counter | [Timing](/p5/timing) |\n| [`viji.fps`](/p5/timing) | `number` | Target FPS based on the host's frame rate mode | [Timing](/p5/timing) |\n\n## Parameters\n\nAll parameter methods are called at the top level of your scene file. Read `.value` inside `render()` to get the current value.\n\n| Method | Returns | `.value` Type | Details |\n|--------|---------|---------------|---------|\n| [`viji.slider(default, config)`](/p5/parameters/slider) | `SliderParameter` | `number` | [Slider](/p5/parameters/slider) |\n| [`viji.color(default, config)`](/p5/parameters/color) | `ColorParameter` | `string` (hex) | [Color](/p5/parameters/color) |\n| [`viji.toggle(default, config)`](/p5/parameters/toggle) | `ToggleParameter` | `boolean` | [Toggle](/p5/parameters/toggle) |\n| [`viji.select(default, config)`](/p5/parameters/select) | `SelectParameter` | `string \\| number` | [Select](/p5/parameters/select) |\n| [`viji.number(default, config)`](/p5/parameters/number) | `NumberParameter` | `number` | [Number](/p5/parameters/number) |\n| [`viji.text(default, config)`](/p5/parameters/text) | `TextParameter` | `string` | [Text](/p5/parameters/text) |\n| [`viji.image(null, config)`](/p5/parameters/image) | `ImageParameter` | `ImageBitmap \\| null` | [Image](/p5/parameters/image) |\n| [`viji.button(config)`](/p5/parameters/button) | `ButtonParameter` | `boolean` (true for one frame) | [Button](/p5/parameters/button) |\n\n> [!NOTE]\n> Image parameters have a `.value.p5` property for use with `p5.image()`. See [Drawing with P5 — Image Parameters](/p5/drawing) for the pattern.\n\nSee [Parameters Overview](/p5/parameters) for the declaration pattern, [Grouping](/p5/parameters/grouping) and [Categories](/p5/parameters/categories) for organization.\n\n## Audio\n\n| Member | Type | Description | Details |\n|--------|------|-------------|---------|\n| [`viji.audio.isConnected`](/p5/audio) | `boolean` | Whether an audio source is active | [Overview](/p5/audio) |\n| [`viji.audio.volume.current`](/p5/audio/volume) | `number` | Current RMS volume 0–1 | [Volume](/p5/audio/volume) |\n| [`viji.audio.volume.peak`](/p5/audio/volume) | `number` | Peak volume 0–1 | [Volume](/p5/audio/volume) |\n| [`viji.audio.volume.smoothed`](/p5/audio/volume) | `number` | Smoothed volume 0–1 | [Volume](/p5/audio/volume) |\n| [`viji.audio.bands.low`](/p5/audio/bands) | `number` | Low frequency band energy (20–120 Hz) | [Frequency Bands](/p5/audio/bands) |\n| [`viji.audio.bands.lowMid`](/p5/audio/bands) | `number` | Low-mid band energy (120–500 Hz) | [Frequency Bands](/p5/audio/bands) |\n| [`viji.audio.bands.mid`](/p5/audio/bands) | `number` | Mid band energy (500–2 kHz) | [Frequency Bands](/p5/audio/bands) |\n| [`viji.audio.bands.highMid`](/p5/audio/bands) | `number` | High-mid band energy (2–6 kHz) | [Frequency Bands](/p5/audio/bands) |\n| [`viji.audio.bands.high`](/p5/audio/bands) | `number` | High band energy (6–16 kHz) | [Frequency Bands](/p5/audio/bands) |\n| [`viji.audio.bands.lowSmoothed`](/p5/audio/bands) | `number` | Smoothed low band | [Frequency Bands](/p5/audio/bands) |\n| [`viji.audio.bands.lowMidSmoothed`](/p5/audio/bands) | `number` | Smoothed low-mid band | [Frequency Bands](/p5/audio/bands) |\n| [`viji.audio.bands.midSmoothed`](/p5/audio/bands) | `number` | Smoothed mid band | [Frequency Bands](/p5/audio/bands) |\n| [`viji.audio.bands.highMidSmoothed`](/p5/audio/bands) | `number` | Smoothed high-mid band | [Frequency Bands](/p5/audio/bands) |\n| [`viji.audio.bands.highSmoothed`](/p5/audio/bands) | `number` | Smoothed high band | [Frequency Bands](/p5/audio/bands) |\n| [`viji.audio.beat.kick`](/p5/audio/beat) | `number` | Kick beat energy | [Beat Detection](/p5/audio/beat) |\n| [`viji.audio.beat.snare`](/p5/audio/beat) | `number` | Snare beat energy | [Beat Detection](/p5/audio/beat) |\n| [`viji.audio.beat.hat`](/p5/audio/beat) | `number` | Hi-hat beat energy | [Beat Detection](/p5/audio/beat) |\n| [`viji.audio.beat.any`](/p5/audio/beat) | `number` | Combined beat energy | [Beat Detection](/p5/audio/beat) |\n| [`viji.audio.beat.kickSmoothed`](/p5/audio/beat) | `number` | Smoothed kick | [Beat Detection](/p5/audio/beat) |\n| [`viji.audio.beat.snareSmoothed`](/p5/audio/beat) | `number` | Smoothed snare | [Beat Detection](/p5/audio/beat) |\n| [`viji.audio.beat.hatSmoothed`](/p5/audio/beat) | `number` | Smoothed hi-hat | [Beat Detection](/p5/audio/beat) |\n| [`viji.audio.beat.anySmoothed`](/p5/audio/beat) | `number` | Smoothed combined | [Beat Detection](/p5/audio/beat) |\n| [`viji.audio.beat.triggers.kick`](/p5/audio/beat) | `boolean` | Kick trigger (true for one frame) | [Beat Detection](/p5/audio/beat) |\n| [`viji.audio.beat.triggers.snare`](/p5/audio/beat) | `boolean` | Snare trigger (true for one frame) | [Beat Detection](/p5/audio/beat) |\n| [`viji.audio.beat.triggers.hat`](/p5/audio/beat) | `boolean` | Hi-hat trigger (true for one frame) | [Beat Detection](/p5/audio/beat) |\n| [`viji.audio.beat.triggers.any`](/p5/audio/beat) | `boolean` | Any beat trigger (true for one frame) | [Beat Detection](/p5/audio/beat) |\n| [`viji.audio.beat.events`](/p5/audio/beat) | `Array<{ type, time, strength }>` | Beat events this frame | [Beat Detection](/p5/audio/beat) |\n| [`viji.audio.beat.bpm`](/p5/audio/beat) | `number` | Tracked BPM | [Beat Detection](/p5/audio/beat) |\n| [`viji.audio.beat.confidence`](/p5/audio/beat) | `number` | Beat-tracker confidence 0–1 | [Beat Detection](/p5/audio/beat) |\n| [`viji.audio.beat.isLocked`](/p5/audio/beat) | `boolean` | Whether beat tracking is locked | [Beat Detection](/p5/audio/beat) |\n| [`viji.audio.spectral.brightness`](/p5/audio/spectral) | `number` | Spectral brightness 0–1 | [Spectral Analysis](/p5/audio/spectral) |\n| [`viji.audio.spectral.flatness`](/p5/audio/spectral) | `number` | Spectral flatness 0–1 | [Spectral Analysis](/p5/audio/spectral) |\n| [`viji.audio.getFrequencyData()`](/p5/audio/frequency-data) | `() => Uint8Array` | Raw FFT frequency bins (0–255) | [Frequency Data](/p5/audio/frequency-data) |\n| [`viji.audio.getWaveform()`](/p5/audio/waveform) | `() => Float32Array` | Time-domain waveform (-1 to 1) | [Waveform](/p5/audio/waveform) |\n\n## Video & CV\n\n| Member | Type | Description | Details |\n|--------|------|-------------|---------|\n| [`viji.video.isConnected`](/p5/video) | `boolean` | Whether a video source is active | [Overview](/p5/video) |\n| [`viji.video.currentFrame`](/p5/video/basics) | `OffscreenCanvas \\| ImageBitmap \\| null` | Current video frame | [Video Basics](/p5/video/basics) |\n| [`viji.video.frameWidth`](/p5/video/basics) | `number` | Frame width in pixels | [Video Basics](/p5/video/basics) |\n| [`viji.video.frameHeight`](/p5/video/basics) | `number` | Frame height in pixels | [Video Basics](/p5/video/basics) |\n| [`viji.video.frameRate`](/p5/video/basics) | `number` | Video frame rate | [Video Basics](/p5/video/basics) |\n| [`viji.video.getFrameData()`](/p5/video/basics) | `() => ImageData \\| null` | Pixel data for the current frame | [Video Basics](/p5/video/basics) |\n| [`viji.video.faces`](/p5/video/face-detection) | `FaceData[]` | Detected faces | [Face Detection](/p5/video/face-detection) |\n| [`viji.video.hands`](/p5/video/hand-tracking) | `HandData[]` | Detected hands | [Hand Tracking](/p5/video/hand-tracking) |\n| [`viji.video.pose`](/p5/video/pose-detection) | `PoseData \\| null` | Detected body pose | [Pose Detection](/p5/video/pose-detection) |\n| [`viji.video.segmentation`](/p5/video/body-segmentation) | `SegmentationData \\| null` | Body segmentation mask | [Body Segmentation](/p5/video/body-segmentation) |\n| [`viji.video.cv.enableFaceDetection(enabled)`](/p5/video/face-detection) | `(boolean) => Promise<void>` | Enable/disable face detection | [Face Detection](/p5/video/face-detection) |\n| [`viji.video.cv.enableFaceMesh(enabled)`](/p5/video/face-mesh) | `(boolean) => Promise<void>` | Enable/disable face mesh | [Face Mesh](/p5/video/face-mesh) |\n| [`viji.video.cv.enableEmotionDetection(enabled)`](/p5/video/emotion-detection) | `(boolean) => Promise<void>` | Enable/disable emotion detection | [Emotion Detection](/p5/video/emotion-detection) |\n| [`viji.video.cv.enableHandTracking(enabled)`](/p5/video/hand-tracking) | `(boolean) => Promise<void>` | Enable/disable hand tracking | [Hand Tracking](/p5/video/hand-tracking) |\n| [`viji.video.cv.enablePoseDetection(enabled)`](/p5/video/pose-detection) | `(boolean) => Promise<void>` | Enable/disable pose detection | [Pose Detection](/p5/video/pose-detection) |\n| [`viji.video.cv.enableBodySegmentation(enabled)`](/p5/video/body-segmentation) | `(boolean) => Promise<void>` | Enable/disable body segmentation | [Body Segmentation](/p5/video/body-segmentation) |\n| [`viji.video.cv.getActiveFeatures()`](/p5/video) | `() => CVFeature[]` | List of active CV features | [Overview](/p5/video) |\n| [`viji.video.cv.isProcessing()`](/p5/video) | `() => boolean` | Whether CV is currently processing | [Overview](/p5/video) |\n\n## Mouse\n\n| Member | Type | Description | Details |\n|--------|------|-------------|---------|\n| [`viji.mouse.x`](/p5/mouse) | `number` | Cursor X position in pixels | [Mouse](/p5/mouse) |\n| [`viji.mouse.y`](/p5/mouse) | `number` | Cursor Y position in pixels | [Mouse](/p5/mouse) |\n| [`viji.mouse.isInCanvas`](/p5/mouse) | `boolean` | Whether cursor is inside the canvas | [Mouse](/p5/mouse) |\n| [`viji.mouse.isPressed`](/p5/mouse) | `boolean` | Whether any button is pressed | [Mouse](/p5/mouse) |\n| [`viji.mouse.leftButton`](/p5/mouse) | `boolean` | Left button state | [Mouse](/p5/mouse) |\n| [`viji.mouse.rightButton`](/p5/mouse) | `boolean` | Right button state | [Mouse](/p5/mouse) |\n| [`viji.mouse.middleButton`](/p5/mouse) | `boolean` | Middle button state | [Mouse](/p5/mouse) |\n| [`viji.mouse.deltaX`](/p5/mouse) | `number` | Horizontal movement since last frame | [Mouse](/p5/mouse) |\n| [`viji.mouse.deltaY`](/p5/mouse) | `number` | Vertical movement since last frame | [Mouse](/p5/mouse) |\n| [`viji.mouse.wheelDelta`](/p5/mouse) | `number` | Scroll wheel delta | [Mouse](/p5/mouse) |\n| [`viji.mouse.wheelX`](/p5/mouse) | `number` | Horizontal scroll delta | [Mouse](/p5/mouse) |\n| [`viji.mouse.wheelY`](/p5/mouse) | `number` | Vertical scroll delta | [Mouse](/p5/mouse) |\n| [`viji.mouse.wasPressed`](/p5/mouse) | `boolean` | True for one frame when pressed | [Mouse](/p5/mouse) |\n| [`viji.mouse.wasReleased`](/p5/mouse) | `boolean` | True for one frame when released | [Mouse](/p5/mouse) |\n| [`viji.mouse.wasMoved`](/p5/mouse) | `boolean` | True for one frame when moved | [Mouse](/p5/mouse) |\n\n## Keyboard\n\n| Member | Type | Description | Details |\n|--------|------|-------------|---------|\n| [`viji.keyboard.isPressed(key)`](/p5/keyboard) | `(string) => boolean` | Whether a key is currently held | [Keyboard](/p5/keyboard) |\n| [`viji.keyboard.wasPressed(key)`](/p5/keyboard) | `(string) => boolean` | True for one frame when pressed | [Keyboard](/p5/keyboard) |\n| [`viji.keyboard.wasReleased(key)`](/p5/keyboard) | `(string) => boolean` | True for one frame when released | [Keyboard](/p5/keyboard) |\n| [`viji.keyboard.activeKeys`](/p5/keyboard) | `Set<string>` | All currently held keys | [Keyboard](/p5/keyboard) |\n| [`viji.keyboard.pressedThisFrame`](/p5/keyboard) | `Set<string>` | Keys pressed this frame | [Keyboard](/p5/keyboard) |\n| [`viji.keyboard.releasedThisFrame`](/p5/keyboard) | `Set<string>` | Keys released this frame | [Keyboard](/p5/keyboard) |\n| [`viji.keyboard.lastKeyPressed`](/p5/keyboard) | `string` | Most recently pressed key | [Keyboard](/p5/keyboard) |\n| [`viji.keyboard.lastKeyReleased`](/p5/keyboard) | `string` | Most recently released key | [Keyboard](/p5/keyboard) |\n| [`viji.keyboard.shift`](/p5/keyboard) | `boolean` | Shift key state | [Keyboard](/p5/keyboard) |\n| [`viji.keyboard.ctrl`](/p5/keyboard) | `boolean` | Ctrl/Cmd key state | [Keyboard](/p5/keyboard) |\n| [`viji.keyboard.alt`](/p5/keyboard) | `boolean` | Alt/Option key state | [Keyboard](/p5/keyboard) |\n| [`viji.keyboard.meta`](/p5/keyboard) | `boolean` | Meta/Win key state | [Keyboard](/p5/keyboard) |\n\n## Touch\n\n> **Note:** The property is `viji.touches` (plural), not `viji.touch`.\n\n| Member | Type | Description | Details |\n|--------|------|-------------|---------|\n| [`viji.touches.points`](/p5/touch) | `TouchPoint[]` | All active touch points | [Touch](/p5/touch) |\n| [`viji.touches.count`](/p5/touch) | `number` | Number of active touches | [Touch](/p5/touch) |\n| [`viji.touches.started`](/p5/touch) | `TouchPoint[]` | Touch points that started this frame | [Touch](/p5/touch) |\n| [`viji.touches.moved`](/p5/touch) | `TouchPoint[]` | Touch points that moved this frame | [Touch](/p5/touch) |\n| [`viji.touches.ended`](/p5/touch) | `TouchPoint[]` | Touch points that ended this frame | [Touch](/p5/touch) |\n| [`viji.touches.primary`](/p5/touch) | `TouchPoint \\| null` | The first active touch point | [Touch](/p5/touch) |\n\n**`TouchPoint` fields:** `id`, `x`, `y`, `pressure`, `radius`, `radiusX`, `radiusY`, `rotationAngle`, `force` (numbers); `isInCanvas`, `isNew`, `isActive`, `isEnding` (booleans); `deltaX`, `deltaY` (numbers); `velocity` `{ x, y }`.\n\n## Pointer (Unified)\n\n| Member | Type | Description | Details |\n|--------|------|-------------|---------|\n| [`viji.pointer.x`](/p5/pointer) | `number` | Primary pointer X position | [Pointer](/p5/pointer) |\n| [`viji.pointer.y`](/p5/pointer) | `number` | Primary pointer Y position | [Pointer](/p5/pointer) |\n| [`viji.pointer.deltaX`](/p5/pointer) | `number` | Horizontal movement since last frame | [Pointer](/p5/pointer) |\n| [`viji.pointer.deltaY`](/p5/pointer) | `number` | Vertical movement since last frame | [Pointer](/p5/pointer) |\n| [`viji.pointer.isDown`](/p5/pointer) | `boolean` | Whether the pointer is active (click or touch) | [Pointer](/p5/pointer) |\n| [`viji.pointer.wasPressed`](/p5/pointer) | `boolean` | True for one frame when pressed | [Pointer](/p5/pointer) |\n| [`viji.pointer.wasReleased`](/p5/pointer) | `boolean` | True for one frame when released | [Pointer](/p5/pointer) |\n| [`viji.pointer.isInCanvas`](/p5/pointer) | `boolean` | Whether pointer is inside the canvas | [Pointer](/p5/pointer) |\n| [`viji.pointer.type`](/p5/pointer) | `'mouse' \\| 'touch' \\| 'none'` | Current input source | [Pointer](/p5/pointer) |\n\n## Device Sensors\n\n| Member | Type | Description | Details |\n|--------|------|-------------|---------|\n| [`viji.device.motion`](/p5/sensors) | `DeviceMotionData \\| null` | Accelerometer and gyroscope data | [Device Sensors](/p5/sensors) |\n| [`viji.device.orientation`](/p5/sensors) | `DeviceOrientationData \\| null` | Device orientation (alpha, beta, gamma) | [Device Sensors](/p5/sensors) |\n\n**`DeviceMotionData`:** `acceleration` `{ x, y, z }`, `accelerationIncludingGravity` `{ x, y, z }`, `rotationRate` `{ alpha, beta, gamma }`, `interval`.\n\n**`DeviceOrientationData`:** `alpha`, `beta`, `gamma` (numbers or null), `absolute` (boolean).\n\n## External Devices\n\n| Member | Type | Description | Details |\n|--------|------|-------------|---------|\n| [`viji.devices`](/p5/external-devices) | `DeviceState[]` | Connected external devices | [Overview](/p5/external-devices) |\n| [`viji.devices[i].id`](/p5/external-devices) | `string` | Unique device identifier | [Overview](/p5/external-devices) |\n| [`viji.devices[i].name`](/p5/external-devices) | `string` | User-friendly device name | [Overview](/p5/external-devices) |\n| [`viji.devices[i].motion`](/p5/external-devices/sensors) | `DeviceMotionData \\| null` | Device accelerometer/gyroscope | [Device Sensors](/p5/external-devices/sensors) |\n| [`viji.devices[i].orientation`](/p5/external-devices/sensors) | `DeviceOrientationData \\| null` | Device orientation | [Device Sensors](/p5/external-devices/sensors) |\n| [`viji.devices[i].video`](/p5/external-devices/video) | `VideoAPI \\| null` | Device camera video | [Device Video](/p5/external-devices/video) |\n\n## Streams\n\n| Member | Type | Description |\n|--------|------|-------------|\n| `viji.streams` | `VideoAPI[]` | Additional video streams provided by the host |\n\nEach element has the same shape as [`viji.video`](/p5/video). Streams are additional video sources injected by the host application — they are used internally by Viji's compositor for mixing multiple scenes together. The array may be empty if the host does not provide additional streams. Your scene can read them the same way it reads `viji.video`.\n\n## Related\n\n- [Quick Start](/p5/quickstart) — getting started with the P5 renderer\n- [Scene Structure](/p5/scene-structure) — setup/render pattern and instance mode\n- [Drawing with P5](/p5/drawing) — Viji-specific drawing patterns\n- [Best Practices](/getting-started/best-practices) — essential patterns for all renderers\n- [Native API Reference](/native/api-reference) — the same API in the Native renderer\n- [Shader API Reference](/shader/api-reference) — built-in uniforms for shaders\n- [P5.js Reference](https://p5js.org/reference/) — official P5.js documentation"
+        }
+      ]
+    },
+    "p5-scene-structure": {
+      "id": "p5-scene-structure",
+      "title": "Scene Structure",
+      "description": "The setup/render lifecycle, instance mode, and how P5 scenes are organized in Viji.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Scene Structure\n\nA P5 scene in Viji follows a specific lifecycle. This page covers the `@renderer p5` directive, the `setup()` and `render()` functions, instance mode, and how P5 scenes differ from standard sketches.\n\n## The `@renderer` Directive\n\n> [!IMPORTANT]\n> P5 and shader scenes must declare their renderer type as the first comment:\n> ```\n> // @renderer p5\n> ```\n> or\n> ```\n> // @renderer shader\n> ```\n> Without this directive, the scene defaults to the native renderer.\n\n## Scene Lifecycle\n\nA P5 scene has three parts: top-level code, an optional `setup()`, and a required `render()`:\n\n```javascript\n// @renderer p5\n\n// 1. Top level — runs once: parameters, constants, state\nconst speed = viji.slider(1, { min: 0.1, max: 5, label: 'Speed' });\nlet angle = 0;\n\n// 2. setup(viji, p5) — optional, runs once after P5 initializes\nfunction setup(viji, p5) {\n  p5.colorMode(p5.HSB);\n}\n\n// 3. render(viji, p5) — called every frame\nfunction render(viji, p5) {\n  p5.background(0);\n  angle += speed.value * viji.deltaTime;\n  p5.circle(viji.width / 2, viji.height / 2, 100);\n}\n```\n\n### Top Level\n\nTop-level code runs once when the scene is first loaded. Use it for:\n\n- **Parameter declarations** — `viji.slider()`, `viji.color()`, `viji.toggle()`, etc.\n- **Constants** — precomputed values, lookup tables\n- **Mutable state** — variables that accumulate across frames\n- **Dynamic imports** — top-level `await` is supported (e.g., `const lib = await import('https://esm.sh/...')`)\n\n### `setup(viji, p5)` — Optional\n\nRuns once after P5 has initialized. Use it for one-time P5 configuration:\n\n```javascript\nfunction setup(viji, p5) {\n  p5.colorMode(p5.HSB, 360, 100, 100);\n  p5.textFont('monospace');\n  p5.noStroke();\n}\n```\n\nIf you don't need any P5 configuration, omit `setup()` entirely. Unlike standard P5, **there is no `createCanvas()` call** — the canvas is already created and sized by Viji.\n\n### `render(viji, p5)` — Required\n\nCalled every frame. This replaces P5's `draw()` function. Both arguments are always provided:\n\n| Argument | Type | Description |\n|----------|------|-------------|\n| `viji` | `VijiAPI` | Full Viji API — timing, audio, video, parameters, input |\n| `p5` | P5 instance | Full P5.js API in instance mode |"
+        },
+        {
+          "type": "live-example",
+          "title": "P5 Lifecycle — Expanding Rings",
+          "sceneCode": "// @renderer p5\n\nconst ringCount = viji.slider(5, { min: 1, max: 12, step: 1, label: 'Ring Count' });\nconst speed = viji.slider(1, { min: 0.2, max: 3, label: 'Speed' });\nconst strokeColor = viji.color('#ff44aa', { label: 'Ring Color' });\n\nfunction setup(viji, p5) {\n  p5.colorMode(p5.HSB, 360, 100, 100, 100);\n  p5.noFill();\n}\n\nfunction render(viji, p5) {\n  p5.background(0, 0, 5);\n\n  const cx = viji.width / 2;\n  const cy = viji.height / 2;\n  const maxR = Math.min(viji.width, viji.height) * 0.45;\n\n  for (let i = 0; i < ringCount.value; i++) {\n    const t = (viji.time * speed.value + i * 0.4) % 3;\n    const radius = (t / 3) * maxR;\n    const alpha = p5.map(t, 0, 3, 100, 0);\n    const sw = p5.map(t, 0, 3, Math.min(viji.width, viji.height) * 0.01, 1);\n\n    p5.stroke(strokeColor.value);\n    p5.drawingContext.globalAlpha = alpha / 100;\n    p5.strokeWeight(sw);\n    p5.circle(cx, cy, radius * 2);\n  }\n\n  p5.drawingContext.globalAlpha = 1;\n}\n",
+          "sceneFile": "scene-structure-lifecycle.scene.js"
+        },
+        {
+          "type": "text",
+          "markdown": "## Instance Mode\n\n> [!WARNING]\n> Viji uses P5 in **instance mode**. All P5 functions require the `p5.` prefix:\n> ```javascript\n> // Correct\n> p5.background(0);\n> p5.circle(p5.width / 2, p5.height / 2, 100);\n>\n> // Wrong — will throw ReferenceError\n> background(0);\n> circle(width / 2, height / 2, 100);\n> ```\n\nInstance mode means there are no global P5 functions. Every P5 API call — `background()`, `circle()`, `fill()`, `noise()`, `map()`, `constrain()`, `random()`, and all others — must use the `p5.` prefix.\n\nConstants are also namespaced: use `p5.PI`, `p5.TWO_PI`, `p5.HSB`, `p5.CENTER`, etc.\n\n## What's Different from Standard P5.js\n\n| Standard P5.js | Viji P5 | Reason |\n|----------------|---------|--------|\n| `function draw() { ... }` | `function render(viji, p5) { ... }` | Viji controls the render loop |\n| `createCanvas(800, 600)` | Not needed | Canvas is managed by Viji |\n| `resizeCanvas(w, h)` | Not needed | Resizing is automatic |\n| `preload()` | Not available | Use `viji.image()` parameters or `fetch()` in `setup()` |\n| `mouseX`, `mouseY` | [`viji.pointer.x`](/p5/pointer), [`viji.pointer.y`](/p5/pointer) (or [`viji.mouse.x`](/p5/mouse), [`viji.mouse.y`](/p5/mouse)) | P5 input globals don't update in workers |\n| `frameRate(30)` | Not available | Viji controls the frame rate |\n| `keyPressed()`, `mouseClicked()` | Check state in `render()` | No event callbacks in worker environment |\n| Global mode (`background(0)`) | Instance mode (`p5.background(0)`) | Worker environment requires explicit namespacing |\n\n## Environment Constraints\n\n> [!WARNING]\n> Scenes run in a Web Worker — there is no `window`, `document`, `Image()`, `localStorage`, or any DOM API. All inputs (audio, video, images) are provided through the Viji API. Note: `fetch()` IS available and can be used to load external data (JSON, etc.) from CDNs.\n\n## Next Steps\n\n- [Canvas & Resolution](/p5/canvas-resolution) — [`viji.width`](/p5/canvas-resolution), [`viji.height`](/p5/canvas-resolution), responsive layouts\n- [Timing](/p5/timing) — [`viji.time`](/p5/timing), [`viji.deltaTime`](/p5/timing), frame counting\n- [Drawing with P5](/p5/drawing) — P5 drawing functions in Viji\n- [Parameters](/p5/parameters) — sliders, colors, toggles\n- [Converting P5 Sketches](/p5/converting-sketches) — migrate existing sketches\n- [API Reference](/p5/api-reference) — full list of everything available"
+        }
+      ]
+    },
+    "p5-canvas-resolution": {
+      "id": "p5-canvas-resolution",
+      "title": "Canvas & Resolution",
+      "description": "How P5 manages the canvas, and using viji.width and viji.height for resolution-agnostic drawing.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Canvas & Resolution\n\nIn the P5 renderer, the canvas and its rendering context are managed for you. You draw with P5 functions — no need to call `viji.useContext()`. This page covers how resolution works, what `viji.width` and `viji.height` mean, and how to build layouts that adapt to any canvas size.\n\n## Canvas Management\n\nViji creates the canvas and passes it to P5 automatically. Key differences from standard P5.js:\n\n- **No `createCanvas()`.** The canvas already exists. Calling `p5.createCanvas()` is unnecessary and should be avoided.\n- **No `resizeCanvas()`.** When the host resizes the canvas, Viji handles the resize and updates P5 internally. Your `render()` function is always called with the correct dimensions.\n- **P5 owns the rendering context.** You don't call `viji.useContext()` — P5 creates its own 2D context on the provided canvas.\n\n## Resolution Properties\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `viji.width` | `number` | Current canvas width in pixels |\n| `viji.height` | `number` | Current canvas height in pixels |\n| `p5.width` | `number` | Same value — P5's internal width |\n| `p5.height` | `number` | Same value — P5's internal height |\n| `viji.canvas` | `OffscreenCanvas` | The underlying canvas (rarely needed in P5 scenes) |\n\n`viji.width` and `p5.width` are always in sync — they reflect the same canvas. Use whichever feels natural, but `viji.width` is the canonical source across all renderers.\n\n## Resolution-Agnostic Layouts\n\n> [!NOTE]\n> Always use `viji.width` and `viji.height` for positioning and sizing, and `viji.deltaTime` for frame-rate-independent animation. Never hardcode pixel values or assume a specific frame rate.\n\nThe canvas can be any size — from a small preview to a fullscreen 4K display. Position and scale everything relative to `viji.width` and `viji.height`:\n\n```javascript\n// @renderer p5\n\nfunction render(viji, p5) {\n  const cx = viji.width / 2;\n  const cy = viji.height / 2;\n  const r = Math.min(viji.width, viji.height) * 0.3;\n  p5.circle(cx, cy, r * 2);\n}\n```"
+        },
+        {
+          "type": "live-example",
+          "title": "Responsive Grid",
+          "sceneCode": "// @renderer p5\n\nconst cols = viji.slider(6, { min: 2, max: 12, step: 1, label: 'Columns' });\nconst padding = viji.slider(0.02, { min: 0, max: 0.05, label: 'Padding' });\nconst cornerRadius = viji.slider(0.3, { min: 0, max: 1, label: 'Corner Roundness' });\nconst bgColor = viji.color('#0f0f1a', { label: 'Background' });\nconst cellColor = viji.color('#3388ff', { label: 'Cell Color' });\n\nfunction setup(viji, p5) {\n  p5.colorMode(p5.HSB, 360, 100, 100);\n}\n\nfunction render(viji, p5) {\n  p5.background(bgColor.value);\n\n  const c = cols.value;\n  const pad = Math.min(viji.width, viji.height) * padding.value;\n  const cellW = (viji.width - pad) / c - pad;\n  const rows = Math.floor((viji.height - pad) / (cellW + pad));\n  const cellH = (viji.height - pad) / rows - pad;\n\n  for (let row = 0; row < rows; row++) {\n    for (let col = 0; col < c; col++) {\n      const x = pad + col * (cellW + pad);\n      const y = pad + row * (cellH + pad);\n      const hue = (col / c * 180 + row / rows * 180 + viji.time * 30) % 360;\n\n      p5.noStroke();\n      p5.fill(hue, 70, 90);\n      p5.rect(x, y, cellW, cellH, Math.min(cellW, cellH) * 0.5 * cornerRadius.value);\n    }\n  }\n}\n",
+          "sceneFile": "canvas-resolution-responsive.scene.js"
+        },
+        {
+          "type": "text",
+          "markdown": "## `viji.canvas` in P5 Scenes\n\n`viji.canvas` is the same `OffscreenCanvas` that P5 draws to. While you _can_ access it directly (e.g., to get raw pixel data), in practice you should use P5 drawing functions for all rendering. The raw canvas is useful in advanced scenarios like reading back pixels with `viji.canvas.getContext('2d').getImageData(...)`.\n\n## Comparison Across Renderers\n\n| Concept | Native | P5 | Shader |\n|---------|--------|-----|--------|\n| Canvas dimensions | `viji.width`, `viji.height` | `viji.width`, `viji.height` (= `p5.width`, `p5.height`) | `u_resolution.x`, `u_resolution.y` |\n| Context creation | `viji.useContext('2d')` | Automatic (P5 manages it) | Automatic (shader adapter manages it) |\n| Resize handling | Use current `viji.width`/`viji.height` each frame | Automatic | Automatic via `u_resolution` |\n\n## Next Steps\n\n- [Scene Structure](/p5/scene-structure) — `setup()`, `render()`, instance mode\n- [Timing](/p5/timing) — [`viji.time`](/p5/timing), [`viji.deltaTime`](/p5/timing), frame counting\n- [Native Canvas & Context](/native/canvas-context) — `viji.useContext()` and manual context management\n- [Shader Resolution](/shader/resolution) — `u_resolution` and coordinate normalization\n- [API Reference](/p5/api-reference) — full list of everything available"
+        }
+      ]
+    },
+    "p5-drawing": {
+      "id": "p5-drawing",
+      "title": "Drawing with P5",
+      "description": "Viji-specific drawing concerns — P5 version, drawing images and video, off-screen buffers, fonts, and known limitations.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Drawing with P5\n\nViji gives you a full P5.js instance in every P5 scene. All standard P5 drawing functions — shapes, colors, transforms, typography, pixel manipulation, math utilities — work as documented in the official reference.\n\n> **P5.js Reference**: Viji loads **P5.js v1.9.4**. For the full drawing API, see the [P5.js Reference](https://p5js.org/reference/).\n\nThis page covers only what is **different or specific to Viji** — how to draw images and video, off-screen buffers, font limitations, and what is not supported.\n\n## Instance Mode\n\n> [!WARNING]\n> Viji uses P5 in **instance mode**. All P5 functions require the `p5.` prefix:\n> ```javascript\n> // Correct\n> p5.background(0);\n> p5.circle(p5.width / 2, p5.height / 2, 100);\n>\n> // Wrong — will throw ReferenceError\n> background(0);\n> circle(width / 2, height / 2, 100);\n> ```\n\nConstants are also namespaced: `p5.PI`, `p5.TWO_PI`, `p5.HSB`, `p5.CENTER`, `p5.BLEND`, etc.\n\n## Drawing Images\n\n### Image Parameters\n\nUse `.value.p5` (not `.value`) when passing image parameters to `p5.image()`:\n\n```javascript\n// @renderer p5\n\nconst tex = viji.image(null, { label: 'Texture' });\n\nfunction render(viji, p5) {\n  p5.background(0);\n  if (tex.value) {\n    p5.image(tex.value.p5, 0, 0, p5.width, p5.height);\n  }\n}\n```\n\n> [!WARNING]\n> Passing `tex.value` directly to `p5.image()` will not work. The raw `ImageBitmap` is not P5-compatible. Always use `.value.p5`.\n\nThe `.p5` wrapper is cached — accessing it multiple times per frame has no overhead. See [Image Parameter](../parameters/image/) for full details.\n\n### Video Frames\n\nVideo frames are automatically wrapped for P5 compatibility. Pass `viji.video.currentFrame` directly to `p5.image()`:\n\n```javascript\n// @renderer p5\n\nfunction render(viji, p5) {\n  p5.background(0);\n  if (viji.video.isConnected && viji.video.currentFrame) {\n    p5.image(viji.video.currentFrame, 0, 0, p5.width, p5.height);\n  }\n}\n```\n\nDevice video frames work the same way:\n\n```javascript\nfor (const device of viji.devices) {\n  if (device.video?.isConnected && device.video.currentFrame) {\n    p5.image(device.video.currentFrame, x, y, w, h);\n  }\n}\n```\n\nSee [Video Basics](../video/basics/) for aspect-ratio-correct drawing and `getFrameData()`.\n\n### Tint\n\n`p5.tint()` works as expected for coloring or fading images:\n\n```javascript\n// @renderer p5\n\nconst tex = viji.image(null, { label: 'Image' });\nconst fade = viji.slider(255, { min: 0, max: 255, label: 'Fade' });\n\nfunction render(viji, p5) {\n  p5.background(0);\n  if (tex.value) {\n    p5.tint(255, fade.value);\n    p5.image(tex.value.p5, 0, 0, p5.width, p5.height);\n    p5.noTint();\n  }\n}\n```\n\n## Off-Screen Buffers\n\n`p5.createGraphics(w, h)` works in Viji. Each call creates a real `OffscreenCanvas` buffer you can draw to independently and then composite onto the main canvas:\n\n```javascript\n// @renderer p5\n\nlet buffer;\n\nfunction setup(viji, p5) {\n  buffer = p5.createGraphics(p5.width, p5.height);\n}\n\nfunction render(viji, p5) {\n  buffer.background(0, 10);\n  buffer.noStroke();\n  buffer.fill(255);\n  buffer.ellipse(\n    buffer.width / 2 + p5.sin(viji.time) * 100,\n    buffer.height / 2,\n    20, 20\n  );\n\n  p5.image(buffer, 0, 0);\n}\n```\n\n> [!NOTE]\n> Off-screen buffers created with `createGraphics()` are always 2D. There is no WEBGL support for off-screen buffers.\n\n## Fonts\n\n`p5.loadFont()` is not available in the worker environment. Use system fonts instead:\n\n```javascript\n// @renderer p5\n\nfunction setup(viji, p5) {\n  p5.textFont('monospace');\n}\n\nfunction render(viji, p5) {\n  p5.background(0);\n  p5.fill(255);\n  p5.textSize(24);\n  p5.textAlign(p5.CENTER, p5.CENTER);\n  p5.text('Hello, Viji', p5.width / 2, p5.height / 2);\n}\n```\n\nAvailable system font families: `'monospace'`, `'sans-serif'`, `'serif'`. You can also try specific system fonts like `'Courier New'`, `'Arial'`, `'Georgia'`, but availability depends on the device.\n\n## Blend Modes\n\n`p5.blendMode()` works as expected. All standard P5 blend modes are available:\n\n```javascript\np5.blendMode(p5.ADD);\np5.blendMode(p5.MULTIPLY);\np5.blendMode(p5.SCREEN);\np5.blendMode(p5.BLEND); // default\n```\n\n## Known Limitations\n\n| Feature | Status | Alternative |\n|---------|--------|-------------|\n| WEBGL / 3D mode | Not supported | Use the [Shader renderer](/shader/quickstart) or [Three.js via Native](/native/external-libraries) |\n| `p5.loadFont()` | Not available | Use system fonts: `p5.textFont('monospace')` |\n| `p5.loadImage()` | Not available | Use [`viji.image()`](../parameters/image/) parameters |\n| `p5.createCapture()` | Not available | Use [`viji.video`](../video/) |\n\n> [!NOTE]\n> For the full list of unavailable P5 features (event callbacks, `save()`, `frameRate()`, etc.), see [Converting P5 Sketches](../converting-sketches/).\n\n## Basic Example"
+        },
+        {
+          "type": "live-example",
+          "title": "Drawing with P5 — Shapes & Transforms",
+          "sceneCode": "// @renderer p5\n\nconst speed = viji.slider(1, { min: 0.1, max: 4, step: 0.1, label: 'Speed' });\nconst count = viji.slider(6, { min: 3, max: 16, step: 1, label: 'Shape Count' });\nconst hueShift = viji.slider(0, { min: 0, max: 360, step: 1, label: 'Hue Offset' });\n\nfunction setup(viji, p5) {\n  p5.colorMode(p5.HSB, 360, 100, 100, 100);\n}\n\nfunction render(viji, p5) {\n  p5.background(0, 0, 5);\n\n  const cx = p5.width / 2;\n  const cy = p5.height / 2;\n  const radius = Math.min(p5.width, p5.height) * 0.3;\n  const t = viji.time * speed.value;\n  const n = count.value;\n\n  p5.noStroke();\n\n  for (let i = 0; i < n; i++) {\n    const angle = (i / n) * p5.TWO_PI + t;\n    const x = cx + p5.cos(angle) * radius;\n    const y = cy + p5.sin(angle) * radius;\n    const hue = (hueShift.value + (i / n) * 360) % 360;\n    const size = 20 + p5.sin(t * 2 + i) * 10;\n\n    p5.push();\n    p5.translate(x, y);\n    p5.rotate(angle + t * 0.5);\n\n    p5.fill(hue, 70, 90, 80);\n    p5.rectMode(p5.CENTER);\n    p5.rect(0, 0, size, size, 4);\n\n    p5.fill(hue, 40, 100);\n    p5.ellipse(0, 0, size * 0.4, size * 0.4);\n\n    p5.pop();\n  }\n\n  p5.push();\n  p5.translate(cx, cy);\n  p5.rotate(-t * 0.3);\n  p5.stroke(0, 0, 100, 30);\n  p5.strokeWeight(1);\n  p5.noFill();\n  const innerR = radius * 0.4;\n  for (let i = 0; i < n; i++) {\n    const a1 = (i / n) * p5.TWO_PI;\n    const a2 = ((i + 1) / n) * p5.TWO_PI;\n    p5.line(\n      p5.cos(a1) * innerR, p5.sin(a1) * innerR,\n      p5.cos(a2) * innerR, p5.sin(a2) * innerR\n    );\n  }\n  p5.pop();\n\n  p5.noStroke();\n  p5.fill(0, 0, 50);\n  p5.textFont('monospace');\n  p5.textSize(11);\n  p5.textAlign(p5.LEFT);\n  p5.text(`shapes: ${n}  speed: ${speed.value.toFixed(1)}x`, 8, p5.height - 8);\n}\n",
+          "sceneFile": "drawing-demo.scene.js"
+        },
+        {
+          "type": "text",
+          "markdown": "## Related\n\n- [P5.js Reference](https://p5js.org/reference/) — official P5.js v1.9.x documentation\n- [Scene Structure](../scene-structure/) — `setup()`, `render()`, and instance mode\n- [Canvas & Resolution](../canvas-resolution/) — `viji.width`, `viji.height`, responsive layouts\n- [Converting P5 Sketches](../converting-sketches/) — migration guide and full list of unavailable features\n- [Image Parameter](../parameters/image/) — uploading and drawing user images\n- [Video Basics](../video/basics/) — drawing video frames with `p5.image()`\n- [P5 Quick Start](../quickstart/) — your first P5 scene"
+        }
+      ]
+    },
+    "p5-converting": {
+      "id": "p5-converting",
+      "title": "p5-converting",
+      "description": "Step-by-step guide to converting standard P5.js sketches into Viji scenes.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Converting P5 Sketches\r\n\r\nThis guide shows how to take any standard P5.js sketch and convert it into a Viji scene. The changes are mechanical — once you learn the pattern, converting takes a few minutes.\r\n\r\n> [!TIP]\r\n> Want an AI to do it for you? See [Convert: P5 Sketches](/ai-prompts/convert-p5) for a ready-to-paste prompt that applies all the rules below automatically.\r\n\r\n## Quick Reference\r\n\r\n| Standard P5.js | Viji-P5 |\r\n|---|---|\r\n| `function setup() { ... }` | `function setup(viji, p5) { ... }` |\r\n| `function draw() { ... }` | `function render(viji, p5) { ... }` |\r\n| `createCanvas(800, 600)` | Remove — canvas is provided |\r\n| `background(0)` | `p5.background(0)` |\r\n| `ellipse(x, y, d)` | `p5.ellipse(x, y, d)` |\r\n| `mouseX`, `mouseY` | [`viji.pointer.x`](/p5/pointer), [`viji.pointer.y`](/p5/pointer) (or [`viji.mouse.x`](/p5/mouse), [`viji.mouse.y`](/p5/mouse)) |\r\n| `keyIsPressed` | [`viji.keyboard.isPressed('a')`](/p5/keyboard) |\r\n| `width`, `height` | `viji.width`, `viji.height` |\r\n| `frameRate(30)` | Remove — host controls frame rate |\r\n| `preload()` | Remove — use `viji.image()` or `fetch()` in `setup()` |\r\n| `save()` / `saveCanvas()` | Remove — host-side `captureFrame()` |\r\n| `loadImage('url')` | `viji.image(null, { label: 'Image' })` |\r\n\r\n## Step by Step\r\n\r\n### 1. Add the renderer directive\r\n\r\nAdd `// @renderer p5` as the very first line:\r\n\r\n```javascript\r\n// @renderer p5\r\n```\r\n\r\n> [!IMPORTANT]\r\n> Without `// @renderer p5`, the scene defaults to the native renderer and the `p5` parameter will be `undefined`.\r\n\r\n### 2. Rename `draw()` to `render(viji, p5)`\r\n\r\nStandard P5:\r\n```javascript\r\nfunction draw() {\r\n  background(0);\r\n  ellipse(width / 2, height / 2, 100);\r\n}\r\n```\r\n\r\nViji-P5:\r\n```javascript\r\nfunction render(viji, p5) {\r\n  p5.background(0);\r\n  p5.ellipse(viji.width / 2, viji.height / 2, 100);\r\n}\r\n```\r\n\r\nBoth `viji` and `p5` are required parameters. `viji` gives access to the Viji API; `p5` is the P5.js instance.\r\n\r\n### 3. Add the `p5.` prefix to all P5 functions\r\n\r\n> [!WARNING]\r\n> Viji uses P5 in **instance mode**. Every P5 function and constant needs the `p5.` prefix. This is the most common source of errors during conversion.\r\n\r\n```javascript\r\n// Standard P5.js (global mode)\r\ncolorMode(HSB);\r\nfill(255, 80, 100);\r\nrect(10, 10, 50, 50);\r\nlet v = createVector(1, 0);\r\n\r\n// Viji-P5 (instance mode)\r\np5.colorMode(p5.HSB);\r\np5.fill(255, 80, 100);\r\np5.rect(10, 10, 50, 50);\r\nlet v = p5.createVector(1, 0);\r\n```\r\n\r\nThis applies to constants too: `PI` → `p5.PI`, `TWO_PI` → `p5.TWO_PI`, `HALF_PI` → `p5.HALF_PI`, `HSB` → `p5.HSB`, `WEBGL` → `p5.WEBGL`.\r\n\r\n### 4. Remove `createCanvas()`\r\n\r\nViji creates and manages the canvas for you. Remove any `createCanvas()` call:\r\n\r\n```javascript\r\n// Standard P5.js\r\nfunction setup() {\r\n  createCanvas(800, 600);\r\n}\r\n\r\n// Viji-P5 — no createCanvas() needed\r\nfunction setup(viji, p5) {\r\n  p5.colorMode(p5.HSB);\r\n}\r\n```\r\n\r\nFor resolution-agnostic sizing, use `viji.width` and `viji.height` instead of hardcoded values.\r\n\r\n### 5. Replace P5 input globals with Viji APIs\r\n\r\nP5's built-in input variables (`mouseX`, `mouseY`, `keyIsPressed`, etc.) are not available in the worker environment. Use the Viji API instead. For most position/click interactions, [`viji.pointer`](/p5/pointer) works across both mouse and touch:\r\n\r\n```javascript\r\n// Standard P5.js\r\nfunction draw() {\r\n  if (mouseIsPressed) {\r\n    ellipse(mouseX, mouseY, 50);\r\n  }\r\n  if (keyIsPressed && key === 'r') {\r\n    background(255, 0, 0);\r\n  }\r\n}\r\n\r\n// Viji-P5\r\nfunction render(viji, p5) {\r\n  if (viji.pointer.isDown) {\r\n    p5.ellipse(viji.pointer.x, viji.pointer.y, 50);\r\n  }\r\n  if (viji.keyboard.isPressed('r')) {\r\n    p5.background(255, 0, 0);\r\n  }\r\n}\r\n```\r\n\r\n### 6. Remove event callbacks\r\n\r\nP5 event callbacks (`mousePressed()`, `mouseDragged()`, `keyPressed()`, etc.) do not work in the worker environment. Check state in `render()` instead:\r\n\r\n```javascript\r\n// Standard P5.js\r\nfunction mousePressed() {\r\n  particles.push(new Particle(mouseX, mouseY));\r\n}\r\n\r\n// Viji-P5 — track state manually\r\nlet wasPressed = false;\r\n\r\nfunction render(viji, p5) {\r\n  if (viji.mouse.leftButton && !wasPressed) {\r\n    particles.push(new Particle(viji.mouse.x, viji.mouse.y));\r\n  }\r\n  wasPressed = viji.mouse.leftButton;\r\n}\r\n```\r\n\r\n### 7. Replace `preload()` and `loadImage()`\r\n\r\nThere is no `preload()` phase in Viji. For images, use Viji's image parameter or `fetch()` in `setup()`:\r\n\r\n```javascript\r\n// Standard P5.js\r\nlet img;\r\nfunction preload() {\r\n  img = loadImage('photo.jpg');\r\n}\r\nfunction draw() {\r\n  image(img, 0, 0);\r\n}\r\n\r\n// Viji-P5 — use image parameter\r\nconst photo = viji.image(null, { label: 'Photo' });\r\n\r\nfunction render(viji, p5) {\r\n  if (photo.value) {\r\n    p5.image(photo.p5, 0, 0, viji.width, viji.height);\r\n  }\r\n}\r\n```\r\n\r\n> [!NOTE]\r\n> Use `photo.p5` (not `photo.value`) when passing images to P5 drawing functions like `p5.image()`. The `.p5` property provides a P5-compatible wrapper around the raw image data.\r\n\r\nFor JSON or text data, use `fetch()` in an async `setup()`:\r\n\r\n```javascript\r\nlet data = null;\r\n\r\nasync function setup(viji, p5) {\r\n  const response = await fetch('https://cdn.example.com/data.json');\r\n  data = await response.json();\r\n}\r\n```\r\n\r\n### 8. Replace `save()` and `frameRate()`\r\n\r\nThese host-level concerns are handled outside the scene:\r\n\r\n- **Saving frames**: The host application uses `core.captureFrame()`.\r\n- **Frame rate**: The host controls it via `core.setFrameRate()`.\r\n\r\nSimply remove these calls from your scene code.\r\n\r\n## Complete Conversion Example\r\n\r\nHere is the same scene implemented both ways, followed by the live Viji version:\r\n\r\n**Standard P5.js:**\r\n\r\n```javascript\r\nfunction setup() {\r\n  createCanvas(400, 400);\r\n  colorMode(HSB, 360, 100, 100, 100);\r\n}\r\n\r\nfunction draw() {\r\n  background(0, 0, 10);\r\n  let count = 8;\r\n  let radius = 120;\r\n  for (let i = 0; i < count; i++) {\r\n    let a = frameCount * 0.02 + (i / count) * TWO_PI;\r\n    let x = width / 2 + cos(a) * radius;\r\n    let y = height / 2 + sin(a) * radius;\r\n    noStroke();\r\n    fill(255, 150, 0);\r\n    circle(x, y, 16);\r\n  }\r\n}\r\n```\r\n\r\n**Converted Viji-P5:**"
+        },
+        {
+          "type": "live-example",
+          "title": "Converted Sketch — Orbiting Dots",
+          "sceneCode": "// @renderer p5\r\n\r\nconst speed = viji.slider(2, { min: 0.5, max: 8, label: 'Speed' });\r\nconst count = viji.slider(8, { min: 3, max: 20, step: 1, label: 'Count' });\r\nconst dotColor = viji.color('#ff6600', { label: 'Color' });\r\n\r\nlet angle = 0;\r\n\r\nfunction render(viji, p5) {\r\n  angle += speed.value * viji.deltaTime;\r\n\r\n  p5.background(10);\r\n\r\n  const cx = viji.width / 2;\r\n  const cy = viji.height / 2;\r\n  const radius = Math.min(viji.width, viji.height) * 0.3;\r\n  const dotSize = Math.min(viji.width, viji.height) * 0.04;\r\n\r\n  const r = parseInt(dotColor.value.slice(1, 3), 16);\r\n  const g = parseInt(dotColor.value.slice(3, 5), 16);\r\n  const b = parseInt(dotColor.value.slice(5, 7), 16);\r\n\r\n  for (let i = 0; i < count.value; i++) {\r\n    const a = angle + (i / count.value) * p5.TWO_PI;\r\n    const x = cx + p5.cos(a) * radius;\r\n    const y = cy + p5.sin(a) * radius;\r\n\r\n    p5.noStroke();\r\n    p5.fill(r, g, b);\r\n    p5.circle(x, y, dotSize);\r\n  }\r\n}\r\n",
+          "sceneFile": "converted-sketch.scene.js"
+        },
+        {
+          "type": "text",
+          "markdown": "Key changes made:\r\n\r\n1. Added `// @renderer p5` at the top.\r\n2. Renamed `draw()` → `render(viji, p5)`, added `setup(viji, p5)`.\r\n3. Prefixed all P5 functions with `p5.`.\r\n4. Removed `createCanvas()`.\r\n5. Replaced hardcoded `400` and `120` with `viji.width`, `viji.height`, and proportional math.\r\n6. Replaced `frameCount * 0.02` with a `deltaTime`-based accumulator for frame-rate-independent animation.\r\n7. Extracted the hardcoded color and count into Viji parameters so they become live controls.\r\n\r\n## What Doesn't Work\r\n\r\nThese P5 features are unavailable in the worker environment:\r\n\r\n| Feature | Alternative |\r\n|---|---|\r\n| `p5.dom` (sliders, buttons) | Use Viji parameters (`viji.slider()`, `viji.toggle()`, etc.) |\r\n| `p5.sound` | Use Viji audio API (`viji.audio.*`) |\r\n| `loadImage()`, `loadFont()`, `loadJSON()` | `viji.image()` parameter or `fetch()` in `setup()` |\r\n| `save()`, `saveCanvas()`, `saveFrames()` | Host-side `core.captureFrame()` |\r\n| `createCapture()`, `createVideo()` | Use Viji video API (`viji.video.*`) |\r\n| `cursor()`, `noCursor()` | Not available in workers |\r\n| `fullscreen()` | Host-side concern |\r\n| `frameRate()` | Host-side `core.setFrameRate()` |\r\n| `mousePressed()`, `keyPressed()`, etc. | Check state in `render()` via Viji APIs |\r\n\r\n## Tips\r\n\r\n- **Start with `setup()` and `render()`.** Get the basic structure right first, then fix individual function calls.\r\n- **Search and replace `p5.` prefix.** Most editors support regex — replace `\\b(background|fill|stroke|rect|ellipse|circle|...)\\(` with `p5.$1(`.\r\n- **Use `viji.width` / `viji.height`** everywhere instead of hardcoded dimensions. This makes the scene resolution-agnostic.\r\n- **Convert animation timing.** Replace `frameCount`-based animation with `viji.time` or `viji.deltaTime` accumulators for frame-rate independence.\r\n- **Test incrementally.** Convert the structure first, then one feature at a time.\r\n\r\n## Related\r\n\r\n- [P5 Quick Start](/p5/quickstart) — building P5 scenes from scratch in Viji\r\n- [Drawing with P5](/p5/drawing) — P5 drawing functions in the Viji environment\r\n- [Parameters](/p5/parameters) — sliders, colors, toggles, images\r\n- [Best Practices](/getting-started/best-practices) — essential patterns for all renderers"
+        }
+      ]
+    },
+    "p5-timing": {
+      "id": "p5-timing",
+      "title": "Timing",
+      "description": "Use viji.time, viji.deltaTime, viji.frameCount, and viji.fps for animation in P5 scenes.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Timing\n\nThe same timing properties available in native scenes work identically in P5. This page covers P5-specific usage patterns and clarifies the relationship between Viji's timing API and P5's own frame utilities.\n\n## Properties\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `viji.time` | `number` | Seconds elapsed since the scene started |\n| `viji.deltaTime` | `number` | Seconds since the previous frame |\n| `viji.frameCount` | `number` | Integer frame counter (monotonically increasing) |\n| `viji.fps` | `number` | Target FPS based on the host's frame rate mode |\n\n## `viji.time` — Oscillations & Cycles\n\nUse `viji.time` for effects that depend on absolute position in time — oscillations, rotations, and cycling:\n\n```javascript\n// @renderer p5\n\nfunction render(viji, p5) {\n  p5.background(0);\n  const x = viji.width / 2 + p5.cos(viji.time * 2) * viji.width * 0.3;\n  const y = viji.height / 2 + p5.sin(viji.time * 3) * viji.height * 0.2;\n  p5.circle(x, y, viji.width * 0.05);\n}\n```"
+        },
+        {
+          "type": "live-example",
+          "title": "Time-Based — Lissajous Curve",
+          "sceneCode": "// @renderer p5\n\nconst freqX = viji.slider(2, { min: 1, max: 7, step: 1, label: 'Frequency X' });\nconst freqY = viji.slider(3, { min: 1, max: 7, step: 1, label: 'Frequency Y' });\nconst trailLen = viji.slider(200, { min: 20, max: 600, step: 10, label: 'Trail Length' });\nconst lineColor = viji.color('#ff6644', { label: 'Curve Color' });\n\nfunction setup(viji, p5) {\n  p5.noFill();\n}\n\nfunction render(viji, p5) {\n  p5.background(10, 10, 26);\n\n  const cx = viji.width / 2;\n  const cy = viji.height / 2;\n  const ax = viji.width * 0.38;\n  const ay = viji.height * 0.38;\n\n  p5.stroke(lineColor.value);\n  p5.strokeWeight(Math.max(1, viji.width * 0.003));\n  p5.beginShape();\n  for (let i = 0; i < trailLen.value; i++) {\n    const t = viji.time - i * 0.005;\n    const x = cx + p5.sin(t * freqX.value) * ax;\n    const y = cy + p5.cos(t * freqY.value) * ay;\n    p5.vertex(x, y);\n  }\n  p5.endShape();\n}\n",
+          "sceneFile": "timing-oscillation.scene.js"
+        },
+        {
+          "type": "text",
+          "markdown": "## `viji.deltaTime` — Accumulation\n\nUse `viji.deltaTime` for anything that accumulates frame-to-frame — movement, rotation, fading, physics:\n\n```javascript\n// @renderer p5\n\nlet hue = 0;\n\nfunction setup(viji, p5) {\n  p5.colorMode(p5.HSB, 360, 100, 100);\n}\n\nfunction render(viji, p5) {\n  hue = (hue + 60 * viji.deltaTime) % 360; // 60 degrees per second\n  p5.background(hue, 60, 90);\n}\n```"
+        },
+        {
+          "type": "live-example",
+          "title": "DeltaTime — Drifting Particles",
+          "sceneCode": "// @renderer p5\n\nconst particleCount = viji.slider(60, { min: 10, max: 200, step: 1, label: 'Particles' });\nconst driftSpeed = viji.slider(40, { min: 10, max: 150, label: 'Drift Speed' });\nconst dotSize = viji.slider(0.01, { min: 0.003, max: 0.03, label: 'Dot Size' });\nconst dotColor = viji.color('#44ddff', { label: 'Dot Color' });\n\nconst particles = [];\nfor (let i = 0; i < 200; i++) {\n  particles.push({ x: Math.random(), y: Math.random(), vx: (Math.random() - 0.5) * 2, vy: (Math.random() - 0.5) * 2 });\n}\n\nfunction render(viji, p5) {\n  p5.background(10, 10, 26, 40);\n\n  const n = Math.min(particleCount.value, particles.length);\n  const s = driftSpeed.value / Math.max(viji.width, viji.height);\n  const r = Math.min(viji.width, viji.height) * dotSize.value;\n\n  p5.noStroke();\n  p5.fill(dotColor.value);\n  for (let i = 0; i < n; i++) {\n    const p = particles[i];\n    p.x += p.vx * s * viji.deltaTime;\n    p.y += p.vy * s * viji.deltaTime;\n\n    if (p.x < 0 || p.x > 1) p.vx = -p.vx;\n    if (p.y < 0 || p.y > 1) p.vy = -p.vy;\n    p.x = Math.max(0, Math.min(1, p.x));\n    p.y = Math.max(0, Math.min(1, p.y));\n\n    p5.circle(p.x * viji.width, p.y * viji.height, r * 2);\n  }\n}\n",
+          "sceneFile": "timing-delta-p5.scene.js"
+        },
+        {
+          "type": "text",
+          "markdown": "## When to Use `viji.time` vs `viji.deltaTime`\n\n| Use Case | Property | Why |\n|----------|----------|-----|\n| `p5.sin()` / `p5.cos()` animation | `viji.time` | Periodic functions need absolute time |\n| Hue cycling, color animation | `viji.time` | Continuous monotonic input |\n| Position += velocity | `viji.deltaTime` | Distance = speed × elapsed time |\n| Rotation += angular speed | `viji.deltaTime` | Angle increments must be per-second |\n| Opacity fading | `viji.deltaTime` | Fade rate is per-second |\n\n## `viji.frameCount` vs `p5.frameCount`\n\nBoth exist but have different origins:\n\n| Property | Source | Starts At |\n|----------|--------|-----------|\n| `viji.frameCount` | Viji runtime | 0 |\n| `p5.frameCount` | P5 internal | 1 |\n\n`viji.frameCount` is the canonical frame counter across all renderers. It increments by 1 every frame and is consistent whether you're in a native, P5, or shader scene. `p5.frameCount` is maintained by P5 internally and may differ by 1. Use `viji.frameCount` for consistency.\n\n## `viji.fps` — Target Frame Rate\n\n`viji.fps` is the **target** frame rate based on the host's configuration, not a measured value:\n\n- `frameRateMode: 'full'` → screen refresh rate (typically 60 or 120)\n- `frameRateMode: 'half'` → half the screen refresh rate (typically 30 or 60)\n\nThis value is stable and does not fluctuate. Don't use it for animation timing — use `viji.time` or `viji.deltaTime` instead.\n\n> [!NOTE]\n> P5's `frameRate()` function is not available in Viji — the host controls the render loop.\n\n## Frame-Rate Independence\n\n> [!NOTE]\n> Always use `viji.width` and `viji.height` for positioning and sizing, and `viji.deltaTime` for frame-rate-independent animation. Never hardcode pixel values or assume a specific frame rate.\n\n```javascript\n// Bad — speed depends on frame rate\nangle += 0.02;\n\n// Good — same visual speed at any frame rate\nangle += 1.2 * viji.deltaTime; // 1.2 radians per second\n```\n\n## Next Steps\n\n- [Canvas & Resolution](/p5/canvas-resolution) — [`viji.width`](/p5/canvas-resolution), [`viji.height`](/p5/canvas-resolution), responsive layouts\n- [Scene Structure](/p5/scene-structure) — `setup()`, `render()`, lifecycle\n- [Parameters](/p5/parameters) — sliders, colors, toggles\n- [Native Timing](/native/timing) — timing in the native renderer\n- [Shader Timing](/shader/timing) — `u_time`, `u_deltaTime`, `u_frame`, `u_fps`\n- [API Reference](/p5/api-reference) — full list of everything available"
+        }
+      ]
+    },
+    "p5-parameters-overview": {
+      "id": "p5-parameters-overview",
+      "title": "Parameters",
+      "description": "The Viji parameter system in P5 scenes — sliders, colors, toggles, and more for artist-controllable inputs.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Parameters\n\nParameters give users real-time control over your P5 scene. Define them at the top level, and Viji renders corresponding UI controls in the host application. Read `.value` inside `render()` to get the current state.\n\n## Parameter Types\n\n| Type | Function | Value | Use For |\n|---|---|---|---|\n| [Slider](slider/) | [`viji.slider(default, config)`](slider/) | `number` | Continuous numeric ranges (speed, size, opacity) |\n| [Number](number/) | [`viji.number(default, config)`](number/) | `number` | Precise numeric input (counts, thresholds) |\n| [Color](color/) | [`viji.color(default, config)`](color/) | `string` | Hex color values (`'#rrggbb'`) |\n| [Toggle](toggle/) | [`viji.toggle(default, config)`](toggle/) | `boolean` | On/off switches (enable audio, show trail) |\n| [Select](select/) | [`viji.select(default, config)`](select/) | `string \\| number` | Dropdown from predefined options (blend mode, shape type) |\n| [Text](text/) | [`viji.text(default, config)`](text/) | `string` | Free-form text input (titles, labels) |\n| [Image](image/) | [`viji.image(default, config)`](image/) | `ImageBitmap \\| null` | User-uploaded images and textures |\n| [Button](button/) | [`viji.button(config)`](button/) | `boolean` | Momentary trigger — true for 1 frame (resets, spawns) |\n\n## Basic Pattern\n\n```javascript\n// @renderer p5\n\n// 1. Define at top level — runs once\nconst speed = viji.slider(1, { min: 0.1, max: 5, label: 'Speed' });\nconst color = viji.color('#ff6600', { label: 'Color' });\nconst mirror = viji.toggle(false, { label: 'Mirror' });\n\n// 2. Read .value in render() — updates in real-time\nfunction render(viji, p5) {\n  const r = parseInt(color.value.slice(1, 3), 16);\n  const g = parseInt(color.value.slice(3, 5), 16);\n  const b = parseInt(color.value.slice(5, 7), 16);\n  p5.fill(r, g, b);\n  // speed.value, mirror.value, etc.\n}\n```\n\n> [!WARNING]\n> Parameters must be declared at the **top level** of your scene, never inside `setup()` or `render()`. They are registered once and sent to the host before either function runs. Declaring them inside `setup()` would register the parameter too late — no UI control would appear. Declaring them inside `render()` would re-register the parameter every frame, resetting its value to the default.\n\n## Image Parameters in P5\n\nWhen using [`viji.image()`](image/) with P5 drawing functions, use the `.p5` property instead of `.value`:\n\n```javascript\nconst photo = viji.image(null, { label: 'Photo' });\n\nfunction render(viji, p5) {\n  if (photo.value) {\n    p5.image(photo.p5, 0, 0, viji.width, viji.height);\n  }\n}\n```\n\nThe `.p5` property wraps the raw image data in a P5-compatible object. Use `.value` to check if an image is loaded, and `.p5` when passing to P5 drawing functions.\n\n## Common Config Keys\n\nAll parameter types share these optional configuration keys:\n\n| Key | Type | Default | Description |\n|---|---|---|---|\n| `label` | `string` | **(required)** | Display name shown in the parameter UI |\n| `description` | `string` | — | Tooltip or help text |\n| `group` | `string` | `'general'` | Group name for organizing parameters — see [Grouping](grouping/) |\n| `category` | `ParameterCategory` | `'general'` | Controls visibility based on capabilities — see [Categories](categories/) |\n\n## Organization\n\nAs scenes grow, you'll want to organize parameters into logical sections and control when they're visible:\n\n- **[Grouping](grouping/)** — Collect related parameters under named groups (e.g., \"animation\", \"shape\", \"audio\"). Parameters with the same `group` string appear together in the UI.\n- **[Categories](categories/)** — Tag parameters as `'general'`, `'audio'`, `'video'`, or `'interaction'` to automatically show/hide them based on what inputs are currently active.\n\n## Related\n\n- [Slider](slider/) — the most common parameter type\n- [Image](image/) — image parameters with the `.p5` property\n- [Grouping](grouping/) — organizing parameters into named groups\n- [Categories](categories/) — visibility based on capabilities\n- [Native Parameters](/native/parameters) — same system in the native renderer\n- [Shader Parameters](/shader/parameters) — comment-directive syntax for shaders\n- [Best Practices](/getting-started/best-practices) — essential patterns for all renderers"
+        }
+      ]
+    },
+    "p5-param-slider": {
+      "id": "p5-param-slider",
+      "title": "Slider Parameter",
+      "description": "Create a numeric slider control with configurable range and step size in P5.js scenes.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# viji.slider()\n\n```\nslider(defaultValue: number, config: SliderConfig): SliderParameter\n```\n\nCreates a numeric slider parameter. The host renders it as a draggable slider control. Define it at the top level and read `.value` inside `render()`.\n\n## Parameters\n\n| Name | Type | Required | Default | Description |\n|------|------|----------|---------|-------------|\n| `defaultValue` | `number` | Yes | — | Initial value of the slider |\n| `config.min` | `number` | No | `0` | Minimum allowed value |\n| `config.max` | `number` | No | `100` | Maximum allowed value |\n| `config.step` | `number` | No | `1` | Increment between values |\n| `config.label` | `string` | Yes | — | Display name shown in the parameter UI |\n| `config.description` | `string` | No | — | Tooltip or help text |\n| `config.group` | `string` | No | `'general'` | Group name — see [Grouping](../grouping/) |\n| `config.category` | `ParameterCategory` | No | `'general'` | Visibility category — see [Categories](../categories/) |\n\n## Return Value\n\nReturns a `SliderParameter` object:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `value` | `number` | Current slider value. Updates in real-time when the user moves the slider. |\n| `min` | `number` | Minimum value |\n| `max` | `number` | Maximum value |\n| `step` | `number` | Step increment |\n| `label` | `string` | Display label |\n| `description` | `string \\| undefined` | Description text |\n| `group` | `string` | Group name |\n| `category` | `ParameterCategory` | Parameter category |\n\n## Usage\n\n```javascript\nconst radius = viji.slider(0.15, {\n  min: 0.02,\n  max: 0.5,\n  step: 0.01,\n  label: 'Radius'\n});\n\nfunction render(viji, p5) {\n  p5.background(0);\n  p5.fill(255);\n  p5.noStroke();\n  const r = radius.value * Math.min(p5.width, p5.height);\n  p5.ellipse(p5.width / 2, p5.height / 2, r * 2);\n}\n```\n\n> [!NOTE]\n> Parameters must be defined at the top level of your scene, not inside `setup()` or `render()`. They are registered once and sent to the host before either function runs. Defining them inside `setup()` would register the parameter too late — no UI control would appear. Defining them inside `render()` would re-register the parameter every frame, resetting its value to the default."
+        },
+        {
+          "type": "live-example",
+          "title": "Slider Control",
+          "sceneCode": "const bg = viji.color('#0f0f1a', { label: 'Background' });\nconst dotColor = viji.color('#44ddff', { label: 'Color' });\nconst radius = viji.slider(0.25, { min: 0.05, max: 0.45, step: 0.01, label: 'Radius' });\nconst count = viji.slider(12, { min: 3, max: 30, step: 1, label: 'Count' });\nconst speed = viji.slider(1, { min: 0, max: 5, step: 0.1, label: 'Speed' });\n\nfunction render(viji, p5) {\n  p5.background(bg.value);\n  p5.fill(dotColor.value);\n  p5.noStroke();\n\n  const unit = Math.min(p5.width, p5.height);\n  const r = unit * radius.value;\n  const n = count.value;\n  const dotR = unit * 0.02;\n\n  for (let i = 0; i < n; i++) {\n    const a = (i / n) * p5.TWO_PI + viji.time * speed.value;\n    const x = p5.width / 2 + Math.cos(a) * r;\n    const y = p5.height / 2 + Math.sin(a) * r;\n    p5.ellipse(x, y, dotR * 2);\n  }\n}\n",
+          "sceneFile": "slider-p5.scene.js"
+        },
+        {
+          "type": "text",
+          "markdown": "## Resolution-Agnostic Sizing\n\nWhen using a slider to control sizes or positions, use normalized values (`0` to `1`) and scale relative to `p5.width` and `p5.height`:\n\n```javascript\nconst size = viji.slider(0.15, {\n  min: 0.02,\n  max: 0.5,\n  step: 0.01,\n  label: 'Size'\n});\n\nfunction render(viji, p5) {\n  const pixelSize = size.value * Math.min(p5.width, p5.height);\n  // pixelSize adapts automatically to any resolution\n}\n```\n\n## Related\n\n- [Color](../color/) — color picker parameter\n- [Number](../number/) — numeric input without a slider track\n- [Select](../select/) — dropdown selection from predefined options\n- [Grouping](../grouping/) — organizing parameters into named groups\n- [Categories](../categories/) — controlling parameter visibility\n- [Native Slider](/native/parameters/slider) — equivalent for the Native renderer\n- [Shader Slider](/shader/parameters/slider) — equivalent for the Shader renderer"
+        }
+      ]
+    },
+    "p5-param-color": {
+      "id": "p5-param-color",
+      "title": "Color Parameter",
+      "description": "Create a color picker control that returns a hex color string in P5.js scenes.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# viji.color()\n\n```\ncolor(defaultValue: string, config: ColorConfig): ColorParameter\n```\n\nCreates a color picker parameter. The host renders it as a color swatch that opens a full color picker when clicked.\n\n## Parameters\n\n| Name | Type | Required | Default | Description |\n|------|------|----------|---------|-------------|\n| `defaultValue` | `string` | Yes | — | Initial hex color (e.g., `'#ff6600'`) |\n| `config.label` | `string` | Yes | — | Display name shown in the parameter UI |\n| `config.description` | `string` | No | — | Tooltip or help text |\n| `config.group` | `string` | No | `'general'` | Group name — see [Grouping](../grouping/) |\n| `config.category` | `ParameterCategory` | No | `'general'` | Visibility category — see [Categories](../categories/) |\n\n## Return Value\n\nReturns a `ColorParameter` object:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `value` | `string` | Current hex color (e.g., `'#ff6600'`). Updates in real-time. |\n| `label` | `string` | Display label |\n| `description` | `string \\| undefined` | Description text |\n| `group` | `string` | Group name |\n| `category` | `ParameterCategory` | Parameter category |\n\n## Usage\n\n```javascript\nconst bg = viji.color('#1a1a2e', { label: 'Background' });\nconst accent = viji.color('#ff6600', { label: 'Accent' });\n\nfunction render(viji, p5) {\n  p5.background(bg.value);\n  p5.fill(accent.value);\n  p5.noStroke();\n  p5.ellipse(p5.width / 2, p5.height / 2, p5.width * 0.5);\n}\n```\n\nThe `.value` is always a 6-digit hex string (`#rrggbb`). P5.js accepts hex strings directly in `p5.fill()`, `p5.stroke()`, and `p5.background()`.\n\n> [!NOTE]\n> Parameters must be defined at the top level of your scene, not inside `setup()` or `render()`. They are registered once and sent to the host before either function runs. Defining them inside `setup()` would register the parameter too late — no UI control would appear. Defining them inside `render()` would re-register the parameter every frame, resetting its value to the default."
+        },
+        {
+          "type": "live-example",
+          "title": "Color Picker",
+          "sceneCode": "const bg = viji.color('#0f0f1a', { label: 'Background' });\nconst color1 = viji.color('#ff4488', { label: 'Color 1', group: 'colors' });\nconst color2 = viji.color('#4488ff', { label: 'Color 2', group: 'colors' });\nconst count = viji.slider(6, { min: 2, max: 16, step: 1, label: 'Count' });\n\nfunction render(viji, p5) {\n  p5.background(bg.value);\n  p5.noStroke();\n\n  const n = count.value;\n  for (let i = 0; i < n; i++) {\n    const t = i / (n - 1);\n    const col = p5.lerpColor(p5.color(color1.value), p5.color(color2.value), t);\n    p5.fill(col);\n    const a = (i / n) * p5.TWO_PI + viji.time;\n    const r = Math.min(p5.width, p5.height) * 0.3;\n    const x = p5.width / 2 + Math.cos(a) * r;\n    const y = p5.height / 2 + Math.sin(a) * r;\n    p5.ellipse(x, y, Math.min(p5.width, p5.height) * 0.08);\n  }\n}\n",
+          "sceneFile": "color-p5.scene.js"
+        },
+        {
+          "type": "text",
+          "markdown": "## Parsing for P5 Color Functions\n\nIf you need to decompose a hex value for use with `p5.color()` or alpha blending:\n\n```javascript\nconst c = viji.color('#ff6600', { label: 'Color' });\n\nfunction render(viji, p5) {\n  const col = p5.color(c.value);\n  col.setAlpha(128);\n  p5.fill(col);\n  // ...\n}\n```\n\n## Related\n\n- [Slider](../slider/) — numeric slider parameter\n- [Toggle](../toggle/) — boolean on/off parameter\n- [Grouping](../grouping/) — organizing parameters into named groups\n- [Categories](../categories/) — controlling parameter visibility\n- [Native Color](/native/parameters/color) — equivalent for the Native renderer\n- [Shader Color](/shader/parameters/color) — equivalent for the Shader renderer"
+        }
+      ]
+    },
+    "p5-param-toggle": {
+      "id": "p5-param-toggle",
+      "title": "Toggle Parameter",
       "description": "Create a boolean on/off switch for enabling or disabling P5.js scene features.",
       "content": [
         {
@@ -1632,7 +2263,11 @@ export const docsApi = {
           "type": "live-example",
           "title": "P5 Parameter Categories",
           "sceneCode": "// @renderer p5\r\n\r\nconst baseColor = viji.color('#4488ff', { label: 'Base Color', category: 'general' });\r\nconst pulseAmount = viji.slider(0.3, { min: 0, max: 1, step: 0.01, label: 'Audio Pulse', category: 'audio' });\r\nconst showMouse = viji.toggle(true, { label: 'Mouse Dot', category: 'interaction' });\r\n\r\nlet angle = 0;\r\n\r\nfunction render(viji, p5) {\r\n  p5.background(10, 10, 30, 40);\r\n\r\n  angle += viji.deltaTime;\r\n\r\n  const r = parseInt(baseColor.value.slice(1, 3), 16);\r\n  const g = parseInt(baseColor.value.slice(3, 5), 16);\r\n  const b = parseInt(baseColor.value.slice(5, 7), 16);\r\n\r\n  let pulse = 0;\r\n  if (viji.audio.isConnected) {\r\n    pulse = viji.audio.volume.current * pulseAmount.value;\r\n  }\r\n\r\n  const baseR = Math.min(viji.width, viji.height) * (0.1 + pulse * 0.15);\r\n  const cx = viji.width / 2 + p5.cos(angle) * viji.width * 0.2;\r\n  const cy = viji.height / 2 + p5.sin(angle * 0.7) * viji.height * 0.2;\r\n\r\n  p5.noStroke();\r\n  p5.fill(r, g, b);\r\n  p5.circle(cx, cy, baseR * 2);\r\n\r\n  if (showMouse.value && viji.mouse.isInCanvas) {\r\n    p5.fill(255, 255, 255, 200);\r\n    p5.circle(viji.mouse.x, viji.mouse.y, Math.min(viji.width, viji.height) * 0.04);\r\n  }\r\n}\r\n",
-          "sceneFile": "categories-demo.scene.js"
+          "sceneFile": "categories-demo.scene.js",
+          "capabilities": {
+            "audio": true,
+            "interaction": true
+          }
         },
         {
           "type": "text",
@@ -1640,6 +2275,390 @@ export const docsApi = {
         }
       ]
     },
+    "p5-audio-overview": {
+      "id": "p5-audio-overview",
+      "title": "Audio",
+      "description": "Real-time audio analysis API in P5.js scenes — volume, frequency bands, beat detection, spectral features, and raw FFT/waveform data.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Audio\n\nViji provides real-time audio analysis when the host application connects an audio stream. In P5.js scenes, all audio data is accessed through the `viji` object passed to your `render()` function — exactly the same API as the [Native renderer](../../native/audio/).\n\n## API Overview\n\n| Sub-object | Description | Page |\n|------------|-------------|------|\n| [`isConnected`](connection/) | Whether an audio stream is active | [Connection & Lifecycle](connection/) |\n| [`volume`](volume/) | RMS level, peak amplitude, smoothed volume | [Volume](volume/) |\n| [`bands`](bands/) | Five frequency bands (instant and smoothed) | [Frequency Bands](bands/) |\n| [`beat`](beat/) | Beat energy curves, triggers, events, BPM | [Beat Detection](beat/) |\n| [`spectral`](spectral/) | Brightness and flatness features | [Spectral Analysis](spectral/) |\n| [`getFrequencyData()`](frequency-data/) | Raw FFT spectrum as `Uint8Array` | [Frequency Data](frequency-data/) |\n| [`getWaveform()`](waveform/) | Raw time-domain samples as `Float32Array` | [Waveform](waveform/) |\n\n## Basic Usage\n\n```javascript\nfunction setup(viji, p5) {\n  p5.colorMode(p5.HSB, 360, 100, 100, 1);\n}\n\nfunction render(viji, p5) {\n  p5.background(0, 0, 10);\n\n  if (!viji.audio.isConnected) {\n    p5.fill(100);\n    p5.textAlign(p5.CENTER, p5.CENTER);\n    p5.textSize(viji.width * 0.04);\n    p5.text('Waiting for audio...', viji.width / 2, viji.height / 2);\n    return;\n  }\n\n  const vol = viji.audio.volume.smoothed;\n  const r = Math.min(viji.width, viji.height) * (0.1 + vol * 0.3);\n\n  p5.noStroke();\n  p5.fill(200 + vol * 160, 80, 60);\n  p5.circle(viji.width / 2, viji.height / 2, r * 2);\n}\n```\n\n> [!NOTE]\n> Always check [`viji.audio.isConnected`](connection/) before reading audio values. When no audio stream is connected, all values are at their defaults (zeros, with `bpm` at 120).\n\n> [!NOTE]\n> P5.js has its own `p5.sound` library — do not use it in Viji scenes. Audio analysis is handled by the Viji host and delivered through `viji.audio`."
+        },
+        {
+          "type": "live-example",
+          "title": "Audio-Reactive Circle",
+          "sceneCode": "function setup(viji, p5) {\n  p5.colorMode(p5.HSB, 360, 100, 100, 1);\n}\n\nfunction render(viji, p5) {\n  p5.background(0, 0, 10);\n\n  if (!viji.audio.isConnected) {\n    p5.fill(100);\n    p5.textAlign(p5.CENTER, p5.CENTER);\n    p5.textSize(viji.width * 0.04);\n    p5.text('Waiting for audio...', viji.width / 2, viji.height / 2);\n    return;\n  }\n\n  const vol = viji.audio.volume.smoothed;\n  const r = Math.min(viji.width, viji.height) * (0.1 + vol * 0.3);\n\n  p5.noStroke();\n  p5.fill(200 + vol * 160, 80, 60);\n  p5.circle(viji.width / 2, viji.height / 2, r * 2);\n}\n",
+          "sceneFile": "audio-overview.scene.js"
+        },
+        {
+          "type": "text",
+          "markdown": "## Related\n\n- [Connection & Lifecycle](connection/)\n- [Volume](volume/)\n- [Frequency Bands](bands/)\n- [Beat Detection](beat/)\n- [Spectral Analysis](spectral/)\n- [Frequency Data](frequency-data/)\n- [Waveform](waveform/)\n- [Native Audio](/native/audio)\n- [Shader Audio Uniforms](/shader/audio)"
+        }
+      ]
+    },
+    "p5-audio-connection": {
+      "id": "p5-audio-connection",
+      "title": "Connection & Lifecycle",
+      "description": "Audio connection state, guard patterns, and default values in P5.js scenes.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Connection & Lifecycle\n\nThe `viji.audio.isConnected` property indicates whether the host application has provided an active audio stream. All other audio properties depend on this — when disconnected, they hold default values.\n\n## Property Reference\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `viji.audio.isConnected` | `boolean` | `true` when an audio stream is active and analysis results are flowing |\n\n## Guard Pattern\n\nAlways check `isConnected` before using audio data. This prevents your scene from reacting to default values as if they were real audio input.\n\n```javascript\nfunction render(viji, p5) {\n  p5.background(0, 0, 10);\n\n  if (!viji.audio.isConnected) {\n    p5.fill(100);\n    p5.textAlign(p5.CENTER, p5.CENTER);\n    p5.textSize(viji.width * 0.04);\n    p5.text('No audio connected', viji.width / 2, viji.height / 2);\n    return;\n  }\n\n  const vol = viji.audio.volume.current;\n  p5.noStroke();\n  p5.fill(100, 200, 255, vol * 255);\n  p5.rect(0, 0, viji.width * vol, viji.height);\n}\n```\n\n## Connection Lifecycle\n\n1. **Disconnected (default)** — `isConnected` is `false`. All audio values are at their defaults.\n2. **Connected** — The host provides a `MediaStream`. `isConnected` becomes `true` and audio analysis values begin updating every frame.\n3. **Disconnected again** — The stream is removed. `isConnected` returns to `false` and all values reset to defaults.\n\n## Default Values\n\nWhen `isConnected` is `false`, all audio properties hold these values:\n\n| Property | Default |\n|----------|---------|\n| `volume.current`, `volume.peak`, `volume.smoothed` | `0` |\n| All `bands.*` (instant and smoothed) | `0` |\n| `beat.kick`, `.snare`, `.hat`, `.any` (and smoothed) | `0` |\n| `beat.triggers.kick`, `.snare`, `.hat`, `.any` | `false` |\n| `beat.events` | `[]` (empty array) |\n| `beat.bpm` | `120` |\n| `beat.confidence` | `0` |\n| `beat.isLocked` | `false` |\n| `spectral.brightness`, `spectral.flatness` | `0` |\n| `getFrequencyData()` | Empty `Uint8Array` (length 0) |\n| `getWaveform()` | Empty `Float32Array` (length 0) |\n\n> [!NOTE]\n> The default `bpm` is `120`, not `0`. This allows BPM-based calculations to produce sensible output even before audio is connected."
+        },
+        {
+          "type": "live-example",
+          "title": "Connection State",
+          "sceneCode": "function setup(viji, p5) {\n  p5.textAlign(p5.CENTER, p5.CENTER);\n}\n\nfunction render(viji, p5) {\n  p5.background(15);\n\n  const fontSize = Math.min(viji.width, viji.height) * 0.035;\n  p5.textSize(fontSize);\n\n  if (!viji.audio.isConnected) {\n    const pulse = 0.4 + Math.sin(viji.time * 2) * 0.15;\n    p5.fill(255, 255, 255, pulse * 255);\n    p5.text('Waiting for audio stream...', viji.width / 2, viji.height / 2 - fontSize);\n    p5.fill(80);\n    p5.text('Connect a microphone or audio source', viji.width / 2, viji.height / 2 + fontSize);\n    return;\n  }\n\n  const vol = viji.audio.volume.smoothed;\n  const barW = viji.width * 0.6;\n  const barH = Math.min(viji.width, viji.height) * 0.06;\n  const barX = (viji.width - barW) / 2;\n  const barY = viji.height / 2 - barH / 2;\n\n  p5.noStroke();\n  p5.fill(30);\n  p5.rect(barX, barY, barW, barH);\n  p5.fill(76, 175, 80);\n  p5.rect(barX, barY, barW * vol, barH);\n\n  p5.fill(170);\n  p5.text('Audio connected — volume: ' + vol.toFixed(2), viji.width / 2, barY - fontSize);\n}\n",
+          "sceneFile": "connection-demo.scene.js"
+        },
+        {
+          "type": "text",
+          "markdown": "## Related\n\n- [Audio Overview](../)\n- [Volume](../volume/)\n- [Beat Detection](../beat/)\n- [Native Connection & Lifecycle](/native/audio/connection)"
+        }
+      ]
+    },
+    "p5-audio-volume": {
+      "id": "p5-audio-volume",
+      "title": "Volume",
+      "description": "Real-time volume level, peak amplitude, and smoothed volume in P5.js scenes.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Volume\n\nThe `viji.audio.volume` object provides three measures of the overall audio loudness — instant RMS level, peak amplitude, and a smoothed value ideal for driving animations.\n\n## Property Reference\n\n| Property | Type | Range | Description |\n|----------|------|-------|-------------|\n| `viji.audio.volume.current` | `number` | 0–1 | RMS volume level (instant) |\n| `viji.audio.volume.peak` | `number` | 0–1 | Peak amplitude (instant) |\n| `viji.audio.volume.smoothed` | `number` | 0–1 | Smoothed volume (200ms decay envelope) |\n\n### Instant vs Smoothed\n\n- **`current`** and **`peak`** update every frame to reflect the latest audio analysis. They can jump sharply between frames.\n- **`smoothed`** follows a 200ms decay envelope — it rises quickly with the signal but falls gradually. Use this for smooth animations that should not flicker.\n\n## Usage\n\n```javascript\nfunction setup(viji, p5) {\n  p5.textAlign(p5.LEFT, p5.TOP);\n}\n\nfunction render(viji, p5) {\n  p5.background(15);\n\n  if (!viji.audio.isConnected) return;\n\n  const vol = viji.audio.volume;\n  const barH = viji.height * 0.06;\n  const gap = barH * 0.5;\n  const barW = viji.width * 0.7;\n  const x = (viji.width - barW) / 2;\n  let y = viji.height * 0.3;\n\n  p5.noStroke();\n  p5.textSize(barH * 0.7);\n\n  // Current (instant RMS)\n  p5.fill(76, 175, 80);\n  p5.rect(x, y, barW * vol.current, barH);\n  p5.fill(170);\n  p5.text('current: ' + vol.current.toFixed(3), x, y - barH);\n  y += barH + gap;\n\n  // Peak\n  p5.fill(255, 152, 0);\n  p5.rect(x, y, barW * vol.peak, barH);\n  p5.fill(170);\n  p5.text('peak: ' + vol.peak.toFixed(3), x, y - barH);\n  y += barH + gap;\n\n  // Smoothed\n  p5.fill(33, 150, 243);\n  p5.rect(x, y, barW * vol.smoothed, barH);\n  p5.fill(170);\n  p5.text('smoothed: ' + vol.smoothed.toFixed(3), x, y - barH);\n}\n```\n\n> [!NOTE]\n> All volume values are normalized to 0–1 using auto-gain (3-second window). This means the values adapt to the input level over time, providing consistent visual output regardless of whether the audio source is quiet or loud."
+        },
+        {
+          "type": "live-example",
+          "title": "Volume Meters",
+          "sceneCode": "function setup(viji, p5) {\n  p5.textAlign(p5.LEFT, p5.TOP);\n}\n\nfunction render(viji, p5) {\n  p5.background(15);\n\n  if (!viji.audio.isConnected) {\n    p5.fill(100);\n    p5.textAlign(p5.CENTER, p5.CENTER);\n    p5.textSize(viji.width * 0.04);\n    p5.text('Waiting for audio...', viji.width / 2, viji.height / 2);\n    return;\n  }\n\n  const vol = viji.audio.volume;\n  const barH = viji.height * 0.06;\n  const gap = barH * 0.5;\n  const barW = viji.width * 0.7;\n  const x = (viji.width - barW) / 2;\n  let y = viji.height * 0.3;\n\n  p5.noStroke();\n  p5.textSize(barH * 0.7);\n  p5.textAlign(p5.LEFT, p5.TOP);\n\n  p5.fill(76, 175, 80);\n  p5.rect(x, y, barW * vol.current, barH);\n  p5.fill(170);\n  p5.text('current: ' + vol.current.toFixed(3), x, y - barH);\n  y += barH + gap;\n\n  p5.fill(255, 152, 0);\n  p5.rect(x, y, barW * vol.peak, barH);\n  p5.fill(170);\n  p5.text('peak: ' + vol.peak.toFixed(3), x, y - barH);\n  y += barH + gap;\n\n  p5.fill(33, 150, 243);\n  p5.rect(x, y, barW * vol.smoothed, barH);\n  p5.fill(170);\n  p5.text('smoothed: ' + vol.smoothed.toFixed(3), x, y - barH);\n}\n",
+          "sceneFile": "volume-demo.scene.js"
+        },
+        {
+          "type": "text",
+          "markdown": "## Related\n\n- [Audio Overview](../)\n- [Connection & Lifecycle](../connection/)\n- [Frequency Bands](../bands/)\n- [Beat Detection](../beat/)"
+        }
+      ]
+    },
+    "p5-audio-bands": {
+      "id": "p5-audio-bands",
+      "title": "Frequency Bands",
+      "description": "Five frequency bands with instant and smoothed variants in P5.js scenes.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Frequency Bands\n\nThe `viji.audio.bands` object splits the audio spectrum into five named frequency bands. Each band has an instant value and a smoothed variant.\n\n## Property Reference\n\n### Instant Bands\n\n| Property | Hz Range | Description |\n|----------|----------|-------------|\n| `viji.audio.bands.low` | 20–120 Hz | Bass / kick range (0–1) |\n| `viji.audio.bands.lowMid` | 120–400 Hz | Low-mid range (0–1) |\n| `viji.audio.bands.mid` | 400–1600 Hz | Vocals, instruments (0–1) |\n| `viji.audio.bands.highMid` | 1600–6000 Hz | Cymbals, hi-hats (0–1) |\n| `viji.audio.bands.high` | 6000–16000 Hz | Air, brilliance (0–1) |\n\n### Smoothed Bands\n\nSmoothed variants follow a 150ms decay envelope — they rise quickly but fall gradually.\n\n| Property | Hz Range | Description |\n|----------|----------|-------------|\n| `viji.audio.bands.lowSmoothed` | 20–120 Hz | Smoothed bass (0–1) |\n| `viji.audio.bands.lowMidSmoothed` | 120–400 Hz | Smoothed low-mid (0–1) |\n| `viji.audio.bands.midSmoothed` | 400–1600 Hz | Smoothed mid (0–1) |\n| `viji.audio.bands.highMidSmoothed` | 1600–6000 Hz | Smoothed high-mid (0–1) |\n| `viji.audio.bands.highSmoothed` | 6000–16000 Hz | Smoothed high (0–1) |\n\n### Instant vs Smoothed\n\n- **Instant** values reflect the current frame's frequency energy. They can change abruptly between frames.\n- **Smoothed** values follow a 150ms decay envelope. Use these for animations that should move fluidly rather than flicker.\n\n## Usage\n\n```javascript\nfunction render(viji, p5) {\n  p5.background(15);\n\n  if (!viji.audio.isConnected) return;\n\n  const bands = viji.audio.bands;\n  const names = ['low', 'lowMid', 'mid', 'highMid', 'high'];\n  const colors = [\n    p5.color(231, 76, 60),\n    p5.color(230, 126, 34),\n    p5.color(241, 196, 15),\n    p5.color(46, 204, 113),\n    p5.color(52, 152, 219)\n  ];\n  const barW = viji.width / names.length;\n\n  p5.noStroke();\n\n  for (let i = 0; i < names.length; i++) {\n    const instant = bands[names[i]];\n    const smoothed = bands[names[i] + 'Smoothed'];\n    const x = i * barW;\n\n    const c = colors[i];\n    p5.fill(p5.red(c), p5.green(c), p5.blue(c), 60);\n    p5.rect(x + 2, viji.height - smoothed * viji.height, barW - 4, smoothed * viji.height);\n\n    p5.fill(c);\n    p5.rect(x + 2, viji.height - instant * viji.height, barW - 4, instant * viji.height);\n  }\n\n  p5.fill(170);\n  p5.textAlign(p5.CENTER, p5.BOTTOM);\n  p5.textSize(Math.min(viji.width, viji.height) * 0.03);\n  for (let i = 0; i < names.length; i++) {\n    p5.text(names[i], i * barW + barW / 2, viji.height - 8);\n  }\n}\n```\n\n> [!NOTE]\n> All band values are independently normalized to 0–1 using per-band auto-gain (3-second window). A quiet high-frequency signal can produce the same band value as a loud bass signal."
+        },
+        {
+          "type": "live-example",
+          "title": "Frequency Band Bars",
+          "sceneCode": "function render(viji, p5) {\n  p5.background(15);\n\n  if (!viji.audio.isConnected) {\n    p5.fill(100);\n    p5.textAlign(p5.CENTER, p5.CENTER);\n    p5.textSize(viji.width * 0.04);\n    p5.text('Waiting for audio...', viji.width / 2, viji.height / 2);\n    return;\n  }\n\n  const bands = viji.audio.bands;\n  const names = ['low', 'lowMid', 'mid', 'highMid', 'high'];\n  const colors = [\n    p5.color(231, 76, 60),\n    p5.color(230, 126, 34),\n    p5.color(241, 196, 15),\n    p5.color(46, 204, 113),\n    p5.color(52, 152, 219)\n  ];\n  const barW = viji.width / names.length;\n\n  p5.noStroke();\n\n  for (let i = 0; i < names.length; i++) {\n    const instant = bands[names[i]];\n    const smoothed = bands[names[i] + 'Smoothed'];\n    const x = i * barW;\n\n    const c = colors[i];\n    p5.fill(p5.red(c), p5.green(c), p5.blue(c), 60);\n    p5.rect(x + 2, viji.height - smoothed * viji.height, barW - 4, smoothed * viji.height);\n\n    p5.fill(c);\n    p5.rect(x + 2, viji.height - instant * viji.height, barW - 4, instant * viji.height);\n  }\n\n  p5.fill(170);\n  p5.textAlign(p5.CENTER, p5.BOTTOM);\n  p5.textSize(Math.min(viji.width, viji.height) * 0.03);\n  for (let i = 0; i < names.length; i++) {\n    p5.text(names[i], i * barW + barW / 2, viji.height - 8);\n  }\n}\n",
+          "sceneFile": "bands-demo.scene.js"
+        },
+        {
+          "type": "text",
+          "markdown": "## Related\n\n- [Audio Overview](../)\n- [Volume](../volume/)\n- [Beat Detection](../beat/)\n- [Frequency Data](../frequency-data/)\n- [Spectral Analysis](../spectral/)"
+        }
+      ]
+    },
+    "p5-audio-beat": {
+      "id": "p5-audio-beat",
+      "title": "Beat Detection",
+      "description": "Energy curves, boolean triggers, detailed beat events, BPM tracking, and confidence scoring in P5.js scenes.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Beat Detection\n\nThe `viji.audio.beat` object provides multiple layers of beat information — from simple energy curves to precise boolean triggers, detailed event arrays, and BPM tracking.\n\n## Property Reference\n\n### Energy Curves (fast decay)\n\nEnergy curves track beat intensity with a 300ms fast decay. They peak at the moment of a beat and decay smoothly, making them ideal for scaling, pulsing, or flash effects.\n\n| Property | Type | Range | Description |\n|----------|------|-------|-------------|\n| `viji.audio.beat.kick` | `number` | 0–1 | Kick energy (300ms decay) |\n| `viji.audio.beat.snare` | `number` | 0–1 | Snare energy (300ms decay) |\n| `viji.audio.beat.hat` | `number` | 0–1 | Hi-hat energy (300ms decay) |\n| `viji.audio.beat.any` | `number` | 0–1 | Any-beat energy (300ms decay) |\n\n### Energy Curves (smoothed)\n\nSmoothed variants use a slower 500ms decay, producing a more gradual response suitable for ambient or background effects.\n\n| Property | Type | Range | Description |\n|----------|------|-------|-------------|\n| `viji.audio.beat.kickSmoothed` | `number` | 0–1 | Kick smoothed energy (500ms decay) |\n| `viji.audio.beat.snareSmoothed` | `number` | 0–1 | Snare smoothed energy (500ms decay) |\n| `viji.audio.beat.hatSmoothed` | `number` | 0–1 | Hi-hat smoothed energy (500ms decay) |\n| `viji.audio.beat.anySmoothed` | `number` | 0–1 | Any-beat smoothed energy (500ms decay) |\n\n### Triggers\n\nBoolean triggers fire on beat detection. Each trigger is **true for exactly one frame when a beat is detected, then resets**. Multiple audio analysis messages can arrive between render frames — triggers are OR-accumulated so no beat is ever lost.\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `viji.audio.beat.triggers.kick` | `boolean` | `true` for one frame when a kick is detected |\n| `viji.audio.beat.triggers.snare` | `boolean` | `true` for one frame when a snare is detected |\n| `viji.audio.beat.triggers.hat` | `boolean` | `true` for one frame when a hi-hat is detected |\n| `viji.audio.beat.triggers.any` | `boolean` | `true` for one frame when any beat is detected |\n\n### Events\n\nThe `events` array provides detailed information about every beat detected since the last frame. It may contain zero, one, or multiple events per frame.\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `viji.audio.beat.events` | `Array<BeatEvent>` | Beat events accumulated since the last frame |\n\nEach `BeatEvent` contains:\n\n| Field | Type | Description |\n|-------|------|-------------|\n| `type` | `'kick' \\| 'snare' \\| 'hat'` | Beat type |\n| `time` | `number` | Timestamp in milliseconds |\n| `strength` | `number` | Beat strength (0–1) |\n\n### Tempo\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `viji.audio.beat.bpm` | `number` | Current detected BPM (defaults to 120 when no audio) |\n| `viji.audio.beat.confidence` | `number` | Beat tracking confidence (0–1) |\n| `viji.audio.beat.isLocked` | `boolean` | `true` when the beat tracker has a stable lock on tempo |\n\n## Usage — Energy Curves\n\n```javascript\nfunction render(viji, p5) {\n  p5.background(15);\n\n  if (!viji.audio.isConnected) return;\n\n  const beat = viji.audio.beat;\n  const cx = viji.width / 2;\n  const cy = viji.height / 2;\n  const baseR = Math.min(viji.width, viji.height) * 0.08;\n\n  p5.noStroke();\n\n  // Kick — large red pulse\n  p5.fill(231, 76, 60, (0.3 + beat.kick * 0.7) * 255);\n  p5.circle(cx - viji.width * 0.2, cy, (baseR + beat.kick * baseR * 2) * 2);\n\n  // Snare — medium yellow pulse\n  p5.fill(241, 196, 15, (0.3 + beat.snare * 0.7) * 255);\n  p5.circle(cx, cy, (baseR + beat.snare * baseR * 1.5) * 2);\n\n  // Hat — small blue pulse\n  p5.fill(52, 152, 219, (0.3 + beat.hat * 0.7) * 255);\n  p5.circle(cx + viji.width * 0.2, cy, (baseR + beat.hat * baseR) * 2);\n}\n```\n\n## Usage — Triggers\n\nTriggers are ideal for discrete, one-shot actions — spawning particles, changing colors, or advancing a sequence.\n\n```javascript\nlet hue = 0;\n\nfunction setup(viji, p5) {\n  p5.colorMode(p5.HSB, 360, 100, 100, 100);\n}\n\nfunction render(viji, p5) {\n  if (!viji.audio.isConnected) return;\n\n  if (viji.audio.beat.triggers.kick) {\n    hue = (hue + 30) % 360;\n  }\n\n  p5.fill(hue, 70, 50, 10);\n  p5.rect(0, 0, viji.width, viji.height);\n\n  if (viji.audio.beat.triggers.any) {\n    const x = p5.random(viji.width);\n    const y = p5.random(viji.height);\n    const r = Math.min(viji.width, viji.height) * p5.random(0.02, 0.08);\n    p5.noStroke();\n    p5.fill(hue, 80, 60);\n    p5.circle(x, y, r * 2);\n  }\n}\n```\n\n> [!NOTE]\n> Triggers and events are accumulated between render frames and reset after each frame. This guarantees no beat is silently lost, even when the audio analysis rate (125Hz) exceeds the frame rate."
+        },
+        {
+          "type": "live-example",
+          "title": "Beat Pulses",
+          "sceneCode": "let hue = 0;\n\nfunction setup(viji, p5) {\n  p5.colorMode(p5.HSB, 360, 100, 100, 100);\n}\n\nfunction render(viji, p5) {\n  if (!viji.audio.isConnected) {\n    p5.background(0, 0, 10);\n    p5.fill(0, 0, 50);\n    p5.textAlign(p5.CENTER, p5.CENTER);\n    p5.textSize(viji.width * 0.04);\n    p5.text('Waiting for audio...', viji.width / 2, viji.height / 2);\n    return;\n  }\n\n  const beat = viji.audio.beat;\n\n  if (beat.triggers.kick) {\n    hue = (hue + 30) % 360;\n  }\n\n  p5.fill(hue, 70, 50, 8);\n  p5.rect(0, 0, viji.width, viji.height);\n\n  const cx = viji.width / 2;\n  const cy = viji.height / 2;\n  const baseR = Math.min(viji.width, viji.height) * 0.08;\n\n  p5.noStroke();\n\n  p5.fill(0, 80, 70, (0.3 + beat.kick * 0.7) * 100);\n  p5.circle(cx - viji.width * 0.2, cy, (baseR + beat.kick * baseR * 2) * 2);\n\n  p5.fill(50, 80, 70, (0.3 + beat.snare * 0.7) * 100);\n  p5.circle(cx, cy, (baseR + beat.snare * baseR * 1.5) * 2);\n\n  p5.fill(200, 80, 70, (0.3 + beat.hat * 0.7) * 100);\n  p5.circle(cx + viji.width * 0.2, cy, (baseR + beat.hat * baseR) * 2);\n\n  if (beat.triggers.any) {\n    const x = p5.random(viji.width);\n    const y = p5.random(viji.height);\n    const r = Math.min(viji.width, viji.height) * p5.random(0.02, 0.06);\n    p5.fill(hue, 80, 60);\n    p5.circle(x, y, r * 2);\n  }\n}\n",
+          "sceneFile": "beat-demo.scene.js"
+        },
+        {
+          "type": "text",
+          "markdown": "## Related\n\n- [Audio Overview](../)\n- [Volume](../volume/)\n- [Frequency Bands](../bands/)\n- [Spectral Analysis](../spectral/)"
+        }
+      ]
+    },
+    "p5-audio-spectral": {
+      "id": "p5-audio-spectral",
+      "title": "Spectral Analysis",
+      "description": "Spectral brightness and flatness features for tonal and textural audio analysis in P5.js scenes.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Spectral Analysis\n\nThe `viji.audio.spectral` object provides two high-level features derived from the frequency spectrum — brightness and flatness. These capture the tonal character of the audio without requiring you to work with raw FFT data.\n\n## Property Reference\n\n| Property | Type | Range | Description |\n|----------|------|-------|-------------|\n| `viji.audio.spectral.brightness` | `number` | 0–1 | Spectral centroid, normalized. Higher values indicate brighter, more treble-heavy sound |\n| `viji.audio.spectral.flatness` | `number` | 0–1 | Spectral flatness. Higher values indicate noisier, white-noise-like sound; lower values indicate tonal, pitched sound |\n\n### What They Measure\n\n- **Brightness** is the normalized spectral centroid — the \"center of mass\" of the frequency spectrum. A deep bass drone has low brightness; a cymbal crash has high brightness.\n- **Flatness** measures how evenly energy is distributed across frequencies. A pure sine wave has very low flatness (all energy in one bin). White noise has high flatness (energy spread evenly).\n\n## Usage\n\n```javascript\nfunction setup(viji, p5) {\n  p5.colorMode(p5.HSB, 360, 100, 100, 1);\n}\n\nfunction render(viji, p5) {\n  p5.background(0, 0, 8);\n\n  if (!viji.audio.isConnected) return;\n\n  const brightness = viji.audio.spectral.brightness;\n  const flatness = viji.audio.spectral.flatness;\n\n  const hue = 20 + brightness * 200;\n  const sat = 30 + (1 - flatness) * 60;\n\n  const r = Math.min(viji.width, viji.height) * 0.25;\n  p5.noStroke();\n  p5.fill(hue, sat, 55);\n  p5.circle(viji.width / 2, viji.height / 2, r * 2);\n\n  p5.fill(0, 0, 70);\n  p5.textAlign(p5.CENTER, p5.CENTER);\n  p5.textSize(Math.min(viji.width, viji.height) * 0.03);\n  p5.text(\n    `brightness: ${brightness.toFixed(2)}  flatness: ${flatness.toFixed(2)}`,\n    viji.width / 2,\n    viji.height * 0.88\n  );\n}\n```\n\n> [!NOTE]\n> Spectral features are derived from the same FFT data as [frequency bands](../bands/) and [frequency data](../frequency-data/), but provide a higher-level summary. Use them when you want to distinguish between tonal and noisy sections without analyzing individual bands or bins."
+        },
+        {
+          "type": "live-example",
+          "title": "Spectral Features",
+          "sceneCode": "function setup(viji, p5) {\n  p5.colorMode(p5.HSB, 360, 100, 100, 1);\n}\n\nfunction render(viji, p5) {\n  p5.background(0, 0, 8);\n\n  if (!viji.audio.isConnected) {\n    p5.fill(0, 0, 50);\n    p5.textAlign(p5.CENTER, p5.CENTER);\n    p5.textSize(viji.width * 0.04);\n    p5.text('Waiting for audio...', viji.width / 2, viji.height / 2);\n    return;\n  }\n\n  const brightness = viji.audio.spectral.brightness;\n  const flatness = viji.audio.spectral.flatness;\n\n  const hue = 20 + brightness * 200;\n  const sat = 30 + (1 - flatness) * 60;\n\n  const r = Math.min(viji.width, viji.height) * 0.25;\n  p5.noStroke();\n  p5.fill(hue, sat, 55);\n  p5.circle(viji.width / 2, viji.height / 2, r * 2);\n\n  p5.fill(0, 0, 70);\n  p5.textAlign(p5.CENTER, p5.CENTER);\n  p5.textSize(Math.min(viji.width, viji.height) * 0.03);\n  p5.text(\n    `brightness: ${brightness.toFixed(2)}  flatness: ${flatness.toFixed(2)}`,\n    viji.width / 2,\n    viji.height * 0.88\n  );\n}\n",
+          "sceneFile": "spectral-demo.scene.js"
+        },
+        {
+          "type": "text",
+          "markdown": "## Related\n\n- [Audio Overview](../)\n- [Frequency Bands](../bands/)\n- [Frequency Data](../frequency-data/)\n- [Volume](../volume/)"
+        }
+      ]
+    },
+    "p5-audio-frequency-data": {
+      "id": "p5-audio-frequency-data",
+      "title": "Frequency Data",
+      "description": "Raw FFT spectrum as a Uint8Array for custom frequency analysis and visualization in P5.js scenes.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Frequency Data\n\nThe `viji.audio.getFrequencyData()` method returns the raw FFT magnitude spectrum as a `Uint8Array`. This is the lowest-level frequency data available — use it when you need full control over how audio frequencies are visualized or analyzed.\n\n## Method Reference\n\n| Method | Returns | Description |\n|--------|---------|-------------|\n| `viji.audio.getFrequencyData()` | `Uint8Array` | FFT magnitude spectrum, 1024 bins, each 0–255 |\n\n### Data Format\n\n- **Length**: 1024 bins (derived from an FFT size of 2048)\n- **Value range**: 0–255 per bin (unsigned byte magnitude)\n- **Frequency mapping**: Bin `i` corresponds to frequency `i × (sampleRate / fftSize)`. At 44.1kHz, the first bin is ~21.5Hz and the last bin is ~22050Hz.\n- **Snapshot**: The returned array is a copy from the most recent audio analysis update — not a live buffer. Calling it multiple times in the same frame returns the same data.\n\n## Usage — Spectrum Bars\n\n```javascript\nfunction render(viji, p5) {\n  p5.background(15);\n\n  if (!viji.audio.isConnected) return;\n\n  const fft = viji.audio.getFrequencyData();\n  if (fft.length === 0) return;\n\n  p5.colorMode(p5.HSB, 360, 100, 100);\n  p5.noStroke();\n\n  const bars = 64;\n  const binCount = fft.length;\n  const logMax = Math.log(binCount);\n  const barW = viji.width / bars;\n\n  for (let i = 0; i < bars; i++) {\n    const logStart = Math.exp((i / bars) * logMax);\n    const logEnd = Math.exp(((i + 1) / bars) * logMax);\n    const startBin = Math.floor(logStart);\n    const endBin = Math.min(Math.floor(logEnd), binCount - 1);\n\n    let sum = 0;\n    let count = 0;\n    for (let b = startBin; b <= endBin; b++) {\n      sum += fft[b];\n      count++;\n    }\n    const value = count > 0 ? (sum / count) / 255 : 0;\n\n    const barH = value * viji.height * 0.9;\n    p5.fill((i / bars) * 280, 70, 35 + value * 35);\n    p5.rect(i * barW + 1, viji.height - barH, barW - 2, barH);\n  }\n}\n```\n\n## Usage — Smooth Spectrum Line\n\n```javascript\nfunction render(viji, p5) {\n  p5.background(15);\n\n  if (!viji.audio.isConnected) return;\n\n  const fft = viji.audio.getFrequencyData();\n  if (fft.length === 0) return;\n\n  p5.noFill();\n  p5.stroke(52, 152, 219);\n  p5.strokeWeight(2);\n  p5.beginShape();\n\n  const step = 4;\n  for (let i = 0; i < fft.length; i += step) {\n    const x = (i / fft.length) * viji.width;\n    const y = viji.height - (fft[i] / 255) * viji.height * 0.85;\n    p5.curveVertex(x, y);\n  }\n\n  p5.endShape();\n}\n```\n\n> [!NOTE]\n> When `viji.audio.isConnected` is `false`, `getFrequencyData()` returns an empty `Uint8Array` (length 0). Always check the length before iterating."
+        },
+        {
+          "type": "live-example",
+          "title": "Spectrum Visualizer",
+          "sceneCode": "function render(viji, p5) {\n  p5.background(15);\n\n  if (!viji.audio.isConnected) {\n    p5.fill(100);\n    p5.textAlign(p5.CENTER, p5.CENTER);\n    p5.textSize(viji.width * 0.04);\n    p5.text('Waiting for audio...', viji.width / 2, viji.height / 2);\n    return;\n  }\n\n  const fft = viji.audio.getFrequencyData();\n  if (fft.length === 0) return;\n\n  p5.colorMode(p5.HSB, 360, 100, 100);\n  p5.noStroke();\n\n  const bars = 64;\n  const binCount = fft.length;\n  const logMax = Math.log(binCount);\n  const barW = viji.width / bars;\n\n  for (let i = 0; i < bars; i++) {\n    const logStart = Math.exp((i / bars) * logMax);\n    const logEnd = Math.exp(((i + 1) / bars) * logMax);\n    const startBin = Math.floor(logStart);\n    const endBin = Math.min(Math.floor(logEnd), binCount - 1);\n\n    let sum = 0;\n    let count = 0;\n    for (let b = startBin; b <= endBin; b++) {\n      sum += fft[b];\n      count++;\n    }\n    const value = count > 0 ? (sum / count) / 255 : 0;\n\n    const barH = value * viji.height * 0.9;\n    p5.fill((i / bars) * 280, 70, 35 + value * 35);\n    p5.rect(i * barW + 1, viji.height - barH, barW - 2, barH);\n  }\n}\n",
+          "sceneFile": "frequency-data-demo.scene.js"
+        },
+        {
+          "type": "text",
+          "markdown": "## Related\n\n- [Audio Overview](../)\n- [Frequency Bands](../bands/)\n- [Waveform](../waveform/)\n- [Spectral Analysis](../spectral/)"
+        }
+      ]
+    },
+    "p5-audio-waveform": {
+      "id": "p5-audio-waveform",
+      "title": "Waveform",
+      "description": "Raw time-domain PCM samples as a Float32Array for oscilloscope-style visualizations in P5.js scenes.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Waveform\n\nThe `viji.audio.getWaveform()` method returns raw time-domain audio samples as a `Float32Array`. This is the audio waveform — use it for oscilloscope displays, wave-based animations, or any effect that reacts to the shape of the audio signal rather than its frequency content.\n\n## Method Reference\n\n| Method | Returns | Description |\n|--------|---------|-------------|\n| `viji.audio.getWaveform()` | `Float32Array` | Time-domain PCM samples, 2048 values, each –1 to +1 |\n\n### Data Format\n\n- **Length**: 2048 samples (equal to the FFT size)\n- **Value range**: –1.0 to +1.0 (signed float PCM)\n- **Snapshot**: The returned array is a copy from the most recent audio analysis update — not a live buffer. Calling it multiple times in the same frame returns the same data.\n\n## Usage — Oscilloscope\n\n```javascript\nfunction render(viji, p5) {\n  p5.background(15);\n\n  if (!viji.audio.isConnected) return;\n\n  const waveform = viji.audio.getWaveform();\n  if (waveform.length === 0) return;\n\n  p5.noFill();\n  p5.stroke(76, 175, 80);\n  p5.strokeWeight(2);\n  p5.beginShape();\n\n  for (let i = 0; i < waveform.length; i++) {\n    const x = (i / waveform.length) * viji.width;\n    const y = viji.height / 2 + waveform[i] * viji.height * 0.4;\n    p5.vertex(x, y);\n  }\n\n  p5.endShape();\n}\n```\n\n## Usage — Circular Waveform\n\n```javascript\nfunction render(viji, p5) {\n  p5.background(15);\n\n  if (!viji.audio.isConnected) return;\n\n  const waveform = viji.audio.getWaveform();\n  if (waveform.length === 0) return;\n\n  const cx = viji.width / 2;\n  const cy = viji.height / 2;\n  const baseR = Math.min(viji.width, viji.height) * 0.25;\n  const step = 4;\n\n  p5.noFill();\n  p5.stroke(52, 152, 219);\n  p5.strokeWeight(1.5);\n  p5.beginShape();\n\n  for (let i = 0; i < waveform.length; i += step) {\n    const angle = (i / waveform.length) * p5.TWO_PI;\n    const r = baseR + waveform[i] * baseR * 0.5;\n    const x = cx + Math.cos(angle) * r;\n    const y = cy + Math.sin(angle) * r;\n    p5.vertex(x, y);\n  }\n\n  p5.endShape(p5.CLOSE);\n}\n```\n\n> [!NOTE]\n> When `viji.audio.isConnected` is `false`, `getWaveform()` returns an empty `Float32Array` (length 0). Always check the length before iterating."
+        },
+        {
+          "type": "live-example",
+          "title": "Oscilloscope",
+          "sceneCode": "function render(viji, p5) {\n  p5.background(15);\n\n  if (!viji.audio.isConnected) {\n    p5.fill(100);\n    p5.textAlign(p5.CENTER, p5.CENTER);\n    p5.textSize(viji.width * 0.04);\n    p5.text('Waiting for audio...', viji.width / 2, viji.height / 2);\n    return;\n  }\n\n  const waveform = viji.audio.getWaveform();\n  if (waveform.length === 0) return;\n\n  // Oscilloscope line\n  p5.noFill();\n  p5.stroke(76, 175, 80);\n  p5.strokeWeight(2);\n  p5.beginShape();\n\n  for (let i = 0; i < waveform.length; i++) {\n    const x = (i / waveform.length) * viji.width;\n    const y = viji.height / 2 + waveform[i] * viji.height * 0.4;\n    p5.vertex(x, y);\n  }\n\n  p5.endShape();\n\n  // Center line\n  p5.stroke(50);\n  p5.strokeWeight(1);\n  p5.line(0, viji.height / 2, viji.width, viji.height / 2);\n}\n",
+          "sceneFile": "waveform-demo.scene.js"
+        },
+        {
+          "type": "text",
+          "markdown": "## Related\n\n- [Audio Overview](../)\n- [Frequency Data](../frequency-data/)\n- [Volume](../volume/)\n- [Frequency Bands](../bands/)"
+        }
+      ]
+    },
+    "p5-video-overview": {
+      "id": "p5-video-overview",
+      "title": "Video & CV",
+      "description": "Video stream access and computer vision features in P5.js scenes — face detection, hand tracking, pose estimation, and body segmentation.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Video & CV\n\nViji provides access to a live video stream and MediaPipe-powered computer vision features through `viji.video`. In P5.js scenes, all video and CV data is accessed through the `viji` object passed to your `render()` function — exactly the same API as the [Native renderer](../../native/video/).\n\n## API Overview\n\n| Sub-object | Description | Page |\n|------------|-------------|------|\n| [`isConnected`](connection/) | Whether a video stream is active | [Connection & Lifecycle](connection/) |\n| [`currentFrame`](basics/) | Current video frame as a drawable surface | [Video Basics](basics/) |\n| [`faces`](face-detection/) | Face detection results with bounds, landmarks, expressions | [Face Detection](face-detection/) |\n| [`hands`](hand-tracking/) | Hand tracking with landmarks and ML gesture recognition | [Hand Tracking](hand-tracking/) |\n| [`pose`](pose-detection/) | 33-point body pose landmarks | [Pose Detection](pose-detection/) |\n| [`segmentation`](body-segmentation/) | Per-pixel person/background mask | [Body Segmentation](body-segmentation/) |\n| [`cv`](connection/) | CV feature control — enable/disable individual features | [Connection & Lifecycle](connection/) |\n\n## Basic Usage\n\n```javascript\n// @renderer p5\n\nconst useFace = viji.toggle(false, { label: 'Face Detection', category: 'video' });\n\nfunction render(viji, p5) {\n  p5.background(17);\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) {\n    p5.fill(100);\n    p5.textAlign(p5.CENTER, p5.CENTER);\n    p5.textSize(viji.width * 0.04);\n    p5.text('Waiting for video...', viji.width / 2, viji.height / 2);\n    return;\n  }\n\n  if (useFace.value) viji.video.cv.enableFaceDetection(true);\n  else viji.video.cv.enableFaceDetection(false);\n\n  p5.image(viji.video.currentFrame, 0, 0, viji.width, viji.height);\n\n  viji.video.faces.forEach(face => {\n    p5.noFill();\n    p5.stroke(78, 205, 196);\n    p5.strokeWeight(2);\n    p5.rect(\n      face.bounds.x * viji.width, face.bounds.y * viji.height,\n      face.bounds.width * viji.width, face.bounds.height * viji.height\n    );\n  });\n}\n```\n\n> [!NOTE]\n> Always check [`viji.video.isConnected`](connection/) and [`viji.video.currentFrame`](basics/) before using video data. When no video stream is connected, all values are at their defaults (null, zero, or empty arrays).\n\n| Feature | Relative Cost | Notes |\n|---------|--------------|-------|\n| Face Detection | Low | Bounding box + basic landmarks only |\n| Face Mesh | Medium-High | 468 facial landmarks |\n| Emotion Detection | High | 7 expressions + 52 blendshape coefficients |\n| Hand Tracking | Medium | Up to 2 hands, 21 landmarks each |\n| Pose Detection | Medium | 33 body landmarks |\n| Body Segmentation | High | Per-pixel mask, large tensor output |\n\n> [!WARNING]\n> **WebGL Context Limits:** Each CV feature requires its own WebGL context for ML inference. Browsers typically allow 8-16 active WebGL contexts. Enabling too many CV features simultaneously can cause context eviction, potentially breaking the scene's own rendering. Use only the CV features you need.\n\n> [!TIP]\n> **Best practice:** Don't enable CV features by default. Instead, expose a toggle parameter so users can activate them on capable devices:\n> ```javascript\n> const useFace = viji.toggle(false, { label: 'Enable Face Detection', category: 'video' });\n> if (useFace.value) {\n>   await viji.video.cv.enableFaceDetection(true);\n> }\n> ```"
+        },
+        {
+          "type": "live-example",
+          "title": "Video with Face Detection",
+          "sceneCode": "// @renderer p5\n\nconst useFace = viji.toggle(false, { label: 'Face Detection', category: 'video' });\n\nfunction render(viji, p5) {\n  p5.background(17);\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) {\n    p5.fill(100);\n    p5.textAlign(p5.CENTER, p5.CENTER);\n    p5.textSize(Math.min(viji.width, viji.height) * 0.04);\n    p5.text('Waiting for video...', viji.width / 2, viji.height / 2);\n    return;\n  }\n\n  if (useFace.value) viji.video.cv.enableFaceDetection(true);\n  else viji.video.cv.enableFaceDetection(false);\n\n  p5.tint(255, 150);\n  p5.image(viji.video.currentFrame, 0, 0, viji.width, viji.height);\n  p5.noTint();\n\n  viji.video.faces.forEach(face => {\n    const bx = face.bounds.x * viji.width;\n    const by = face.bounds.y * viji.height;\n    const bw = face.bounds.width * viji.width;\n    const bh = face.bounds.height * viji.height;\n\n    p5.noFill();\n    p5.stroke(78, 205, 196);\n    p5.strokeWeight(2);\n    p5.rect(bx, by, bw, bh);\n\n    p5.noStroke();\n    p5.fill(78, 205, 196);\n    p5.textSize(Math.min(viji.width, viji.height) * 0.025);\n    p5.textAlign(p5.LEFT, p5.BOTTOM);\n    p5.text('Face #' + face.id + ' (' + (face.confidence * 100).toFixed(0) + '%)', bx, by - 4);\n  });\n}\n",
+          "sceneFile": "video-overview.scene.js",
+          "capabilities": {
+            "video": true
+          }
+        },
+        {
+          "type": "text",
+          "markdown": "## Related\n\n- [Connection & Lifecycle](connection/)\n- [Video Basics](basics/)\n- [Face Detection](face-detection/)\n- [Face Mesh](face-mesh/)\n- [Emotion Detection](emotion-detection/)\n- [Hand Tracking](hand-tracking/)\n- [Pose Detection](pose-detection/)\n- [Body Segmentation](body-segmentation/)\n- [Native Video & CV](/native/video)\n- [Shader Video & CV Uniforms](/shader/video)"
+        }
+      ]
+    },
+    "p5-video-connection": {
+      "id": "p5-video-connection",
+      "title": "Connection & Lifecycle",
+      "description": "Video connection state, CV feature control, guard patterns, and default values in P5.js scenes.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Connection & Lifecycle\n\nThe `viji.video.isConnected` property indicates whether the host application has provided an active video stream. All other video and CV properties depend on this — when disconnected, they hold default values. The video API is identical to the [Native renderer](../../../native/video/connection/).\n\n## Property Reference\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `viji.video.isConnected` | `boolean` | `true` when a video stream is active |\n| `viji.video.currentFrame` | `OffscreenCanvas \\| null` | Current video frame — drawable with `p5.image()` |\n| `viji.video.frameWidth` | `number` | Video frame width in pixels |\n| `viji.video.frameHeight` | `number` | Video frame height in pixels |\n| `viji.video.frameRate` | `number` | Video frame rate (Hz) |\n| `viji.video.getFrameData()` | `ImageData \\| null` | Raw pixel data for per-pixel analysis |\n\n> [!TIP]\n> Use [`viji.video.currentFrame`](../basics/) for drawing video with `p5.image()` (fast, GPU-friendly). Use `viji.video.getFrameData()` only when you need per-pixel access — it is much slower as it reads back pixel data.\n\n## CV Control API\n\nThe `viji.video.cv` object provides methods to enable and disable individual CV features. All methods accept a boolean parameter.\n\n| Method | Feature | What it activates |\n|--------|---------|-------------------|\n| `enableFaceDetection(enabled)` | `'faceDetection'` | Face bounds, center, confidence, id |\n| `enableFaceMesh(enabled)` | `'faceMesh'` | 468-point face landmarks + head pose |\n| `enableEmotionDetection(enabled)` | `'emotionDetection'` | 7 expressions + 52 blendshapes |\n| `enableHandTracking(enabled)` | `'handTracking'` | 21-point hand landmarks + ML gestures |\n| `enablePoseDetection(enabled)` | `'poseDetection'` | 33-point BlazePose body landmarks |\n| `enableBodySegmentation(enabled)` | `'bodySegmentation'` | Per-pixel person/background mask |\n\n| Method | Returns | Description |\n|--------|---------|-------------|\n| `getActiveFeatures()` | `CVFeature[]` | Array of currently active feature strings |\n| `isProcessing()` | `boolean` | `true` if CV worker is actively processing frames |\n\n## Guard Pattern\n\nAlways check `isConnected` and `currentFrame` before using video data:\n\n```javascript\n// @renderer p5\n\nfunction render(viji, p5) {\n  p5.background(17);\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) {\n    p5.fill(80);\n    p5.textAlign(p5.CENTER, p5.CENTER);\n    p5.textSize(Math.min(viji.width, viji.height) * 0.04);\n    p5.text('No video connected', viji.width / 2, viji.height / 2);\n    return;\n  }\n\n  p5.image(viji.video.currentFrame, 0, 0, viji.width, viji.height);\n}\n```\n\n## Default Values\n\nWhen `isConnected` is `false`, all video properties hold these values:\n\n| Property | Default |\n|----------|---------|\n| `currentFrame` | `null` |\n| `frameWidth` | `0` |\n| `frameHeight` | `0` |\n| `frameRate` | `0` |\n| `getFrameData()` | `null` |\n| `faces` | `[]` (empty array) |\n| `hands` | `[]` (empty array) |\n| `pose` | `null` |\n| `segmentation` | `null` |\n\nWhen the user leaves the camera frame, CV data also resets — `faces` and `hands` become empty arrays, `pose` and `segmentation` become `null`."
+        },
+        {
+          "type": "live-example",
+          "title": "Connection State",
+          "sceneCode": "// @renderer p5\n\nfunction render(viji, p5) {\n  p5.background(17);\n\n  const fontSize = Math.min(viji.width, viji.height) * 0.035;\n  p5.textSize(fontSize);\n  p5.textAlign(p5.CENTER, p5.CENTER);\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) {\n    const pulse = 0.4 + Math.sin(viji.time * 2) * 0.15;\n    p5.fill(255, pulse * 255);\n    p5.text('Waiting for video stream...', viji.width / 2, viji.height / 2 - fontSize);\n    p5.fill(80);\n    p5.text('Connect a camera or video source', viji.width / 2, viji.height / 2 + fontSize);\n    return;\n  }\n\n  p5.image(viji.video.currentFrame, 0, 0, viji.width, viji.height);\n\n  const pad = viji.width * 0.04;\n  const barY = viji.height - fontSize * 3;\n  p5.fill(0, 150);\n  p5.noStroke();\n  p5.rect(0, barY, viji.width, fontSize * 3);\n\n  p5.fill(76, 175, 80);\n  p5.textAlign(p5.LEFT, p5.TOP);\n  p5.text('Video connected', pad, barY + fontSize * 0.3);\n  p5.fill(170);\n  p5.text(\n    viji.video.frameWidth + ' x ' + viji.video.frameHeight + ' @ ' + viji.video.frameRate.toFixed(0) + ' fps',\n    pad, barY + fontSize * 1.5\n  );\n}\n",
+          "sceneFile": "connection-demo.scene.js",
+          "capabilities": {
+            "video": true
+          }
+        },
+        {
+          "type": "text",
+          "markdown": "## Related\n\n- [Video & CV Overview](../)\n- [Video Basics](../basics/)\n- [Face Detection](../face-detection/)\n- [Native Connection & Lifecycle](/native/video/connection)"
+        }
+      ]
+    },
+    "p5-video-basics": {
+      "id": "p5-video-basics",
+      "title": "Video Basics",
+      "description": "Drawing video frames with P5.js, accessing frame dimensions, and understanding currentFrame vs getFrameData.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Video Basics\n\nThe video stream provides a drawable frame each render cycle through `viji.video.currentFrame`. In P5.js scenes, draw it using `p5.image()`.\n\n## Property Reference\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `viji.video.currentFrame` | `OffscreenCanvas \\| null` | Current video frame — pass to `p5.image()` |\n| `viji.video.frameWidth` | `number` | Video frame width in pixels |\n| `viji.video.frameHeight` | `number` | Video frame height in pixels |\n| `viji.video.frameRate` | `number` | Video frame rate (Hz) |\n| `viji.video.getFrameData()` | `ImageData \\| null` | Raw RGBA pixel data for per-pixel analysis |\n\n### `currentFrame` vs `getFrameData()`\n\n- **`currentFrame`** is an OffscreenCanvas that can be drawn directly with `p5.image()`. This is fast and GPU-friendly — use it for all rendering.\n- **`getFrameData()`** returns an `ImageData` object for per-pixel CPU analysis. It allocates a new `ImageData` each call and is significantly slower. Use only when you need to read individual pixel values.\n\n> [!TIP]\n> Use `viji.video.currentFrame` with `p5.image()` for drawing video (fast, GPU-friendly). Use `viji.video.getFrameData()` only when you need per-pixel access — it is much slower as it reads back pixel data.\n\n## Usage — Drawing Video\n\n```javascript\n// @renderer p5\n\nfunction render(viji, p5) {\n  p5.background(17);\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) return;\n\n  p5.image(viji.video.currentFrame, 0, 0, viji.width, viji.height);\n}\n```\n\n## Usage — Aspect-Ratio-Correct Drawing\n\n```javascript\n// @renderer p5\n\nfunction render(viji, p5) {\n  p5.background(17);\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) return;\n\n  const vw = viji.video.frameWidth;\n  const vh = viji.video.frameHeight;\n  const scale = Math.min(viji.width / vw, viji.height / vh);\n  const dw = vw * scale;\n  const dh = vh * scale;\n\n  p5.image(viji.video.currentFrame, (viji.width - dw) / 2, (viji.height - dh) / 2, dw, dh);\n}\n```\n\n## Coordinate System\n\nAll CV data coordinates are **normalized 0-1**:\n- `x` ranges from 0 (left) to 1 (right)\n- `y` ranges from 0 (top) to 1 (bottom)\n\nTo draw CV data with P5, multiply by canvas dimensions: `point.x * viji.width`, `point.y * viji.height`."
+        },
+        {
+          "type": "live-example",
+          "title": "Video Feed",
+          "sceneCode": "// @renderer p5\n\nfunction render(viji, p5) {\n  p5.background(17);\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) {\n    p5.fill(100);\n    p5.textAlign(p5.CENTER, p5.CENTER);\n    p5.textSize(Math.min(viji.width, viji.height) * 0.04);\n    p5.text('Waiting for video...', viji.width / 2, viji.height / 2);\n    return;\n  }\n\n  const vw = viji.video.frameWidth;\n  const vh = viji.video.frameHeight;\n  const scale = Math.min(viji.width / vw, viji.height / vh);\n  const dw = vw * scale;\n  const dh = vh * scale;\n\n  p5.image(viji.video.currentFrame, (viji.width - dw) / 2, (viji.height - dh) / 2, dw, dh);\n\n  const fontSize = Math.min(viji.width, viji.height) * 0.03;\n  p5.fill(0, 128);\n  p5.noStroke();\n  p5.rect(0, viji.height - fontSize * 2, viji.width, fontSize * 2);\n  p5.fill(170);\n  p5.textSize(fontSize);\n  p5.textAlign(p5.CENTER, p5.CENTER);\n  p5.text(\n    vw + ' x ' + vh + ' @ ' + viji.video.frameRate.toFixed(0) + ' fps',\n    viji.width / 2, viji.height - fontSize\n  );\n}\n",
+          "sceneFile": "basics-demo.scene.js",
+          "capabilities": {
+            "video": true
+          }
+        },
+        {
+          "type": "text",
+          "markdown": "## Related\n\n- [Video & CV Overview](../)\n- [Connection & Lifecycle](../connection/)\n- [Face Detection](../face-detection/)\n- [Native Video Basics](/native/video/basics)\n- [Shader Video Basics](/shader/video/basics)"
+        }
+      ]
+    },
+    "p5-cv-face": {
+      "id": "p5-cv-face",
+      "title": "Face Detection",
+      "description": "Detect faces in the video stream with bounding boxes, center points, confidence scores, and face IDs in P5.js scenes.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Face Detection\n\nFace detection provides the position, size, and confidence of faces in the video stream. Enable it with [`viji.video.cv.enableFaceDetection(true)`](../connection/). The data API is identical to the [Native renderer](../../../native/video/face-detection/).\n\n## Property Reference\n\nResults appear in `viji.video.faces` — an array of `FaceData` objects. When no faces are detected or the feature is disabled, the array is empty.\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `face.id` | `number` | Index-based face identifier (0, 1, 2, ...) |\n| `face.bounds` | `{ x, y, width, height }` | Bounding box, normalized 0-1 |\n| `face.center` | `{ x, y }` | Bounding box center, normalized 0-1 |\n| `face.confidence` | `number` | Detection confidence (0-1) |\n| `face.landmarks` | `{ x, y, z? }[]` | Empty `[]` — requires [Face Mesh](../face-mesh/) for landmarks |\n| `face.expressions` | object | All zeros — requires [Emotion Detection](../emotion-detection/) |\n| `face.headPose` | `{ pitch, yaw, roll }` | All zeros — requires [Face Mesh](../face-mesh/) for head pose |\n| `face.blendshapes` | `FaceBlendshapes` | All zeros — requires [Emotion Detection](../emotion-detection/) |\n\n## Usage\n\n```javascript\n// @renderer p5\n\nconst useFace = viji.toggle(false, { label: 'Face Detection', category: 'video' });\n\nfunction render(viji, p5) {\n  p5.background(17);\n\n  if (useFace.value) viji.video.cv.enableFaceDetection(true);\n  else viji.video.cv.enableFaceDetection(false);\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) return;\n\n  p5.image(viji.video.currentFrame, 0, 0, viji.width, viji.height);\n\n  viji.video.faces.forEach(face => {\n    p5.noFill();\n    p5.stroke(78, 205, 196);\n    p5.strokeWeight(2);\n    p5.rect(\n      face.bounds.x * viji.width, face.bounds.y * viji.height,\n      face.bounds.width * viji.width, face.bounds.height * viji.height\n    );\n\n    p5.noStroke();\n    p5.fill(78, 205, 196);\n    p5.circle(face.center.x * viji.width, face.center.y * viji.height, 8);\n\n    p5.textSize(Math.min(viji.width, viji.height) * 0.025);\n    p5.textAlign(p5.LEFT, p5.BOTTOM);\n    p5.text(\n      'Face #' + face.id + ' (' + (face.confidence * 100).toFixed(0) + '%)',\n      face.bounds.x * viji.width, face.bounds.y * viji.height - 4\n    );\n  });\n}\n```\n\n**Cost: Low** — face detection is the lightest CV feature.\n\n> [!WARNING]\n> **WebGL Context Limits:** Each CV feature requires its own WebGL context for ML inference. Browsers typically allow 8-16 active WebGL contexts. Enabling too many CV features simultaneously can cause context eviction, potentially breaking the scene's own rendering. Use only the CV features you need.\n\n> [!TIP]\n> **Best practice:** Don't enable CV features by default. Instead, expose a toggle parameter so users can activate them on capable devices:\n> ```javascript\n> const useFace = viji.toggle(false, { label: 'Enable Face Detection', category: 'video' });\n> if (useFace.value) {\n>   await viji.video.cv.enableFaceDetection(true);\n> }\n> ```\n\nWhen face detection is disabled or no faces are visible, `viji.video.faces` becomes an empty array `[]`."
+        },
+        {
+          "type": "live-example",
+          "title": "Face Detection",
+          "sceneCode": "// @renderer p5\n\nconst useFace = viji.toggle(false, { label: 'Face Detection', category: 'video' });\n\nfunction render(viji, p5) {\n  p5.background(17);\n\n  if (useFace.value) viji.video.cv.enableFaceDetection(true);\n  else viji.video.cv.enableFaceDetection(false);\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) {\n    p5.fill(100);\n    p5.textAlign(p5.CENTER, p5.CENTER);\n    p5.textSize(Math.min(viji.width, viji.height) * 0.04);\n    p5.text('Waiting for video...', viji.width / 2, viji.height / 2);\n    return;\n  }\n\n  p5.image(viji.video.currentFrame, 0, 0, viji.width, viji.height);\n\n  viji.video.faces.forEach(face => {\n    const bx = face.bounds.x * viji.width;\n    const by = face.bounds.y * viji.height;\n    const bw = face.bounds.width * viji.width;\n    const bh = face.bounds.height * viji.height;\n\n    p5.noFill();\n    p5.stroke(78, 205, 196);\n    p5.strokeWeight(2);\n    p5.rect(bx, by, bw, bh);\n\n    p5.noStroke();\n    p5.fill(78, 205, 196);\n    p5.circle(face.center.x * viji.width, face.center.y * viji.height, 8);\n\n    p5.textSize(Math.min(viji.width, viji.height) * 0.025);\n    p5.textAlign(p5.LEFT, p5.BOTTOM);\n    p5.text('Face #' + face.id + ' (' + (face.confidence * 100).toFixed(0) + '%)', bx, by - 4);\n  });\n}\n",
+          "sceneFile": "face-detection-demo.scene.js",
+          "capabilities": {
+            "video": true
+          }
+        },
+        {
+          "type": "text",
+          "markdown": "## Related\n\n- [Video & CV Overview](../)\n- [Face Mesh](../face-mesh/)\n- [Emotion Detection](../emotion-detection/)\n- [Native Face Detection](/native/video/face-detection)\n- [Shader Face Detection](/shader/video/face-detection)"
+        }
+      ]
+    },
+    "p5-cv-face-mesh": {
+      "id": "p5-cv-face-mesh",
+      "title": "Face Mesh",
+      "description": "468-point facial landmark mesh and head pose estimation in P5.js scenes.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Face Mesh\n\nFace mesh provides 468 detailed facial landmark points and head pose estimation (pitch, yaw, roll). Enable it with [`viji.video.cv.enableFaceMesh(true)`](../connection/). The data API is identical to the [Native renderer](../../../native/video/face-mesh/).\n\n## Property Reference\n\nFace mesh data appears on each `FaceData` object in `viji.video.faces`:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `face.landmarks` | `{ x, y, z? }[]` | 468 facial landmark points, normalized 0-1 |\n| `face.headPose.pitch` | `number` | Up/down rotation (-90 to 90 degrees) |\n| `face.headPose.yaw` | `number` | Left/right rotation (-90 to 90 degrees) |\n| `face.headPose.roll` | `number` | Tilt rotation (-180 to 180 degrees) |\n\nWhen face mesh is disabled, `landmarks` is `[]` and head pose values are `0`.\n\n## Usage\n\n```javascript\n// @renderer p5\n\nconst useMesh = viji.toggle(false, { label: 'Face Mesh', category: 'video' });\n\nfunction render(viji, p5) {\n  p5.background(17);\n\n  if (useMesh.value) viji.video.cv.enableFaceMesh(true);\n  else viji.video.cv.enableFaceMesh(false);\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) return;\n\n  p5.tint(255, 100);\n  p5.image(viji.video.currentFrame, 0, 0, viji.width, viji.height);\n  p5.noTint();\n\n  viji.video.faces.forEach(face => {\n    if (face.landmarks.length === 0) return;\n\n    p5.noStroke();\n    p5.fill(69, 183, 209, 180);\n    face.landmarks.forEach(pt => {\n      p5.circle(pt.x * viji.width, pt.y * viji.height, 2);\n    });\n\n    const hp = face.headPose;\n    p5.fill(255);\n    p5.textSize(Math.min(viji.width, viji.height) * 0.025);\n    p5.textAlign(p5.LEFT, p5.BOTTOM);\n    p5.text(\n      'Pitch: ' + hp.pitch.toFixed(1) + '  Yaw: ' + hp.yaw.toFixed(1) + '  Roll: ' + hp.roll.toFixed(1),\n      viji.width * 0.03, viji.height - 10\n    );\n  });\n}\n```\n\n**Cost: Medium-High** — face mesh processes 468 landmarks per face and computes head pose.\n\n> [!WARNING]\n> **WebGL Context Limits:** Each CV feature requires its own WebGL context for ML inference. Browsers typically allow 8-16 active WebGL contexts. Enabling too many CV features simultaneously can cause context eviction, potentially breaking the scene's own rendering. Use only the CV features you need.\n\n> [!TIP]\n> **Best practice:** Don't enable CV features by default. Instead, expose a toggle parameter so users can activate them on capable devices:\n> ```javascript\n> const useMesh = viji.toggle(false, { label: 'Enable Face Mesh', category: 'video' });\n> if (useMesh.value) {\n>   await viji.video.cv.enableFaceMesh(true);\n> }\n> ```\n\nWhen face mesh is disabled, `face.landmarks` becomes `[]` and `face.headPose` values are all `0`."
+        },
+        {
+          "type": "live-example",
+          "title": "Face Mesh",
+          "sceneCode": "// @renderer p5\n\nconst useMesh = viji.toggle(false, { label: 'Face Mesh', category: 'video' });\n\nfunction render(viji, p5) {\n  p5.background(17);\n\n  if (useMesh.value) viji.video.cv.enableFaceMesh(true);\n  else viji.video.cv.enableFaceMesh(false);\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) {\n    p5.fill(100);\n    p5.textAlign(p5.CENTER, p5.CENTER);\n    p5.textSize(Math.min(viji.width, viji.height) * 0.04);\n    p5.text('Waiting for video...', viji.width / 2, viji.height / 2);\n    return;\n  }\n\n  p5.tint(255, 100);\n  p5.image(viji.video.currentFrame, 0, 0, viji.width, viji.height);\n  p5.noTint();\n\n  viji.video.faces.forEach(face => {\n    if (face.landmarks.length === 0) return;\n\n    p5.noStroke();\n    p5.fill(69, 183, 209, 180);\n    face.landmarks.forEach(pt => {\n      p5.circle(pt.x * viji.width, pt.y * viji.height, 2);\n    });\n\n    const hp = face.headPose;\n    p5.fill(255);\n    p5.textSize(Math.min(viji.width, viji.height) * 0.025);\n    p5.textAlign(p5.LEFT, p5.BOTTOM);\n    p5.text(\n      face.landmarks.length + ' landmarks | Pitch: ' + hp.pitch.toFixed(1) +\n      ' Yaw: ' + hp.yaw.toFixed(1) + ' Roll: ' + hp.roll.toFixed(1),\n      viji.width * 0.03, viji.height - 10\n    );\n  });\n}\n",
+          "sceneFile": "face-mesh-demo.scene.js",
+          "capabilities": {
+            "video": true
+          }
+        },
+        {
+          "type": "text",
+          "markdown": "## Related\n\n- [Video & CV Overview](../)\n- [Face Detection](../face-detection/)\n- [Emotion Detection](../emotion-detection/)\n- [Native Face Mesh](/native/video/face-mesh)\n- [Shader Face Mesh Uniforms](/shader/video/face-mesh)"
+        }
+      ]
+    },
+    "p5-cv-emotion": {
+      "id": "p5-cv-emotion",
+      "title": "Emotion Detection",
+      "description": "Seven facial expression scores and 52 ARKit-compatible blendshape coefficients in P5.js scenes.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Emotion Detection\n\nEmotion detection provides 7 expression scores and 52 ARKit-compatible blendshape coefficients for each detected face. Enable it with [`viji.video.cv.enableEmotionDetection(true)`](../connection/). The data API is identical to the [Native renderer](../../../native/video/emotion-detection/).\n\n## Property Reference\n\n### Expressions (7 emotions)\n\nEach value is a confidence score from 0 to 1.\n\n| Property | Type | Range | Description |\n|----------|------|-------|-------------|\n| `face.expressions.neutral` | `number` | 0-1 | Neutral expression |\n| `face.expressions.happy` | `number` | 0-1 | Happy / smiling |\n| `face.expressions.sad` | `number` | 0-1 | Sad |\n| `face.expressions.angry` | `number` | 0-1 | Angry |\n| `face.expressions.surprised` | `number` | 0-1 | Surprised |\n| `face.expressions.disgusted` | `number` | 0-1 | Disgusted |\n| `face.expressions.fearful` | `number` | 0-1 | Fearful |\n\n### Blendshapes (52 ARKit coefficients)\n\nThe `face.blendshapes` object contains 52 ARKit-compatible coefficients (0-1 each). See [Native Emotion Detection](../../../native/video/emotion-detection/) for the full list.\n\n## Usage\n\n```javascript\n// @renderer p5\n\nconst useEmotion = viji.toggle(false, { label: 'Emotion Detection', category: 'video' });\n\nfunction render(viji, p5) {\n  p5.background(17);\n\n  if (useEmotion.value) viji.video.cv.enableEmotionDetection(true);\n  else viji.video.cv.enableEmotionDetection(false);\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) return;\n\n  p5.image(viji.video.currentFrame, 0, 0, viji.width, viji.height);\n\n  const face = viji.video.faces[0];\n  if (!face) return;\n\n  const expr = face.expressions;\n  const labels = ['neutral', 'happy', 'sad', 'angry', 'surprised', 'disgusted', 'fearful'];\n  const values = [expr.neutral, expr.happy, expr.sad, expr.angry, expr.surprised, expr.disgusted, expr.fearful];\n  const colors = [[136,136,136], [76,175,80], [33,150,243], [244,67,54], [255,152,0], [156,39,176], [96,125,139]];\n\n  const barH = viji.height * 0.04;\n  const barW = viji.width * 0.3;\n  const x = viji.width * 0.65;\n  let y = viji.height * 0.12;\n  const fontSize = barH * 0.7;\n\n  p5.textSize(fontSize);\n  labels.forEach((label, i) => {\n    p5.fill(170);\n    p5.noStroke();\n    p5.textAlign(p5.RIGHT, p5.CENTER);\n    p5.text(label, x - 8, y + barH / 2);\n\n    p5.fill(34);\n    p5.rect(x, y, barW, barH);\n    p5.fill(colors[i][0], colors[i][1], colors[i][2]);\n    p5.rect(x, y, barW * values[i], barH);\n\n    p5.fill(220);\n    p5.textAlign(p5.LEFT, p5.CENTER);\n    p5.text((values[i] * 100).toFixed(0) + '%', x + barW + 6, y + barH / 2);\n\n    y += barH * 1.8;\n  });\n}\n```\n\n**Cost: High** — emotion detection computes 7 expressions and 52 blendshape coefficients per face.\n\n> [!WARNING]\n> **WebGL Context Limits:** Each CV feature requires its own WebGL context for ML inference. Browsers typically allow 8-16 active WebGL contexts. Enabling too many CV features simultaneously can cause context eviction, potentially breaking the scene's own rendering. Use only the CV features you need.\n\n> [!TIP]\n> **Best practice:** Don't enable CV features by default. Instead, expose a toggle parameter so users can activate them on capable devices:\n> ```javascript\n> const useEmotion = viji.toggle(false, { label: 'Enable Emotion Detection', category: 'video' });\n> if (useEmotion.value) {\n>   await viji.video.cv.enableEmotionDetection(true);\n> }\n> ```\n\nWhen emotion detection is disabled, all `expressions` values are `0` and all `blendshapes` coefficients are `0`."
+        },
+        {
+          "type": "live-example",
+          "title": "Emotion Detection",
+          "sceneCode": "// @renderer p5\n\nconst useEmotion = viji.toggle(false, { label: 'Emotion Detection', category: 'video' });\n\nfunction render(viji, p5) {\n  p5.background(17);\n\n  if (useEmotion.value) viji.video.cv.enableEmotionDetection(true);\n  else viji.video.cv.enableEmotionDetection(false);\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) {\n    p5.fill(100);\n    p5.textAlign(p5.CENTER, p5.CENTER);\n    p5.textSize(Math.min(viji.width, viji.height) * 0.04);\n    p5.text('Waiting for video...', viji.width / 2, viji.height / 2);\n    return;\n  }\n\n  p5.tint(255, 100);\n  p5.image(viji.video.currentFrame, 0, 0, viji.width, viji.height);\n  p5.noTint();\n\n  const face = viji.video.faces[0];\n  if (!face) return;\n\n  const expr = face.expressions;\n  const labels = ['neutral', 'happy', 'sad', 'angry', 'surprised', 'disgusted', 'fearful'];\n  const values = [expr.neutral, expr.happy, expr.sad, expr.angry, expr.surprised, expr.disgusted, expr.fearful];\n  const colors = [[136,136,136], [76,175,80], [33,150,243], [244,67,54], [255,152,0], [156,39,176], [96,125,139]];\n\n  const barH = viji.height * 0.04;\n  const barW = viji.width * 0.3;\n  const x = viji.width * 0.65;\n  let y = viji.height * 0.12;\n  const fontSize = barH * 0.7;\n\n  p5.textSize(fontSize);\n  p5.noStroke();\n\n  labels.forEach((label, i) => {\n    p5.fill(170);\n    p5.textAlign(p5.RIGHT, p5.CENTER);\n    p5.text(label, x - 8, y + barH / 2);\n\n    p5.fill(34);\n    p5.rect(x, y, barW, barH);\n    p5.fill(colors[i][0], colors[i][1], colors[i][2]);\n    p5.rect(x, y, barW * values[i], barH);\n\n    p5.fill(220);\n    p5.textAlign(p5.LEFT, p5.CENTER);\n    p5.text((values[i] * 100).toFixed(0) + '%', x + barW + 6, y + barH / 2);\n\n    y += barH * 1.8;\n  });\n}\n",
+          "sceneFile": "emotion-detection-demo.scene.js",
+          "capabilities": {
+            "video": true
+          }
+        },
+        {
+          "type": "text",
+          "markdown": "## Related\n\n- [Video & CV Overview](../)\n- [Face Detection](../face-detection/)\n- [Face Mesh](../face-mesh/)\n- [Native Emotion Detection](/native/video/emotion-detection)\n- [Shader Emotion Uniforms](/shader/video/emotion-detection)"
+        }
+      ]
+    },
+    "p5-cv-hands": {
+      "id": "p5-cv-hands",
+      "title": "Hand Tracking",
+      "description": "21-point hand landmarks, palm position, and ML gesture recognition in P5.js scenes.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Hand Tracking\n\nHand tracking provides 21-point landmarks, palm position, bounding boxes, and ML-based gesture recognition for up to two hands. Enable it with [`viji.video.cv.enableHandTracking(true)`](../connection/). The data API is identical to the [Native renderer](../../../native/video/hand-tracking/).\n\n## Property Reference\n\nResults appear in `viji.video.hands` — an array of up to 2 `HandData` objects.\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `hand.id` | `number` | Index-based hand identifier (0, 1) |\n| `hand.handedness` | `'left' \\| 'right'` | Which hand (always lowercase) |\n| `hand.confidence` | `number` | Detection confidence (0-1) |\n| `hand.bounds` | `{ x, y, width, height }` | Bounding box, normalized 0-1 |\n| `hand.landmarks` | `{ x, y, z }[]` | 21 MediaPipe hand landmarks, normalized 0-1 |\n| `hand.palm` | `{ x, y, z }` | Palm center — `landmarks[9]` (middle finger MCP) |\n| `hand.gestures` | object | 7 ML gesture confidence scores (0-1 each) |\n\n### Gestures\n\n| Property | Gesture |\n|----------|---------|\n| `hand.gestures.fist` | Closed fist |\n| `hand.gestures.openPalm` | Open hand |\n| `hand.gestures.peace` | Victory / peace sign |\n| `hand.gestures.thumbsUp` | Thumbs up |\n| `hand.gestures.thumbsDown` | Thumbs down |\n| `hand.gestures.pointing` | Pointing up |\n| `hand.gestures.iLoveYou` | ASL I-love-you sign |\n\n## Usage\n\n```javascript\n// @renderer p5\n\nconst useHands = viji.toggle(false, { label: 'Hand Tracking', category: 'video' });\n\nfunction render(viji, p5) {\n  p5.background(17);\n\n  if (useHands.value) viji.video.cv.enableHandTracking(true);\n  else viji.video.cv.enableHandTracking(false);\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) return;\n\n  p5.image(viji.video.currentFrame, 0, 0, viji.width, viji.height);\n\n  viji.video.hands.forEach(hand => {\n    const col = hand.handedness === 'left' ? [255, 159, 243] : [84, 160, 255];\n    p5.noStroke();\n    p5.fill(col[0], col[1], col[2]);\n\n    hand.landmarks.forEach(pt => {\n      p5.circle(pt.x * viji.width, pt.y * viji.height, 6);\n    });\n\n    p5.noFill();\n    p5.stroke(col[0], col[1], col[2]);\n    p5.strokeWeight(2);\n    p5.circle(hand.palm.x * viji.width, hand.palm.y * viji.height, 16);\n  });\n}\n```\n\n**Cost: Medium** — hand tracking processes up to 2 hands with 21 landmarks each, plus ML gesture classification.\n\n> [!WARNING]\n> **WebGL Context Limits:** Each CV feature requires its own WebGL context for ML inference. Browsers typically allow 8-16 active WebGL contexts. Enabling too many CV features simultaneously can cause context eviction, potentially breaking the scene's own rendering. Use only the CV features you need.\n\n> [!TIP]\n> **Best practice:** Don't enable CV features by default. Instead, expose a toggle parameter so users can activate them on capable devices:\n> ```javascript\n> const useHands = viji.toggle(false, { label: 'Enable Hand Tracking', category: 'video' });\n> if (useHands.value) {\n>   await viji.video.cv.enableHandTracking(true);\n> }\n> ```\n\nWhen hand tracking is disabled or no hands are visible, `viji.video.hands` becomes an empty array `[]`."
+        },
+        {
+          "type": "live-example",
+          "title": "Hand Tracking",
+          "sceneCode": "// @renderer p5\n\nconst useHands = viji.toggle(false, { label: 'Hand Tracking', category: 'video' });\n\nfunction render(viji, p5) {\n  p5.background(17);\n\n  if (useHands.value) viji.video.cv.enableHandTracking(true);\n  else viji.video.cv.enableHandTracking(false);\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) {\n    p5.fill(100);\n    p5.textAlign(p5.CENTER, p5.CENTER);\n    p5.textSize(Math.min(viji.width, viji.height) * 0.04);\n    p5.text('Waiting for video...', viji.width / 2, viji.height / 2);\n    return;\n  }\n\n  p5.tint(255, 100);\n  p5.image(viji.video.currentFrame, 0, 0, viji.width, viji.height);\n  p5.noTint();\n\n  viji.video.hands.forEach(hand => {\n    const col = hand.handedness === 'left' ? [255, 159, 243] : [84, 160, 255];\n\n    p5.noStroke();\n    p5.fill(col[0], col[1], col[2]);\n    hand.landmarks.forEach(pt => {\n      p5.circle(pt.x * viji.width, pt.y * viji.height, 6);\n    });\n\n    p5.noFill();\n    p5.stroke(col[0], col[1], col[2]);\n    p5.strokeWeight(2);\n    p5.circle(hand.palm.x * viji.width, hand.palm.y * viji.height, 16);\n\n    const g = hand.gestures;\n    const gestures = [\n      ['fist', g.fist], ['open', g.openPalm], ['peace', g.peace],\n      ['thumbsUp', g.thumbsUp], ['pointing', g.pointing]\n    ];\n    const top = gestures.reduce((a, b) => b[1] > a[1] ? b : a);\n    if (top[1] > 0.5) {\n      p5.noStroke();\n      p5.fill(255);\n      p5.textSize(Math.min(viji.width, viji.height) * 0.03);\n      p5.textAlign(p5.CENTER, p5.BOTTOM);\n      p5.text(top[0], hand.palm.x * viji.width, hand.bounds.y * viji.height - 6);\n    }\n  });\n}\n",
+          "sceneFile": "hand-tracking-demo.scene.js",
+          "capabilities": {
+            "video": true
+          }
+        },
+        {
+          "type": "text",
+          "markdown": "## Related\n\n- [Video & CV Overview](../)\n- [Pose Detection](../pose-detection/)\n- [Face Detection](../face-detection/)\n- [Native Hand Tracking](/native/video/hand-tracking)\n- [Shader Hand Tracking](/shader/video/hand-tracking)"
+        }
+      ]
+    },
+    "p5-cv-pose": {
+      "id": "p5-cv-pose",
+      "title": "Pose Detection",
+      "description": "33-point BlazePose body landmarks with named body part groups in P5.js scenes.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Pose Detection\n\nPose detection provides 33 body landmarks using MediaPipe's BlazePose model, with named groups for easy access to face, torso, arms, and legs. Enable it with [`viji.video.cv.enablePoseDetection(true)`](../connection/). The data API is identical to the [Native renderer](../../../native/video/pose-detection/).\n\n## Property Reference\n\nResults appear in `viji.video.pose` — a single `PoseData` object, or `null` when no pose is detected.\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `pose.confidence` | `number` | Average landmark visibility (0-1) |\n| `pose.landmarks` | `{ x, y, z, visibility }[]` | 33 BlazePose points, normalized 0-1 |\n| `pose.face` | `{ x, y }[]` | Face region landmarks (indices 0-10) |\n| `pose.torso` | `{ x, y }[]` | Torso landmarks (indices 11, 12, 23, 24) |\n| `pose.leftArm` | `{ x, y }[]` | Left arm (indices 11, 13, 15) |\n| `pose.rightArm` | `{ x, y }[]` | Right arm (indices 12, 14, 16) |\n| `pose.leftLeg` | `{ x, y }[]` | Left leg (indices 23, 25, 27, 29, 31) |\n| `pose.rightLeg` | `{ x, y }[]` | Right leg (indices 24, 26, 28, 30, 32) |\n\n## Usage\n\n```javascript\n// @renderer p5\n\nconst usePose = viji.toggle(false, { label: 'Pose Detection', category: 'video' });\n\nfunction render(viji, p5) {\n  p5.background(17);\n\n  if (usePose.value) viji.video.cv.enablePoseDetection(true);\n  else viji.video.cv.enablePoseDetection(false);\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) return;\n\n  p5.image(viji.video.currentFrame, 0, 0, viji.width, viji.height);\n\n  const pose = viji.video.pose;\n  if (!pose) return;\n\n  p5.noStroke();\n  p5.fill(255, 107, 107);\n  pose.landmarks.forEach(pt => {\n    if (pt.visibility > 0.5) {\n      p5.circle(pt.x * viji.width, pt.y * viji.height, 8);\n    }\n  });\n\n  p5.strokeWeight(2);\n  p5.noFill();\n  const drawGroup = (group, col) => {\n    if (group.length < 2) return;\n    p5.stroke(col[0], col[1], col[2]);\n    p5.beginShape();\n    group.forEach(pt => p5.vertex(pt.x * viji.width, pt.y * viji.height));\n    p5.endShape();\n  };\n\n  drawGroup(pose.leftArm, [255, 159, 243]);\n  drawGroup(pose.rightArm, [84, 160, 255]);\n  drawGroup(pose.leftLeg, [255, 159, 243]);\n  drawGroup(pose.rightLeg, [84, 160, 255]);\n  drawGroup(pose.torso, [254, 202, 87]);\n}\n```\n\n**Cost: Medium** — pose detection processes 33 body landmarks with visibility scores.\n\n> [!WARNING]\n> **WebGL Context Limits:** Each CV feature requires its own WebGL context for ML inference. Browsers typically allow 8-16 active WebGL contexts. Enabling too many CV features simultaneously can cause context eviction, potentially breaking the scene's own rendering. Use only the CV features you need.\n\n> [!TIP]\n> **Best practice:** Don't enable CV features by default. Instead, expose a toggle parameter so users can activate them on capable devices:\n> ```javascript\n> const usePose = viji.toggle(false, { label: 'Enable Pose Detection', category: 'video' });\n> if (usePose.value) {\n>   await viji.video.cv.enablePoseDetection(true);\n> }\n> ```\n\nWhen pose detection is disabled or no body is visible, `viji.video.pose` becomes `null`."
+        },
+        {
+          "type": "live-example",
+          "title": "Pose Detection",
+          "sceneCode": "// @renderer p5\n\nconst usePose = viji.toggle(false, { label: 'Pose Detection', category: 'video' });\n\nfunction render(viji, p5) {\n  p5.background(17);\n\n  if (usePose.value) viji.video.cv.enablePoseDetection(true);\n  else viji.video.cv.enablePoseDetection(false);\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) {\n    p5.fill(100);\n    p5.textAlign(p5.CENTER, p5.CENTER);\n    p5.textSize(Math.min(viji.width, viji.height) * 0.04);\n    p5.text('Waiting for video...', viji.width / 2, viji.height / 2);\n    return;\n  }\n\n  p5.tint(255, 100);\n  p5.image(viji.video.currentFrame, 0, 0, viji.width, viji.height);\n  p5.noTint();\n\n  const pose = viji.video.pose;\n  if (!pose) return;\n\n  p5.noStroke();\n  p5.fill(255, 107, 107);\n  pose.landmarks.forEach(pt => {\n    if (pt.visibility > 0.5) {\n      p5.circle(pt.x * viji.width, pt.y * viji.height, 8);\n    }\n  });\n\n  p5.strokeWeight(2);\n  p5.noFill();\n  const drawGroup = (group, col) => {\n    if (group.length < 2) return;\n    p5.stroke(col[0], col[1], col[2]);\n    p5.beginShape();\n    group.forEach(pt => p5.vertex(pt.x * viji.width, pt.y * viji.height));\n    p5.endShape();\n  };\n\n  drawGroup(pose.leftArm, [255, 159, 243]);\n  drawGroup(pose.rightArm, [84, 160, 255]);\n  drawGroup(pose.leftLeg, [255, 159, 243]);\n  drawGroup(pose.rightLeg, [84, 160, 255]);\n  drawGroup(pose.torso, [254, 202, 87]);\n\n  p5.noStroke();\n  p5.fill(255);\n  p5.textSize(Math.min(viji.width, viji.height) * 0.025);\n  p5.textAlign(p5.LEFT, p5.BOTTOM);\n  p5.text('Confidence: ' + (pose.confidence * 100).toFixed(0) + '%', viji.width * 0.03, viji.height - 10);\n}\n",
+          "sceneFile": "pose-detection-demo.scene.js",
+          "capabilities": {
+            "video": true
+          }
+        },
+        {
+          "type": "text",
+          "markdown": "## Related\n\n- [Video & CV Overview](../)\n- [Hand Tracking](../hand-tracking/)\n- [Body Segmentation](../body-segmentation/)\n- [Native Pose Detection](/native/video/pose-detection)\n- [Shader Pose Detection](/shader/video/pose-detection)"
+        }
+      ]
+    },
+    "p5-cv-segmentation": {
+      "id": "p5-cv-segmentation",
+      "title": "Body Segmentation",
+      "description": "Per-pixel person/background segmentation mask in P5.js scenes.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Body Segmentation\n\nBody segmentation provides a per-pixel mask that separates the person from the background. Enable it with [`viji.video.cv.enableBodySegmentation(true)`](../connection/). The data API is identical to the [Native renderer](../../../native/video/body-segmentation/).\n\n## Property Reference\n\nResults appear in `viji.video.segmentation` — a `SegmentationData` object, or `null` when no mask is available.\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `segmentation.mask` | `Uint8Array` | Per-pixel mask: 0 = background, 1 = person |\n| `segmentation.width` | `number` | Mask width in pixels |\n| `segmentation.height` | `number` | Mask height in pixels |\n\nThe mask dimensions may differ from the video frame dimensions — they reflect the ML model's output resolution.\n\n## Usage\n\n```javascript\n// @renderer p5\n\nconst useSeg = viji.toggle(false, { label: 'Body Segmentation', category: 'video' });\n\nfunction render(viji, p5) {\n  p5.background(17);\n\n  if (useSeg.value) viji.video.cv.enableBodySegmentation(true);\n  else viji.video.cv.enableBodySegmentation(false);\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) return;\n\n  p5.image(viji.video.currentFrame, 0, 0, viji.width, viji.height);\n\n  const seg = viji.video.segmentation;\n  if (!seg) return;\n\n  let personPixels = 0;\n  for (let i = 0; i < seg.mask.length; i++) {\n    if (seg.mask[i] > 0) personPixels++;\n  }\n  const personRatio = personPixels / seg.mask.length;\n\n  if (personRatio > 0.05) {\n    const hue = 170 + personRatio * 60;\n    p5.noFill();\n    p5.stroke(hue % 360, 80, 60);\n    p5.strokeWeight(4);\n    p5.rect(0, 0, viji.width, viji.height);\n  }\n\n  p5.noStroke();\n  p5.fill(255);\n  p5.textSize(Math.min(viji.width, viji.height) * 0.03);\n  p5.textAlign(p5.LEFT, p5.BOTTOM);\n  p5.text(\n    'Person: ' + (personRatio * 100).toFixed(0) + '% (' + seg.width + 'x' + seg.height + ' mask)',\n    viji.width * 0.03, viji.height - 10\n  );\n}\n```\n\n**Cost: High** — body segmentation produces a per-pixel mask with a large tensor output.\n\n> [!WARNING]\n> **WebGL Context Limits:** Each CV feature requires its own WebGL context for ML inference. Browsers typically allow 8-16 active WebGL contexts. Enabling too many CV features simultaneously can cause context eviction, potentially breaking the scene's own rendering. Use only the CV features you need.\n\n> [!TIP]\n> **Best practice:** Don't enable CV features by default. Instead, expose a toggle parameter so users can activate them on capable devices:\n> ```javascript\n> const useSeg = viji.toggle(false, { label: 'Enable Body Segmentation', category: 'video' });\n> if (useSeg.value) {\n>   await viji.video.cv.enableBodySegmentation(true);\n> }\n> ```\n\nWhen body segmentation is disabled or no body is visible, `viji.video.segmentation` becomes `null`."
+        },
+        {
+          "type": "live-example",
+          "title": "Body Segmentation",
+          "sceneCode": "// @renderer p5\n\nconst useSeg = viji.toggle(false, { label: 'Body Segmentation', category: 'video' });\n\nfunction render(viji, p5) {\n  p5.background(17);\n\n  if (useSeg.value) viji.video.cv.enableBodySegmentation(true);\n  else viji.video.cv.enableBodySegmentation(false);\n\n  if (!viji.video.isConnected || !viji.video.currentFrame) {\n    p5.fill(100);\n    p5.textAlign(p5.CENTER, p5.CENTER);\n    p5.textSize(Math.min(viji.width, viji.height) * 0.04);\n    p5.text('Waiting for video...', viji.width / 2, viji.height / 2);\n    return;\n  }\n\n  p5.image(viji.video.currentFrame, 0, 0, viji.width, viji.height);\n\n  const seg = viji.video.segmentation;\n  if (!seg) return;\n\n  let personPixels = 0;\n  for (let i = 0; i < seg.mask.length; i++) {\n    if (seg.mask[i] > 0) personPixels++;\n  }\n  const personRatio = personPixels / seg.mask.length;\n\n  if (personRatio > 0.05) {\n    p5.noFill();\n    p5.stroke(78, 205, 196, 150);\n    p5.strokeWeight(4);\n    p5.rect(0, 0, viji.width, viji.height);\n  }\n\n  const fontSize = Math.min(viji.width, viji.height) * 0.03;\n  p5.noStroke();\n  p5.fill(0, 128);\n  p5.rect(0, viji.height - fontSize * 2, viji.width, fontSize * 2);\n  p5.fill(255);\n  p5.textSize(fontSize);\n  p5.textAlign(p5.CENTER, p5.CENTER);\n  p5.text(\n    'Person: ' + (personRatio * 100).toFixed(0) + '% | Mask: ' + seg.width + 'x' + seg.height,\n    viji.width / 2, viji.height - fontSize\n  );\n}\n",
+          "sceneFile": "body-segmentation-demo.scene.js",
+          "capabilities": {
+            "video": true
+          }
+        },
+        {
+          "type": "text",
+          "markdown": "## Related\n\n- [Video & CV Overview](../)\n- [Pose Detection](../pose-detection/)\n- [Face Detection](../face-detection/)\n- [Native Body Segmentation](/native/video/body-segmentation)\n- [Shader Body Segmentation](/shader/video/body-segmentation)"
+        }
+      ]
+    },
     "p5-pointer": {
       "id": "p5-pointer",
       "title": "Pointer (Unified)",
@@ -1653,7 +2672,10 @@ export const docsApi = {
           "type": "live-example",
           "title": "Pointer — Drag Trail",
           "sceneCode": "// @renderer p5\n\nconst trail = [];\nconst maxTrail = 80;\n\nfunction setup(viji, p5) {\n  p5.colorMode(p5.HSB, 360, 100, 100, 100);\n}\n\nfunction render(viji, p5) {\n  const ptr = viji.pointer;\n\n  p5.background(240, 10, 8, 15);\n\n  if (ptr.isDown) {\n    trail.push({ x: ptr.x, y: ptr.y });\n    if (trail.length > maxTrail) trail.shift();\n  } else if (trail.length > 0) {\n    trail.shift();\n  }\n\n  p5.noStroke();\n  for (let i = 0; i < trail.length; i++) {\n    const t = i / trail.length;\n    const r = 3 + t * 12;\n    p5.fill(200 + t * 60, 80, 65, t * 80);\n    p5.ellipse(trail[i].x, trail[i].y, r * 2);\n  }\n\n  const cursorSize = Math.min(viji.width, viji.height) * 0.03;\n  p5.fill(ptr.isDown ? p5.color(200, 80, 90) : p5.color(0, 0, 80, 50));\n  p5.ellipse(ptr.x, ptr.y, cursorSize);\n\n  p5.fill(0, 0, 100, 50);\n  p5.textSize(Math.min(viji.width, viji.height) * 0.025);\n  p5.textAlign(p5.LEFT);\n  p5.text(`pointer: (${Math.round(ptr.x)}, ${Math.round(ptr.y)})  type: ${ptr.type}`, viji.width * 0.03, viji.height - viji.height * 0.06);\n  p5.text(`isDown: ${ptr.isDown}  inCanvas: ${ptr.isInCanvas}`, viji.width * 0.03, viji.height - viji.height * 0.03);\n}\n",
-          "sceneFile": "pointer-p5-demo.scene.js"
+          "sceneFile": "pointer-p5-demo.scene.js",
+          "capabilities": {
+            "interaction": true
+          }
         },
         {
           "type": "text",
@@ -1674,7 +2696,10 @@ export const docsApi = {
           "type": "live-example",
           "title": "Mouse — Buttons & Wheel",
           "sceneCode": "// @renderer p5\n\nlet hue = 200;\nlet zoom = 1;\nlet prevRight = false;\n\nfunction setup(viji, p5) {\n  p5.colorMode(p5.HSB, 360, 100, 100, 100);\n}\n\nfunction render(viji, p5) {\n  const m = viji.mouse;\n  const size = Math.min(viji.width, viji.height);\n\n  if (m.rightButton && !prevRight) hue = (hue + 50) % 360;\n  prevRight = m.rightButton;\n\n  zoom -= m.wheelDelta * 0.001;\n  zoom = Math.max(0.3, Math.min(5, zoom));\n\n  p5.background(240, 10, 8, 20);\n\n  const speed = Math.sqrt(m.deltaX ** 2 + m.deltaY ** 2);\n  const radius = (size * 0.02 + speed * 1.5) * zoom;\n\n  if (m.isInCanvas) {\n    p5.noStroke();\n    p5.fill(hue, 80, 65, m.isPressed ? 90 : 40);\n    p5.ellipse(m.x, m.y, radius * 2);\n\n    if (m.leftButton) {\n      p5.noFill();\n      p5.stroke(hue, 80, 75, 60);\n      p5.strokeWeight(2);\n      p5.ellipse(m.x, m.y, radius * 2);\n    }\n  }\n\n  p5.noStroke();\n  p5.fill(0, 0, 100, 50);\n  p5.textSize(size * 0.022);\n  p5.textFont('monospace');\n  p5.textAlign(p5.LEFT);\n  const y0 = viji.height - size * 0.12;\n  p5.text(`pos: (${Math.round(m.x)}, ${Math.round(m.y)})  inCanvas: ${m.isInCanvas}`, size * 0.03, y0);\n  p5.text(`buttons: L[${m.leftButton ? '\\u25A0' : '\\u25A1'}] R[${m.rightButton ? '\\u25A0' : '\\u25A1'}] M[${m.middleButton ? '\\u25A0' : '\\u25A1'}]`, size * 0.03, y0 + size * 0.03);\n  p5.text(`wheel: ${m.wheelDelta.toFixed(1)}  zoom: ${zoom.toFixed(2)}`, size * 0.03, y0 + size * 0.06);\n}\n",
-          "sceneFile": "mouse-p5-demo.scene.js"
+          "sceneFile": "mouse-p5-demo.scene.js",
+          "capabilities": {
+            "interaction": true
+          }
         },
         {
           "type": "text",
@@ -1695,7 +2720,10 @@ export const docsApi = {
           "type": "live-example",
           "title": "Keyboard — Movement & State",
           "sceneCode": "// @renderer p5\n\nlet px, py;\n\nfunction setup(viji, p5) {\n  p5.colorMode(p5.HSB, 360, 100, 100, 100);\n}\n\nfunction render(viji, p5) {\n  const w = viji.width, h = viji.height;\n  const size = Math.min(w, h);\n  const kb = viji.keyboard;\n\n  if (px === undefined) { px = w / 2; py = h / 2; }\n\n  const speed = size * 0.4 * viji.deltaTime * (kb.shift ? 2.5 : 1);\n  if (kb.isPressed('w') || kb.isPressed('arrowup')) py -= speed;\n  if (kb.isPressed('s') || kb.isPressed('arrowdown')) py += speed;\n  if (kb.isPressed('a') || kb.isPressed('arrowleft')) px -= speed;\n  if (kb.isPressed('d') || kb.isPressed('arrowright')) px += speed;\n  px = Math.max(0, Math.min(w, px));\n  py = Math.max(0, Math.min(h, py));\n\n  p5.background(240, 10, 8, 15);\n\n  const r = size * 0.03;\n  p5.noStroke();\n  p5.fill((viji.time * 40) % 360, 80, 65);\n  p5.ellipse(px, py, r * 2);\n\n  p5.fill(0, 0, 100, 50);\n  p5.textSize(size * 0.022);\n  p5.textFont('monospace');\n  p5.textAlign(p5.LEFT);\n  const y0 = h - size * 0.09;\n  p5.text(`active: [${[...kb.activeKeys].join(', ')}]`, size * 0.03, y0);\n  p5.text(`last: \"${kb.lastKeyPressed}\"  mods: ${kb.shift ? 'Shift ' : ''}${kb.ctrl ? 'Ctrl ' : ''}${kb.alt ? 'Alt ' : ''}${!kb.shift && !kb.ctrl && !kb.alt ? 'none' : ''}`, size * 0.03, y0 + size * 0.03);\n\n  p5.fill(0, 0, 100, 30);\n  p5.textAlign(p5.CENTER);\n  p5.text('WASD / Arrows to move \\u2022 Shift for speed', w / 2, size * 0.04);\n}\n",
-          "sceneFile": "keyboard-p5-demo.scene.js"
+          "sceneFile": "keyboard-p5-demo.scene.js",
+          "capabilities": {
+            "interaction": true
+          }
         },
         {
           "type": "text",
@@ -1710,17 +2738,116 @@ export const docsApi = {
       "content": [
         {
           "type": "text",
-          "markdown": "# Touch\n\n`viji.touches` provides full multi-touch input with per-finger position, pressure, contact radius, velocity, and lifecycle tracking.\n\n> [!TIP]\n> For single-point interactions (click, drag, follow) that should work on both touch and mouse, use [`viji.pointer`](../pointer/) instead. The touch API is for when you need multi-touch gestures, pressure sensitivity, contact radius, or per-finger velocity.\n\n> [!WARNING]\n> P5's built-in touch globals (`touchX`, `touchY`, `touches`) are **not updated** in the worker environment. P5 event callbacks (`touchStarted()`, `touchMoved()`, `touchEnded()`) are **never called**. Use `viji.touches` instead.\n\n## API Reference\n\n### TouchAPI (`viji.touches`)\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `points` | `TouchPoint[]` | All currently active touch points |\n| `count` | `number` | Number of active touches |\n| `started` | `TouchPoint[]` | Touches that started this frame |\n| `moved` | `TouchPoint[]` | Touches that moved this frame |\n| `ended` | `TouchPoint[]` | Touches that ended this frame |\n| `primary` | `TouchPoint \\| null` | First active touch (convenience) |\n\n### TouchPoint\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `id` | `number` | Unique touch identifier (stable across frames) |\n| `x` | `number` | Canvas-space X position (pixels) |\n| `y` | `number` | Canvas-space Y position (pixels) |\n| `pressure` | `number` | Touch pressure (0–1, device-dependent) |\n| `force` | `number` | Same as `pressure` (alias) |\n| `radius` | `number` | Contact radius — `Math.max(radiusX, radiusY)` |\n| `radiusX` | `number` | Horizontal contact radius (pixels) |\n| `radiusY` | `number` | Vertical contact radius (pixels) |\n| `rotationAngle` | `number` | Contact area rotation (radians) |\n| `isInCanvas` | `boolean` | `true` if this touch is within the canvas bounds |\n| `deltaX` | `number` | Horizontal movement since last frame (pixels) |\n| `deltaY` | `number` | Vertical movement since last frame (pixels) |\n| `velocity` | `{ x: number, y: number }` | Movement velocity (pixels/second) |\n| `isNew` | `boolean` | `true` for exactly one frame when this touch starts, then resets |\n| `isActive` | `boolean` | `true` while the touch is ongoing |\n| `isEnding` | `boolean` | `true` for exactly one frame when this touch ends, then resets |\n\n## P5 Input Migration\n\n| P5 Global | Viji Equivalent |\n|-----------|-----------------|\n| `touchX` / `touchY` | `viji.touches.primary.x` / `.y` (check for `null` first) |\n| `touches` array | `viji.touches.points` |\n| `touchStarted()` | Check `viji.touches.started` in `render()` |\n| `touchMoved()` | Check `viji.touches.moved` in `render()` |\n| `touchEnded()` | Check `viji.touches.ended` in `render()` |\n\n## Coordinate System\n\nTouch coordinates are in **canvas-space pixels**, with `(0, 0)` at the top-left corner — identical to [`viji.mouse`](../mouse/) coordinates (same as `p5.width` / `p5.height`). When a touch starts on the canvas and is dragged outside, the browser continues delivering events, and `isInCanvas` correctly reports `false`.\n\n## Frame Lifecycle\n\n- `started`, `moved`, and `ended` arrays are cleared at the start of each frame.\n- `points` and `count` reflect the current state after all events in the frame.\n- A touch appears in `started` on the frame it begins (with `isNew: true`), in `ended` on the frame it lifts (with `isEnding: true`).\n- `primary` is always `points[0]` or `null` when no touches are active.\n\n## Basic Example"
+          "markdown": "# Touch\n\n`viji.touches` provides full multi-touch input with per-finger position, pressure, contact radius, velocity, and lifecycle tracking.\n\n> [!TIP]\n> For single-point interactions (click, drag, follow) that should work on both touch and mouse, use [`viji.pointer`](../pointer/) instead. The touch API is for when you need multi-touch gestures, pressure sensitivity, contact radius, or per-finger velocity.\n\n> [!WARNING]\n> P5's built-in touch globals (`touchX`, `touchY`, `touches`) are **not updated** in the worker environment. P5 event callbacks (`touchStarted()`, `touchMoved()`, `touchEnded()`) are **never called**. Use `viji.touches` instead.\n\n## API Reference\n\n### TouchAPI (`viji.touches`)\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `points` | `TouchPoint[]` | All currently active touch points |\n| `count` | `number` | Number of active touches |\n| `started` | `TouchPoint[]` | Touches that started this frame |\n| `moved` | `TouchPoint[]` | Touches that moved this frame |\n| `ended` | `TouchPoint[]` | Touches that ended this frame |\n| `primary` | `TouchPoint \\| null` | First active touch (convenience) |\n\n### TouchPoint\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `id` | `number` | Unique touch identifier (stable across frames) |\n| `x` | `number` | Canvas-space X position (pixels) |\n| `y` | `number` | Canvas-space Y position (pixels) |\n| `pressure` | `number` | Touch pressure (0–1, device-dependent) |\n| `force` | `number` | Same as `pressure` (alias) |\n| `radius` | `number` | Contact radius — `Math.max(radiusX, radiusY)` |\n| `radiusX` | `number` | Horizontal contact radius (pixels) |\n| `radiusY` | `number` | Vertical contact radius (pixels) |\n| `rotationAngle` | `number` | Contact area rotation (radians) |\n| `isInCanvas` | `boolean` | `true` if this touch is within the canvas bounds |\n| `deltaX` | `number` | Horizontal movement since last frame (pixels) |\n| `deltaY` | `number` | Vertical movement since last frame (pixels) |\n| `velocity` | `{ x: number, y: number }` | Movement velocity (pixels/second) |\n| `isNew` | `boolean` | `true` for exactly one frame when this touch starts, then resets |\n| `isActive` | `boolean` | `true` while the touch is ongoing |\n| `isEnding` | `boolean` | `true` for exactly one frame when this touch ends, then resets |\n\n## P5 Input Migration\n\n| P5 Global | Viji Equivalent |\n|-----------|-----------------|\n| `touchX` / `touchY` | `viji.touches.primary.x` / `.y` (check for `null` first) |\n| `touches` array | `viji.touches.points` |\n| `touchStarted()` | Check `viji.touches.started` in `render()` |\n| `touchMoved()` | Check `viji.touches.moved` in `render()` |\n| `touchEnded()` | Check `viji.touches.ended` in `render()` |\n\n## Coordinate System\n\nTouch coordinates are in **canvas-space pixels**, with `(0, 0)` at the top-left corner — identical to [`viji.mouse`](../mouse/) coordinates (same as `p5.width` / `p5.height`). When a touch starts on the canvas and is dragged outside, the browser continues delivering events, and `isInCanvas` correctly reports `false`.\n\n## Frame Lifecycle\n\n- `started`, `moved`, and `ended` arrays are cleared at the start of each frame.\n- `points` and `count` reflect the current state after all events in the frame.\n- A touch appears in `started` on the frame it begins (with `isNew: true`), in `ended` on the frame it lifts (with `isEnding: true`).\n- `primary` is always `points[0]` or `null` when no touches are active.\n\n## Basic Example"
+        },
+        {
+          "type": "live-example",
+          "title": "Touch — Multi-Point Tracker",
+          "sceneCode": "// @renderer p5\n\nconst ripples = [];\n\nfunction setup(viji, p5) {\n  p5.colorMode(p5.HSB, 360, 100, 100, 100);\n}\n\nfunction render(viji, p5) {\n  const size = Math.min(viji.width, viji.height);\n  const touch = viji.touches;\n  const dt = viji.deltaTime;\n\n  for (const pt of touch.started) {\n    ripples.push({ x: pt.x, y: pt.y, r: 0, alpha: 100 });\n  }\n\n  p5.background(240, 10, 8, 20);\n\n  p5.noFill();\n  for (let i = ripples.length - 1; i >= 0; i--) {\n    const rp = ripples[i];\n    rp.r += size * 0.3 * dt;\n    rp.alpha -= dt * 80;\n    if (rp.alpha <= 0) { ripples.splice(i, 1); continue; }\n    p5.stroke(200, 80, 70, rp.alpha);\n    p5.strokeWeight(2);\n    p5.ellipse(rp.x, rp.y, rp.r * 2);\n  }\n\n  p5.noStroke();\n  for (let i = 0; i < touch.count; i++) {\n    const pt = touch.points[i];\n    const r = size * 0.02 + pt.pressure * size * 0.04;\n\n    p5.fill(120 + i * 60, 80, 65, 80);\n    p5.ellipse(pt.x, pt.y, r * 2);\n\n    const speed = Math.sqrt(pt.velocity.x ** 2 + pt.velocity.y ** 2);\n    if (speed > 10) {\n      const len = Math.min(speed * 0.05, size * 0.08);\n      const angle = Math.atan2(pt.velocity.y, pt.velocity.x);\n      p5.stroke(120 + i * 60, 80, 75, 50);\n      p5.strokeWeight(2);\n      p5.line(pt.x, pt.y, pt.x + Math.cos(angle) * len, pt.y + Math.sin(angle) * len);\n      p5.noStroke();\n    }\n\n    p5.fill(0, 0, 100, 60);\n    p5.textSize(size * 0.02);\n    p5.textAlign(p5.CENTER);\n    p5.text('T' + pt.id, pt.x, pt.y - r - size * 0.01);\n  }\n\n  p5.noStroke();\n  p5.fill(0, 0, 100, 40);\n  p5.textSize(size * 0.022);\n  p5.textFont('monospace');\n  p5.textAlign(p5.LEFT);\n  p5.text(`touches: ${touch.count}  primary: ${touch.primary ? 'T' + touch.primary.id : '-'}`, size * 0.03, viji.height - size * 0.03);\n}\n",
+          "sceneFile": "touch-p5-demo.scene.js",
+          "capabilities": {
+            "interaction": true
+          }
+        },
+        {
+          "type": "text",
+          "markdown": "## Common Patterns\n\n### Draw at Each Touch Point\n\n```javascript\nfunction render(viji, p5) {\n  for (const pt of viji.touches.points) {\n    p5.circle(pt.x, pt.y, 20 + pt.pressure * 60);\n  }\n}\n```\n\n### Detect New Touches\n\n```javascript\nfunction render(viji, p5) {\n  for (const pt of viji.touches.started) {\n    spawnRipple(pt.x, pt.y);\n  }\n}\n```\n\n### Two-Finger Distance\n\n```javascript\nfunction render(viji, p5) {\n  if (viji.touches.count >= 2) {\n    const a = viji.touches.points[0];\n    const b = viji.touches.points[1];\n    const dist = p5.dist(a.x, a.y, b.x, b.y);\n    applyZoom(dist);\n  }\n}\n```\n\n## Related\n\n- [Pointer (Unified)](../pointer/) — recommended starting point for single-point cross-device interactions\n- [Mouse](../mouse/) — mouse position, buttons, and scroll wheel\n- [Keyboard](../keyboard/) — key state queries and modifier tracking\n- [Native Touch](/native/touch) — same API in the native renderer\n- [Shader Touch Uniforms](/shader/touch) — GLSL uniforms for touch positions"
+        }
+      ]
+    },
+    "p5-sensors": {
+      "id": "p5-sensors",
+      "title": "Device Sensors",
+      "description": "Access accelerometer, gyroscope, and orientation data from the device running the scene in P5 scenes.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Device Sensors\n\n`viji.device` provides real-time accelerometer, gyroscope, and orientation data from the device's hardware sensors (phone, tablet, or laptop).\n\n> [!WARNING]\n> P5's built-in `accelerationX`, `accelerationY`, `accelerationZ`, `rotationX`, `rotationY`, `rotationZ`, `pRotationX`, `pRotationY`, `pRotationZ`, and `turnAxis` globals are **not updated** in the worker environment. Use `viji.device` instead.\n\n> [!NOTE]\n> Device sensors require the host to enable `allowDeviceInteraction: true`. If not enabled, `viji.device.motion` and `viji.device.orientation` remain `null`.\n\n## API Reference\n\n### DeviceSensorState (`viji.device`)\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `motion` | `DeviceMotionData \\| null` | Accelerometer and gyroscope data. `null` when unavailable. |\n| `orientation` | `DeviceOrientationData \\| null` | Device spatial orientation. `null` when unavailable. |\n\n### DeviceMotionData (`viji.device.motion`)\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `acceleration` | `{ x, y, z } \\| null` | Linear acceleration without gravity (m/s²). Each axis is `number \\| null`. |\n| `accelerationIncludingGravity` | `{ x, y, z } \\| null` | Acceleration including gravity (m/s²). Each axis is `number \\| null`. |\n| `rotationRate` | `{ alpha, beta, gamma } \\| null` | Gyroscope rotation rate (degrees/second). Each axis is `number \\| null`. |\n| `interval` | `number` | Interval between sensor updates (milliseconds). |\n\n### DeviceOrientationData (`viji.device.orientation`)\n\n| Property | Type | Range | Description |\n|----------|------|-------|-------------|\n| `alpha` | `number \\| null` | 0–360 | Rotation around Z-axis (compass heading) |\n| `beta` | `number \\| null` | -180 to 180 | Rotation around X-axis (front-to-back tilt) |\n| `gamma` | `number \\| null` | -90 to 90 | Rotation around Y-axis (left-to-right tilt) |\n| `absolute` | `boolean` | — | `true` if using magnetometer for absolute orientation |\n\n## Default Values\n\nWhen device sensors are unavailable:\n- `viji.device.motion` → `null`\n- `viji.device.orientation` → `null`\n\nIndividual axis values within a non-null motion or orientation object can also be `null` if the hardware doesn't provide that specific measurement.\n\n## Guard Patterns\n\nAlways check for `null` before accessing sensor data:\n\n```javascript\n// @renderer p5\n\nfunction render(viji, p5) {\n  const motion = viji.device.motion;\n  if (motion && motion.acceleration) {\n    const ax = motion.acceleration.x ?? 0;\n    const ay = motion.acceleration.y ?? 0;\n    // Use acceleration values\n  }\n\n  const orient = viji.device.orientation;\n  if (orient) {\n    const tiltX = orient.beta ?? 0;\n    const tiltY = orient.gamma ?? 0;\n    // Use orientation values\n  }\n}\n```\n\n## Basic Example"
+        },
+        {
+          "type": "live-example",
+          "title": "Device Sensors — Tilt Visualization",
+          "sceneCode": "// @renderer p5\n\nfunction render(viji, p5) {\n  p5.background(10, 10, 26);\n\n  const orient = viji.device.orientation;\n  const motion = viji.device.motion;\n\n  const beta = orient?.beta ?? 0;\n  const gamma = orient?.gamma ?? 0;\n  const alpha = orient?.alpha ?? 0;\n\n  const normX = gamma / 90;\n  const normY = beta / 180;\n\n  const cx = p5.width / 2 + normX * (p5.width * 0.35);\n  const cy = p5.height / 2 + normY * (p5.height * 0.35);\n\n  const accel = motion?.accelerationIncludingGravity;\n  const ax = accel?.x ?? 0;\n  const ay = accel?.y ?? 0;\n  const magnitude = Math.sqrt(ax * ax + ay * ay);\n  const radius = 20 + Math.min(magnitude, 15) * 3;\n\n  p5.noStroke();\n  p5.colorMode(p5.HSB, 360, 100, 100);\n  p5.fill(alpha % 360, 70, 60);\n  p5.ellipse(cx, cy, radius * 2, radius * 2);\n\n  p5.stroke(255, 0, 100, 0.15);\n  p5.strokeWeight(1);\n  p5.line(p5.width / 2, 0, p5.width / 2, p5.height);\n  p5.line(0, p5.height / 2, p5.width, p5.height / 2);\n\n  p5.noStroke();\n  p5.colorMode(p5.RGB);\n  p5.fill(255, 128);\n  p5.textSize(12);\n  p5.textFont('monospace');\n  p5.textAlign(p5.LEFT);\n  p5.text(`beta: ${beta.toFixed(1)}°  gamma: ${gamma.toFixed(1)}°`, 10, 20);\n  p5.text(`alpha: ${alpha.toFixed(1)}°`, 10, 36);\n  p5.text(`accel: ${magnitude.toFixed(2)} m/s²`, 10, 52);\n}\n",
+          "sceneFile": "sensors-p5-demo.scene.js",
+          "capabilities": {
+            "interaction": true
+          }
+        },
+        {
+          "type": "text",
+          "markdown": "## Common Patterns\n\n### Tilt-Reactive Position\n\n```javascript\n// @renderer p5\n\nfunction render(viji, p5) {\n  const orient = viji.device.orientation;\n  const tiltX = orient?.gamma ?? 0;\n  const tiltY = orient?.beta ?? 0;\n\n  const x = p5.width / 2 + (tiltX / 90) * (p5.width / 2);\n  const y = p5.height / 2 + (tiltY / 180) * (p5.height / 2);\n\n  p5.background(10);\n  p5.noStroke();\n  p5.fill(255);\n  p5.ellipse(x, y, 60, 60);\n}\n```\n\n### Shake Detection\n\n```javascript\n// @renderer p5\n\nlet lastAccel = 0;\n\nfunction render(viji, p5) {\n  const accel = viji.device.motion?.acceleration;\n  if (accel) {\n    const magnitude = Math.sqrt(\n      (accel.x ?? 0) ** 2 +\n      (accel.y ?? 0) ** 2 +\n      (accel.z ?? 0) ** 2\n    );\n    if (magnitude > 15 && magnitude - lastAccel > 5) {\n      triggerShakeEffect();\n    }\n    lastAccel = magnitude;\n  }\n}\n```\n\n### Compass Heading\n\n```javascript\n// @renderer p5\n\nfunction render(viji, p5) {\n  const heading = viji.device.orientation?.alpha ?? 0;\n\n  p5.background(10);\n  p5.translate(p5.width / 2, p5.height / 2);\n  p5.rotate(p5.radians(-heading));\n  p5.fill(255, 80, 80);\n  p5.triangle(0, -40, -10, 10, 10, 10);\n}\n```\n\n## Related\n\n- [Pointer](../pointer/) — unified click/drag input\n- [Touch](../touch/) — multi-touch with pressure and radius\n- [External Device Sensors](../external-devices/sensors/) — sensor data from connected external devices\n- [Native Device Sensors](/native/sensors) — same API in the Native renderer\n- [Shader Sensor Uniforms](/shader/sensors) — GLSL uniforms for device sensors"
+        }
+      ]
+    },
+    "p5-ext-overview": {
+      "id": "p5-ext-overview",
+      "title": "External Devices — Overview",
+      "description": "Access connected external devices in P5 scenes — phones, tablets, and other hardware linked to your installation.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# External Devices\n\n`viji.devices` provides access to externally connected devices (phones, tablets, or other hardware) linked to your installation through the host platform.\n\n> [!NOTE]\n> External devices are managed entirely by the host application. Artists cannot control device connections — you only read the current state each render cycle. Devices appear and disappear from the array dynamically as they connect and disconnect.\n\n## API Reference\n\n### DeviceState (`viji.devices[i]`)\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `id` | `string` | Unique device identifier (assigned by host) |\n| `name` | `string` | User-friendly device name (assigned by host) |\n| `motion` | `DeviceMotionData \\| null` | Device accelerometer and gyroscope data |\n| `orientation` | `DeviceOrientationData \\| null` | Device spatial orientation |\n| `video` | `VideoAPI \\| null` | Device camera video feed, or `null` if no camera connected |\n\n### Device Limits\n\nUp to **8 external devices** can be connected simultaneously. The `viji.devices` array contains only currently connected devices.\n\n## Default Values\n\n- `viji.devices` → `[]` (empty array) when no devices are connected\n- `device.motion` → `null` when the device has no sensor data\n- `device.orientation` → `null` when the device has no orientation data\n- `device.video` → `null` when the device has no camera stream\n\n## Guard Patterns\n\nAlways check array length and null properties:\n\n```javascript\n// @renderer p5\n\nfunction render(viji, p5) {\n  if (viji.devices.length === 0) return;\n\n  for (const device of viji.devices) {\n    if (device.video?.isConnected && device.video.currentFrame) {\n      p5.image(device.video.currentFrame, 0, 0);\n    }\n\n    if (device.motion?.acceleration) {\n      // Use device acceleration\n    }\n  }\n}\n```\n\n## Basic Example"
+        },
+        {
+          "type": "live-example",
+          "title": "External Devices — Connected Devices",
+          "sceneCode": "// @renderer p5\n\nfunction render(viji, p5) {\n  p5.background(10, 10, 26);\n\n  const devices = viji.devices;\n  const count = devices.length;\n\n  p5.fill(255);\n  p5.noStroke();\n  p5.textAlign(p5.CENTER);\n  p5.textSize(20);\n  p5.textStyle(p5.BOLD);\n  p5.text(`${count} device${count !== 1 ? 's' : ''} connected`, p5.width / 2, 40);\n\n  if (count === 0) {\n    p5.fill(255, 80);\n    p5.textSize(14);\n    p5.textStyle(p5.NORMAL);\n    p5.text('Waiting for external devices...', p5.width / 2, p5.height / 2);\n    return;\n  }\n\n  const cardW = Math.min(200, (p5.width - 40) / Math.min(count, 4));\n  const startX = (p5.width - cardW * Math.min(count, 4)) / 2;\n\n  devices.forEach((device, i) => {\n    const col = i % 4;\n    const row = Math.floor(i / 4);\n    const x = startX + col * cardW;\n    const y = 70 + row * 120;\n\n    p5.fill(255, 20);\n    p5.rect(x + 4, y, cardW - 8, 100, 8);\n\n    p5.fill(255);\n    p5.textSize(13);\n    p5.textStyle(p5.BOLD);\n    p5.textAlign(p5.CENTER);\n    p5.text(device.name || device.id, x + cardW / 2, y + 25);\n\n    p5.textSize(11);\n    p5.textStyle(p5.NORMAL);\n    p5.fill(255, 128);\n\n    const hasVideo = device.video?.isConnected ? '● Video' : '○ No video';\n    const hasSensors = device.motion ? '● Sensors' : '○ No sensors';\n\n    p5.text(hasVideo, x + cardW / 2, y + 55);\n    p5.text(hasSensors, x + cardW / 2, y + 72);\n  });\n}\n",
+          "sceneFile": "overview-p5-demo.scene.js",
+          "capabilities": {
+            "interaction": true
+          }
+        },
+        {
+          "type": "text",
+          "markdown": "## Common Patterns\n\n### Display Device Count\n\n```javascript\n// @renderer p5\n\nfunction render(viji, p5) {\n  const count = viji.devices.length;\n\n  p5.background(17);\n  p5.fill(255);\n  p5.textAlign(p5.CENTER, p5.CENTER);\n  p5.textSize(24);\n  p5.text(\n    `${count} device${count !== 1 ? 's' : ''} connected`,\n    p5.width / 2, p5.height / 2\n  );\n}\n```\n\n### Find Device by Name\n\n```javascript\n// @renderer p5\n\nfunction render(viji, p5) {\n  const phone = viji.devices.find(d => d.name.includes('Phone'));\n  if (phone) {\n    // Use phone-specific data\n  }\n}\n```\n\n### Iterate All Devices\n\n```javascript\n// @renderer p5\n\nfunction render(viji, p5) {\n  viji.devices.forEach((device, index) => {\n    const hasVideo = device.video?.isConnected ?? false;\n    const hasSensors = device.motion !== null;\n    // Render device status at position based on index\n  });\n}\n```\n\n## What's Available on Each Device\n\n| Feature | Access | Notes |\n|---------|--------|-------|\n| **Identity** | `device.id`, `device.name` | Always available |\n| **Sensors** | `device.motion`, `device.orientation` | See [Device Sensors](sensors/) |\n| **Video** | `device.video` | See [Device Video](video/) |\n\n> [!WARNING]\n> Device video does **not** support Computer Vision (CV) features. CV processing (face detection, hand tracking, etc.) is only available on the main video stream (`viji.video`). The `device.video` object provides video frames only.\n\n## Related\n\n- [Device Video](video/) — accessing camera feeds from connected devices\n- [Device Sensors](sensors/) — accelerometer and orientation from connected devices\n- [Device Sensors (Internal)](../sensors/) — sensors from the device running the scene\n- [Native External Devices](/native/external-devices) — same API in the Native renderer\n- [Shader External Device Uniforms](/shader/external-devices) — GLSL uniforms for external devices"
+        }
+      ]
+    },
+    "p5-ext-video": {
+      "id": "p5-ext-video",
+      "title": "Device Video",
+      "description": "Access camera feeds from externally connected devices in P5 scenes — draw frames, check resolution, and read pixel data.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Device Video\n\nEach external device in `viji.devices` can provide a camera video feed through `device.video`. This gives you access to live video frames from connected phones, tablets, or other camera-equipped hardware.\n\n> [!WARNING]\n> Device video does **not** support Computer Vision (CV) features. Face detection, hand tracking, pose detection, and body segmentation are only available on the main video stream (`viji.video`). Device video provides raw video frames only.\n\n## API Reference\n\n### VideoAPI (`device.video`)\n\n`device.video` is `null` when the device has no camera stream connected by the host. When available, it provides:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `isConnected` | `boolean` | `true` when the device camera stream is actively providing frames |\n| `currentFrame` | `OffscreenCanvas \\| null` | Current video frame, drawable with `p5.image()` |\n| `frameWidth` | `number` | Video frame width in pixels (0 when not connected) |\n| `frameHeight` | `number` | Video frame height in pixels (0 when not connected) |\n| `frameRate` | `number` | Video frame rate in Hz (0 when not connected) |\n| `getFrameData()` | `ImageData \\| null` | Raw RGBA pixel data for per-pixel analysis |\n\n## Default Values\n\n- `device.video` → `null` when the device has no camera stream\n- `device.video.currentFrame` → `null` when video is not connected\n- `device.video.frameWidth` / `frameHeight` → `0` when not connected\n- `device.video.frameRate` → `0` when not connected\n- `device.video.getFrameData()` → `null` when not connected\n\n## Guard Pattern\n\nAlways check both `device.video` existence and connection status:\n\n```javascript\n// @renderer p5\n\nfunction render(viji, p5) {\n  for (const device of viji.devices) {\n    if (device.video?.isConnected && device.video.currentFrame) {\n      p5.image(device.video.currentFrame, 0, 0, p5.width, p5.height);\n    }\n  }\n}\n```\n\n## Basic Example"
+        },
+        {
+          "type": "live-example",
+          "title": "Device Video — Camera Grid",
+          "sceneCode": "// @renderer p5\n\nfunction render(viji, p5) {\n  p5.background(10, 10, 26);\n\n  const cameras = viji.devices.filter(\n    d => d.video?.isConnected && d.video.currentFrame\n  );\n\n  if (cameras.length === 0) {\n    p5.fill(255, 80);\n    p5.noStroke();\n    p5.textAlign(p5.CENTER, p5.CENTER);\n    p5.textSize(14);\n    p5.text('No device cameras connected', p5.width / 2, p5.height / 2);\n    return;\n  }\n\n  const cols = Math.ceil(Math.sqrt(cameras.length));\n  const rows = Math.ceil(cameras.length / cols);\n  const cellW = p5.width / cols;\n  const cellH = p5.height / rows;\n  const pad = 4;\n\n  cameras.forEach((device, i) => {\n    const col = i % cols;\n    const row = Math.floor(i / cols);\n    const x = col * cellW + pad;\n    const y = row * cellH + pad;\n    const cw = cellW - pad * 2;\n    const ch = cellH - pad * 2;\n\n    p5.image(device.video.currentFrame, x, y, cw, ch);\n\n    p5.fill(0, 128);\n    p5.noStroke();\n    p5.rect(x, y + ch - 24, cw, 24);\n\n    p5.fill(255);\n    p5.textSize(11);\n    p5.textAlign(p5.LEFT);\n    p5.text(\n      `${device.name} — ${device.video.frameWidth}×${device.video.frameHeight}`,\n      x + 6, y + ch - 8\n    );\n  });\n}\n",
+          "sceneFile": "video-p5-demo.scene.js",
+          "capabilities": {
+            "interaction": true
+          }
+        },
+        {
+          "type": "text",
+          "markdown": "## Common Patterns\n\n### Draw All Device Cameras in a Grid\n\n```javascript\n// @renderer p5\n\nfunction render(viji, p5) {\n  p5.background(0);\n\n  const cameras = viji.devices.filter(\n    d => d.video?.isConnected && d.video.currentFrame\n  );\n  if (cameras.length === 0) return;\n\n  const cols = Math.ceil(Math.sqrt(cameras.length));\n  const rows = Math.ceil(cameras.length / cols);\n  const cellW = p5.width / cols;\n  const cellH = p5.height / rows;\n\n  cameras.forEach((device, i) => {\n    const col = i % cols;\n    const row = Math.floor(i / cols);\n    p5.image(\n      device.video.currentFrame,\n      col * cellW, row * cellH, cellW, cellH\n    );\n  });\n}\n```\n\n### Picture-in-Picture from a Device Camera\n\n```javascript\n// @renderer p5\n\nfunction render(viji, p5) {\n  p5.background(26, 26, 46);\n\n  const device = viji.devices[0];\n  if (device?.video?.isConnected && device.video.currentFrame) {\n    const pipW = p5.width * 0.3;\n    const pipH = pipW * (device.video.frameHeight / device.video.frameWidth);\n\n    p5.image(\n      device.video.currentFrame,\n      p5.width - pipW - 10, 10, pipW, pipH\n    );\n    p5.noFill();\n    p5.stroke(255, 80);\n    p5.strokeWeight(2);\n    p5.rect(p5.width - pipW - 10, 10, pipW, pipH);\n  }\n}\n```\n\n### Read Pixel Data from a Device Camera\n\n```javascript\n// @renderer p5\n\nfunction render(viji, p5) {\n  const device = viji.devices[0];\n  if (!device?.video?.isConnected) return;\n\n  const imageData = device.video.getFrameData();\n  if (!imageData) return;\n\n  const pixels = imageData.data;\n  const pixelCount = imageData.width * imageData.height;\n  let totalR = 0, totalG = 0, totalB = 0;\n\n  for (let i = 0; i < pixels.length; i += 4) {\n    totalR += pixels[i];\n    totalG += pixels[i + 1];\n    totalB += pixels[i + 2];\n  }\n\n  const avgR = totalR / pixelCount;\n  const avgG = totalG / pixelCount;\n  const avgB = totalB / pixelCount;\n\n  p5.background(avgR, avgG, avgB);\n}\n```\n\n## Related\n\n- [External Devices — Overview](../) — device identity, connection lifecycle, and guard patterns\n- [External Device Sensors](../sensors/) — accelerometer and orientation from connected devices\n- [Video & CV — Video Basics](../../video/basics/) — main camera video API (with CV support)\n- [Native Device Video](/native/external-devices/video) — same API in the Native renderer\n- [Shader Device Video Textures](/shader/external-devices/video) — GLSL uniforms for device camera textures"
+        }
+      ]
+    },
+    "p5-ext-sensors": {
+      "id": "p5-ext-sensors",
+      "title": "External Device Sensors",
+      "description": "Access accelerometer, gyroscope, and orientation data from externally connected devices in P5 scenes.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# External Device Sensors\n\nEach external device in `viji.devices` can provide sensor data through `device.motion` and `device.orientation`. These use the same `DeviceMotionData` and `DeviceOrientationData` structures as the [internal device sensors](../../sensors/).\n\n> [!WARNING]\n> P5's built-in `accelerationX`, `accelerationY`, `accelerationZ` globals only reflect the internal device. For external device sensors, always use `viji.devices[i].motion` and `viji.devices[i].orientation`.\n\n## API Reference\n\n### DeviceMotionData (`device.motion`)\n\n`device.motion` is `null` when the device has no sensor data available.\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `acceleration` | `{ x, y, z } \\| null` | Linear acceleration without gravity (m/s²). Each axis is `number \\| null`. |\n| `accelerationIncludingGravity` | `{ x, y, z } \\| null` | Acceleration including gravity (m/s²). Each axis is `number \\| null`. |\n| `rotationRate` | `{ alpha, beta, gamma } \\| null` | Gyroscope rotation rate (degrees/second). Each axis is `number \\| null`. |\n| `interval` | `number` | Interval between sensor updates (milliseconds). |\n\n### DeviceOrientationData (`device.orientation`)\n\n`device.orientation` is `null` when the device has no orientation data available.\n\n| Property | Type | Range | Description |\n|----------|------|-------|-------------|\n| `alpha` | `number \\| null` | 0–360 | Rotation around Z-axis (compass heading) |\n| `beta` | `number \\| null` | -180 to 180 | Rotation around X-axis (front-to-back tilt) |\n| `gamma` | `number \\| null` | -90 to 90 | Rotation around Y-axis (left-to-right tilt) |\n| `absolute` | `boolean` | — | `true` if using magnetometer for absolute orientation |\n\n## Default Values\n\n- `device.motion` → `null` when the device has no sensor data\n- `device.orientation` → `null` when the device has no orientation data\n- Individual axis values within non-null objects can also be `null`\n\n## Guard Pattern\n\nAlways check for `null` at each level:\n\n```javascript\n// @renderer p5\n\nfunction render(viji, p5) {\n  for (const device of viji.devices) {\n    if (device.motion?.acceleration) {\n      const ax = device.motion.acceleration.x ?? 0;\n      const ay = device.motion.acceleration.y ?? 0;\n      // Use acceleration values\n    }\n\n    if (device.orientation) {\n      const tilt = device.orientation.gamma ?? 0;\n      // Use orientation values\n    }\n  }\n}\n```\n\n## Basic Example"
         },
         {
           "type": "live-example",
-          "title": "Touch — Multi-Point Tracker",
-          "sceneCode": "// @renderer p5\n\nconst ripples = [];\n\nfunction setup(viji, p5) {\n  p5.colorMode(p5.HSB, 360, 100, 100, 100);\n}\n\nfunction render(viji, p5) {\n  const size = Math.min(viji.width, viji.height);\n  const touch = viji.touches;\n  const dt = viji.deltaTime;\n\n  for (const pt of touch.started) {\n    ripples.push({ x: pt.x, y: pt.y, r: 0, alpha: 100 });\n  }\n\n  p5.background(240, 10, 8, 20);\n\n  p5.noFill();\n  for (let i = ripples.length - 1; i >= 0; i--) {\n    const rp = ripples[i];\n    rp.r += size * 0.3 * dt;\n    rp.alpha -= dt * 80;\n    if (rp.alpha <= 0) { ripples.splice(i, 1); continue; }\n    p5.stroke(200, 80, 70, rp.alpha);\n    p5.strokeWeight(2);\n    p5.ellipse(rp.x, rp.y, rp.r * 2);\n  }\n\n  p5.noStroke();\n  for (let i = 0; i < touch.count; i++) {\n    const pt = touch.points[i];\n    const r = size * 0.02 + pt.pressure * size * 0.04;\n\n    p5.fill(120 + i * 60, 80, 65, 80);\n    p5.ellipse(pt.x, pt.y, r * 2);\n\n    const speed = Math.sqrt(pt.velocity.x ** 2 + pt.velocity.y ** 2);\n    if (speed > 10) {\n      const len = Math.min(speed * 0.05, size * 0.08);\n      const angle = Math.atan2(pt.velocity.y, pt.velocity.x);\n      p5.stroke(120 + i * 60, 80, 75, 50);\n      p5.strokeWeight(2);\n      p5.line(pt.x, pt.y, pt.x + Math.cos(angle) * len, pt.y + Math.sin(angle) * len);\n      p5.noStroke();\n    }\n\n    p5.fill(0, 0, 100, 60);\n    p5.textSize(size * 0.02);\n    p5.textAlign(p5.CENTER);\n    p5.text('T' + pt.id, pt.x, pt.y - r - size * 0.01);\n  }\n\n  p5.noStroke();\n  p5.fill(0, 0, 100, 40);\n  p5.textSize(size * 0.022);\n  p5.textFont('monospace');\n  p5.textAlign(p5.LEFT);\n  p5.text(`touches: ${touch.count}  primary: ${touch.primary ? 'T' + touch.primary.id : '-'}`, size * 0.03, viji.height - size * 0.03);\n}\n",
-          "sceneFile": "touch-p5-demo.scene.js"
+          "title": "External Device Sensors — Tilt Bars",
+          "sceneCode": "// @renderer p5\n\nfunction render(viji, p5) {\n  p5.background(10, 10, 26);\n\n  const devices = viji.devices;\n\n  if (devices.length === 0) {\n    p5.fill(255, 80);\n    p5.noStroke();\n    p5.textAlign(p5.CENTER, p5.CENTER);\n    p5.textSize(14);\n    p5.text('No external devices connected', p5.width / 2, p5.height / 2);\n    return;\n  }\n\n  const barH = 16;\n  const barW = p5.width * 0.5;\n  const startX = p5.width * 0.35;\n\n  p5.fill(255);\n  p5.noStroke();\n  p5.textSize(14);\n  p5.textStyle(p5.BOLD);\n  p5.textAlign(p5.CENTER);\n  p5.text('External Device Sensors', p5.width / 2, 30);\n\n  devices.forEach((device, di) => {\n    const baseY = 60 + di * 140;\n\n    p5.fill(255);\n    p5.textSize(12);\n    p5.textStyle(p5.BOLD);\n    p5.textAlign(p5.LEFT);\n    p5.text(device.name || device.id, 10, baseY);\n\n    const orient = device.orientation;\n    const axes = [\n      { label: 'alpha', value: orient?.alpha ?? 0, max: 360 },\n      { label: 'beta', value: orient?.beta ?? 0, max: 180 },\n      { label: 'gamma', value: orient?.gamma ?? 0, max: 90 }\n    ];\n\n    axes.forEach((axis, ai) => {\n      const y = baseY + 18 + ai * (barH + 8);\n      const norm = axis.value / axis.max;\n\n      p5.fill(255, 25);\n      p5.noStroke();\n      p5.rect(startX, y, barW, barH);\n\n      const fillW = Math.abs(norm) * (barW / 2);\n      const fillX = norm >= 0 ? startX + barW / 2 : startX + barW / 2 - fillW;\n\n      p5.fill(norm >= 0 ? p5.color(68, 170, 255) : p5.color(255, 100, 68));\n      p5.rect(fillX, y, fillW, barH);\n\n      p5.fill(255, 150);\n      p5.textSize(11);\n      p5.textAlign(p5.RIGHT);\n      p5.textStyle(p5.NORMAL);\n      p5.text(`${axis.label}: ${axis.value.toFixed(1)}°`, startX - 8, y + 12);\n    });\n\n    const accel = device.motion?.accelerationIncludingGravity;\n    if (accel) {\n      const y = baseY + 18 + 3 * (barH + 8);\n      const mag = Math.sqrt(\n        (accel.x ?? 0) ** 2 + (accel.y ?? 0) ** 2 + (accel.z ?? 0) ** 2\n      );\n\n      p5.fill(255, 150);\n      p5.textSize(11);\n      p5.textAlign(p5.RIGHT);\n      p5.text(`accel: ${mag.toFixed(1)} m/s²`, startX - 8, y + 12);\n\n      p5.fill(255, 25);\n      p5.noStroke();\n      p5.rect(startX, y, barW, barH);\n      const normMag = Math.min(mag / 20, 1);\n      p5.fill(100, 255, 68);\n      p5.rect(startX, y, normMag * barW, barH);\n    }\n  });\n}\n",
+          "sceneFile": "sensors-p5-demo.scene.js",
+          "capabilities": {
+            "interaction": true
+          }
         },
         {
           "type": "text",
-          "markdown": "## Common Patterns\n\n### Draw at Each Touch Point\n\n```javascript\nfunction render(viji, p5) {\n  for (const pt of viji.touches.points) {\n    p5.circle(pt.x, pt.y, 20 + pt.pressure * 60);\n  }\n}\n```\n\n### Detect New Touches\n\n```javascript\nfunction render(viji, p5) {\n  for (const pt of viji.touches.started) {\n    spawnRipple(pt.x, pt.y);\n  }\n}\n```\n\n### Two-Finger Distance\n\n```javascript\nfunction render(viji, p5) {\n  if (viji.touches.count >= 2) {\n    const a = viji.touches.points[0];\n    const b = viji.touches.points[1];\n    const dist = p5.dist(a.x, a.y, b.x, b.y);\n    applyZoom(dist);\n  }\n}\n```\n\n## Related\n\n- [Pointer (Unified)](../pointer/) — recommended starting point for single-point cross-device interactions\n- [Mouse](../mouse/) — mouse position, buttons, and scroll wheel\n- [Keyboard](../keyboard/) — key state queries and modifier tracking\n- [Native Touch](/native/touch) — same API in the native renderer\n- [Shader Touch Uniforms](/shader/touch) — GLSL uniforms for touch positions"
+          "markdown": "## Common Patterns\n\n### Tilt-Reactive Effect from an External Device\n\n```javascript\n// @renderer p5\n\nfunction render(viji, p5) {\n  p5.background(17);\n\n  const device = viji.devices[0];\n  if (!device?.orientation) return;\n\n  const tiltX = device.orientation.gamma ?? 0;\n  const tiltY = device.orientation.beta ?? 0;\n\n  const x = p5.width / 2 + (tiltX / 90) * (p5.width * 0.4);\n  const y = p5.height / 2 + (tiltY / 180) * (p5.height * 0.4);\n\n  p5.noStroke();\n  p5.fill(68, 170, 255);\n  p5.ellipse(x, y, 50, 50);\n}\n```\n\n### Compare Internal vs External Device Tilt\n\n```javascript\n// @renderer p5\n\nfunction render(viji, p5) {\n  p5.background(17);\n\n  const selfTilt = viji.device.orientation?.gamma ?? 0;\n  p5.noStroke();\n  p5.fill(255, 68, 68);\n  p5.ellipse(\n    p5.width * 0.3,\n    p5.height / 2 + (selfTilt / 90) * (p5.height * 0.4),\n    40, 40\n  );\n\n  const extDevice = viji.devices[0];\n  const extTilt = extDevice?.orientation?.gamma ?? 0;\n  p5.fill(68, 170, 255);\n  p5.ellipse(\n    p5.width * 0.7,\n    p5.height / 2 + (extTilt / 90) * (p5.height * 0.4),\n    40, 40\n  );\n\n  p5.fill(255);\n  p5.textSize(12);\n  p5.textAlign(p5.CENTER);\n  p5.text('This device', p5.width * 0.3, p5.height - 20);\n  p5.text('External device', p5.width * 0.7, p5.height - 20);\n}\n```\n\n### Shake Detection from an External Device\n\n```javascript\n// @renderer p5\n\nlet prevMag = 0;\n\nfunction render(viji, p5) {\n  const device = viji.devices[0];\n  const accel = device?.motion?.acceleration;\n  if (!accel) return;\n\n  const mag = Math.sqrt(\n    (accel.x ?? 0) ** 2 +\n    (accel.y ?? 0) ** 2 +\n    (accel.z ?? 0) ** 2\n  );\n\n  if (mag > 15 && mag - prevMag > 5) {\n    triggerShakeEffect();\n  }\n  prevMag = mag;\n}\n```\n\n## Related\n\n- [External Devices — Overview](../) — device identity, connection lifecycle, and guard patterns\n- [Device Video](../video/) — camera feeds from connected devices\n- [Device Sensors (Internal)](../../sensors/) — sensors from the device running the scene\n- [Native External Device Sensors](/native/external-devices/sensors) — same API in the Native renderer\n- [Shader External Device Sensor Uniforms](/shader/external-devices/sensors) — GLSL uniforms for external device sensors"
         }
       ]
     },
@@ -1741,7 +2868,18 @@ export const docsApi = {
         },
         {
           "type": "text",
-          "markdown": "### What's Happening\r\n\r\n**Comment directives — parsed before compilation:**\r\n\r\n- `// @renderer shader` tells Viji to use the shader renderer.\r\n- `// @viji-slider:speed ...` declares a parameter. Viji generates a `uniform float speed;` automatically.\r\n- `// @viji-color:tint ...` declares a color parameter. Viji generates a `uniform vec3 tint;`.\r\n- `// @viji-accumulator:phase rate:speed` creates a CPU-side accumulator that adds `speed × deltaTime` every frame. The result is a `uniform float phase;` that increases smoothly — no jumps when the slider changes.\r\n\r\n**`void main()` — runs for every pixel, every frame:**\r\n\r\n- `gl_FragCoord.xy / u_resolution` gives normalized UV coordinates (0–1).\r\n- `phase` is the accumulator — use it instead of `u_time * speed` for smooth, slider-driven animation.\r\n- `speed`, `scale`, `tint` are your parameter uniforms — updated live as the user adjusts controls.\r\n- `gl_FragColor` sets the output color for each pixel.\r\n\r\n> [!NOTE]\r\n> Parameter declarations use **single-line `//` comments only**. Block comments `/* */` are not parsed for `@viji-*` directives.\r\n\r\n## Scene Structure\r\n\r\nA shader scene is a GLSL fragment shader with comment directives:\r\n\r\n```glsl\r\n// @renderer shader\r\n// @viji-slider:brightness label:\"Brightness\" default:1.0 min:0.0 max:2.0\r\n\r\nvoid main() {\r\n  vec2 uv = gl_FragCoord.xy / u_resolution;\r\n  gl_FragColor = vec4(uv * brightness, 0.5, 1.0);\r\n}\r\n```\r\n\r\n- **No `precision` or `uniform` declarations needed.** Viji auto-injects `precision mediump float;` and all uniform declarations.\r\n- **No vertex shader.** Viji renders a fullscreen quad; your fragment shader defines the color of every pixel.\r\n- **Parameters become uniforms.** `// @viji-slider:name` becomes `uniform float name;` automatically.\r\n\r\n> [!NOTE]\r\n> The Viji shader renderer automatically injects `precision mediump float;` and all `uniform` declarations. Write only your helper functions and `void main() { ... }`. Do NOT redeclare `precision` or built-in uniforms — they will conflict. If you use `#version 300 es`, Viji will handle its placement automatically.\r\n\r\n## Parameter Types\r\n\r\nDeclare parameters with `// @viji-TYPE:uniformName key:value` syntax:\r\n\r\n| Type | Uniform | Example |\r\n|------|---------|---------|\r\n| `slider` | `float` | `// @viji-slider:speed label:\"Speed\" default:1.0 min:0.0 max:5.0` |\r\n| `number` | `float` | `// @viji-number:count label:\"Count\" default:10.0 min:1.0 max:100.0` |\r\n| `color` | `vec3` | `// @viji-color:tint label:\"Tint\" default:#ff6600` |\r\n| `toggle` | `bool` | `// @viji-toggle:invert label:\"Invert\" default:false` |\r\n| `select` | `int` | `// @viji-select:mode label:\"Mode\" default:0 options:[\"Wave\",\"Spiral\",\"Grid\"]` |\r\n| `image` | `sampler2D` | `// @viji-image:tex label:\"Texture\"` |\r\n| `button` | `bool` | `// @viji-button:trigger label:\"Trigger\"` |\r\n| `accumulator` | `float` | `// @viji-accumulator:phase rate:speed` |\r\n\r\nConfig keys: `label`, `default`, `min`, `max`, `step`, `description`, `group`, `category`.\r\n\r\n### Accumulators\r\n\r\nAccumulators solve the \"jumping animation\" problem. When you write `u_time * speed`, changing the `speed` slider causes a visible jump because the entire phase is recalculated instantly. Accumulators integrate the rate over time on the CPU side:\r\n\r\n```glsl\r\n// @viji-slider:speed label:\"Speed\" default:1.0 min:0.1 max:5.0\r\n// @viji-accumulator:phase rate:speed\r\n```\r\n\r\n- `phase` increases by `speed × deltaTime` each frame — changing `speed` only affects future growth, never jumps backward.\r\n- `rate` can reference any declared parameter name or be a numeric constant (e.g., `rate:1.5`).\r\n- Accumulators have no UI control — they are internal uniform values.\r\n- Optional `default` sets the starting value (defaults to 0).\r\n\r\n> [!WARNING]\r\n> Do not use the `u_` prefix for your parameter uniform names — it is reserved for built-in Viji uniforms. Use descriptive names like `speed`, `colorMix`, `intensity` instead.\r\n\r\n## Built-in Uniforms\r\n\r\nThese are always available — no declaration needed:\r\n\r\n| Uniform | Type | Description |\r\n|---------|------|-------------|\r\n| `u_resolution` | `vec2` | Canvas width and height in pixels |\r\n| `u_time` | `float` | Elapsed seconds since scene start |\r\n| `u_deltaTime` | `float` | Seconds since last frame |\r\n| `u_frame` | `int` | Current frame number |\r\n| `u_pointer` | `vec2` | Unified input position — mouse or touch (pixels) |\r\n| `u_pointerDown` | `bool` | Unified input active (left-click or touch) |\r\n| `u_mouse` | `vec2` | Mouse position in pixels |\r\n| `u_mousePressed` | `bool` | Any mouse button is pressed |\r\n| `u_audioVolume` | `float` | Overall audio volume (0–1) |\r\n| `u_audioLow` | `float` | Low frequency energy (0–1) |\r\n| `u_audioMid` | `float` | Mid frequency energy (0–1) |\r\n| `u_audioHigh` | `float` | High frequency energy (0–1) |\r\n| `u_audioKick` | `float` | Kick beat detection (0–1) |\r\n| `u_video` | `sampler2D` | Current video frame |\r\n\r\nSee [API Reference](/shader/api-reference) for the complete list of 100+ built-in uniforms.\r\n\r\n## Essential Patterns\r\n\r\n**Normalized coordinates:**\r\n\r\n```glsl\r\nvec2 uv = gl_FragCoord.xy / u_resolution; // 0..1\r\nvec2 centered = uv - 0.5;                 // -0.5..0.5\r\ncentered.x *= u_resolution.x / u_resolution.y; // aspect-corrected\r\n```\r\n\r\n**Distance fields:**\r\n\r\n```glsl\r\nfloat d = length(centered);  // distance from center\r\nfloat circle = smoothstep(0.3, 0.29, d);  // anti-aliased circle\r\n```\r\n\r\n> [!NOTE]\r\n> Always use `u_resolution` for positioning and sizing and `u_time` / `u_deltaTime` for animation. This keeps your shader resolution-agnostic and frame-rate-independent.\r\n\r\n## GLSL Version\r\n\r\nBy default, shaders use **GLSL ES 1.00** (WebGL 1). If you need WebGL 2 features, add `#version 300 es` as the first line:\r\n\r\n```glsl\r\n#version 300 es\r\n// @renderer shader\r\n\r\n// ES 3.00 requires explicit output declaration\r\nout vec4 fragColor;\r\n\r\nvoid main() {\r\n  vec2 uv = gl_FragCoord.xy / u_resolution;\r\n  fragColor = vec4(uv, sin(u_time), 1.0);\r\n}\r\n```\r\n\r\nES 3.00 differences: `gl_FragColor` → `out vec4`, `texture2D()` → `texture()`. Use ES 1.00 for maximum compatibility.\r\n\r\n## Backbuffer (Previous Frame)\r\n\r\nViji gives you access to the previous frame as a texture — just reference `backbuffer` in your code and it's automatically enabled:\r\n\r\n```glsl\r\nvoid main() {\r\n  vec2 uv = gl_FragCoord.xy / u_resolution;\r\n  vec4 prev = texture2D(backbuffer, uv);  // previous frame\r\n  vec3 current = vec3(/* ... your effect ... */);\r\n  gl_FragColor = vec4(mix(prev.rgb, current, 0.1), 1.0);  // 90% trail\r\n}\r\n```\r\n\r\nThis enables feedback effects, trails, motion blur, and accumulation buffers. No setup needed — Viji detects the `backbuffer` reference and creates the ping-pong framebuffers automatically.\r\n\r\nSee [Backbuffer](/shader/backbuffer) for detailed patterns and techniques.\r\n\r\n## Shadertoy Compatibility\r\n\r\nIf you have existing Shadertoy shaders, see [Shadertoy Compatibility](/shader/shadertoy) for a mapping of Shadertoy uniforms to Viji equivalents.\r\n\r\n## Next Steps\r\n\r\n- [Shader Basics](/shader/basics) — uniforms, coordinate systems, techniques\r\n- [Parameters](/shader/parameters) — all parameter types for shaders\r\n- [Audio Uniforms](/shader/audio) — react to music in GLSL\r\n- [Backbuffer](/shader/backbuffer) — feedback effects using the previous frame\r\n- [API Reference](/shader/api-reference) — complete list of built-in uniforms\r\n- [Best Practices](/getting-started/best-practices) — essential patterns for all renderers"
+          "markdown": "### What's Happening\r\n\r\n**Comment directives — parsed before compilation:**\r\n\r\n- `// @renderer shader` tells Viji to use the shader renderer.\r\n- `// @viji-slider:speed ...` declares a parameter. Viji generates a `uniform float speed;` automatically.\r\n- `// @viji-color:tint ...` declares a color parameter. Viji generates a `uniform vec3 tint;`.\r\n- `// @viji-accumulator:phase rate:speed` creates a CPU-side accumulator that adds `speed × deltaTime` every frame. The result is a `uniform float phase;` that increases smoothly — no jumps when the slider changes.\r\n\r\n**`void main()` — runs for every pixel, every frame:**\r\n\r\n- `gl_FragCoord.xy / u_resolution` gives normalized UV coordinates (0–1).\r\n- `phase` is the accumulator — use it instead of `u_time * speed` for smooth, slider-driven animation.\r\n- `speed`, `scale`, `tint` are your parameter uniforms — updated live as the user adjusts controls.\r\n- `gl_FragColor` sets the output color for each pixel.\r\n\r\n> [!NOTE]\r\n> Parameter declarations use **single-line `//` comments only**. Block comments `/* */` are not parsed for `@viji-*` directives.\r\n\r\n## Scene Structure\r\n\r\nA shader scene is a GLSL fragment shader with comment directives:\r\n\r\n```glsl\r\n// @renderer shader\r\n// @viji-slider:brightness label:\"Brightness\" default:1.0 min:0.0 max:2.0\r\n\r\nvoid main() {\r\n  vec2 uv = gl_FragCoord.xy / u_resolution;\r\n  gl_FragColor = vec4(uv * brightness, 0.5, 1.0);\r\n}\r\n```\r\n\r\n- **No `precision` or `uniform` declarations needed.** Viji auto-injects `precision mediump float;` and all uniform declarations.\r\n- **No vertex shader.** Viji renders a fullscreen quad; your fragment shader defines the color of every pixel.\r\n- **Parameters become uniforms.** `// @viji-slider:name` becomes `uniform float name;` automatically.\r\n\r\n> [!NOTE]\r\n> The Viji shader renderer automatically injects `precision mediump float;` and all `uniform` declarations — both built-in uniforms (`u_resolution`, `u_time`, etc.) and parameter uniforms from `@viji-*` directives. Write only your helper functions and `void main() { ... }`. Do NOT redeclare `precision` or any uniforms — they will conflict. If you use `#version 300 es`, Viji will handle its placement automatically.\r\n\r\n## Parameter Types\r\n\r\nDeclare parameters with `// @viji-TYPE:uniformName key:value` syntax:\r\n\r\n| Type | Uniform | Example |\r\n|------|---------|---------|\r\n| `slider` | `float` | `// @viji-slider:speed label:\"Speed\" default:1.0 min:0.0 max:5.0` |\r\n| `number` | `float` | `// @viji-number:count label:\"Count\" default:10.0 min:1.0 max:100.0` |\r\n| `color` | `vec3` | `// @viji-color:tint label:\"Tint\" default:#ff6600` |\r\n| `toggle` | `bool` | `// @viji-toggle:invert label:\"Invert\" default:false` |\r\n| `select` | `int` | `// @viji-select:mode label:\"Mode\" default:0 options:[\"Wave\",\"Spiral\",\"Grid\"]` |\r\n| `image` | `sampler2D` | `// @viji-image:tex label:\"Texture\"` |\r\n| `button` | `bool` | `// @viji-button:trigger label:\"Trigger\"` |\r\n| `accumulator` | `float` | `// @viji-accumulator:phase rate:speed` |\r\n\r\nConfig keys: `label`, `default`, `min`, `max`, `step`, `description`, `group`, `category`.\r\n\r\n### Accumulators\r\n\r\nAccumulators solve the \"jumping animation\" problem. When you write `u_time * speed`, changing the `speed` slider causes a visible jump because the entire phase is recalculated instantly. Accumulators integrate the rate over time on the CPU side:\r\n\r\n```glsl\r\n// @viji-slider:speed label:\"Speed\" default:1.0 min:0.1 max:5.0\r\n// @viji-accumulator:phase rate:speed\r\n```\r\n\r\n- `phase` increases by `speed × deltaTime` each frame — changing `speed` only affects future growth, never jumps backward.\r\n- `rate` can reference any declared parameter name or be a numeric constant (e.g., `rate:1.5`).\r\n- Accumulators have no UI control — they are internal uniform values.\r\n- Optional `default` sets the starting value (defaults to 0).\r\n\r\n> [!WARNING]\r\n> Do not use the `u_` prefix for your parameter uniform names — it is reserved for built-in Viji uniforms. Use descriptive names like `speed`, `colorMix`, `intensity` instead.\r\n\r\n## Built-in Uniforms\r\n\r\nThese are always available — no declaration needed:\r\n\r\n| Uniform | Type | Description |\r\n|---------|------|-------------|\r\n| `u_resolution` | `vec2` | Canvas width and height in pixels |\r\n| `u_time` | `float` | Elapsed seconds since scene start |\r\n| `u_deltaTime` | `float` | Seconds since last frame |\r\n| `u_frame` | `int` | Current frame number |\r\n| `u_pointer` | `vec2` | Unified input position — mouse or touch (pixels) |\r\n| `u_pointerDown` | `bool` | Unified input active (left-click or touch) |\r\n| `u_mouse` | `vec2` | Mouse position in pixels |\r\n| `u_mousePressed` | `bool` | Any mouse button is pressed |\r\n| `u_audioVolume` | `float` | Overall audio volume (0–1) |\r\n| `u_audioLow` | `float` | Low frequency energy (0–1) |\r\n| `u_audioMid` | `float` | Mid frequency energy (0–1) |\r\n| `u_audioHigh` | `float` | High frequency energy (0–1) |\r\n| `u_audioKick` | `float` | Kick beat detection (0–1) |\r\n| `u_video` | `sampler2D` | Current video frame |\r\n\r\nSee [API Reference](/shader/api-reference) for the complete list of 100+ built-in uniforms.\r\n\r\n## Essential Patterns\r\n\r\n**Normalized coordinates:**\r\n\r\n```glsl\r\nvec2 uv = gl_FragCoord.xy / u_resolution; // 0..1\r\nvec2 centered = uv - 0.5;                 // -0.5..0.5\r\ncentered.x *= u_resolution.x / u_resolution.y; // aspect-corrected\r\n```\r\n\r\n**Distance fields:**\r\n\r\n```glsl\r\nfloat d = length(centered);  // distance from center\r\nfloat circle = smoothstep(0.3, 0.29, d);  // anti-aliased circle\r\n```\r\n\r\n> [!NOTE]\r\n> Always use `u_resolution` for positioning and sizing and `u_time` / `u_deltaTime` for animation. This keeps your shader resolution-agnostic and frame-rate-independent.\r\n\r\n## GLSL Version\r\n\r\nBy default, shaders use **GLSL ES 1.00** (WebGL 1). If you need WebGL 2 features, add `#version 300 es` as the first line:\r\n\r\n```glsl\r\n#version 300 es\r\n// @renderer shader\r\n\r\n// ES 3.00 requires explicit output declaration\r\nout vec4 fragColor;\r\n\r\nvoid main() {\r\n  vec2 uv = gl_FragCoord.xy / u_resolution;\r\n  fragColor = vec4(uv, sin(u_time), 1.0);\r\n}\r\n```\r\n\r\nES 3.00 differences: `gl_FragColor` → `out vec4`, `texture2D()` → `texture()`. Use ES 1.00 for maximum compatibility.\r\n\r\n## Backbuffer (Previous Frame)\r\n\r\nViji gives you access to the previous frame as a texture — just reference `backbuffer` in your code and it's automatically enabled:\r\n\r\n```glsl\r\nvoid main() {\r\n  vec2 uv = gl_FragCoord.xy / u_resolution;\r\n  vec4 prev = texture2D(backbuffer, uv);  // previous frame\r\n  vec3 current = vec3(/* ... your effect ... */);\r\n  gl_FragColor = vec4(mix(prev.rgb, current, 0.1), 1.0);  // 90% trail\r\n}\r\n```\r\n\r\nThis enables feedback effects, trails, motion blur, and accumulation buffers. No setup needed — Viji detects the `backbuffer` reference and creates the ping-pong framebuffers automatically.\r\n\r\nSee [Backbuffer](/shader/backbuffer) for detailed patterns and techniques.\r\n\r\n## Shadertoy Compatibility\r\n\r\nIf you have existing Shadertoy shaders, see [Shadertoy Compatibility](/shader/shadertoy) for a mapping of Shadertoy uniforms to Viji equivalents.\r\n\r\n## Next Steps\r\n\r\n- [Shader Basics](/shader/basics) — uniforms, coordinate systems, techniques\r\n- [Parameters](/shader/parameters) — all parameter types for shaders\r\n- [Audio Uniforms](/shader/audio) — react to music in GLSL\r\n- [Backbuffer](/shader/backbuffer) — feedback effects using the previous frame\r\n- [API Reference](/shader/api-reference) — complete list of built-in uniforms\r\n- [Best Practices](/getting-started/best-practices) — essential patterns for all renderers"
+        }
+      ]
+    },
+    "shader-api-reference": {
+      "id": "shader-api-reference",
+      "title": "API Reference",
+      "description": "Complete list of every auto-injected uniform and parameter directive available in Viji shader scenes.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# API Reference\n\nViji auto-injects 160+ uniforms into every shader scene. This page is the complete list — use it as a quick lookup. Each entry links to its dedicated documentation page for full details and examples.\n\nAll uniforms listed below are always declared in the shader preamble (except [`backbuffer`](/shader/backbuffer), which is conditional). When data is not available, uniforms hold default values (zeros, false, or empty textures). Your shader compiles once with all declarations present — you do not need to conditionally declare them.\n\nNew to Viji shaders? Start with [Shader Basics](/shader/basics) instead.\n\n## Core / Timing\n\n| Uniform | Type | Description | Details |\n|---------|------|-------------|---------|\n| [`u_time`](/shader/timing) | `float` | Seconds elapsed since the scene started | [Timing](/shader/timing) |\n| [`u_deltaTime`](/shader/timing) | `float` | Seconds since the previous frame | [Timing](/shader/timing) |\n| [`u_frame`](/shader/timing) | `int` | Frame index (monotonically increasing) | [Timing](/shader/timing) |\n| [`u_fps`](/shader/timing) | `float` | Target FPS based on host's frame rate mode | [Timing](/shader/timing) |\n\n## Resolution\n\n| Uniform | Type | Description | Details |\n|---------|------|-------------|---------|\n| [`u_resolution`](/shader/resolution) | `vec2` | Canvas width and height in pixels | [Resolution](/shader/resolution) |\n\n## Mouse\n\n| Uniform | Type | Description | Details |\n|---------|------|-------------|---------|\n| [`u_mouse`](/shader/mouse) | `vec2` | Cursor position in pixels (WebGL Y-flipped) | [Mouse](/shader/mouse) |\n| [`u_mouseInCanvas`](/shader/mouse) | `bool` | Whether cursor is inside the canvas | [Mouse](/shader/mouse) |\n| [`u_mousePressed`](/shader/mouse) | `bool` | Whether any button is pressed | [Mouse](/shader/mouse) |\n| [`u_mouseLeft`](/shader/mouse) | `bool` | Left button state | [Mouse](/shader/mouse) |\n| [`u_mouseRight`](/shader/mouse) | `bool` | Right button state | [Mouse](/shader/mouse) |\n| [`u_mouseMiddle`](/shader/mouse) | `bool` | Middle button state | [Mouse](/shader/mouse) |\n| [`u_mouseDelta`](/shader/mouse) | `vec2` | Pixel movement this frame (Y-flipped) | [Mouse](/shader/mouse) |\n| [`u_mouseWheel`](/shader/mouse) | `float` | Scroll delta this frame | [Mouse](/shader/mouse) |\n| [`u_mouseWasPressed`](/shader/mouse) | `bool` | True for one frame when pressed | [Mouse](/shader/mouse) |\n| [`u_mouseWasReleased`](/shader/mouse) | `bool` | True for one frame when released | [Mouse](/shader/mouse) |\n\n## Keyboard\n\n| Uniform | Type | Description | Details |\n|---------|------|-------------|---------|\n| [`u_keySpace`](/shader/keyboard) | `bool` | Space bar | [Keyboard](/shader/keyboard) |\n| [`u_keyShift`](/shader/keyboard) | `bool` | Shift key | [Keyboard](/shader/keyboard) |\n| [`u_keyCtrl`](/shader/keyboard) | `bool` | Ctrl/Cmd key | [Keyboard](/shader/keyboard) |\n| [`u_keyAlt`](/shader/keyboard) | `bool` | Alt/Option key | [Keyboard](/shader/keyboard) |\n| [`u_keyW`](/shader/keyboard) | `bool` | W key | [Keyboard](/shader/keyboard) |\n| [`u_keyA`](/shader/keyboard) | `bool` | A key | [Keyboard](/shader/keyboard) |\n| [`u_keyS`](/shader/keyboard) | `bool` | S key | [Keyboard](/shader/keyboard) |\n| [`u_keyD`](/shader/keyboard) | `bool` | D key | [Keyboard](/shader/keyboard) |\n| [`u_keyUp`](/shader/keyboard) | `bool` | Up arrow | [Keyboard](/shader/keyboard) |\n| [`u_keyDown`](/shader/keyboard) | `bool` | Down arrow | [Keyboard](/shader/keyboard) |\n| [`u_keyLeft`](/shader/keyboard) | `bool` | Left arrow | [Keyboard](/shader/keyboard) |\n| [`u_keyRight`](/shader/keyboard) | `bool` | Right arrow | [Keyboard](/shader/keyboard) |\n| [`u_keyboard`](/shader/keyboard) | `sampler2D` | 256×3 LUMINANCE texture (row 0: held, row 1: pressed, row 2: toggle) | [Keyboard](/shader/keyboard) |\n\n## Touch\n\n| Uniform | Type | Description | Details |\n|---------|------|-------------|---------|\n| [`u_touchCount`](/shader/touch) | `int` | Number of active touches (0–5) | [Touch](/shader/touch) |\n| [`u_touch0`](/shader/touch) | `vec2` | Touch point 0 position (pixels, Y-flipped) | [Touch](/shader/touch) |\n| [`u_touch1`](/shader/touch) | `vec2` | Touch point 1 position | [Touch](/shader/touch) |\n| [`u_touch2`](/shader/touch) | `vec2` | Touch point 2 position | [Touch](/shader/touch) |\n| [`u_touch3`](/shader/touch) | `vec2` | Touch point 3 position | [Touch](/shader/touch) |\n| [`u_touch4`](/shader/touch) | `vec2` | Touch point 4 position | [Touch](/shader/touch) |\n\n## Pointer (Unified)\n\n| Uniform | Type | Description | Details |\n|---------|------|-------------|---------|\n| [`u_pointer`](/shader/pointer) | `vec2` | Primary pointer position (pixels, Y-flipped) | [Pointer](/shader/pointer) |\n| [`u_pointerDelta`](/shader/pointer) | `vec2` | Movement delta (Y-flipped) | [Pointer](/shader/pointer) |\n| [`u_pointerDown`](/shader/pointer) | `bool` | Whether pointer is active (click or touch) | [Pointer](/shader/pointer) |\n| [`u_pointerWasPressed`](/shader/pointer) | `bool` | True for one frame when pressed | [Pointer](/shader/pointer) |\n| [`u_pointerWasReleased`](/shader/pointer) | `bool` | True for one frame when released | [Pointer](/shader/pointer) |\n| [`u_pointerInCanvas`](/shader/pointer) | `bool` | Whether pointer is inside the canvas | [Pointer](/shader/pointer) |\n\n## Audio — Scalars\n\n### Volume\n\n| Uniform | Type | Description | Details |\n|---------|------|-------------|---------|\n| [`u_audioVolume`](/shader/audio/volume) | `float` | Current RMS volume 0–1 | [Volume](/shader/audio/volume) |\n| [`u_audioPeak`](/shader/audio/volume) | `float` | Peak volume 0–1 | [Volume](/shader/audio/volume) |\n| [`u_audioVolumeSmoothed`](/shader/audio/volume) | `float` | Smoothed volume (~200ms decay) | [Volume](/shader/audio/volume) |\n\n### Frequency Bands\n\n| Uniform | Type | Description | Details |\n|---------|------|-------------|---------|\n| [`u_audioLow`](/shader/audio/bands) | `float` | Low band energy (20–120 Hz) | [Bands](/shader/audio/bands) |\n| [`u_audioLowMid`](/shader/audio/bands) | `float` | Low-mid band energy (120–500 Hz) | [Bands](/shader/audio/bands) |\n| [`u_audioMid`](/shader/audio/bands) | `float` | Mid band energy (500–2 kHz) | [Bands](/shader/audio/bands) |\n| [`u_audioHighMid`](/shader/audio/bands) | `float` | High-mid band energy (2–6 kHz) | [Bands](/shader/audio/bands) |\n| [`u_audioHigh`](/shader/audio/bands) | `float` | High band energy (6–16 kHz) | [Bands](/shader/audio/bands) |\n| [`u_audioLowSmoothed`](/shader/audio/bands) | `float` | Smoothed low band | [Bands](/shader/audio/bands) |\n| [`u_audioLowMidSmoothed`](/shader/audio/bands) | `float` | Smoothed low-mid band | [Bands](/shader/audio/bands) |\n| [`u_audioMidSmoothed`](/shader/audio/bands) | `float` | Smoothed mid band | [Bands](/shader/audio/bands) |\n| [`u_audioHighMidSmoothed`](/shader/audio/bands) | `float` | Smoothed high-mid band | [Bands](/shader/audio/bands) |\n| [`u_audioHighSmoothed`](/shader/audio/bands) | `float` | Smoothed high band | [Bands](/shader/audio/bands) |\n\n### Beat Detection\n\n| Uniform | Type | Description | Details |\n|---------|------|-------------|---------|\n| [`u_audioKick`](/shader/audio/beat) | `float` | Kick beat energy | [Beat](/shader/audio/beat) |\n| [`u_audioSnare`](/shader/audio/beat) | `float` | Snare beat energy | [Beat](/shader/audio/beat) |\n| [`u_audioHat`](/shader/audio/beat) | `float` | Hi-hat beat energy | [Beat](/shader/audio/beat) |\n| [`u_audioAny`](/shader/audio/beat) | `float` | Combined beat energy | [Beat](/shader/audio/beat) |\n| [`u_audioKickSmoothed`](/shader/audio/beat) | `float` | Smoothed kick | [Beat](/shader/audio/beat) |\n| [`u_audioSnareSmoothed`](/shader/audio/beat) | `float` | Smoothed snare | [Beat](/shader/audio/beat) |\n| [`u_audioHatSmoothed`](/shader/audio/beat) | `float` | Smoothed hi-hat | [Beat](/shader/audio/beat) |\n| [`u_audioAnySmoothed`](/shader/audio/beat) | `float` | Smoothed combined | [Beat](/shader/audio/beat) |\n| [`u_audioKickTrigger`](/shader/audio/beat) | `bool` | Kick trigger (true for one frame) | [Beat](/shader/audio/beat) |\n| [`u_audioSnareTrigger`](/shader/audio/beat) | `bool` | Snare trigger (true for one frame) | [Beat](/shader/audio/beat) |\n| [`u_audioHatTrigger`](/shader/audio/beat) | `bool` | Hi-hat trigger (true for one frame) | [Beat](/shader/audio/beat) |\n| [`u_audioAnyTrigger`](/shader/audio/beat) | `bool` | Any beat trigger (true for one frame) | [Beat](/shader/audio/beat) |\n| [`u_audioBPM`](/shader/audio/beat) | `float` | Tracked BPM | [Beat](/shader/audio/beat) |\n| [`u_audioConfidence`](/shader/audio/beat) | `float` | Beat-tracker confidence 0–1 | [Beat](/shader/audio/beat) |\n| [`u_audioIsLocked`](/shader/audio/beat) | `bool` | Whether beat tracking is locked | [Beat](/shader/audio/beat) |\n\n### Spectral Analysis\n\n| Uniform | Type | Description | Details |\n|---------|------|-------------|---------|\n| [`u_audioBrightness`](/shader/audio/spectral) | `float` | Spectral brightness 0–1 | [Spectral](/shader/audio/spectral) |\n| [`u_audioFlatness`](/shader/audio/spectral) | `float` | Spectral flatness 0–1 | [Spectral](/shader/audio/spectral) |\n\n## Audio — Textures\n\n| Uniform | Type | Description | Details |\n|---------|------|-------------|---------|\n| [`u_audioFFT`](/shader/audio/fft) | `sampler2D` | FFT as 1D LUMINANCE strip (bin count × 1, values 0–255) | [FFT Texture](/shader/audio/fft) |\n| [`u_audioWaveform`](/shader/audio/waveform) | `sampler2D` | Time-domain waveform as 1D LUMINANCE strip (-1…1 mapped to 0–255) | [Waveform Texture](/shader/audio/waveform) |\n\n## Video\n\n| Uniform | Type | Description | Details |\n|---------|------|-------------|---------|\n| [`u_video`](/shader/video/basics) | `sampler2D` | Main video frame texture | [Video Basics](/shader/video/basics) |\n| [`u_videoResolution`](/shader/video/basics) | `vec2` | Video frame size in pixels (0,0 if disconnected) | [Video Basics](/shader/video/basics) |\n| [`u_videoFrameRate`](/shader/video/basics) | `float` | Video frame rate | [Video Basics](/shader/video/basics) |\n\n## CV — Face Detection\n\n| Uniform | Type | Description | Details |\n|---------|------|-------------|---------|\n| [`u_faceCount`](/shader/video/face-detection) | `int` | Number of detected faces | [Face Detection](/shader/video/face-detection) |\n| [`u_face0Bounds`](/shader/video/face-detection) | `vec4` | Bounding box (x, y, w, h) normalized 0–1 | [Face Detection](/shader/video/face-detection) |\n| [`u_face0Center`](/shader/video/face-detection) | `vec2` | Face center normalized 0–1 | [Face Detection](/shader/video/face-detection) |\n| [`u_face0HeadPose`](/shader/video/face-mesh) | `vec3` | Pitch, yaw, roll in degrees | [Face Mesh](/shader/video/face-mesh) |\n| [`u_face0Confidence`](/shader/video/face-detection) | `float` | Detection confidence | [Face Detection](/shader/video/face-detection) |\n\n### Expressions\n\n| Uniform | Type | Details |\n|---------|------|---------|\n| [`u_face0Neutral`](/shader/video/emotion-detection) | `float` | [Emotion Detection](/shader/video/emotion-detection) |\n| [`u_face0Happy`](/shader/video/emotion-detection) | `float` | [Emotion Detection](/shader/video/emotion-detection) |\n| [`u_face0Sad`](/shader/video/emotion-detection) | `float` | [Emotion Detection](/shader/video/emotion-detection) |\n| [`u_face0Angry`](/shader/video/emotion-detection) | `float` | [Emotion Detection](/shader/video/emotion-detection) |\n| [`u_face0Surprised`](/shader/video/emotion-detection) | `float` | [Emotion Detection](/shader/video/emotion-detection) |\n| [`u_face0Disgusted`](/shader/video/emotion-detection) | `float` | [Emotion Detection](/shader/video/emotion-detection) |\n| [`u_face0Fearful`](/shader/video/emotion-detection) | `float` | [Emotion Detection](/shader/video/emotion-detection) |\n\n### Blendshapes (52 uniforms)\n\nAll blendshapes are `float` values 0–1, following the ARKit naming convention. See [Face Mesh](/shader/video/face-mesh) for the full list and usage.\n\n| Uniform | Uniform | Uniform |\n|---------|---------|---------|\n| `u_face0BrowDownLeft` | `u_face0BrowDownRight` | `u_face0BrowInnerUp` |\n| `u_face0BrowOuterUpLeft` | `u_face0BrowOuterUpRight` | `u_face0CheekPuff` |\n| `u_face0CheekSquintLeft` | `u_face0CheekSquintRight` | `u_face0EyeBlinkLeft` |\n| `u_face0EyeBlinkRight` | `u_face0EyeLookDownLeft` | `u_face0EyeLookDownRight` |\n| `u_face0EyeLookInLeft` | `u_face0EyeLookInRight` | `u_face0EyeLookOutLeft` |\n| `u_face0EyeLookOutRight` | `u_face0EyeLookUpLeft` | `u_face0EyeLookUpRight` |\n| `u_face0EyeSquintLeft` | `u_face0EyeSquintRight` | `u_face0EyeWideLeft` |\n| `u_face0EyeWideRight` | `u_face0JawForward` | `u_face0JawLeft` |\n| `u_face0JawOpen` | `u_face0JawRight` | `u_face0MouthClose` |\n| `u_face0MouthDimpleLeft` | `u_face0MouthDimpleRight` | `u_face0MouthFrownLeft` |\n| `u_face0MouthFrownRight` | `u_face0MouthFunnel` | `u_face0MouthLeft` |\n| `u_face0MouthLowerDownLeft` | `u_face0MouthLowerDownRight` | `u_face0MouthPressLeft` |\n| `u_face0MouthPressRight` | `u_face0MouthPucker` | `u_face0MouthRight` |\n| `u_face0MouthRollLower` | `u_face0MouthRollUpper` | `u_face0MouthShrugLower` |\n| `u_face0MouthShrugUpper` | `u_face0MouthSmileLeft` | `u_face0MouthSmileRight` |\n| `u_face0MouthStretchLeft` | `u_face0MouthStretchRight` | `u_face0MouthUpperUpLeft` |\n| `u_face0MouthUpperUpRight` | `u_face0NoseSneerLeft` | `u_face0NoseSneerRight` |\n| `u_face0TongueOut` | | |\n\n## CV — Hand Tracking\n\n| Uniform | Type | Description | Details |\n|---------|------|-------------|---------|\n| [`u_handCount`](/shader/video/hand-tracking) | `int` | Number of detected hands (0–2) | [Hand Tracking](/shader/video/hand-tracking) |\n| [`u_leftHandPalm`](/shader/video/hand-tracking) | `vec3` | Left hand palm position | [Hand Tracking](/shader/video/hand-tracking) |\n| [`u_rightHandPalm`](/shader/video/hand-tracking) | `vec3` | Right hand palm position | [Hand Tracking](/shader/video/hand-tracking) |\n| [`u_leftHandConfidence`](/shader/video/hand-tracking) | `float` | Left hand confidence | [Hand Tracking](/shader/video/hand-tracking) |\n| [`u_rightHandConfidence`](/shader/video/hand-tracking) | `float` | Right hand confidence | [Hand Tracking](/shader/video/hand-tracking) |\n| [`u_leftHandBounds`](/shader/video/hand-tracking) | `vec4` | Left hand bounding box (x, y, w, h) | [Hand Tracking](/shader/video/hand-tracking) |\n| [`u_rightHandBounds`](/shader/video/hand-tracking) | `vec4` | Right hand bounding box (x, y, w, h) | [Hand Tracking](/shader/video/hand-tracking) |\n\n### Gesture Scores (per hand)\n\nAll gesture uniforms are `float` values 0–1. Replace `left` with `right` for the other hand.\n\n| Uniform | Description | Details |\n|---------|-------------|---------|\n| [`u_leftHandFist`](/shader/video/hand-tracking) | Fist gesture confidence | [Hand Tracking](/shader/video/hand-tracking) |\n| [`u_leftHandOpenPalm`](/shader/video/hand-tracking) | Open palm confidence | [Hand Tracking](/shader/video/hand-tracking) |\n| [`u_leftHandPeace`](/shader/video/hand-tracking) | Peace/V-sign confidence | [Hand Tracking](/shader/video/hand-tracking) |\n| [`u_leftHandThumbsUp`](/shader/video/hand-tracking) | Thumbs up confidence | [Hand Tracking](/shader/video/hand-tracking) |\n| [`u_leftHandThumbsDown`](/shader/video/hand-tracking) | Thumbs down confidence | [Hand Tracking](/shader/video/hand-tracking) |\n| [`u_leftHandPointing`](/shader/video/hand-tracking) | Pointing confidence | [Hand Tracking](/shader/video/hand-tracking) |\n| [`u_leftHandILoveYou`](/shader/video/hand-tracking) | I Love You sign confidence | [Hand Tracking](/shader/video/hand-tracking) |\n\n## CV — Pose Detection\n\n| Uniform | Type | Description | Details |\n|---------|------|-------------|---------|\n| [`u_poseDetected`](/shader/video/pose-detection) | `bool` | Whether a body pose is detected | [Pose Detection](/shader/video/pose-detection) |\n| [`u_poseConfidence`](/shader/video/pose-detection) | `float` | Pose detection confidence | [Pose Detection](/shader/video/pose-detection) |\n| [`u_nosePosition`](/shader/video/pose-detection) | `vec2` | Nose landmark position | [Pose Detection](/shader/video/pose-detection) |\n| [`u_leftShoulderPosition`](/shader/video/pose-detection) | `vec2` | Left shoulder position | [Pose Detection](/shader/video/pose-detection) |\n| [`u_rightShoulderPosition`](/shader/video/pose-detection) | `vec2` | Right shoulder position | [Pose Detection](/shader/video/pose-detection) |\n| [`u_leftElbowPosition`](/shader/video/pose-detection) | `vec2` | Left elbow position | [Pose Detection](/shader/video/pose-detection) |\n| [`u_rightElbowPosition`](/shader/video/pose-detection) | `vec2` | Right elbow position | [Pose Detection](/shader/video/pose-detection) |\n| [`u_leftWristPosition`](/shader/video/pose-detection) | `vec2` | Left wrist position | [Pose Detection](/shader/video/pose-detection) |\n| [`u_rightWristPosition`](/shader/video/pose-detection) | `vec2` | Right wrist position | [Pose Detection](/shader/video/pose-detection) |\n| [`u_leftHipPosition`](/shader/video/pose-detection) | `vec2` | Left hip position | [Pose Detection](/shader/video/pose-detection) |\n| [`u_rightHipPosition`](/shader/video/pose-detection) | `vec2` | Right hip position | [Pose Detection](/shader/video/pose-detection) |\n| [`u_leftKneePosition`](/shader/video/pose-detection) | `vec2` | Left knee position | [Pose Detection](/shader/video/pose-detection) |\n| [`u_rightKneePosition`](/shader/video/pose-detection) | `vec2` | Right knee position | [Pose Detection](/shader/video/pose-detection) |\n| [`u_leftAnklePosition`](/shader/video/pose-detection) | `vec2` | Left ankle position | [Pose Detection](/shader/video/pose-detection) |\n| [`u_rightAnklePosition`](/shader/video/pose-detection) | `vec2` | Right ankle position | [Pose Detection](/shader/video/pose-detection) |\n\n## CV — Body Segmentation\n\n| Uniform | Type | Description | Details |\n|---------|------|-------------|---------|\n| [`u_segmentationMask`](/shader/video/body-segmentation) | `sampler2D` | Body mask (LUMINANCE: 0 = background, 1 = person) | [Segmentation](/shader/video/body-segmentation) |\n| [`u_segmentationRes`](/shader/video/body-segmentation) | `vec2` | Mask dimensions in pixels | [Segmentation](/shader/video/body-segmentation) |\n\n## Device Sensors\n\n| Uniform | Type | Description | Details |\n|---------|------|-------------|---------|\n| [`u_deviceAcceleration`](/shader/sensors) | `vec3` | Acceleration without gravity (m/s²) | [Sensor Uniforms](/shader/sensors) |\n| [`u_deviceAccelerationGravity`](/shader/sensors) | `vec3` | Acceleration with gravity (m/s²) | [Sensor Uniforms](/shader/sensors) |\n| [`u_deviceRotationRate`](/shader/sensors) | `vec3` | Gyroscope: alpha, beta, gamma (deg/s) | [Sensor Uniforms](/shader/sensors) |\n| [`u_deviceOrientation`](/shader/sensors) | `vec3` | Orientation: alpha, beta, gamma (degrees) | [Sensor Uniforms](/shader/sensors) |\n| [`u_deviceOrientationAbsolute`](/shader/sensors) | `bool` | Whether orientation is magnetometer-based | [Sensor Uniforms](/shader/sensors) |\n\n## External Devices — Video\n\n| Uniform | Type | Description | Details |\n|---------|------|-------------|---------|\n| [`u_deviceCount`](/shader/external-devices) | `int` | Number of devices with active cameras (0–8) | [Overview](/shader/external-devices) |\n| [`u_device0`](/shader/external-devices/video) – `u_device7` | `sampler2D` | Device camera frame texture | [Video Textures](/shader/external-devices/video) |\n| [`u_device0Resolution`](/shader/external-devices/video) – `u_device7Resolution` | `vec2` | Device camera frame size | [Video Textures](/shader/external-devices/video) |\n| [`u_device0Connected`](/shader/external-devices/video) – `u_device7Connected` | `bool` | Whether device camera is active | [Video Textures](/shader/external-devices/video) |\n\n## External Devices — Sensors\n\n| Uniform | Type | Description | Details |\n|---------|------|-------------|---------|\n| [`u_externalDeviceCount`](/shader/external-devices) | `int` | Number of connected external devices (0–8) | [Overview](/shader/external-devices) |\n| [`u_device0Acceleration`](/shader/external-devices/sensors) – `u_device7Acceleration` | `vec3` | Per-device acceleration without gravity | [Sensor Uniforms](/shader/external-devices/sensors) |\n| [`u_device0AccelerationGravity`](/shader/external-devices/sensors) – `u_device7AccelerationGravity` | `vec3` | Per-device acceleration with gravity | [Sensor Uniforms](/shader/external-devices/sensors) |\n| [`u_device0RotationRate`](/shader/external-devices/sensors) – `u_device7RotationRate` | `vec3` | Per-device rotation rate | [Sensor Uniforms](/shader/external-devices/sensors) |\n| [`u_device0Orientation`](/shader/external-devices/sensors) – `u_device7Orientation` | `vec3` | Per-device orientation angles | [Sensor Uniforms](/shader/external-devices/sensors) |\n\n> [!NOTE]\n> `u_device{i}` (sampler2D) is the **camera texture** for device slot `i`. `u_device{i}Acceleration` and similar are the **IMU sensors** for the same device — different data, same index.\n\n## Streams (Compositor)\n\n| Uniform | Type | Description |\n|---------|------|-------------|\n| `u_streamCount` | `int` | Number of active streams (0–8) |\n| `u_stream0` – `u_stream7` | `sampler2D` | Stream frame textures |\n| `u_stream0Resolution` – `u_stream7Resolution` | `vec2` | Stream frame sizes in pixels |\n| `u_stream0Connected` – `u_stream7Connected` | `bool` | Whether stream has an active frame |\n\nStreams are additional video sources injected by the host application — they are used internally by Viji's compositor for mixing multiple scenes together. When no streams are provided, `u_streamCount` is `0` and the textures sample as black. Each stream works the same way as [`u_video`](/shader/video/basics).\n\n## Backbuffer\n\n| Uniform | Type | Description | Details |\n|---------|------|-------------|---------|\n| [`backbuffer`](/shader/backbuffer) | `sampler2D` | Previous frame texture (feedback effects) | [Backbuffer & Feedback](/shader/backbuffer) |\n\n> [!WARNING]\n> `backbuffer` is **conditional** — it is only injected if the word `backbuffer` appears anywhere in your shader source (including comments). It has no `u_` prefix. See [Backbuffer & Feedback](/shader/backbuffer) for details.\n\n## Parameter Directives\n\nDeclare parameters using `// @viji-TYPE:uniformName key:value ...` comments. Each directive generates a uniform and a UI control in the host.\n\n| Directive | Uniform Type | UI Control | Details |\n|-----------|-------------|------------|---------|\n| [`@viji-slider`](/shader/parameters/slider) | `float` | Numeric slider | [Slider](/shader/parameters/slider) |\n| [`@viji-number`](/shader/parameters/number) | `float` | Numeric input | [Number](/shader/parameters/number) |\n| [`@viji-color`](/shader/parameters/color) | `vec3` | Color picker (hex → RGB 0–1) | [Color](/shader/parameters/color) |\n| [`@viji-toggle`](/shader/parameters/toggle) | `bool` | On/off switch | [Toggle](/shader/parameters/toggle) |\n| [`@viji-select`](/shader/parameters/select) | `int` | Dropdown (0-based option index) | [Select](/shader/parameters/select) |\n| [`@viji-image`](/shader/parameters/image) | `sampler2D` | Image upload | [Image](/shader/parameters/image) |\n| [`@viji-button`](/shader/parameters/button) | `bool` | Momentary button (true for one frame) | [Button](/shader/parameters/button) |\n| [`@viji-accumulator`](/shader/parameters/accumulator) | `float` | CPU-side: `+= rate × deltaTime` | [Accumulator](/shader/parameters/accumulator) |\n\nSee [Parameters Overview](/shader/parameters) for syntax, [Grouping](/shader/parameters/grouping) and [Categories](/shader/parameters/categories) for organization.\n\n## Related\n\n- [Shader Basics](/shader/basics) — auto-injection, GLSL versions, `@renderer shader`\n- [Shader Quick Start](/shader/quickstart) — getting started with shader scenes\n- [Best Practices](/getting-started/best-practices) — essential patterns for all renderers\n- [Native API Reference](/native/api-reference) — JavaScript API for the Native renderer\n- [P5 API Reference](/p5/api-reference) — JavaScript API for the P5 renderer"
         }
       ]
     },
@@ -1762,7 +2900,7 @@ export const docsApi = {
         },
         {
           "type": "text",
-          "markdown": "## Auto-Injection\n\n> [!NOTE]\n> The Viji shader renderer automatically injects `precision mediump float;` and all `uniform` declarations. Write only your helper functions and `void main() { ... }`. Do NOT redeclare `precision` or built-in uniforms — they will conflict. If you use `#version 300 es`, Viji will handle its placement automatically.\n\nWhen your shader is compiled, Viji prepends the following before your code:\n\n1. `#extension GL_OES_standard_derivatives : enable` — only if your code uses `fwidth` (GLSL ES 1.00 only)\n2. `precision mediump float;`\n3. All built-in uniform declarations (`u_resolution`, `u_time`, `u_deltaTime`, etc.)\n4. All `@viji-*` parameter uniform declarations\n\n**You must not redeclare any of these.** Writing `precision mediump float;` or `uniform vec2 u_resolution;` in your code will cause a compilation error.\n\n### What You Write vs What Viji Adds\n\n```glsl\n// What you write:\n// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  gl_FragColor = vec4(uv, sin(u_time), 1.0);\n}\n\n// What Viji compiles (conceptual):\nprecision mediump float;\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_deltaTime;\nuniform int u_frame;\nuniform float u_fps;\n// ... (100+ more built-in uniforms)\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  gl_FragColor = vec4(uv, sin(u_time), 1.0);\n}\n```\n\n## Key Built-in Uniforms\n\nThese are always available — a brief overview (each has a dedicated page):\n\n| Uniform | Type | Description | Details |\n|---------|------|-------------|---------|\n| [`u_resolution`](/shader/resolution) | `vec2` | Canvas width and height in pixels | [Resolution & Coordinates](/shader/resolution) |\n| [`u_time`](/shader/timing) | `float` | Elapsed seconds since scene start | [Timing & Animation](/shader/timing) |\n| [`u_deltaTime`](/shader/timing) | `float` | Seconds since last frame | [Timing & Animation](/shader/timing) |\n| [`u_frame`](/shader/timing) | `int` | Current frame number | [Timing & Animation](/shader/timing) |\n| [`u_fps`](/shader/timing) | `float` | Target FPS | [Timing & Animation](/shader/timing) |\n| `u_mouse` | `vec2` | Mouse position in pixels | [Mouse Uniforms](/shader/mouse) |\n\nSee [API Reference](/shader/api-reference) for the complete list of 100+ built-in uniforms.\n\n## GLSL Versions\n\n### GLSL ES 1.00 (Default)\n\nThe default. No `#version` declaration needed. Maximum browser compatibility. Uses `gl_FragColor` for output and `texture2D()` for texture sampling:\n\n```glsl\n// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  gl_FragColor = vec4(uv, 0.5, 1.0);\n}\n```\n\n### GLSL ES 3.00 (WebGL 2)\n\nFor WebGL 2 features, add `#version 300 es` as the very first line (before the `@renderer` directive). Viji extracts it, places it at the top of the compiled output, and requests a WebGL 2 context:"
+          "markdown": "## Auto-Injection\n\n> [!NOTE]\n> The Viji shader renderer automatically injects `precision mediump float;` and all `uniform` declarations — both built-in uniforms (`u_resolution`, `u_time`, etc.) and parameter uniforms from `@viji-*` directives. Write only your helper functions and `void main() { ... }`. Do NOT redeclare `precision` or any uniforms — they will conflict. If you use `#version 300 es`, Viji will handle its placement automatically.\n\nWhen your shader is compiled, Viji prepends the following before your code:\n\n1. `#extension GL_OES_standard_derivatives : enable` — only if your code uses `fwidth` (GLSL ES 1.00 only)\n2. `precision mediump float;`\n3. All built-in uniform declarations (`u_resolution`, `u_time`, `u_deltaTime`, etc.)\n4. All `@viji-*` parameter uniform declarations\n\n**You must not redeclare any of these.** Writing `precision mediump float;` or `uniform vec2 u_resolution;` in your code will cause a compilation error.\n\n### What You Write vs What Viji Adds\n\n```glsl\n// What you write:\n// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  gl_FragColor = vec4(uv, sin(u_time), 1.0);\n}\n\n// What Viji compiles (conceptual):\nprecision mediump float;\nuniform vec2 u_resolution;\nuniform float u_time;\nuniform float u_deltaTime;\nuniform int u_frame;\nuniform float u_fps;\n// ... (100+ more built-in uniforms)\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  gl_FragColor = vec4(uv, sin(u_time), 1.0);\n}\n```\n\n## Key Built-in Uniforms\n\nThese are always available — a brief overview (each has a dedicated page):\n\n| Uniform | Type | Description | Details |\n|---------|------|-------------|---------|\n| [`u_resolution`](/shader/resolution) | `vec2` | Canvas width and height in pixels | [Resolution & Coordinates](/shader/resolution) |\n| [`u_time`](/shader/timing) | `float` | Elapsed seconds since scene start | [Timing & Animation](/shader/timing) |\n| [`u_deltaTime`](/shader/timing) | `float` | Seconds since last frame | [Timing & Animation](/shader/timing) |\n| [`u_frame`](/shader/timing) | `int` | Current frame number | [Timing & Animation](/shader/timing) |\n| [`u_fps`](/shader/timing) | `float` | Target FPS | [Timing & Animation](/shader/timing) |\n| `u_mouse` | `vec2` | Mouse position in pixels | [Mouse Uniforms](/shader/mouse) |\n\nSee [API Reference](/shader/api-reference) for the complete list of 100+ built-in uniforms.\n\n## GLSL Versions\n\n### GLSL ES 1.00 (Default)\n\nThe default. No `#version` declaration needed. Maximum browser compatibility. Uses `gl_FragColor` for output and `texture2D()` for texture sampling:\n\n```glsl\n// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  gl_FragColor = vec4(uv, 0.5, 1.0);\n}\n```\n\n### GLSL ES 3.00 (WebGL 2)\n\nFor WebGL 2 features, add `#version 300 es` as the very first line (before the `@renderer` directive). Viji extracts it, places it at the top of the compiled output, and requests a WebGL 2 context:"
         },
         {
           "type": "live-example",
@@ -1856,17 +2994,17 @@ export const docsApi = {
       "content": [
         {
           "type": "text",
-          "markdown": "# @viji-slider\n\n```glsl\n// @viji-slider:speed label:\"Speed\" default:1 min:0 max:5 step:0.1\nuniform float speed;\n```\n\nDeclares a numeric slider parameter. The host renders it as a draggable slider control. The value is injected as a `uniform float`.\n\n## Directive Syntax\n\n```\n// @viji-slider:uniformName key:value key:value ...\n```\n\n| Key | Required | Default | Description |\n|-----|----------|---------|-------------|\n| `label` | Yes | — | Display name in the parameter UI |\n| `default` | Yes | — | Initial value |\n| `min` | No | `0` | Minimum allowed value |\n| `max` | No | `100` | Maximum allowed value |\n| `step` | No | `1` | Increment between values |\n| `description` | No | — | Tooltip text (use quotes) |\n| `group` | No | `general` | Group name (use quotes) |\n| `category` | No | `general` | Visibility category |\n\n## Uniform Type\n\nThe slider value is always injected as a `float`:\n\n```glsl\n// @viji-slider:count label:\"Count\" default:8 min:1 max:20 step:1\nuniform float count;  // always float, use int(count) if needed\n```\n\n## Usage\n\n```glsl\n// @renderer shader\n// @viji-slider:zoom label:\"Zoom\" default:1 min:0.1 max:5 step:0.1\n// @viji-slider:rotation label:\"Rotation\" default:0 min:0 max:6.2832 step:0.01\n\nuniform float zoom;\nuniform float rotation;\nuniform vec2 u_resolution;\nuniform float u_time;\n\nvoid main() {\n  vec2 uv = (gl_FragCoord.xy / u_resolution - 0.5) * zoom;\n  float c = cos(rotation), s = sin(rotation);\n  uv = mat2(c, -s, s, c) * uv;\n  float d = length(uv);\n  float ring = sin(d * 20.0 - u_time * 3.0) * 0.5 + 0.5;\n  gl_FragColor = vec4(vec3(ring), 1.0);\n}\n```\n\n> [!WARNING]\n> The directive must use `//` comments only. Block comments (`/* */`) are not parsed.\n\n> [!WARNING]\n> The uniform name in the directive (`@viji-slider:speed`) must exactly match the `uniform float speed;` declaration. Viji does not auto-generate uniform declarations."
+          "markdown": "# @viji-slider\n\n```glsl\n// @viji-slider:speed label:\"Speed\" default:1 min:0 max:5 step:0.1\nuniform float speed;\n```\n\nDeclares a numeric slider parameter. The host renders it as a draggable slider control. The value is injected as a `uniform float`.\n\n## Directive Syntax\n\n```\n// @viji-slider:uniformName key:value key:value ...\n```\n\n| Key | Required | Default | Description |\n|-----|----------|---------|-------------|\n| `label` | Yes | — | Display name in the parameter UI |\n| `default` | Yes | — | Initial value |\n| `min` | No | `0` | Minimum allowed value |\n| `max` | No | `100` | Maximum allowed value |\n| `step` | No | `1` | Increment between values |\n| `description` | No | — | Tooltip text (use quotes) |\n| `group` | No | `general` | Group name (use quotes) |\n| `category` | No | `general` | Visibility category |\n\n## Uniform Type\n\nThe slider value is always injected as a `float`:\n\n```glsl\n// @viji-slider:count label:\"Count\" default:8 min:1 max:20 step:1\nuniform float count;  // always float, use int(count) if needed\n```\n\n## Usage\n\n```glsl\n// @renderer shader\n// @viji-slider:zoom label:\"Zoom\" default:1 min:0.1 max:5 step:0.1\n// @viji-slider:rotation label:\"Rotation\" default:0 min:0 max:6.2832 step:0.01\n\nvoid main() {\n  vec2 uv = (gl_FragCoord.xy / u_resolution - 0.5) * zoom;\n  float c = cos(rotation), s = sin(rotation);\n  uv = mat2(c, -s, s, c) * uv;\n  float d = length(uv);\n  float ring = sin(d * 20.0 - u_time * 3.0) * 0.5 + 0.5;\n  gl_FragColor = vec4(vec3(ring), 1.0);\n}\n```\n\n> [!WARNING]\n> The directive must use `//` comments only. Block comments (`/* */`) are not parsed.\n\n> [!NOTE]\n> Viji auto-injects all `uniform` declarations — both built-in uniforms and parameter uniforms from directives. Do **not** redeclare them in your shader code; duplicate declarations cause compilation errors."
         },
         {
           "type": "live-example",
           "title": "Slider Controls",
-          "sceneCode": "// @renderer shader\n// @viji-slider:zoom label:\"Zoom\" default:1 min:0.1 max:5 step:0.1\n// @viji-slider:speed label:\"Speed\" default:3 min:0 max:10 step:0.5\n// @viji-color:ringColor label:\"Color\" default:#44ddff\n\nuniform float zoom;\nuniform float speed;\nuniform vec3 ringColor;\nuniform vec2 u_resolution;\nuniform float u_time;\n\nvoid main() {\n  vec2 uv = (gl_FragCoord.xy / u_resolution - 0.5) * zoom;\n  float aspect = u_resolution.x / u_resolution.y;\n  uv.x *= aspect;\n\n  float d = length(uv);\n  float ring = sin(d * 20.0 - u_time * speed) * 0.5 + 0.5;\n  vec3 col = ringColor * ring;\n\n  gl_FragColor = vec4(col, 1.0);\n}\n",
+          "sceneCode": "// @renderer shader\n// @viji-slider:zoom label:\"Zoom\" default:1 min:0.1 max:5 step:0.1\n// @viji-slider:speed label:\"Speed\" default:3 min:0 max:10 step:0.5\n// @viji-color:ringColor label:\"Color\" default:#44ddff\n\nvoid main() {\n  vec2 uv = (gl_FragCoord.xy / u_resolution - 0.5) * zoom;\n  float aspect = u_resolution.x / u_resolution.y;\n  uv.x *= aspect;\n\n  float d = length(uv);\n  float ring = sin(d * 20.0 - u_time * speed) * 0.5 + 0.5;\n  vec3 col = ringColor * ring;\n\n  gl_FragColor = vec4(col, 1.0);\n}\n",
           "sceneFile": "slider-shader.scene.glsl"
         },
         {
           "type": "text",
-          "markdown": "## Slider vs Number in Shaders\n\nBoth `@viji-slider` and `@viji-number` produce a `uniform float` and accept the same config keys (`min`, `max`, `step`, `default`). The only difference is the host UI:\n\n| | @viji-slider | @viji-number |\n|--|--------------|--------------|\n| UI | Draggable track | Text input field |\n| Best for | Continuous ranges, visual tuning | Precise values, integer counts |\n\n## Smooth Animation with Accumulators\n\nA common pattern is using a slider to control animation speed:\n\n```glsl\nfloat phase = u_time * speed;  // jumps when speed changes mid-animation\n```\n\nThe problem: if the user changes `speed` from `1.0` to `3.0` at `u_time = 10`, the phase jumps from `10` to `30` instantly. The [`@viji-accumulator`](../accumulator/) solves this by integrating the rate over time — changing the rate only affects future growth, never jumps:\n\n```glsl\n// @viji-slider:speed label:\"Speed\" default:1 min:0 max:5 step:0.1\n// @viji-accumulator:phase rate:speed\n\nuniform float speed;\nuniform float phase;  // grows by speed × deltaTime each frame, no jumps\n```\n\nSee [Accumulator](../accumulator/) for full details and examples.\n\n## Rules\n\n- Numeric values have no quotes: `default:1`, `min:0`, `max:5`\n- String values use quotes: `label:\"Speed\"`\n- The `label` and `default` keys are required\n\n## Related\n\n- [Shader Basics](/shader/basics) — shader file structure and directives\n- [Number](../number/) — numeric input `uniform float`\n- [Color](../color/) — color picker `uniform vec3`\n- [Toggle](../toggle/) — boolean `uniform bool`\n- [Select](../select/) — dropdown `uniform int`\n- [Accumulator](../accumulator/) — frame-persistent state driven by slider values\n- [Native Slider](/native/parameters/slider) — equivalent for the Native renderer\n- [P5 Slider](/p5/parameters/slider) — equivalent for the P5 renderer"
+          "markdown": "## Slider vs Number in Shaders\n\nBoth `@viji-slider` and `@viji-number` produce a `uniform float` and accept the same config keys (`min`, `max`, `step`, `default`). The only difference is the host UI:\n\n| | @viji-slider | @viji-number |\n|--|--------------|--------------|\n| UI | Draggable track | Text input field |\n| Best for | Continuous ranges, visual tuning | Precise values, integer counts |\n\n## Smooth Animation with Accumulators\n\nA common pattern is using a slider to control animation speed:\n\n```glsl\nfloat phase = u_time * speed;  // jumps when speed changes mid-animation\n```\n\nThe problem: if the user changes `speed` from `1.0` to `3.0` at `u_time = 10`, the phase jumps from `10` to `30` instantly. The [`@viji-accumulator`](../accumulator/) solves this by integrating the rate over time — changing the rate only affects future growth, never jumps:\n\n```glsl\n// @viji-slider:speed label:\"Speed\" default:1 min:0 max:5 step:0.1\n// @viji-accumulator:phase rate:speed\n// Generates: uniform float speed; and uniform float phase;\n// phase grows by speed × deltaTime each frame, no jumps\n```\n\nSee [Accumulator](../accumulator/) for full details and examples.\n\n## Rules\n\n- Numeric values have no quotes: `default:1`, `min:0`, `max:5`\n- String values use quotes: `label:\"Speed\"`\n- The `label` and `default` keys are required\n\n## Related\n\n- [Shader Basics](/shader/basics) — shader file structure and directives\n- [Number](../number/) — numeric input `uniform float`\n- [Color](../color/) — color picker `uniform vec3`\n- [Toggle](../toggle/) — boolean `uniform bool`\n- [Select](../select/) — dropdown `uniform int`\n- [Accumulator](../accumulator/) — frame-persistent state driven by slider values\n- [Native Slider](/native/parameters/slider) — equivalent for the Native renderer\n- [P5 Slider](/p5/parameters/slider) — equivalent for the P5 renderer"
         }
       ]
     },
@@ -1877,12 +3015,12 @@ export const docsApi = {
       "content": [
         {
           "type": "text",
-          "markdown": "# @viji-color\n\n```glsl\n// @viji-color:myColor label:\"Color\" default:#ff6600\nuniform vec3 myColor;\n```\n\nDeclares a color picker parameter. The host renders a color swatch that opens a full picker when clicked. The hex value is converted to a `vec3` uniform with RGB components normalized to `0.0–1.0`.\n\n## Directive Syntax\n\n```\n// @viji-color:uniformName key:value key:value ...\n```\n\n| Key | Required | Default | Description |\n|-----|----------|---------|-------------|\n| `label` | Yes | — | Display name in the parameter UI |\n| `default` | Yes | — | Initial hex color (e.g., `#ff6600`) — **no quotes** |\n| `description` | No | — | Tooltip text (use quotes: `description:\"Help text\"`) |\n| `group` | No | `general` | Group name (use quotes: `group:\"colors\"`) |\n| `category` | No | `general` | Visibility category |\n\n## Uniform Type\n\nThe color is injected as a `vec3`:\n\n| Component | Value | Range |\n|-----------|-------|-------|\n| `.r` | Red channel | 0.0 – 1.0 |\n| `.g` | Green channel | 0.0 – 1.0 |\n| `.b` | Blue channel | 0.0 – 1.0 |\n\nFor hex `#ff8040`: `.r = 1.0`, `.g ≈ 0.502`, `.b ≈ 0.251`.\n\n## Usage\n\n```glsl\n// @renderer shader\n// @viji-color:bgColor label:\"Background\" default:#0f0f1a\n// @viji-color:accent label:\"Accent\" default:#ff4488\n\nuniform vec3 bgColor;\nuniform vec3 accent;\nuniform vec2 u_resolution;\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  float d = distance(uv, vec2(0.5));\n  vec3 col = mix(accent, bgColor, smoothstep(0.1, 0.4, d));\n  gl_FragColor = vec4(col, 1.0);\n}\n```\n\n> [!WARNING]\n> The directive must use `//` comments only. Block comments (`/* */`) are not parsed.\n\n> [!WARNING]\n> The uniform name in the directive (`@viji-color:myColor`) must exactly match the `uniform vec3 myColor;` declaration. Viji does not auto-generate uniform declarations."
+          "markdown": "# @viji-color\n\n```glsl\n// @viji-color:myColor label:\"Color\" default:#ff6600\nuniform vec3 myColor;\n```\n\nDeclares a color picker parameter. The host renders a color swatch that opens a full picker when clicked. The hex value is converted to a `vec3` uniform with RGB components normalized to `0.0–1.0`.\n\n## Directive Syntax\n\n```\n// @viji-color:uniformName key:value key:value ...\n```\n\n| Key | Required | Default | Description |\n|-----|----------|---------|-------------|\n| `label` | Yes | — | Display name in the parameter UI |\n| `default` | Yes | — | Initial hex color (e.g., `#ff6600`) — **no quotes** |\n| `description` | No | — | Tooltip text (use quotes: `description:\"Help text\"`) |\n| `group` | No | `general` | Group name (use quotes: `group:\"colors\"`) |\n| `category` | No | `general` | Visibility category |\n\n## Uniform Type\n\nThe color is injected as a `vec3`:\n\n| Component | Value | Range |\n|-----------|-------|-------|\n| `.r` | Red channel | 0.0 – 1.0 |\n| `.g` | Green channel | 0.0 – 1.0 |\n| `.b` | Blue channel | 0.0 – 1.0 |\n\nFor hex `#ff8040`: `.r = 1.0`, `.g ≈ 0.502`, `.b ≈ 0.251`.\n\n## Usage\n\n```glsl\n// @renderer shader\n// @viji-color:bgColor label:\"Background\" default:#0f0f1a\n// @viji-color:accent label:\"Accent\" default:#ff4488\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  float d = distance(uv, vec2(0.5));\n  vec3 col = mix(accent, bgColor, smoothstep(0.1, 0.4, d));\n  gl_FragColor = vec4(col, 1.0);\n}\n```\n\n> [!WARNING]\n> The directive must use `//` comments only. Block comments (`/* */`) are not parsed.\n\n> [!NOTE]\n> Viji auto-injects all `uniform` declarations — both built-in uniforms and parameter uniforms from directives. Do **not** redeclare them in your shader code; duplicate declarations cause compilation errors."
         },
         {
           "type": "live-example",
           "title": "Color Blending",
-          "sceneCode": "// @renderer shader\n// @viji-color:bgColor label:\"Background\" default:#0f0f1a\n// @viji-color:color1 label:\"Color 1\" default:#ff4488 group:\"colors\"\n// @viji-color:color2 label:\"Color 2\" default:#4488ff group:\"colors\"\n\nuniform vec3 bgColor;\nuniform vec3 color1;\nuniform vec3 color2;\nuniform vec2 u_resolution;\nuniform float u_time;\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  float t = sin(uv.x * 6.2832 + u_time) * 0.5 + 0.5;\n  vec3 gradient = mix(color1, color2, t);\n  float d = distance(uv, vec2(0.5));\n  vec3 col = mix(gradient, bgColor, smoothstep(0.2, 0.5, d));\n  gl_FragColor = vec4(col, 1.0);\n}\n",
+          "sceneCode": "// @renderer shader\n// @viji-color:bgColor label:\"Background\" default:#0f0f1a\n// @viji-color:color1 label:\"Color 1\" default:#ff4488 group:\"colors\"\n// @viji-color:color2 label:\"Color 2\" default:#4488ff group:\"colors\"\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  float t = sin(uv.x * 6.2832 + u_time) * 0.5 + 0.5;\n  vec3 gradient = mix(color1, color2, t);\n  float d = distance(uv, vec2(0.5));\n  vec3 col = mix(gradient, bgColor, smoothstep(0.2, 0.5, d));\n  gl_FragColor = vec4(col, 1.0);\n}\n",
           "sceneFile": "color-shader.scene.glsl"
         },
         {
@@ -1898,12 +3036,12 @@ export const docsApi = {
       "content": [
         {
           "type": "text",
-          "markdown": "# @viji-toggle\n\n```glsl\n// @viji-toggle:showGrid label:\"Show Grid\" default:true\nuniform bool showGrid;\n```\n\nDeclares a boolean toggle parameter. The host renders it as an on/off switch. The value is injected as a `uniform bool`.\n\n## Directive Syntax\n\n```\n// @viji-toggle:uniformName key:value key:value ...\n```\n\n| Key | Required | Default | Description |\n|-----|----------|---------|-------------|\n| `label` | Yes | — | Display name in the parameter UI |\n| `default` | Yes | — | Initial state: `true` or `false` |\n| `description` | No | — | Tooltip text (use quotes: `description:\"Help text\"`) |\n| `group` | No | `general` | Group name (use quotes: `group:\"effects\"`) |\n| `category` | No | `general` | Visibility category |\n\n## Uniform Type\n\nThe toggle is injected as a `bool`:\n\n| Value | GLSL |\n|-------|------|\n| On | `true` |\n| Off | `false` |\n\n## Usage\n\n```glsl\n// @renderer shader\n// @viji-toggle:invert label:\"Invert Colors\" default:false\n\nuniform bool invert;\nuniform vec2 u_resolution;\nuniform float u_time;\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  vec3 col = vec3(uv.x, uv.y, sin(u_time) * 0.5 + 0.5);\n  if (invert) {\n    col = 1.0 - col;\n  }\n  gl_FragColor = vec4(col, 1.0);\n}\n```\n\n> [!WARNING]\n> The directive must use `//` comments only. Block comments (`/* */`) are not parsed.\n\n> [!WARNING]\n> The uniform name in the directive (`@viji-toggle:myToggle`) must exactly match the `uniform bool myToggle;` declaration. Viji does not auto-generate uniform declarations."
+          "markdown": "# @viji-toggle\n\n```glsl\n// @viji-toggle:showGrid label:\"Show Grid\" default:true\nuniform bool showGrid;\n```\n\nDeclares a boolean toggle parameter. The host renders it as an on/off switch. The value is injected as a `uniform bool`.\n\n## Directive Syntax\n\n```\n// @viji-toggle:uniformName key:value key:value ...\n```\n\n| Key | Required | Default | Description |\n|-----|----------|---------|-------------|\n| `label` | Yes | — | Display name in the parameter UI |\n| `default` | Yes | — | Initial state: `true` or `false` |\n| `description` | No | — | Tooltip text (use quotes: `description:\"Help text\"`) |\n| `group` | No | `general` | Group name (use quotes: `group:\"effects\"`) |\n| `category` | No | `general` | Visibility category |\n\n## Uniform Type\n\nThe toggle is injected as a `bool`:\n\n| Value | GLSL |\n|-------|------|\n| On | `true` |\n| Off | `false` |\n\n## Usage\n\n```glsl\n// @renderer shader\n// @viji-toggle:invert label:\"Invert Colors\" default:false\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  vec3 col = vec3(uv.x, uv.y, sin(u_time) * 0.5 + 0.5);\n  if (invert) {\n    col = 1.0 - col;\n  }\n  gl_FragColor = vec4(col, 1.0);\n}\n```\n\n> [!WARNING]\n> The directive must use `//` comments only. Block comments (`/* */`) are not parsed.\n\n> [!NOTE]\n> Viji auto-injects all `uniform` declarations — both built-in uniforms and parameter uniforms from directives. Do **not** redeclare them in your shader code; duplicate declarations cause compilation errors."
         },
         {
           "type": "live-example",
           "title": "Toggle Inversion",
-          "sceneCode": "// @renderer shader\n// @viji-toggle:invert label:\"Invert\" default:false\n// @viji-toggle:animate label:\"Animate\" default:true\n// @viji-color:baseColor label:\"Base Color\" default:#4488ff\n\nuniform bool invert;\nuniform bool animate;\nuniform vec3 baseColor;\nuniform vec2 u_resolution;\nuniform float u_time;\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  float t = animate ? u_time : 0.0;\n  float pattern = sin(uv.x * 10.0 + t * 2.0) * sin(uv.y * 10.0 + t * 1.5);\n  vec3 col = baseColor * (pattern * 0.5 + 0.5);\n  if (invert) {\n    col = 1.0 - col;\n  }\n  gl_FragColor = vec4(col, 1.0);\n}\n",
+          "sceneCode": "// @renderer shader\n// @viji-toggle:invert label:\"Invert\" default:false\n// @viji-toggle:animate label:\"Animate\" default:true\n// @viji-color:baseColor label:\"Base Color\" default:#4488ff\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  float t = animate ? u_time : 0.0;\n  float pattern = sin(uv.x * 10.0 + t * 2.0) * sin(uv.y * 10.0 + t * 1.5);\n  vec3 col = baseColor * (pattern * 0.5 + 0.5);\n  if (invert) {\n    col = 1.0 - col;\n  }\n  gl_FragColor = vec4(col, 1.0);\n}\n",
           "sceneFile": "toggle-shader.scene.glsl"
         },
         {
@@ -1919,12 +3057,12 @@ export const docsApi = {
       "content": [
         {
           "type": "text",
-          "markdown": "# @viji-select\n\n```glsl\n// @viji-select:mode label:\"Mode\" options:[\"Wave\",\"Circles\",\"Grid\"] default:0\nuniform int mode;\n```\n\nDeclares a dropdown selection parameter. The host renders it as a dropdown menu. The selected option's **index** is injected as a `uniform int`.\n\n## Directive Syntax\n\n```\n// @viji-select:uniformName key:value key:value ...\n```\n\n| Key | Required | Default | Description |\n|-----|----------|---------|-------------|\n| `label` | Yes | — | Display name in the parameter UI |\n| `options` | Yes | — | Array of string choices: `options:[\"A\",\"B\",\"C\"]` |\n| `default` | Yes | — | Initially selected index (0-based integer) |\n| `description` | No | — | Tooltip text (use quotes) |\n| `group` | No | `general` | Group name (use quotes) |\n| `category` | No | `general` | Visibility category |\n\n## Uniform Type\n\nThe select value is injected as an `int` — the **zero-based index** of the selected option:\n\n| Selected Option | GLSL Value |\n|-----------------|------------|\n| First option | `0` |\n| Second option | `1` |\n| Third option | `2` |\n\nThis differs from Native and P5 renderers, where `.value` is the option string itself.\n\n## Usage\n\n```glsl\n// @renderer shader\n// @viji-select:pattern label:\"Pattern\" options:[\"Stripes\",\"Dots\",\"Checker\"] default:0\n\nuniform int pattern;\nuniform vec2 u_resolution;\nuniform float u_time;\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  float v = 0.0;\n\n  if (pattern == 0) {\n    v = step(0.5, fract(uv.x * 10.0 + u_time));\n  } else if (pattern == 1) {\n    v = 1.0 - step(0.3, length(fract(uv * 5.0) - 0.5));\n  } else if (pattern == 2) {\n    v = mod(floor(uv.x * 8.0) + floor(uv.y * 8.0), 2.0);\n  }\n\n  gl_FragColor = vec4(vec3(v), 1.0);\n}\n```\n\n> [!WARNING]\n> The directive must use `//` comments only. Block comments (`/* */`) are not parsed.\n\n> [!WARNING]\n> The uniform name in the directive (`@viji-select:mode`) must exactly match the `uniform int mode;` declaration. Viji does not auto-generate uniform declarations."
+          "markdown": "# @viji-select\n\n```glsl\n// @viji-select:mode label:\"Mode\" options:[\"Wave\",\"Circles\",\"Grid\"] default:0\nuniform int mode;\n```\n\nDeclares a dropdown selection parameter. The host renders it as a dropdown menu. The selected option's **index** is injected as a `uniform int`.\n\n## Directive Syntax\n\n```\n// @viji-select:uniformName key:value key:value ...\n```\n\n| Key | Required | Default | Description |\n|-----|----------|---------|-------------|\n| `label` | Yes | — | Display name in the parameter UI |\n| `options` | Yes | — | Array of string choices: `options:[\"A\",\"B\",\"C\"]` |\n| `default` | Yes | — | Initially selected index (0-based integer) |\n| `description` | No | — | Tooltip text (use quotes) |\n| `group` | No | `general` | Group name (use quotes) |\n| `category` | No | `general` | Visibility category |\n\n## Uniform Type\n\nThe select value is injected as an `int` — the **zero-based index** of the selected option:\n\n| Selected Option | GLSL Value |\n|-----------------|------------|\n| First option | `0` |\n| Second option | `1` |\n| Third option | `2` |\n\nThis differs from Native and P5 renderers, where `.value` is the option string itself.\n\n## Usage\n\n```glsl\n// @renderer shader\n// @viji-select:pattern label:\"Pattern\" options:[\"Stripes\",\"Dots\",\"Checker\"] default:0\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  float v = 0.0;\n\n  if (pattern == 0) {\n    v = step(0.5, fract(uv.x * 10.0 + u_time));\n  } else if (pattern == 1) {\n    v = 1.0 - step(0.3, length(fract(uv * 5.0) - 0.5));\n  } else if (pattern == 2) {\n    v = mod(floor(uv.x * 8.0) + floor(uv.y * 8.0), 2.0);\n  }\n\n  gl_FragColor = vec4(vec3(v), 1.0);\n}\n```\n\n> [!WARNING]\n> The directive must use `//` comments only. Block comments (`/* */`) are not parsed.\n\n> [!NOTE]\n> Viji auto-injects all `uniform` declarations — both built-in uniforms and parameter uniforms from directives. Do **not** redeclare them in your shader code; duplicate declarations cause compilation errors."
         },
         {
           "type": "live-example",
           "title": "Pattern Selector",
-          "sceneCode": "// @renderer shader\n// @viji-select:pattern label:\"Pattern\" options:[\"Stripes\",\"Dots\",\"Checker\"] default:0\n// @viji-color:color1 label:\"Color\" default:#ff4488\n\nuniform int pattern;\nuniform vec3 color1;\nuniform vec2 u_resolution;\nuniform float u_time;\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  float v = 0.0;\n\n  if (pattern == 0) {\n    v = step(0.5, fract(uv.x * 10.0 + u_time));\n  } else if (pattern == 1) {\n    v = 1.0 - step(0.3, length(fract(uv * 5.0) - 0.5));\n  } else {\n    v = mod(floor(uv.x * 8.0) + floor(uv.y * 8.0), 2.0);\n  }\n\n  vec3 col = mix(vec3(0.06), color1, v);\n  gl_FragColor = vec4(col, 1.0);\n}\n",
+          "sceneCode": "// @renderer shader\n// @viji-select:pattern label:\"Pattern\" options:[\"Stripes\",\"Dots\",\"Checker\"] default:0\n// @viji-color:color1 label:\"Color\" default:#ff4488\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  float v = 0.0;\n\n  if (pattern == 0) {\n    v = step(0.5, fract(uv.x * 10.0 + u_time));\n  } else if (pattern == 1) {\n    v = 1.0 - step(0.3, length(fract(uv * 5.0) - 0.5));\n  } else {\n    v = mod(floor(uv.x * 8.0) + floor(uv.y * 8.0), 2.0);\n  }\n\n  vec3 col = mix(vec3(0.06), color1, v);\n  gl_FragColor = vec4(col, 1.0);\n}\n",
           "sceneFile": "select-shader.scene.glsl"
         },
         {
@@ -1940,17 +3078,17 @@ export const docsApi = {
       "content": [
         {
           "type": "text",
-          "markdown": "# @viji-number\n\n```glsl\n// @viji-number:density label:\"Density\" default:5 min:1 max:20 step:1\nuniform float density;\n```\n\nDeclares a numeric input parameter. The host renders it as a direct number input field. The value is injected as a `uniform float`.\n\n## Directive Syntax\n\n```\n// @viji-number:uniformName key:value key:value ...\n```\n\n| Key | Required | Default | Description |\n|-----|----------|---------|-------------|\n| `label` | Yes | — | Display name in the parameter UI |\n| `default` | Yes | — | Initial value |\n| `min` | No | `0` | Minimum allowed value |\n| `max` | No | `100` | Maximum allowed value |\n| `step` | No | `1` | Increment between values |\n| `description` | No | — | Tooltip text (use quotes) |\n| `group` | No | `general` | Group name (use quotes) |\n| `category` | No | `general` | Visibility category |\n\n## Uniform Type\n\nThe number is always injected as a `float`, even when configured with integer steps:\n\n```glsl\n// @viji-number:count label:\"Count\" default:8 min:1 max:20 step:1\nuniform float count;  // always float, use int(count) if needed\n```\n\n## Usage\n\n```glsl\n// @renderer shader\n// @viji-number:rings label:\"Rings\" default:5 min:1 max:15 step:1\n// @viji-color:ringColor label:\"Color\" default:#44ddff\n\nuniform float rings;\nuniform vec3 ringColor;\nuniform vec2 u_resolution;\nuniform float u_time;\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  vec2 center = uv - 0.5;\n  float aspect = u_resolution.x / u_resolution.y;\n  center.x *= aspect;\n\n  float d = length(center);\n  float wave = sin(d * rings * 6.2832 - u_time * 3.0) * 0.5 + 0.5;\n  vec3 col = ringColor * wave;\n\n  gl_FragColor = vec4(col, 1.0);\n}\n```\n\n> [!WARNING]\n> The directive must use `//` comments only. Block comments (`/* */`) are not parsed.\n\n> [!WARNING]\n> The uniform name in the directive (`@viji-number:density`) must exactly match the `uniform float density;` declaration. Viji does not auto-generate uniform declarations."
+          "markdown": "# @viji-number\n\n```glsl\n// @viji-number:density label:\"Density\" default:5 min:1 max:20 step:1\nuniform float density;\n```\n\nDeclares a numeric input parameter. The host renders it as a direct number input field. The value is injected as a `uniform float`.\n\n## Directive Syntax\n\n```\n// @viji-number:uniformName key:value key:value ...\n```\n\n| Key | Required | Default | Description |\n|-----|----------|---------|-------------|\n| `label` | Yes | — | Display name in the parameter UI |\n| `default` | Yes | — | Initial value |\n| `min` | No | `0` | Minimum allowed value |\n| `max` | No | `100` | Maximum allowed value |\n| `step` | No | `1` | Increment between values |\n| `description` | No | — | Tooltip text (use quotes) |\n| `group` | No | `general` | Group name (use quotes) |\n| `category` | No | `general` | Visibility category |\n\n## Uniform Type\n\nThe number is always injected as a `float`, even when configured with integer steps:\n\n```glsl\n// @viji-number:count label:\"Count\" default:8 min:1 max:20 step:1\nuniform float count;  // always float, use int(count) if needed\n```\n\n## Usage\n\n```glsl\n// @renderer shader\n// @viji-number:rings label:\"Rings\" default:5 min:1 max:15 step:1\n// @viji-color:ringColor label:\"Color\" default:#44ddff\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  vec2 center = uv - 0.5;\n  float aspect = u_resolution.x / u_resolution.y;\n  center.x *= aspect;\n\n  float d = length(center);\n  float wave = sin(d * rings * 6.2832 - u_time * 3.0) * 0.5 + 0.5;\n  vec3 col = ringColor * wave;\n\n  gl_FragColor = vec4(col, 1.0);\n}\n```\n\n> [!WARNING]\n> The directive must use `//` comments only. Block comments (`/* */`) are not parsed.\n\n> [!NOTE]\n> Viji auto-injects all `uniform` declarations — both built-in uniforms and parameter uniforms from directives. Do **not** redeclare them in your shader code; duplicate declarations cause compilation errors."
         },
         {
           "type": "live-example",
           "title": "Ring Count",
-          "sceneCode": "// @renderer shader\n// @viji-number:rings label:\"Rings\" default:5 min:1 max:15 step:1\n// @viji-number:speed label:\"Speed\" default:3 min:0 max:10 step:0.5\n// @viji-color:ringColor label:\"Color\" default:#44ddff\n\nuniform float rings;\nuniform float speed;\nuniform vec3 ringColor;\nuniform vec2 u_resolution;\nuniform float u_time;\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  vec2 center = uv - 0.5;\n  float aspect = u_resolution.x / u_resolution.y;\n  center.x *= aspect;\n\n  float d = length(center);\n  float wave = sin(d * rings * 6.2832 - u_time * speed) * 0.5 + 0.5;\n  vec3 col = ringColor * wave;\n\n  gl_FragColor = vec4(col, 1.0);\n}\n",
+          "sceneCode": "// @renderer shader\n// @viji-number:rings label:\"Rings\" default:5 min:1 max:15 step:1\n// @viji-number:speed label:\"Speed\" default:3 min:0 max:10 step:0.5\n// @viji-color:ringColor label:\"Color\" default:#44ddff\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  vec2 center = uv - 0.5;\n  float aspect = u_resolution.x / u_resolution.y;\n  center.x *= aspect;\n\n  float d = length(center);\n  float wave = sin(d * rings * 6.2832 - u_time * speed) * 0.5 + 0.5;\n  vec3 col = ringColor * wave;\n\n  gl_FragColor = vec4(col, 1.0);\n}\n",
           "sceneFile": "number-shader.scene.glsl"
         },
         {
           "type": "text",
-          "markdown": "## Number vs Slider in Shaders\n\nBoth `@viji-number` and `@viji-slider` produce a `uniform float` and accept the same config keys (`min`, `max`, `step`, `default`). The only difference is the host UI:\n\n| | @viji-slider | @viji-number |\n|--|--------------|--------------|\n| UI | Draggable track | Text input field |\n| Best for | Continuous ranges, visual tuning | Precise values, integer counts |\n\n## Smooth Animation with Accumulators\n\nWhen a number parameter controls animation speed, multiplying by `u_time` directly causes jumps when the value changes. The [`@viji-accumulator`](../accumulator/) integrates the rate over time for smooth transitions:\n\n```glsl\n// @viji-number:bpm label:\"BPM\" default:120 min:30 max:300 step:1\n// @viji-accumulator:beat rate:bpm\n\nuniform float bpm;\nuniform float beat;  // grows by bpm × deltaTime each frame, no jumps\n```\n\nSee [Accumulator](../accumulator/) for full details and examples.\n\n## Rules\n\n- Numeric values have no quotes: `default:5`, `min:1`, `max:20`\n- String values use quotes: `label:\"Density\"`\n- The `label` and `default` keys are required\n\n## Related\n\n- [Shader Basics](/shader/basics) — shader file structure and directives\n- [Slider](/shader/parameters/slider) — numeric slider `uniform float`\n- [Toggle](../toggle/) — boolean `uniform bool`\n- [Select](../select/) — dropdown `uniform int`\n- [Accumulator](../accumulator/) — frame-persistent state driven by numeric values\n- [Native Number](/native/parameters/number) — equivalent for the Native renderer\n- [P5 Number](/p5/parameters/number) — equivalent for the P5 renderer"
+          "markdown": "## Number vs Slider in Shaders\n\nBoth `@viji-number` and `@viji-slider` produce a `uniform float` and accept the same config keys (`min`, `max`, `step`, `default`). The only difference is the host UI:\n\n| | @viji-slider | @viji-number |\n|--|--------------|--------------|\n| UI | Draggable track | Text input field |\n| Best for | Continuous ranges, visual tuning | Precise values, integer counts |\n\n## Smooth Animation with Accumulators\n\nWhen a number parameter controls animation speed, multiplying by `u_time` directly causes jumps when the value changes. The [`@viji-accumulator`](../accumulator/) integrates the rate over time for smooth transitions:\n\n```glsl\n// @viji-number:bpm label:\"BPM\" default:120 min:30 max:300 step:1\n// @viji-accumulator:beat rate:bpm\n// Generates: uniform float bpm; and uniform float beat;\n// beat grows by bpm × deltaTime each frame, no jumps\n```\n\nSee [Accumulator](../accumulator/) for full details and examples.\n\n## Rules\n\n- Numeric values have no quotes: `default:5`, `min:1`, `max:20`\n- String values use quotes: `label:\"Density\"`\n- The `label` and `default` keys are required\n\n## Related\n\n- [Shader Basics](/shader/basics) — shader file structure and directives\n- [Slider](/shader/parameters/slider) — numeric slider `uniform float`\n- [Toggle](../toggle/) — boolean `uniform bool`\n- [Select](../select/) — dropdown `uniform int`\n- [Accumulator](../accumulator/) — frame-persistent state driven by numeric values\n- [Native Number](/native/parameters/number) — equivalent for the Native renderer\n- [P5 Number](/p5/parameters/number) — equivalent for the P5 renderer"
         }
       ]
     },
@@ -1961,12 +3099,12 @@ export const docsApi = {
       "content": [
         {
           "type": "text",
-          "markdown": "# @viji-image\n\n```glsl\n// @viji-image:tex label:\"Texture\"\nuniform sampler2D tex;\n```\n\nDeclares an image upload parameter. The host renders a file picker or drag-and-drop area. The uploaded image is bound as a WebGL texture and accessed via a `uniform sampler2D`.\n\n## Directive Syntax\n\n```\n// @viji-image:uniformName key:value key:value ...\n```\n\n| Key | Required | Default | Description |\n|-----|----------|---------|-------------|\n| `label` | Yes | — | Display name in the parameter UI |\n| `description` | No | — | Tooltip text (use quotes) |\n| `group` | No | `general` | Group name (use quotes) |\n| `category` | No | `general` | Visibility category |\n\nImage parameters do not have a `default` key — the default is always \"no image\" until the user uploads one.\n\n## Uniform Type\n\nThe image is injected as a `sampler2D`. When no image is uploaded, the texture contains a single transparent black pixel (`vec4(0.0)`).\n\n## Usage\n\n```glsl\n// @renderer shader\n// @viji-image:tex label:\"Texture\"\n\nuniform sampler2D tex;\nuniform vec2 u_resolution;\nuniform float u_time;\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  vec4 img = texture2D(tex, uv);\n  gl_FragColor = img;\n}\n```\n\n> [!WARNING]\n> The directive must use `//` comments only. Block comments (`/* */`) are not parsed.\n\n> [!WARNING]\n> The uniform name in the directive (`@viji-image:tex`) must exactly match the `uniform sampler2D tex;` declaration. Viji does not auto-generate uniform declarations."
+          "markdown": "# @viji-image\n\n```glsl\n// @viji-image:tex label:\"Texture\"\nuniform sampler2D tex;\n```\n\nDeclares an image upload parameter. The host renders a file picker or drag-and-drop area. The uploaded image is bound as a WebGL texture and accessed via a `uniform sampler2D`.\n\n## Directive Syntax\n\n```\n// @viji-image:uniformName key:value key:value ...\n```\n\n| Key | Required | Default | Description |\n|-----|----------|---------|-------------|\n| `label` | Yes | — | Display name in the parameter UI |\n| `description` | No | — | Tooltip text (use quotes) |\n| `group` | No | `general` | Group name (use quotes) |\n| `category` | No | `general` | Visibility category |\n\nImage parameters do not have a `default` key — the default is always \"no image\" until the user uploads one.\n\n## Uniform Type\n\nThe image is injected as a `sampler2D`. When no image is uploaded, the texture contains a single transparent black pixel (`vec4(0.0)`).\n\n## Usage\n\n```glsl\n// @renderer shader\n// @viji-image:tex label:\"Texture\"\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  vec4 img = texture2D(tex, uv);\n  gl_FragColor = img;\n}\n```\n\n> [!WARNING]\n> The directive must use `//` comments only. Block comments (`/* */`) are not parsed.\n\n> [!NOTE]\n> Viji auto-injects all `uniform` declarations — both built-in uniforms and parameter uniforms from directives. Do **not** redeclare them in your shader code; duplicate declarations cause compilation errors."
         },
         {
           "type": "live-example",
           "title": "Image Texture",
-          "sceneCode": "// @renderer shader\n// @viji-image:tex label:\"Texture\"\n// @viji-slider:distort label:\"Distortion\" default:0.02 min:0 max:0.1 step:0.005\n// @viji-color:tint label:\"Tint\" default:#ffffff\n\nuniform sampler2D tex;\nuniform float distort;\nuniform vec3 tint;\nuniform vec2 u_resolution;\nuniform float u_time;\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  vec2 d = vec2(\n    sin(uv.y * 10.0 + u_time * 2.0) * distort,\n    cos(uv.x * 10.0 + u_time * 2.0) * distort\n  );\n  vec4 img = texture2D(tex, uv + d);\n\n  float hasImage = step(0.001, img.a);\n  vec3 fallback = vec3(uv, sin(u_time) * 0.5 + 0.5);\n  vec3 col = mix(fallback, img.rgb * tint, hasImage);\n\n  gl_FragColor = vec4(col, 1.0);\n}\n",
+          "sceneCode": "// @renderer shader\n// @viji-image:tex label:\"Texture\"\n// @viji-slider:distort label:\"Distortion\" default:0.02 min:0 max:0.1 step:0.005\n// @viji-color:tint label:\"Tint\" default:#ffffff\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  vec2 d = vec2(\n    sin(uv.y * 10.0 + u_time * 2.0) * distort,\n    cos(uv.x * 10.0 + u_time * 2.0) * distort\n  );\n  vec4 img = texture2D(tex, uv + d);\n\n  float hasImage = step(0.001, img.a);\n  vec3 fallback = vec3(uv, sin(u_time) * 0.5 + 0.5);\n  vec3 col = mix(fallback, img.rgb * tint, hasImage);\n\n  gl_FragColor = vec4(col, 1.0);\n}\n",
           "sceneFile": "image-shader.scene.glsl"
         },
         {
@@ -2061,7 +3199,11 @@ export const docsApi = {
           "type": "live-example",
           "title": "Shader Parameter Categories",
           "sceneCode": "// @renderer shader\r\n// @viji-color:tint label:\"Color\" default:#4488ff category:general\r\n// @viji-slider:audioPulse label:\"Audio Pulse\" default:0.3 min:0.0 max:1.0 category:audio\r\n// @viji-slider:mouseSize label:\"Mouse Glow\" default:0.15 min:0.0 max:0.5 category:interaction\r\n// @viji-accumulator:phase rate:1.0\r\n\r\nvoid main() {\r\n  vec2 uv = (2.0 * gl_FragCoord.xy - u_resolution) / u_resolution.y;\r\n  float d = length(uv);\r\n\r\n  float pulse = u_audioVolume * audioPulse;\r\n  float wave = sin(d * 15.0 - phase * 3.0) * 0.5 + 0.5;\r\n  vec3 col = tint * wave * (1.0 + pulse);\r\n\r\n  vec2 mouseUV = (2.0 * u_mouse - u_resolution) / u_resolution.y;\r\n  float mouseDist = length(uv - mouseUV);\r\n  float glow = mouseSize / (mouseDist + 0.05);\r\n  col += vec3(glow * 0.3);\r\n\r\n  col *= smoothstep(1.5, 0.3, d);\r\n  gl_FragColor = vec4(col, 1.0);\r\n}\r\n",
-          "sceneFile": "categories-demo.scene.glsl"
+          "sceneFile": "categories-demo.scene.glsl",
+          "capabilities": {
+            "audio": true,
+            "interaction": true
+          }
         },
         {
           "type": "text",
@@ -2069,6 +3211,345 @@ export const docsApi = {
         }
       ]
     },
+    "shader-audio-overview": {
+      "id": "shader-audio-overview",
+      "title": "Audio Uniforms",
+      "description": "Complete reference for audio-reactive shader uniforms — volume, bands, beat, spectral, FFT texture, and waveform texture.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Audio Uniforms\n\nViji injects up to 32 audio-related uniforms into your shader when audio is connected. These uniforms are updated every frame from the host's real-time audio analysis.\n\n## Uniform Overview\n\n| Category | Uniforms | Page |\n|----------|----------|------|\n| Volume | `u_audioVolume`, `u_audioPeak`, `u_audioVolumeSmoothed` | [Volume](volume/) |\n| Bands (instant) | `u_audioLow`, `u_audioLowMid`, `u_audioMid`, `u_audioHighMid`, `u_audioHigh` | [Frequency Bands](bands/) |\n| Bands (smoothed) | `u_audioLowSmoothed` … `u_audioHighSmoothed` | [Frequency Bands](bands/) |\n| Beat energy (fast) | `u_audioKick`, `u_audioSnare`, `u_audioHat`, `u_audioAny` | [Beat Detection](beat/) |\n| Beat energy (smoothed) | `u_audioKickSmoothed` … `u_audioAnySmoothed` | [Beat Detection](beat/) |\n| Beat triggers | `u_audioKickTrigger`, `u_audioSnareTrigger`, `u_audioHatTrigger`, `u_audioAnyTrigger` | [Beat Detection](beat/) |\n| Tempo | `u_audioBPM`, `u_audioConfidence`, `u_audioIsLocked` | [Beat Detection](beat/) |\n| Spectral | `u_audioBrightness`, `u_audioFlatness` | [Spectral Analysis](spectral/) |\n| FFT texture | `u_audioFFT` | [FFT Texture](fft/) |\n| Waveform texture | `u_audioWaveform` | [Waveform Texture](waveform/) |\n\n**Total**: 30 float/bool uniforms + 2 sampler2D textures.\n\n## Basic Usage\n\n```glsl\n// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n\n  // Pulse with volume\n  float pulse = u_audioVolumeSmoothed;\n\n  // Color from frequency bands\n  float r = u_audioLowSmoothed;\n  float g = u_audioMidSmoothed;\n  float b = u_audioHighSmoothed;\n\n  // Flash on kick\n  float flash = u_audioKickTrigger ? 1.0 : 0.0;\n\n  vec3 col = mix(vec3(r, g, b) * pulse, vec3(1.0), flash * 0.3);\n  gl_FragColor = vec4(col, 1.0);\n}\n```\n\n> [!NOTE]\n> All audio uniforms default to `0.0` (or `false` for booleans) when no audio is connected, except `u_audioBPM` which defaults to `120.0`. Your shader will still compile and run — the uniforms simply hold their default values."
+        },
+        {
+          "type": "live-example",
+          "title": "Audio-Reactive Shader",
+          "sceneCode": "// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n\n  float pulse = u_audioVolumeSmoothed;\n\n  float r = u_audioLowSmoothed;\n  float g = u_audioMidSmoothed;\n  float b = u_audioHighSmoothed;\n\n  float flash = u_audioKickTrigger ? 0.3 : 0.0;\n\n  vec3 col = vec3(r, g, b) * (0.3 + pulse * 0.7) + vec3(flash);\n  gl_FragColor = vec4(col, 1.0);\n}\n",
+          "sceneFile": "audio-overview.scene.js"
+        },
+        {
+          "type": "text",
+          "markdown": "## Related\n\n- [Volume](volume/)\n- [Frequency Bands](bands/)\n- [Beat Detection](beat/)\n- [Spectral Analysis](spectral/)\n- [FFT Texture](fft/)\n- [Waveform Texture](waveform/)\n- [Native Audio](/native/audio)\n- [P5 Audio](/p5/audio)"
+        }
+      ]
+    },
+    "shader-audio-volume": {
+      "id": "shader-audio-volume",
+      "title": "Volume",
+      "description": "Shader uniforms for real-time volume level, peak amplitude, and smoothed volume.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Volume\n\nThree uniforms provide the overall audio loudness — instant RMS level, peak amplitude, and a smoothed value ideal for driving animations.\n\n## Uniform Reference\n\n| Uniform | Type | Range | Description |\n|---------|------|-------|-------------|\n| `u_audioVolume` | `float` | 0–1 | RMS volume level (instant) |\n| `u_audioPeak` | `float` | 0–1 | Peak amplitude (instant) |\n| `u_audioVolumeSmoothed` | `float` | 0–1 | Smoothed volume (200ms decay envelope) |\n\n### Instant vs Smoothed\n\n- **`u_audioVolume`** and **`u_audioPeak`** update every frame to reflect the latest audio analysis. They can jump sharply between frames.\n- **`u_audioVolumeSmoothed`** follows a 200ms decay envelope — it rises quickly with the signal but falls gradually. Use this for smooth animations that should not flicker.\n\n## Usage\n\n```glsl\n// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n\n  // Breathing circle driven by smoothed volume\n  vec2 center = vec2(0.5);\n  float radius = 0.1 + u_audioVolumeSmoothed * 0.3;\n  float d = length(uv - center);\n  float circle = smoothstep(radius, radius - 0.01, d);\n\n  // Color intensity from instant volume\n  vec3 col = vec3(0.2, 0.6, 1.0) * circle * (0.4 + u_audioVolume * 0.6);\n\n  gl_FragColor = vec4(col, 1.0);\n}\n```\n\n> [!NOTE]\n> All volume values are normalized to 0–1 using auto-gain (3-second window). This means the values adapt to the input level over time, providing consistent visual output regardless of whether the audio source is quiet or loud."
+        },
+        {
+          "type": "live-example",
+          "title": "Volume Pulse",
+          "sceneCode": "// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n\n  vec2 center = vec2(0.5);\n  float radius = 0.1 + u_audioVolumeSmoothed * 0.3;\n  float d = length(uv - center);\n  float circle = smoothstep(radius, radius - 0.01, d);\n\n  vec3 col = vec3(0.2, 0.6, 1.0) * circle * (0.4 + u_audioVolume * 0.6);\n\n  gl_FragColor = vec4(col, 1.0);\n}\n",
+          "sceneFile": "volume-demo.scene.js"
+        },
+        {
+          "type": "text",
+          "markdown": "## Related\n\n- [Audio Uniforms Overview](../)\n- [Frequency Bands](../bands/)\n- [Beat Detection](../beat/)"
+        }
+      ]
+    },
+    "shader-audio-bands": {
+      "id": "shader-audio-bands",
+      "title": "Frequency Bands",
+      "description": "Shader uniforms for five frequency bands with instant and smoothed variants.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Frequency Bands\n\nTen uniforms split the audio spectrum into five named frequency bands — each with an instant value and a smoothed variant.\n\n## Uniform Reference\n\n### Instant Bands\n\n| Uniform | Hz Range | Description |\n|---------|----------|-------------|\n| `u_audioLow` | 20–120 Hz | Bass / kick range (0–1) |\n| `u_audioLowMid` | 120–400 Hz | Low-mid range (0–1) |\n| `u_audioMid` | 400–1600 Hz | Vocals, instruments (0–1) |\n| `u_audioHighMid` | 1600–6000 Hz | Cymbals, hi-hats (0–1) |\n| `u_audioHigh` | 6000–16000 Hz | Air, brilliance (0–1) |\n\n### Smoothed Bands\n\nSmoothed variants follow a 150ms decay envelope — they rise quickly but fall gradually.\n\n| Uniform | Hz Range | Description |\n|---------|----------|-------------|\n| `u_audioLowSmoothed` | 20–120 Hz | Smoothed bass (0–1) |\n| `u_audioLowMidSmoothed` | 120–400 Hz | Smoothed low-mid (0–1) |\n| `u_audioMidSmoothed` | 400–1600 Hz | Smoothed mid (0–1) |\n| `u_audioHighMidSmoothed` | 1600–6000 Hz | Smoothed high-mid (0–1) |\n| `u_audioHighSmoothed` | 6000–16000 Hz | Smoothed high (0–1) |\n\n### Instant vs Smoothed\n\n- **Instant** uniforms reflect the current frame's frequency energy. They can change abruptly between frames.\n- **Smoothed** uniforms follow a 150ms decay envelope. Use these for animations that should move fluidly rather than flicker.\n\n## Usage\n\n```glsl\n// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n\n  // Map each band to a vertical bar\n  float barW = 0.2;\n  float col_r = 0.0, col_g = 0.0, col_b = 0.0;\n\n  if (uv.x < 0.2) {\n    col_r = step(uv.y, u_audioLowSmoothed) * 0.9;\n  } else if (uv.x < 0.4) {\n    col_r = step(uv.y, u_audioLowMidSmoothed) * 0.8;\n    col_g = col_r * 0.4;\n  } else if (uv.x < 0.6) {\n    col_g = step(uv.y, u_audioMidSmoothed) * 0.9;\n    col_r = col_g * 0.6;\n  } else if (uv.x < 0.8) {\n    col_g = step(uv.y, u_audioHighMidSmoothed) * 0.7;\n    col_b = col_g * 0.5;\n  } else {\n    col_b = step(uv.y, u_audioHighSmoothed) * 0.9;\n  }\n\n  gl_FragColor = vec4(col_r, col_g, col_b, 1.0);\n}\n```\n\n> [!NOTE]\n> All band values are independently normalized to 0–1 using per-band auto-gain (3-second window). A quiet high-frequency signal can produce the same band value as a loud bass signal."
+        },
+        {
+          "type": "live-example",
+          "title": "Band Bars",
+          "sceneCode": "// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n\n  float col_r = 0.0, col_g = 0.0, col_b = 0.0;\n\n  if (uv.x < 0.2) {\n    col_r = step(uv.y, u_audioLowSmoothed) * 0.9;\n  } else if (uv.x < 0.4) {\n    col_r = step(uv.y, u_audioLowMidSmoothed) * 0.8;\n    col_g = col_r * 0.4;\n  } else if (uv.x < 0.6) {\n    col_g = step(uv.y, u_audioMidSmoothed) * 0.9;\n    col_r = col_g * 0.6;\n  } else if (uv.x < 0.8) {\n    col_g = step(uv.y, u_audioHighMidSmoothed) * 0.7;\n    col_b = col_g * 0.5;\n  } else {\n    col_b = step(uv.y, u_audioHighSmoothed) * 0.9;\n  }\n\n  gl_FragColor = vec4(col_r, col_g, col_b, 1.0);\n}\n",
+          "sceneFile": "bands-demo.scene.js"
+        },
+        {
+          "type": "text",
+          "markdown": "## Related\n\n- [Audio Uniforms Overview](../)\n- [Volume](../volume/)\n- [Beat Detection](../beat/)\n- [FFT Texture](../fft/)\n- [Spectral Analysis](../spectral/)"
+        }
+      ]
+    },
+    "shader-audio-beat": {
+      "id": "shader-audio-beat",
+      "title": "Beat Detection",
+      "description": "Shader uniforms for beat energy curves, boolean triggers, BPM tracking, and confidence scoring.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Beat Detection\n\nMultiple uniforms expose beat detection results — energy curves for smooth reactions, boolean triggers for one-shot events, and tempo tracking.\n\n## Uniform Reference\n\n### Energy Curves (fast decay)\n\nEnergy curves track beat intensity with a 300ms fast decay. They peak at the moment of a beat and decay smoothly, making them ideal for scaling, pulsing, or flash effects.\n\n| Uniform | Type | Range | Description |\n|---------|------|-------|-------------|\n| `u_audioKick` | `float` | 0–1 | Kick energy (300ms decay) |\n| `u_audioSnare` | `float` | 0–1 | Snare energy (300ms decay) |\n| `u_audioHat` | `float` | 0–1 | Hi-hat energy (300ms decay) |\n| `u_audioAny` | `float` | 0–1 | Any-beat energy (300ms decay) |\n\n### Energy Curves (smoothed)\n\nSmoothed variants use a slower 500ms decay, producing a more gradual response suitable for ambient or background effects.\n\n| Uniform | Type | Range | Description |\n|---------|------|-------|-------------|\n| `u_audioKickSmoothed` | `float` | 0–1 | Kick smoothed energy (500ms decay) |\n| `u_audioSnareSmoothed` | `float` | 0–1 | Snare smoothed energy (500ms decay) |\n| `u_audioHatSmoothed` | `float` | 0–1 | Hi-hat smoothed energy (500ms decay) |\n| `u_audioAnySmoothed` | `float` | 0–1 | Any-beat smoothed energy (500ms decay) |\n\n### Triggers\n\nBoolean trigger uniforms fire on beat detection. Each trigger is **true for exactly one frame when a beat is detected, then resets**. In GLSL, `bool` uniforms are `true`/`false` — convert to float with a ternary or `float()`.\n\n| Uniform | Type | Description |\n|---------|------|-------------|\n| `u_audioKickTrigger` | `bool` | `true` for one frame when a kick is detected |\n| `u_audioSnareTrigger` | `bool` | `true` for one frame when a snare is detected |\n| `u_audioHatTrigger` | `bool` | `true` for one frame when a hi-hat is detected |\n| `u_audioAnyTrigger` | `bool` | `true` for one frame when any beat is detected |\n\n### Tempo\n\n| Uniform | Type | Description |\n|---------|------|-------------|\n| `u_audioBPM` | `float` | Current detected BPM (defaults to 120 when no audio) |\n| `u_audioConfidence` | `float` | Beat tracking confidence (0–1) |\n| `u_audioIsLocked` | `bool` | `true` when the beat tracker has a stable lock on tempo |\n\n## Usage — Energy Curves\n\nEnergy curves are the simplest way to react to beats. Use the fast decay values for punchy effects and the smoothed values for ambient motion.\n\n```glsl\n// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n\n  // Three circles for kick, snare, hat\n  vec2 c1 = vec2(0.25, 0.5);\n  vec2 c2 = vec2(0.5, 0.5);\n  vec2 c3 = vec2(0.75, 0.5);\n\n  float r1 = 0.05 + u_audioKick * 0.15;\n  float r2 = 0.05 + u_audioSnare * 0.12;\n  float r3 = 0.05 + u_audioHat * 0.08;\n\n  float d1 = smoothstep(r1, r1 - 0.01, length(uv - c1));\n  float d2 = smoothstep(r2, r2 - 0.01, length(uv - c2));\n  float d3 = smoothstep(r3, r3 - 0.01, length(uv - c3));\n\n  vec3 col = vec3(0.9, 0.3, 0.2) * d1\n           + vec3(0.9, 0.8, 0.1) * d2\n           + vec3(0.2, 0.6, 0.9) * d3;\n\n  gl_FragColor = vec4(col, 1.0);\n}\n```\n\n## Usage — Triggers\n\nUse triggers for discrete one-shot effects — color shifts, pattern changes, or flash overlays. Since triggers are `bool`, convert to float for arithmetic.\n\n```glsl\n// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n\n  float flash = u_audioKickTrigger ? 1.0 : 0.0;\n  float snareFlash = u_audioSnareTrigger ? 0.5 : 0.0;\n\n  // Base color from smoothed energy\n  vec3 col = vec3(u_audioLowSmoothed * 0.6, u_audioMidSmoothed * 0.4, u_audioHighSmoothed * 0.8);\n\n  // Kick flash — white overlay\n  col += vec3(flash * 0.4);\n  // Snare flash — warm overlay\n  col += vec3(snareFlash * 0.3, snareFlash * 0.2, 0.0);\n\n  gl_FragColor = vec4(col, 1.0);\n}\n```\n\n> [!NOTE]\n> Triggers are OR-accumulated between render frames and reset after each frame. This guarantees no beat is silently lost, even when the audio analysis rate (125Hz) exceeds the frame rate."
+        },
+        {
+          "type": "live-example",
+          "title": "Beat Pulses",
+          "sceneCode": "// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n\n  // Three circles for kick, snare, hat\n  vec2 c1 = vec2(0.25, 0.5);\n  vec2 c2 = vec2(0.5, 0.5);\n  vec2 c3 = vec2(0.75, 0.5);\n\n  float r1 = 0.05 + u_audioKick * 0.15;\n  float r2 = 0.05 + u_audioSnare * 0.12;\n  float r3 = 0.05 + u_audioHat * 0.08;\n\n  float d1 = smoothstep(r1, r1 - 0.01, length(uv - c1));\n  float d2 = smoothstep(r2, r2 - 0.01, length(uv - c2));\n  float d3 = smoothstep(r3, r3 - 0.01, length(uv - c3));\n\n  vec3 col = vec3(0.9, 0.3, 0.2) * d1\n           + vec3(0.9, 0.8, 0.1) * d2\n           + vec3(0.2, 0.6, 0.9) * d3;\n\n  // Flash on kick trigger\n  float flash = u_audioKickTrigger ? 0.15 : 0.0;\n  col += vec3(flash);\n\n  gl_FragColor = vec4(col, 1.0);\n}\n",
+          "sceneFile": "beat-demo.scene.js"
+        },
+        {
+          "type": "text",
+          "markdown": "## Related\n\n- [Audio Uniforms Overview](../)\n- [Volume](../volume/)\n- [Frequency Bands](../bands/)\n- [Spectral Analysis](../spectral/)"
+        }
+      ]
+    },
+    "shader-audio-spectral": {
+      "id": "shader-audio-spectral",
+      "title": "Spectral Analysis",
+      "description": "Shader uniforms for spectral brightness and flatness features.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Spectral Analysis\n\nTwo uniforms provide high-level spectral features — brightness and flatness. These capture the tonal character of the audio without requiring you to sample the FFT texture.\n\n## Uniform Reference\n\n| Uniform | Type | Range | Description |\n|---------|------|-------|-------------|\n| `u_audioBrightness` | `float` | 0–1 | Spectral centroid, normalized. Higher values indicate brighter, more treble-heavy sound |\n| `u_audioFlatness` | `float` | 0–1 | Spectral flatness. Higher values indicate noisier, white-noise-like sound; lower values indicate tonal, pitched sound |\n\n### What They Measure\n\n- **Brightness** (`u_audioBrightness`) is the normalized spectral centroid — the \"center of mass\" of the frequency spectrum. A deep bass drone has low brightness; a cymbal crash has high brightness.\n- **Flatness** (`u_audioFlatness`) measures how evenly energy is distributed across frequencies. A pure sine wave has very low flatness. White noise has high flatness.\n\n## Usage\n\n```glsl\n// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n\n  // Map brightness to hue (warm → cool)\n  float hue = 0.05 + u_audioBrightness * 0.55;\n  // Map flatness to saturation (tonal → noisy)\n  float sat = 0.3 + (1.0 - u_audioFlatness) * 0.6;\n\n  // HSV to RGB\n  vec3 col = vec3(abs(hue * 6.0 - 3.0) - 1.0,\n                  2.0 - abs(hue * 6.0 - 2.0),\n                  2.0 - abs(hue * 6.0 - 4.0));\n  col = clamp(col, 0.0, 1.0);\n  col = mix(vec3(1.0), col, sat);\n  col *= 0.55;\n\n  // Circle shape\n  float d = length(uv - vec2(0.5));\n  float circle = smoothstep(0.25, 0.24, d);\n  col *= circle;\n\n  gl_FragColor = vec4(col, 1.0);\n}\n```\n\n> [!NOTE]\n> Spectral features are derived from the same FFT data as [frequency bands](../bands/) and [FFT texture](../fft/), but provide a higher-level summary. Use them when you want to distinguish between tonal and noisy sections without sampling the full spectrum texture."
+        },
+        {
+          "type": "live-example",
+          "title": "Spectral Features",
+          "sceneCode": "// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n\n  float hue = 0.05 + u_audioBrightness * 0.55;\n  float sat = 0.3 + (1.0 - u_audioFlatness) * 0.6;\n\n  vec3 col = vec3(abs(hue * 6.0 - 3.0) - 1.0,\n                  2.0 - abs(hue * 6.0 - 2.0),\n                  2.0 - abs(hue * 6.0 - 4.0));\n  col = clamp(col, 0.0, 1.0);\n  col = mix(vec3(1.0), col, sat);\n  col *= 0.55;\n\n  float d = length(uv - vec2(0.5));\n  float circle = smoothstep(0.25, 0.24, d);\n  col *= circle;\n\n  gl_FragColor = vec4(col, 1.0);\n}\n",
+          "sceneFile": "spectral-demo.scene.js"
+        },
+        {
+          "type": "text",
+          "markdown": "## Related\n\n- [Audio Uniforms Overview](../)\n- [Frequency Bands](../bands/)\n- [FFT Texture](../fft/)\n- [Volume](../volume/)"
+        }
+      ]
+    },
+    "shader-audio-fft": {
+      "id": "shader-audio-fft",
+      "title": "FFT Texture",
+      "description": "Audio FFT spectrum as a sampler2D texture for per-bin frequency visualization in shaders.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# FFT Texture\n\nThe `u_audioFFT` uniform is a 1D texture containing the full FFT magnitude spectrum. It provides per-bin frequency data that you can sample at any position for fine-grained audio-reactive effects.\n\n## Uniform Reference\n\n| Uniform | Type | Description |\n|---------|------|-------------|\n| `u_audioFFT` | `sampler2D` | 1D texture (1024 × 1), LUMINANCE format, 0–255 per bin |\n\n### Texture Format\n\n- **Width**: 1024 pixels (1024 frequency bins, derived from an FFT size of 2048)\n- **Height**: 1 pixel\n- **Format**: LUMINANCE, UNSIGNED_BYTE (each texel holds a single 0–255 value in the `.r` channel)\n- **Filtering**: NEAREST (no interpolation between bins)\n- **Wrapping**: CLAMP_TO_EDGE\n- **Frequency mapping**: Texel at U coordinate `u` corresponds to frequency `u × (sampleRate / 2)`. At 44.1kHz, the full range is 0–22050Hz.\n\n### How to Sample\n\n```glsl\n// Sample a specific frequency position (0.0 = 0 Hz, 1.0 = Nyquist)\nfloat magnitude = texture2D(u_audioFFT, vec2(frequency_0to1, 0.5)).r;\n```\n\nThe `.r` channel contains the magnitude normalized to 0.0–1.0 (the original 0–255 byte is mapped by the GPU).\n\n## Usage — Spectrum Bar Visualizer\n\n```glsl\n// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n\n  // Sample FFT at horizontal position\n  float mag = texture2D(u_audioFFT, vec2(uv.x, 0.5)).r;\n\n  // Draw bar from bottom\n  float bar = step(uv.y, mag);\n\n  // Color gradient by frequency\n  vec3 col = mix(vec3(0.9, 0.2, 0.1), vec3(0.1, 0.4, 0.9), uv.x) * bar;\n\n  gl_FragColor = vec4(col, 1.0);\n}\n```\n\n## Usage — Logarithmic Spectrum\n\nFor a more musical visualization, remap the U coordinate logarithmically so each octave gets equal visual width.\n\n```glsl\n// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n\n  // Logarithmic frequency mapping\n  float logFreq = pow(uv.x, 3.0);\n  float mag = texture2D(u_audioFFT, vec2(logFreq, 0.5)).r;\n\n  float bar = smoothstep(uv.y - 0.01, uv.y, mag);\n\n  vec3 col = mix(vec3(0.8, 0.2, 0.1), vec3(0.1, 0.5, 1.0), uv.x) * bar;\n\n  gl_FragColor = vec4(col, 1.0);\n}\n```\n\n## Usage — Radial Spectrum\n\n```glsl\n// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  vec2 center = uv - 0.5;\n\n  float angle = atan(center.y, center.x) / 6.2832 + 0.5;\n  float mag = texture2D(u_audioFFT, vec2(angle, 0.5)).r;\n\n  float dist = length(center);\n  float ring = smoothstep(0.15 + mag * 0.2, 0.14 + mag * 0.2, dist)\n             * smoothstep(0.08, 0.09, dist);\n\n  vec3 col = mix(vec3(0.9, 0.3, 0.1), vec3(0.1, 0.3, 0.9), angle) * ring;\n\n  gl_FragColor = vec4(col, 1.0);\n}\n```\n\n> [!NOTE]\n> The FFT texture is only updated when audio is connected. When disconnected, the texture contains all zeros. For pre-processed frequency analysis, use the [frequency band uniforms](../bands/) instead — they provide five named bands without requiring texture sampling."
+        },
+        {
+          "type": "live-example",
+          "title": "FFT Spectrum",
+          "sceneCode": "// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n\n  // Logarithmic frequency mapping for musical distribution\n  float logFreq = pow(uv.x, 3.0);\n  float mag = texture2D(u_audioFFT, vec2(logFreq, 0.5)).r;\n\n  // Bar from bottom\n  float bar = smoothstep(uv.y - 0.01, uv.y, mag);\n\n  // Color gradient by frequency position\n  vec3 col = mix(vec3(0.8, 0.2, 0.1), vec3(0.1, 0.5, 1.0), uv.x) * bar;\n\n  gl_FragColor = vec4(col, 1.0);\n}\n",
+          "sceneFile": "fft-demo.scene.js"
+        },
+        {
+          "type": "text",
+          "markdown": "## Related\n\n- [Audio Uniforms Overview](../)\n- [Frequency Bands](../bands/)\n- [Waveform Texture](../waveform/)\n- [Spectral Analysis](../spectral/)"
+        }
+      ]
+    },
+    "shader-audio-waveform": {
+      "id": "shader-audio-waveform",
+      "title": "Waveform Texture",
+      "description": "Audio waveform as a sampler2D texture for oscilloscope-style visualizations in shaders.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Waveform Texture\n\nThe `u_audioWaveform` uniform is a 1D texture containing the raw time-domain audio waveform. Sample it for oscilloscope displays, wave-distortion effects, or any shader that reacts to the shape of the audio signal.\n\n## Uniform Reference\n\n| Uniform | Type | Description |\n|---------|------|-------------|\n| `u_audioWaveform` | `sampler2D` | 1D texture (2048 × 1), LUMINANCE format, encoded unsigned bytes |\n\n### Texture Format\n\n- **Width**: 2048 pixels (one pixel per audio sample)\n- **Height**: 1 pixel\n- **Format**: LUMINANCE, UNSIGNED_BYTE\n- **Filtering**: NEAREST\n- **Wrapping**: CLAMP_TO_EDGE\n- **Encoding**: Float PCM (–1..+1) is encoded as unsigned bytes via `byte = (sample × 0.5 + 0.5) × 255`. To recover the original signed value in GLSL:\n\n```glsl\nfloat sample = texture2D(u_audioWaveform, vec2(t, 0.5)).r * 2.0 - 1.0;\n```\n\n### How to Sample\n\n```glsl\n// Sample at a time position (0.0 = start, 1.0 = end of buffer)\nfloat raw = texture2D(u_audioWaveform, vec2(t, 0.5)).r;\nfloat sample = raw * 2.0 - 1.0; // Convert to -1..+1\n```\n\n## Usage — Oscilloscope\n\n```glsl\n// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n\n  // Sample waveform at x position\n  float raw = texture2D(u_audioWaveform, vec2(uv.x, 0.5)).r;\n  float sample = raw * 2.0 - 1.0;\n\n  // Map to screen Y\n  float waveY = 0.5 + sample * 0.4;\n\n  // Draw as a thin line\n  float line = smoothstep(0.008, 0.0, abs(uv.y - waveY));\n\n  vec3 col = vec3(0.3, 0.8, 0.4) * line;\n\n  gl_FragColor = vec4(col, 1.0);\n}\n```\n\n## Usage — Waveform-Distorted Pattern\n\nUse the waveform to distort UVs or modulate other effects.\n\n```glsl\n// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n\n  // Sample waveform for displacement\n  float raw = texture2D(u_audioWaveform, vec2(uv.x, 0.5)).r;\n  float displacement = (raw * 2.0 - 1.0) * 0.1;\n\n  // Apply displacement to create a wave-distorted stripe pattern\n  float pattern = sin((uv.y + displacement) * 40.0 + u_time * 2.0);\n  pattern = smoothstep(-0.1, 0.1, pattern);\n\n  vec3 col = mix(vec3(0.05), vec3(0.2, 0.5, 0.8), pattern);\n  col *= 0.5 + u_audioVolumeSmoothed * 0.5;\n\n  gl_FragColor = vec4(col, 1.0);\n}\n```\n\n> [!NOTE]\n> The waveform texture is only updated when audio is connected. When disconnected, the texture contains all `0.5` values (silence in the unsigned encoding). For volume-level analysis, use the [volume uniforms](../volume/) instead — they provide pre-processed loudness values without requiring texture sampling."
+        },
+        {
+          "type": "live-example",
+          "title": "Waveform Oscilloscope",
+          "sceneCode": "// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n\n  // Sample waveform at x position\n  float raw = texture2D(u_audioWaveform, vec2(uv.x, 0.5)).r;\n  float sample = raw * 2.0 - 1.0;\n\n  // Map to screen Y\n  float waveY = 0.5 + sample * 0.4;\n\n  // Draw as a thin line\n  float line = smoothstep(0.008, 0.0, abs(uv.y - waveY));\n\n  // Center line\n  float centerLine = smoothstep(0.002, 0.0, abs(uv.y - 0.5)) * 0.15;\n\n  vec3 col = vec3(0.3, 0.8, 0.4) * line + vec3(centerLine);\n\n  gl_FragColor = vec4(col, 1.0);\n}\n",
+          "sceneFile": "waveform-demo.scene.js"
+        },
+        {
+          "type": "text",
+          "markdown": "## Related\n\n- [Audio Uniforms Overview](../)\n- [FFT Texture](../fft/)\n- [Volume](../volume/)\n- [Frequency Bands](../bands/)"
+        }
+      ]
+    },
+    "shader-video-overview": {
+      "id": "shader-video-overview",
+      "title": "Video & CV Uniforms",
+      "description": "Complete reference for video and computer vision shader uniforms — video texture, face detection, hand tracking, pose estimation, and body segmentation.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Video & CV Uniforms\n\nViji injects video and computer vision uniforms into your shader when a video stream is connected and CV features are enabled. These uniforms are updated every frame from the CV worker's real-time analysis.\n\n## Uniform Overview\n\n| Category | Uniforms | Page |\n|----------|----------|------|\n| Video | `u_video`, `u_videoResolution`, `u_videoFrameRate` | [Video Basics](basics/) |\n| Face bounds | `u_faceCount`, `u_face0Bounds`, `u_face0Center`, `u_face0Confidence` | [Face Detection](face-detection/) |\n| Face expressions | `u_face0Neutral` … `u_face0Fearful` (7 floats) | [Emotion Uniforms](emotion-detection/) |\n| Face blendshapes | `u_face0BrowDownLeft` … `u_face0TongueOut` (52 floats) | [Emotion Uniforms](emotion-detection/) |\n| Head pose | `u_face0HeadPose` | [Face Mesh Uniforms](face-mesh/) |\n| Hands | `u_handCount`, `u_leftHandPalm`, `u_rightHandPalm`, confidence, bounds, 7 gestures per hand | [Hand Tracking](hand-tracking/) |\n| Pose | `u_poseDetected`, `u_poseConfidence`, 13 landmark positions | [Pose Detection](pose-detection/) |\n| Segmentation | `u_segmentationMask`, `u_segmentationRes` | [Body Segmentation](body-segmentation/) |\n\n**Total**: 3 video uniforms + 62 face floats + 2 face vecs + 1 face int + 22 hand floats + 2 hand vec3s + 2 hand vec4s + 1 hand int + 1 pose bool + 14 pose floats + 1 segmentation sampler2D + 1 segmentation vec2.\n\n## Basic Usage\n\n```glsl\n// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n\n  // Sample video texture\n  vec4 videoColor = texture2D(u_video, uv);\n\n  // React to face position\n  float faceDist = length(uv - u_face0Center);\n  float highlight = smoothstep(0.3, 0.0, faceDist) * float(u_faceCount > 0);\n\n  // Mix video with face-reactive effect\n  vec3 col = mix(videoColor.rgb, vec3(0.3, 0.8, 0.8), highlight * 0.4);\n\n  gl_FragColor = vec4(col, 1.0);\n}\n```\n\n> [!NOTE]\n> All video and CV uniforms default to `0` (or `false` for booleans, `vec(0)` for vectors) when no video is connected or CV features are disabled. Textures (`u_video`, `u_segmentationMask`) sample as black. Your shader will still compile and run with these defaults.\n\n| Feature | Relative Cost | Notes |\n|---------|--------------|-------|\n| Face Detection | Low | Bounding box + basic landmarks only |\n| Face Mesh | Medium-High | 468 facial landmarks |\n| Emotion Detection | High | 7 expressions + 52 blendshape coefficients |\n| Hand Tracking | Medium | Up to 2 hands, 21 landmarks each |\n| Pose Detection | Medium | 33 body landmarks |\n| Body Segmentation | High | Per-pixel mask, large tensor output |\n\n> [!WARNING]\n> **WebGL Context Limits:** Each CV feature requires its own WebGL context for ML inference. Browsers typically allow 8-16 active WebGL contexts. Enabling too many CV features simultaneously can cause context eviction, potentially breaking the scene's own rendering. Use only the CV features you need."
+        },
+        {
+          "type": "live-example",
+          "title": "Video & CV Shader",
+          "sceneCode": "// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n\n  vec4 videoColor = texture2D(u_video, uv);\n\n  float faceDist = length(uv - u_face0Center);\n  float highlight = smoothstep(0.3, 0.0, faceDist) * float(u_faceCount > 0);\n\n  vec3 col = mix(videoColor.rgb, vec3(0.3, 0.8, 0.8), highlight * 0.4);\n\n  gl_FragColor = vec4(col, 1.0);\n}\n",
+          "sceneFile": "video-overview.scene.js",
+          "capabilities": {
+            "video": true
+          }
+        },
+        {
+          "type": "text",
+          "markdown": "## Related\n\n- [Video Basics](basics/)\n- [Face Detection](face-detection/)\n- [Face Mesh Uniforms](face-mesh/)\n- [Emotion Uniforms](emotion-detection/)\n- [Hand Tracking](hand-tracking/)\n- [Pose Detection](pose-detection/)\n- [Body Segmentation](body-segmentation/)\n- [Native Video & CV](/native/video)\n- [P5 Video & CV](/p5/video)"
+        }
+      ]
+    },
+    "shader-video-basics": {
+      "id": "shader-video-basics",
+      "title": "Video Basics",
+      "description": "Shader uniforms for video frame texture, resolution, and frame rate.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Video Basics\n\nThree uniforms provide access to the video stream in shaders — the video frame as a texture, its resolution, and the frame rate.\n\n## Uniform Reference\n\n| Uniform | Type | Description |\n|---------|------|-------------|\n| `u_video` | `sampler2D` | Current video frame as a texture |\n| `u_videoResolution` | `vec2` | Video frame width and height in pixels |\n| `u_videoFrameRate` | `float` | Video frame rate in frames per second |\n\n### Sampling the Video Texture\n\nUse `texture2D(u_video, uv)` to sample the video frame. The texture coordinates are 0-1, matching the standard UV space:\n\n```glsl\nvec2 uv = gl_FragCoord.xy / u_resolution;\nvec4 videoColor = texture2D(u_video, uv);\n```\n\nWhen no video is connected, `u_video` samples as black (`vec4(0.0)`), `u_videoResolution` is `vec2(0.0)`, and `u_videoFrameRate` is `0.0`.\n\n## Usage — Video Background\n\n```glsl\n// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  vec4 video = texture2D(u_video, uv);\n\n  gl_FragColor = video;\n}\n```\n\n## Usage — Video with Effect\n\n```glsl\n// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  vec4 video = texture2D(u_video, uv);\n\n  float gray = dot(video.rgb, vec3(0.299, 0.587, 0.114));\n  float scanline = 0.9 + 0.1 * sin(uv.y * u_resolution.y * 3.14159);\n\n  vec3 col = vec3(gray) * scanline;\n  gl_FragColor = vec4(col, 1.0);\n}\n```\n\n> [!NOTE]\n> The video texture is updated every frame when a video stream is connected. When disconnected, the texture samples as black. Your shader will still compile and run — the uniforms simply hold their default values."
+        },
+        {
+          "type": "live-example",
+          "title": "Video Shader",
+          "sceneCode": "// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  vec4 video = texture2D(u_video, uv);\n\n  float gray = dot(video.rgb, vec3(0.299, 0.587, 0.114));\n  float scanline = 0.9 + 0.1 * sin(uv.y * u_resolution.y * 3.14159);\n\n  vec3 col = vec3(gray) * scanline;\n  gl_FragColor = vec4(col, 1.0);\n}\n",
+          "sceneFile": "basics-demo.scene.js",
+          "capabilities": {
+            "video": true
+          }
+        },
+        {
+          "type": "text",
+          "markdown": "## Related\n\n- [Video & CV Uniforms Overview](../)\n- [Face Detection](../face-detection/)\n- [Native Video Basics](/native/video/basics)\n- [P5 Video Basics](/p5/video/basics)"
+        }
+      ]
+    },
+    "shader-cv-face": {
+      "id": "shader-cv-face",
+      "title": "Face Detection",
+      "description": "Shader uniforms for face detection — face count, bounding box, center, and confidence.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Face Detection\n\nFace detection uniforms provide the first detected face's position, size, and confidence. The host scene must enable face detection with `viji.video.cv.enableFaceDetection(true)` for these uniforms to receive data.\n\n## Uniform Reference\n\n| Uniform | Type | Range | Description |\n|---------|------|-------|-------------|\n| `u_faceCount` | `int` | 0-1 | Number of detected faces |\n| `u_face0Bounds` | `vec4` | 0-1 | First face bounding box `(x, y, width, height)` |\n| `u_face0Center` | `vec2` | 0-1 | First face bounding box center `(x, y)` |\n| `u_face0Confidence` | `float` | 0-1 | Detection confidence |\n\nAll coordinates are normalized 0-1, matching the shader UV space.\n\n## Usage\n\n```glsl\n// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  vec4 video = texture2D(u_video, uv);\n\n  float faceDist = length(uv - u_face0Center);\n  float glow = smoothstep(0.3, 0.0, faceDist) * float(u_faceCount > 0);\n\n  vec3 col = video.rgb + vec3(0.0, glow * 0.5, glow * 0.5);\n  gl_FragColor = vec4(col, 1.0);\n}\n```\n\n**Cost: Low** — face detection is the lightest CV feature, providing only bounding box data.\n\n> [!WARNING]\n> **WebGL Context Limits:** Each CV feature requires its own WebGL context for ML inference. Browsers typically allow 8-16 active WebGL contexts. Enabling too many CV features simultaneously can cause context eviction, potentially breaking the scene's own rendering. Use only the CV features you need.\n\nWhen face detection is disabled or no faces are visible, `u_faceCount` is `0` and all face uniforms are `0.0` / `vec(0.0)`."
+        },
+        {
+          "type": "live-example",
+          "title": "Face Detection Shader",
+          "sceneCode": "// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  vec4 video = texture2D(u_video, uv);\n\n  float faceDist = length(uv - u_face0Center);\n  float glow = smoothstep(0.25, 0.0, faceDist) * float(u_faceCount > 0);\n\n  vec2 bMin = u_face0Bounds.xy;\n  vec2 bMax = u_face0Bounds.xy + u_face0Bounds.zw;\n  float inBox = step(bMin.x, uv.x) * step(uv.x, bMax.x) * step(bMin.y, uv.y) * step(uv.y, bMax.y);\n  float border = inBox * (1.0 - step(bMin.x + 0.003, uv.x) * step(uv.x, bMax.x - 0.003)\n                               * step(bMin.y + 0.003, uv.y) * step(uv.y, bMax.y - 0.003));\n  border *= float(u_faceCount > 0);\n\n  vec3 col = video.rgb + vec3(0.0, glow * 0.4, glow * 0.4) + vec3(0.3, 0.8, 0.8) * border;\n  gl_FragColor = vec4(col, 1.0);\n}\n",
+          "sceneFile": "face-detection-demo.scene.js",
+          "capabilities": {
+            "video": true
+          }
+        },
+        {
+          "type": "text",
+          "markdown": "## Related\n\n- [Video & CV Uniforms Overview](../)\n- [Face Mesh Uniforms](../face-mesh/)\n- [Emotion Uniforms](../emotion-detection/)\n- [Native Face Detection](/native/video/face-detection)\n- [P5 Face Detection](/p5/video/face-detection)"
+        }
+      ]
+    },
+    "shader-cv-face-mesh": {
+      "id": "shader-cv-face-mesh",
+      "title": "Face Mesh Uniforms",
+      "description": "Shader uniform for head pose estimation — pitch, yaw, and roll from face mesh landmarks.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Face Mesh Uniforms\n\nFace mesh provides head pose estimation as a single `vec3` uniform. The host scene must enable face mesh with `viji.video.cv.enableFaceMesh(true)` for this uniform to receive data.\n\n> [!NOTE]\n> Individual face mesh landmark positions (468 points) are not exposed as shader uniforms — only the computed head pose is available. For full landmark access, use the [Native](../../../native/video/face-mesh/) or [P5](../../../p5/video/face-mesh/) renderer.\n\n## Uniform Reference\n\n| Uniform | Type | Description |\n|---------|------|-------------|\n| `u_face0HeadPose` | `vec3` | Head rotation `(pitch, yaw, roll)` in **degrees** |\n\n### Head Pose Values\n\n| Component | Range | Description |\n|-----------|-------|-------------|\n| `u_face0HeadPose.x` (pitch) | -90 to 90 | Looking up (negative) or down (positive) |\n| `u_face0HeadPose.y` (yaw) | -90 to 90 | Looking left (negative) or right (positive) |\n| `u_face0HeadPose.z` (roll) | -180 to 180 | Tilting head left (negative) or right (positive) |\n\n## Usage\n\n```glsl\n// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  vec4 video = texture2D(u_video, uv);\n\n  float yaw = u_face0HeadPose.y / 90.0;\n  float pitch = u_face0HeadPose.x / 90.0;\n\n  vec2 offset = vec2(yaw, pitch) * 0.05;\n  vec4 shifted = texture2D(u_video, uv + offset);\n\n  vec3 col = mix(video.rgb, shifted.rgb, 0.5);\n  gl_FragColor = vec4(col, 1.0);\n}\n```\n\n**Cost: Medium-High** — face mesh processes 468 landmarks per face and computes head pose from the geometry.\n\n> [!WARNING]\n> **WebGL Context Limits:** Each CV feature requires its own WebGL context for ML inference. Browsers typically allow 8-16 active WebGL contexts. Enabling too many CV features simultaneously can cause context eviction, potentially breaking the scene's own rendering. Use only the CV features you need.\n\nWhen face mesh is disabled, `u_face0HeadPose` is `vec3(0.0)`."
+        },
+        {
+          "type": "live-example",
+          "title": "Head Pose Shader",
+          "sceneCode": "// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n\n  float yaw = u_face0HeadPose.y / 90.0;\n  float pitch = u_face0HeadPose.x / 90.0;\n\n  vec2 offset = vec2(yaw, pitch) * 0.05;\n  vec4 video = texture2D(u_video, uv);\n  vec4 shifted = texture2D(u_video, uv + offset);\n\n  float hasFace = float(u_faceCount > 0);\n  vec3 col = mix(video.rgb, mix(video.rgb, shifted.rgb, 0.5), hasFace);\n\n  gl_FragColor = vec4(col, 1.0);\n}\n",
+          "sceneFile": "face-mesh-demo.scene.js",
+          "capabilities": {
+            "video": true
+          }
+        },
+        {
+          "type": "text",
+          "markdown": "## Related\n\n- [Video & CV Uniforms Overview](../)\n- [Face Detection](../face-detection/)\n- [Emotion Uniforms](../emotion-detection/)\n- [Native Face Mesh](/native/video/face-mesh)\n- [P5 Face Mesh](/p5/video/face-mesh)"
+        }
+      ]
+    },
+    "shader-cv-emotion": {
+      "id": "shader-cv-emotion",
+      "title": "Emotion Uniforms",
+      "description": "Shader uniforms for 7 facial expression scores and 52 ARKit-compatible blendshape coefficients.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Emotion Uniforms\n\nEmotion detection provides 7 expression uniforms and 52 blendshape uniforms for the first detected face. The host scene must enable emotion detection with `viji.video.cv.enableEmotionDetection(true)` for these uniforms to receive data.\n\n## Uniform Reference — Expressions\n\n| Uniform | Type | Range | Description |\n|---------|------|-------|-------------|\n| `u_face0Neutral` | `float` | 0-1 | Neutral expression |\n| `u_face0Happy` | `float` | 0-1 | Happy / smiling |\n| `u_face0Sad` | `float` | 0-1 | Sad |\n| `u_face0Angry` | `float` | 0-1 | Angry |\n| `u_face0Surprised` | `float` | 0-1 | Surprised |\n| `u_face0Disgusted` | `float` | 0-1 | Disgusted |\n| `u_face0Fearful` | `float` | 0-1 | Fearful |\n\n## Uniform Reference — Blendshapes (52 coefficients)\n\nAll blendshapes are `float` uniforms ranging from 0 to 1. They follow the ARKit naming convention with a `u_face0` prefix:\n\n**Brow:** `u_face0BrowDownLeft`, `u_face0BrowDownRight`, `u_face0BrowInnerUp`, `u_face0BrowOuterUpLeft`, `u_face0BrowOuterUpRight`\n\n**Cheek:** `u_face0CheekPuff`, `u_face0CheekSquintLeft`, `u_face0CheekSquintRight`\n\n**Eye:** `u_face0EyeBlinkLeft`, `u_face0EyeBlinkRight`, `u_face0EyeLookDownLeft`, `u_face0EyeLookDownRight`, `u_face0EyeLookInLeft`, `u_face0EyeLookInRight`, `u_face0EyeLookOutLeft`, `u_face0EyeLookOutRight`, `u_face0EyeLookUpLeft`, `u_face0EyeLookUpRight`, `u_face0EyeSquintLeft`, `u_face0EyeSquintRight`, `u_face0EyeWideLeft`, `u_face0EyeWideRight`\n\n**Jaw:** `u_face0JawForward`, `u_face0JawLeft`, `u_face0JawOpen`, `u_face0JawRight`\n\n**Mouth:** `u_face0MouthClose`, `u_face0MouthDimpleLeft`, `u_face0MouthDimpleRight`, `u_face0MouthFrownLeft`, `u_face0MouthFrownRight`, `u_face0MouthFunnel`, `u_face0MouthLeft`, `u_face0MouthLowerDownLeft`, `u_face0MouthLowerDownRight`, `u_face0MouthPressLeft`, `u_face0MouthPressRight`, `u_face0MouthPucker`, `u_face0MouthRight`, `u_face0MouthRollLower`, `u_face0MouthRollUpper`, `u_face0MouthShrugLower`, `u_face0MouthShrugUpper`, `u_face0MouthSmileLeft`, `u_face0MouthSmileRight`, `u_face0MouthStretchLeft`, `u_face0MouthStretchRight`, `u_face0MouthUpperUpLeft`, `u_face0MouthUpperUpRight`\n\n**Nose & Tongue:** `u_face0NoseSneerLeft`, `u_face0NoseSneerRight`, `u_face0TongueOut`\n\n## Usage\n\n```glsl\n// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  vec4 video = texture2D(u_video, uv);\n\n  float happy = u_face0Happy;\n  float surprised = u_face0Surprised;\n\n  vec3 warmShift = vec3(happy * 0.3, happy * 0.2, 0.0);\n  vec3 coolShift = vec3(0.0, 0.0, surprised * 0.4);\n\n  vec3 col = video.rgb + warmShift + coolShift;\n  gl_FragColor = vec4(col, 1.0);\n}\n```\n\n**Cost: High** — emotion detection computes 7 expressions and 52 blendshape coefficients per face.\n\n> [!WARNING]\n> **WebGL Context Limits:** Each CV feature requires its own WebGL context for ML inference. Browsers typically allow 8-16 active WebGL contexts. Enabling too many CV features simultaneously can cause context eviction, potentially breaking the scene's own rendering. Use only the CV features you need.\n\nWhen emotion detection is disabled, all expression and blendshape uniforms are `0.0`."
+        },
+        {
+          "type": "live-example",
+          "title": "Emotion-Reactive Shader",
+          "sceneCode": "// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  vec4 video = texture2D(u_video, uv);\n\n  float happy = u_face0Happy;\n  float sad = u_face0Sad;\n  float surprised = u_face0Surprised;\n  float angry = u_face0Angry;\n\n  vec3 warmShift = vec3(happy * 0.3, happy * 0.15, 0.0);\n  vec3 coolShift = vec3(0.0, 0.0, sad * 0.3);\n  vec3 alertShift = vec3(surprised * 0.2, surprised * 0.2, 0.0);\n  vec3 redShift = vec3(angry * 0.3, 0.0, 0.0);\n\n  vec3 col = video.rgb + warmShift + coolShift + alertShift + redShift;\n  gl_FragColor = vec4(clamp(col, 0.0, 1.0), 1.0);\n}\n",
+          "sceneFile": "emotion-detection-demo.scene.js",
+          "capabilities": {
+            "video": true
+          }
+        },
+        {
+          "type": "text",
+          "markdown": "## Related\n\n- [Video & CV Uniforms Overview](../)\n- [Face Detection](../face-detection/)\n- [Face Mesh Uniforms](../face-mesh/)\n- [Native Emotion Detection](/native/video/emotion-detection)\n- [P5 Emotion Detection](/p5/video/emotion-detection)"
+        }
+      ]
+    },
+    "shader-cv-hands": {
+      "id": "shader-cv-hands",
+      "title": "Hand Tracking",
+      "description": "Shader uniforms for hand tracking — palm position, confidence, bounding boxes, and 7 ML gesture scores per hand.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Hand Tracking\n\nHand tracking uniforms provide palm positions, confidence, bounding boxes, and 7 ML gesture confidence scores for up to two hands. The host scene must enable hand tracking with `viji.video.cv.enableHandTracking(true)` for these uniforms to receive data.\n\n## Uniform Reference\n\n### Detection\n\n| Uniform | Type | Description |\n|---------|------|-------------|\n| `u_handCount` | `int` | Number of detected hands (0-2) |\n\n### Per-Hand Data\n\n| Uniform | Type | Description |\n|---------|------|-------------|\n| `u_leftHandPalm` / `u_rightHandPalm` | `vec3` | Palm position (x, y, z) normalized 0-1 |\n| `u_leftHandConfidence` / `u_rightHandConfidence` | `float` | Detection confidence (0-1) |\n| `u_leftHandBounds` / `u_rightHandBounds` | `vec4` | Bounding box `(x, y, width, height)` normalized 0-1 |\n\n### Gesture Uniforms (per hand)\n\nEach gesture is a `float` from 0 to 1, classified by MediaPipe's GestureRecognizer ML model.\n\n| Left | Right | Gesture |\n|------|-------|---------|\n| `u_leftHandFist` | `u_rightHandFist` | Closed fist |\n| `u_leftHandOpen` | `u_rightHandOpen` | Open palm |\n| `u_leftHandPeace` | `u_rightHandPeace` | Victory / peace sign |\n| `u_leftHandThumbsUp` | `u_rightHandThumbsUp` | Thumbs up |\n| `u_leftHandThumbsDown` | `u_rightHandThumbsDown` | Thumbs down |\n| `u_leftHandPointing` | `u_rightHandPointing` | Pointing up |\n| `u_leftHandILoveYou` | `u_rightHandILoveYou` | ASL I-love-you sign |\n\n> [!NOTE]\n> Individual hand landmark positions (21 points) are not exposed as shader uniforms — only palm position, bounds, confidence, and gestures are available. For full landmark access, use the [Native](../../../native/video/hand-tracking/) or [P5](../../../p5/video/hand-tracking/) renderer.\n\n## Usage\n\n```glsl\n// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  vec4 video = texture2D(u_video, uv);\n\n  float leftDist = length(uv - u_leftHandPalm.xy);\n  float rightDist = length(uv - u_rightHandPalm.xy);\n\n  float leftGlow = smoothstep(0.15, 0.0, leftDist) * u_leftHandConfidence;\n  float rightGlow = smoothstep(0.15, 0.0, rightDist) * u_rightHandConfidence;\n\n  float fist = max(u_leftHandFist, u_rightHandFist);\n  float peace = max(u_leftHandPeace, u_rightHandPeace);\n\n  vec3 col = video.rgb;\n  col += vec3(1.0, 0.6, 1.0) * leftGlow;\n  col += vec3(0.3, 0.6, 1.0) * rightGlow;\n  col = mix(col, col * vec3(1.0, 0.3, 0.3), fist * 0.5);\n  col = mix(col, col * vec3(0.3, 1.0, 0.3), peace * 0.5);\n\n  gl_FragColor = vec4(col, 1.0);\n}\n```\n\n**Cost: Medium** — hand tracking processes up to 2 hands with 21 landmarks each, plus ML gesture classification.\n\n> [!WARNING]\n> **WebGL Context Limits:** Each CV feature requires its own WebGL context for ML inference. Browsers typically allow 8-16 active WebGL contexts. Enabling too many CV features simultaneously can cause context eviction, potentially breaking the scene's own rendering. Use only the CV features you need.\n\nWhen hand tracking is disabled or no hands are visible, `u_handCount` is `0` and all hand uniforms are `0.0` / `vec(0.0)`."
+        },
+        {
+          "type": "live-example",
+          "title": "Hand Tracking Shader",
+          "sceneCode": "// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  vec4 video = texture2D(u_video, uv);\n\n  float leftDist = length(uv - u_leftHandPalm.xy);\n  float rightDist = length(uv - u_rightHandPalm.xy);\n\n  float leftGlow = smoothstep(0.15, 0.0, leftDist) * u_leftHandConfidence;\n  float rightGlow = smoothstep(0.15, 0.0, rightDist) * u_rightHandConfidence;\n\n  vec3 col = video.rgb;\n  col += vec3(1.0, 0.6, 1.0) * leftGlow;\n  col += vec3(0.3, 0.6, 1.0) * rightGlow;\n\n  gl_FragColor = vec4(col, 1.0);\n}\n",
+          "sceneFile": "hand-tracking-demo.scene.js",
+          "capabilities": {
+            "video": true
+          }
+        },
+        {
+          "type": "text",
+          "markdown": "## Related\n\n- [Video & CV Uniforms Overview](../)\n- [Face Detection](../face-detection/)\n- [Pose Detection](../pose-detection/)\n- [Native Hand Tracking](/native/video/hand-tracking)\n- [P5 Hand Tracking](/p5/video/hand-tracking)"
+        }
+      ]
+    },
+    "shader-cv-pose": {
+      "id": "shader-cv-pose",
+      "title": "Pose Detection",
+      "description": "Shader uniforms for body pose — detection state, confidence, and 13 key body landmark positions.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Pose Detection\n\nPose detection uniforms provide the detection state, confidence, and 13 key body landmark positions. The host scene must enable pose detection with `viji.video.cv.enablePoseDetection(true)` for these uniforms to receive data.\n\n## Uniform Reference\n\n### Detection State\n\n| Uniform | Type | Description |\n|---------|------|-------------|\n| `u_poseDetected` | `bool` | `true` when a body pose is detected |\n| `u_poseConfidence` | `float` | Average landmark visibility (0-1) |\n\n### Key Landmark Positions\n\nAll landmark positions are `vec2` with normalized 0-1 coordinates.\n\n| Uniform | BlazePose Index | Landmark |\n|---------|----------------|----------|\n| `u_nosePosition` | 0 | Nose |\n| `u_leftShoulderPosition` | 11 | Left shoulder |\n| `u_rightShoulderPosition` | 12 | Right shoulder |\n| `u_leftElbowPosition` | 13 | Left elbow |\n| `u_rightElbowPosition` | 14 | Right elbow |\n| `u_leftWristPosition` | 15 | Left wrist |\n| `u_rightWristPosition` | 16 | Right wrist |\n| `u_leftHipPosition` | 23 | Left hip |\n| `u_rightHipPosition` | 24 | Right hip |\n| `u_leftKneePosition` | 25 | Left knee |\n| `u_rightKneePosition` | 26 | Right knee |\n| `u_leftAnklePosition` | 27 | Left ankle |\n| `u_rightAnklePosition` | 28 | Right ankle |\n\n> [!NOTE]\n> Only 13 key landmarks are exposed as shader uniforms. For the full 33-point BlazePose landmark set, use the [Native](../../../native/video/pose-detection/) or [P5](../../../p5/video/pose-detection/) renderer.\n\n## Usage\n\n```glsl\n// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  vec4 video = texture2D(u_video, uv);\n\n  float noseDist = length(uv - u_nosePosition);\n  float leftWristDist = length(uv - u_leftWristPosition);\n  float rightWristDist = length(uv - u_rightWristPosition);\n\n  float noseGlow = smoothstep(0.05, 0.0, noseDist);\n  float leftGlow = smoothstep(0.05, 0.0, leftWristDist);\n  float rightGlow = smoothstep(0.05, 0.0, rightWristDist);\n\n  float active = u_poseDetected ? 1.0 : 0.0;\n\n  vec3 col = video.rgb;\n  col += vec3(1.0, 0.4, 0.4) * noseGlow * active;\n  col += vec3(1.0, 0.6, 1.0) * leftGlow * active;\n  col += vec3(0.3, 0.6, 1.0) * rightGlow * active;\n\n  gl_FragColor = vec4(col, 1.0);\n}\n```\n\n**Cost: Medium** — pose detection processes 33 body landmarks with visibility scores.\n\n> [!WARNING]\n> **WebGL Context Limits:** Each CV feature requires its own WebGL context for ML inference. Browsers typically allow 8-16 active WebGL contexts. Enabling too many CV features simultaneously can cause context eviction, potentially breaking the scene's own rendering. Use only the CV features you need.\n\nWhen pose detection is disabled or no body is visible, `u_poseDetected` is `false`, `u_poseConfidence` is `0.0`, and all landmark positions are `vec2(0.0)`."
+        },
+        {
+          "type": "live-example",
+          "title": "Pose Detection Shader",
+          "sceneCode": "// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  vec4 video = texture2D(u_video, uv);\n\n  float active = u_poseDetected ? 1.0 : 0.0;\n\n  float noseDist = length(uv - u_nosePosition);\n  float lWrist = length(uv - u_leftWristPosition);\n  float rWrist = length(uv - u_rightWristPosition);\n  float lShoulder = length(uv - u_leftShoulderPosition);\n  float rShoulder = length(uv - u_rightShoulderPosition);\n\n  float glow = smoothstep(0.04, 0.0, noseDist)\n             + smoothstep(0.04, 0.0, lWrist)\n             + smoothstep(0.04, 0.0, rWrist)\n             + smoothstep(0.03, 0.0, lShoulder)\n             + smoothstep(0.03, 0.0, rShoulder);\n\n  vec3 col = video.rgb + vec3(1.0, 0.4, 0.4) * glow * active * 0.6;\n  gl_FragColor = vec4(col, 1.0);\n}\n",
+          "sceneFile": "pose-detection-demo.scene.js",
+          "capabilities": {
+            "video": true
+          }
+        },
+        {
+          "type": "text",
+          "markdown": "## Related\n\n- [Video & CV Uniforms Overview](../)\n- [Hand Tracking](../hand-tracking/)\n- [Body Segmentation](../body-segmentation/)\n- [Native Pose Detection](/native/video/pose-detection)\n- [P5 Pose Detection](/p5/video/pose-detection)"
+        }
+      ]
+    },
+    "shader-cv-segmentation": {
+      "id": "shader-cv-segmentation",
+      "title": "Body Segmentation",
+      "description": "Shader uniforms for per-pixel person/background segmentation mask texture.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Body Segmentation\n\nBody segmentation provides a texture mask that separates the person from the background. The host scene must enable body segmentation with `viji.video.cv.enableBodySegmentation(true)` for these uniforms to receive data.\n\n## Uniform Reference\n\n| Uniform | Type | Description |\n|---------|------|-------------|\n| `u_segmentationMask` | `sampler2D` | Body mask texture (LUMINANCE format: 0 = background, 1 = person) |\n| `u_segmentationRes` | `vec2` | Mask resolution in pixels |\n\n### Sampling the Mask\n\nUse `texture2D(u_segmentationMask, uv)` to sample the mask. The red channel contains the mask value (0.0 for background, 1.0 for person):\n\n```glsl\nfloat isPerson = texture2D(u_segmentationMask, uv).r;\n```\n\nThe mask resolution may differ from the video resolution — it reflects the ML model's output dimensions. Use `u_segmentationRes` if you need the mask's pixel dimensions.\n\n## Usage — Background Replacement\n\n```glsl\n// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  vec4 video = texture2D(u_video, uv);\n\n  float mask = texture2D(u_segmentationMask, uv).r;\n\n  vec3 bgColor = vec3(0.1, 0.1, 0.2) + 0.1 * sin(uv.x * 10.0 + u_time);\n  vec3 col = mix(bgColor, video.rgb, mask);\n\n  gl_FragColor = vec4(col, 1.0);\n}\n```\n\n## Usage — Edge Glow\n\n```glsl\n// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  vec4 video = texture2D(u_video, uv);\n\n  float mask = texture2D(u_segmentationMask, uv).r;\n  vec2 px = 1.0 / u_resolution;\n  float maskL = texture2D(u_segmentationMask, uv + vec2(-px.x, 0.0)).r;\n  float maskR = texture2D(u_segmentationMask, uv + vec2(px.x, 0.0)).r;\n  float maskU = texture2D(u_segmentationMask, uv + vec2(0.0, -px.y)).r;\n  float maskD = texture2D(u_segmentationMask, uv + vec2(0.0, px.y)).r;\n  float edge = abs(maskL - maskR) + abs(maskU - maskD);\n\n  vec3 col = video.rgb + vec3(0.3, 0.8, 0.8) * edge * 2.0;\n  gl_FragColor = vec4(col, 1.0);\n}\n```\n\n**Cost: High** — body segmentation produces a per-pixel mask with a large tensor output.\n\n> [!WARNING]\n> **WebGL Context Limits:** Each CV feature requires its own WebGL context for ML inference. Browsers typically allow 8-16 active WebGL contexts. Enabling too many CV features simultaneously can cause context eviction, potentially breaking the scene's own rendering. Use only the CV features you need.\n\nWhen body segmentation is disabled, `u_segmentationMask` samples as black (0.0) and `u_segmentationRes` is `vec2(0.0)`."
+        },
+        {
+          "type": "live-example",
+          "title": "Body Segmentation Shader",
+          "sceneCode": "// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  vec4 video = texture2D(u_video, uv);\n\n  float mask = texture2D(u_segmentationMask, uv).r;\n\n  vec3 bgColor = vec3(0.05, 0.05, 0.15) + 0.05 * sin(uv.x * 8.0 + u_time * 2.0);\n  vec3 col = mix(bgColor, video.rgb, mask);\n\n  vec2 px = 1.0 / u_resolution;\n  float maskL = texture2D(u_segmentationMask, uv + vec2(-px.x, 0.0)).r;\n  float maskR = texture2D(u_segmentationMask, uv + vec2(px.x, 0.0)).r;\n  float maskU = texture2D(u_segmentationMask, uv + vec2(0.0, -px.y)).r;\n  float maskD = texture2D(u_segmentationMask, uv + vec2(0.0, px.y)).r;\n  float edge = abs(maskL - maskR) + abs(maskU - maskD);\n\n  col += vec3(0.3, 0.8, 0.8) * edge * 2.0;\n\n  gl_FragColor = vec4(col, 1.0);\n}\n",
+          "sceneFile": "body-segmentation-demo.scene.js",
+          "capabilities": {
+            "video": true
+          }
+        },
+        {
+          "type": "text",
+          "markdown": "## Related\n\n- [Video & CV Uniforms Overview](../)\n- [Pose Detection](../pose-detection/)\n- [Video Basics](../basics/)\n- [Native Body Segmentation](/native/video/body-segmentation)\n- [P5 Body Segmentation](/p5/video/body-segmentation)"
+        }
+      ]
+    },
     "shader-pointer": {
       "id": "shader-pointer",
       "title": "Pointer Uniforms",
@@ -2082,7 +3563,10 @@ export const docsApi = {
           "type": "live-example",
           "title": "Pointer — Click Flash & Glow",
           "sceneCode": "// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  vec2 pNorm = u_pointer / u_resolution;\n\n  vec3 col = vec3(0.04, 0.04, 0.08);\n\n  float dist = length(uv - pNorm);\n  float glow = 0.015 / (dist + 0.01);\n  vec3 glowColor = u_pointerDown\n    ? vec3(0.3, 0.7, 1.0)\n    : vec3(0.5, 0.5, 0.6);\n  col += glow * glowColor;\n\n  float flash = u_pointerWasPressed ? 1.0 : 0.0;\n  col += vec3(0.2, 0.5, 0.8) * flash * smoothstep(0.3, 0.0, dist);\n\n  float release = u_pointerWasReleased ? 1.0 : 0.0;\n  float ring = smoothstep(0.002, 0.0, abs(dist - 0.15)) * release;\n  col += vec3(0.8, 0.4, 0.2) * ring;\n\n  if (!u_pointerInCanvas) {\n    col *= 0.5;\n  }\n\n  gl_FragColor = vec4(col, 1.0);\n}\n",
-          "sceneFile": "pointer-shader-demo.scene.glsl"
+          "sceneFile": "pointer-shader-demo.scene.glsl",
+          "capabilities": {
+            "interaction": true
+          }
         },
         {
           "type": "text",
@@ -2103,7 +3587,10 @@ export const docsApi = {
           "type": "live-example",
           "title": "Mouse — Glow & Button States",
           "sceneCode": "// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  vec2 mNorm = u_mouse / u_resolution;\n\n  vec3 col = vec3(0.04, 0.04, 0.08);\n\n  float dist = length(uv - mNorm);\n  float glow = 0.012 / (dist + 0.01);\n\n  vec3 btnColor = vec3(0.5);\n  if (u_mouseLeft) btnColor = vec3(0.3, 0.8, 1.0);\n  if (u_mouseRight) btnColor = vec3(1.0, 0.4, 0.3);\n  if (u_mouseMiddle) btnColor = vec3(0.3, 1.0, 0.5);\n  col += glow * btnColor;\n\n  float flash = u_mouseWasPressed ? 1.0 : 0.0;\n  col += vec3(0.3) * flash * smoothstep(0.2, 0.0, dist);\n\n  float speed = length(u_mouseDelta) / max(u_resolution.x, 1.0);\n  col += vec3(0.0, 0.2, 0.5) * speed * 5.0 * smoothstep(0.3, 0.0, dist);\n\n  float wheelVis = clamp(u_mouseWheel * 0.001, -1.0, 1.0);\n  col.r += abs(wheelVis) * 0.15 * smoothstep(0.5, 0.0, dist);\n\n  if (!u_mouseInCanvas) {\n    col *= 0.4;\n  }\n\n  gl_FragColor = vec4(col, 1.0);\n}\n",
-          "sceneFile": "mouse-shader-demo.scene.glsl"
+          "sceneFile": "mouse-shader-demo.scene.glsl",
+          "capabilities": {
+            "interaction": true
+          }
         },
         {
           "type": "text",
@@ -2124,7 +3611,10 @@ export const docsApi = {
           "type": "live-example",
           "title": "Keyboard — WASD Movement",
           "sceneCode": "// @renderer shader\n\n// Smooth WASD/arrow movement via accumulators\n// @viji-accumulator:moveRight rate:u_keyD\n// @viji-accumulator:moveLeft rate:u_keyA\n// @viji-accumulator:moveUp rate:u_keyW\n// @viji-accumulator:moveDown rate:u_keyS\n// @viji-accumulator:arRight rate:u_keyRight\n// @viji-accumulator:arLeft rate:u_keyLeft\n// @viji-accumulator:arUp rate:u_keyUp\n// @viji-accumulator:arDown rate:u_keyDown\n\nvoid main() {\n  vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution) / min(u_resolution.x, u_resolution.y);\n\n  float speed = u_keyShift ? 0.5 : 0.2;\n  vec2 offset = vec2(\n    (moveRight + arRight - moveLeft - arLeft) * speed,\n    (moveUp + arUp - moveDown - arDown) * speed\n  );\n\n  vec2 p = uv - offset;\n\n  float d = length(p) - 0.1;\n  vec3 col = vec3(0.04, 0.04, 0.08);\n\n  vec3 dotColor = u_keySpace ? vec3(1.0, 0.5, 0.2) : vec3(0.3, 0.7, 1.0);\n  col += dotColor * smoothstep(0.01, 0.0, d);\n\n  float glow = 0.005 / (abs(d) + 0.005);\n  col += dotColor * glow * 0.3;\n\n  float grid = step(0.98, fract(uv.x * 10.0)) + step(0.98, fract(uv.y * 10.0));\n  col += grid * 0.03;\n\n  gl_FragColor = vec4(col, 1.0);\n}\n",
-          "sceneFile": "keyboard-shader-demo.scene.glsl"
+          "sceneFile": "keyboard-shader-demo.scene.glsl",
+          "capabilities": {
+            "interaction": true
+          }
         },
         {
           "type": "text",
@@ -2145,7 +3635,10 @@ export const docsApi = {
           "type": "live-example",
           "title": "Touch — Multi-Point Glow",
           "sceneCode": "// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy;\n\n  vec3 col = vec3(0.04, 0.04, 0.08);\n\n  vec3 colors[5];\n  colors[0] = vec3(0.3, 0.7, 1.0);\n  colors[1] = vec3(0.3, 1.0, 0.5);\n  colors[2] = vec3(1.0, 0.5, 0.3);\n  colors[3] = vec3(1.0, 0.8, 0.2);\n  colors[4] = vec3(0.8, 0.3, 1.0);\n\n  for (int i = 0; i < 5; i++) {\n    if (i >= u_touchCount) break;\n    vec2 tp;\n    if (i == 0) tp = u_touch0;\n    else if (i == 1) tp = u_touch1;\n    else if (i == 2) tp = u_touch2;\n    else if (i == 3) tp = u_touch3;\n    else tp = u_touch4;\n\n    float d = length(uv - tp);\n    col += colors[i] * 20.0 / (d + 8.0);\n\n    float ring = smoothstep(2.0, 0.0, abs(d - 50.0));\n    col += colors[i] * ring * 0.5;\n  }\n\n  if (u_touchCount == 0) {\n    vec2 center = u_resolution * 0.5;\n    float pulse = 0.5 + 0.5 * sin(u_time * 2.0);\n    float d = length(uv - center);\n    col += vec3(0.2, 0.3, 0.5) * pulse * 10.0 / (d + 20.0);\n  }\n\n  if (u_touchCount >= 2) {\n    float dist = length(u_touch0 - u_touch1);\n    vec2 mid = (u_touch0 + u_touch1) * 0.5;\n    float dMid = length(uv - mid);\n    float ring = smoothstep(2.0, 0.0, abs(dMid - dist * 0.5));\n    col += vec3(0.5, 0.5, 0.8) * ring * 0.4;\n  }\n\n  gl_FragColor = vec4(col, 1.0);\n}\n",
-          "sceneFile": "touch-shader-demo.scene.glsl"
+          "sceneFile": "touch-shader-demo.scene.glsl",
+          "capabilities": {
+            "interaction": true
+          }
         },
         {
           "type": "text",
@@ -2153,6 +3646,139 @@ export const docsApi = {
         }
       ]
     },
+    "shader-sensors": {
+      "id": "shader-sensors",
+      "title": "Sensor Uniforms",
+      "description": "GLSL uniforms for device accelerometer, gyroscope, and orientation data from the device running the scene.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Sensor Uniforms\n\nThe sensor uniforms expose accelerometer, gyroscope, and orientation data from the device's hardware sensors as GLSL values.\n\n> [!NOTE]\n> Device sensors require the host to enable `allowDeviceInteraction: true`. When sensors are unavailable, all uniforms default to `vec3(0.0)` / `false`.\n\n## Uniform Reference\n\n| Uniform | Type | Description |\n|---------|------|-------------|\n| `u_deviceAcceleration` | `vec3` | Linear acceleration without gravity (m/s²) — `(x, y, z)` |\n| `u_deviceAccelerationGravity` | `vec3` | Acceleration including gravity (m/s²) — `(x, y, z)` |\n| `u_deviceRotationRate` | `vec3` | Gyroscope rotation rate (degrees/second) — `(alpha, beta, gamma)` |\n| `u_deviceOrientation` | `vec3` | Device spatial orientation (degrees) — `(alpha, beta, gamma)` |\n| `u_deviceOrientationAbsolute` | `bool` | `true` if orientation uses magnetometer (compass) |\n\n### Orientation Axes\n\n| Component | Uniform Component | Range | Description |\n|-----------|------------------|-------|-------------|\n| `alpha` | `.x` | 0–360 | Rotation around Z-axis (compass heading) |\n| `beta` | `.y` | -180 to 180 | Rotation around X-axis (front-to-back tilt) |\n| `gamma` | `.z` | -90 to 90 | Rotation around Y-axis (left-to-right tilt) |\n\n### Acceleration Axes\n\n| Component | Uniform Component | Unit | Description |\n|-----------|------------------|------|-------------|\n| `x` | `.x` | m/s² | Left-to-right acceleration |\n| `y` | `.y` | m/s² | Bottom-to-top acceleration |\n| `z` | `.z` | m/s² | Back-to-front acceleration |\n\n## Default Values\n\nWhen device sensors are unavailable:\n- All `vec3` uniforms → `vec3(0.0, 0.0, 0.0)`\n- `u_deviceOrientationAbsolute` → `false`\n\nIndividual null axes within available sensor data also map to `0.0`.\n\n## Basic Example"
+        },
+        {
+          "type": "live-example",
+          "title": "Sensor Uniforms — Tilt Shader",
+          "sceneCode": "// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n\n  float tiltX = u_deviceOrientation.z / 90.0;\n  float tiltY = u_deviceOrientation.y / 180.0;\n\n  vec2 center = vec2(0.5 + tiltX * 0.35, 0.5 + tiltY * 0.35);\n  float d = distance(uv, center);\n\n  float accelMag = length(u_deviceAccelerationGravity) / 15.0;\n  float radius = 0.15 + accelMag * 0.1;\n\n  float hue = u_deviceOrientation.x / 360.0;\n  vec3 hsvColor = vec3(hue, 0.7, 0.8);\n  float c = hsvColor.z * hsvColor.y;\n  float x = c * (1.0 - abs(mod(hsvColor.x * 6.0, 2.0) - 1.0));\n  float m = hsvColor.z - c;\n  vec3 rgb;\n  float h6 = hsvColor.x * 6.0;\n  if (h6 < 1.0) rgb = vec3(c, x, 0.0);\n  else if (h6 < 2.0) rgb = vec3(x, c, 0.0);\n  else if (h6 < 3.0) rgb = vec3(0.0, c, x);\n  else if (h6 < 4.0) rgb = vec3(0.0, x, c);\n  else if (h6 < 5.0) rgb = vec3(x, 0.0, c);\n  else rgb = vec3(c, 0.0, x);\n  rgb += m;\n\n  float glow = smoothstep(radius + 0.05, radius - 0.05, d);\n  vec3 col = mix(vec3(0.04, 0.04, 0.1), rgb, glow);\n\n  float crosshair = step(abs(uv.x - 0.5), 0.001) + step(abs(uv.y - 0.5), 0.001);\n  col += vec3(crosshair * 0.08);\n\n  gl_FragColor = vec4(col, 1.0);\n}\n",
+          "sceneFile": "sensors-shader-demo.scene.glsl",
+          "capabilities": {
+            "interaction": true
+          }
+        },
+        {
+          "type": "text",
+          "markdown": "## Common Patterns\n\n### Tilt-Reactive Background\n\n```glsl\n// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n\n  float tiltX = u_deviceOrientation.z / 90.0; // gamma: -1 to 1\n  float tiltY = u_deviceOrientation.y / 180.0; // beta: -1 to 1\n\n  vec2 center = vec2(0.5 + tiltX * 0.4, 0.5 + tiltY * 0.4);\n  float d = distance(uv, center);\n\n  vec3 col = mix(vec3(0.3, 0.6, 1.0), vec3(0.02), smoothstep(0.0, 0.6, d));\n  gl_FragColor = vec4(col, 1.0);\n}\n```\n\n### Acceleration-Based Distortion\n\n```glsl\n// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n\n  float accelMag = length(u_deviceAcceleration) / 20.0;\n  vec2 offset = u_deviceAcceleration.xy * 0.005;\n\n  vec2 distorted = uv + offset;\n  float d = length(distorted - vec2(0.5));\n  float ring = smoothstep(0.3 + accelMag * 0.2, 0.31, d)\n             - smoothstep(0.31, 0.32 + accelMag * 0.2, d);\n\n  vec3 col = vec3(ring) * vec3(0.4, 0.8, 1.0);\n  gl_FragColor = vec4(col, 1.0);\n}\n```\n\n### Compass Rotation\n\n```glsl\n// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  vec2 center = uv - vec2(0.5);\n\n  float heading = radians(u_deviceOrientation.x);\n  float c = cos(heading);\n  float s = sin(heading);\n  vec2 rotated = vec2(\n    center.x * c - center.y * s,\n    center.x * s + center.y * c\n  );\n\n  float arrow = step(abs(rotated.x), 0.01) * step(0.0, rotated.y) * step(rotated.y, 0.2);\n  vec3 col = mix(vec3(0.05), vec3(1.0, 0.3, 0.3), arrow);\n  gl_FragColor = vec4(col, 1.0);\n}\n```\n\n### Gravity Direction\n\n```glsl\n// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n\n  vec3 gravity = u_deviceAccelerationGravity;\n  vec2 gravDir = normalize(gravity.xy + vec2(0.001));\n  float gravMag = length(gravity.xy) / 10.0;\n\n  float d = dot(uv - vec2(0.5), gravDir) * gravMag;\n  vec3 col = mix(vec3(0.1, 0.1, 0.3), vec3(0.3, 0.6, 1.0), clamp(d + 0.5, 0.0, 1.0));\n  gl_FragColor = vec4(col, 1.0);\n}\n```\n\n## Related\n\n- [Pointer Uniforms](../pointer/) — unified click/drag input\n- [Touch Uniforms](../touch/) — multi-touch positions\n- [External Device Sensor Uniforms](../external-devices/sensors/) — sensor uniforms from connected external devices\n- [Native Device Sensors](/native/sensors) — full JavaScript API for device sensors\n- [P5 Device Sensors](/p5/sensors) — full JavaScript API in P5 renderer"
+        }
+      ]
+    },
+    "shader-ext-overview": {
+      "id": "shader-ext-overview",
+      "title": "External Device Uniforms — Overview",
+      "description": "GLSL uniforms for accessing external devices — video textures, sensor data, and connection status from connected hardware.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# External Device Uniforms\n\nThe external device uniforms expose video textures and sensor data from devices connected to your installation (phones, tablets, or other hardware).\n\n> [!NOTE]\n> External devices are managed by the host. Devices appear and disappear dynamically. Use the count uniforms to determine how many devices are available each frame.\n\n## Two Separate Count Uniforms\n\nExternal devices have **two distinct count uniforms** that may differ in value:\n\n| Uniform | Type | Description |\n|---------|------|-------------|\n| `u_deviceCount` | `int` | Number of devices with **active camera streams** (0–8) |\n| `u_externalDeviceCount` | `int` | Number of **connected external devices** (0–8) |\n\nA device may be connected (counted in `u_externalDeviceCount`) but have no camera (not counted in `u_deviceCount`). Always use the appropriate count for the data you're accessing.\n\n## Uniform Summary\n\n### Video Uniforms (per device, indices 0–7)\n\n| Uniform | Type | Description |\n|---------|------|-------------|\n| `u_device{i}` | `sampler2D` | Device camera texture |\n| `u_device{i}Resolution` | `vec2` | Camera resolution in pixels |\n| `u_device{i}Connected` | `bool` | `true` when camera stream is active |\n\nSee [Video Textures](video/) for full usage details.\n\n### Sensor Uniforms (per device, indices 0–7)\n\n| Uniform | Type | Description |\n|---------|------|-------------|\n| `u_device{i}Acceleration` | `vec3` | Acceleration without gravity (m/s²) |\n| `u_device{i}AccelerationGravity` | `vec3` | Acceleration with gravity (m/s²) |\n| `u_device{i}RotationRate` | `vec3` | Rotation rate (deg/s) |\n| `u_device{i}Orientation` | `vec3` | Orientation (alpha, beta, gamma degrees) |\n\nSee [Sensor Uniforms](sensors/) for full usage details.\n\n## Default Values\n\nWhen no external devices are connected:\n- `u_deviceCount` → `0`\n- `u_externalDeviceCount` → `0`\n- All per-device uniforms → `vec2(0.0)` / `vec3(0.0)` / `false`\n- Disconnected device textures sample as black\n\n## Basic Example"
+        },
+        {
+          "type": "live-example",
+          "title": "External Devices — Multi-Device Overview",
+          "sceneCode": "// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n\n  vec3 col = vec3(0.04, 0.04, 0.1);\n\n  float deviceIndicator = float(u_externalDeviceCount) / 8.0;\n  col += vec3(0.0, deviceIndicator * 0.15, deviceIndicator * 0.3);\n\n  float videoIndicator = float(u_deviceCount) / 8.0;\n  float bar = step(0.92, uv.y) * step(uv.x, videoIndicator);\n  col = mix(col, vec3(0.3, 0.8, 0.4), bar);\n\n  float sensorBar = step(uv.y, 0.08) * step(uv.x, deviceIndicator);\n  col = mix(col, vec3(0.3, 0.5, 1.0), sensorBar);\n\n  if (u_device0Connected) {\n    vec2 thumbUV = (uv - vec2(0.05, 0.15)) / vec2(0.25, 0.35);\n    if (thumbUV.x >= 0.0 && thumbUV.x <= 1.0 && thumbUV.y >= 0.0 && thumbUV.y <= 1.0) {\n      col = texture2D(u_device0, thumbUV).rgb;\n    }\n  }\n\n  if (u_device1Connected) {\n    vec2 thumbUV = (uv - vec2(0.35, 0.15)) / vec2(0.25, 0.35);\n    if (thumbUV.x >= 0.0 && thumbUV.x <= 1.0 && thumbUV.y >= 0.0 && thumbUV.y <= 1.0) {\n      col = texture2D(u_device1, thumbUV).rgb;\n    }\n  }\n\n  gl_FragColor = vec4(col, 1.0);\n}\n",
+          "sceneFile": "overview-demo.scene.glsl",
+          "capabilities": {
+            "interaction": true
+          }
+        },
+        {
+          "type": "text",
+          "markdown": "## Common Patterns\n\n### Check for Any Connected Device\n\n```glsl\n// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n\n  vec3 col = vec3(0.05);\n\n  if (u_externalDeviceCount > 0) {\n    col = vec3(0.1, 0.3, 0.1);\n    float indicator = float(u_externalDeviceCount) / 8.0;\n    col += vec3(0.0, indicator * 0.5, 0.0);\n  }\n\n  gl_FragColor = vec4(col, 1.0);\n}\n```\n\n### Combine Device Video with Sensors\n\n```glsl\n// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n\n  vec3 col = vec3(0.04);\n\n  if (u_device0Connected) {\n    float tilt = u_device0Orientation.z / 90.0;\n    vec2 shifted = uv + vec2(tilt * 0.1, 0.0);\n    col = texture2D(u_device0, shifted).rgb;\n  }\n\n  gl_FragColor = vec4(col, 1.0);\n}\n```\n\n## Naming Convention\n\nDevice **video** uniforms use plain `u_device{i}` naming:\n- `u_device0`, `u_device0Resolution`, `u_device0Connected`\n\nDevice **sensor** uniforms use descriptive suffixes:\n- `u_device0Acceleration`, `u_device0Orientation`, etc.\n\nThe `u_device{i}Connected` and `u_device{i}Resolution` uniforms refer specifically to device **video** connection and resolution, not sensors.\n\n## Related\n\n- [Video Textures](video/) — sampling device camera feeds in GLSL\n- [Sensor Uniforms](sensors/) — accelerometer and orientation from external devices\n- [Sensor Uniforms (Internal)](../sensors/) — sensor uniforms from the device running the scene\n- [Native External Devices](/native/external-devices) — full JavaScript API\n- [P5 External Devices](/p5/external-devices) — full JavaScript API in P5 renderer"
+        }
+      ]
+    },
+    "shader-ext-video": {
+      "id": "shader-ext-video",
+      "title": "Video Textures",
+      "description": "GLSL uniforms for sampling camera feeds from externally connected devices — textures, resolution, and connection status.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Video Textures\n\nThe device video uniforms provide camera textures from externally connected devices, letting you sample live video feeds from phones, tablets, or other camera-equipped hardware in GLSL.\n\n> [!WARNING]\n> Device video textures are raw camera feeds only. Computer Vision (CV) uniforms (face detection, hand tracking, etc.) apply only to the main video stream (`u_video`), not device cameras.\n\n## Uniform Reference\n\n| Uniform | Type | Description |\n|---------|------|-------------|\n| `u_deviceCount` | `int` | Number of devices with active camera streams (0–8) |\n\n### Per-Device Uniforms (indices 0–7)\n\n| Uniform | Type | Description |\n|---------|------|-------------|\n| `u_device{i}` | `sampler2D` | Device camera texture (e.g., `u_device0`, `u_device1`) |\n| `u_device{i}Resolution` | `vec2` | Camera resolution in pixels (e.g., `u_device0Resolution`) |\n| `u_device{i}Connected` | `bool` | `true` when camera stream is active (e.g., `u_device0Connected`) |\n\nAll 8 device slots (0–7) are always declared. Use `u_device{i}Connected` to check availability before sampling.\n\n## Default Values\n\n- `u_deviceCount` → `0` when no device cameras are connected\n- `u_device{i}Connected` → `false` for unused slots\n- `u_device{i}Resolution` → `vec2(0.0)` for unused slots\n- `u_device{i}` → samples as black for disconnected devices\n\n## Basic Example"
+        },
+        {
+          "type": "live-example",
+          "title": "Device Video — Camera Grid Shader",
+          "sceneCode": "// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n\n  vec3 col = vec3(0.04, 0.04, 0.1);\n\n  if (u_deviceCount == 0) {\n    float grid = step(0.98, fract(uv.x * 8.0)) + step(0.98, fract(uv.y * 8.0));\n    col += vec3(grid * 0.03);\n    gl_FragColor = vec4(col, 1.0);\n    return;\n  }\n\n  int cols = u_deviceCount <= 1 ? 1 : 2;\n  int rows = (u_deviceCount + cols - 1) / cols;\n  vec2 cell = vec2(float(cols), float(rows));\n  vec2 cellUV = fract(uv * cell);\n  ivec2 cellIdx = ivec2(floor(uv * cell));\n  int idx = cellIdx.y * cols + cellIdx.x;\n\n  float pad = 0.02;\n  bool inPad = cellUV.x < pad || cellUV.x > (1.0 - pad) || cellUV.y < pad || cellUV.y > (1.0 - pad);\n  vec2 innerUV = (cellUV - pad) / (1.0 - 2.0 * pad);\n\n  if (inPad || idx >= u_deviceCount) {\n    gl_FragColor = vec4(col, 1.0);\n    return;\n  }\n\n  vec3 deviceCol = vec3(0.06);\n  if (idx == 0 && u_device0Connected) deviceCol = texture2D(u_device0, innerUV).rgb;\n  else if (idx == 1 && u_device1Connected) deviceCol = texture2D(u_device1, innerUV).rgb;\n  else if (idx == 2 && u_device2Connected) deviceCol = texture2D(u_device2, innerUV).rgb;\n  else if (idx == 3 && u_device3Connected) deviceCol = texture2D(u_device3, innerUV).rgb;\n\n  gl_FragColor = vec4(deviceCol, 1.0);\n}\n",
+          "sceneFile": "video-demo.scene.glsl",
+          "capabilities": {
+            "interaction": true
+          }
+        },
+        {
+          "type": "text",
+          "markdown": "## Common Patterns\n\n### Sample a Single Device Camera\n\n```glsl\n// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  vec3 col = vec3(0.04);\n\n  if (u_device0Connected) {\n    col = texture2D(u_device0, uv).rgb;\n  }\n\n  gl_FragColor = vec4(col, 1.0);\n}\n```\n\n### Two-Device Split Screen\n\n```glsl\n// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  vec3 col = vec3(0.04);\n\n  if (uv.x < 0.5 && u_device0Connected) {\n    vec2 camUV = vec2(uv.x * 2.0, uv.y);\n    col = texture2D(u_device0, camUV).rgb;\n  } else if (uv.x >= 0.5 && u_device1Connected) {\n    vec2 camUV = vec2((uv.x - 0.5) * 2.0, uv.y);\n    col = texture2D(u_device1, camUV).rgb;\n  }\n\n  gl_FragColor = vec4(col, 1.0);\n}\n```\n\n### Device Camera with Aspect-Correct Sampling\n\n```glsl\n// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  vec3 col = vec3(0.04);\n\n  if (u_device0Connected && u_device0Resolution.x > 0.0) {\n    float canvasAspect = u_resolution.x / u_resolution.y;\n    float camAspect = u_device0Resolution.x / u_device0Resolution.y;\n\n    vec2 camUV = uv;\n    if (camAspect > canvasAspect) {\n      float scale = canvasAspect / camAspect;\n      camUV.x = uv.x * scale + (1.0 - scale) * 0.5;\n    } else {\n      float scale = camAspect / canvasAspect;\n      camUV.y = uv.y * scale + (1.0 - scale) * 0.5;\n    }\n\n    col = texture2D(u_device0, camUV).rgb;\n  }\n\n  gl_FragColor = vec4(col, 1.0);\n}\n```\n\n### Picture-in-Picture Device Overlay\n\n```glsl\n// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n\n  vec3 col = vec3(0.05 + 0.03 * sin(uv.x * 10.0 + u_time));\n\n  if (u_device0Connected) {\n    vec2 pipPos = vec2(0.65, 0.05);\n    vec2 pipSize = vec2(0.3, 0.3);\n    vec2 pipUV = (uv - pipPos) / pipSize;\n\n    if (pipUV.x >= 0.0 && pipUV.x <= 1.0 && pipUV.y >= 0.0 && pipUV.y <= 1.0) {\n      col = texture2D(u_device0, pipUV).rgb;\n      float border = step(pipUV.x, 0.01) + step(0.99, pipUV.x)\n                   + step(pipUV.y, 0.01) + step(0.99, pipUV.y);\n      col = mix(col, vec3(1.0), border * 0.3);\n    }\n  }\n\n  gl_FragColor = vec4(col, 1.0);\n}\n```\n\n### Dynamic Multi-Device Grid\n\n```glsl\n// @renderer shader\n\nvec3 sampleDevice(int idx, vec2 uv) {\n  if (idx == 0 && u_device0Connected) return texture2D(u_device0, uv).rgb;\n  if (idx == 1 && u_device1Connected) return texture2D(u_device1, uv).rgb;\n  if (idx == 2 && u_device2Connected) return texture2D(u_device2, uv).rgb;\n  if (idx == 3 && u_device3Connected) return texture2D(u_device3, uv).rgb;\n  return vec3(0.08);\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n\n  int count = u_deviceCount;\n  if (count == 0) {\n    gl_FragColor = vec4(vec3(0.04), 1.0);\n    return;\n  }\n\n  int cols = count <= 1 ? 1 : 2;\n  int rows = (count + cols - 1) / cols;\n\n  vec2 cell = vec2(float(cols), float(rows));\n  vec2 cellUV = fract(uv * cell);\n  ivec2 cellIdx = ivec2(floor(uv * cell));\n  int idx = cellIdx.y * cols + cellIdx.x;\n\n  vec3 col = vec3(0.04);\n  if (idx < count) {\n    col = sampleDevice(idx, cellUV);\n  }\n\n  gl_FragColor = vec4(col, 1.0);\n}\n```\n\n## Related\n\n- [External Device Uniforms — Overview](../) — count uniforms and naming conventions\n- [External Device Sensor Uniforms](../sensors/) — accelerometer and orientation from connected devices\n- [Video & CV — Video Basics](../../video/basics/) — main camera video uniform (`u_video`)\n- [Native Device Video](/native/external-devices/video) — full JavaScript API\n- [P5 Device Video](/p5/external-devices/video) — full JavaScript API in P5 renderer"
+        }
+      ]
+    },
+    "shader-ext-sensors": {
+      "id": "shader-ext-sensors",
+      "title": "External Device Sensor Uniforms",
+      "description": "GLSL uniforms for accelerometer, gyroscope, and orientation data from externally connected devices.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# External Device Sensor Uniforms\n\nThe external device sensor uniforms expose accelerometer, gyroscope, and orientation data from up to 8 connected external devices.\n\n> [!NOTE]\n> External device sensor uniforms are separate from [internal device sensor uniforms](../../sensors/). The internal device (running the scene) uses `u_deviceAcceleration`, `u_deviceOrientation`, etc. External devices use indexed names like `u_device0Acceleration`, `u_device0Orientation`.\n\n## Uniform Reference\n\n| Uniform | Type | Description |\n|---------|------|-------------|\n| `u_externalDeviceCount` | `int` | Number of connected external devices (0–8) |\n\n### Per-Device Uniforms (indices 0–7)\n\n| Uniform | Type | Description |\n|---------|------|-------------|\n| `u_device{i}Acceleration` | `vec3` | Acceleration without gravity (m/s²) — `(x, y, z)` |\n| `u_device{i}AccelerationGravity` | `vec3` | Acceleration including gravity (m/s²) — `(x, y, z)` |\n| `u_device{i}RotationRate` | `vec3` | Rotation rate (degrees/second) — `(alpha, beta, gamma)` |\n| `u_device{i}Orientation` | `vec3` | Spatial orientation (degrees) — `(alpha, beta, gamma)` |\n\n**Example uniform names** for device 0:\n- `u_device0Acceleration`\n- `u_device0AccelerationGravity`\n- `u_device0RotationRate`\n- `u_device0Orientation`\n\n### Orientation Components\n\n| Component | Uniform Component | Range | Description |\n|-----------|------------------|-------|-------------|\n| `alpha` | `.x` | 0–360 | Rotation around Z-axis (compass heading) |\n| `beta` | `.y` | -180 to 180 | Rotation around X-axis (front-to-back tilt) |\n| `gamma` | `.z` | -90 to 90 | Rotation around Y-axis (left-to-right tilt) |\n\n### Acceleration Components\n\n| Component | Uniform Component | Unit | Description |\n|-----------|------------------|------|-------------|\n| `x` | `.x` | m/s² | Left-to-right acceleration |\n| `y` | `.y` | m/s² | Bottom-to-top acceleration |\n| `z` | `.z` | m/s² | Back-to-front acceleration |\n\n## Default Values\n\n- `u_externalDeviceCount` → `0` when no external devices are connected\n- All per-device `vec3` uniforms → `vec3(0.0)` for unconnected device slots\n- Null axis values within connected device data also map to `0.0`\n\n## Basic Example"
+        },
+        {
+          "type": "live-example",
+          "title": "External Device Sensors — Tilt Shader",
+          "sceneCode": "// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n\n  vec3 col = vec3(0.04, 0.04, 0.1);\n\n  if (u_externalDeviceCount == 0) {\n    float grid = step(0.98, fract(uv.x * 10.0)) + step(0.98, fract(uv.y * 10.0));\n    col += vec3(grid * 0.02);\n    gl_FragColor = vec4(col, 1.0);\n    return;\n  }\n\n  float tiltX = u_device0Orientation.z / 90.0;\n  float tiltY = u_device0Orientation.y / 180.0;\n\n  vec2 center = vec2(0.5 + tiltX * 0.35, 0.5 + tiltY * 0.35);\n  float d = distance(uv, center);\n\n  float accelMag = length(u_device0AccelerationGravity) / 15.0;\n  float radius = 0.12 + accelMag * 0.08;\n\n  float glow = smoothstep(radius + 0.04, radius - 0.04, d);\n  vec3 orb = mix(vec3(0.2, 0.5, 1.0), vec3(0.5, 0.8, 1.0), glow);\n  col = mix(col, orb, glow);\n\n  float heading = u_device0Orientation.x / 360.0;\n  col.r += heading * 0.15;\n\n  float cross = step(abs(uv.x - 0.5), 0.001) + step(abs(uv.y - 0.5), 0.001);\n  col += vec3(cross * 0.06);\n\n  gl_FragColor = vec4(col, 1.0);\n}\n",
+          "sceneFile": "sensors-demo.scene.glsl",
+          "capabilities": {
+            "interaction": true
+          }
+        },
+        {
+          "type": "text",
+          "markdown": "## Common Patterns\n\n### React to First External Device Tilt\n\n```glsl\n// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n\n  vec3 col = vec3(0.04);\n\n  if (u_externalDeviceCount > 0) {\n    float tiltX = u_device0Orientation.z / 90.0;\n    float tiltY = u_device0Orientation.y / 180.0;\n\n    vec2 center = vec2(0.5 + tiltX * 0.4, 0.5 + tiltY * 0.4);\n    float d = distance(uv, center);\n    col = mix(vec3(0.2, 0.5, 1.0), vec3(0.02), smoothstep(0.0, 0.5, d));\n  }\n\n  gl_FragColor = vec4(col, 1.0);\n}\n```\n\n### Compare Two Device Orientations\n\n```glsl\n// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  vec3 col = vec3(0.04);\n\n  if (u_externalDeviceCount >= 2) {\n    float tilt0 = u_device0Orientation.z / 90.0;\n    float tilt1 = u_device1Orientation.z / 90.0;\n\n    float diff = abs(tilt0 - tilt1);\n    col = mix(vec3(0.1, 0.3, 0.8), vec3(1.0, 0.3, 0.2), diff);\n\n    float y0 = 0.5 + tilt0 * 0.3;\n    float y1 = 0.5 + tilt1 * 0.3;\n    float line0 = smoothstep(0.005, 0.0, abs(uv.y - y0)) * step(uv.x, 0.5);\n    float line1 = smoothstep(0.005, 0.0, abs(uv.y - y1)) * step(0.5, uv.x);\n    col = mix(col, vec3(1.0), line0 + line1);\n  }\n\n  gl_FragColor = vec4(col, 1.0);\n}\n```\n\n### Acceleration-Based Color Shift\n\n```glsl\n// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n\n  vec3 col = vec3(0.05);\n\n  if (u_externalDeviceCount > 0) {\n    float mag = length(u_device0Acceleration) / 20.0;\n    vec3 accelDir = normalize(u_device0Acceleration + vec3(0.001));\n\n    col.r = mag * 0.5 + 0.1;\n    col.g = abs(accelDir.x) * 0.3;\n    col.b = abs(accelDir.y) * 0.3 + 0.1;\n\n    float d = length(uv - vec2(0.5));\n    col *= smoothstep(0.5, 0.1, d);\n  }\n\n  gl_FragColor = vec4(col, 1.0);\n}\n```\n\n### Multiple Device Gravity Visualization\n\n```glsl\n// @renderer shader\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  vec3 col = vec3(0.04);\n\n  for (int i = 0; i < 4; i++) {\n    if (i >= u_externalDeviceCount) break;\n\n    vec3 gravity;\n    if (i == 0) gravity = u_device0AccelerationGravity;\n    else if (i == 1) gravity = u_device1AccelerationGravity;\n    else if (i == 2) gravity = u_device2AccelerationGravity;\n    else gravity = u_device3AccelerationGravity;\n\n    vec2 gravDir = gravity.xy / 10.0;\n    float influence = dot(uv - vec2(0.5), normalize(gravDir + vec2(0.001)));\n    float strength = length(gravDir);\n\n    vec3 deviceCol;\n    if (i == 0) deviceCol = vec3(0.3, 0.6, 1.0);\n    else if (i == 1) deviceCol = vec3(1.0, 0.4, 0.3);\n    else if (i == 2) deviceCol = vec3(0.3, 1.0, 0.5);\n    else deviceCol = vec3(1.0, 0.8, 0.3);\n\n    col += deviceCol * clamp(influence * strength, 0.0, 0.3);\n  }\n\n  gl_FragColor = vec4(col, 1.0);\n}\n```\n\n## Related\n\n- [External Device Uniforms — Overview](../) — count uniforms and naming conventions\n- [Video Textures](../video/) — device camera textures in GLSL\n- [Sensor Uniforms (Internal)](../../sensors/) — sensor uniforms from the device running the scene\n- [Native External Device Sensors](/native/external-devices/sensors) — full JavaScript API\n- [P5 External Device Sensors](/p5/external-devices/sensors) — full JavaScript API in P5 renderer"
+        }
+      ]
+    },
+    "shader-backbuffer": {
+      "id": "shader-backbuffer",
+      "title": "Backbuffer & Feedback",
+      "description": "Access the previous frame as a texture for trails, feedback distortion, paint effects, and accumulation patterns.",
+      "content": [
+        {
+          "type": "text",
+          "markdown": "# Backbuffer & Feedback\n\nThe backbuffer gives your shader access to the previous frame's output as a `sampler2D` texture. This enables feedback effects — trails, motion blur, paint strokes, and accumulation patterns — where each frame builds on the last.\n\n## How to Enable\n\nReference `backbuffer` anywhere in your shader code. Viji detects the word via a string search and activates the ping-pong framebuffer system automatically — no directive or configuration is needed:\n\n```glsl\nvec4 prev = texture2D(backbuffer, uv);\n```\n\n> [!WARNING]\n> The detection is a literal string search across the entire shader source. If `backbuffer` appears in a comment — even `// TODO: add backbuffer later` — the system activates. Remove or rename such comments to avoid unnecessary resource allocation.\n\n## Uniform Reference\n\n| Property | Value |\n|----------|-------|\n| Name | `backbuffer` |\n| Type | `sampler2D` |\n| Prefix | None — `backbuffer`, not `u_backbuffer` |\n| Resolution | Matches canvas size exactly ([`u_resolution`](/shader/resolution)) |\n| Format | RGBA, 8 bits per channel (`gl_UNSIGNED_BYTE`) |\n| Filtering | Linear (bilinear interpolation between texels) |\n| Wrapping | Clamp-to-edge on both axes |\n| Initial state | `vec4(0.0)` — transparent black on the first frame |\n\nThe uniform is auto-injected when the system is active. Do not redeclare it.\n\n## Sampling\n\nSample the backbuffer with standard texture lookup. The texture coordinates match the canvas UV space:\n\n```glsl\nvec2 uv = gl_FragCoord.xy / u_resolution;\nvec4 previous = texture2D(backbuffer, uv); // GLSL ES 1.00\n```\n\nFor GLSL ES 3.00 shaders, use `texture()` instead:\n\n```glsl\nvec4 previous = texture(backbuffer, uv); // GLSL ES 3.00\n```\n\nOn the first frame, `backbuffer` samples as `vec4(0.0, 0.0, 0.0, 0.0)` everywhere. Your shader should handle this gracefully — most feedback patterns naturally produce the correct result since mixing with black is a no-op.\n\n## Trail / Fade Effect\n\nThe most common backbuffer pattern: mix the previous frame with new content using a decay factor. Each frame, old content fades toward black while new content is drawn on top."
+        },
+        {
+          "type": "live-example",
+          "title": "Trail Effect",
+          "sceneCode": "// @renderer shader\n// @viji-slider:decay label:\"Trail Decay\" default:3.0 min:0.5 max:20.0 step:0.1\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  vec4 prev = texture2D(backbuffer, uv);\n\n  float fade = 1.0 - exp(-decay * u_deltaTime);\n\n  vec2 mouse = u_mouse / u_resolution;\n  float dist = length(uv - mouse);\n  float spot = smoothstep(0.08, 0.0, dist);\n\n  float hue = fract(u_time * 0.1);\n  vec3 spotColor = vec3(\n    abs(hue * 6.0 - 3.0) - 1.0,\n    2.0 - abs(hue * 6.0 - 2.0),\n    2.0 - abs(hue * 6.0 - 4.0)\n  );\n  spotColor = clamp(spotColor, 0.0, 1.0);\n\n  vec3 current = spotColor * spot;\n  vec3 result = mix(prev.rgb, current, max(fade, spot));\n\n  gl_FragColor = vec4(result, 1.0);\n}\n",
+          "sceneFile": "backbuffer-trail.scene.glsl",
+          "capabilities": {
+            "interaction": true
+          }
+        },
+        {
+          "type": "text",
+          "markdown": "The key line is `mix(prev.rgb, current, fadeAmount)` where `fadeAmount` controls how quickly old content disappears. A value of `0.05` means 5% new content per frame, creating long trails. A value of `0.5` gives short, responsive trails.\n\n## Frame-Rate Independence\n\nFeedback strength depends on how many times the shader runs per second. At 60 fps, `mix(prev, current, 0.05)` fades smoothly. At 30 fps, the same factor produces trails that last half as long because there are half as many blending steps.\n\nScale the feedback factor by [`u_deltaTime`](/shader/timing) to get consistent behavior across frame rates:\n\n```glsl\nfloat fade = 1.0 - exp(-decay * u_deltaTime);\nvec3 result = mix(prev.rgb, current, fade);\n```\n\nThe exponential form `1.0 - exp(-decay * dt)` produces frame-rate-independent exponential decay. A linear approximation `decay * u_deltaTime` also works for small values.\n\n## Feedback Distortion\n\nSampling the backbuffer with offset UVs creates feedback distortion — the previous frame shifts, rotates, or warps before blending with new content:\n\n```glsl\nvec2 center = vec2(0.5);\nvec2 dir = uv - center;\nvec2 distortedUV = uv + dir * 0.01;     // zoom outward\nvec4 prev = texture2D(backbuffer, distortedUV);\n```\n\nCommon distortion patterns:\n\n| Pattern | UV Offset | Effect |\n|---------|-----------|--------|\n| Zoom out | `uv + (uv - 0.5) * strength` | Expands from center |\n| Zoom in | `uv - (uv - 0.5) * strength` | Contracts toward center |\n| Rotation | Apply 2D rotation matrix to `uv - 0.5` | Spiraling trails |\n| Drift | `uv + vec2(dx, dy)` | Directional smear |\n\n## Paint / Accumulation\n\nFor paint-style effects, the backbuffer preserves everything drawn in previous frames. New content is composited on top without fading:\n\n```glsl\nvec4 prev = texture2D(backbuffer, uv);\nvec4 stroke = drawBrush(uv, brushPos, brushColor);\ngl_FragColor = mix(prev, stroke, stroke.a);\n```\n\nThis creates a persistent canvas where each frame's output accumulates indefinitely."
+        },
+        {
+          "type": "live-example",
+          "title": "Paint Effect",
+          "sceneCode": "// @renderer shader\n// @viji-slider:brushSize label:\"Brush Size\" default:0.04 min:0.01 max:0.15 step:0.005\n// @viji-color:brushColor label:\"Brush Color\" default:\"#ff6622\"\n// @viji-button:clearCanvas label:\"Clear Canvas\"\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  vec4 prev = texture2D(backbuffer, uv);\n\n  if (clearCanvas) {\n    gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);\n    return;\n  }\n\n  vec2 mouse = u_mouse / u_resolution;\n  float dist = length(uv - mouse);\n  float brush = smoothstep(brushSize, brushSize * 0.3, dist);\n\n  bool isDrawing = u_mouse.x > 0.0 || u_mouse.y > 0.0;\n  float stroke = isDrawing ? brush : 0.0;\n\n  vec3 result = mix(prev.rgb, brushColor, stroke);\n  gl_FragColor = vec4(result, 1.0);\n}\n",
+          "sceneFile": "backbuffer-paint.scene.glsl",
+          "capabilities": {
+            "interaction": true
+          }
+        },
+        {
+          "type": "text",
+          "markdown": "## Clearing the Backbuffer\n\nSince the backbuffer preserves content across frames, you may need a way to reset it. Use a [`@viji-button`](/shader/parameters/button/) parameter to trigger a clear:\n\n```glsl\n// @viji-button:clearCanvas label:\"Clear\"\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n  vec4 prev = texture2D(backbuffer, uv);\n\n  if (clearCanvas) {\n    gl_FragColor = vec4(0.0);\n    return;\n  }\n\n  // ... normal drawing logic using prev ...\n}\n```\n\nWhen `clearCanvas` is `true` (for exactly one frame), the shader outputs black everywhere, which becomes the next frame's backbuffer — effectively resetting the canvas.\n\n## Resize Behavior\n\nWhen the canvas resizes, both framebuffers are recreated at the new resolution. Previous frame data is lost — the backbuffer resets to `vec4(0.0)`, as if the scene just started.\n\nThis is unavoidable because the old texture dimensions no longer match the new canvas size. Design your effect to handle occasional resets gracefully.\n\n## Backbuffer vs Accumulator\n\nBoth provide persistence across frames, but they work at fundamentally different levels:\n\n| | Backbuffer | [`@viji-accumulator`](/shader/parameters/accumulator/) |\n|---|---|---|\n| Scope | Full-frame pixel buffer | Single scalar value |\n| Side | GPU (texture) | CPU (uniform float) |\n| Data | RGBA per pixel | One float |\n| Use case | Visual feedback, trails, paint | Smooth animation phase, counters |\n| Precision | 8 bits per channel | 32-bit float |\n\nUse the backbuffer when you need pixel-level persistence (trails, paint, distortion). Use an accumulator when you need a single value that grows over time (animation phase, rotation angle).\n\n## Limitations\n\n- **Single buffer only.** Viji provides one `backbuffer` texture. There is no equivalent to Shadertoy's multi-buffer system (Buffer A, B, C, D). Multi-pass feedback requires creative workarounds — for example, packing multiple channels into the RGBA output.\n- **8-bit precision.** Each channel stores values as unsigned bytes (0–255). Subtle accumulation over many frames may show banding artifacts. This is inherent to the `UNSIGNED_BYTE` texture format.\n- **LINEAR filtering only.** The backbuffer always uses bilinear interpolation. There is no option for nearest-neighbor (NEAREST) filtering. This means pixel-art-style feedback will have slight blurring.\n- **Clamp-to-edge wrapping.** Sampling outside the 0–1 UV range repeats the edge pixels. Wrap-around (REPEAT) is not available.\n- **String-based detection.** As noted above, even a comment containing `backbuffer` activates the system. Be mindful of naming in comments.\n\n## Related\n\n- [Shader Quick Start](/shader/quickstart) — backbuffer introduction and basic example\n- [Timing & Animation](/shader/timing) — [`u_deltaTime`](/shader/timing) for frame-rate-independent feedback\n- [Accumulator](/shader/parameters/accumulator/) — CPU-side scalar persistence\n- [Button](/shader/parameters/button/) — momentary trigger for clearing the backbuffer\n- [Shadertoy Compatibility](/shader/shadertoy) — differences in multi-buffer feedback\n- [Resolution & Coordinates](/shader/resolution) — canvas size and UV normalization"
+        }
+      ]
+    },
     "shader-shadertoy": {
       "id": "shader-shadertoy",
       "title": "shader-shadertoy",