@viji-dev/core 0.4.0 → 0.4.1

package/dist/docs-api.js

@@ -1,7 +1,7 @@
 export const docsApi = {
   "version": "1.1.0",
   "coreVersion": "0.4.0",
-  "generatedAt": "2026-04-25T17:01:24.812Z",
+  "generatedAt": "2026-04-28T17:26:10.039Z",
   "navigation": [
     {
       "id": "getting-started",
@@ -884,7 +884,7 @@ export const docsApi = {
         },
         {
           "type": "text",
-          "markdown": "A few things to notice:\r\n\r\n- **[`viji.slider()`](/native/parameters/slider)** creates a UI slider the user can adjust. You define it once at the top level and read `.value` inside `render()`.\r\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.\r\n- **[`viji.width`](/native/canvas-context) / [`viji.height`](/native/canvas-context)** keep your scene resolution-agnostic.\r\n- **`render(viji)`** is called every frame. This is where you draw.\r\n\r\n## What You Can Access\r\n\r\nEverything is available through the `viji` object:\r\n\r\n| Category | What It Gives You |\r\n|----------|------------------|\r\n| **Canvas** | [`viji.canvas`](/native/canvas-context), [`viji.width`](/native/canvas-context), [`viji.height`](/native/canvas-context) |\r\n| **Timing** | [`viji.time`](/native/timing), [`viji.deltaTime`](/native/timing), [`viji.frameCount`](/native/timing), [`viji.fps`](/native/timing) |\r\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), [`viji.coordinate()`](/native/parameters/coordinate) |\r\n| **Audio** | [Volume, bands, beat, spectral, FFT & waveform](/native/audio) |\r\n| **Video & CV** | [Video frames, face detection, hand tracking, pose estimation, body segmentation](/native/video) |\r\n| **Interaction** | Unified pointer, mouse buttons & wheel, keyboard state, multi-touch with pressure & velocity |\r\n| **Sensors** | Accelerometer, gyroscope, device orientation |\r\n\r\n## Three Ways to Create\r\n\r\nViji supports three rendering modes:\r\n\r\n| Renderer | Best For | Entry Point |\r\n|----------|----------|-------------|\r\n| **Native** | Full control with Canvas 2D, WebGL, or Three.js | `render(viji)` |\r\n| **P5.js** | Artists familiar with Processing / P5.js | `render(viji, p5)` |\r\n| **Shader** | GPU effects, raymarching, generative patterns | `void main()` in GLSL |\r\n\r\nAll three share the same audio, video, parameter, and interaction APIs. See [Renderers Overview](../renderers-overview/) for how each works.\r\n\r\n## Next Steps\r\n\r\n- [Renderers Overview](../renderers-overview/): how to choose and use each renderer\r\n- [Best Practices](../best-practices/): essential patterns for reliable, performant scenes\r\n- [Common Mistakes](../common-mistakes/): pitfalls to avoid\r\n- [Native Quick Start](/native/quickstart): build with JavaScript and full canvas control\r\n- [P5 Quick Start](/p5/quickstart): build with the familiar P5.js API\r\n- [Shader Quick Start](/shader/quickstart): build with GLSL fragment shaders"
+          "markdown": "A few things to notice:\r\n\r\n- **[`viji.slider()`](/native/parameters/slider)** creates a UI slider the user can adjust. You define it once at the top level and read `.value` inside `render()`.\r\n- **[`viji.deltaTime`](/native/timing#vijideltatime-frame-delta)** 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.\r\n- **[`viji.width`](/native/canvas-context#dimension-properties) / [`viji.height`](/native/canvas-context#dimension-properties)** keep your scene resolution-agnostic.\r\n- **`render(viji)`** is called every frame. This is where you draw.\r\n\r\n## What You Can Access\r\n\r\nEverything is available through the `viji` object:\r\n\r\n| Category | What It Gives You |\r\n|----------|------------------|\r\n| **Canvas** | [`viji.canvas`](/native/canvas-context#the-canvas), [`viji.width`](/native/canvas-context#dimension-properties), [`viji.height`](/native/canvas-context#dimension-properties) |\r\n| **Timing** | [`viji.time`](/native/timing#vijitime-absolute-time), [`viji.deltaTime`](/native/timing#vijideltatime-frame-delta), [`viji.frameCount`](/native/timing#vijiframecount), [`viji.fps`](/native/timing#vijifps-target-frame-rate) |\r\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), [`viji.coordinate()`](/native/parameters/coordinate) |\r\n| **Audio** | [Volume, bands, beat, spectral, FFT & waveform](/native/audio#api-overview) |\r\n| **Video & CV** | [Video frames, face detection, hand tracking, pose estimation, body segmentation](/native/video#api-overview) |\r\n| **Interaction** | Unified pointer, mouse buttons & wheel, keyboard state, multi-touch with pressure & velocity |\r\n| **Sensors** | Accelerometer, gyroscope, device orientation |\r\n\r\n## Three Ways to Create\r\n\r\nViji supports three rendering modes:\r\n\r\n| Renderer | Best For | Entry Point |\r\n|----------|----------|-------------|\r\n| **Native** | Full control with Canvas 2D, WebGL, or Three.js | `render(viji)` |\r\n| **P5.js** | Artists familiar with Processing / P5.js | `render(viji, p5)` |\r\n| **Shader** | GPU effects, raymarching, generative patterns | `void main()` in GLSL |\r\n\r\nAll three share the same audio, video, parameter, and interaction APIs. See [Renderers Overview](../renderers-overview/) for how each works.\r\n\r\n## Next Steps\r\n\r\n- [Renderers Overview](../renderers-overview/): how to choose and use each renderer\r\n- [Best Practices](../best-practices/): essential patterns for reliable, performant scenes\r\n- [Common Mistakes](../common-mistakes/): pitfalls to avoid\r\n- [Native Quick Start](/native/quickstart): build with JavaScript and full canvas control\r\n- [P5 Quick Start](/p5/quickstart): build with the familiar P5.js API\r\n- [Shader Quick Start](/shader/quickstart): build with GLSL fragment shaders"
         }
       ]
     },
@@ -937,7 +937,7 @@ export const docsApi = {
         },
         {
           "type": "text",
-          "markdown": "**Key characteristics:**\r\n\r\n- **No setup function.** All initialization happens at the top level of your scene code. Top-level `await` is supported, which enables dynamic imports.\r\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, so requesting a different type returns `null`.\r\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:**\r\n\r\n- **No setup function.** All initialization happens at the top level of your scene code. Top-level `await` is supported, which enables dynamic imports.\r\n- **Full canvas control.** Call [`viji.useContext('2d')`](/native/canvas-context#choosing-a-context) for Canvas 2D, [`viji.useContext('webgl')`](/native/canvas-context#choosing-a-context) for WebGL 1, or [`viji.useContext('webgl2')`](/native/canvas-context#choosing-a-context) for WebGL 2. Choose one and use it for the entire scene. A canvas only supports one context type, so requesting a different type returns `null`.\r\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",
@@ -947,7 +947,7 @@ export const docsApi = {
         },
         {
           "type": "text",
-          "markdown": "See [External Libraries](/native/external-libraries) for detailed patterns with Three.js and other libraries.\r\n\r\n---\r\n\r\n## P5.js Renderer\r\n\r\nThe P5.js renderer gives you the familiar Processing/P5.js creative coding API. Viji loads P5.js automatically when you use `// @renderer p5`, so there's no installation or setup to worry about. Add **`webgl`** after `p5` on that same line (`// @renderer p5 webgl`) to switch the main canvas to P5's WEBGL renderer for 3D and shader-based drawing.\r\n\r\n**Entry points:** `render(viji, p5)` (required), `setup(viji, p5)` (optional)"
+          "markdown": "See [External Libraries](/native/external-libraries#threejs) for detailed patterns with Three.js and other libraries.\r\n\r\n---\r\n\r\n## P5.js Renderer\r\n\r\nThe P5.js renderer gives you the familiar Processing/P5.js creative coding API. Viji loads P5.js automatically when you use `// @renderer p5`, so there's no installation or setup to worry about. Add **`webgl`** after `p5` on that same line (`// @renderer p5 webgl`) to switch the main canvas to P5's WEBGL renderer for 3D and shader-based drawing.\r\n\r\n**Entry points:** `render(viji, p5)` (required), `setup(viji, p5)` (optional)"
         },
         {
           "type": "live-example",
@@ -963,7 +963,7 @@ export const docsApi = {
         },
         {
           "type": "text",
-          "markdown": "> [!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(p5.width / 2, p5.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**Key characteristics:**\r\n\r\n- **`setup()` is optional.** Use it for one-time configuration like `p5.colorMode()`. If you don't need it, omit it entirely.\r\n- **`render()` replaces `draw()`.** P5's built-in draw loop is disabled; Viji calls your `render()` function each frame.\r\n- **No `createCanvas()`.** The canvas is created and managed by Viji. The mode (2D or WEBGL) comes from the directive itself, either `// @renderer p5` or `// @renderer p5 webgl`. Never call `createCanvas(..., p5.WEBGL)` yourself.\r\n- **Viji APIs for input.** Use [`viji.pointer`](/p5/pointer) for cross-device interactions, or [`viji.mouse`](/p5/mouse), [`viji.keyboard`](/p5/keyboard), and [`viji.touches`](/p5/touch) for device-specific access, instead of P5's `mouseX`, `keyIsPressed`, etc.\r\n- **No `preload()`.** Load assets using Viji's [`viji.image()`](/native/parameters/image) parameter, or use `fetch()` in `setup()`.\r\n\r\nIf you have existing P5.js sketches, see [Converting P5 Sketches](/p5/converting-sketches) for a step-by-step migration guide.\r\n\r\n---\r\n\r\n## Shader Renderer\r\n\r\nThe shader renderer lets you write GLSL fragment shaders that run directly on the GPU. Viji injects all uniform declarations for you, so you write only your helper functions and `void main()`.\r\n\r\n**Entry point:** `void main()` (GLSL)"
+          "markdown": "> [!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(p5.width / 2, p5.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**Key characteristics:**\r\n\r\n- **`setup()` is optional.** Use it for one-time configuration like `p5.colorMode()`. If you don't need it, omit it entirely.\r\n- **`render()` replaces `draw()`.** P5's built-in draw loop is disabled; Viji calls your `render()` function each frame.\r\n- **No `createCanvas()`.** The canvas is created and managed by Viji. The mode (2D or WEBGL) comes from the directive itself, either `// @renderer p5` or `// @renderer p5 webgl`. Never call `createCanvas(..., p5.WEBGL)` yourself.\r\n- **Viji APIs for input.** Use [`viji.pointer`](/p5/pointer#why-use-pointer) for cross-device interactions, or [`viji.mouse`](/p5/mouse#position), [`viji.keyboard`](/p5/keyboard#api-reference), and [`viji.touches`](/p5/touch#touchapi-vijitouches) for device-specific access, instead of P5's `mouseX`, `keyIsPressed`, etc.\r\n- **No `preload()`.** Load assets using Viji's [`viji.image()`](/native/parameters/image) parameter, or use `fetch()` in `setup()`.\r\n\r\nIf you have existing P5.js sketches, see [Converting P5 Sketches](/p5/converting-sketches) for a step-by-step migration guide.\r\n\r\n---\r\n\r\n## Shader Renderer\r\n\r\nThe shader renderer lets you write GLSL fragment shaders that run directly on the GPU. Viji injects all uniform declarations for you, so you write only your helper functions and `void main()`.\r\n\r\n**Entry point:** `void main()` (GLSL)"
         },
         {
           "type": "live-example",
@@ -1061,7 +1061,7 @@ export const docsApi = {
       "content": [
         {
           "type": "text",
-          "markdown": "# Best Practices\r\n\r\nThe rules below apply to every Viji scene, no matter which renderer you use. They cover the few topics where the same constraint has to hold across Native, P5, and Shader at once: animation timing, resolution, audio/video guards, and a handful of safety rules the runtime expects. Get them right and your scenes look correct at any resolution, run smoothly at any frame rate, and stay reliable across devices.\r\n\r\nLooking for a specific bug? [Common Mistakes](../common-mistakes/) has wrong/right pairs you can scan.\r\n\r\n---\r\n\r\n## Animation Timing Across Renderers\r\n\r\nViji exposes two timing values that are equivalent across all three renderers:\r\n\r\n- **`viji.time`** / **`u_time`**: seconds since the scene started. Use it for animation at a **constant** speed (oscillations, hue cycling, periodic events).\r\n- **`viji.deltaTime`** / **`u_deltaTime`**: seconds since the last frame. Use it when you accumulate values smoothly regardless of frame rate (movement, physics, fading), or when **animation speed is controlled by a parameter**.\r\n\r\n```javascript\r\n// viji.time: animation at a constant speed\r\nconst angle = viji.time * 2.0; // fixed 2 rad/s, no parameter involved\r\nconst x = Math.cos(angle) * radius;\r\n\r\n// viji.deltaTime: accumulation that stays smooth at any FPS\r\nposition += velocity * viji.deltaTime;\r\nopacity -= fadeRate * viji.deltaTime;\r\n```\r\n\r\n### When to use which\r\n\r\n| Use Case | Property | Why |\r\n|----------|----------|-----|\r\n| Oscillation at **constant** speed | `viji.time` / `u_time` | Depends on absolute position in time |\r\n| Hue cycling at constant rate | `viji.time` / `u_time` | Needs a continuous, monotonic input |\r\n| Oscillation at **parameter-driven** speed | accumulator with `viji.deltaTime` / `@viji-accumulator` | Avoids phase jumps when the slider changes |\r\n| Position accumulation | `viji.deltaTime` | Must advance the same amount per second, regardless of FPS |\r\n| Physics / velocity | `viji.deltaTime` | Distance = speed × time elapsed |\r\n| Fading / easing | `viji.deltaTime` | Progress should be per-second, not per-frame |\r\n| Periodic events | `viji.time` / `u_time` | Trigger at fixed time intervals |\r\n\r\n**Rule of thumb:** if the speed multiplier is a **constant**, `viji.time * constant` is fine. If the speed comes from a **parameter** (slider, etc.), accumulate with `viji.deltaTime` to prevent jumps.\r\n\r\n### Accumulator Pattern: Parameter-Driven Speed\r\n\r\nWhen animation speed is controlled by a user parameter, **never** multiply `viji.time` (or `u_time`) by the parameter directly. Changing the slider recalculates the entire phase history with the new value and causes a visible jump. Instead, accumulate `speed × deltaTime` incrementally so the slider only affects future frames.\r\n\r\nThe pattern is the same across all three renderers:\r\n\r\n```javascript\r\n// Native\r\nconst speed = viji.slider(1, { min: 0.1, max: 5 });\r\nlet phase = 0;\r\nfunction render(viji) {\r\n  phase += speed.value * viji.deltaTime;\r\n  const wave = Math.sin(phase);\r\n}\r\n```\r\n\r\n```javascript\r\n// @renderer p5\r\nconst spin = viji.slider(1, { min: 0.1, max: 5, label: 'Spin' });\r\nlet phase = 0;\r\nfunction render(viji, p5) {\r\n  phase += spin.value * viji.deltaTime;\r\n  p5.rotate(phase);\r\n}\r\n```\r\n\r\n```glsl\r\n// @renderer shader\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\nvoid main() {\r\n  // Use `phase` instead of `u_time * speed`\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\nFor shaders, the [`@viji-accumulator`](/shader/parameters/accumulator) directive integrates `speed × deltaTime` into the uniform automatically: there is no manual loop variable to maintain.\r\n\r\n### Nested Multiplication: The Same Trap After Accumulating\r\n\r\nAfter adopting the accumulator pattern, a common follow-up mistake is multiplying the accumulated value by another parameter. This causes the same jump because the full accumulated history is rescaled instantly:\r\n\r\n```javascript\r\n// Wrong: rotation jumps when rotationSpeed slider changes\r\nphase += speed.value * viji.deltaTime;        // accumulates correctly\r\nconst rotation = phase * rotationSpeed.value; // jumps when rotationSpeed changes\r\n```\r\n\r\n```javascript\r\n// Right: each parameter-driven value gets its own accumulator\r\nlet phase = 0;\r\nlet rotPhase = 0;\r\nfunction render(viji) {\r\n  phase += speed.value * viji.deltaTime;\r\n  rotPhase += speed.value * rotationSpeed.value * viji.deltaTime;\r\n  const rotation = rotPhase; // smooth at any slider value\r\n}\r\n```\r\n\r\n**Rule of thumb:** any time a growing value (accumulated phase, elapsed time) is multiplied by a user parameter, the result will jump when that parameter changes. Each such product needs its own `deltaTime`-based accumulator (or its own `@viji-accumulator` in shaders).\r\n\r\n> [!NOTE]\r\n> When animation speed is driven by a parameter, always use the accumulator pattern (`deltaTime` in JS/P5, `@viji-accumulator` in shaders) to prevent phase jumps. The same rule extends to nested multiplications: never multiply an accumulated value by a parameter.\r\n\r\n**See also:** [`native/timing`](/native/timing), [`shader/timing`](/shader/timing), [`shader/parameters/accumulator`](/shader/parameters/accumulator), [`p5/timing`](/p5/timing).\r\n\r\n---\r\n\r\n## Resolution Agnosticism Across Renderers\r\n\r\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 or assume a specific canvas size.\r\n\r\nThe dimensions are exposed differently per renderer but the rule is identical:\r\n\r\n- **Native + P5**: `viji.width` and `viji.height` (also `p5.width` / `p5.height`, which Viji keeps in sync)\r\n- **Shader**: `u_resolution` (a `vec2`)\r\n\r\n### Native and P5\r\n\r\n```javascript\r\n// Good: scales to any resolution\r\nconst centerX = viji.width / 2;\r\nconst centerY = viji.height / 2;\r\nconst radius = Math.min(viji.width, viji.height) * 0.1;\r\n\r\n// Bad: breaks at different resolutions\r\nconst centerX = 960;\r\nconst centerY = 540;\r\nconst radius = 50;\r\n```\r\n\r\nFor parameters that control sizes, use normalized values (0-1) and multiply by canvas dimensions:\r\n\r\n```javascript\r\nconst size = viji.slider(0.15, { min: 0.02, max: 0.5, label: 'Size' });\r\n\r\nfunction render(viji) {\r\n  const pixelSize = size.value * Math.min(viji.width, viji.height);\r\n}\r\n```\r\n\r\n### Shader\r\n\r\n```glsl\r\nvoid main() {\r\n  vec2 uv = gl_FragCoord.xy / u_resolution; // normalized 0-1 coordinates\r\n  float aspect = u_resolution.x / u_resolution.y;\r\n  // ...\r\n}\r\n```\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**See also:** [`native/canvas-context`](/native/canvas-context), [`p5/canvas-resolution`](/p5/canvas-resolution), [`shader/resolution`](/shader/resolution).\r\n\r\n---\r\n\r\n## Audio and Video `isConnected` Guards\r\n\r\nAudio and video streams are provided by the host and may not always be available. Always check `isConnected` before reading audio bands, drawing video frames, or running CV inference. Without the guard your scene reads zeros or undefined values silently, with no indication that the input is missing.\r\n\r\nThe rule applies in three places:\r\n\r\n1. **Default audio source** (`viji.audio.isConnected`)\r\n2. **Default video source** (`viji.video.isConnected`)\r\n3. **Each external device entry** in `viji.devices[]` (`device.audio.isConnected`, `device.video.isConnected`)\r\n\r\n```javascript\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  for (const device of viji.devices) {\r\n    if (device.audio?.isConnected) {\r\n      const level = device.audio.volume.current;\r\n      // ... per-device audio reaction\r\n    }\r\n    if (device.video?.isConnected && device.video.currentFrame) {\r\n      // ... per-device video draw\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nThe same checks work in P5 (replace canvas calls with `p5.image(...)`). In shaders, default audio and video uniforms safely fall back to `0.0` (or black for the `u_video` texture) when nothing is connected, so a typical scene can simply use the values without an explicit guard. When you read from a specific stream or device, gate on the corresponding boolean uniform: `u_audioStream{N}Connected`, `u_videoStream{N}Connected`, or `u_device{N}Connected`.\r\n\r\n**See also:** [`native/audio`](/native/audio), [`native/video`](/native/video), [`p5/audio`](/p5/audio), [`p5/video`](/p5/video), [`shader/audio`](/shader/audio), [`shader/video`](/shader/video).\r\n\r\n---\r\n\r\n## Worker Environment\r\n\r\nScenes run inside a Web Worker. There is no DOM. Use `viji.image()` for images, the `viji.audio` / `viji.video` APIs for media, and `fetch()` for external data.\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. One exception: `fetch()` is available, so you can load external data (JSON, etc.) from CDNs.\r\n\r\n**See also:** [`native/canvas-context`](/native/canvas-context) for the worker context model and the canonical `useContext()` pattern.\r\n\r\n---\r\n\r\n## Parameters at Top Level\r\n\r\nParameter helpers (`viji.slider()`, `viji.color()`, etc.) register UI controls with the host. They must run **once** during initialization, never inside `render()`.\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\nFor P5, the same rule applies, with one extra constraint: parameters must also not be declared inside `setup()`, since they need to be registered before `setup()` runs.\r\n\r\n**See also:** [`native/parameters`](/native/parameters), [`p5/parameters`](/p5/parameters), [`shader/parameters`](/shader/parameters).\r\n\r\n---\r\n\r\n## Memory in the Render Loop\r\n\r\nAllocating objects, arrays, or strings inside `render()` creates garbage-collection pressure and frame drops. Pre-allocate at the top level and mutate in place.\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\nThis is especially important for particle systems, arrays of positions, or any data structure that persists across frames.\r\n\r\n**See also:** [`native/quickstart`](/native/quickstart), [`p5/quickstart`](/p5/quickstart).\r\n\r\n---\r\n\r\n## Computer Vision Costs\r\n\r\nCV features (face detection, hand tracking, pose detection, etc.) are powerful but expensive. Each feature runs ML inference in its own WebGL context. Understand the relative cost before enabling more than one.\r\n\r\n| Feature | Relative Cost | WebGL Contexts | Notes |\r\n|---------|--------------|----------------|-------|\r\n| Face Detection | Low | 1 | Bounding box + basic landmarks only |\r\n| Face Mesh | Medium-High | 1 | 468 facial landmarks, requires more processing |\r\n| Emotion Detection | High | 1 | 7 expressions + 52 blendshape coefficients |\r\n| Hand Tracking | Medium | 1 | Up to 2 hands, 21 landmarks each |\r\n| Pose Detection | Medium | 1 | 33 body landmarks |\r\n| Body Segmentation | High | 1 | Per-pixel mask, large tensor output |\r\n\r\n> [!WARNING]\r\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.\r\n\r\n> [!TIP]\r\n> **Best practice:** Don't enable CV features by default. Instead, expose a toggle parameter so users can activate them on capable devices:\r\n> ```javascript\r\n> const useFace = viji.toggle(false, { label: 'Enable Face Detection', category: 'video' });\r\n> if (useFace.value) {\r\n>   await viji.video.cv.enableFaceDetection(true);\r\n> }\r\n> ```\r\n\r\nThe cost rule applies in all three renderers: CV is most often used in Native scenes, but it is reachable from P5 and Shader through the same `viji.video.cv.enableX()` / `viji.video.cv.disableX()` API.\r\n\r\n**See also:** [`native/video`](/native/video), [`p5/video`](/p5/video), [`shader/video`](/shader/video).\r\n\r\n---\r\n\r\n## Parameter Categories\r\n\r\nParameters that depend on an external input (audio, video / camera / CV, or user interaction) must include the matching `category` so the host UI can show or hide them based on whether that input is active.\r\n\r\n| Input | Required `category` |\r\n|-------|---------------------|\r\n| Audio-related parameters (volume sensitivity, bass reactivity, beat response) | `'audio'` |\r\n| Video/camera/CV-related parameters (video opacity, CV sensitivity, segmentation toggles) | `'video'` |\r\n| Interaction-related parameters (mouse attraction, keyboard speed, touch sensitivity) | `'interaction'` |\r\n| Everything else (colors, sizes, speeds, shapes) | `'general'` (default: can be omitted) |\r\n\r\n**Native / P5:**\r\n\r\n```javascript\r\n// Wrong\r\nconst audioReact = viji.toggle(true, { label: 'Audio Reactive', group: 'audio' });\r\n\r\n// Right\r\nconst audioReact = viji.toggle(true, { label: 'Audio Reactive', group: 'audio', category: 'audio' });\r\n```\r\n\r\n**Shader:** use the `category:` key in `@viji-*` directives:\r\n\r\n```glsl\r\n// @viji-toggle:audioReactive label:\"Audio Reactive\" default:true group:audio category:audio\r\n```\r\n\r\n> [!NOTE]\r\n> `group` controls layout (which section the parameter appears in). `category` controls visibility (whether the parameter is shown at all). They are orthogonal: use both when appropriate.\r\n\r\n**See also:** [`native/parameters/categories`](/native/parameters/categories), [`p5/parameters/categories`](/p5/parameters/categories), [`shader/parameters/categories`](/shader/parameters/categories).\r\n\r\n---\r\n\r\n## Canvas Context Selection\r\n\r\nUse `viji.useContext()` to obtain a 2D or WebGL context for the scene canvas, not `viji.canvas.getContext()`. A canvas only supports one context type for its entire lifetime: pick one and stay with it.\r\n\r\n> [!WARNING]\r\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.\r\n\r\n**See also:** [`native/canvas-context`](/native/canvas-context).\r\n\r\n---\r\n\r\n## Related\r\n\r\n- [Common Mistakes](../common-mistakes/): symptom catalog with wrong/right pairs.\r\n- [Renderers Overview](../renderers-overview/): choosing the right renderer."
+          "markdown": "# Best Practices\r\n\r\nThe rules below apply to every Viji scene, no matter which renderer you use. They cover the few topics where the same constraint has to hold across Native, P5, and Shader at once: animation timing, resolution, audio/video guards, and a handful of safety rules the runtime expects. Get them right and your scenes look correct at any resolution, run smoothly at any frame rate, and stay reliable across devices.\r\n\r\nLooking for a specific bug? [Common Mistakes](../common-mistakes/) has wrong/right pairs you can scan.\r\n\r\n---\r\n\r\n## Animation Timing Across Renderers\r\n\r\nViji exposes two timing values that are equivalent across all three renderers:\r\n\r\n- **`viji.time`** / **`u_time`**: seconds since the scene started. Use it for animation at a **constant** speed (oscillations, hue cycling, periodic events).\r\n- **`viji.deltaTime`** / **`u_deltaTime`**: seconds since the last frame. Use it when you accumulate values smoothly regardless of frame rate (movement, physics, fading), or when **animation speed is controlled by a parameter**.\r\n\r\n```javascript\r\n// viji.time: animation at a constant speed\r\nconst angle = viji.time * 2.0; // fixed 2 rad/s, no parameter involved\r\nconst x = Math.cos(angle) * radius;\r\n\r\n// viji.deltaTime: accumulation that stays smooth at any FPS\r\nposition += velocity * viji.deltaTime;\r\nopacity -= fadeRate * viji.deltaTime;\r\n```\r\n\r\n### When to use which\r\n\r\n| Use Case | Property | Why |\r\n|----------|----------|-----|\r\n| Oscillation at **constant** speed | `viji.time` / `u_time` | Depends on absolute position in time |\r\n| Hue cycling at constant rate | `viji.time` / `u_time` | Needs a continuous, monotonic input |\r\n| Oscillation at **parameter-driven** speed | accumulator with `viji.deltaTime` / `@viji-accumulator` | Avoids phase jumps when the slider changes |\r\n| Position accumulation | `viji.deltaTime` | Must advance the same amount per second, regardless of FPS |\r\n| Physics / velocity | `viji.deltaTime` | Distance = speed × time elapsed |\r\n| Fading / easing | `viji.deltaTime` | Progress should be per-second, not per-frame |\r\n| Periodic events | `viji.time` / `u_time` | Trigger at fixed time intervals |\r\n\r\n**Rule of thumb:** if the speed multiplier is a **constant**, `viji.time * constant` is fine. If the speed comes from a **parameter** (slider, etc.), accumulate with `viji.deltaTime` to prevent jumps.\r\n\r\n### Accumulator Pattern: Parameter-Driven Speed\r\n\r\nWhen animation speed is controlled by a user parameter, **never** multiply `viji.time` (or `u_time`) by the parameter directly. Changing the slider recalculates the entire phase history with the new value and causes a visible jump. Instead, accumulate `speed × deltaTime` incrementally so the slider only affects future frames.\r\n\r\nThe pattern is the same across all three renderers:\r\n\r\n```javascript\r\n// Native\r\nconst speed = viji.slider(1, { min: 0.1, max: 5 });\r\nlet phase = 0;\r\nfunction render(viji) {\r\n  phase += speed.value * viji.deltaTime;\r\n  const wave = Math.sin(phase);\r\n}\r\n```\r\n\r\n```javascript\r\n// @renderer p5\r\nconst spin = viji.slider(1, { min: 0.1, max: 5, label: 'Spin' });\r\nlet phase = 0;\r\nfunction render(viji, p5) {\r\n  phase += spin.value * viji.deltaTime;\r\n  p5.rotate(phase);\r\n}\r\n```\r\n\r\n```glsl\r\n// @renderer shader\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\nvoid main() {\r\n  // Use `phase` instead of `u_time * speed`\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\nFor shaders, the [`@viji-accumulator`](/shader/parameters/accumulator) directive integrates `speed × deltaTime` into the uniform automatically: there is no manual loop variable to maintain.\r\n\r\n### Nested Multiplication: The Same Trap After Accumulating\r\n\r\nAfter adopting the accumulator pattern, a common follow-up mistake is multiplying the accumulated value by another parameter. This causes the same jump because the full accumulated history is rescaled instantly:\r\n\r\n```javascript\r\n// Wrong: rotation jumps when rotationSpeed slider changes\r\nphase += speed.value * viji.deltaTime;        // accumulates correctly\r\nconst rotation = phase * rotationSpeed.value; // jumps when rotationSpeed changes\r\n```\r\n\r\n```javascript\r\n// Right: each parameter-driven value gets its own accumulator\r\nlet phase = 0;\r\nlet rotPhase = 0;\r\nfunction render(viji) {\r\n  phase += speed.value * viji.deltaTime;\r\n  rotPhase += speed.value * rotationSpeed.value * viji.deltaTime;\r\n  const rotation = rotPhase; // smooth at any slider value\r\n}\r\n```\r\n\r\n**Rule of thumb:** any time a growing value (accumulated phase, elapsed time) is multiplied by a user parameter, the result will jump when that parameter changes. Each such product needs its own `deltaTime`-based accumulator (or its own `@viji-accumulator` in shaders).\r\n\r\n> [!NOTE]\r\n> When animation speed is driven by a parameter, always use the accumulator pattern (`deltaTime` in JS/P5, `@viji-accumulator` in shaders) to prevent phase jumps. The same rule extends to nested multiplications: never multiply an accumulated value by a parameter.\r\n\r\n**See also:** [`native/timing`](/native/timing#when-to-use-vijitime-vs-vijideltatime), [`shader/timing`](/shader/timing#speed-controlled-animation-the-accumulator), [`shader/parameters/accumulator`](/shader/parameters/accumulator#basic-usage), [`p5/timing`](/p5/timing#when-to-use-vijitime-vs-vijideltatime).\r\n\r\n---\r\n\r\n## Resolution Agnosticism Across Renderers\r\n\r\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 or assume a specific canvas size.\r\n\r\nThe dimensions are exposed differently per renderer but the rule is identical:\r\n\r\n- **Native + P5**: `viji.width` and `viji.height` (also `p5.width` / `p5.height`, which Viji keeps in sync)\r\n- **Shader**: `u_resolution` (a `vec2`)\r\n\r\n### Native and P5\r\n\r\n```javascript\r\n// Good: scales to any resolution\r\nconst centerX = viji.width / 2;\r\nconst centerY = viji.height / 2;\r\nconst radius = Math.min(viji.width, viji.height) * 0.1;\r\n\r\n// Bad: breaks at different resolutions\r\nconst centerX = 960;\r\nconst centerY = 540;\r\nconst radius = 50;\r\n```\r\n\r\nFor parameters that control sizes, use normalized values (0-1) and multiply by canvas dimensions:\r\n\r\n```javascript\r\nconst size = viji.slider(0.15, { min: 0.02, max: 0.5, label: 'Size' });\r\n\r\nfunction render(viji) {\r\n  const pixelSize = size.value * Math.min(viji.width, viji.height);\r\n}\r\n```\r\n\r\n### Shader\r\n\r\n```glsl\r\nvoid main() {\r\n  vec2 uv = gl_FragCoord.xy / u_resolution; // normalized 0-1 coordinates\r\n  float aspect = u_resolution.x / u_resolution.y;\r\n  // ...\r\n}\r\n```\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**See also:** [`native/canvas-context`](/native/canvas-context), [`p5/canvas-resolution`](/p5/canvas-resolution), [`shader/resolution`](/shader/resolution).\r\n\r\n---\r\n\r\n## Audio and Video `isConnected` Guards\r\n\r\nAudio and video streams are provided by the host and may not always be available. Always check `isConnected` before reading audio bands, drawing video frames, or running CV inference. Without the guard your scene reads zeros or undefined values silently, with no indication that the input is missing.\r\n\r\nThe rule applies in three places:\r\n\r\n1. **Default audio source** (`viji.audio.isConnected`)\r\n2. **Default video source** (`viji.video.isConnected`)\r\n3. **Each external device entry** in `viji.devices[]` (`device.audio.isConnected`, `device.video.isConnected`)\r\n\r\n```javascript\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  for (const device of viji.devices) {\r\n    if (device.audio?.isConnected) {\r\n      const level = device.audio.volume.current;\r\n      // ... per-device audio reaction\r\n    }\r\n    if (device.video?.isConnected && device.video.currentFrame) {\r\n      // ... per-device video draw\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nThe same checks work in P5 (replace canvas calls with `p5.image(...)`). In shaders, default audio and video uniforms safely fall back to `0.0` (or black for the `u_video` texture) when nothing is connected, so a typical scene can simply use the values without an explicit guard. When you read from a specific stream or device, gate on the corresponding boolean uniform: `u_audioStream{N}Connected`, `u_videoStream{N}Connected`, or `u_device{N}Connected`.\r\n\r\n**See also:** [`native/audio`](/native/audio), [`native/video`](/native/video), [`p5/audio`](/p5/audio), [`p5/video`](/p5/video), [`shader/audio`](/shader/audio), [`shader/video`](/shader/video).\r\n\r\n---\r\n\r\n## Worker Environment\r\n\r\nScenes run inside a Web Worker. There is no DOM. Use `viji.image()` for images, the `viji.audio` / `viji.video` APIs for media, and `fetch()` for external data.\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. One exception: `fetch()` is available, so you can load external data (JSON, etc.) from CDNs.\r\n\r\n**See also:** [`native/canvas-context`](/native/canvas-context) for the worker context model and the canonical `useContext()` pattern.\r\n\r\n---\r\n\r\n## Parameters at Top Level\r\n\r\nParameter helpers (`viji.slider()`, `viji.color()`, etc.) register UI controls with the host. They must run **once** during initialization, never inside `render()`.\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\nFor P5, the same rule applies, with one extra constraint: parameters must also not be declared inside `setup()`, since they need to be registered before `setup()` runs.\r\n\r\n**See also:** [`native/parameters`](/native/parameters), [`p5/parameters`](/p5/parameters), [`shader/parameters`](/shader/parameters).\r\n\r\n---\r\n\r\n## Memory in the Render Loop\r\n\r\nAllocating objects, arrays, or strings inside `render()` creates garbage-collection pressure and frame drops. Pre-allocate at the top level and mutate in place.\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\nThis is especially important for particle systems, arrays of positions, or any data structure that persists across frames.\r\n\r\n**See also:** [`native/quickstart`](/native/quickstart), [`p5/quickstart`](/p5/quickstart).\r\n\r\n---\r\n\r\n## Computer Vision Costs\r\n\r\nCV features (face detection, hand tracking, pose detection, etc.) are powerful but expensive. Each feature runs ML inference in its own WebGL context. Understand the relative cost before enabling more than one.\r\n\r\n| Feature | Relative Cost | WebGL Contexts | Notes |\r\n|---------|--------------|----------------|-------|\r\n| Face Detection | Low | 1 | Bounding box + basic landmarks only |\r\n| Face Mesh | Medium-High | 1 | 468 facial landmarks, requires more processing |\r\n| Emotion Detection | High | 1 | 7 expressions + 52 blendshape coefficients |\r\n| Hand Tracking | Medium | 1 | Up to 2 hands, 21 landmarks each |\r\n| Pose Detection | Medium | 1 | 33 body landmarks |\r\n| Body Segmentation | High | 1 | Per-pixel mask, large tensor output |\r\n\r\n> [!WARNING]\r\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.\r\n\r\n> [!TIP]\r\n> **Best practice:** Don't enable CV features by default. Instead, expose a toggle parameter so users can activate them on capable devices:\r\n> ```javascript\r\n> const useFace = viji.toggle(false, { label: 'Enable Face Detection', category: 'video' });\r\n> if (useFace.value) {\r\n>   await viji.video.cv.enableFaceDetection(true);\r\n> }\r\n> ```\r\n\r\nThe cost rule applies in all three renderers: CV is most often used in Native scenes, but it is reachable from P5 and Shader through the same `viji.video.cv.enableX()` / `viji.video.cv.disableX()` API.\r\n\r\n**See also:** [`native/video`](/native/video), [`p5/video`](/p5/video), [`shader/video`](/shader/video).\r\n\r\n---\r\n\r\n## Parameter Categories\r\n\r\nParameters that depend on an external input (audio, video / camera / CV, or user interaction) must include the matching `category` so the host UI can show or hide them based on whether that input is active.\r\n\r\n| Input | Required `category` |\r\n|-------|---------------------|\r\n| Audio-related parameters (volume sensitivity, bass reactivity, beat response) | `'audio'` |\r\n| Video/camera/CV-related parameters (video opacity, CV sensitivity, segmentation toggles) | `'video'` |\r\n| Interaction-related parameters (mouse attraction, keyboard speed, touch sensitivity) | `'interaction'` |\r\n| Everything else (colors, sizes, speeds, shapes) | `'general'` (default: can be omitted) |\r\n\r\n**Native / P5:**\r\n\r\n```javascript\r\n// Wrong\r\nconst audioReact = viji.toggle(true, { label: 'Audio Reactive', group: 'audio' });\r\n\r\n// Right\r\nconst audioReact = viji.toggle(true, { label: 'Audio Reactive', group: 'audio', category: 'audio' });\r\n```\r\n\r\n**Shader:** use the `category:` key in `@viji-*` directives:\r\n\r\n```glsl\r\n// @viji-toggle:audioReactive label:\"Audio Reactive\" default:true group:audio category:audio\r\n```\r\n\r\n> [!NOTE]\r\n> `group` controls layout (which section the parameter appears in). `category` controls visibility (whether the parameter is shown at all). They are orthogonal: use both when appropriate.\r\n\r\n**See also:** [`native/parameters/categories`](/native/parameters/categories), [`p5/parameters/categories`](/p5/parameters/categories), [`shader/parameters/categories`](/shader/parameters/categories).\r\n\r\n---\r\n\r\n## Canvas Context Selection\r\n\r\nUse `viji.useContext()` to obtain a 2D or WebGL context for the scene canvas, not `viji.canvas.getContext()`. A canvas only supports one context type for its entire lifetime: pick one and stay with it.\r\n\r\n> [!WARNING]\r\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.\r\n\r\n**See also:** [`native/canvas-context`](/native/canvas-context).\r\n\r\n---\r\n\r\n## Related\r\n\r\n- [Common Mistakes](../common-mistakes/): symptom catalog with wrong/right pairs.\r\n- [Renderers Overview](../renderers-overview/): choosing the right renderer."
         }
       ]
     },
@@ -1257,7 +1257,7 @@ export const docsApi = {
       "content": [
         {
           "type": "text",
-          "markdown": "# Create Your First Scene\r\n\r\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.\r\n\r\n## How It Works\r\n\r\n1. Copy the prompt below and paste it into your AI assistant (ChatGPT, Claude, etc.).\r\n2. Describe what you want to create: as simple or detailed as you like.\r\n3. The AI will ask questions, recommend a renderer, and generate a complete scene.\r\n\r\n## Renderer Quick Comparison\r\n\r\n| | Native | P5 | Shader |\r\n|---|---|---|---|\r\n| **Language** | JavaScript (Canvas 2D / WebGL) | JavaScript + P5.js | GLSL (GPU fragment shader) |\r\n| **Best for** | Full control, Three.js, generative art | Creative coding, familiar P5 API, shapes & colors | GPU effects, patterns, raymarching, post-processing |\r\n| **Learning curve** | Medium | Low (if you know P5) | Medium-High |\r\n| **External libraries** | Yes (Three.js, etc.) | P5.js built-in | No |\r\n| **3D support** | Yes (WebGL, Three.js) | Yes (via `// @renderer p5 webgl`) | Yes (raymarching, SDF) |\r\n\r\n## The Prompt\r\n\r\n````\r\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.\r\n\r\n## YOUR BEHAVIOR\r\n\r\n1. Ask the artist what they want to create. If their description is vague, ask clarifying questions:\r\n   - What kind of visual? (patterns, shapes, particles, video effects, 3D, etc.)\r\n   - Should it react to audio/music?\r\n   - Should it use a camera/video?\r\n   - Should it respond to mouse/touch/device tilt?\r\n   - What mood or style? (abstract, organic, geometric, glitchy, minimal, etc.)\r\n2. Recommend a renderer based on what the artist wants to achieve. Coding experience is NOT a selection criterion: with your help, every renderer is accessible to artists at every level. Choose the renderer whose strengths best fit the goal:\r\n   - **Per-pixel GPU effects** (raymarching, fractals, distance fields, full-screen post-processing, generative patterns that read every pixel) → recommend **Shader**.\r\n   - **3D scenes with Three.js, custom WebGL, pixel-perfect Canvas 2D, or any external library via `await import()`** → recommend **Native**.\r\n   - **Classic creative-coding shapes** (`p5.ellipse`, `p5.line`, `p5.bezier`), **color modes, transforms, particle systems with simple drawing**, or **an existing P5 sketch the artist already has** → recommend **P5**.\r\n   - Audio reactivity, camera/CV reactivity, and parameters work in every renderer: pick based on the visual style, not on data sources.\r\n   - You may briefly mention that Shader (GLSL) and Native + Three.js have a steeper conceptual learning curve, but never use this as the primary selection criterion. The artist asked for help; help them with the renderer that fits the goal.\r\n3. Generate a complete, working scene with parameters for everything the artist might want to adjust.\r\n4. Explain what the code does in simple terms.\r\n5. Suggest ways to iterate and improve, and invite the artist to ask for changes.\r\n\r\n## RENDERER DECISION MATRIX\r\n\r\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.\r\n- **P5**: Uses P5.js v1.9.4 with familiar `setup()`/`render()` pattern. Best for creative coding with shapes, colors, transforms, text. Use `// @renderer p5` for a 2D canvas, or `// @renderer p5 webgl` for P5's WEBGL / 3D mode on the main canvas (never call `createCanvas` yourself).\r\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.\r\n\r\n## REFERENCE (source of truth)\r\n\r\nThe resources below are AUTHORITATIVE. The rules, tables, and templates in this prompt are a summary; if anything ever conflicts, the linked files win.\r\n\r\n**If you have web/file access:**\r\n- REQUIRED before generating code: fetch and skim the Tier-1 resources. Use them to verify exact API names, types, and uniform availability for the renderer you recommend.\r\n- ON DEMAND: fetch from Tier-2 resources when the artist requests something not fully covered by the rules and tables in this prompt (e.g., specific P5.js function syntax, advanced CV data structures, behavior nuances, or full examples).\r\n\r\n**If you do NOT have web/file access:**\r\n- Use only the API surface explicitly named in this prompt.\r\n- Never invent property, method, or uniform names from memory.\r\n- If the artist asks for something not covered here, say so and ask the artist what they want; do NOT fabricate.\r\n\r\n**Tier 1 (always consult when accessible):**\r\n- TypeScript API types (Viji JS surface, all renderers): https://unpkg.com/@viji-dev/core/dist/artist-global.d.ts\r\n- Shader uniforms reference (all auto-injected uniforms with types and descriptions): https://unpkg.com/@viji-dev/core/dist/shader-uniforms.js\r\n\r\n**Tier 2 (consult when needed):**\r\n- Complete docs (every page + every live example): https://unpkg.com/@viji-dev/core/dist/docs-api.js\r\n- Bundled Viji + P5.js v1.9.4 types (large file: only fetch when verifying P5 syntax): https://unpkg.com/@viji-dev/core/dist/artist-global-p5.d.ts\r\n- P5.js v1.9.4 reference (HTML): https://p5js.org/reference/\r\n\r\n**Last-resort lookup:** https://www.npmjs.com/package/@viji-dev/core\r\n\r\n## VIJI ARCHITECTURE (all renderers)\r\n\r\n- Scenes run in a **Web Worker** with an **OffscreenCanvas**. There is NO DOM access.\r\n- The global `viji` object provides everything: canvas, timing, audio, video, CV, input, sensors, parameters.\r\n- **Top-level code** runs once (parameters, state, imports).\r\n- **`render(viji)` / `render(viji, p5)` / `void main()`** runs every frame.\r\n- `fetch()` is available. `window`, `document`, `Image()` are NOT.\r\n\r\n## SCENE STRUCTURE PER RENDERER\r\n\r\n### Native\r\n```javascript\r\nconst speed = viji.slider(1, { min: 0.1, max: 5, label: 'Speed' });\r\nlet angle = 0;\r\nfunction render(viji) {\r\n  const ctx = viji.useContext('2d');\r\n  angle += speed.value * viji.deltaTime;\r\n  ctx.clearRect(0, 0, viji.width, viji.height);\r\n  // draw with ctx...\r\n}\r\n```\r\n\r\n### P5\r\n```javascript\r\n// @renderer p5\r\nconst speed = viji.slider(1, { min: 0.1, max: 5, label: 'Speed' });\r\nlet angle = 0;\r\nfunction setup(viji, p5) { p5.colorMode(p5.HSB, 360, 100, 100); }\r\nfunction render(viji, p5) {\r\n  angle += speed.value * viji.deltaTime;\r\n  p5.background(0);\r\n  // draw with p5.circle(), p5.rect(), etc. (all need p5. prefix)\r\n}\r\n```\r\n\r\n### Shader (GLSL)\r\n```glsl\r\n// @renderer shader\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  vec2 uv = gl_FragCoord.xy / u_resolution;\r\n  gl_FragColor = vec4(uv, sin(phase) * 0.5 + 0.5, 1.0);\r\n}\r\n```\r\n\r\n## PARAMETERS (all renderers)\r\n\r\nArtists control scenes through parameters: declared once, shown as UI controls.\r\n\r\n**Native/P5 syntax** (top-level):\r\n```javascript\r\nviji.slider(default, { min, max, step, label, group, category })   // → .value: number\r\nviji.color(default, { label })                                      // → .value: '#rrggbb'\r\nviji.toggle(default, { label })                                     // → .value: boolean\r\nviji.select(default, { options: [...], label })                     // → .value: string|number\r\nviji.number(default, { min, max, step, label })                    // → .value: number\r\nviji.text(default, { label, maxLength })                            // → .value: string\r\nviji.image(null, { label })                                         // → .value: ImageBitmap|null\r\nviji.button({ label })                                              // → .value: boolean (1 frame)\r\nviji.coordinate(defaultValue, { step, label, description, group, category })  // → .value: { x, y }  // both -1 to 1\r\n```\r\n\r\n**Shader syntax** (comment directives):\r\n```glsl\r\n// @viji-slider:name label:\"Label\" default:1.0 min:0.0 max:5.0       → uniform float name;\r\n// @viji-color:name label:\"Color\" default:#ff6600                      → uniform vec3 name;\r\n// @viji-toggle:name label:\"Toggle\" default:false                      → uniform bool name;\r\n// @viji-select:name label:\"Mode\" default:0 options:[\"A\",\"B\"]         → uniform int name;\r\n// @viji-number:name label:\"Count\" default:10.0 min:1.0 max:100.0    → uniform float name;\r\n// @viji-image:name label:\"Texture\"                                    → uniform sampler2D name;\r\n// @viji-button:name label:\"Reset\"                                     → uniform bool name;\r\n// @viji-coordinate:name label:\"Label\" default:[0.0,0.0]                → uniform vec2 name;  // both -1 to 1\r\n// @viji-accumulator:name rate:speed                                   → uniform float name;\r\n```\r\n\r\n## AUDIO: `viji.audio` / Shader uniforms\r\n\r\nALWAYS check `isConnected` / `u_audioVolume > 0.0` before using audio data.\r\n\r\nKey members (Native/P5):\r\n- `isConnected`\r\n- `volume.current`, `volume.peak`, `volume.smoothed` (smoothed = 200ms decay envelope of `current`)\r\n- `bands.low`, `bands.lowMid`, `bands.mid`, `bands.highMid`, `bands.high` (instant band energies, 0-1)\r\n- `bands.lowSmoothed`, `bands.lowMidSmoothed`, `bands.midSmoothed`, `bands.highMidSmoothed`, `bands.highSmoothed` (each is a 150ms decay envelope of the matching instant band, sibling property; not nested)\r\n- `beat.kick`, `beat.snare`, `beat.hat`, `beat.any` (instant energies, 0-1)\r\n- `beat.kickSmoothed`, `beat.snareSmoothed`, `beat.hatSmoothed`, `beat.anySmoothed` (500ms decay envelopes, sibling properties)\r\n- `beat.triggers.kick`, `beat.triggers.snare`, `beat.triggers.hat`, `beat.triggers.any` (boolean, true for one frame on the corresponding beat)\r\n- `beat.bpm`, `beat.confidence`, `beat.isLocked`\r\n- `spectral.brightness`, `spectral.flatness`\r\n- `getFrequencyData()` -> `Uint8Array`, `getWaveform()` -> `Float32Array`\r\n\r\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`. Smoothed scalar variants exist as `u_audioVolumeSmoothed`, `u_audioLowSmoothed`-`u_audioHighSmoothed`, `u_audioKickSmoothed`-`u_audioAnySmoothed`.\r\n\r\n**`device.audio`** (when an external device in `viji.devices[]` connects with audio): an `AudioStreamAPI` exposing the same `isConnected`, `volume.{current,peak,smoothed}`, `bands.{low...high}` (and each `*Smoothed` sibling), `spectral.{brightness,flatness}`, `getFrequencyData()`, and `getWaveform()` as above. **No** beat detection, BPM, triggers, or events: those exist only on the main `viji.audio`.\r\n\r\n## VIDEO & CV: `viji.video` / Shader uniforms\r\n\r\nALWAYS check `isConnected` / `u_videoConnected` first.\r\n\r\nKey members (Native/P5):\r\n- `isConnected`, `currentFrame`, `frameWidth`, `frameHeight`, `frameRate`, `getFrameData()`\r\n- CV toggle: `cv.enableFaceDetection(bool)`, `cv.enableFaceMesh(bool)`, `cv.enableEmotionDetection(bool)`, `cv.enableHandTracking(bool)`, `cv.enablePoseDetection(bool)`, `cv.enableBodySegmentation(bool)`\r\n- NEVER enable CV by default: use toggle parameters.\r\n- Data: `faces[]` (FaceData), `hands[]` (HandData), `pose` (PoseData|null), `segmentation` (SegmentationData|null)\r\n\r\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`.\r\n\r\n## INPUT\r\n\r\n**Pointer** (unified): `viji.pointer.x/y`, `isDown`, `wasPressed`, `wasReleased`, `isInCanvas` / Shader: `u_pointer`, `u_pointerDown`, `u_pointerWasPressed`\r\n**Mouse**: `viji.mouse.x/y`, `isPressed`, `leftButton`, `wheelDelta` / Shader: `u_mouse`, `u_mousePressed`, `u_mouseWheel`\r\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\r\n**Touch**: `viji.touches.count`, `points[]`, `started[]`, `primary` / Shader: `u_touchCount`, `u_touch0`-`u_touch4`\r\n\r\n## SENSORS & EXTERNAL DEVICES\r\n\r\n**Device sensors**: `viji.device.motion` (acceleration, rotationRate), `viji.device.orientation` (alpha, beta, gamma) / Shader: `u_deviceAcceleration`, `u_deviceOrientation`\r\n**External devices**: `viji.devices[]` (each entry: `id`, `name`, `motion`, `orientation`, `video`, `audio`) / Shader: `u_device0`-`u_device7` camera textures, plus per-device sensor and connection uniforms. Device audio is exposed as `u_audioStream{i}*` scalar uniforms (volume, bands, spectral; no beat/BPM/FFT/waveform: those are main audio only).\r\n\r\n## CRITICAL RULES (all renderers)\r\n\r\n1. NEVER access `window`, `document`, `Image()`, `localStorage`. `fetch()` IS available.\r\n2. ALWAYS declare parameters at the TOP LEVEL, never inside `render()` / `main()`.\r\n3. ALWAYS use `viji.width`/`viji.height` or `u_resolution`: NEVER hardcode pixel sizes.\r\n4. ALWAYS use `viji.deltaTime` / `u_deltaTime` / `@viji-accumulator` for animation: NEVER count frames.\r\n5. NEVER multiply `viji.time` by a parameter (`viji.time * speed.value`), it causes animation jumps when the parameter changes. Use a `deltaTime` accumulator instead. In shaders, use `@viji-accumulator`. This also applies to nested multiplications: never multiply an accumulator by another parameter, give each speed its own accumulator.\r\n6. NEVER allocate objects/arrays inside `render()`: pre-allocate at top level.\r\n7. ALWAYS check `isConnected` / connection uniforms before using audio or video data.\r\n8. NEVER enable CV features by default: use toggle parameters.\r\n9. ALWAYS set `category` on input-dependent parameters: `category: 'audio'` for audio controls, `category: 'video'` for video/CV controls, `category: 'interaction'` for mouse/keyboard/touch controls. Omit `category` (defaults to `'general'`) for parameters that work without external input.\r\n10. In P5: ALWAYS prefix every P5 function/constant with `p5.`. NEVER use `createCanvas()`.\r\n11. In shaders: NEVER redeclare precision, built-in uniforms, or parameter uniforms. NEVER use `u_` prefix for parameter names.\r\n\r\n## FOR ADVANCED FEATURES\r\n\r\nWhen the artist needs the full API surface (detailed CV data structures, all 52 face blendshapes, full external-device interfaces, backbuffer/feedback in shaders, host-supplied additional sources `viji.videoStreams[]` / `viji.audioStreams[]` used by Viji's compositor), use the renderer-specific prompts:\r\n- **Native**: Use the \"Prompt: Native Scenes\" page for the complete API reference\r\n- **P5**: Use the \"Prompt: P5 Scenes\" page for the complete API reference + P5 mapping\r\n- **Shader**: Use the \"Prompt: Shader Scenes\" page for all 270+ uniforms and directive details\r\n\r\nNow help the artist create their Viji scene. Start by asking what they want to build.\r\n````\r\n\r\n## Usage\r\n\r\n1. Copy the entire prompt block above.\r\n2. Paste it into your AI assistant.\r\n3. Describe what you want: even something simple like \"colorful circles that react to music.\"\r\n4. The AI will guide you through choosing a renderer and building a scene.\r\n\r\n> [!TIP]\r\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.).\r\n\r\n## Next Steps\r\n\r\nOnce you've created your first scene and want more control, use the full renderer-specific prompts:\r\n\r\n- [Prompt: Native Scenes](/ai-prompts/native-prompt): exhaustive Native API prompt\r\n- [Prompt: P5 Scenes](/ai-prompts/p5-prompt): exhaustive P5 API prompt\r\n- [Prompt: Shader Scenes](/ai-prompts/shader-prompt): exhaustive Shader API prompt\r\n- [Prompting Tips](/ai-prompts/prompting-tips): how to get better results from AI\r\n\r\n## Related\r\n\r\n- [Overview](/getting-started/overview): what Viji is and how it works\r\n- [Best Practices](/getting-started/best-practices): essential patterns for reliable scenes\r\n- [Common Mistakes](/getting-started/common-mistakes): pitfalls to avoid"
+          "markdown": "# Create Your First Scene\r\n\r\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.\r\n\r\n## How It Works\r\n\r\n1. Copy the prompt below and paste it into your AI assistant (ChatGPT, Claude, etc.).\r\n2. Describe what you want to create: as simple or detailed as you like.\r\n3. The AI will ask questions, recommend a renderer, and generate a complete scene.\r\n\r\n## Renderer Quick Comparison\r\n\r\n| | Native | P5 | Shader |\r\n|---|---|---|---|\r\n| **Language** | JavaScript (Canvas 2D / WebGL) | JavaScript + P5.js | GLSL (GPU fragment shader) |\r\n| **Best for** | Full control, Three.js, generative art | Creative coding, familiar P5 API, shapes & colors | GPU effects, patterns, raymarching, post-processing |\r\n| **Learning curve** | Medium | Low (if you know P5) | Medium-High |\r\n| **External libraries** | Yes (Three.js, etc.) | P5.js built-in | No |\r\n| **3D support** | Yes (WebGL, Three.js) | Yes (via `// @renderer p5 webgl`) | Yes (raymarching, SDF) |\r\n\r\n## The Prompt\r\n\r\n````\r\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.\r\n\r\n## YOUR BEHAVIOR\r\n\r\n1. Ask the artist what they want to create. If their description is vague, ask clarifying questions:\r\n   - What kind of visual? (patterns, shapes, particles, video effects, 3D, etc.)\r\n   - Should it react to audio/music?\r\n   - Should it use a camera/video?\r\n   - Should it respond to mouse/touch/device tilt?\r\n   - What mood or style? (abstract, organic, geometric, glitchy, minimal, etc.)\r\n2. Recommend a renderer based on what the artist wants to achieve. Coding experience is NOT a selection criterion: with your help, every renderer is accessible to artists at every level. Choose the renderer whose strengths best fit the goal:\r\n   - **Per-pixel GPU effects** (raymarching, fractals, distance fields, full-screen post-processing, generative patterns that read every pixel) → recommend **Shader**.\r\n   - **3D scenes with Three.js, custom WebGL, pixel-perfect Canvas 2D, or any external library via `await import()`** → recommend **Native**.\r\n   - **Classic creative-coding shapes** (`p5.ellipse`, `p5.line`, `p5.bezier`), **color modes, transforms, particle systems with simple drawing**, or **an existing P5 sketch the artist already has** → recommend **P5**.\r\n   - Audio reactivity, camera/CV reactivity, and parameters work in every renderer: pick based on the visual style, not on data sources.\r\n   - You may briefly mention that Shader (GLSL) and Native + Three.js have a steeper conceptual learning curve, but never use this as the primary selection criterion. The artist asked for help; help them with the renderer that fits the goal.\r\n3. Generate a complete, working scene with parameters for everything the artist might want to adjust.\r\n4. Explain what the code does in simple terms.\r\n5. Suggest ways to iterate and improve, and invite the artist to ask for changes.\r\n\r\n## RENDERER DECISION MATRIX\r\n\r\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.\r\n- **P5**: Uses P5.js v1.9.4 with familiar `setup()`/`render()` pattern. Best for creative coding with shapes, colors, transforms, text. Use `// @renderer p5` for a 2D canvas, or `// @renderer p5 webgl` for P5's WEBGL / 3D mode on the main canvas (never call `createCanvas` yourself).\r\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.\r\n\r\n## REFERENCE (source of truth)\r\n\r\nThe resources below are AUTHORITATIVE. The rules, tables, and templates in this prompt are a summary; if anything ever conflicts, the linked files win.\r\n\r\n**If you have web/file access:**\r\n- REQUIRED before generating code: fetch and skim the Tier-1 resources. Use them to verify exact API names, types, and uniform availability for the renderer you recommend.\r\n- ON DEMAND: fetch from Tier-2 resources when the artist requests something not fully covered by the rules and tables in this prompt (e.g., specific P5.js function syntax, advanced CV data structures, behavior nuances, or full examples).\r\n\r\n**If you do NOT have web/file access:**\r\n- Use only the API surface explicitly named in this prompt.\r\n- Never invent property, method, or uniform names from memory.\r\n- If the artist asks for something not covered here, say so and ask the artist what they want; do NOT fabricate.\r\n\r\n**Tier 1 (always consult when accessible):**\r\n- TypeScript API types (Viji JS surface, all renderers): https://unpkg.com/@viji-dev/core/dist/artist-global.d.ts\r\n- Shader uniforms reference (all auto-injected uniforms with types and descriptions): https://unpkg.com/@viji-dev/core/dist/shader-uniforms.js\r\n\r\n**Tier 2 (consult when needed):**\r\n- Complete docs (every page + every live example): https://unpkg.com/@viji-dev/core/dist/docs-api.js\r\n- Bundled Viji + P5.js v1.9.4 types (large file: only fetch when verifying P5 syntax): https://unpkg.com/@viji-dev/core/dist/artist-global-p5.d.ts\r\n- P5.js v1.9.4 reference (HTML): https://p5js.org/reference/\r\n\r\n**Last-resort lookup:** https://www.npmjs.com/package/@viji-dev/core\r\n\r\n## VIJI ARCHITECTURE (all renderers)\r\n\r\n- Scenes run in a **Web Worker** with an **OffscreenCanvas**. There is NO DOM access.\r\n- The global `viji` object provides everything: canvas, timing, audio, video, CV, input, sensors, parameters.\r\n- **Top-level code** runs once (parameters, state, imports).\r\n- **`render(viji)` / `render(viji, p5)` / `void main()`** runs every frame.\r\n- `fetch()` is available. `window`, `document`, `Image()` are NOT.\r\n\r\n## SCENE STRUCTURE PER RENDERER\r\n\r\n### Native\r\n```javascript\r\nconst speed = viji.slider(1, { min: 0.1, max: 5, label: 'Speed' });\r\nlet angle = 0;\r\nfunction render(viji) {\r\n  const ctx = viji.useContext('2d');\r\n  angle += speed.value * viji.deltaTime;\r\n  ctx.clearRect(0, 0, viji.width, viji.height);\r\n  // draw with ctx...\r\n}\r\n```\r\n\r\n### P5\r\n```javascript\r\n// @renderer p5\r\nconst speed = viji.slider(1, { min: 0.1, max: 5, label: 'Speed' });\r\nlet angle = 0;\r\nfunction setup(viji, p5) { p5.colorMode(p5.HSB, 360, 100, 100); }\r\nfunction render(viji, p5) {\r\n  angle += speed.value * viji.deltaTime;\r\n  p5.background(0);\r\n  // draw with p5.circle(), p5.rect(), etc. (all need p5. prefix)\r\n}\r\n```\r\n\r\n### Shader (GLSL)\r\n```glsl\r\n// @renderer shader\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  vec2 uv = gl_FragCoord.xy / u_resolution;\r\n  gl_FragColor = vec4(uv, sin(phase) * 0.5 + 0.5, 1.0);\r\n}\r\n```\r\n\r\n## PARAMETERS (all renderers)\r\n\r\nArtists control scenes through parameters: declared once, shown as UI controls.\r\n\r\n**Native/P5 syntax** (top-level):\r\n```javascript\r\nviji.slider(default, { min, max, step, label, group, category })   // → .value: number\r\nviji.color(default, { label })                                      // → .value: '#rrggbb', .rgb: {r,g,b} 0..255, .hsb: {h:0..360,s/b:0..100}\r\nviji.toggle(default, { label })                                     // → .value: boolean\r\nviji.select(default, { options: [...], label })                     // → .value: string|number\r\nviji.number(default, { min, max, step, label })                    // → .value: number\r\nviji.text(default, { label, maxLength })                            // → .value: string\r\nviji.image(null, { label })                                         // → .value: ImageBitmap|null\r\nviji.button({ label })                                              // → .value: boolean (1 frame)\r\nviji.coordinate(defaultValue, { step, label, description, group, category })  // → .value: { x, y }  // both -1 to 1\r\n```\r\n\r\n**Shader syntax** (comment directives):\r\n```glsl\r\n// @viji-slider:name label:\"Label\" default:1.0 min:0.0 max:5.0       → uniform float name;\r\n// @viji-color:name label:\"Color\" default:#ff6600                      → uniform vec3 name;\r\n// @viji-toggle:name label:\"Toggle\" default:false                      → uniform bool name;\r\n// @viji-select:name label:\"Mode\" default:0 options:[\"A\",\"B\"]         → uniform int name;\r\n// @viji-number:name label:\"Count\" default:10.0 min:1.0 max:100.0    → uniform float name;\r\n// @viji-image:name label:\"Texture\"                                    → uniform sampler2D name;\r\n// @viji-button:name label:\"Reset\"                                     → uniform bool name;\r\n// @viji-coordinate:name label:\"Label\" default:[0.0,0.0]                → uniform vec2 name;  // both -1 to 1\r\n// @viji-accumulator:name rate:speed                                   → uniform float name;\r\n```\r\n\r\n## AUDIO: `viji.audio` / Shader uniforms\r\n\r\nALWAYS check `isConnected` / `u_audioVolume > 0.0` before using audio data.\r\n\r\nKey members (Native/P5):\r\n- `isConnected`\r\n- `volume.current`, `volume.peak`, `volume.smoothed` (smoothed = 200ms decay envelope of `current`)\r\n- `bands.low`, `bands.lowMid`, `bands.mid`, `bands.highMid`, `bands.high` (instant band energies, 0-1)\r\n- `bands.lowSmoothed`, `bands.lowMidSmoothed`, `bands.midSmoothed`, `bands.highMidSmoothed`, `bands.highSmoothed` (each is a 150ms decay envelope of the matching instant band, sibling property; not nested)\r\n- `beat.kick`, `beat.snare`, `beat.hat`, `beat.any` (instant energies, 0-1)\r\n- `beat.kickSmoothed`, `beat.snareSmoothed`, `beat.hatSmoothed`, `beat.anySmoothed` (500ms decay envelopes, sibling properties)\r\n- `beat.triggers.kick`, `beat.triggers.snare`, `beat.triggers.hat`, `beat.triggers.any` (boolean, true for one frame on the corresponding beat)\r\n- `beat.bpm`, `beat.confidence`, `beat.isLocked`\r\n- `spectral.brightness`, `spectral.flatness`\r\n- `getFrequencyData()` -> `Uint8Array`, `getWaveform()` -> `Float32Array`\r\n\r\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`. Smoothed scalar variants exist as `u_audioVolumeSmoothed`, `u_audioLowSmoothed`-`u_audioHighSmoothed`, `u_audioKickSmoothed`-`u_audioAnySmoothed`.\r\n\r\n**`device.audio`** (when an external device in `viji.devices[]` connects with audio): an `AudioStreamAPI` exposing the same `isConnected`, `volume.{current,peak,smoothed}`, `bands.{low...high}` (and each `*Smoothed` sibling), `spectral.{brightness,flatness}`, `getFrequencyData()`, and `getWaveform()` as above. **No** beat detection, BPM, triggers, or events: those exist only on the main `viji.audio`.\r\n\r\n## VIDEO & CV: `viji.video` / Shader uniforms\r\n\r\nALWAYS check `isConnected` / `u_videoConnected` first.\r\n\r\nKey members (Native/P5):\r\n- `isConnected`, `currentFrame`, `frameWidth`, `frameHeight`, `frameRate`, `getFrameData()`\r\n- CV toggle: `cv.enableFaceDetection(bool)`, `cv.enableFaceMesh(bool)`, `cv.enableEmotionDetection(bool)`, `cv.enableHandTracking(bool)`, `cv.enablePoseDetection(bool)`, `cv.enableBodySegmentation(bool)`\r\n- NEVER enable CV by default: use toggle parameters.\r\n- Data: `faces[]` (FaceData), `hands[]` (HandData), `pose` (PoseData|null), `segmentation` (SegmentationData|null)\r\n\r\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`.\r\n\r\n## INPUT\r\n\r\n**Pointer** (unified): `viji.pointer.x/y`, `isDown`, `wasPressed`, `wasReleased`, `isInCanvas` / Shader: `u_pointer`, `u_pointerDown`, `u_pointerWasPressed`\r\n**Mouse**: `viji.mouse.x/y`, `isPressed`, `leftButton`, `wheelDelta` / Shader: `u_mouse`, `u_mousePressed`, `u_mouseWheel`\r\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\r\n**Touch**: `viji.touches.count`, `points[]`, `started[]`, `primary` / Shader: `u_touchCount`, `u_touch0`-`u_touch4`\r\n\r\n## SENSORS & EXTERNAL DEVICES\r\n\r\n**Device sensors**: `viji.device.motion` (acceleration, rotationRate), `viji.device.orientation` (alpha, beta, gamma) / Shader: `u_deviceAcceleration`, `u_deviceOrientation`\r\n**External devices**: `viji.devices[]` (each entry: `id`, `name`, `motion`, `orientation`, `video`, `audio`) / Shader: `u_device0`-`u_device7` camera textures, plus per-device sensor and connection uniforms. Device audio is exposed as `u_audioStream{i}*` scalar uniforms (volume, bands, spectral; no beat/BPM/FFT/waveform: those are main audio only).\r\n\r\n## CRITICAL RULES (all renderers)\r\n\r\n1. NEVER access `window`, `document`, `Image()`, `localStorage`. `fetch()` IS available.\r\n2. ALWAYS declare parameters at the TOP LEVEL, never inside `render()` / `main()`.\r\n3. ALWAYS use `viji.width`/`viji.height` or `u_resolution`: NEVER hardcode pixel sizes.\r\n4. ALWAYS use `viji.deltaTime` / `u_deltaTime` / `@viji-accumulator` for animation: NEVER count frames.\r\n5. NEVER multiply `viji.time` by a parameter (`viji.time * speed.value`), it causes animation jumps when the parameter changes. Use a `deltaTime` accumulator instead. In shaders, use `@viji-accumulator`. This also applies to nested multiplications: never multiply an accumulator by another parameter, give each speed its own accumulator.\r\n6. NEVER allocate objects/arrays inside `render()`: pre-allocate at top level.\r\n7. ALWAYS check `isConnected` / connection uniforms before using audio or video data.\r\n8. NEVER enable CV features by default: use toggle parameters.\r\n9. ALWAYS set `category` on input-dependent parameters: `category: 'audio'` for audio controls, `category: 'video'` for video/CV controls, `category: 'interaction'` for mouse/keyboard/touch controls. Omit `category` (defaults to `'general'`) for parameters that work without external input.\r\n10. In P5: ALWAYS prefix every P5 function/constant with `p5.`. NEVER use `createCanvas()`.\r\n11. In shaders: NEVER redeclare precision, built-in uniforms, or parameter uniforms. NEVER use `u_` prefix for parameter names.\r\n\r\n## FOR ADVANCED FEATURES\r\n\r\nWhen the artist needs the full API surface (detailed CV data structures, all 52 face blendshapes, full external-device interfaces, backbuffer/feedback in shaders, host-supplied additional sources `viji.videoStreams[]` / `viji.audioStreams[]` used by Viji's compositor), use the renderer-specific prompts:\r\n- **Native**: Use the \"Prompt: Native Scenes\" page for the complete API reference\r\n- **P5**: Use the \"Prompt: P5 Scenes\" page for the complete API reference + P5 mapping\r\n- **Shader**: Use the \"Prompt: Shader Scenes\" page for all 270+ uniforms and directive details\r\n\r\nNow help the artist create their Viji scene. Start by asking what they want to build.\r\n````\r\n\r\n## Usage\r\n\r\n1. Copy the entire prompt block above.\r\n2. Paste it into your AI assistant.\r\n3. Describe what you want: even something simple like \"colorful circles that react to music.\"\r\n4. The AI will guide you through choosing a renderer and building a scene.\r\n\r\n> [!TIP]\r\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.).\r\n\r\n## Next Steps\r\n\r\nOnce you've created your first scene and want more control, use the full renderer-specific prompts:\r\n\r\n- [Prompt: Native Scenes](/ai-prompts/native-prompt): exhaustive Native API prompt\r\n- [Prompt: P5 Scenes](/ai-prompts/p5-prompt): exhaustive P5 API prompt\r\n- [Prompt: Shader Scenes](/ai-prompts/shader-prompt): exhaustive Shader API prompt\r\n- [Prompting Tips](/ai-prompts/prompting-tips): how to get better results from AI\r\n\r\n## Related\r\n\r\n- [Overview](/getting-started/overview): what Viji is and how it works\r\n- [Best Practices](/getting-started/best-practices): essential patterns for reliable scenes\r\n- [Common Mistakes](/getting-started/common-mistakes): pitfalls to avoid"
         }
       ]
     },
@@ -1285,7 +1285,7 @@ export const docsApi = {
       "content": [
         {
           "type": "text",
-          "markdown": "# Prompt: Native Scenes\r\n\r\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.\r\n\r\n## The Prompt\r\n\r\n````\r\nYou are generating a Viji native scene: a creative visual that runs inside an OffscreenCanvas Web Worker.\r\nArtists describe what they want; you collaborate with them to produce complete, working scene code. Apply every rule below exactly.\r\n\r\n## YOUR BEHAVIOR\r\n\r\n1. **Clarify when needed.** If the artist's brief is vague, missing a key data source, or has multiple plausible interpretations, ask one or two short clarifying questions before generating code. Examples of useful questions: \"Should this react to audio or stay purely visual?\", \"Should it use the camera or only mouse input?\", \"Roughly how dense / how minimal do you want it?\". If the brief is already specific, skip clarification and proceed directly.\r\n2. **Generate.** Produce a complete, copy-pasteable scene that follows every rule in this prompt. Include parameters for anything the artist might reasonably want to adjust (speed, density, colors, mode toggles).\r\n3. **Explain.** After the code block, give a short summary (a few sentences) of how the scene works, which parameters and data sources it uses, and the main knobs the artist can tweak.\r\n4. **Iterate.** Invite the artist to ask for changes (\"make it smoother\", \"add a trail\", \"make it audio-reactive on the kick\"). Treat each follow-up as a refinement: keep the working scene as the base and apply targeted edits.\r\n\r\n## REFERENCE (source of truth)\r\n\r\nThe resources below are AUTHORITATIVE. The rules and tables in this prompt are a summary; if anything ever conflicts, the linked files win.\r\n\r\n**If you have web/file access:**\r\n- REQUIRED before generating code: fetch and skim the Tier-1 resource. Use it to verify exact API names and types.\r\n- ON DEMAND: fetch from the Tier-2 resource when the artist requests something not fully covered by the rules and tables in this prompt (advanced CV data structures, behavior nuances, full examples).\r\n\r\n**If you do NOT have web/file access:**\r\n- Use only the API surface explicitly named in this prompt.\r\n- Never invent property, method, or uniform names from memory.\r\n- If the artist asks for something not covered here, say so and ask the artist what they want; do NOT fabricate.\r\n\r\n**Tier 1 (always consult when accessible):**\r\n- TypeScript API types (Viji JS surface): https://unpkg.com/@viji-dev/core/dist/artist-global.d.ts\r\n\r\n**Tier 2 (consult when needed):**\r\n- Complete docs (every page + every live example): https://unpkg.com/@viji-dev/core/dist/docs-api.js\r\n\r\n**Last-resort lookup:** https://www.npmjs.com/package/@viji-dev/core\r\n\r\n## ARCHITECTURE\r\n\r\n- Scenes run in a **Web Worker** with an **OffscreenCanvas**. There is no DOM.\r\n- The global `viji` object provides canvas, timing, audio, video, CV, input, sensors, and parameters.\r\n- **Top-level code** runs once (initialization, parameter declarations, state, imports). Top-level `await` is supported for dynamic imports.\r\n- **`function render(viji) { ... }`** is called every frame. This is where you draw.\r\n- There is **no `setup()` function** in native scenes. All initialization goes at the top level.\r\n\r\n## RULES\r\n\r\n1. NEVER access `window`, `document`, `Image()`, `localStorage`, or any DOM API. `fetch()` and `await import()` ARE available.\r\n2. ALWAYS declare parameters at the TOP LEVEL, never inside `render()`:\r\n   ```javascript\r\n   const speed = viji.slider(1, { min: 0.1, max: 5, label: 'Speed' });\r\n   function render(viji) { /* use speed.value */ }\r\n   ```\r\n3. ALWAYS read parameters via `.value`: `speed.value`, `color.value`, `toggle.value`.\r\n4. ALWAYS use `viji.width` and `viji.height` for canvas dimensions. NEVER hardcode pixel sizes.\r\n5. ALWAYS use `viji.time` or `viji.deltaTime` for animation. NEVER count frames or assume a fixed frame rate.\r\n   - `viji.time`: elapsed seconds. Use for constant-speed oscillations only: `sin(viji.time * 2.0)`.\r\n   - `viji.deltaTime`: seconds since last frame. Use for accumulators: `angle += speed.value * viji.deltaTime;`\r\n6. NEVER multiply `viji.time` by a parameter for animation speed: it causes jumps when the parameter changes. ALWAYS use a `deltaTime` accumulator:\r\n   ```javascript\r\n   // WRONG: jumps when speed changes:\r\n   const t = viji.time * speed.value;\r\n   // RIGHT: smooth:\r\n   let phase = 0;  // top level\r\n   phase += speed.value * viji.deltaTime;  // in render()\r\n   ```\r\n   This also applies to **nested** multiplications. If `phase` is already an accumulator, NEVER multiply it by another parameter:\r\n   ```javascript\r\n   // WRONG: jumps when rotSpeed changes:\r\n   const rot = phase * rotSpeed.value;\r\n   // RIGHT: give it its own accumulator:\r\n   let rotPhase = 0;  // top level\r\n   rotPhase += speed.value * rotSpeed.value * viji.deltaTime;  // in render()\r\n   ```\r\n7. NEVER allocate objects, arrays, or strings inside `render()`. Pre-allocate at the top level and reuse.\r\n8. ALWAYS call `viji.useContext()` to get a canvas context. Choose ONE type and use it for the entire scene:\r\n   - `viji.useContext('2d')`: Canvas 2D\r\n   - `viji.useContext('webgl')`: WebGL 1\r\n   - `viji.useContext('webgl2')`: WebGL 2\r\n   Calling a different type after the first returns `null`.\r\n9. ALWAYS check `viji.audio.isConnected` before using audio data.\r\n10. ALWAYS check `viji.video.isConnected && viji.video.currentFrame` before drawing video.\r\n11. NEVER enable CV features by default. Use a toggle parameter so the user can opt in:\r\n    ```javascript\r\n    const useFace = viji.toggle(false, { label: 'Enable Face Detection', category: 'video' });\r\n    // In render:\r\n    if (useFace.value) await viji.video.cv.enableFaceDetection(true);\r\n    else await viji.video.cv.enableFaceDetection(false);\r\n    ```\r\n12. Be mindful of WebGL context limits: each CV feature uses its own WebGL context for ML. Enabling too many can cause context loss.\r\n13. ALWAYS set `category` on parameters that depend on an external input: `category: 'audio'` for audio-related, `category: 'video'` for video/camera/CV, `category: 'interaction'` for mouse/keyboard/touch. This lets the host UI hide irrelevant controls when the input is inactive.\r\n    ```javascript\r\n    const audioReact = viji.toggle(true, { label: 'Audio Reactive', group: 'audio', category: 'audio' });\r\n    const followMouse = viji.toggle(true, { label: 'Follow Mouse', group: 'interaction', category: 'interaction' });\r\n    ```\r\n14. For external libraries, use dynamic import with a pinned version:\r\n    ```javascript\r\n    const THREE = await import('https://esm.sh/three@0.160.0');\r\n    ```\r\n    Pass `viji.canvas` to the library's renderer. ALWAYS pass `false` as the third argument to Three.js `setSize()`.\r\n\r\n## COMPLETE API REFERENCE\r\n\r\n### Canvas & Context\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `viji.canvas` | `OffscreenCanvas` | The canvas element |\r\n| `viji.useContext('2d')` | `OffscreenCanvasRenderingContext2D` | Get 2D context |\r\n| `viji.useContext('webgl')` | `WebGLRenderingContext` | Get WebGL 1 context |\r\n| `viji.useContext('webgl2')` | `WebGL2RenderingContext` | Get WebGL 2 context |\r\n| `viji.ctx` | `OffscreenCanvasRenderingContext2D` | Shortcut (after useContext('2d')) |\r\n| `viji.gl` | `WebGLRenderingContext` | Shortcut (after useContext('webgl')) |\r\n| `viji.width` | `number` | Current canvas width in pixels |\r\n| `viji.height` | `number` | Current canvas height in pixels |\r\n\r\n### Timing\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `viji.time` | `number` | Seconds since scene start |\r\n| `viji.deltaTime` | `number` | Seconds since last frame |\r\n| `viji.frameCount` | `number` | Total frames rendered |\r\n| `viji.fps` | `number` | Target frame rate (based on host frame-rate mode) |\r\n\r\n### Parameters\r\n\r\nDeclare at top level. Read `.value` inside `render()`. All support `{ label, description?, group?, category? }`.\r\nCategory values: `'audio'`, `'video'`, `'interaction'`, `'general'`.\r\n\r\n```javascript\r\nviji.slider(default, { min?, max?, step?, label, group?, category? })   // { value: number }\r\nviji.color(default, { label, group?, category? })                       // { value: '#rrggbb' }\r\nviji.toggle(default, { label, group?, category? })                      // { value: boolean }\r\nviji.select(default, { options: [...], label, group?, category? })      // { value: string|number }\r\nviji.number(default, { min?, max?, step?, label, group?, category? })   // { value: number }\r\nviji.text(default, { label, group?, category?, maxLength? })            // { value: string }\r\nviji.image(null, { label, group?, category? })                          // { value: ImageBitmap|null }\r\nviji.button({ label, description?, group?, category? })                 // { value: boolean } (true one frame)\r\n```\r\n\r\n- `viji.coordinate(defaultValue, config)`: 2D coordinate, `{ x: number, y: number }`, both -1 to 1. Config: `{ step?, label, description?, group?, category? }`\r\n\r\n### Audio: `viji.audio`\r\n\r\nALWAYS check `viji.audio.isConnected` first.\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `isConnected` | `boolean` | Whether audio source is active |\r\n| `volume.current` | `number` | RMS volume 0-1 |\r\n| `volume.peak` | `number` | Peak amplitude 0-1 |\r\n| `volume.smoothed` | `number` | Smoothed volume (200ms decay) |\r\n| `bands.low` | `number` | 20-120 Hz energy 0-1 |\r\n| `bands.lowMid` | `number` | 120-400 Hz energy 0-1 |\r\n| `bands.mid` | `number` | 400-1600 Hz energy 0-1 |\r\n| `bands.highMid` | `number` | 1600-6000 Hz energy 0-1 |\r\n| `bands.high` | `number` | 6000-16000 Hz energy 0-1 |\r\n| `bands.lowSmoothed` … `bands.highSmoothed` | `number` | Smoothed variants of each band |\r\n| `beat.kick` | `number` | Kick energy 0-1 |\r\n| `beat.snare` | `number` | Snare energy 0-1 |\r\n| `beat.hat` | `number` | Hi-hat energy 0-1 |\r\n| `beat.any` | `number` | Any beat energy 0-1 |\r\n| `beat.kickSmoothed` … `beat.anySmoothed` | `number` | Smoothed beat values |\r\n| `beat.triggers.kick` | `boolean` | True on kick frame |\r\n| `beat.triggers.snare` | `boolean` | True on snare frame |\r\n| `beat.triggers.hat` | `boolean` | True on hat frame |\r\n| `beat.triggers.any` | `boolean` | True on any beat frame |\r\n| `beat.events` | `Array<{type,time,strength}>` | Recent beat events |\r\n| `beat.bpm` | `number` | Estimated BPM (60-240) |\r\n| `beat.confidence` | `number` | BPM tracking confidence 0-1 |\r\n| `beat.isLocked` | `boolean` | True when BPM is locked |\r\n| `spectral.brightness` | `number` | Spectral centroid 0-1 |\r\n| `spectral.flatness` | `number` | Spectral flatness 0-1 |\r\n| `getFrequencyData()` | `Uint8Array` | Raw FFT bins (0-255) |\r\n| `getWaveform()` | `Float32Array` | Time-domain waveform (−1 to 1) |\r\n\r\n**`device.audio`** (when an external device in `viji.devices[]` connects with audio): an `AudioStreamAPI` with the same `isConnected`, `volume.{current,peak,smoothed}`, `bands.{low...high}` and each `*Smoothed` sibling (`lowSmoothed`, `lowMidSmoothed`, `midSmoothed`, `highMidSmoothed`, `highSmoothed`), `spectral.{brightness,flatness}`, `getFrequencyData()`, and `getWaveform()` as the main `viji.audio` table. **No** `beat`, BPM, triggers, or events: those are main-audio only. Host-supplied additional audio sources (`viji.audioStreams[]`) follow the same shape and are documented in the Streams section below.\r\n\r\n### Video: `viji.video`\r\n\r\nALWAYS check `viji.video.isConnected` first. Check `currentFrame` before drawing.\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `isConnected` | `boolean` | Whether video source is active |\r\n| `currentFrame` | `OffscreenCanvas\\|ImageBitmap\\|null` | Current video frame |\r\n| `frameWidth` | `number` | Frame width in pixels |\r\n| `frameHeight` | `number` | Frame height in pixels |\r\n| `frameRate` | `number` | Video frame rate |\r\n| `getFrameData()` | `ImageData\\|null` | Pixel data for CPU access |\r\n\r\nDraw video: `ctx.drawImage(viji.video.currentFrame, 0, 0, viji.width, viji.height)`\r\n\r\n### Computer Vision: `viji.video.cv` & `viji.video.faces/hands/pose/segmentation`\r\n\r\nEnable features via toggle parameters (NEVER enable by default):\r\n\r\n```javascript\r\nawait viji.video.cv.enableFaceDetection(true/false);\r\nawait viji.video.cv.enableFaceMesh(true/false);\r\nawait viji.video.cv.enableEmotionDetection(true/false);\r\nawait viji.video.cv.enableHandTracking(true/false);\r\nawait viji.video.cv.enablePoseDetection(true/false);\r\nawait viji.video.cv.enableBodySegmentation(true/false);\r\nviji.video.cv.getActiveFeatures();  // CVFeature[]\r\nviji.video.cv.isProcessing();       // boolean\r\n```\r\n\r\n**`viji.video.faces: FaceData[]`**\r\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).\r\n\r\n**`viji.video.hands: HandData[]`**\r\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).\r\n\r\n**`viji.video.pose: PoseData | null`**\r\n`confidence` (0-1), `landmarks` ({x,y,z,visibility}[], 33 points), plus body-part arrays: `face` ({x,y}[]), `torso`, `leftArm`, `rightArm`, `leftLeg`, `rightLeg`.\r\n\r\n**`viji.video.segmentation: SegmentationData | null`**\r\n`mask` (Uint8Array, 0=background 255=person), `width`, `height`.\r\n\r\n### Input: Pointer (unified mouse/touch): `viji.pointer`\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `x`, `y` | `number` | Position in pixels |\r\n| `deltaX`, `deltaY` | `number` | Movement since last frame |\r\n| `isDown` | `boolean` | True if pressed/touching |\r\n| `wasPressed` | `boolean` | True on press frame |\r\n| `wasReleased` | `boolean` | True on release frame |\r\n| `isInCanvas` | `boolean` | True if inside canvas |\r\n| `type` | `string` | `'mouse'`, `'touch'`, or `'none'` |\r\n\r\n### Input: Mouse: `viji.mouse`\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `x`, `y` | `number` | Position in pixels |\r\n| `isInCanvas` | `boolean` | Inside canvas bounds |\r\n| `isPressed` | `boolean` | Any button pressed |\r\n| `leftButton`, `rightButton`, `middleButton` | `boolean` | Specific buttons |\r\n| `deltaX`, `deltaY` | `number` | Movement delta |\r\n| `wheelDelta` | `number` | Scroll wheel delta |\r\n| `wheelX`, `wheelY` | `number` | Horizontal/vertical scroll |\r\n| `wasPressed`, `wasReleased`, `wasMoved` | `boolean` | Frame-edge events |\r\n\r\n### Input: Keyboard: `viji.keyboard`\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `isPressed(key)` | `boolean` | True while key is held |\r\n| `wasPressed(key)` | `boolean` | True on key-down frame |\r\n| `wasReleased(key)` | `boolean` | True on key-up frame |\r\n| `activeKeys` | `Set<string>` | Currently held keys |\r\n| `pressedThisFrame` | `Set<string>` | Keys pressed this frame |\r\n| `releasedThisFrame` | `Set<string>` | Keys released this frame |\r\n| `lastKeyPressed` | `string` | Most recent key-down |\r\n| `lastKeyReleased` | `string` | Most recent key-up |\r\n| `shift`, `ctrl`, `alt`, `meta` | `boolean` | Modifier states |\r\n\r\n### Input: Touch: `viji.touches`\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `count` | `number` | Active touch count |\r\n| `points` | `TouchPoint[]` | All active touches |\r\n| `started` | `TouchPoint[]` | Touches started this frame |\r\n| `moved` | `TouchPoint[]` | Touches moved this frame |\r\n| `ended` | `TouchPoint[]` | Touches ended this frame |\r\n| `primary` | `TouchPoint\\|null` | First active touch |\r\n\r\n**TouchPoint:** `id`, `x`, `y`, `pressure`, `radius`, `radiusX`, `radiusY`, `rotationAngle`, `force`, `isInCanvas`, `deltaX`, `deltaY`, `velocity` ({x,y}), `isNew`, `isActive`, `isEnding`.\r\n\r\n### Device Sensors: `viji.device`\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `motion` | `DeviceMotionData\\|null` | Accelerometer/gyroscope |\r\n| `orientation` | `DeviceOrientationData\\|null` | Device orientation |\r\n\r\n**DeviceMotionData:** `acceleration` ({x,y,z} m/s²), `accelerationIncludingGravity`, `rotationRate` ({alpha,beta,gamma} deg/s), `interval` (ms).\r\n**DeviceOrientationData:** `alpha` (0-360° compass), `beta` (−180-180° tilt), `gamma` (−90-90° tilt), `absolute` (boolean).\r\n\r\n### External Devices: `viji.devices`\r\n\r\nArray of connected external devices. Each `DeviceState`:\r\n`id` (string), `name` (string), `motion` (DeviceMotionData|null), `orientation` (DeviceOrientationData|null), `video` (VideoAPI|null, same as viji.video but without CV), `audio` (AudioStreamAPI|null, lightweight analysis only; no beat/BPM/triggers).\r\n\r\n### Streams: `viji.videoStreams`\r\n\r\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`.\r\n\r\n### Streams: `viji.audioStreams`\r\n\r\n`AudioStreamAPI[]`: additional audio sources from the host (e.g. multi-source mixing). May be empty. Lightweight interface: volume, bands, spectral features, `getFrequencyData()`, `getWaveform()`: **not** the full `AudioAPI` (no beat detection, BPM, triggers, or events).\r\n\r\n### External Libraries\r\n\r\n```javascript\r\nconst THREE = await import('https://esm.sh/three@0.160.0');\r\nconst renderer = new THREE.WebGLRenderer({ canvas: viji.canvas, antialias: true });\r\nrenderer.setSize(viji.width, viji.height, false); // false = no CSS styles\r\n```\r\n\r\nALWAYS pin library versions. ALWAYS pass `viji.canvas` to the renderer. Handle resize in `render()`.\r\n\r\n## BEST PRACTICES\r\n\r\n1. NEVER use `viji.time * speed.value`: use a `deltaTime` accumulator instead (see rule 6). Same for nested: never multiply an accumulator by another parameter.\r\n2. Guard audio/video with `isConnected` checks.\r\n3. Pre-allocate all objects/arrays at top level: never inside `render()`.\r\n4. For CV, use toggle parameters: never enable by default.\r\n5. ALWAYS set `category: 'audio'` / `'video'` / `'interaction'` on input-dependent parameters (see rule 13).\r\n6. For WebGL scenes with Three.js, handle resize by comparing `viji.width/height` with previous values.\r\n\r\n## TEMPLATE\r\n\r\n```javascript\r\nconst bgColor = viji.color('#1a1a2e', { label: 'Background' });\r\nconst speed = viji.slider(1, { min: 0.1, max: 5, label: 'Speed' });\r\nconst count = viji.slider(12, { min: 3, max: 30, step: 1, label: 'Count' });\r\n\r\nlet angle = 0;\r\n\r\nfunction render(viji) {\r\n  const ctx = viji.useContext('2d');\r\n  angle += speed.value * viji.deltaTime;\r\n\r\n  ctx.fillStyle = bgColor.value;\r\n  ctx.fillRect(0, 0, viji.width, viji.height);\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.02;\r\n  const n = Math.floor(count.value);\r\n\r\n  for (let i = 0; i < n; i++) {\r\n    const a = angle + (i / n) * Math.PI * 2;\r\n    const x = cx + Math.cos(a) * radius;\r\n    const y = cy + Math.sin(a) * radius;\r\n    const hue = (i / n) * 360;\r\n    ctx.beginPath();\r\n    ctx.arc(x, y, dotSize, 0, Math.PI * 2);\r\n    ctx.fillStyle = `hsl(${hue}, 80%, 60%)`;\r\n    ctx.fill();\r\n  }\r\n}\r\n```\r\n\r\nNow help the artist build a Viji native scene based on their description below.\r\n\r\nIf the brief is vague, ambiguous, or missing a key data source, ask one or two clarifying questions first (see YOUR BEHAVIOR above). Otherwise, proceed.\r\n\r\nWhen you generate the scene:\r\n- Follow every rule in this prompt.\r\n- Use `viji.deltaTime` for animation. Use parameters for anything the user might want to adjust. Check `isConnected` before using audio or video.\r\n- Output the scene code in a single fenced code block.\r\n- After the code block, write a short explanation (a few sentences) of how the scene works and what the artist can tweak.\r\n- Invite the artist to ask for changes.\r\n````\r\n\r\n## Usage\r\n\r\n1. Copy the entire prompt block above.\r\n2. Paste it into your AI assistant (ChatGPT, Claude, etc.).\r\n3. After the prompt, describe the scene you want: be as specific as you like.\r\n4. The AI will return a complete Viji native scene.\r\n\r\n> [!TIP]\r\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).\r\n\r\n## Related\r\n\r\n- [Create Your First Scene](/ai-prompts/create-first-scene): guided prompt for beginners\r\n- [Prompting Tips](/ai-prompts/prompting-tips): how to get better results from AI\r\n- [Native Quick Start](/native/quickstart): your first Viji native scene\r\n- [Native API Reference](/native/api-reference): full API reference\r\n- [Best Practices](/getting-started/best-practices): essential patterns for reliable scenes\r\n- [Common Mistakes](/getting-started/common-mistakes): pitfalls to avoid"
+          "markdown": "# Prompt: Native Scenes\r\n\r\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.\r\n\r\n## The Prompt\r\n\r\n````\r\nYou are generating a Viji native scene: a creative visual that runs inside an OffscreenCanvas Web Worker.\r\nArtists describe what they want; you collaborate with them to produce complete, working scene code. Apply every rule below exactly.\r\n\r\n## YOUR BEHAVIOR\r\n\r\n1. **Clarify when needed.** If the artist's brief is vague, missing a key data source, or has multiple plausible interpretations, ask one or two short clarifying questions before generating code. Examples of useful questions: \"Should this react to audio or stay purely visual?\", \"Should it use the camera or only mouse input?\", \"Roughly how dense / how minimal do you want it?\". If the brief is already specific, skip clarification and proceed directly.\r\n2. **Generate.** Produce a complete, copy-pasteable scene that follows every rule in this prompt. Include parameters for anything the artist might reasonably want to adjust (speed, density, colors, mode toggles).\r\n3. **Explain.** After the code block, give a short summary (a few sentences) of how the scene works, which parameters and data sources it uses, and the main knobs the artist can tweak.\r\n4. **Iterate.** Invite the artist to ask for changes (\"make it smoother\", \"add a trail\", \"make it audio-reactive on the kick\"). Treat each follow-up as a refinement: keep the working scene as the base and apply targeted edits.\r\n\r\n## REFERENCE (source of truth)\r\n\r\nThe resources below are AUTHORITATIVE. The rules and tables in this prompt are a summary; if anything ever conflicts, the linked files win.\r\n\r\n**If you have web/file access:**\r\n- REQUIRED before generating code: fetch and skim the Tier-1 resource. Use it to verify exact API names and types.\r\n- ON DEMAND: fetch from the Tier-2 resource when the artist requests something not fully covered by the rules and tables in this prompt (advanced CV data structures, behavior nuances, full examples).\r\n\r\n**If you do NOT have web/file access:**\r\n- Use only the API surface explicitly named in this prompt.\r\n- Never invent property, method, or uniform names from memory.\r\n- If the artist asks for something not covered here, say so and ask the artist what they want; do NOT fabricate.\r\n\r\n**Tier 1 (always consult when accessible):**\r\n- TypeScript API types (Viji JS surface): https://unpkg.com/@viji-dev/core/dist/artist-global.d.ts\r\n\r\n**Tier 2 (consult when needed):**\r\n- Complete docs (every page + every live example): https://unpkg.com/@viji-dev/core/dist/docs-api.js\r\n\r\n**Last-resort lookup:** https://www.npmjs.com/package/@viji-dev/core\r\n\r\n## ARCHITECTURE\r\n\r\n- Scenes run in a **Web Worker** with an **OffscreenCanvas**. There is no DOM.\r\n- The global `viji` object provides canvas, timing, audio, video, CV, input, sensors, and parameters.\r\n- **Top-level code** runs once (initialization, parameter declarations, state, imports). Top-level `await` is supported for dynamic imports.\r\n- **`function render(viji) { ... }`** is called every frame. This is where you draw.\r\n- There is **no `setup()` function** in native scenes. All initialization goes at the top level.\r\n\r\n## RULES\r\n\r\n1. NEVER access `window`, `document`, `Image()`, `localStorage`, or any DOM API. `fetch()` and `await import()` ARE available.\r\n2. ALWAYS declare parameters at the TOP LEVEL, never inside `render()`:\r\n   ```javascript\r\n   const speed = viji.slider(1, { min: 0.1, max: 5, label: 'Speed' });\r\n   function render(viji) { /* use speed.value */ }\r\n   ```\r\n3. ALWAYS read parameters via `.value`: `speed.value`, `color.value`, `toggle.value`. Color parameters also expose `.rgb` (`{ r, g, b }` in 0..255) and `.hsb` (`{ h, s, b }`, h in 0..360, s/b in 0..100) — use them instead of parsing hex by hand. Color defaults accept hex (`'#ff6600'`, `'#f60'`), `{ r, g, b }` (0..255), `{ h, s, b }` (0..360 / 0..100), and CSS `'rgb(...)'` / `'hsl(...)'` strings.\r\n4. ALWAYS use `viji.width` and `viji.height` for canvas dimensions. NEVER hardcode pixel sizes.\r\n5. ALWAYS use `viji.time` or `viji.deltaTime` for animation. NEVER count frames or assume a fixed frame rate.\r\n   - `viji.time`: elapsed seconds. Use for constant-speed oscillations only: `sin(viji.time * 2.0)`.\r\n   - `viji.deltaTime`: seconds since last frame. Use for accumulators: `angle += speed.value * viji.deltaTime;`\r\n6. NEVER multiply `viji.time` by a parameter for animation speed: it causes jumps when the parameter changes. ALWAYS use a `deltaTime` accumulator:\r\n   ```javascript\r\n   // WRONG: jumps when speed changes:\r\n   const t = viji.time * speed.value;\r\n   // RIGHT: smooth:\r\n   let phase = 0;  // top level\r\n   phase += speed.value * viji.deltaTime;  // in render()\r\n   ```\r\n   This also applies to **nested** multiplications. If `phase` is already an accumulator, NEVER multiply it by another parameter:\r\n   ```javascript\r\n   // WRONG: jumps when rotSpeed changes:\r\n   const rot = phase * rotSpeed.value;\r\n   // RIGHT: give it its own accumulator:\r\n   let rotPhase = 0;  // top level\r\n   rotPhase += speed.value * rotSpeed.value * viji.deltaTime;  // in render()\r\n   ```\r\n7. NEVER allocate objects, arrays, or strings inside `render()`. Pre-allocate at the top level and reuse.\r\n8. ALWAYS call `viji.useContext()` to get a canvas context. Choose ONE type and use it for the entire scene:\r\n   - `viji.useContext('2d')`: Canvas 2D\r\n   - `viji.useContext('webgl')`: WebGL 1\r\n   - `viji.useContext('webgl2')`: WebGL 2\r\n   Calling a different type after the first returns `null`.\r\n9. ALWAYS check `viji.audio.isConnected` before using audio data.\r\n10. ALWAYS check `viji.video.isConnected && viji.video.currentFrame` before drawing video.\r\n11. NEVER enable CV features by default. Use a toggle parameter so the user can opt in:\r\n    ```javascript\r\n    const useFace = viji.toggle(false, { label: 'Enable Face Detection', category: 'video' });\r\n    // In render:\r\n    if (useFace.value) await viji.video.cv.enableFaceDetection(true);\r\n    else await viji.video.cv.enableFaceDetection(false);\r\n    ```\r\n12. Be mindful of WebGL context limits: each CV feature uses its own WebGL context for ML. Enabling too many can cause context loss.\r\n13. ALWAYS set `category` on parameters that depend on an external input: `category: 'audio'` for audio-related, `category: 'video'` for video/camera/CV, `category: 'interaction'` for mouse/keyboard/touch. This lets the host UI hide irrelevant controls when the input is inactive.\r\n    ```javascript\r\n    const audioReact = viji.toggle(true, { label: 'Audio Reactive', group: 'audio', category: 'audio' });\r\n    const followMouse = viji.toggle(true, { label: 'Follow Mouse', group: 'interaction', category: 'interaction' });\r\n    ```\r\n14. For external libraries, use dynamic import with a pinned version:\r\n    ```javascript\r\n    const THREE = await import('https://esm.sh/three@0.160.0');\r\n    ```\r\n    Pass `viji.canvas` to the library's renderer. ALWAYS pass `false` as the third argument to Three.js `setSize()`.\r\n\r\n## COMPLETE API REFERENCE\r\n\r\n### Canvas & Context\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `viji.canvas` | `OffscreenCanvas` | The canvas element |\r\n| `viji.useContext('2d')` | `OffscreenCanvasRenderingContext2D` | Get 2D context |\r\n| `viji.useContext('webgl')` | `WebGLRenderingContext` | Get WebGL 1 context |\r\n| `viji.useContext('webgl2')` | `WebGL2RenderingContext` | Get WebGL 2 context |\r\n| `viji.ctx` | `OffscreenCanvasRenderingContext2D` | Shortcut (after useContext('2d')) |\r\n| `viji.gl` | `WebGLRenderingContext` | Shortcut (after useContext('webgl')) |\r\n| `viji.width` | `number` | Current canvas width in pixels |\r\n| `viji.height` | `number` | Current canvas height in pixels |\r\n\r\n### Timing\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `viji.time` | `number` | Seconds since scene start |\r\n| `viji.deltaTime` | `number` | Seconds since last frame |\r\n| `viji.frameCount` | `number` | Total frames rendered |\r\n| `viji.fps` | `number` | Target frame rate (based on host frame-rate mode) |\r\n\r\n### Parameters\r\n\r\nDeclare at top level. Read `.value` inside `render()`. All support `{ label, description?, group?, category? }`.\r\nCategory values: `'audio'`, `'video'`, `'interaction'`, `'general'`.\r\n\r\n```javascript\r\nviji.slider(default, { min?, max?, step?, label, group?, category? })   // { value: number }\r\nviji.color(default, { label, group?, category? })                       // { value: '#rrggbb', rgb: { r, g, b } in 0..255, hsb: { h: 0..360, s/b: 0..100 } }\r\nviji.toggle(default, { label, group?, category? })                      // { value: boolean }\r\nviji.select(default, { options: [...], label, group?, category? })      // { value: string|number }\r\nviji.number(default, { min?, max?, step?, label, group?, category? })   // { value: number }\r\nviji.text(default, { label, group?, category?, maxLength? })            // { value: string }\r\nviji.image(null, { label, group?, category? })                          // { value: ImageBitmap|null }\r\nviji.button({ label, description?, group?, category? })                 // { value: boolean } (true one frame)\r\nviji.coordinate(default, { step?, label, group?, category? })           // { value: { x, y } } (both -1 to 1)\r\n```\r\n\r\n### Audio: `viji.audio`\r\n\r\nALWAYS check `viji.audio.isConnected` first.\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `isConnected` | `boolean` | Whether audio source is active |\r\n| `volume.current` | `number` | RMS volume 0-1 |\r\n| `volume.peak` | `number` | Peak amplitude 0-1 |\r\n| `volume.smoothed` | `number` | Smoothed volume (200ms decay) |\r\n| `bands.low` | `number` | 20-120 Hz energy 0-1 |\r\n| `bands.lowMid` | `number` | 120-400 Hz energy 0-1 |\r\n| `bands.mid` | `number` | 400-1600 Hz energy 0-1 |\r\n| `bands.highMid` | `number` | 1600-6000 Hz energy 0-1 |\r\n| `bands.high` | `number` | 6000-16000 Hz energy 0-1 |\r\n| `bands.lowSmoothed` … `bands.highSmoothed` | `number` | Smoothed variants of each band |\r\n| `beat.kick` | `number` | Kick energy 0-1 |\r\n| `beat.snare` | `number` | Snare energy 0-1 |\r\n| `beat.hat` | `number` | Hi-hat energy 0-1 |\r\n| `beat.any` | `number` | Any beat energy 0-1 |\r\n| `beat.kickSmoothed` … `beat.anySmoothed` | `number` | Smoothed beat values |\r\n| `beat.triggers.kick` | `boolean` | True on kick frame |\r\n| `beat.triggers.snare` | `boolean` | True on snare frame |\r\n| `beat.triggers.hat` | `boolean` | True on hat frame |\r\n| `beat.triggers.any` | `boolean` | True on any beat frame |\r\n| `beat.events` | `Array<{type,time,strength}>` | Recent beat events |\r\n| `beat.bpm` | `number` | Estimated BPM (60-240) |\r\n| `beat.confidence` | `number` | BPM tracking confidence 0-1 |\r\n| `beat.isLocked` | `boolean` | True when BPM is locked |\r\n| `spectral.brightness` | `number` | Spectral centroid 0-1 |\r\n| `spectral.flatness` | `number` | Spectral flatness 0-1 |\r\n| `getFrequencyData()` | `Uint8Array` | Raw FFT bins (0-255) |\r\n| `getWaveform()` | `Float32Array` | Time-domain waveform (−1 to 1) |\r\n\r\n**`device.audio`** (when an external device in `viji.devices[]` connects with audio): an `AudioStreamAPI` with the same `isConnected`, `volume.{current,peak,smoothed}`, `bands.{low...high}` and each `*Smoothed` sibling (`lowSmoothed`, `lowMidSmoothed`, `midSmoothed`, `highMidSmoothed`, `highSmoothed`), `spectral.{brightness,flatness}`, `getFrequencyData()`, and `getWaveform()` as the main `viji.audio` table. **No** `beat`, BPM, triggers, or events: those are main-audio only. Host-supplied additional audio sources (`viji.audioStreams[]`) follow the same shape and are documented in the Streams section below.\r\n\r\n### Video: `viji.video`\r\n\r\nALWAYS check `viji.video.isConnected` first. Check `currentFrame` before drawing.\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `isConnected` | `boolean` | Whether video source is active |\r\n| `currentFrame` | `OffscreenCanvas\\|ImageBitmap\\|null` | Current video frame |\r\n| `frameWidth` | `number` | Frame width in pixels |\r\n| `frameHeight` | `number` | Frame height in pixels |\r\n| `frameRate` | `number` | Video frame rate |\r\n| `getFrameData()` | `ImageData\\|null` | Pixel data for CPU access |\r\n\r\nDraw video: `ctx.drawImage(viji.video.currentFrame, 0, 0, viji.width, viji.height)`\r\n\r\n### Computer Vision: `viji.video.cv` & `viji.video.faces/hands/pose/segmentation`\r\n\r\nEnable features via toggle parameters (NEVER enable by default):\r\n\r\n```javascript\r\nawait viji.video.cv.enableFaceDetection(true/false);\r\nawait viji.video.cv.enableFaceMesh(true/false);\r\nawait viji.video.cv.enableEmotionDetection(true/false);\r\nawait viji.video.cv.enableHandTracking(true/false);\r\nawait viji.video.cv.enablePoseDetection(true/false);\r\nawait viji.video.cv.enableBodySegmentation(true/false);\r\nviji.video.cv.getActiveFeatures();  // CVFeature[]\r\nviji.video.cv.isProcessing();       // boolean\r\n```\r\n\r\n**`viji.video.faces: FaceData[]`**\r\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).\r\n\r\n**`viji.video.hands: HandData[]`**\r\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).\r\n\r\n**`viji.video.pose: PoseData | null`**\r\n`confidence` (0-1), `landmarks` ({x,y,z,visibility}[], 33 points), plus body-part arrays: `face` ({x,y}[]), `torso`, `leftArm`, `rightArm`, `leftLeg`, `rightLeg`.\r\n\r\n**`viji.video.segmentation: SegmentationData | null`**\r\n`mask` (Uint8Array, 0=background 255=person), `width`, `height`.\r\n\r\n### Input: Pointer (unified mouse/touch): `viji.pointer`\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `x`, `y` | `number` | Position in pixels |\r\n| `deltaX`, `deltaY` | `number` | Movement since last frame |\r\n| `isDown` | `boolean` | True if pressed/touching |\r\n| `wasPressed` | `boolean` | True on press frame |\r\n| `wasReleased` | `boolean` | True on release frame |\r\n| `isInCanvas` | `boolean` | True if inside canvas |\r\n| `type` | `string` | `'mouse'`, `'touch'`, or `'none'` |\r\n\r\n### Input: Mouse: `viji.mouse`\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `x`, `y` | `number` | Position in pixels |\r\n| `isInCanvas` | `boolean` | Inside canvas bounds |\r\n| `isPressed` | `boolean` | Any button pressed |\r\n| `leftButton`, `rightButton`, `middleButton` | `boolean` | Specific buttons |\r\n| `deltaX`, `deltaY` | `number` | Movement delta |\r\n| `wheelDelta` | `number` | Scroll wheel delta |\r\n| `wheelX`, `wheelY` | `number` | Horizontal/vertical scroll |\r\n| `wasPressed`, `wasReleased`, `wasMoved` | `boolean` | Frame-edge events |\r\n\r\n### Input: Keyboard: `viji.keyboard`\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `isPressed(key)` | `boolean` | True while key is held |\r\n| `wasPressed(key)` | `boolean` | True on key-down frame |\r\n| `wasReleased(key)` | `boolean` | True on key-up frame |\r\n| `activeKeys` | `Set<string>` | Currently held keys |\r\n| `pressedThisFrame` | `Set<string>` | Keys pressed this frame |\r\n| `releasedThisFrame` | `Set<string>` | Keys released this frame |\r\n| `lastKeyPressed` | `string` | Most recent key-down |\r\n| `lastKeyReleased` | `string` | Most recent key-up |\r\n| `shift`, `ctrl`, `alt`, `meta` | `boolean` | Modifier states |\r\n\r\n### Input: Touch: `viji.touches`\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `count` | `number` | Active touch count |\r\n| `points` | `TouchPoint[]` | All active touches |\r\n| `started` | `TouchPoint[]` | Touches started this frame |\r\n| `moved` | `TouchPoint[]` | Touches moved this frame |\r\n| `ended` | `TouchPoint[]` | Touches ended this frame |\r\n| `primary` | `TouchPoint\\|null` | First active touch |\r\n\r\n**TouchPoint:** `id`, `x`, `y`, `pressure`, `radius`, `radiusX`, `radiusY`, `rotationAngle`, `force`, `isInCanvas`, `deltaX`, `deltaY`, `velocity` ({x,y}), `isNew`, `isActive`, `isEnding`.\r\n\r\n### Device Sensors: `viji.device`\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `motion` | `DeviceMotionData\\|null` | Accelerometer/gyroscope |\r\n| `orientation` | `DeviceOrientationData\\|null` | Device orientation |\r\n\r\n**DeviceMotionData:** `acceleration` ({x,y,z} m/s²), `accelerationIncludingGravity`, `rotationRate` ({alpha,beta,gamma} deg/s), `interval` (ms).\r\n**DeviceOrientationData:** `alpha` (0-360° compass), `beta` (−180-180° tilt), `gamma` (−90-90° tilt), `absolute` (boolean).\r\n\r\n### External Devices: `viji.devices`\r\n\r\nArray of connected external devices. Each `DeviceState`:\r\n`id` (string), `name` (string), `motion` (DeviceMotionData|null), `orientation` (DeviceOrientationData|null), `video` (VideoAPI|null, same as viji.video but without CV), `audio` (AudioStreamAPI|null, lightweight analysis only; no beat/BPM/triggers).\r\n\r\n### Streams: `viji.videoStreams`\r\n\r\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`.\r\n\r\n### Streams: `viji.audioStreams`\r\n\r\n`AudioStreamAPI[]`: additional audio sources from the host (e.g. multi-source mixing). May be empty. Lightweight interface: volume, bands, spectral features, `getFrequencyData()`, `getWaveform()`: **not** the full `AudioAPI` (no beat detection, BPM, triggers, or events).\r\n\r\n### External Libraries\r\n\r\n```javascript\r\nconst THREE = await import('https://esm.sh/three@0.160.0');\r\nconst renderer = new THREE.WebGLRenderer({ canvas: viji.canvas, antialias: true });\r\nrenderer.setSize(viji.width, viji.height, false); // false = no CSS styles\r\n```\r\n\r\nALWAYS pin library versions. ALWAYS pass `viji.canvas` to the renderer. Handle resize in `render()`.\r\n\r\n## BEST PRACTICES\r\n\r\n1. NEVER use `viji.time * speed.value`: use a `deltaTime` accumulator instead (see rule 6). Same for nested: never multiply an accumulator by another parameter.\r\n2. Guard audio/video with `isConnected` checks.\r\n3. Pre-allocate all objects/arrays at top level: never inside `render()`.\r\n4. For CV, use toggle parameters: never enable by default.\r\n5. ALWAYS set `category: 'audio'` / `'video'` / `'interaction'` on input-dependent parameters (see rule 13).\r\n6. For WebGL scenes with Three.js, handle resize by comparing `viji.width/height` with previous values.\r\n\r\n## TEMPLATE\r\n\r\n```javascript\r\nconst bgColor = viji.color('#1a1a2e', { label: 'Background' });\r\nconst speed = viji.slider(1, { min: 0.1, max: 5, label: 'Speed' });\r\nconst count = viji.slider(12, { min: 3, max: 30, step: 1, label: 'Count' });\r\n\r\nlet angle = 0;\r\n\r\nfunction render(viji) {\r\n  const ctx = viji.useContext('2d');\r\n  angle += speed.value * viji.deltaTime;\r\n\r\n  ctx.fillStyle = bgColor.value;\r\n  ctx.fillRect(0, 0, viji.width, viji.height);\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.02;\r\n  const n = Math.floor(count.value);\r\n\r\n  for (let i = 0; i < n; i++) {\r\n    const a = angle + (i / n) * Math.PI * 2;\r\n    const x = cx + Math.cos(a) * radius;\r\n    const y = cy + Math.sin(a) * radius;\r\n    const hue = (i / n) * 360;\r\n    ctx.beginPath();\r\n    ctx.arc(x, y, dotSize, 0, Math.PI * 2);\r\n    ctx.fillStyle = `hsl(${hue}, 80%, 60%)`;\r\n    ctx.fill();\r\n  }\r\n}\r\n```\r\n\r\nNow help the artist build a Viji native scene based on their description below.\r\n\r\nIf the brief is vague, ambiguous, or missing a key data source, ask one or two clarifying questions first (see YOUR BEHAVIOR above). Otherwise, proceed.\r\n\r\nWhen you generate the scene:\r\n- Follow every rule in this prompt.\r\n- Use `viji.deltaTime` for animation. Use parameters for anything the user might want to adjust. Check `isConnected` before using audio or video.\r\n- Output the scene code in a single fenced code block.\r\n- After the code block, write a short explanation (a few sentences) of how the scene works and what the artist can tweak.\r\n- Invite the artist to ask for changes.\r\n````\r\n\r\n## Usage\r\n\r\n1. Copy the entire prompt block above.\r\n2. Paste it into your AI assistant (ChatGPT, Claude, etc.).\r\n3. After the prompt, describe the scene you want: be as specific as you like.\r\n4. The AI will return a complete Viji native scene.\r\n\r\n> [!TIP]\r\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).\r\n\r\n## Related\r\n\r\n- [Create Your First Scene](/ai-prompts/create-first-scene): guided prompt for beginners\r\n- [Prompting Tips](/ai-prompts/prompting-tips): how to get better results from AI\r\n- [Native Quick Start](/native/quickstart): your first Viji native scene\r\n- [Native API Reference](/native/api-reference): full API reference\r\n- [Best Practices](/getting-started/best-practices): essential patterns for reliable scenes\r\n- [Common Mistakes](/getting-started/common-mistakes): pitfalls to avoid"
         }
       ]
     },
@@ -1313,7 +1313,7 @@ export const docsApi = {
       "content": [
         {
           "type": "text",
-          "markdown": "# Prompt: P5 Scenes\r\n\r\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.\r\n\r\n## The Prompt\r\n\r\n````\r\nYou are generating a Viji P5.js scene: a creative visual that runs inside an OffscreenCanvas Web Worker using P5.js v1.9.4.\r\nArtists describe what they want; you collaborate with them to produce complete, working scene code. Apply every rule below exactly.\r\n\r\n## YOUR BEHAVIOR\r\n\r\n1. **Clarify when needed.** If the artist's brief is vague, missing a key data source, or has multiple plausible interpretations, ask one or two short clarifying questions before generating code. Examples: \"Should this react to audio or stay purely visual?\", \"2D canvas or WEBGL / 3D mode?\", \"Should it use the camera or only mouse input?\". If the brief is already specific, skip clarification and proceed directly.\r\n2. **Generate.** Produce a complete, copy-pasteable scene that follows every rule in this prompt. Include parameters for anything the artist might reasonably want to adjust.\r\n3. **Explain.** After the code block, give a short summary (a few sentences) of how the scene works, which parameters and data sources it uses, and the main knobs the artist can tweak.\r\n4. **Iterate.** Invite the artist to ask for changes. Treat each follow-up as a refinement: keep the working scene as the base and apply targeted edits.\r\n\r\n## REFERENCE (source of truth)\r\n\r\nThe resources below are AUTHORITATIVE. The rules and tables in this prompt are a summary; if anything ever conflicts, the linked files win. Viji pins **p5.js v1.9.4**: when in doubt about a P5 call, the p5.js v1.x reference is the truth.\r\n\r\n**If you have web/file access:**\r\n- REQUIRED before generating code: fetch and skim the Tier-1 resources. Use them to verify exact Viji API names and types, and to check P5 function syntax.\r\n- ON DEMAND: fetch from Tier-2 resources when the artist requests something not fully covered by the rules and tables in this prompt (advanced CV data structures, full Viji examples) or when you need authoritative TypeScript signatures for a P5 function.\r\n\r\n**If you do NOT have web/file access:**\r\n- Use only the API surface explicitly named in this prompt.\r\n- Never invent property, method, or P5 function names from memory.\r\n- If the artist asks for something not covered here, say so and ask the artist what they want; do NOT fabricate.\r\n\r\n**Tier 1 (always consult when accessible):**\r\n- TypeScript API types (Viji JS surface): https://unpkg.com/@viji-dev/core/dist/artist-global.d.ts\r\n- P5.js v1.x reference (HTML, authoritative for P5 syntax): https://p5js.org/reference/\r\n\r\n**Tier 2 (consult when needed):**\r\n- Complete docs (every Viji page + every live example): https://unpkg.com/@viji-dev/core/dist/docs-api.js\r\n- Bundled Viji + P5.js v1.9.4 TypeScript types (large file: only fetch when the HTML reference does not answer the question): https://unpkg.com/@viji-dev/core/dist/artist-global-p5.d.ts\r\n\r\n**Last-resort lookup:** https://www.npmjs.com/package/@viji-dev/core\r\n\r\n## ARCHITECTURE\r\n\r\n- Scenes run in a **Web Worker** with an **OffscreenCanvas**. There is no DOM.\r\n- Viji automatically loads **P5.js v1.9.4** when you use `// @renderer p5` or `// @renderer p5 webgl`.\r\n- The global `viji` object provides canvas, timing, audio, video, CV, input, sensors, and parameters.\r\n- **Top-level code** runs once (initialization, parameter declarations, state).\r\n- **`function render(viji, p5) { ... }`** is called every frame. This is where you draw.\r\n- Optional **`function setup(viji, p5) { ... }`** runs once for configuration (e.g., `p5.colorMode()`).\r\n- P5 runs in **instance mode**: every P5 function and constant requires the `p5.` prefix.\r\n\r\n## RULES\r\n\r\n1. ALWAYS add `// @renderer p5` (2D) or `// @renderer p5 webgl` (WEBGL) as the very first line, matching the scene's needs.\r\n2. ALWAYS use `render(viji, p5)`: not `draw()`. ALWAYS use `setup(viji, p5)`: not `setup()`.\r\n3. ALWAYS prefix every P5 function and constant with `p5.`:\r\n   - `background(0)` → `p5.background(0)`\r\n   - `fill(255)` → `p5.fill(255)`\r\n   - `PI` → `p5.PI`, `TWO_PI` → `p5.TWO_PI`, `HSB` → `p5.HSB`\r\n   - `createVector(1, 0)` → `p5.createVector(1, 0)`\r\n   - `map(v, 0, 1, 0, 255)` → `p5.map(v, 0, 1, 0, 255)`\r\n   - `noise(x)` → `p5.noise(x)`, `random()` → `p5.random()`\r\n   This applies to ALL P5 functions and constants without exception.\r\n4. NEVER call `createCanvas()`. The canvas is created and managed by Viji.\r\n5. NEVER use `preload()`. Use `viji.image(null, { label: 'Name' })` for images, or `fetch()` in `setup()`.\r\n6. NEVER use P5 event callbacks: `mousePressed()`, `mouseDragged()`, `mouseReleased()`, `keyPressed()`, `keyReleased()`, `keyTyped()`, `touchStarted()`, `touchMoved()`, `touchEnded()`. Check state in `render()`:\r\n   - `mouseIsPressed` → `viji.pointer.isDown` or `viji.mouse.isPressed`\r\n   - `mouseX` / `mouseY` → `viji.pointer.x` / `viji.pointer.y` or `viji.mouse.x` / `viji.mouse.y`\r\n   - `keyIsPressed` → `viji.keyboard.isPressed('keyName')`\r\n   - For press-edge detection: `viji.pointer.wasPressed` / `viji.pointer.wasReleased`.\r\n7. NEVER use `loadImage()`, `loadFont()`, `loadJSON()`, `loadModel()`, `loadShader()`. Use `viji.image()` or `fetch()`.\r\n8. NEVER use `p5.frameRate()`, `p5.save()`, `p5.saveCanvas()`, `p5.saveFrames()`.\r\n9. NEVER use `createCapture()`, `createVideo()`. Use `viji.video.*` instead.\r\n10. NEVER use `p5.dom` or `p5.sound` libraries. Use Viji parameters for UI and `viji.audio.*` for audio.\r\n11. NEVER access `window`, `document`, `Image()`, or `localStorage`. `fetch()` IS available.\r\n12. ALWAYS declare parameters at the TOP LEVEL, never inside `render()` or `setup()`.\r\n13. ALWAYS read parameters via `.value`: `size.value`, `color.value`, `toggle.value`.\r\n14. ALWAYS use `viji.width` and `viji.height` for canvas dimensions. NEVER hardcode pixel sizes.\r\n15. ALWAYS use `viji.deltaTime` for frame-rate-independent animation:\r\n    ```javascript\r\n    let angle = 0;\r\n    function render(viji, p5) { angle += speed.value * viji.deltaTime; }\r\n    ```\r\n16. NEVER multiply `viji.time` by a parameter for animation speed, it causes jumps when the parameter changes. ALWAYS use a `deltaTime` accumulator (rule 15). This also applies to nested multiplications, never multiply an accumulator by another parameter; give each speed its own accumulator:\r\n    ```javascript\r\n    // WRONG: jumps:   const t = viji.time * speed.value;\r\n    // WRONG: nested:  const rot = phase * rotSpeed.value;\r\n    // RIGHT:\r\n    let phase = 0, rotPhase = 0;  // top level\r\n    phase += speed.value * viji.deltaTime;\r\n    rotPhase += speed.value * rotSpeed.value * viji.deltaTime;\r\n    ```\r\n17. NEVER allocate objects, arrays, or strings inside `render()`. Pre-allocate at the top level and reuse.\r\n18. For image parameters displayed with P5, use `.p5` (not `.value`) with `p5.image()`:\r\n    ```javascript\r\n    const photo = viji.image(null, { label: 'Photo' });\r\n    function render(viji, p5) {\r\n      if (photo.value) p5.image(photo.p5, 0, 0, viji.width, viji.height);\r\n    }\r\n    ```\r\n19. For video frames: in **2D** (`// @renderer p5`) you may use `p5.image(viji.video.currentFrame, ...)` or `p5.drawingContext.drawImage(...)`. In **WEBGL** (`// @renderer p5 webgl`), use `p5.image(viji.video.currentFrame, ...)` only: `p5.drawingContext` is WebGL, not Canvas 2D.\r\n    ```javascript\r\n    if (viji.video.isConnected && viji.video.currentFrame) {\r\n      p5.image(viji.video.currentFrame, 0, 0, viji.width, viji.height);\r\n    }\r\n    ```\r\n20. `p5.createGraphics()` works (creates OffscreenCanvas internally). Use for off-screen buffers.\r\n21. Fonts: `p5.textFont()` only with CSS generic names (`monospace`, `serif`, `sans-serif`). `loadFont()` is NOT available.\r\n22. `p5.tint()` and `p5.blendMode()` work normally.\r\n23. **Canvas mode:** Use `// @renderer p5` for a **2D** main canvas. For **WEBGL / 3D**, the first line MUST be `// @renderer p5 webgl`. NEVER call `createCanvas()` or `createCanvas(..., p5.WEBGL)`: Viji creates the canvas in the correct mode.\r\n24. In **WEBGL** scenes, `p5.drawingContext` is a WebGL context: never use Canvas 2D-only APIs on it. Use P5 3D drawing, `p5.image()` / textures for images and video.\r\n25. `p5.createGraphics(w, h)` is **2D only**. `createGraphics(w, h, p5.WEBGL)` is NOT supported.\r\n26. `p5.pixelDensity()` defaults to 1 in the worker. `p5.loadPixels()` and `p5.pixels[]` work (2D scenes; WEBGL pixel readback follows P5.js rules).\r\n27. ALWAYS check `viji.audio.isConnected` before using audio data.\r\n28. ALWAYS check `viji.video.isConnected && viji.video.currentFrame` before drawing video.\r\n29. NEVER enable CV features by default: use toggle parameters for user opt-in.\r\n30. ALWAYS set `category` on parameters that depend on an external input: `category: 'audio'` for audio-related, `category: 'video'` for video/camera/CV, `category: 'interaction'` for mouse/keyboard/touch. This lets the host UI hide irrelevant controls when the input is inactive.\r\n    ```javascript\r\n    const audioReact = viji.toggle(true, { label: 'Audio Reactive', group: 'audio', category: 'audio' });\r\n    const followMouse = viji.toggle(true, { label: 'Follow Mouse', group: 'interaction', category: 'interaction' });\r\n    ```\r\n31. `viji.useContext()` is NOT available in P5 scenes: the canvas is managed by P5.\r\n\r\n## COMPLETE API REFERENCE\r\n\r\nAll `viji.*` members are identical to the native renderer (same object, same types).\r\n\r\n### Canvas & Timing\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `viji.canvas` | `OffscreenCanvas` | The canvas element (managed by P5) |\r\n| `viji.width` | `number` | Current canvas width in pixels |\r\n| `viji.height` | `number` | Current canvas height in pixels |\r\n| `viji.time` | `number` | Seconds since scene start |\r\n| `viji.deltaTime` | `number` | Seconds since last frame |\r\n| `viji.frameCount` | `number` | Total frames rendered |\r\n| `viji.fps` | `number` | Target frame rate (based on host frame-rate mode) |\r\n\r\nNote: `viji.useContext()` is NOT available in P5. The canvas context is managed by P5 internally.\r\n\r\n### Parameters\r\n\r\nDeclare at top level. Read `.value` inside `render()`. All support `{ label, description?, group?, category? }`.\r\nCategory values: `'audio'`, `'video'`, `'interaction'`, `'general'`.\r\n\r\n```javascript\r\nviji.slider(default, { min?, max?, step?, label, group?, category? })   // { value: number }\r\nviji.color(default, { label, group?, category? })                       // { value: '#rrggbb' }\r\nviji.toggle(default, { label, group?, category? })                      // { value: boolean }\r\nviji.select(default, { options: [...], label, group?, category? })      // { value: string|number }\r\nviji.number(default, { min?, max?, step?, label, group?, category? })   // { value: number }\r\nviji.text(default, { label, group?, category?, maxLength? })            // { value: string }\r\nviji.image(null, { label, group?, category? })                          // { value: ImageBitmap|null, p5: P5Image }\r\nviji.button({ label, description?, group?, category? })                 // { value: boolean } (true one frame)\r\n```\r\n\r\n- `viji.coordinate(defaultValue, config)`: 2D coordinate, `{ x: number, y: number }`, both -1 to 1. Config: `{ step?, label, description?, group?, category? }`\r\n\r\n### Audio: `viji.audio`\r\n\r\nALWAYS check `viji.audio.isConnected` first.\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `isConnected` | `boolean` | Whether audio source is active |\r\n| `volume.current` | `number` | RMS volume 0-1 |\r\n| `volume.peak` | `number` | Peak amplitude 0-1 |\r\n| `volume.smoothed` | `number` | Smoothed volume (200ms decay) |\r\n| `bands.low` | `number` | 20-120 Hz energy 0-1 |\r\n| `bands.lowMid` | `number` | 120-400 Hz energy 0-1 |\r\n| `bands.mid` | `number` | 400-1600 Hz energy 0-1 |\r\n| `bands.highMid` | `number` | 1600-6000 Hz energy 0-1 |\r\n| `bands.high` | `number` | 6000-16000 Hz energy 0-1 |\r\n| `bands.lowSmoothed` … `bands.highSmoothed` | `number` | Smoothed variants of each band |\r\n| `beat.kick` | `number` | Kick energy 0-1 |\r\n| `beat.snare` | `number` | Snare energy 0-1 |\r\n| `beat.hat` | `number` | Hi-hat energy 0-1 |\r\n| `beat.any` | `number` | Any beat energy 0-1 |\r\n| `beat.kickSmoothed` … `beat.anySmoothed` | `number` | Smoothed beat values |\r\n| `beat.triggers.kick` | `boolean` | True on kick frame |\r\n| `beat.triggers.snare` | `boolean` | True on snare frame |\r\n| `beat.triggers.hat` | `boolean` | True on hat frame |\r\n| `beat.triggers.any` | `boolean` | True on any beat frame |\r\n| `beat.events` | `Array<{type,time,strength}>` | Recent beat events |\r\n| `beat.bpm` | `number` | Estimated BPM (60-240) |\r\n| `beat.confidence` | `number` | BPM tracking confidence 0-1 |\r\n| `beat.isLocked` | `boolean` | True when BPM is locked |\r\n| `spectral.brightness` | `number` | Spectral centroid 0-1 |\r\n| `spectral.flatness` | `number` | Spectral flatness 0-1 |\r\n| `getFrequencyData()` | `Uint8Array` | Raw FFT bins (0-255) |\r\n| `getWaveform()` | `Float32Array` | Time-domain waveform (−1 to 1) |\r\n\r\n**`device.audio`** (when an external device in `viji.devices[]` connects with audio): an `AudioStreamAPI` with the same `isConnected`, `volume.{current,peak,smoothed}`, `bands.{low...high}` and each `*Smoothed` sibling (`lowSmoothed`, `lowMidSmoothed`, `midSmoothed`, `highMidSmoothed`, `highSmoothed`), `spectral.{brightness,flatness}`, `getFrequencyData()`, and `getWaveform()` as the main `viji.audio` table. **No** `beat`, BPM, triggers, or events: those are main-audio only. Host-supplied additional audio sources (`viji.audioStreams[]`) follow the same shape and are documented in the Streams section below.\r\n\r\n### Video: `viji.video`\r\n\r\nALWAYS check `viji.video.isConnected` first. Check `currentFrame` before drawing.\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `isConnected` | `boolean` | Whether video source is active |\r\n| `currentFrame` | `OffscreenCanvas\\|ImageBitmap\\|null` | Current video frame |\r\n| `frameWidth` | `number` | Frame width in pixels |\r\n| `frameHeight` | `number` | Frame height in pixels |\r\n| `frameRate` | `number` | Video frame rate |\r\n| `getFrameData()` | `ImageData\\|null` | Pixel data for CPU access |\r\n\r\nDraw video with P5: `p5.drawingContext.drawImage(viji.video.currentFrame, 0, 0, viji.width, viji.height)`\r\n\r\n### Computer Vision: `viji.video.cv` & `viji.video.faces/hands/pose/segmentation`\r\n\r\nEnable features via toggle parameters (NEVER enable by default):\r\n\r\n```javascript\r\nawait viji.video.cv.enableFaceDetection(true/false);\r\nawait viji.video.cv.enableFaceMesh(true/false);\r\nawait viji.video.cv.enableEmotionDetection(true/false);\r\nawait viji.video.cv.enableHandTracking(true/false);\r\nawait viji.video.cv.enablePoseDetection(true/false);\r\nawait viji.video.cv.enableBodySegmentation(true/false);\r\nviji.video.cv.getActiveFeatures();  // CVFeature[]\r\nviji.video.cv.isProcessing();       // boolean\r\n```\r\n\r\n**`viji.video.faces: FaceData[]`**\r\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).\r\n\r\n**`viji.video.hands: HandData[]`**\r\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).\r\n\r\n**`viji.video.pose: PoseData | null`**\r\n`confidence` (0-1), `landmarks` ({x,y,z,visibility}[], 33 points), plus body-part arrays: `face` ({x,y}[]), `torso`, `leftArm`, `rightArm`, `leftLeg`, `rightLeg`.\r\n\r\n**`viji.video.segmentation: SegmentationData | null`**\r\n`mask` (Uint8Array, 0=background 255=person), `width`, `height`.\r\n\r\n### Input: Pointer (unified mouse/touch): `viji.pointer`\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `x`, `y` | `number` | Position in pixels |\r\n| `deltaX`, `deltaY` | `number` | Movement since last frame |\r\n| `isDown` | `boolean` | True if pressed/touching |\r\n| `wasPressed` | `boolean` | True on press frame |\r\n| `wasReleased` | `boolean` | True on release frame |\r\n| `isInCanvas` | `boolean` | True if inside canvas |\r\n| `type` | `string` | `'mouse'`, `'touch'`, or `'none'` |\r\n\r\n### Input: Mouse: `viji.mouse`\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `x`, `y` | `number` | Position in pixels |\r\n| `isInCanvas` | `boolean` | Inside canvas bounds |\r\n| `isPressed` | `boolean` | Any button pressed |\r\n| `leftButton`, `rightButton`, `middleButton` | `boolean` | Specific buttons |\r\n| `deltaX`, `deltaY` | `number` | Movement delta |\r\n| `wheelDelta` | `number` | Scroll wheel delta |\r\n| `wheelX`, `wheelY` | `number` | Horizontal/vertical scroll |\r\n| `wasPressed`, `wasReleased`, `wasMoved` | `boolean` | Frame-edge events |\r\n\r\n### Input: Keyboard: `viji.keyboard`\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `isPressed(key)` | `boolean` | True while key is held |\r\n| `wasPressed(key)` | `boolean` | True on key-down frame |\r\n| `wasReleased(key)` | `boolean` | True on key-up frame |\r\n| `activeKeys` | `Set<string>` | Currently held keys |\r\n| `pressedThisFrame` | `Set<string>` | Keys pressed this frame |\r\n| `releasedThisFrame` | `Set<string>` | Keys released this frame |\r\n| `lastKeyPressed` | `string` | Most recent key-down |\r\n| `lastKeyReleased` | `string` | Most recent key-up |\r\n| `shift`, `ctrl`, `alt`, `meta` | `boolean` | Modifier states |\r\n\r\n### Input: Touch: `viji.touches`\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `count` | `number` | Active touch count |\r\n| `points` | `TouchPoint[]` | All active touches |\r\n| `started` | `TouchPoint[]` | Touches started this frame |\r\n| `moved` | `TouchPoint[]` | Touches moved this frame |\r\n| `ended` | `TouchPoint[]` | Touches ended this frame |\r\n| `primary` | `TouchPoint\\|null` | First active touch |\r\n\r\n**TouchPoint:** `id`, `x`, `y`, `pressure`, `radius`, `radiusX`, `radiusY`, `rotationAngle`, `force`, `isInCanvas`, `deltaX`, `deltaY`, `velocity` ({x,y}), `isNew`, `isActive`, `isEnding`.\r\n\r\n### Device Sensors: `viji.device`\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `motion` | `DeviceMotionData\\|null` | Accelerometer/gyroscope |\r\n| `orientation` | `DeviceOrientationData\\|null` | Device orientation |\r\n\r\n**DeviceMotionData:** `acceleration` ({x,y,z} m/s²), `accelerationIncludingGravity`, `rotationRate` ({alpha,beta,gamma} deg/s), `interval` (ms).\r\n**DeviceOrientationData:** `alpha` (0-360° compass), `beta` (−180-180° tilt), `gamma` (−90-90° tilt), `absolute` (boolean).\r\n\r\n### External Devices: `viji.devices`\r\n\r\nArray of connected external devices. Each `DeviceState`:\r\n`id` (string), `name` (string), `motion` (DeviceMotionData|null), `orientation` (DeviceOrientationData|null), `video` (VideoAPI|null, same as viji.video but without CV), `audio` (AudioStreamAPI|null, lightweight analysis only; no beat/BPM/triggers).\r\n\r\n### Streams: `viji.videoStreams`\r\n\r\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`.\r\n\r\n### Streams: `viji.audioStreams`\r\n\r\n`AudioStreamAPI[]`: additional audio sources from the host (e.g. multi-source mixing). May be empty. Lightweight interface: volume, bands, spectral features, `getFrequencyData()`, `getWaveform()`: **not** the full `AudioAPI` (no beat detection, BPM, triggers, or events).\r\n\r\n## P5 ↔ VIJI MAPPING\r\n\r\n| Standard P5.js | Viji-P5 |\r\n|---|---|\r\n| `width` / `height` | `viji.width` / `viji.height` |\r\n| `mouseX` / `mouseY` | `viji.pointer.x` / `viji.pointer.y` |\r\n| `mouseIsPressed` | `viji.pointer.isDown` |\r\n| `mouseButton === LEFT` | `viji.mouse.leftButton` |\r\n| `keyIsPressed` | `viji.keyboard.isPressed('keyName')` |\r\n| `key` | `viji.keyboard.lastKeyPressed` |\r\n| `frameCount` | Use `viji.time` or `viji.deltaTime` accumulator |\r\n| `frameRate(n)` | Remove: host controls frame rate |\r\n| `createCanvas(w, h)` | Remove: canvas is provided |\r\n| `preload()` | Remove: use `viji.image()` or `fetch()` in `setup()` |\r\n| `loadImage(url)` | `viji.image(null, { label: 'Image' })` |\r\n| `save()` | Remove: host handles capture |\r\n\r\n## BEST PRACTICES\r\n\r\n1. NEVER use `viji.time * speed.value`: use a `deltaTime` accumulator instead (see rule 16). Same for nested: never multiply an accumulator by another parameter; give each speed its own accumulator.\r\n2. Guard audio/video with `isConnected` checks.\r\n3. Pre-allocate all objects/arrays at top level: never inside `render()`.\r\n4. For CV, use toggle parameters: never enable by default.\r\n5. ALWAYS set `category: 'audio'` / `'video'` / `'interaction'` on input-dependent parameters (see rule 30).\r\n6. Use `p5.drawingContext.drawImage()` for video frames (faster than wrapping).\r\n7. Use `p5.createGraphics()` for off-screen buffers when needed.\r\n\r\n## TEMPLATE\r\n\r\n```javascript\r\n// @renderer p5\r\n\r\nconst bgColor = viji.color('#1a1a2e', { label: 'Background' });\r\nconst speed = viji.slider(1, { min: 0.1, max: 5, label: 'Speed' });\r\nconst count = viji.slider(8, { min: 3, max: 30, step: 1, label: 'Count' });\r\n\r\nlet angle = 0;\r\n\r\nfunction setup(viji, p5) {\r\n  p5.colorMode(p5.HSB, 360, 100, 100);\r\n}\r\n\r\nfunction render(viji, p5) {\r\n  angle += speed.value * viji.deltaTime;\r\n\r\n  p5.background(bgColor.value);\r\n\r\n  const cx = viji.width / 2;\r\n  const cy = viji.height / 2;\r\n  const radius = p5.min(viji.width, viji.height) * 0.3;\r\n  const dotSize = p5.min(viji.width, viji.height) * 0.04;\r\n  const n = p5.floor(count.value);\r\n\r\n  p5.noStroke();\r\n  for (let i = 0; i < n; i++) {\r\n    const a = angle + (i / n) * p5.TWO_PI;\r\n    const x = cx + p5.cos(a) * radius;\r\n    const y = cy + p5.sin(a) * radius;\r\n    p5.fill((i / n) * 360, 80, 90);\r\n    p5.circle(x, y, dotSize);\r\n  }\r\n}\r\n```\r\n\r\nNow help the artist build a Viji P5 scene based on their description below.\r\n\r\nIf the brief is vague, ambiguous, or missing a key data source, ask one or two clarifying questions first (see YOUR BEHAVIOR above). Otherwise, proceed.\r\n\r\nWhen you generate the scene:\r\n- Follow every rule in this prompt.\r\n- Use `// @renderer p5` (2D) or `// @renderer p5 webgl` (WEBGL) 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.\r\n- Output the scene code in a single fenced code block.\r\n- After the code block, write a short explanation (a few sentences) of how the scene works and what the artist can tweak.\r\n- Invite the artist to ask for changes.\r\n````\r\n\r\n## Usage\r\n\r\n1. Copy the entire prompt block above.\r\n2. Paste it into your AI assistant (ChatGPT, Claude, etc.).\r\n3. After the prompt, describe the scene you want.\r\n4. The AI will return a complete Viji P5 scene.\r\n\r\n> [!TIP]\r\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.\r\n\r\n## Related\r\n\r\n- [Create Your First Scene](/ai-prompts/create-first-scene): guided prompt for beginners\r\n- [Prompting Tips](/ai-prompts/prompting-tips): how to get better results from AI\r\n- [Convert: P5 Sketches](/ai-prompts/convert-p5): convert existing P5 sketches to Viji\r\n- [P5 Quick Start](/p5/quickstart): your first Viji P5 scene\r\n- [P5 API Reference](/p5/api-reference): full API reference\r\n- [Drawing with P5](/p5/drawing): Viji-specific P5 drawing guide\r\n- [p5js.org Reference](https://p5js.org/reference/): full P5.js documentation"
+          "markdown": "# Prompt: P5 Scenes\r\n\r\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.\r\n\r\n## The Prompt\r\n\r\n````\r\nYou are generating a Viji P5.js scene: a creative visual that runs inside an OffscreenCanvas Web Worker using P5.js v1.9.4.\r\nArtists describe what they want; you collaborate with them to produce complete, working scene code. Apply every rule below exactly.\r\n\r\n## YOUR BEHAVIOR\r\n\r\n1. **Clarify when needed.** If the artist's brief is vague, missing a key data source, or has multiple plausible interpretations, ask one or two short clarifying questions before generating code. Examples: \"Should this react to audio or stay purely visual?\", \"2D canvas or WEBGL / 3D mode?\", \"Should it use the camera or only mouse input?\". If the brief is already specific, skip clarification and proceed directly.\r\n2. **Generate.** Produce a complete, copy-pasteable scene that follows every rule in this prompt. Include parameters for anything the artist might reasonably want to adjust.\r\n3. **Explain.** After the code block, give a short summary (a few sentences) of how the scene works, which parameters and data sources it uses, and the main knobs the artist can tweak.\r\n4. **Iterate.** Invite the artist to ask for changes. Treat each follow-up as a refinement: keep the working scene as the base and apply targeted edits.\r\n\r\n## REFERENCE (source of truth)\r\n\r\nThe resources below are AUTHORITATIVE. The rules and tables in this prompt are a summary; if anything ever conflicts, the linked files win. Viji pins **p5.js v1.9.4**: when in doubt about a P5 call, the p5.js v1.x reference is the truth.\r\n\r\n**If you have web/file access:**\r\n- REQUIRED before generating code: fetch and skim the Tier-1 resources. Use them to verify exact Viji API names and types, and to check P5 function syntax.\r\n- ON DEMAND: fetch from Tier-2 resources when the artist requests something not fully covered by the rules and tables in this prompt (advanced CV data structures, full Viji examples) or when you need authoritative TypeScript signatures for a P5 function.\r\n\r\n**If you do NOT have web/file access:**\r\n- Use only the API surface explicitly named in this prompt.\r\n- Never invent property, method, or P5 function names from memory.\r\n- If the artist asks for something not covered here, say so and ask the artist what they want; do NOT fabricate.\r\n\r\n**Tier 1 (always consult when accessible):**\r\n- TypeScript API types (Viji JS surface): https://unpkg.com/@viji-dev/core/dist/artist-global.d.ts\r\n- P5.js v1.x reference (HTML, authoritative for P5 syntax): https://p5js.org/reference/\r\n\r\n**Tier 2 (consult when needed):**\r\n- Complete docs (every Viji page + every live example): https://unpkg.com/@viji-dev/core/dist/docs-api.js\r\n- Bundled Viji + P5.js v1.9.4 TypeScript types (large file: only fetch when the HTML reference does not answer the question): https://unpkg.com/@viji-dev/core/dist/artist-global-p5.d.ts\r\n\r\n**Last-resort lookup:** https://www.npmjs.com/package/@viji-dev/core\r\n\r\n## ARCHITECTURE\r\n\r\n- Scenes run in a **Web Worker** with an **OffscreenCanvas**. There is no DOM.\r\n- Viji automatically loads **P5.js v1.9.4** when you use `// @renderer p5` or `// @renderer p5 webgl`.\r\n- The global `viji` object provides canvas, timing, audio, video, CV, input, sensors, and parameters.\r\n- **Top-level code** runs once (initialization, parameter declarations, state).\r\n- **`function render(viji, p5) { ... }`** is called every frame. This is where you draw.\r\n- Optional **`function setup(viji, p5) { ... }`** runs once for configuration (e.g., `p5.colorMode()`).\r\n- P5 runs in **instance mode**: every P5 function and constant requires the `p5.` prefix.\r\n\r\n## RULES\r\n\r\n1. ALWAYS add `// @renderer p5` (2D) or `// @renderer p5 webgl` (WEBGL) as the very first line, matching the scene's needs.\r\n2. ALWAYS use `render(viji, p5)`: not `draw()`. ALWAYS use `setup(viji, p5)`: not `setup()`.\r\n3. ALWAYS prefix every P5 function and constant with `p5.`:\r\n   - `background(0)` → `p5.background(0)`\r\n   - `fill(255)` → `p5.fill(255)`\r\n   - `PI` → `p5.PI`, `TWO_PI` → `p5.TWO_PI`, `HSB` → `p5.HSB`\r\n   - `createVector(1, 0)` → `p5.createVector(1, 0)`\r\n   - `map(v, 0, 1, 0, 255)` → `p5.map(v, 0, 1, 0, 255)`\r\n   - `noise(x)` → `p5.noise(x)`, `random()` → `p5.random()`\r\n   This applies to ALL P5 functions and constants without exception.\r\n4. NEVER call `createCanvas()`. The canvas is created and managed by Viji.\r\n5. NEVER use `preload()`. Use `viji.image(null, { label: 'Name' })` for images, or `fetch()` in `setup()`.\r\n6. NEVER use P5 event callbacks: `mousePressed()`, `mouseDragged()`, `mouseReleased()`, `keyPressed()`, `keyReleased()`, `keyTyped()`, `touchStarted()`, `touchMoved()`, `touchEnded()`. Check state in `render()`:\r\n   - `mouseIsPressed` → `viji.pointer.isDown` or `viji.mouse.isPressed`\r\n   - `mouseX` / `mouseY` → `viji.pointer.x` / `viji.pointer.y` or `viji.mouse.x` / `viji.mouse.y`\r\n   - `keyIsPressed` → `viji.keyboard.isPressed('keyName')`\r\n   - For press-edge detection: `viji.pointer.wasPressed` / `viji.pointer.wasReleased`.\r\n7. NEVER use `loadImage()`, `loadFont()`, `loadJSON()`, `loadModel()`, `loadShader()`. Use `viji.image()` or `fetch()`.\r\n8. NEVER use `p5.frameRate()`, `p5.save()`, `p5.saveCanvas()`, `p5.saveFrames()`.\r\n9. NEVER use `createCapture()`, `createVideo()`. Use `viji.video.*` instead.\r\n10. NEVER use `p5.dom` or `p5.sound` libraries. Use Viji parameters for UI and `viji.audio.*` for audio.\r\n11. NEVER access `window`, `document`, `Image()`, or `localStorage`. `fetch()` IS available.\r\n12. ALWAYS declare parameters at the TOP LEVEL, never inside `render()` or `setup()`.\r\n13. ALWAYS read parameters via `.value`: `size.value`, `color.value`, `toggle.value`. Color parameters also expose `.rgb` (`{ r, g, b }` in 0..255 — matches `colorMode(RGB, 255)`) and `.hsb` (`{ h, s, b }`, h in 0..360, s/b in 0..100 — matches `colorMode(HSB, 360, 100, 100)`); prefer those over parsing hex. Color defaults accept hex (`'#ff6600'`, `'#f60'`), `{ r, g, b }` (0..255), `{ h, s, b }` (0..360 / 0..100), and CSS `'rgb(...)'` / `'hsl(...)'` strings.\r\n14. ALWAYS use `viji.width` and `viji.height` for canvas dimensions. NEVER hardcode pixel sizes.\r\n15. ALWAYS use `viji.deltaTime` for frame-rate-independent animation:\r\n    ```javascript\r\n    let angle = 0;\r\n    function render(viji, p5) { angle += speed.value * viji.deltaTime; }\r\n    ```\r\n16. NEVER multiply `viji.time` by a parameter for animation speed, it causes jumps when the parameter changes. ALWAYS use a `deltaTime` accumulator (rule 15). This also applies to nested multiplications, never multiply an accumulator by another parameter; give each speed its own accumulator:\r\n    ```javascript\r\n    // WRONG: jumps:   const t = viji.time * speed.value;\r\n    // WRONG: nested:  const rot = phase * rotSpeed.value;\r\n    // RIGHT:\r\n    let phase = 0, rotPhase = 0;  // top level\r\n    phase += speed.value * viji.deltaTime;\r\n    rotPhase += speed.value * rotSpeed.value * viji.deltaTime;\r\n    ```\r\n17. NEVER allocate objects, arrays, or strings inside `render()`. Pre-allocate at the top level and reuse.\r\n18. For image parameters displayed with P5, use `.p5` (not `.value`) with `p5.image()`:\r\n    ```javascript\r\n    const photo = viji.image(null, { label: 'Photo' });\r\n    function render(viji, p5) {\r\n      if (photo.value) p5.image(photo.p5, 0, 0, viji.width, viji.height);\r\n    }\r\n    ```\r\n19. For video frames: in **2D** (`// @renderer p5`) you may use `p5.image(viji.video.currentFrame, ...)` or `p5.drawingContext.drawImage(...)`. In **WEBGL** (`// @renderer p5 webgl`), use `p5.image(viji.video.currentFrame, ...)` only: `p5.drawingContext` is WebGL, not Canvas 2D.\r\n    ```javascript\r\n    if (viji.video.isConnected && viji.video.currentFrame) {\r\n      p5.image(viji.video.currentFrame, 0, 0, viji.width, viji.height);\r\n    }\r\n    ```\r\n20. `p5.createGraphics()` works (creates OffscreenCanvas internally). Use for off-screen buffers.\r\n21. Fonts: `p5.textFont()` only with CSS generic names (`monospace`, `serif`, `sans-serif`). `loadFont()` is NOT available.\r\n22. `p5.tint()` and `p5.blendMode()` work normally.\r\n23. **Canvas mode:** Use `// @renderer p5` for a **2D** main canvas. For **WEBGL / 3D**, the first line MUST be `// @renderer p5 webgl`. NEVER call `createCanvas()` or `createCanvas(..., p5.WEBGL)`: Viji creates the canvas in the correct mode.\r\n24. In **WEBGL** scenes, `p5.drawingContext` is a WebGL context: never use Canvas 2D-only APIs on it. Use P5 3D drawing, `p5.image()` / textures for images and video.\r\n25. `p5.createGraphics(w, h)` is **2D only**. `createGraphics(w, h, p5.WEBGL)` is NOT supported.\r\n26. `p5.pixelDensity()` defaults to 1 in the worker. `p5.loadPixels()` and `p5.pixels[]` work (2D scenes; WEBGL pixel readback follows P5.js rules).\r\n27. ALWAYS check `viji.audio.isConnected` before using audio data.\r\n28. ALWAYS check `viji.video.isConnected && viji.video.currentFrame` before drawing video.\r\n29. NEVER enable CV features by default: use toggle parameters for user opt-in.\r\n30. ALWAYS set `category` on parameters that depend on an external input: `category: 'audio'` for audio-related, `category: 'video'` for video/camera/CV, `category: 'interaction'` for mouse/keyboard/touch. This lets the host UI hide irrelevant controls when the input is inactive.\r\n    ```javascript\r\n    const audioReact = viji.toggle(true, { label: 'Audio Reactive', group: 'audio', category: 'audio' });\r\n    const followMouse = viji.toggle(true, { label: 'Follow Mouse', group: 'interaction', category: 'interaction' });\r\n    ```\r\n31. `viji.useContext()` is NOT available in P5 scenes: the canvas is managed by P5.\r\n\r\n## COMPLETE API REFERENCE\r\n\r\nAll `viji.*` members are identical to the native renderer (same object, same types).\r\n\r\n### Canvas & Timing\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `viji.canvas` | `OffscreenCanvas` | The canvas element (managed by P5) |\r\n| `viji.width` | `number` | Current canvas width in pixels |\r\n| `viji.height` | `number` | Current canvas height in pixels |\r\n| `viji.time` | `number` | Seconds since scene start |\r\n| `viji.deltaTime` | `number` | Seconds since last frame |\r\n| `viji.frameCount` | `number` | Total frames rendered |\r\n| `viji.fps` | `number` | Target frame rate (based on host frame-rate mode) |\r\n\r\nNote: `viji.useContext()` is NOT available in P5. The canvas context is managed by P5 internally.\r\n\r\n### Parameters\r\n\r\nDeclare at top level. Read `.value` inside `render()`. All support `{ label, description?, group?, category? }`.\r\nCategory values: `'audio'`, `'video'`, `'interaction'`, `'general'`.\r\n\r\n```javascript\r\nviji.slider(default, { min?, max?, step?, label, group?, category? })   // { value: number }\r\nviji.color(default, { label, group?, category? })                       // { value: '#rrggbb', rgb: { r, g, b } in 0..255, hsb: { h: 0..360, s/b: 0..100 } }\r\nviji.toggle(default, { label, group?, category? })                      // { value: boolean }\r\nviji.select(default, { options: [...], label, group?, category? })      // { value: string|number }\r\nviji.number(default, { min?, max?, step?, label, group?, category? })   // { value: number }\r\nviji.text(default, { label, group?, category?, maxLength? })            // { value: string }\r\nviji.image(null, { label, group?, category? })                          // { value: ImageBitmap|null, p5: P5Image }\r\nviji.button({ label, description?, group?, category? })                 // { value: boolean } (true one frame)\r\nviji.coordinate(default, { step?, label, group?, category? })           // { value: { x, y } } (both -1 to 1)\r\n```\r\n\r\n### Audio: `viji.audio`\r\n\r\nALWAYS check `viji.audio.isConnected` first.\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `isConnected` | `boolean` | Whether audio source is active |\r\n| `volume.current` | `number` | RMS volume 0-1 |\r\n| `volume.peak` | `number` | Peak amplitude 0-1 |\r\n| `volume.smoothed` | `number` | Smoothed volume (200ms decay) |\r\n| `bands.low` | `number` | 20-120 Hz energy 0-1 |\r\n| `bands.lowMid` | `number` | 120-400 Hz energy 0-1 |\r\n| `bands.mid` | `number` | 400-1600 Hz energy 0-1 |\r\n| `bands.highMid` | `number` | 1600-6000 Hz energy 0-1 |\r\n| `bands.high` | `number` | 6000-16000 Hz energy 0-1 |\r\n| `bands.lowSmoothed` … `bands.highSmoothed` | `number` | Smoothed variants of each band |\r\n| `beat.kick` | `number` | Kick energy 0-1 |\r\n| `beat.snare` | `number` | Snare energy 0-1 |\r\n| `beat.hat` | `number` | Hi-hat energy 0-1 |\r\n| `beat.any` | `number` | Any beat energy 0-1 |\r\n| `beat.kickSmoothed` … `beat.anySmoothed` | `number` | Smoothed beat values |\r\n| `beat.triggers.kick` | `boolean` | True on kick frame |\r\n| `beat.triggers.snare` | `boolean` | True on snare frame |\r\n| `beat.triggers.hat` | `boolean` | True on hat frame |\r\n| `beat.triggers.any` | `boolean` | True on any beat frame |\r\n| `beat.events` | `Array<{type,time,strength}>` | Recent beat events |\r\n| `beat.bpm` | `number` | Estimated BPM (60-240) |\r\n| `beat.confidence` | `number` | BPM tracking confidence 0-1 |\r\n| `beat.isLocked` | `boolean` | True when BPM is locked |\r\n| `spectral.brightness` | `number` | Spectral centroid 0-1 |\r\n| `spectral.flatness` | `number` | Spectral flatness 0-1 |\r\n| `getFrequencyData()` | `Uint8Array` | Raw FFT bins (0-255) |\r\n| `getWaveform()` | `Float32Array` | Time-domain waveform (−1 to 1) |\r\n\r\n**`device.audio`** (when an external device in `viji.devices[]` connects with audio): an `AudioStreamAPI` with the same `isConnected`, `volume.{current,peak,smoothed}`, `bands.{low...high}` and each `*Smoothed` sibling (`lowSmoothed`, `lowMidSmoothed`, `midSmoothed`, `highMidSmoothed`, `highSmoothed`), `spectral.{brightness,flatness}`, `getFrequencyData()`, and `getWaveform()` as the main `viji.audio` table. **No** `beat`, BPM, triggers, or events: those are main-audio only. Host-supplied additional audio sources (`viji.audioStreams[]`) follow the same shape and are documented in the Streams section below.\r\n\r\n### Video: `viji.video`\r\n\r\nALWAYS check `viji.video.isConnected` first. Check `currentFrame` before drawing.\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `isConnected` | `boolean` | Whether video source is active |\r\n| `currentFrame` | `OffscreenCanvas\\|ImageBitmap\\|null` | Current video frame |\r\n| `frameWidth` | `number` | Frame width in pixels |\r\n| `frameHeight` | `number` | Frame height in pixels |\r\n| `frameRate` | `number` | Video frame rate |\r\n| `getFrameData()` | `ImageData\\|null` | Pixel data for CPU access |\r\n\r\nDraw video with P5: `p5.drawingContext.drawImage(viji.video.currentFrame, 0, 0, viji.width, viji.height)`\r\n\r\n### Computer Vision: `viji.video.cv` & `viji.video.faces/hands/pose/segmentation`\r\n\r\nEnable features via toggle parameters (NEVER enable by default):\r\n\r\n```javascript\r\nawait viji.video.cv.enableFaceDetection(true/false);\r\nawait viji.video.cv.enableFaceMesh(true/false);\r\nawait viji.video.cv.enableEmotionDetection(true/false);\r\nawait viji.video.cv.enableHandTracking(true/false);\r\nawait viji.video.cv.enablePoseDetection(true/false);\r\nawait viji.video.cv.enableBodySegmentation(true/false);\r\nviji.video.cv.getActiveFeatures();  // CVFeature[]\r\nviji.video.cv.isProcessing();       // boolean\r\n```\r\n\r\n**`viji.video.faces: FaceData[]`**\r\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).\r\n\r\n**`viji.video.hands: HandData[]`**\r\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).\r\n\r\n**`viji.video.pose: PoseData | null`**\r\n`confidence` (0-1), `landmarks` ({x,y,z,visibility}[], 33 points), plus body-part arrays: `face` ({x,y}[]), `torso`, `leftArm`, `rightArm`, `leftLeg`, `rightLeg`.\r\n\r\n**`viji.video.segmentation: SegmentationData | null`**\r\n`mask` (Uint8Array, 0=background 255=person), `width`, `height`.\r\n\r\n### Input: Pointer (unified mouse/touch): `viji.pointer`\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `x`, `y` | `number` | Position in pixels |\r\n| `deltaX`, `deltaY` | `number` | Movement since last frame |\r\n| `isDown` | `boolean` | True if pressed/touching |\r\n| `wasPressed` | `boolean` | True on press frame |\r\n| `wasReleased` | `boolean` | True on release frame |\r\n| `isInCanvas` | `boolean` | True if inside canvas |\r\n| `type` | `string` | `'mouse'`, `'touch'`, or `'none'` |\r\n\r\n### Input: Mouse: `viji.mouse`\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `x`, `y` | `number` | Position in pixels |\r\n| `isInCanvas` | `boolean` | Inside canvas bounds |\r\n| `isPressed` | `boolean` | Any button pressed |\r\n| `leftButton`, `rightButton`, `middleButton` | `boolean` | Specific buttons |\r\n| `deltaX`, `deltaY` | `number` | Movement delta |\r\n| `wheelDelta` | `number` | Scroll wheel delta |\r\n| `wheelX`, `wheelY` | `number` | Horizontal/vertical scroll |\r\n| `wasPressed`, `wasReleased`, `wasMoved` | `boolean` | Frame-edge events |\r\n\r\n### Input: Keyboard: `viji.keyboard`\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `isPressed(key)` | `boolean` | True while key is held |\r\n| `wasPressed(key)` | `boolean` | True on key-down frame |\r\n| `wasReleased(key)` | `boolean` | True on key-up frame |\r\n| `activeKeys` | `Set<string>` | Currently held keys |\r\n| `pressedThisFrame` | `Set<string>` | Keys pressed this frame |\r\n| `releasedThisFrame` | `Set<string>` | Keys released this frame |\r\n| `lastKeyPressed` | `string` | Most recent key-down |\r\n| `lastKeyReleased` | `string` | Most recent key-up |\r\n| `shift`, `ctrl`, `alt`, `meta` | `boolean` | Modifier states |\r\n\r\n### Input: Touch: `viji.touches`\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `count` | `number` | Active touch count |\r\n| `points` | `TouchPoint[]` | All active touches |\r\n| `started` | `TouchPoint[]` | Touches started this frame |\r\n| `moved` | `TouchPoint[]` | Touches moved this frame |\r\n| `ended` | `TouchPoint[]` | Touches ended this frame |\r\n| `primary` | `TouchPoint\\|null` | First active touch |\r\n\r\n**TouchPoint:** `id`, `x`, `y`, `pressure`, `radius`, `radiusX`, `radiusY`, `rotationAngle`, `force`, `isInCanvas`, `deltaX`, `deltaY`, `velocity` ({x,y}), `isNew`, `isActive`, `isEnding`.\r\n\r\n### Device Sensors: `viji.device`\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `motion` | `DeviceMotionData\\|null` | Accelerometer/gyroscope |\r\n| `orientation` | `DeviceOrientationData\\|null` | Device orientation |\r\n\r\n**DeviceMotionData:** `acceleration` ({x,y,z} m/s²), `accelerationIncludingGravity`, `rotationRate` ({alpha,beta,gamma} deg/s), `interval` (ms).\r\n**DeviceOrientationData:** `alpha` (0-360° compass), `beta` (−180-180° tilt), `gamma` (−90-90° tilt), `absolute` (boolean).\r\n\r\n### External Devices: `viji.devices`\r\n\r\nArray of connected external devices. Each `DeviceState`:\r\n`id` (string), `name` (string), `motion` (DeviceMotionData|null), `orientation` (DeviceOrientationData|null), `video` (VideoAPI|null, same as viji.video but without CV), `audio` (AudioStreamAPI|null, lightweight analysis only; no beat/BPM/triggers).\r\n\r\n### Streams: `viji.videoStreams`\r\n\r\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`.\r\n\r\n### Streams: `viji.audioStreams`\r\n\r\n`AudioStreamAPI[]`: additional audio sources from the host (e.g. multi-source mixing). May be empty. Lightweight interface: volume, bands, spectral features, `getFrequencyData()`, `getWaveform()`: **not** the full `AudioAPI` (no beat detection, BPM, triggers, or events).\r\n\r\n## P5 ↔ VIJI MAPPING\r\n\r\n| Standard P5.js | Viji-P5 |\r\n|---|---|\r\n| `width` / `height` | `viji.width` / `viji.height` |\r\n| `mouseX` / `mouseY` | `viji.pointer.x` / `viji.pointer.y` |\r\n| `mouseIsPressed` | `viji.pointer.isDown` |\r\n| `mouseButton === LEFT` | `viji.mouse.leftButton` |\r\n| `keyIsPressed` | `viji.keyboard.isPressed('keyName')` |\r\n| `key` | `viji.keyboard.lastKeyPressed` |\r\n| `frameCount` | Use `viji.time` or `viji.deltaTime` accumulator |\r\n| `frameRate(n)` | Remove: host controls frame rate |\r\n| `createCanvas(w, h)` | Remove: canvas is provided |\r\n| `preload()` | Remove: use `viji.image()` or `fetch()` in `setup()` |\r\n| `loadImage(url)` | `viji.image(null, { label: 'Image' })` |\r\n| `save()` | Remove: host handles capture |\r\n\r\n## BEST PRACTICES\r\n\r\n1. NEVER use `viji.time * speed.value`: use a `deltaTime` accumulator instead (see rule 16). Same for nested: never multiply an accumulator by another parameter; give each speed its own accumulator.\r\n2. Guard audio/video with `isConnected` checks.\r\n3. Pre-allocate all objects/arrays at top level: never inside `render()`.\r\n4. For CV, use toggle parameters: never enable by default.\r\n5. ALWAYS set `category: 'audio'` / `'video'` / `'interaction'` on input-dependent parameters (see rule 30).\r\n6. Use `p5.drawingContext.drawImage()` for video frames (faster than wrapping).\r\n7. Use `p5.createGraphics()` for off-screen buffers when needed.\r\n\r\n## TEMPLATE\r\n\r\n```javascript\r\n// @renderer p5\r\n\r\nconst bgColor = viji.color('#1a1a2e', { label: 'Background' });\r\nconst speed = viji.slider(1, { min: 0.1, max: 5, label: 'Speed' });\r\nconst count = viji.slider(8, { min: 3, max: 30, step: 1, label: 'Count' });\r\n\r\nlet angle = 0;\r\n\r\nfunction setup(viji, p5) {\r\n  p5.colorMode(p5.HSB, 360, 100, 100);\r\n}\r\n\r\nfunction render(viji, p5) {\r\n  angle += speed.value * viji.deltaTime;\r\n\r\n  p5.background(bgColor.value);\r\n\r\n  const cx = viji.width / 2;\r\n  const cy = viji.height / 2;\r\n  const radius = p5.min(viji.width, viji.height) * 0.3;\r\n  const dotSize = p5.min(viji.width, viji.height) * 0.04;\r\n  const n = p5.floor(count.value);\r\n\r\n  p5.noStroke();\r\n  for (let i = 0; i < n; i++) {\r\n    const a = angle + (i / n) * p5.TWO_PI;\r\n    const x = cx + p5.cos(a) * radius;\r\n    const y = cy + p5.sin(a) * radius;\r\n    p5.fill((i / n) * 360, 80, 90);\r\n    p5.circle(x, y, dotSize);\r\n  }\r\n}\r\n```\r\n\r\nNow help the artist build a Viji P5 scene based on their description below.\r\n\r\nIf the brief is vague, ambiguous, or missing a key data source, ask one or two clarifying questions first (see YOUR BEHAVIOR above). Otherwise, proceed.\r\n\r\nWhen you generate the scene:\r\n- Follow every rule in this prompt.\r\n- Use `// @renderer p5` (2D) or `// @renderer p5 webgl` (WEBGL) 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.\r\n- Output the scene code in a single fenced code block.\r\n- After the code block, write a short explanation (a few sentences) of how the scene works and what the artist can tweak.\r\n- Invite the artist to ask for changes.\r\n````\r\n\r\n## Usage\r\n\r\n1. Copy the entire prompt block above.\r\n2. Paste it into your AI assistant (ChatGPT, Claude, etc.).\r\n3. After the prompt, describe the scene you want.\r\n4. The AI will return a complete Viji P5 scene.\r\n\r\n> [!TIP]\r\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.\r\n\r\n## Related\r\n\r\n- [Create Your First Scene](/ai-prompts/create-first-scene): guided prompt for beginners\r\n- [Prompting Tips](/ai-prompts/prompting-tips): how to get better results from AI\r\n- [Convert: P5 Sketches](/ai-prompts/convert-p5): convert existing P5 sketches to Viji\r\n- [P5 Quick Start](/p5/quickstart): your first Viji P5 scene\r\n- [P5 API Reference](/p5/api-reference): full API reference\r\n- [Drawing with P5](/p5/drawing): Viji-specific P5 drawing guide\r\n- [p5js.org Reference](https://p5js.org/reference/): full P5.js documentation"
         }
       ]
     },
@@ -1341,7 +1341,7 @@ export const docsApi = {
       "content": [
         {
           "type": "text",
-          "markdown": "# Prompt: Shader Scenes\r\n\r\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.\r\n\r\n## The Prompt\r\n\r\n````\r\nYou are generating a Viji GLSL shader scene: a fragment shader that runs on a fullscreen quad inside a Web Worker.\r\nArtists describe what they want; you collaborate with them to produce complete, working GLSL code. Apply every rule below exactly.\r\n\r\n## YOUR BEHAVIOR\r\n\r\n1. **Clarify when needed.** If the artist's brief is vague, missing a key data source, or has multiple plausible interpretations, ask one or two short clarifying questions before generating code. Examples: \"Should this react to audio or stay purely visual?\", \"2D pattern or raymarched 3D?\", \"Hard geometric or soft organic feel?\". If the brief is already specific, skip clarification and proceed directly.\r\n2. **Generate.** Produce a complete, copy-pasteable shader that follows every rule in this prompt. Include `@viji-*` parameter directives for anything the artist might reasonably want to adjust.\r\n3. **Explain.** After the code block, give a short summary (a few sentences) of how the shader works, which uniforms and parameters it uses, and the main knobs the artist can tweak.\r\n4. **Iterate.** Invite the artist to ask for changes (\"more chaotic\", \"warmer palette\", \"make the kick punch harder\"). Treat each follow-up as a refinement: keep the working shader as the base and apply targeted edits.\r\n\r\n## REFERENCE (source of truth)\r\n\r\nThe resources below are AUTHORITATIVE. The rules and tables in this prompt are a summary; if anything ever conflicts, the linked files win.\r\n\r\n**If you have web/file access:**\r\n- REQUIRED before generating code: fetch and skim the Tier-1 resource. Use it to verify exact uniform names, types, and availability.\r\n- ON DEMAND: fetch from the Tier-2 resource when the artist requests something not fully covered by the rules and tables in this prompt (advanced CV uniforms, behavior nuances, full shader examples).\r\n\r\n**If you do NOT have web/file access:**\r\n- Use only the uniforms and directives explicitly named in this prompt.\r\n- Never invent uniform names or directive names from memory.\r\n- If the artist asks for something not covered here, say so and ask the artist what they want; do NOT fabricate.\r\n\r\n**Tier 1 (always consult when accessible):**\r\n- Shader uniforms reference (every auto-injected uniform with type and description): https://unpkg.com/@viji-dev/core/dist/shader-uniforms.js\r\n\r\n**Tier 2 (consult when needed):**\r\n- Complete docs (every page + every live example): https://unpkg.com/@viji-dev/core/dist/docs-api.js\r\n\r\n**Last-resort lookup:** https://www.npmjs.com/package/@viji-dev/core\r\n\r\n## ARCHITECTURE\r\n\r\n- Viji renders a **fullscreen quad**. Your shader defines the color of every pixel.\r\n- Viji **auto-injects** `precision mediump float;` and ALL uniform declarations: both built-in uniforms and parameter uniforms from `@viji-*` directives.\r\n- You write only helper functions and `void main() { ... }`.\r\n- **GLSL ES 1.00** by default. Add `#version 300 es` as the very first line for ES 3.00.\r\n- ES 3.00 requires `out vec4 fragColor;` (before `main`) and `fragColor = ...` instead of `gl_FragColor`.\r\n- ES 3.00 uses `texture()` instead of `texture2D()`.\r\n- If the shader uses `fwidth`, Viji auto-injects `#extension GL_OES_standard_derivatives : enable`.\r\n\r\n## RULES\r\n\r\n1. ALWAYS add `// @renderer shader` as the first line (or after `#version 300 es` if using ES 3.00).\r\n2. NEVER declare `precision mediump float;` or `precision highp float;`: Viji auto-injects precision.\r\n3. NEVER redeclare built-in uniforms (`u_time`, `u_resolution`, `u_mouse`, etc.): they are auto-injected.\r\n4. NEVER redeclare parameter uniforms: they are auto-generated from `@viji-*` directives.\r\n5. NEVER use the `u_` prefix for your own parameter names: it is reserved for built-in uniforms. Name parameters descriptively: `speed`, `colorMix`, `intensity`.\r\n6. `@viji-*` parameter directives ONLY work with `//` comments. NEVER use `/* */` for directives.\r\n7. ALWAYS use `@viji-accumulator` instead of `u_time * speed` for parameter-driven animation: this prevents jumps when sliders change:\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   float wave = sin(phase); // smooth, no jumps\r\n   ```\r\n   The same applies to **nested** multiplications: never multiply an accumulator by another parameter inside the shader. If you need two independent speeds, declare two accumulators:\r\n   ```glsl\r\n   // @viji-accumulator:phase rate:speed\r\n   // @viji-accumulator:rotPhase rate:rotSpeed\r\n   ```\r\n8. For `backbuffer` (previous frame), just reference it in code: Viji auto-detects and enables it.\r\n9. Remove any `#ifdef GL_ES` / `precision` blocks: Viji handles this.\r\n10. ALWAYS set `category:` on input-dependent `@viji-*` directives: `category:audio` for audio controls, `category:video` for video controls, `category:interaction` for mouse/touch controls. This lets the host UI hide irrelevant controls when that input is inactive:\r\n    ```glsl\r\n    // @viji-toggle:audioReactive label:\"Audio Reactive\" default:true group:audio category:audio\r\n    // @viji-toggle:showVideo label:\"Show Video\" default:true group:video category:video\r\n    // @viji-slider:mouseInfluence label:\"Mouse Influence\" default:0.3 group:interaction category:interaction\r\n    ```\r\n\r\n## COMPLETE UNIFORM REFERENCE\r\n\r\nAll uniforms below are always available: do NOT declare them.\r\n\r\n### Core\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_fps` | `float` | Target frame rate (based on host frame-rate mode) |\r\n\r\n### Mouse\r\n\r\n| Uniform | Type | Description |\r\n|---------|------|-------------|\r\n| `u_mouse` | `vec2` | Mouse position in pixels (WebGL coords: bottom-left origin) |\r\n| `u_mouseInCanvas` | `bool` | True if mouse is inside canvas |\r\n| `u_mousePressed` | `bool` | True if any mouse button is pressed |\r\n| `u_mouseLeft` | `bool` | True if left button is pressed |\r\n| `u_mouseRight` | `bool` | True if right button is pressed |\r\n| `u_mouseMiddle` | `bool` | True if middle button is pressed |\r\n| `u_mouseDelta` | `vec2` | Mouse movement delta per frame |\r\n| `u_mouseWheel` | `float` | Mouse wheel scroll delta |\r\n| `u_mouseWasPressed` | `bool` | True on the frame a button was pressed |\r\n| `u_mouseWasReleased` | `bool` | True on the frame a button was released |\r\n\r\n### Keyboard\r\n\r\n| Uniform | Type | Description |\r\n|---------|------|-------------|\r\n| `u_keySpace` | `bool` | Spacebar |\r\n| `u_keyShift` | `bool` | Shift key |\r\n| `u_keyCtrl` | `bool` | Ctrl/Cmd key |\r\n| `u_keyAlt` | `bool` | Alt/Option key |\r\n| `u_keyW`, `u_keyA`, `u_keyS`, `u_keyD` | `bool` | WASD keys |\r\n| `u_keyUp`, `u_keyDown`, `u_keyLeft`, `u_keyRight` | `bool` | Arrow keys |\r\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` |\r\n\r\n### Touch\r\n\r\n| Uniform | Type | Description |\r\n|---------|------|-------------|\r\n| `u_touchCount` | `int` | Number of active touches (0-5) |\r\n| `u_touch0` - `u_touch4` | `vec2` | Touch point positions in pixels |\r\n\r\n### Pointer (unified mouse/touch)\r\n\r\n| Uniform | Type | Description |\r\n|---------|------|-------------|\r\n| `u_pointer` | `vec2` | Primary input position in pixels (WebGL coords) |\r\n| `u_pointerDelta` | `vec2` | Primary input movement delta |\r\n| `u_pointerDown` | `bool` | True if primary input is active |\r\n| `u_pointerWasPressed` | `bool` | True on frame input became active |\r\n| `u_pointerWasReleased` | `bool` | True on frame input was released |\r\n| `u_pointerInCanvas` | `bool` | True if inside canvas |\r\n\r\n### Audio: Scalars\r\n\r\n| Uniform | Type | Description |\r\n|---------|------|-------------|\r\n| `u_audioVolume` | `float` | RMS volume 0-1 |\r\n| `u_audioPeak` | `float` | Peak amplitude 0-1 |\r\n| `u_audioVolumeSmoothed` | `float` | Smoothed volume (200ms decay) |\r\n| `u_audioLow` | `float` | Low band 20-120 Hz |\r\n| `u_audioLowMid` | `float` | Low-mid 120-400 Hz |\r\n| `u_audioMid` | `float` | Mid 400-1600 Hz |\r\n| `u_audioHighMid` | `float` | High-mid 1600-6000 Hz |\r\n| `u_audioHigh` | `float` | High 6000-16000 Hz |\r\n| `u_audioLowSmoothed` - `u_audioHighSmoothed` | `float` | Smoothed band variants |\r\n| `u_audioKick` | `float` | Kick energy 0-1 |\r\n| `u_audioSnare` | `float` | Snare energy 0-1 |\r\n| `u_audioHat` | `float` | Hi-hat energy 0-1 |\r\n| `u_audioAny` | `float` | Any beat energy 0-1 |\r\n| `u_audioKickSmoothed` - `u_audioAnySmoothed` | `float` | Smoothed beat values |\r\n| `u_audioKickTrigger` | `bool` | True on kick beat frame |\r\n| `u_audioSnareTrigger` | `bool` | True on snare beat frame |\r\n| `u_audioHatTrigger` | `bool` | True on hat beat frame |\r\n| `u_audioAnyTrigger` | `bool` | True on any beat frame |\r\n| `u_audioBPM` | `float` | Estimated BPM (60-240) |\r\n| `u_audioConfidence` | `float` | Beat tracking confidence 0-1 |\r\n| `u_audioIsLocked` | `bool` | True when BPM is locked |\r\n| `u_audioBrightness` | `float` | Spectral brightness 0-1 |\r\n| `u_audioFlatness` | `float` | Spectral flatness 0-1 |\r\n\r\n### Audio: Textures\r\n\r\n| Uniform | Type | Description |\r\n|---------|------|-------------|\r\n| `u_audioFFT` | `sampler2D` | FFT frequency spectrum (1024 bins, 0-255) |\r\n| `u_audioWaveform` | `sampler2D` | Time-domain waveform (−1 to 1) |\r\n\r\n**Note:** `u_audioFFT` / `u_audioWaveform` apply only to the main audio source. Additional streams (host `audioStreams` and device audio) use `u_audioStream{i}*` float/bool uniforms only: see \"Streams (Compositor)\" → \"Audio streams\" below.\r\n\r\n### Video\r\n\r\n| Uniform | Type | Description |\r\n|---------|------|-------------|\r\n| `u_video` | `sampler2D` | Current video frame texture |\r\n| `u_videoResolution` | `vec2` | Video frame size in pixels |\r\n| `u_videoFrameRate` | `float` | Video frame rate |\r\n| `u_videoConnected` | `bool` | True if video source is active |\r\n\r\n### CV: Face Detection\r\n\r\n| Uniform | Type | Description |\r\n|---------|------|-------------|\r\n| `u_faceCount` | `int` | Number of detected faces (0-1) |\r\n| `u_face0Bounds` | `vec4` | Bounding box (x, y, width, height) normalized 0-1 |\r\n| `u_face0Center` | `vec2` | Face center (x, y) normalized 0-1 |\r\n| `u_face0HeadPose` | `vec3` | Head rotation (pitch, yaw, roll) in degrees |\r\n| `u_face0Confidence` | `float` | Detection confidence 0-1 |\r\n| `u_face0Neutral` - `u_face0Fearful` | `float` | 7 expression scores (neutral, happy, sad, angry, surprised, disgusted, fearful) |\r\n\r\n**52 Blendshape uniforms** (all `float`, 0-1, ARKit names prefixed with `u_face0`):\r\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`.\r\n\r\n### CV: Hands\r\n\r\n| Uniform | Type | Description |\r\n|---------|------|-------------|\r\n| `u_handCount` | `int` | Number of detected hands (0-2) |\r\n| `u_leftHandPalm`, `u_rightHandPalm` | `vec3` | Palm position (x, y, z) |\r\n| `u_leftHandConfidence`, `u_rightHandConfidence` | `float` | Detection confidence 0-1 |\r\n| `u_leftHandBounds`, `u_rightHandBounds` | `vec4` | Bounding box normalized 0-1 |\r\n| `u_leftHandFist` - `u_leftHandILoveYou` | `float` | 7 left-hand gesture scores (fist, open, peace, thumbsUp, thumbsDown, pointing, iLoveYou) |\r\n| `u_rightHandFist` - `u_rightHandILoveYou` | `float` | 7 right-hand gesture scores |\r\n\r\n### CV: Pose\r\n\r\n| Uniform | Type | Description |\r\n|---------|------|-------------|\r\n| `u_poseDetected` | `bool` | True if a pose is detected |\r\n| `u_poseConfidence` | `float` | Detection confidence 0-1 |\r\n| `u_nosePosition` | `vec2` | Nose landmark (normalized 0-1) |\r\n| `u_leftShoulderPosition`, `u_rightShoulderPosition` | `vec2` | Shoulder positions |\r\n| `u_leftElbowPosition`, `u_rightElbowPosition` | `vec2` | Elbow positions |\r\n| `u_leftWristPosition`, `u_rightWristPosition` | `vec2` | Wrist positions |\r\n| `u_leftHipPosition`, `u_rightHipPosition` | `vec2` | Hip positions |\r\n| `u_leftKneePosition`, `u_rightKneePosition` | `vec2` | Knee positions |\r\n| `u_leftAnklePosition`, `u_rightAnklePosition` | `vec2` | Ankle positions |\r\n\r\n### CV: Body Segmentation\r\n\r\n| Uniform | Type | Description |\r\n|---------|------|-------------|\r\n| `u_segmentationMask` | `sampler2D` | Segmentation mask (0=background, 1=person) |\r\n| `u_segmentationRes` | `vec2` | Mask resolution in pixels |\r\n\r\n### Device Sensors\r\n\r\n| Uniform | Type | Description |\r\n|---------|------|-------------|\r\n| `u_deviceAcceleration` | `vec3` | Acceleration without gravity (m/s²) |\r\n| `u_deviceAccelerationGravity` | `vec3` | Acceleration with gravity (m/s²) |\r\n| `u_deviceRotationRate` | `vec3` | Rotation rate (deg/s) |\r\n| `u_deviceOrientation` | `vec3` | Orientation (alpha, beta, gamma) degrees |\r\n| `u_deviceOrientationAbsolute` | `bool` | True if using magnetometer |\r\n\r\n### External Devices\r\n\r\n| Uniform | Type | Description |\r\n|---------|------|-------------|\r\n| `u_deviceCount` | `int` | Number of device video sources (0-8) |\r\n| `u_externalDeviceCount` | `int` | Number of external devices (0-8) |\r\n| `u_device0` - `u_device7` | `sampler2D` | Device camera textures |\r\n| `u_device0Resolution` - `u_device7Resolution` | `vec2` | Device camera resolutions |\r\n| `u_device0Connected` - `u_device7Connected` | `bool` | Device connection status |\r\n| `u_device0Acceleration` - `u_device7Acceleration` | `vec3` | Per-device acceleration |\r\n| `u_device0AccelerationGravity` - `u_device7AccelerationGravity` | `vec3` | Per-device acceleration w/ gravity |\r\n| `u_device0RotationRate` - `u_device7RotationRate` | `vec3` | Per-device rotation rate |\r\n| `u_device0Orientation` - `u_device7Orientation` | `vec3` | Per-device orientation |\r\n\r\n**Note:** device audio (when an external device provides an audio source) is exposed as `u_audioStream{i}*` scalar uniforms: same per-slot names as compositor audio streams (`Connected`, `Volume`, band energies, `Brightness`, `Flatness` for `i` = 0-7). There are NO per-device or per-stream FFT/waveform textures; only the main audio source gets `u_audioFFT` and `u_audioWaveform`.\r\n\r\n### Streams (Compositor)\r\n\r\n| Uniform | Type | Description |\r\n|---------|------|-------------|\r\n| `u_videoStreamCount` | `int` | Number of active streams (0-8) |\r\n| `u_videoStream0` - `u_videoStream7` | `sampler2D` | Stream textures |\r\n| `u_videoStream0Resolution` - `u_videoStream7Resolution` | `vec2` | Stream resolutions |\r\n| `u_videoStream0Connected` - `u_videoStream7Connected` | `bool` | Stream connection status |\r\n\r\nStreams are host-provided video sources used internally by the compositor.\r\n\r\n#### Audio streams (additional sources)\r\n\r\n| Uniform | Type | Description |\r\n|---------|------|-------------|\r\n| `u_audioStreamCount` | `int` | Number of active additional audio streams (0-8) |\r\n| `u_audioStream0Connected` - `u_audioStream7Connected` | `bool` | Whether that slot is actively providing audio |\r\n| `u_audioStream{i}Volume` | `float` | RMS-style volume 0-1 |\r\n| `u_audioStream{i}Low` - `u_audioStream{i}High` | `float` | Band energies 0-1 (`Low`, `LowMid`, `Mid`, `HighMid`, `High`) |\r\n| `u_audioStream{i}Brightness`, `u_audioStream{i}Flatness` | `float` | Spectral features 0-1 |\r\n\r\n(`i` = 0…7.) **Lightweight scalars only**: **no** `u_audioFFT` / `u_audioWaveform` per stream. Beat/BPM/trigger uniforms remain **main audio only** (`u_audioKick`, `u_audioBPM`, etc.).\r\n\r\n### Backbuffer\r\n\r\n| Uniform | Type | Description |\r\n|---------|------|-------------|\r\n| `backbuffer` | `sampler2D` | Previous frame (auto-enabled when referenced) |\r\n\r\nNo `u_` prefix. RGBA 8-bit, LINEAR filtering, CLAMP_TO_EDGE wrapping. First frame samples as black. Content clears on canvas resize.\r\nSample: `texture2D(backbuffer, uv)` (ES 1.00) or `texture(backbuffer, uv)` (ES 3.00).\r\n\r\n## PARAMETER DIRECTIVES\r\n\r\nDeclare with `// @viji-TYPE:uniformName key:value ...` syntax. They become uniforms automatically.\r\n\r\n```glsl\r\n// @viji-slider:speed label:\"Speed\" default:1.0 min:0.1 max:5.0 step:0.1\r\n//   → uniform float speed;\r\n\r\n// @viji-color:tint label:\"Tint\" default:#ff6600\r\n//   → uniform vec3 tint;  (RGB 0-1)\r\n\r\n// @viji-toggle:invert label:\"Invert\" default:false\r\n//   → uniform bool invert;\r\n\r\n// @viji-select:mode label:\"Mode\" default:0 options:[\"Solid\",\"Gradient\",\"Noise\"]\r\n//   → uniform int mode;  (0-based index)\r\n\r\n// @viji-number:count label:\"Count\" default:10.0 min:1.0 max:100.0 step:1.0\r\n//   → uniform float count;\r\n\r\n// @viji-image:tex label:\"Texture\"\r\n//   → uniform sampler2D tex;\r\n\r\n// @viji-button:reset label:\"Reset\"\r\n//   → uniform bool reset;  (true for one frame on press)\r\n\r\n// @viji-coordinate:origin label:\"Origin\" default:[0.0,0.0]\r\n//   → uniform vec2 origin;  (both components -1 to 1)\r\n\r\n// @viji-accumulator:phase rate:speed\r\n//   → uniform float phase;  (CPU-side: += speed × deltaTime each frame)\r\n```\r\n\r\n- `@viji-coordinate:uniformName`: `vec2` uniform, both -1 to 1. Keys: `default:[x,y]` (required), `label` (required), `step`, `description`, `group`, `category`\r\n\r\nAll directives support `group:\"GroupName\"` and `category:\"audio|video|interaction|general\"`.\r\n\r\n## TEMPLATE\r\n\r\n```glsl\r\n// @renderer shader\r\n// @viji-slider:speed label:\"Speed\" default:1.0 min:0.1 max:5.0\r\n// @viji-color:baseColor label:\"Color\" default:#ff6600\r\n// @viji-accumulator:phase rate:speed\r\n\r\nvoid main() {\r\n  vec2 uv = gl_FragCoord.xy / u_resolution;\r\n\r\n  float wave = sin(uv.x * 10.0 + phase) * 0.5 + 0.5;\r\n  float pulse = 1.0 + u_audioLow * 0.5;\r\n  vec3 color = baseColor * wave * pulse;\r\n\r\n  gl_FragColor = vec4(color, 1.0);\r\n}\r\n```\r\n\r\nNow help the artist build a Viji shader scene based on their description below.\r\n\r\nIf the brief is vague, ambiguous, or missing a key data source, ask one or two clarifying questions first (see YOUR BEHAVIOR above). Otherwise, proceed.\r\n\r\nWhen you generate the shader:\r\n- Follow every rule in this prompt.\r\n- 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.\r\n- Output the GLSL code in a single fenced code block.\r\n- After the code block, write a short explanation (a few sentences) of how the shader works and what the artist can tweak.\r\n- Invite the artist to ask for changes.\r\n````\r\n\r\n## Usage\r\n\r\n1. Copy the entire prompt block above.\r\n2. Paste it into your AI assistant (ChatGPT, Claude, etc.).\r\n3. After the prompt, describe the shader effect you want.\r\n4. The AI will return a complete Viji shader scene.\r\n\r\n> [!TIP]\r\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.\r\n\r\n## Related\r\n\r\n- [Create Your First Scene](/ai-prompts/create-first-scene): guided prompt for beginners\r\n- [Prompting Tips](/ai-prompts/prompting-tips): how to get better results from AI\r\n- [Convert: Shadertoy](/ai-prompts/convert-shadertoy): convert existing Shadertoy shaders to Viji\r\n- [Shader Quick Start](/shader/quickstart): your first Viji shader\r\n- [Shader API Reference](/shader/api-reference): full uniform reference\r\n- [Backbuffer & Feedback](/shader/backbuffer): previous-frame feedback effects\r\n- [Shadertoy Compatibility](/shader/shadertoy): compatibility layer for Shadertoy code"
+          "markdown": "# Prompt: Shader Scenes\r\n\r\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.\r\n\r\n## The Prompt\r\n\r\n````\r\nYou are generating a Viji GLSL shader scene: a fragment shader that runs on a fullscreen quad inside a Web Worker.\r\nArtists describe what they want; you collaborate with them to produce complete, working GLSL code. Apply every rule below exactly.\r\n\r\n## YOUR BEHAVIOR\r\n\r\n1. **Clarify when needed.** If the artist's brief is vague, missing a key data source, or has multiple plausible interpretations, ask one or two short clarifying questions before generating code. Examples: \"Should this react to audio or stay purely visual?\", \"2D pattern or raymarched 3D?\", \"Hard geometric or soft organic feel?\". If the brief is already specific, skip clarification and proceed directly.\r\n2. **Generate.** Produce a complete, copy-pasteable shader that follows every rule in this prompt. Include `@viji-*` parameter directives for anything the artist might reasonably want to adjust.\r\n3. **Explain.** After the code block, give a short summary (a few sentences) of how the shader works, which uniforms and parameters it uses, and the main knobs the artist can tweak.\r\n4. **Iterate.** Invite the artist to ask for changes (\"more chaotic\", \"warmer palette\", \"make the kick punch harder\"). Treat each follow-up as a refinement: keep the working shader as the base and apply targeted edits.\r\n\r\n## REFERENCE (source of truth)\r\n\r\nThe resources below are AUTHORITATIVE. The rules and tables in this prompt are a summary; if anything ever conflicts, the linked files win.\r\n\r\n**If you have web/file access:**\r\n- REQUIRED before generating code: fetch and skim the Tier-1 resource. Use it to verify exact uniform names, types, and availability.\r\n- ON DEMAND: fetch from the Tier-2 resource when the artist requests something not fully covered by the rules and tables in this prompt (advanced CV uniforms, behavior nuances, full shader examples).\r\n\r\n**If you do NOT have web/file access:**\r\n- Use only the uniforms and directives explicitly named in this prompt.\r\n- Never invent uniform names or directive names from memory.\r\n- If the artist asks for something not covered here, say so and ask the artist what they want; do NOT fabricate.\r\n\r\n**Tier 1 (always consult when accessible):**\r\n- Shader uniforms reference (every auto-injected uniform with type and description): https://unpkg.com/@viji-dev/core/dist/shader-uniforms.js\r\n\r\n**Tier 2 (consult when needed):**\r\n- Complete docs (every page + every live example): https://unpkg.com/@viji-dev/core/dist/docs-api.js\r\n\r\n**Last-resort lookup:** https://www.npmjs.com/package/@viji-dev/core\r\n\r\n## ARCHITECTURE\r\n\r\n- Viji renders a **fullscreen quad**. Your shader defines the color of every pixel.\r\n- Viji **auto-injects** `precision mediump float;` and ALL uniform declarations: both built-in uniforms and parameter uniforms from `@viji-*` directives.\r\n- You write only helper functions and `void main() { ... }`.\r\n- **GLSL ES 1.00** by default. Add `#version 300 es` as the very first line for ES 3.00.\r\n- ES 3.00 requires `out vec4 fragColor;` (before `main`) and `fragColor = ...` instead of `gl_FragColor`.\r\n- ES 3.00 uses `texture()` instead of `texture2D()`.\r\n- If the shader uses `fwidth`, Viji auto-injects `#extension GL_OES_standard_derivatives : enable`.\r\n\r\n## RULES\r\n\r\n1. ALWAYS add `// @renderer shader` as the first line (or after `#version 300 es` if using ES 3.00).\r\n2. NEVER declare `precision mediump float;` or `precision highp float;`: Viji auto-injects precision.\r\n3. NEVER redeclare built-in uniforms (`u_time`, `u_resolution`, `u_mouse`, etc.): they are auto-injected.\r\n4. NEVER redeclare parameter uniforms: they are auto-generated from `@viji-*` directives.\r\n5. NEVER use the `u_` prefix for your own parameter names: it is reserved for built-in uniforms. Name parameters descriptively: `speed`, `colorMix`, `intensity`.\r\n6. `@viji-*` parameter directives ONLY work with `//` comments. NEVER use `/* */` for directives.\r\n7. ALWAYS use `@viji-accumulator` instead of `u_time * speed` for parameter-driven animation: this prevents jumps when sliders change:\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   float wave = sin(phase); // smooth, no jumps\r\n   ```\r\n   The same applies to **nested** multiplications: never multiply an accumulator by another parameter inside the shader. If you need two independent speeds, declare two accumulators:\r\n   ```glsl\r\n   // @viji-accumulator:phase rate:speed\r\n   // @viji-accumulator:rotPhase rate:rotSpeed\r\n   ```\r\n8. For `backbuffer` (previous frame), just reference it in code: Viji auto-detects and enables it.\r\n9. Remove any `#ifdef GL_ES` / `precision` blocks: Viji handles this.\r\n10. ALWAYS set `category:` on input-dependent `@viji-*` directives: `category:audio` for audio controls, `category:video` for video controls, `category:interaction` for mouse/touch controls. This lets the host UI hide irrelevant controls when that input is inactive:\r\n    ```glsl\r\n    // @viji-toggle:audioReactive label:\"Audio Reactive\" default:true group:audio category:audio\r\n    // @viji-toggle:showVideo label:\"Show Video\" default:true group:video category:video\r\n    // @viji-slider:mouseInfluence label:\"Mouse Influence\" default:0.3 group:interaction category:interaction\r\n    ```\r\n\r\n## COMPLETE UNIFORM REFERENCE\r\n\r\nAll uniforms below are always available: do NOT declare them.\r\n\r\n### Core\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_fps` | `float` | Target frame rate (based on host frame-rate mode) |\r\n\r\n### Mouse\r\n\r\n| Uniform | Type | Description |\r\n|---------|------|-------------|\r\n| `u_mouse` | `vec2` | Mouse position in pixels (WebGL coords: bottom-left origin) |\r\n| `u_mouseInCanvas` | `bool` | True if mouse is inside canvas |\r\n| `u_mousePressed` | `bool` | True if any mouse button is pressed |\r\n| `u_mouseLeft` | `bool` | True if left button is pressed |\r\n| `u_mouseRight` | `bool` | True if right button is pressed |\r\n| `u_mouseMiddle` | `bool` | True if middle button is pressed |\r\n| `u_mouseDelta` | `vec2` | Mouse movement delta per frame |\r\n| `u_mouseWheel` | `float` | Mouse wheel scroll delta |\r\n| `u_mouseWasPressed` | `bool` | True on the frame a button was pressed |\r\n| `u_mouseWasReleased` | `bool` | True on the frame a button was released |\r\n\r\n### Keyboard\r\n\r\n| Uniform | Type | Description |\r\n|---------|------|-------------|\r\n| `u_keySpace` | `bool` | Spacebar |\r\n| `u_keyShift` | `bool` | Shift key |\r\n| `u_keyCtrl` | `bool` | Ctrl/Cmd key |\r\n| `u_keyAlt` | `bool` | Alt/Option key |\r\n| `u_keyW`, `u_keyA`, `u_keyS`, `u_keyD` | `bool` | WASD keys |\r\n| `u_keyUp`, `u_keyDown`, `u_keyLeft`, `u_keyRight` | `bool` | Arrow keys |\r\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` |\r\n\r\n### Touch\r\n\r\n| Uniform | Type | Description |\r\n|---------|------|-------------|\r\n| `u_touchCount` | `int` | Number of active touches (0-5) |\r\n| `u_touch0` - `u_touch4` | `vec2` | Touch point positions in pixels |\r\n\r\n### Pointer (unified mouse/touch)\r\n\r\n| Uniform | Type | Description |\r\n|---------|------|-------------|\r\n| `u_pointer` | `vec2` | Primary input position in pixels (WebGL coords) |\r\n| `u_pointerDelta` | `vec2` | Primary input movement delta |\r\n| `u_pointerDown` | `bool` | True if primary input is active |\r\n| `u_pointerWasPressed` | `bool` | True on frame input became active |\r\n| `u_pointerWasReleased` | `bool` | True on frame input was released |\r\n| `u_pointerInCanvas` | `bool` | True if inside canvas |\r\n\r\n### Audio: Scalars\r\n\r\n| Uniform | Type | Description |\r\n|---------|------|-------------|\r\n| `u_audioVolume` | `float` | RMS volume 0-1 |\r\n| `u_audioPeak` | `float` | Peak amplitude 0-1 |\r\n| `u_audioVolumeSmoothed` | `float` | Smoothed volume (200ms decay) |\r\n| `u_audioLow` | `float` | Low band 20-120 Hz |\r\n| `u_audioLowMid` | `float` | Low-mid 120-400 Hz |\r\n| `u_audioMid` | `float` | Mid 400-1600 Hz |\r\n| `u_audioHighMid` | `float` | High-mid 1600-6000 Hz |\r\n| `u_audioHigh` | `float` | High 6000-16000 Hz |\r\n| `u_audioLowSmoothed` - `u_audioHighSmoothed` | `float` | Smoothed band variants |\r\n| `u_audioKick` | `float` | Kick energy 0-1 |\r\n| `u_audioSnare` | `float` | Snare energy 0-1 |\r\n| `u_audioHat` | `float` | Hi-hat energy 0-1 |\r\n| `u_audioAny` | `float` | Any beat energy 0-1 |\r\n| `u_audioKickSmoothed` - `u_audioAnySmoothed` | `float` | Smoothed beat values |\r\n| `u_audioKickTrigger` | `bool` | True on kick beat frame |\r\n| `u_audioSnareTrigger` | `bool` | True on snare beat frame |\r\n| `u_audioHatTrigger` | `bool` | True on hat beat frame |\r\n| `u_audioAnyTrigger` | `bool` | True on any beat frame |\r\n| `u_audioBPM` | `float` | Estimated BPM (60-240) |\r\n| `u_audioConfidence` | `float` | Beat tracking confidence 0-1 |\r\n| `u_audioIsLocked` | `bool` | True when BPM is locked |\r\n| `u_audioBrightness` | `float` | Spectral brightness 0-1 |\r\n| `u_audioFlatness` | `float` | Spectral flatness 0-1 |\r\n\r\n### Audio: Textures\r\n\r\n| Uniform | Type | Description |\r\n|---------|------|-------------|\r\n| `u_audioFFT` | `sampler2D` | FFT frequency spectrum (1024 bins, 0-255) |\r\n| `u_audioWaveform` | `sampler2D` | Time-domain waveform (−1 to 1) |\r\n\r\n**Note:** `u_audioFFT` / `u_audioWaveform` apply only to the main audio source. Additional streams (host `audioStreams` and device audio) use `u_audioStream{i}*` float/bool uniforms only: see \"Streams (Compositor)\" → \"Audio streams\" below.\r\n\r\n### Video\r\n\r\n| Uniform | Type | Description |\r\n|---------|------|-------------|\r\n| `u_video` | `sampler2D` | Current video frame texture |\r\n| `u_videoResolution` | `vec2` | Video frame size in pixels |\r\n| `u_videoFrameRate` | `float` | Video frame rate |\r\n| `u_videoConnected` | `bool` | True if video source is active |\r\n\r\n### CV: Face Detection\r\n\r\n| Uniform | Type | Description |\r\n|---------|------|-------------|\r\n| `u_faceCount` | `int` | Number of detected faces (0-1) |\r\n| `u_face0Bounds` | `vec4` | Bounding box (x, y, width, height) normalized 0-1 |\r\n| `u_face0Center` | `vec2` | Face center (x, y) normalized 0-1 |\r\n| `u_face0HeadPose` | `vec3` | Head rotation (pitch, yaw, roll) in degrees |\r\n| `u_face0Confidence` | `float` | Detection confidence 0-1 |\r\n| `u_face0Neutral` - `u_face0Fearful` | `float` | 7 expression scores (neutral, happy, sad, angry, surprised, disgusted, fearful) |\r\n\r\n**52 Blendshape uniforms** (all `float`, 0-1, ARKit names prefixed with `u_face0`):\r\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`.\r\n\r\n### CV: Hands\r\n\r\n| Uniform | Type | Description |\r\n|---------|------|-------------|\r\n| `u_handCount` | `int` | Number of detected hands (0-2) |\r\n| `u_leftHandPalm`, `u_rightHandPalm` | `vec3` | Palm position (x, y, z) |\r\n| `u_leftHandConfidence`, `u_rightHandConfidence` | `float` | Detection confidence 0-1 |\r\n| `u_leftHandBounds`, `u_rightHandBounds` | `vec4` | Bounding box normalized 0-1 |\r\n| `u_leftHandFist` - `u_leftHandILoveYou` | `float` | 7 left-hand gesture scores (fist, open, peace, thumbsUp, thumbsDown, pointing, iLoveYou) |\r\n| `u_rightHandFist` - `u_rightHandILoveYou` | `float` | 7 right-hand gesture scores |\r\n\r\n### CV: Pose\r\n\r\n| Uniform | Type | Description |\r\n|---------|------|-------------|\r\n| `u_poseDetected` | `bool` | True if a pose is detected |\r\n| `u_poseConfidence` | `float` | Detection confidence 0-1 |\r\n| `u_nosePosition` | `vec2` | Nose landmark (normalized 0-1) |\r\n| `u_leftShoulderPosition`, `u_rightShoulderPosition` | `vec2` | Shoulder positions |\r\n| `u_leftElbowPosition`, `u_rightElbowPosition` | `vec2` | Elbow positions |\r\n| `u_leftWristPosition`, `u_rightWristPosition` | `vec2` | Wrist positions |\r\n| `u_leftHipPosition`, `u_rightHipPosition` | `vec2` | Hip positions |\r\n| `u_leftKneePosition`, `u_rightKneePosition` | `vec2` | Knee positions |\r\n| `u_leftAnklePosition`, `u_rightAnklePosition` | `vec2` | Ankle positions |\r\n\r\n### CV: Body Segmentation\r\n\r\n| Uniform | Type | Description |\r\n|---------|------|-------------|\r\n| `u_segmentationMask` | `sampler2D` | Segmentation mask (0=background, 1=person) |\r\n| `u_segmentationRes` | `vec2` | Mask resolution in pixels |\r\n\r\n### Device Sensors\r\n\r\n| Uniform | Type | Description |\r\n|---------|------|-------------|\r\n| `u_deviceAcceleration` | `vec3` | Acceleration without gravity (m/s²) |\r\n| `u_deviceAccelerationGravity` | `vec3` | Acceleration with gravity (m/s²) |\r\n| `u_deviceRotationRate` | `vec3` | Rotation rate (deg/s) |\r\n| `u_deviceOrientation` | `vec3` | Orientation (alpha, beta, gamma) degrees |\r\n| `u_deviceOrientationAbsolute` | `bool` | True if using magnetometer |\r\n\r\n### External Devices\r\n\r\n| Uniform | Type | Description |\r\n|---------|------|-------------|\r\n| `u_deviceCount` | `int` | Number of device video sources (0-8) |\r\n| `u_externalDeviceCount` | `int` | Number of external devices (0-8) |\r\n| `u_device0` - `u_device7` | `sampler2D` | Device camera textures |\r\n| `u_device0Resolution` - `u_device7Resolution` | `vec2` | Device camera resolutions |\r\n| `u_device0Connected` - `u_device7Connected` | `bool` | Device connection status |\r\n| `u_device0Acceleration` - `u_device7Acceleration` | `vec3` | Per-device acceleration |\r\n| `u_device0AccelerationGravity` - `u_device7AccelerationGravity` | `vec3` | Per-device acceleration w/ gravity |\r\n| `u_device0RotationRate` - `u_device7RotationRate` | `vec3` | Per-device rotation rate |\r\n| `u_device0Orientation` - `u_device7Orientation` | `vec3` | Per-device orientation |\r\n\r\n**Note:** device audio (when an external device provides an audio source) is exposed as `u_audioStream{i}*` scalar uniforms: same per-slot names as compositor audio streams (`Connected`, `Volume`, band energies, `Brightness`, `Flatness` for `i` = 0-7). There are NO per-device or per-stream FFT/waveform textures; only the main audio source gets `u_audioFFT` and `u_audioWaveform`.\r\n\r\n### Streams (Compositor)\r\n\r\n| Uniform | Type | Description |\r\n|---------|------|-------------|\r\n| `u_videoStreamCount` | `int` | Number of active streams (0-8) |\r\n| `u_videoStream0` - `u_videoStream7` | `sampler2D` | Stream textures |\r\n| `u_videoStream0Resolution` - `u_videoStream7Resolution` | `vec2` | Stream resolutions |\r\n| `u_videoStream0Connected` - `u_videoStream7Connected` | `bool` | Stream connection status |\r\n\r\nStreams are host-provided video sources used internally by the compositor.\r\n\r\n#### Audio streams (additional sources)\r\n\r\n| Uniform | Type | Description |\r\n|---------|------|-------------|\r\n| `u_audioStreamCount` | `int` | Number of active additional audio streams (0-8) |\r\n| `u_audioStream0Connected` - `u_audioStream7Connected` | `bool` | Whether that slot is actively providing audio |\r\n| `u_audioStream{i}Volume` | `float` | RMS-style volume 0-1 |\r\n| `u_audioStream{i}Low` - `u_audioStream{i}High` | `float` | Band energies 0-1 (`Low`, `LowMid`, `Mid`, `HighMid`, `High`) |\r\n| `u_audioStream{i}Brightness`, `u_audioStream{i}Flatness` | `float` | Spectral features 0-1 |\r\n\r\n(`i` = 0…7.) **Lightweight scalars only**: **no** `u_audioFFT` / `u_audioWaveform` per stream. Beat/BPM/trigger uniforms remain **main audio only** (`u_audioKick`, `u_audioBPM`, etc.).\r\n\r\n### Backbuffer\r\n\r\n| Uniform | Type | Description |\r\n|---------|------|-------------|\r\n| `backbuffer` | `sampler2D` | Previous frame (auto-enabled when referenced) |\r\n\r\nNo `u_` prefix. RGBA 8-bit, LINEAR filtering, CLAMP_TO_EDGE wrapping. First frame samples as black. Content clears on canvas resize.\r\nSample: `texture2D(backbuffer, uv)` (ES 1.00) or `texture(backbuffer, uv)` (ES 3.00).\r\n\r\n## PARAMETER DIRECTIVES\r\n\r\nDeclare with `// @viji-TYPE:uniformName key:value ...` syntax. They become uniforms automatically.\r\n\r\n```glsl\r\n// @viji-slider:speed label:\"Speed\" default:1.0 min:0.1 max:5.0 step:0.1\r\n//   → uniform float speed;\r\n\r\n// @viji-color:tint label:\"Tint\" default:#ff6600\r\n//   → uniform vec3 tint;  (RGB 0-1)\r\n// `default:` accepts: #rrggbb, #rgb, vec3(r,g,b) in 0..1, rgb(r,g,b) in 0..255,\r\n//                     hsl(h, s%, l%) (h: 0..360), hsb(h, s, b) (h: 0..360, s/b: 0..100)\r\n\r\n// @viji-toggle:invert label:\"Invert\" default:false\r\n//   → uniform bool invert;\r\n\r\n// @viji-select:mode label:\"Mode\" default:0 options:[\"Solid\",\"Gradient\",\"Noise\"]\r\n//   → uniform int mode;  (0-based index)\r\n\r\n// @viji-number:count label:\"Count\" default:10.0 min:1.0 max:100.0 step:1.0\r\n//   → uniform float count;\r\n\r\n// @viji-image:tex label:\"Texture\"\r\n//   → uniform sampler2D tex;\r\n\r\n// @viji-button:reset label:\"Reset\"\r\n//   → uniform bool reset;  (true for one frame on press)\r\n\r\n// @viji-coordinate:origin label:\"Origin\" default:[0.0,0.0]\r\n//   → uniform vec2 origin;  (default uses [x,y] array; both components -1 to 1)\r\n\r\n// @viji-accumulator:phase rate:speed\r\n//   → uniform float phase;  (CPU-side: += speed × deltaTime each frame)\r\n```\r\n\r\nAll directives support `group:\"GroupName\"` and `category:\"audio|video|interaction|general\"`.\r\n\r\n## TEMPLATE\r\n\r\n```glsl\r\n// @renderer shader\r\n// @viji-slider:speed label:\"Speed\" default:1.0 min:0.1 max:5.0\r\n// @viji-color:baseColor label:\"Color\" default:#ff6600\r\n// @viji-accumulator:phase rate:speed\r\n\r\nvoid main() {\r\n  vec2 uv = gl_FragCoord.xy / u_resolution;\r\n\r\n  float wave = sin(uv.x * 10.0 + phase) * 0.5 + 0.5;\r\n  float pulse = 1.0 + u_audioLow * 0.5;\r\n  vec3 color = baseColor * wave * pulse;\r\n\r\n  gl_FragColor = vec4(color, 1.0);\r\n}\r\n```\r\n\r\nNow help the artist build a Viji shader scene based on their description below.\r\n\r\nIf the brief is vague, ambiguous, or missing a key data source, ask one or two clarifying questions first (see YOUR BEHAVIOR above). Otherwise, proceed.\r\n\r\nWhen you generate the shader:\r\n- Follow every rule in this prompt.\r\n- 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.\r\n- Output the GLSL code in a single fenced code block.\r\n- After the code block, write a short explanation (a few sentences) of how the shader works and what the artist can tweak.\r\n- Invite the artist to ask for changes.\r\n````\r\n\r\n## Usage\r\n\r\n1. Copy the entire prompt block above.\r\n2. Paste it into your AI assistant (ChatGPT, Claude, etc.).\r\n3. After the prompt, describe the shader effect you want.\r\n4. The AI will return a complete Viji shader scene.\r\n\r\n> [!TIP]\r\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.\r\n\r\n## Related\r\n\r\n- [Create Your First Scene](/ai-prompts/create-first-scene): guided prompt for beginners\r\n- [Prompting Tips](/ai-prompts/prompting-tips): how to get better results from AI\r\n- [Convert: Shadertoy](/ai-prompts/convert-shadertoy): convert existing Shadertoy shaders to Viji\r\n- [Shader Quick Start](/shader/quickstart): your first Viji shader\r\n- [Shader API Reference](/shader/api-reference): full uniform reference\r\n- [Backbuffer & Feedback](/shader/backbuffer): previous-frame feedback effects\r\n- [Shadertoy Compatibility](/shader/shadertoy): compatibility layer for Shadertoy code"
         }
       ]
     },
@@ -1447,7 +1447,7 @@ export const docsApi = {
       "content": [
         {
           "type": "text",
-          "markdown": "# Convert: P5 Sketches to Viji\r\n\r\nCopy the prompt below and paste it into your AI assistant along with the P5.js sketch you want to convert. The prompt contains all the rules the AI needs to produce a correct Viji-P5 scene.\r\n\r\n## The Prompt\r\n\r\n````\r\nYou are converting a standard P5.js sketch into a Viji-P5 scene.\r\nViji scenes run inside an OffscreenCanvas Web Worker using P5.js v1.9.4. Apply every rule below exactly.\r\n\r\n## YOUR BEHAVIOR\r\n\r\n1. **Clarify when needed.** If the source sketch is incomplete (missing `setup` or `draw`), uses libraries you cannot identify (`p5.sound`, custom `loadX` calls, third-party add-ons), or relies on `index.html` HTML elements, ask the artist for the missing pieces or for permission to drop them before generating code. If the sketch is self-contained, skip clarification and proceed.\r\n2. **Convert.** Produce a complete, copy-pasteable Viji-P5 scene that follows every rule in this prompt. Preserve the artist's visual intent and parameter ranges; replace only the Viji-incompatible parts.\r\n3. **Explain.** After the code block, give a short summary of the key changes you made (renamed `draw` to `render`, added `p5.` prefix, replaced `mouseX` with `viji.pointer.x`, removed `loadImage`, etc.). Flag any features you had to drop or simplify because they are incompatible with the Viji worker environment.\r\n4. **Iterate.** Invite the artist to ask for refinements (\"the colors look off\", \"the animation is too fast\", \"I want a slider for the speed\").\r\n\r\n## REFERENCE (source of truth)\r\n\r\nThe resources below are AUTHORITATIVE. The rules and tables in this prompt focus on the most common conversion mappings, but they do NOT cover the full Viji or P5 API surface. If anything ever conflicts, the linked files win. Viji pins **p5.js v1.9.4**: when in doubt about a P5 call, the p5.js v1.x reference is the truth.\r\n\r\n**If you have web/file access:**\r\n- REQUIRED before converting code: fetch and skim the Tier-1 resources. Use them to verify exact Viji API names and types, and to check P5 function syntax for any call this prompt does not list.\r\n- ON DEMAND: fetch from Tier-2 resources when the source sketch uses a Viji-side feature this prompt does not map (advanced CV data, device sensors, full Viji examples) or when you need authoritative TypeScript signatures for a P5 function.\r\n\r\n**If you do NOT have web/file access:**\r\n- Use only the API surface explicitly named in this prompt and the standard P5.js v1.x API for direct ports.\r\n- Never invent Viji property, method, or P5 function names from memory.\r\n- If the source sketch uses something not covered here, say so and ask the artist how they want it handled; do NOT fabricate a Viji equivalent.\r\n\r\n**Tier 1 (always consult when accessible):**\r\n- TypeScript API types (Viji JS surface): https://unpkg.com/@viji-dev/core/dist/artist-global.d.ts\r\n- P5.js v1.x reference (HTML, authoritative for P5 syntax): https://p5js.org/reference/\r\n\r\n**Tier 2 (consult when needed):**\r\n- Complete Viji docs (every page + every live example): https://unpkg.com/@viji-dev/core/dist/docs-api.js\r\n- Bundled Viji + P5.js v1.9.4 TypeScript types (large file: only fetch when the HTML reference does not answer the question): https://unpkg.com/@viji-dev/core/dist/artist-global-p5.d.ts\r\n- Companion prompt for any Viji feature this conversion prompt does not cover: https://unpkg.com/@viji-dev/core/dist/docs-api.js (search for \"p5-prompt\")\r\n\r\n**Last-resort lookup:** https://www.npmjs.com/package/@viji-dev/core\r\n\r\n## RULES\r\n\r\n1. ALWAYS set the first line from the sketch's canvas mode: `// @renderer p5` for 2D (default), or `// @renderer p5 webgl` if the sketch used `createCanvas(w, h, WEBGL)` or 3D primitives on the main canvas. NEVER keep `createCanvas()`: Viji creates the canvas.\r\n2. ALWAYS rename `draw()` to `render(viji, p5)`.\r\n3. If `setup()` exists, change its signature to `setup(viji, p5)`. If it doesn't exist, do NOT add one.\r\n4. ALWAYS prefix every P5 function and constant with `p5.`:\r\n   - `background(0)` → `p5.background(0)`\r\n   - `fill(255)` → `p5.fill(255)`\r\n   - `PI` → `p5.PI`, `TWO_PI` → `p5.TWO_PI`, `HSB` → `p5.HSB`\r\n   - `createVector(1, 0)` → `p5.createVector(1, 0)`\r\n   - `map(v, 0, 1, 0, 255)` → `p5.map(v, 0, 1, 0, 255)`\r\n   - `noise(x)` → `p5.noise(x)`\r\n   This applies to ALL P5 functions and constants without exception.\r\n5. NEVER call `createCanvas()`. The canvas is created and managed by Viji. WEBGL is selected only with `// @renderer p5 webgl`, not with `createCanvas(..., p5.WEBGL)`.\r\n6. NEVER use `preload()`. Use `viji.image(null, { label: 'Name' })` for images, or `fetch()` in an async `setup()` for data.\r\n7. NEVER use P5 event callbacks: `mousePressed()`, `mouseDragged()`, `mouseReleased()`, `keyPressed()`, `keyReleased()`, `keyTyped()`, `touchStarted()`, `touchMoved()`, `touchEnded()`. Instead, check state in `render()`:\r\n   - `mouseIsPressed` → `viji.pointer.isDown` (works for both mouse and touch) or `viji.mouse.isPressed`\r\n   - `mouseX` / `mouseY` → `viji.pointer.x` / `viji.pointer.y` (works for both mouse and touch) or `viji.mouse.x` / `viji.mouse.y`\r\n   - `keyIsPressed` → `viji.keyboard.isPressed('keyName')`\r\n   - For press-edge detection: use `viji.pointer.wasPressed` / `viji.pointer.wasReleased`.\r\n8. NEVER use `p5.frameRate()`, `p5.save()`, `p5.saveCanvas()`, `p5.saveFrames()`. These are host-level concerns.\r\n9. NEVER use `loadImage()`, `loadFont()`, `loadJSON()`, `loadModel()`, `loadShader()`. Use `viji.image()` or `fetch()`.\r\n10. NEVER use `createCapture()` or `createVideo()`. Use `viji.video.*` instead.\r\n11. NEVER use `p5.dom` or `p5.sound` libraries. Use Viji parameters for UI and `viji.audio.*` for audio.\r\n12. NEVER access `window`, `document`, `Image()`, or `localStorage`. `fetch()` IS available.\r\n13. ALWAYS declare parameters at the TOP LEVEL, never inside `render()` or `setup()`:\r\n    ```javascript\r\n    // CORRECT\r\n    const size = viji.slider(50, { min: 10, max: 200, label: 'Size' });\r\n    function render(viji, p5) { p5.circle(0, 0, size.value); }\r\n\r\n    // WRONG: creates a new parameter every frame\r\n    function render(viji, p5) { const size = viji.slider(50, { ... }); }\r\n    ```\r\n14. ALWAYS read parameters via `.value`: `size.value`, `color.value`, `toggle.value`.\r\n15. ALWAYS use `viji.width` and `viji.height` for canvas dimensions. NEVER hardcode pixel sizes.\r\n16. ALWAYS use `viji.deltaTime` for frame-rate-independent animation. Replace `frameCount * 0.01` patterns with a deltaTime accumulator:\r\n    ```javascript\r\n    let angle = 0;\r\n    function render(viji, p5) {\r\n      angle += speed.value * viji.deltaTime;\r\n    }\r\n    ```\r\n    NEVER multiply `viji.time` by a parameter (`viji.time * speed.value`): it causes jumps when the parameter changes. Same for nested: never multiply an accumulator by another parameter; give each speed its own accumulator.\r\n17. NEVER allocate objects, arrays, or strings inside `render()`. Pre-allocate at the top level and reuse.\r\n18. ALWAYS set `category` on parameters that depend on an external input: `category: 'audio'` for audio, `category: 'video'` for video/CV, `category: 'interaction'` for mouse/keyboard/touch. This lets the host hide irrelevant controls when the input is inactive.\r\n19. For image parameters displayed with P5, use `photo.p5` (not `photo.value`) with `p5.image()`:\r\n    ```javascript\r\n    const photo = viji.image(null, { label: 'Photo' });\r\n    function render(viji, p5) {\r\n      if (photo.value) p5.image(photo.p5, 0, 0, viji.width, viji.height);\r\n    }\r\n    ```\r\n\r\n## API MAPPING\r\n\r\n| Standard P5.js | Viji-P5 |\r\n|---|---|\r\n| `width` / `height` | `viji.width` / `viji.height` |\r\n| `mouseX` / `mouseY` | `viji.pointer.x` / `viji.pointer.y` (or `viji.mouse.x` / `viji.mouse.y`) |\r\n| `mouseIsPressed` | `viji.pointer.isDown` (or `viji.mouse.isPressed`) |\r\n| `mouseButton === LEFT` | `viji.mouse.leftButton` |\r\n| `keyIsPressed` | `viji.keyboard.isPressed('keyName')` |\r\n| `key` | `viji.keyboard.lastKeyPressed` |\r\n| `frameCount` | Use `viji.time` or `viji.deltaTime` accumulator |\r\n| `frameRate(n)` | Remove: host controls frame rate |\r\n| `createCanvas(w, h)` / `createCanvas(w, h, WEBGL)` | Remove: use `// @renderer p5` or `// @renderer p5 webgl` |\r\n| `preload()` | Remove: use `viji.image()` or `fetch()` in `setup()` |\r\n| `loadImage(url)` | `viji.image(null, { label: 'Image' })` |\r\n| `save()` | Remove: host uses `captureFrame()` |\r\n\r\nThe mapping above covers the most common direct ports. The complete Viji API surface is below: use it for any feature the source sketch reaches for that this table does not list (audio analysis, video frames, CV data, touch, device sensors, etc.).\r\n\r\n## COMPLETE VIJI API REFERENCE\r\n\r\nThe `viji` object is identical to the Native renderer (same object, same types). Access it inside `setup(viji, p5)` and `render(viji, p5)`.\r\n\r\n### Canvas & Timing\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `viji.canvas` | `OffscreenCanvas` | The canvas element (managed by P5) |\r\n| `viji.width` | `number` | Current canvas width in pixels |\r\n| `viji.height` | `number` | Current canvas height in pixels |\r\n| `viji.time` | `number` | Seconds since scene start |\r\n| `viji.deltaTime` | `number` | Seconds since last frame |\r\n| `viji.frameCount` | `number` | Total frames rendered |\r\n| `viji.fps` | `number` | Target frame rate (based on host frame-rate mode) |\r\n\r\n`viji.useContext()` is NOT available in P5: the canvas context is managed by P5 internally.\r\n\r\n### Parameters\r\n\r\nDeclare at top level. Read `.value` inside `render()`. All support `{ label, description?, group?, category? }`.\r\nCategory values: `'audio'`, `'video'`, `'interaction'`, `'general'`.\r\n\r\n```javascript\r\nviji.slider(default, { min?, max?, step?, label, group?, category? })   // { value: number }\r\nviji.color(default, { label, group?, category? })                       // { value: '#rrggbb' }\r\nviji.toggle(default, { label, group?, category? })                      // { value: boolean }\r\nviji.select(default, { options: [...], label, group?, category? })      // { value: string|number }\r\nviji.number(default, { min?, max?, step?, label, group?, category? })   // { value: number }\r\nviji.text(default, { label, group?, category?, maxLength? })            // { value: string }\r\nviji.image(null, { label, group?, category? })                          // { value: ImageBitmap|null, p5: P5Image }\r\nviji.button({ label, description?, group?, category? })                 // { value: boolean } (true one frame)\r\n```\r\n\r\n- `viji.coordinate(defaultValue, config)`: 2D coordinate, `{ x: number, y: number }`, both -1 to 1. Config: `{ step?, label, description?, group?, category? }`\r\n\r\n### Audio: `viji.audio`\r\n\r\nALWAYS check `viji.audio.isConnected` first.\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `isConnected` | `boolean` | Whether audio source is active |\r\n| `volume.current` | `number` | RMS volume 0-1 |\r\n| `volume.peak` | `number` | Peak amplitude 0-1 |\r\n| `volume.smoothed` | `number` | Smoothed volume (200ms decay) |\r\n| `bands.low` | `number` | 20-120 Hz energy 0-1 |\r\n| `bands.lowMid` | `number` | 120-400 Hz energy 0-1 |\r\n| `bands.mid` | `number` | 400-1600 Hz energy 0-1 |\r\n| `bands.highMid` | `number` | 1600-6000 Hz energy 0-1 |\r\n| `bands.high` | `number` | 6000-16000 Hz energy 0-1 |\r\n| `bands.lowSmoothed` … `bands.highSmoothed` | `number` | Smoothed variants of each band |\r\n| `beat.kick` | `number` | Kick energy 0-1 |\r\n| `beat.snare` | `number` | Snare energy 0-1 |\r\n| `beat.hat` | `number` | Hi-hat energy 0-1 |\r\n| `beat.any` | `number` | Any beat energy 0-1 |\r\n| `beat.kickSmoothed` … `beat.anySmoothed` | `number` | Smoothed beat values |\r\n| `beat.triggers.kick` | `boolean` | True on kick frame |\r\n| `beat.triggers.snare` | `boolean` | True on snare frame |\r\n| `beat.triggers.hat` | `boolean` | True on hat frame |\r\n| `beat.triggers.any` | `boolean` | True on any beat frame |\r\n| `beat.events` | `Array<{type,time,strength}>` | Recent beat events |\r\n| `beat.bpm` | `number` | Estimated BPM (60-240) |\r\n| `beat.confidence` | `number` | BPM tracking confidence 0-1 |\r\n| `beat.isLocked` | `boolean` | True when BPM is locked |\r\n| `spectral.brightness` | `number` | Spectral centroid 0-1 |\r\n| `spectral.flatness` | `number` | Spectral flatness 0-1 |\r\n| `getFrequencyData()` | `Uint8Array` | Raw FFT bins (0-255) |\r\n| `getWaveform()` | `Float32Array` | Time-domain waveform (−1 to 1) |\r\n\r\nCommon P5 sound conversions: `new p5.AudioIn() ... mic.getLevel()` → `viji.audio.volume.current`; `fft.analyze()` → `viji.audio.getFrequencyData()`; `p5.Amplitude` → `viji.audio.volume.smoothed`.\r\n\r\n### Video: `viji.video`\r\n\r\nALWAYS check `viji.video.isConnected` first. Check `currentFrame` before drawing.\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `isConnected` | `boolean` | Whether video source is active |\r\n| `currentFrame` | `OffscreenCanvas\\|ImageBitmap\\|null` | Current video frame |\r\n| `frameWidth` | `number` | Frame width in pixels |\r\n| `frameHeight` | `number` | Frame height in pixels |\r\n| `frameRate` | `number` | Video frame rate |\r\n| `getFrameData()` | `ImageData\\|null` | Pixel data for CPU access |\r\n\r\nReplace `createCapture(VIDEO)` with `viji.video.currentFrame`. Draw with `p5.image(viji.video.currentFrame, 0, 0, viji.width, viji.height)` (works in both 2D and WEBGL P5 modes), or `p5.drawingContext.drawImage(...)` in 2D only.\r\n\r\n### Computer Vision: `viji.video.cv` & `viji.video.faces / hands / pose / segmentation`\r\n\r\nEnable features via toggle parameters (NEVER enable by default):\r\n\r\n```javascript\r\nawait viji.video.cv.enableFaceDetection(true/false);\r\nawait viji.video.cv.enableFaceMesh(true/false);\r\nawait viji.video.cv.enableEmotionDetection(true/false);\r\nawait viji.video.cv.enableHandTracking(true/false);\r\nawait viji.video.cv.enablePoseDetection(true/false);\r\nawait viji.video.cv.enableBodySegmentation(true/false);\r\nviji.video.cv.getActiveFeatures();  // CVFeature[]\r\nviji.video.cv.isProcessing();       // boolean\r\n```\r\n\r\n**`viji.video.faces: FaceData[]`**\r\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} in degrees), `blendshapes` (52 ARKit coefficients 0-1: 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).\r\n\r\n**`viji.video.hands: HandData[]`**\r\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).\r\n\r\n**`viji.video.pose: PoseData | null`**\r\n`confidence` (0-1), `landmarks` ({x,y,z,visibility}[], 33 points), plus body-part arrays: `face` ({x,y}[]), `torso`, `leftArm`, `rightArm`, `leftLeg`, `rightLeg`.\r\n\r\n**`viji.video.segmentation: SegmentationData | null`**\r\n`mask` (Uint8Array, 0=background 255=person), `width`, `height`.\r\n\r\n### Input: Pointer (unified mouse/touch): `viji.pointer`\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `x`, `y` | `number` | Position in pixels |\r\n| `deltaX`, `deltaY` | `number` | Movement since last frame |\r\n| `isDown` | `boolean` | True if pressed/touching |\r\n| `wasPressed` | `boolean` | True on press frame |\r\n| `wasReleased` | `boolean` | True on release frame |\r\n| `isInCanvas` | `boolean` | True if inside canvas |\r\n| `type` | `string` | `'mouse'`, `'touch'`, or `'none'` |\r\n\r\n### Input: Mouse: `viji.mouse`\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `x`, `y` | `number` | Position in pixels |\r\n| `isInCanvas` | `boolean` | Inside canvas bounds |\r\n| `isPressed` | `boolean` | Any button pressed |\r\n| `leftButton`, `rightButton`, `middleButton` | `boolean` | Specific buttons |\r\n| `deltaX`, `deltaY` | `number` | Movement delta |\r\n| `wheelDelta` | `number` | Scroll wheel delta |\r\n| `wheelX`, `wheelY` | `number` | Horizontal/vertical scroll |\r\n| `wasPressed`, `wasReleased`, `wasMoved` | `boolean` | Frame-edge events |\r\n\r\n### Input: Keyboard: `viji.keyboard`\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `isPressed(key)` | `boolean` | True while key is held |\r\n| `wasPressed(key)` | `boolean` | True on key-down frame |\r\n| `wasReleased(key)` | `boolean` | True on key-up frame |\r\n| `activeKeys` | `Set<string>` | Currently held keys |\r\n| `pressedThisFrame` | `Set<string>` | Keys pressed this frame |\r\n| `releasedThisFrame` | `Set<string>` | Keys released this frame |\r\n| `lastKeyPressed` | `string` | Most recent key-down |\r\n| `lastKeyReleased` | `string` | Most recent key-up |\r\n| `shift`, `ctrl`, `alt`, `meta` | `boolean` | Modifier states |\r\n\r\n### Input: Touch: `viji.touches`\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `count` | `number` | Active touch count |\r\n| `points` | `TouchPoint[]` | All active touches |\r\n| `started` | `TouchPoint[]` | Touches started this frame |\r\n| `moved` | `TouchPoint[]` | Touches moved this frame |\r\n| `ended` | `TouchPoint[]` | Touches ended this frame |\r\n| `primary` | `TouchPoint\\|null` | First active touch |\r\n\r\n**TouchPoint:** `id`, `x`, `y`, `pressure`, `radius`, `radiusX`, `radiusY`, `rotationAngle`, `force`, `isInCanvas`, `deltaX`, `deltaY`, `velocity` ({x,y}), `isNew`, `isActive`, `isEnding`.\r\n\r\nP5 `touchStarted()` / `touchMoved()` / `touchEnded()` callbacks do not fire. Read `viji.touches.started` / `.moved` / `.ended` inside `render()` instead.\r\n\r\n### Device Sensors: `viji.device`\r\n\r\n`viji.device.motion` (DeviceMotionData|null): `acceleration` ({x,y,z} m/s²), `accelerationIncludingGravity`, `rotationRate` ({alpha,beta,gamma} deg/s), `interval` (ms).\r\n`viji.device.orientation` (DeviceOrientationData|null): `alpha` (0-360° compass), `beta` (−180-180° tilt), `gamma` (−90-90° tilt), `absolute` (boolean).\r\n\r\n### External Devices: `viji.devices`\r\n\r\n`DeviceState[]`: connected external devices. Each entry: `id` (string), `name` (string), `motion` (DeviceMotionData|null), `orientation` (DeviceOrientationData|null), `video` (VideoAPI|null, same shape as `viji.video` but without CV), `audio` (AudioStreamAPI|null, lightweight subset of `viji.audio`: `isConnected`, `volume.{current,peak,smoothed}`, `bands.{low...high}` + each `*Smoothed`, `spectral.{brightness,flatness}`, `getFrequencyData()`, `getWaveform()`. **No** beat / BPM / triggers / events).\r\n\r\n### Streams: `viji.videoStreams` and `viji.audioStreams`\r\n\r\n`viji.videoStreams: VideoAPI[]` and `viji.audioStreams: AudioStreamAPI[]`: additional video/audio sources provided by the host application (used internally by Viji's compositor for scene mixing). May be empty. Audio streams use the AudioStreamAPI shape (no beat / BPM / triggers / events).\r\n\r\n## P5-SPECIFIC GOTCHAS\r\n\r\nThese behaviors are different from running P5 in a browser tab:\r\n\r\n- **Fonts:** `p5.textFont()` only with CSS generic names (`'monospace'`, `'serif'`, `'sans-serif'`). `loadFont()` is NOT available.\r\n- **`p5.createGraphics(w, h)`** works (creates an internal OffscreenCanvas). `createGraphics(w, h, p5.WEBGL)` is NOT supported.\r\n- **`p5.pixelDensity()`** defaults to 1 in the worker. `p5.loadPixels()` and `p5.pixels[]` work in 2D scenes.\r\n- **`p5.drawingContext`** is a 2D context only in 2D scenes. In WEBGL scenes (`// @renderer p5 webgl`) it is a WebGL context: never use Canvas-2D-only APIs on it; use P5 3D drawing or `p5.image()` for textures and video.\r\n- **`viji.useContext()`** is NOT available in P5: the canvas and 2D context are managed by P5 internally.\r\n- **`p5.tint()` and `p5.blendMode()`** work normally.\r\n\r\n## TEMPLATE\r\n\r\n```javascript\r\n// @renderer p5\r\n\r\nconst speed = viji.slider(1, { min: 0.1, max: 5, label: 'Speed' });\r\n\r\nlet angle = 0;\r\n\r\nfunction setup(viji, p5) {\r\n  p5.colorMode(p5.HSB, 360, 100, 100);\r\n}\r\n\r\nfunction render(viji, p5) {\r\n  angle += speed.value * viji.deltaTime;\r\n  p5.background(0, 0, 10);\r\n  const x = viji.width / 2 + p5.cos(angle) * viji.width * 0.3;\r\n  const y = viji.height / 2 + p5.sin(angle) * viji.height * 0.3;\r\n  p5.noStroke();\r\n  p5.fill(angle * 30 % 360, 80, 100);\r\n  p5.circle(x, y, viji.width * 0.05);\r\n}\r\n```\r\n\r\nNow convert the P5.js sketch I provide.\r\n\r\nIf the sketch is incomplete or uses features that are incompatible with the Viji worker environment, ask one or two clarifying questions first (see YOUR BEHAVIOR above). Otherwise, proceed.\r\n\r\nWhen you produce the conversion:\r\n- Apply every rule and mapping above. The **API MAPPING** table covers the most common direct ports; the **COMPLETE VIJI API REFERENCE** above lists the full Viji surface for any feature the source sketch reaches for that the mapping table does not list (audio analysis, video frames, CV data, touch, device sensors). For any P5 call you are unsure about, consult the p5.js v1.x reference linked in **REFERENCE**. The canonical companion generation prompt is `p5-prompt` (in the `docs-api.js` bundle).\r\n- Output the Viji-P5 scene code in a single fenced code block.\r\n- After the code block, write a short summary of the key changes and flag anything you had to drop or simplify.\r\n- Invite the artist to ask for refinements.\r\n````\r\n\r\n## Usage\r\n\r\n1. Copy the entire prompt block above.\r\n2. Paste it into your AI assistant.\r\n3. After the prompt, paste the P5.js sketch you want to convert.\r\n4. The AI will return a Viji-compatible scene.\r\n\r\nFor a detailed human-readable guide, see [Converting P5 Sketches](/p5/converting-sketches).\r\n\r\n## Related\r\n\r\n- [Converting P5 Sketches](/p5/converting-sketches): step-by-step manual conversion guide\r\n- [Prompt: P5 Scenes](/ai-prompts/p5-prompt): AI prompt for creating new P5 scenes from scratch\r\n- [P5 Quick Start](/p5/quickstart): your first Viji-P5 scene"
+          "markdown": "# Convert: P5 Sketches to Viji\r\n\r\nCopy the prompt below and paste it into your AI assistant along with the P5.js sketch you want to convert. The prompt contains all the rules the AI needs to produce a correct Viji-P5 scene.\r\n\r\n## The Prompt\r\n\r\n````\r\nYou are converting a standard P5.js sketch into a Viji-P5 scene.\r\nViji scenes run inside an OffscreenCanvas Web Worker using P5.js v1.9.4. Apply every rule below exactly.\r\n\r\n## YOUR BEHAVIOR\r\n\r\n1. **Clarify when needed.** If the source sketch is incomplete (missing `setup` or `draw`), uses libraries you cannot identify (`p5.sound`, custom `loadX` calls, third-party add-ons), or relies on `index.html` HTML elements, ask the artist for the missing pieces or for permission to drop them before generating code. If the sketch is self-contained, skip clarification and proceed.\r\n2. **Convert.** Produce a complete, copy-pasteable Viji-P5 scene that follows every rule in this prompt. Preserve the artist's visual intent and parameter ranges; replace only the Viji-incompatible parts.\r\n3. **Explain.** After the code block, give a short summary of the key changes you made (renamed `draw` to `render`, added `p5.` prefix, replaced `mouseX` with `viji.pointer.x`, removed `loadImage`, etc.). Flag any features you had to drop or simplify because they are incompatible with the Viji worker environment.\r\n4. **Iterate.** Invite the artist to ask for refinements (\"the colors look off\", \"the animation is too fast\", \"I want a slider for the speed\").\r\n\r\n## REFERENCE (source of truth)\r\n\r\nThe resources below are AUTHORITATIVE. The rules and tables in this prompt focus on the most common conversion mappings, but they do NOT cover the full Viji or P5 API surface. If anything ever conflicts, the linked files win. Viji pins **p5.js v1.9.4**: when in doubt about a P5 call, the p5.js v1.x reference is the truth.\r\n\r\n**If you have web/file access:**\r\n- REQUIRED before converting code: fetch and skim the Tier-1 resources. Use them to verify exact Viji API names and types, and to check P5 function syntax for any call this prompt does not list.\r\n- ON DEMAND: fetch from Tier-2 resources when the source sketch uses a Viji-side feature this prompt does not map (advanced CV data, device sensors, full Viji examples) or when you need authoritative TypeScript signatures for a P5 function.\r\n\r\n**If you do NOT have web/file access:**\r\n- Use only the API surface explicitly named in this prompt and the standard P5.js v1.x API for direct ports.\r\n- Never invent Viji property, method, or P5 function names from memory.\r\n- If the source sketch uses something not covered here, say so and ask the artist how they want it handled; do NOT fabricate a Viji equivalent.\r\n\r\n**Tier 1 (always consult when accessible):**\r\n- TypeScript API types (Viji JS surface): https://unpkg.com/@viji-dev/core/dist/artist-global.d.ts\r\n- P5.js v1.x reference (HTML, authoritative for P5 syntax): https://p5js.org/reference/\r\n\r\n**Tier 2 (consult when needed):**\r\n- Complete Viji docs (every page + every live example): https://unpkg.com/@viji-dev/core/dist/docs-api.js\r\n- Bundled Viji + P5.js v1.9.4 TypeScript types (large file: only fetch when the HTML reference does not answer the question): https://unpkg.com/@viji-dev/core/dist/artist-global-p5.d.ts\r\n- Companion prompt for any Viji feature this conversion prompt does not cover: https://unpkg.com/@viji-dev/core/dist/docs-api.js (search for \"p5-prompt\")\r\n\r\n**Last-resort lookup:** https://www.npmjs.com/package/@viji-dev/core\r\n\r\n## RULES\r\n\r\n1. ALWAYS set the first line from the sketch's canvas mode: `// @renderer p5` for 2D (default), or `// @renderer p5 webgl` if the sketch used `createCanvas(w, h, WEBGL)` or 3D primitives on the main canvas. NEVER keep `createCanvas()`: Viji creates the canvas.\r\n2. ALWAYS rename `draw()` to `render(viji, p5)`.\r\n3. If `setup()` exists, change its signature to `setup(viji, p5)`. If it doesn't exist, do NOT add one.\r\n4. ALWAYS prefix every P5 function and constant with `p5.`:\r\n   - `background(0)` → `p5.background(0)`\r\n   - `fill(255)` → `p5.fill(255)`\r\n   - `PI` → `p5.PI`, `TWO_PI` → `p5.TWO_PI`, `HSB` → `p5.HSB`\r\n   - `createVector(1, 0)` → `p5.createVector(1, 0)`\r\n   - `map(v, 0, 1, 0, 255)` → `p5.map(v, 0, 1, 0, 255)`\r\n   - `noise(x)` → `p5.noise(x)`\r\n   This applies to ALL P5 functions and constants without exception.\r\n5. NEVER call `createCanvas()`. The canvas is created and managed by Viji. WEBGL is selected only with `// @renderer p5 webgl`, not with `createCanvas(..., p5.WEBGL)`.\r\n6. NEVER use `preload()`. Use `viji.image(null, { label: 'Name' })` for images, or `fetch()` in an async `setup()` for data.\r\n7. NEVER use P5 event callbacks: `mousePressed()`, `mouseDragged()`, `mouseReleased()`, `keyPressed()`, `keyReleased()`, `keyTyped()`, `touchStarted()`, `touchMoved()`, `touchEnded()`. Instead, check state in `render()`:\r\n   - `mouseIsPressed` → `viji.pointer.isDown` (works for both mouse and touch) or `viji.mouse.isPressed`\r\n   - `mouseX` / `mouseY` → `viji.pointer.x` / `viji.pointer.y` (works for both mouse and touch) or `viji.mouse.x` / `viji.mouse.y`\r\n   - `keyIsPressed` → `viji.keyboard.isPressed('keyName')`\r\n   - For press-edge detection: use `viji.pointer.wasPressed` / `viji.pointer.wasReleased`.\r\n8. NEVER use `p5.frameRate()`, `p5.save()`, `p5.saveCanvas()`, `p5.saveFrames()`. These are host-level concerns.\r\n9. NEVER use `loadImage()`, `loadFont()`, `loadJSON()`, `loadModel()`, `loadShader()`. Use `viji.image()` or `fetch()`.\r\n10. NEVER use `createCapture()` or `createVideo()`. Use `viji.video.*` instead.\r\n11. NEVER use `p5.dom` or `p5.sound` libraries. Use Viji parameters for UI and `viji.audio.*` for audio.\r\n12. NEVER access `window`, `document`, `Image()`, or `localStorage`. `fetch()` IS available.\r\n13. ALWAYS declare parameters at the TOP LEVEL, never inside `render()` or `setup()`:\r\n    ```javascript\r\n    // CORRECT\r\n    const size = viji.slider(50, { min: 10, max: 200, label: 'Size' });\r\n    function render(viji, p5) { p5.circle(0, 0, size.value); }\r\n\r\n    // WRONG: creates a new parameter every frame\r\n    function render(viji, p5) { const size = viji.slider(50, { ... }); }\r\n    ```\r\n14. ALWAYS read parameters via `.value`: `size.value`, `color.value`, `toggle.value`. Color parameters also expose `.rgb` (`{ r, g, b }` in 0..255) and `.hsb` (`{ h, s, b }`, h in 0..360, s/b in 0..100) for direct use with `colorMode(RGB, 255)` / `colorMode(HSB, 360, 100, 100)`.\r\n15. ALWAYS use `viji.width` and `viji.height` for canvas dimensions. NEVER hardcode pixel sizes.\r\n16. ALWAYS use `viji.deltaTime` for frame-rate-independent animation. Replace `frameCount * 0.01` patterns with a deltaTime accumulator:\r\n    ```javascript\r\n    let angle = 0;\r\n    function render(viji, p5) {\r\n      angle += speed.value * viji.deltaTime;\r\n    }\r\n    ```\r\n    NEVER multiply `viji.time` by a parameter (`viji.time * speed.value`): it causes jumps when the parameter changes. Same for nested: never multiply an accumulator by another parameter; give each speed its own accumulator.\r\n17. NEVER allocate objects, arrays, or strings inside `render()`. Pre-allocate at the top level and reuse.\r\n18. ALWAYS set `category` on parameters that depend on an external input: `category: 'audio'` for audio, `category: 'video'` for video/CV, `category: 'interaction'` for mouse/keyboard/touch. This lets the host hide irrelevant controls when the input is inactive.\r\n19. For image parameters displayed with P5, use `photo.p5` (not `photo.value`) with `p5.image()`:\r\n    ```javascript\r\n    const photo = viji.image(null, { label: 'Photo' });\r\n    function render(viji, p5) {\r\n      if (photo.value) p5.image(photo.p5, 0, 0, viji.width, viji.height);\r\n    }\r\n    ```\r\n\r\n## API MAPPING\r\n\r\n| Standard P5.js | Viji-P5 |\r\n|---|---|\r\n| `width` / `height` | `viji.width` / `viji.height` |\r\n| `mouseX` / `mouseY` | `viji.pointer.x` / `viji.pointer.y` (or `viji.mouse.x` / `viji.mouse.y`) |\r\n| `mouseIsPressed` | `viji.pointer.isDown` (or `viji.mouse.isPressed`) |\r\n| `mouseButton === LEFT` | `viji.mouse.leftButton` |\r\n| `keyIsPressed` | `viji.keyboard.isPressed('keyName')` |\r\n| `key` | `viji.keyboard.lastKeyPressed` |\r\n| `frameCount` | Use `viji.time` or `viji.deltaTime` accumulator |\r\n| `frameRate(n)` | Remove: host controls frame rate |\r\n| `createCanvas(w, h)` / `createCanvas(w, h, WEBGL)` | Remove: use `// @renderer p5` or `// @renderer p5 webgl` |\r\n| `preload()` | Remove: use `viji.image()` or `fetch()` in `setup()` |\r\n| `loadImage(url)` | `viji.image(null, { label: 'Image' })` |\r\n| `save()` | Remove: host uses `captureFrame()` |\r\n\r\nThe mapping above covers the most common direct ports. The complete Viji API surface is below: use it for any feature the source sketch reaches for that this table does not list (audio analysis, video frames, CV data, touch, device sensors, etc.).\r\n\r\n## COMPLETE VIJI API REFERENCE\r\n\r\nThe `viji` object is identical to the Native renderer (same object, same types). Access it inside `setup(viji, p5)` and `render(viji, p5)`.\r\n\r\n### Canvas & Timing\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `viji.canvas` | `OffscreenCanvas` | The canvas element (managed by P5) |\r\n| `viji.width` | `number` | Current canvas width in pixels |\r\n| `viji.height` | `number` | Current canvas height in pixels |\r\n| `viji.time` | `number` | Seconds since scene start |\r\n| `viji.deltaTime` | `number` | Seconds since last frame |\r\n| `viji.frameCount` | `number` | Total frames rendered |\r\n| `viji.fps` | `number` | Target frame rate (based on host frame-rate mode) |\r\n\r\n`viji.useContext()` is NOT available in P5: the canvas context is managed by P5 internally.\r\n\r\n### Parameters\r\n\r\nDeclare at top level. Read `.value` inside `render()`. All support `{ label, description?, group?, category? }`.\r\nCategory values: `'audio'`, `'video'`, `'interaction'`, `'general'`.\r\n\r\n```javascript\r\nviji.slider(default, { min?, max?, step?, label, group?, category? })   // { value: number }\r\nviji.color(default, { label, group?, category? })                       // { value: '#rrggbb', rgb: { r, g, b } in 0..255, hsb: { h: 0..360, s/b: 0..100 } }\r\nviji.toggle(default, { label, group?, category? })                      // { value: boolean }\r\nviji.select(default, { options: [...], label, group?, category? })      // { value: string|number }\r\nviji.number(default, { min?, max?, step?, label, group?, category? })   // { value: number }\r\nviji.text(default, { label, group?, category?, maxLength? })            // { value: string }\r\nviji.image(null, { label, group?, category? })                          // { value: ImageBitmap|null, p5: P5Image }\r\nviji.button({ label, description?, group?, category? })                 // { value: boolean } (true one frame)\r\nviji.coordinate(default, { step?, label, group?, category? })           // { value: { x, y } } (both -1 to 1)\r\n```\r\n\r\n### Audio: `viji.audio`\r\n\r\nALWAYS check `viji.audio.isConnected` first.\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `isConnected` | `boolean` | Whether audio source is active |\r\n| `volume.current` | `number` | RMS volume 0-1 |\r\n| `volume.peak` | `number` | Peak amplitude 0-1 |\r\n| `volume.smoothed` | `number` | Smoothed volume (200ms decay) |\r\n| `bands.low` | `number` | 20-120 Hz energy 0-1 |\r\n| `bands.lowMid` | `number` | 120-400 Hz energy 0-1 |\r\n| `bands.mid` | `number` | 400-1600 Hz energy 0-1 |\r\n| `bands.highMid` | `number` | 1600-6000 Hz energy 0-1 |\r\n| `bands.high` | `number` | 6000-16000 Hz energy 0-1 |\r\n| `bands.lowSmoothed` … `bands.highSmoothed` | `number` | Smoothed variants of each band |\r\n| `beat.kick` | `number` | Kick energy 0-1 |\r\n| `beat.snare` | `number` | Snare energy 0-1 |\r\n| `beat.hat` | `number` | Hi-hat energy 0-1 |\r\n| `beat.any` | `number` | Any beat energy 0-1 |\r\n| `beat.kickSmoothed` … `beat.anySmoothed` | `number` | Smoothed beat values |\r\n| `beat.triggers.kick` | `boolean` | True on kick frame |\r\n| `beat.triggers.snare` | `boolean` | True on snare frame |\r\n| `beat.triggers.hat` | `boolean` | True on hat frame |\r\n| `beat.triggers.any` | `boolean` | True on any beat frame |\r\n| `beat.events` | `Array<{type,time,strength}>` | Recent beat events |\r\n| `beat.bpm` | `number` | Estimated BPM (60-240) |\r\n| `beat.confidence` | `number` | BPM tracking confidence 0-1 |\r\n| `beat.isLocked` | `boolean` | True when BPM is locked |\r\n| `spectral.brightness` | `number` | Spectral centroid 0-1 |\r\n| `spectral.flatness` | `number` | Spectral flatness 0-1 |\r\n| `getFrequencyData()` | `Uint8Array` | Raw FFT bins (0-255) |\r\n| `getWaveform()` | `Float32Array` | Time-domain waveform (−1 to 1) |\r\n\r\nCommon P5 sound conversions: `new p5.AudioIn() ... mic.getLevel()` → `viji.audio.volume.current`; `fft.analyze()` → `viji.audio.getFrequencyData()`; `p5.Amplitude` → `viji.audio.volume.smoothed`.\r\n\r\n### Video: `viji.video`\r\n\r\nALWAYS check `viji.video.isConnected` first. Check `currentFrame` before drawing.\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `isConnected` | `boolean` | Whether video source is active |\r\n| `currentFrame` | `OffscreenCanvas\\|ImageBitmap\\|null` | Current video frame |\r\n| `frameWidth` | `number` | Frame width in pixels |\r\n| `frameHeight` | `number` | Frame height in pixels |\r\n| `frameRate` | `number` | Video frame rate |\r\n| `getFrameData()` | `ImageData\\|null` | Pixel data for CPU access |\r\n\r\nReplace `createCapture(VIDEO)` with `viji.video.currentFrame`. Draw with `p5.image(viji.video.currentFrame, 0, 0, viji.width, viji.height)` (works in both 2D and WEBGL P5 modes), or `p5.drawingContext.drawImage(...)` in 2D only.\r\n\r\n### Computer Vision: `viji.video.cv` & `viji.video.faces / hands / pose / segmentation`\r\n\r\nEnable features via toggle parameters (NEVER enable by default):\r\n\r\n```javascript\r\nawait viji.video.cv.enableFaceDetection(true/false);\r\nawait viji.video.cv.enableFaceMesh(true/false);\r\nawait viji.video.cv.enableEmotionDetection(true/false);\r\nawait viji.video.cv.enableHandTracking(true/false);\r\nawait viji.video.cv.enablePoseDetection(true/false);\r\nawait viji.video.cv.enableBodySegmentation(true/false);\r\nviji.video.cv.getActiveFeatures();  // CVFeature[]\r\nviji.video.cv.isProcessing();       // boolean\r\n```\r\n\r\n**`viji.video.faces: FaceData[]`**\r\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} in degrees), `blendshapes` (52 ARKit coefficients 0-1: 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).\r\n\r\n**`viji.video.hands: HandData[]`**\r\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).\r\n\r\n**`viji.video.pose: PoseData | null`**\r\n`confidence` (0-1), `landmarks` ({x,y,z,visibility}[], 33 points), plus body-part arrays: `face` ({x,y}[]), `torso`, `leftArm`, `rightArm`, `leftLeg`, `rightLeg`.\r\n\r\n**`viji.video.segmentation: SegmentationData | null`**\r\n`mask` (Uint8Array, 0=background 255=person), `width`, `height`.\r\n\r\n### Input: Pointer (unified mouse/touch): `viji.pointer`\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `x`, `y` | `number` | Position in pixels |\r\n| `deltaX`, `deltaY` | `number` | Movement since last frame |\r\n| `isDown` | `boolean` | True if pressed/touching |\r\n| `wasPressed` | `boolean` | True on press frame |\r\n| `wasReleased` | `boolean` | True on release frame |\r\n| `isInCanvas` | `boolean` | True if inside canvas |\r\n| `type` | `string` | `'mouse'`, `'touch'`, or `'none'` |\r\n\r\n### Input: Mouse: `viji.mouse`\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `x`, `y` | `number` | Position in pixels |\r\n| `isInCanvas` | `boolean` | Inside canvas bounds |\r\n| `isPressed` | `boolean` | Any button pressed |\r\n| `leftButton`, `rightButton`, `middleButton` | `boolean` | Specific buttons |\r\n| `deltaX`, `deltaY` | `number` | Movement delta |\r\n| `wheelDelta` | `number` | Scroll wheel delta |\r\n| `wheelX`, `wheelY` | `number` | Horizontal/vertical scroll |\r\n| `wasPressed`, `wasReleased`, `wasMoved` | `boolean` | Frame-edge events |\r\n\r\n### Input: Keyboard: `viji.keyboard`\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `isPressed(key)` | `boolean` | True while key is held |\r\n| `wasPressed(key)` | `boolean` | True on key-down frame |\r\n| `wasReleased(key)` | `boolean` | True on key-up frame |\r\n| `activeKeys` | `Set<string>` | Currently held keys |\r\n| `pressedThisFrame` | `Set<string>` | Keys pressed this frame |\r\n| `releasedThisFrame` | `Set<string>` | Keys released this frame |\r\n| `lastKeyPressed` | `string` | Most recent key-down |\r\n| `lastKeyReleased` | `string` | Most recent key-up |\r\n| `shift`, `ctrl`, `alt`, `meta` | `boolean` | Modifier states |\r\n\r\n### Input: Touch: `viji.touches`\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `count` | `number` | Active touch count |\r\n| `points` | `TouchPoint[]` | All active touches |\r\n| `started` | `TouchPoint[]` | Touches started this frame |\r\n| `moved` | `TouchPoint[]` | Touches moved this frame |\r\n| `ended` | `TouchPoint[]` | Touches ended this frame |\r\n| `primary` | `TouchPoint\\|null` | First active touch |\r\n\r\n**TouchPoint:** `id`, `x`, `y`, `pressure`, `radius`, `radiusX`, `radiusY`, `rotationAngle`, `force`, `isInCanvas`, `deltaX`, `deltaY`, `velocity` ({x,y}), `isNew`, `isActive`, `isEnding`.\r\n\r\nP5 `touchStarted()` / `touchMoved()` / `touchEnded()` callbacks do not fire. Read `viji.touches.started` / `.moved` / `.ended` inside `render()` instead.\r\n\r\n### Device Sensors: `viji.device`\r\n\r\n`viji.device.motion` (DeviceMotionData|null): `acceleration` ({x,y,z} m/s²), `accelerationIncludingGravity`, `rotationRate` ({alpha,beta,gamma} deg/s), `interval` (ms).\r\n`viji.device.orientation` (DeviceOrientationData|null): `alpha` (0-360° compass), `beta` (−180-180° tilt), `gamma` (−90-90° tilt), `absolute` (boolean).\r\n\r\n### External Devices: `viji.devices`\r\n\r\n`DeviceState[]`: connected external devices. Each entry: `id` (string), `name` (string), `motion` (DeviceMotionData|null), `orientation` (DeviceOrientationData|null), `video` (VideoAPI|null, same shape as `viji.video` but without CV), `audio` (AudioStreamAPI|null, lightweight subset of `viji.audio`: `isConnected`, `volume.{current,peak,smoothed}`, `bands.{low...high}` + each `*Smoothed`, `spectral.{brightness,flatness}`, `getFrequencyData()`, `getWaveform()`. **No** beat / BPM / triggers / events).\r\n\r\n### Streams: `viji.videoStreams` and `viji.audioStreams`\r\n\r\n`viji.videoStreams: VideoAPI[]` and `viji.audioStreams: AudioStreamAPI[]`: additional video/audio sources provided by the host application (used internally by Viji's compositor for scene mixing). May be empty. Audio streams use the AudioStreamAPI shape (no beat / BPM / triggers / events).\r\n\r\n## P5-SPECIFIC GOTCHAS\r\n\r\nThese behaviors are different from running P5 in a browser tab:\r\n\r\n- **Fonts:** `p5.textFont()` only with CSS generic names (`'monospace'`, `'serif'`, `'sans-serif'`). `loadFont()` is NOT available.\r\n- **`p5.createGraphics(w, h)`** works (creates an internal OffscreenCanvas). `createGraphics(w, h, p5.WEBGL)` is NOT supported.\r\n- **`p5.pixelDensity()`** defaults to 1 in the worker. `p5.loadPixels()` and `p5.pixels[]` work in 2D scenes.\r\n- **`p5.drawingContext`** is a 2D context only in 2D scenes. In WEBGL scenes (`// @renderer p5 webgl`) it is a WebGL context: never use Canvas-2D-only APIs on it; use P5 3D drawing or `p5.image()` for textures and video.\r\n- **`viji.useContext()`** is NOT available in P5: the canvas and 2D context are managed by P5 internally.\r\n- **`p5.tint()` and `p5.blendMode()`** work normally.\r\n\r\n## TEMPLATE\r\n\r\n```javascript\r\n// @renderer p5\r\n\r\nconst speed = viji.slider(1, { min: 0.1, max: 5, label: 'Speed' });\r\n\r\nlet angle = 0;\r\n\r\nfunction setup(viji, p5) {\r\n  p5.colorMode(p5.HSB, 360, 100, 100);\r\n}\r\n\r\nfunction render(viji, p5) {\r\n  angle += speed.value * viji.deltaTime;\r\n  p5.background(0, 0, 10);\r\n  const x = viji.width / 2 + p5.cos(angle) * viji.width * 0.3;\r\n  const y = viji.height / 2 + p5.sin(angle) * viji.height * 0.3;\r\n  p5.noStroke();\r\n  p5.fill(angle * 30 % 360, 80, 100);\r\n  p5.circle(x, y, viji.width * 0.05);\r\n}\r\n```\r\n\r\nNow convert the P5.js sketch I provide.\r\n\r\nIf the sketch is incomplete or uses features that are incompatible with the Viji worker environment, ask one or two clarifying questions first (see YOUR BEHAVIOR above). Otherwise, proceed.\r\n\r\nWhen you produce the conversion:\r\n- Apply every rule and mapping above. The **API MAPPING** table covers the most common direct ports; the **COMPLETE VIJI API REFERENCE** above lists the full Viji surface for any feature the source sketch reaches for that the mapping table does not list (audio analysis, video frames, CV data, touch, device sensors). For any P5 call you are unsure about, consult the p5.js v1.x reference linked in **REFERENCE**. The canonical companion generation prompt is `p5-prompt` (in the `docs-api.js` bundle).\r\n- Output the Viji-P5 scene code in a single fenced code block.\r\n- After the code block, write a short summary of the key changes and flag anything you had to drop or simplify.\r\n- Invite the artist to ask for refinements.\r\n````\r\n\r\n## Usage\r\n\r\n1. Copy the entire prompt block above.\r\n2. Paste it into your AI assistant.\r\n3. After the prompt, paste the P5.js sketch you want to convert.\r\n4. The AI will return a Viji-compatible scene.\r\n\r\nFor a detailed human-readable guide, see [Converting P5 Sketches](/p5/converting-sketches#step-by-step).\r\n\r\n## Related\r\n\r\n- [Converting P5 Sketches](/p5/converting-sketches#step-by-step): step-by-step manual conversion guide\r\n- [Prompt: P5 Scenes](/ai-prompts/p5-prompt): AI prompt for creating new P5 scenes from scratch\r\n- [P5 Quick Start](/p5/quickstart): your first Viji-P5 scene"
         }
       ]
     },
@@ -1503,7 +1503,7 @@ export const docsApi = {
       "content": [
         {
           "type": "text",
-          "markdown": "# Convert: Three.js to Viji\r\n\r\nCopy the prompt below and paste it into your AI assistant along with the Three.js code you want to convert. The prompt contains all the rules the AI needs to produce a correct Viji native scene with Three.js.\r\n\r\n## The Prompt\r\n\r\n````\r\nYou are converting a standalone Three.js application into a Viji native scene.\r\nViji scenes run inside an OffscreenCanvas Web Worker. Apply every rule below exactly.\r\n\r\n## YOUR BEHAVIOR\r\n\r\n1. **Clarify when needed.** If the source code is incomplete (missing init or render loop), uses a framework on top of Three.js (React Three Fiber, Drei, Theatre.js), or relies on DOM elements outside the canvas, ask the artist for the missing pieces or for permission to drop the framework wrapper before generating code. If the code is plain Three.js and self-contained, skip clarification and proceed.\r\n2. **Convert.** Produce a complete, copy-pasteable Viji native scene that follows every rule in this prompt. Preserve the artist's visual intent, scene graph, and material setup; replace only the Viji-incompatible parts (window/document access, `requestAnimationFrame`, `THREE.Clock`, DOM event listeners).\r\n3. **Explain.** After the code block, give a short summary of the key changes you made (e.g., \"wrapped scene init in top-level code, moved per-frame logic into `render(viji)`, replaced `clock.getDelta()` with `viji.deltaTime`, replaced mouse listeners with `viji.pointer`\"). Flag any features you had to drop or simplify (e.g., `OrbitControls`, postprocessing that depends on DOM events).\r\n4. **Iterate.** Invite the artist to ask for refinements (\"add a slider for camera distance\", \"make the cube react to audio\", \"swap the material for a wireframe\").\r\n\r\n## REFERENCE (source of truth)\r\n\r\nThe resources below are AUTHORITATIVE. The rules and tables in this prompt focus on the most common Three.js → Viji mappings, but they do NOT cover the full Viji API surface. If anything ever conflicts, the linked files win.\r\n\r\n**If you have web/file access:**\r\n- REQUIRED before converting code: fetch and skim the Tier-1 resource. Use it to verify exact Viji API names, parameter types, and any Viji feature the source code may reach for (audio, video, CV, sensors, parameters).\r\n- ON DEMAND: fetch from the Tier-2 resource when the source uses a Viji-side feature this prompt does not map (advanced CV data structures, device sensors, full Viji examples) or when you need authoritative TypeScript signatures.\r\n\r\n**If you do NOT have web/file access:**\r\n- Use only the API surface explicitly named in this prompt and the standard Three.js API for direct ports.\r\n- Never invent Viji property or method names from memory.\r\n- If the source uses something not covered here, say so and ask the artist how they want it handled; do NOT fabricate a Viji equivalent.\r\n\r\n**Tier 1 (always consult when accessible):**\r\n- TypeScript API types (Viji JS surface, all renderers): https://unpkg.com/@viji-dev/core/dist/artist-global.d.ts\r\n\r\n**Tier 2 (consult when needed):**\r\n- Complete Viji docs (every page + every live example): https://unpkg.com/@viji-dev/core/dist/docs-api.js\r\n- Companion prompt for any Viji feature this conversion prompt does not cover (search for \"native-prompt\" in the docs above).\r\n\r\n**Last-resort lookup:** https://www.npmjs.com/package/@viji-dev/core\r\n\r\n## RULES\r\n\r\n1. ALWAYS import Three.js dynamically at the top level using `await import()`:\r\n   ```javascript\r\n   const THREE = await import('https://esm.sh/three@0.160.0');\r\n   ```\r\n   NEVER use `<script>` tags, `require()`, or static `import` statements.\r\n   ALWAYS pin the version number in the URL.\r\n\r\n2. ALWAYS use `viji.canvas` as the renderer's canvas:\r\n   ```javascript\r\n   const renderer = new THREE.WebGLRenderer({ canvas: viji.canvas, antialias: true });\r\n   renderer.setSize(viji.width, viji.height, false);\r\n   ```\r\n   ALWAYS pass `false` as the third argument to `setSize()`: this prevents Three.js from setting CSS styles, which would fail in the worker.\r\n\r\n3. NEVER use `requestAnimationFrame()`. Viji controls the render loop. Write all per-frame logic inside `function render(viji) { ... }` and call `renderer.render(scene, camera)` at the end.\r\n\r\n4. ALWAYS handle resize by checking `viji.width` / `viji.height` in `render()`:\r\n   ```javascript\r\n   let prevWidth = viji.width;\r\n   let prevHeight = viji.height;\r\n\r\n   function render(viji) {\r\n     if (viji.width !== prevWidth || viji.height !== prevHeight) {\r\n       renderer.setSize(viji.width, viji.height, false);\r\n       camera.aspect = viji.width / viji.height;\r\n       camera.updateProjectionMatrix();\r\n       prevWidth = viji.width;\r\n       prevHeight = viji.height;\r\n     }\r\n     renderer.render(scene, camera);\r\n   }\r\n   ```\r\n\r\n5. NEVER access `window`, `document`, `Image()`, or `localStorage`. `fetch()` IS available.\r\n\r\n6. NEVER use `window.innerWidth` / `window.innerHeight`. Use `viji.width` / `viji.height`.\r\n\r\n7. Replace hardcoded values with Viji parameters declared at the top level:\r\n   ```javascript\r\n   const speed = viji.slider(1, { min: 0.1, max: 5, label: 'Speed' });\r\n   const color = viji.color('#049ef4', { label: 'Color' });\r\n   ```\r\n   NEVER declare parameters inside `render()`.\r\n   ALWAYS read via `.value`: `speed.value`, `color.value`.\r\n\r\n8. ALWAYS use `viji.deltaTime` for animation timing:\r\n   ```javascript\r\n   cube.rotation.y += speed.value * viji.deltaTime;\r\n   ```\r\n   NEVER use `clock.getDelta()` or `Date.now()`. Remove any `THREE.Clock` usage.\r\n   NEVER multiply `viji.time` by a parameter (`viji.time * speed.value`): it causes animation jumps when the parameter changes. Same for nested multiplications: never multiply an accumulator by another parameter; give each speed its own accumulator.\r\n\r\n9. Replace mouse/keyboard event listeners with Viji APIs:\r\n   - `event.clientX` → `viji.pointer.x` (works for both mouse and touch) or `viji.mouse.x`\r\n   - `event.clientY` → `viji.pointer.y` or `viji.mouse.y`\r\n   - Mouse buttons → `viji.mouse.leftButton`, `viji.mouse.rightButton`\r\n   - Key presses → `viji.keyboard.isPressed('keyName')`\r\n\r\n10. `OrbitControls` and other controls that depend on DOM events will NOT work in the worker.\r\n    For camera interaction, read `viji.pointer` (handles both mouse and touch) and update the camera manually.\r\n\r\n11. For Three.js addons, import from the examples directory:\r\n    ```javascript\r\n    const { GLTFLoader } = await import('https://esm.sh/three@0.160.0/examples/jsm/loaders/GLTFLoader.js');\r\n    const { EffectComposer } = await import('https://esm.sh/three@0.160.0/examples/jsm/postprocessing/EffectComposer.js');\r\n    ```\r\n    ALWAYS use the same Three.js version for addons as for the main library.\r\n\r\n12. For textures from file inputs, use Viji's image parameters:\r\n    ```javascript\r\n    const photo = viji.image(null, { label: 'Texture' });\r\n    // In render():\r\n    if (photo.value && !texture) {\r\n      texture = new THREE.CanvasTexture(photo.value);\r\n      material.map = texture;\r\n      material.needsUpdate = true;\r\n    }\r\n    ```\r\n\r\n13. For video textures, use `viji.video`:\r\n    ```javascript\r\n    if (viji.video.isConnected && viji.video.currentFrame) {\r\n      if (!videoTexture) {\r\n        videoTexture = new THREE.CanvasTexture(viji.video.currentFrame);\r\n        material.map = videoTexture;\r\n      }\r\n      videoTexture.needsUpdate = true;\r\n    }\r\n    ```\r\n\r\n14. NEVER allocate new objects inside `render()`. Pre-create vectors, colors, and materials at the top level.\r\n\r\n15. ALWAYS set `category` on parameters that depend on an external input: `category: 'audio'` for audio, `category: 'video'` for video/CV, `category: 'interaction'` for mouse/keyboard/touch. This lets the host hide irrelevant controls when the input is inactive.\r\n\r\n16. Remove any `window.addEventListener('resize', ...)`: resize is handled in `render()` (see rule 4).\r\n\r\n17. Remove any CSS, HTML, or DOM manipulation code. Viji scenes produce only canvas output.\r\n\r\n## COMPLETE VIJI API REFERENCE\r\n\r\nThe `viji` object is identical across all renderers (same object, same types). The mapping table above covers the most common Three.js → Viji ports; the reference below is the full surface for any Viji-side feature the source code reaches for (audio analysis, video frames, CV data, touch, device sensors).\r\n\r\n### Canvas & Context\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `viji.canvas` | `OffscreenCanvas` | The canvas element (pass to Three.js renderer) |\r\n| `viji.useContext('2d')` | `OffscreenCanvasRenderingContext2D` | Get 2D context |\r\n| `viji.useContext('webgl')` | `WebGLRenderingContext` | Get WebGL 1 context |\r\n| `viji.useContext('webgl2')` | `WebGL2RenderingContext` | Get WebGL 2 context |\r\n| `viji.ctx` | `OffscreenCanvasRenderingContext2D` | Shortcut (after useContext('2d')) |\r\n| `viji.gl` | `WebGLRenderingContext` | Shortcut (after useContext('webgl')) |\r\n| `viji.width` | `number` | Current canvas width in pixels |\r\n| `viji.height` | `number` | Current canvas height in pixels |\r\n\r\nWhen using Three.js, do NOT call `viji.useContext()`: pass `viji.canvas` to the `THREE.WebGLRenderer({ canvas: viji.canvas })` and Three.js manages its own GL context.\r\n\r\n### Timing\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `viji.time` | `number` | Seconds since scene start |\r\n| `viji.deltaTime` | `number` | Seconds since last frame |\r\n| `viji.frameCount` | `number` | Total frames rendered |\r\n| `viji.fps` | `number` | Target frame rate (based on host frame-rate mode) |\r\n\r\n### Parameters\r\n\r\nDeclare at top level. Read `.value` inside `render()`. All support `{ label, description?, group?, category? }`.\r\nCategory values: `'audio'`, `'video'`, `'interaction'`, `'general'`.\r\n\r\n```javascript\r\nviji.slider(default, { min?, max?, step?, label, group?, category? })   // { value: number }\r\nviji.color(default, { label, group?, category? })                       // { value: '#rrggbb' }\r\nviji.toggle(default, { label, group?, category? })                      // { value: boolean }\r\nviji.select(default, { options: [...], label, group?, category? })      // { value: string|number }\r\nviji.number(default, { min?, max?, step?, label, group?, category? })   // { value: number }\r\nviji.text(default, { label, group?, category?, maxLength? })            // { value: string }\r\nviji.image(null, { label, group?, category? })                          // { value: ImageBitmap|null }\r\nviji.button({ label, description?, group?, category? })                 // { value: boolean } (true one frame)\r\n```\r\n\r\n- `viji.coordinate(defaultValue, config)`: 2D coordinate, `{ x: number, y: number }`, both -1 to 1. Config: `{ step?, label, description?, group?, category? }`\r\n\r\n### Audio: `viji.audio`\r\n\r\nALWAYS check `viji.audio.isConnected` first.\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `isConnected` | `boolean` | Whether audio source is active |\r\n| `volume.current` | `number` | RMS volume 0-1 |\r\n| `volume.peak` | `number` | Peak amplitude 0-1 |\r\n| `volume.smoothed` | `number` | Smoothed volume (200ms decay) |\r\n| `bands.low` | `number` | 20-120 Hz energy 0-1 |\r\n| `bands.lowMid` | `number` | 120-400 Hz energy 0-1 |\r\n| `bands.mid` | `number` | 400-1600 Hz energy 0-1 |\r\n| `bands.highMid` | `number` | 1600-6000 Hz energy 0-1 |\r\n| `bands.high` | `number` | 6000-16000 Hz energy 0-1 |\r\n| `bands.lowSmoothed` … `bands.highSmoothed` | `number` | Smoothed variants of each band |\r\n| `beat.kick` | `number` | Kick energy 0-1 |\r\n| `beat.snare` | `number` | Snare energy 0-1 |\r\n| `beat.hat` | `number` | Hi-hat energy 0-1 |\r\n| `beat.any` | `number` | Any beat energy 0-1 |\r\n| `beat.kickSmoothed` … `beat.anySmoothed` | `number` | Smoothed beat values |\r\n| `beat.triggers.kick` | `boolean` | True on kick frame |\r\n| `beat.triggers.snare` | `boolean` | True on snare frame |\r\n| `beat.triggers.hat` | `boolean` | True on hat frame |\r\n| `beat.triggers.any` | `boolean` | True on any beat frame |\r\n| `beat.events` | `Array<{type,time,strength}>` | Recent beat events |\r\n| `beat.bpm` | `number` | Estimated BPM (60-240) |\r\n| `beat.confidence` | `number` | BPM tracking confidence 0-1 |\r\n| `beat.isLocked` | `boolean` | True when BPM is locked |\r\n| `spectral.brightness` | `number` | Spectral centroid 0-1 |\r\n| `spectral.flatness` | `number` | Spectral flatness 0-1 |\r\n| `getFrequencyData()` | `Uint8Array` | Raw FFT bins (0-255) |\r\n| `getWaveform()` | `Float32Array` | Time-domain waveform (−1 to 1) |\r\n\r\n### Video: `viji.video`\r\n\r\nALWAYS check `viji.video.isConnected` first. Check `currentFrame` before drawing.\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `isConnected` | `boolean` | Whether video source is active |\r\n| `currentFrame` | `OffscreenCanvas\\|ImageBitmap\\|null` | Current video frame |\r\n| `frameWidth` | `number` | Frame width in pixels |\r\n| `frameHeight` | `number` | Frame height in pixels |\r\n| `frameRate` | `number` | Video frame rate |\r\n| `getFrameData()` | `ImageData\\|null` | Pixel data for CPU access |\r\n\r\nFor Three.js video textures, see rule 13.\r\n\r\n### Computer Vision: `viji.video.cv` & `viji.video.faces / hands / pose / segmentation`\r\n\r\nEnable features via toggle parameters (NEVER enable by default):\r\n\r\n```javascript\r\nawait viji.video.cv.enableFaceDetection(true/false);\r\nawait viji.video.cv.enableFaceMesh(true/false);\r\nawait viji.video.cv.enableEmotionDetection(true/false);\r\nawait viji.video.cv.enableHandTracking(true/false);\r\nawait viji.video.cv.enablePoseDetection(true/false);\r\nawait viji.video.cv.enableBodySegmentation(true/false);\r\nviji.video.cv.getActiveFeatures();  // CVFeature[]\r\nviji.video.cv.isProcessing();       // boolean\r\n```\r\n\r\n**`viji.video.faces: FaceData[]`**\r\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} in degrees), `blendshapes` (52 ARKit coefficients 0-1: 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).\r\n\r\n**`viji.video.hands: HandData[]`**\r\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).\r\n\r\n**`viji.video.pose: PoseData | null`**\r\n`confidence` (0-1), `landmarks` ({x,y,z,visibility}[], 33 points), plus body-part arrays: `face` ({x,y}[]), `torso`, `leftArm`, `rightArm`, `leftLeg`, `rightLeg`.\r\n\r\n**`viji.video.segmentation: SegmentationData | null`**\r\n`mask` (Uint8Array, 0=background 255=person), `width`, `height`.\r\n\r\n### Input: Pointer (unified mouse/touch): `viji.pointer`\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `x`, `y` | `number` | Position in pixels |\r\n| `deltaX`, `deltaY` | `number` | Movement since last frame |\r\n| `isDown` | `boolean` | True if pressed/touching |\r\n| `wasPressed` | `boolean` | True on press frame |\r\n| `wasReleased` | `boolean` | True on release frame |\r\n| `isInCanvas` | `boolean` | True if inside canvas |\r\n| `type` | `string` | `'mouse'`, `'touch'`, or `'none'` |\r\n\r\n### Input: Mouse: `viji.mouse`\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `x`, `y` | `number` | Position in pixels |\r\n| `isInCanvas` | `boolean` | Inside canvas bounds |\r\n| `isPressed` | `boolean` | Any button pressed |\r\n| `leftButton`, `rightButton`, `middleButton` | `boolean` | Specific buttons |\r\n| `deltaX`, `deltaY` | `number` | Movement delta |\r\n| `wheelDelta` | `number` | Scroll wheel delta |\r\n| `wheelX`, `wheelY` | `number` | Horizontal/vertical scroll |\r\n| `wasPressed`, `wasReleased`, `wasMoved` | `boolean` | Frame-edge events |\r\n\r\n### Input: Keyboard: `viji.keyboard`\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `isPressed(key)` | `boolean` | True while key is held |\r\n| `wasPressed(key)` | `boolean` | True on key-down frame |\r\n| `wasReleased(key)` | `boolean` | True on key-up frame |\r\n| `activeKeys` | `Set<string>` | Currently held keys |\r\n| `pressedThisFrame` | `Set<string>` | Keys pressed this frame |\r\n| `releasedThisFrame` | `Set<string>` | Keys released this frame |\r\n| `lastKeyPressed` | `string` | Most recent key-down |\r\n| `lastKeyReleased` | `string` | Most recent key-up |\r\n| `shift`, `ctrl`, `alt`, `meta` | `boolean` | Modifier states |\r\n\r\n### Input: Touch: `viji.touches`\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `count` | `number` | Active touch count |\r\n| `points` | `TouchPoint[]` | All active touches |\r\n| `started` | `TouchPoint[]` | Touches started this frame |\r\n| `moved` | `TouchPoint[]` | Touches moved this frame |\r\n| `ended` | `TouchPoint[]` | Touches ended this frame |\r\n| `primary` | `TouchPoint\\|null` | First active touch |\r\n\r\n**TouchPoint:** `id`, `x`, `y`, `pressure`, `radius`, `radiusX`, `radiusY`, `rotationAngle`, `force`, `isInCanvas`, `deltaX`, `deltaY`, `velocity` ({x,y}), `isNew`, `isActive`, `isEnding`.\r\n\r\n### Device Sensors: `viji.device`\r\n\r\n`viji.device.motion` (DeviceMotionData|null): `acceleration` ({x,y,z} m/s²), `accelerationIncludingGravity`, `rotationRate` ({alpha,beta,gamma} deg/s), `interval` (ms).\r\n`viji.device.orientation` (DeviceOrientationData|null): `alpha` (0-360° compass), `beta` (−180-180° tilt), `gamma` (−90-90° tilt), `absolute` (boolean).\r\n\r\n### External Devices: `viji.devices`\r\n\r\n`DeviceState[]`: connected external devices. Each entry: `id` (string), `name` (string), `motion` (DeviceMotionData|null), `orientation` (DeviceOrientationData|null), `video` (VideoAPI|null, same shape as `viji.video` but without CV), `audio` (AudioStreamAPI|null, lightweight subset of `viji.audio`: `isConnected`, `volume.{current,peak,smoothed}`, `bands.{low...high}` + each `*Smoothed`, `spectral.{brightness,flatness}`, `getFrequencyData()`, `getWaveform()`. **No** beat / BPM / triggers / events).\r\n\r\n### Streams: `viji.videoStreams` and `viji.audioStreams`\r\n\r\n`viji.videoStreams: VideoAPI[]` and `viji.audioStreams: AudioStreamAPI[]`: additional video/audio sources provided by the host application (used internally by Viji's compositor for scene mixing). May be empty. Audio streams use the AudioStreamAPI shape (no beat / BPM / triggers / events).\r\n\r\n## TEMPLATE\r\n\r\n```javascript\r\nconst THREE = await import('https://esm.sh/three@0.160.0');\r\n\r\nconst speed = viji.slider(1, { min: 0.1, max: 5, label: 'Speed' });\r\nconst color = viji.color('#049ef4', { label: 'Color' });\r\n\r\nconst scene = new THREE.Scene();\r\nconst camera = new THREE.PerspectiveCamera(60, viji.width / viji.height, 0.1, 100);\r\ncamera.position.set(0, 1, 3);\r\ncamera.lookAt(0, 0, 0);\r\n\r\nconst renderer = new THREE.WebGLRenderer({ canvas: viji.canvas, antialias: true });\r\nrenderer.setSize(viji.width, viji.height, false);\r\n\r\nconst geometry = new THREE.BoxGeometry();\r\nconst material = new THREE.MeshStandardMaterial({ color: color.value });\r\nconst mesh = new THREE.Mesh(geometry, material);\r\nscene.add(mesh);\r\n\r\nscene.add(new THREE.DirectionalLight(0xffffff, 1.5));\r\nscene.add(new THREE.AmbientLight(0x404040));\r\n\r\nlet prevWidth = viji.width;\r\nlet prevHeight = viji.height;\r\n\r\nfunction render(viji) {\r\n  mesh.rotation.y += speed.value * viji.deltaTime;\r\n  material.color.set(color.value);\r\n\r\n  if (viji.width !== prevWidth || viji.height !== prevHeight) {\r\n    renderer.setSize(viji.width, viji.height, false);\r\n    camera.aspect = viji.width / viji.height;\r\n    camera.updateProjectionMatrix();\r\n    prevWidth = viji.width;\r\n    prevHeight = viji.height;\r\n  }\r\n\r\n  renderer.render(scene, camera);\r\n}\r\n```\r\n\r\nNow convert the Three.js code I provide.\r\n\r\nIf the source is incomplete or uses a framework that needs to be unwrapped, ask one or two clarifying questions first (see YOUR BEHAVIOR above). Otherwise, proceed.\r\n\r\nWhen you produce the conversion:\r\n- Apply every rule above. The conversion-specific rules (1-17) cover the Three.js → Viji mappings most artists need; the **COMPLETE VIJI API REFERENCE** above lists the full Viji surface for any Viji-side feature the source code reaches for (audio, video, CV, touch, device sensors, parameters beyond the basics). For details not in this prompt, consult the **REFERENCE** links: the canonical companion generation prompt is `native-prompt` (in the `docs-api.js` bundle).\r\n- Output the Viji scene code in a single fenced code block.\r\n- After the code block, write a short summary of the key changes and flag anything you had to drop or simplify (controls, postprocessing, framework wrappers).\r\n- Invite the artist to ask for refinements.\r\n````\r\n\r\n## Usage\r\n\r\n1. Copy the entire prompt block above.\r\n2. Paste it into your AI assistant.\r\n3. After the prompt, paste the Three.js code you want to convert.\r\n4. The AI will return a Viji-compatible native scene.\r\n\r\n> [!NOTE]\r\n> This prompt handles standard Three.js scenes. If the original code uses a framework (React Three Fiber, Drei, etc.), you may need to manually extract the Three.js scene setup first.\r\n\r\n## Related\r\n\r\n- [External Libraries](/native/external-libraries): detailed guide for using Three.js and other libraries in Viji\r\n- [Prompt: Native Scenes](/ai-prompts/native-prompt): AI prompt for creating new native scenes from scratch\r\n- [Native Quick Start](/native/quickstart): your first Viji native scene"
+          "markdown": "# Convert: Three.js to Viji\r\n\r\nCopy the prompt below and paste it into your AI assistant along with the Three.js code you want to convert. The prompt contains all the rules the AI needs to produce a correct Viji native scene with Three.js.\r\n\r\n## The Prompt\r\n\r\n````\r\nYou are converting a standalone Three.js application into a Viji native scene.\r\nViji scenes run inside an OffscreenCanvas Web Worker. Apply every rule below exactly.\r\n\r\n## YOUR BEHAVIOR\r\n\r\n1. **Clarify when needed.** If the source code is incomplete (missing init or render loop), uses a framework on top of Three.js (React Three Fiber, Drei, Theatre.js), or relies on DOM elements outside the canvas, ask the artist for the missing pieces or for permission to drop the framework wrapper before generating code. If the code is plain Three.js and self-contained, skip clarification and proceed.\r\n2. **Convert.** Produce a complete, copy-pasteable Viji native scene that follows every rule in this prompt. Preserve the artist's visual intent, scene graph, and material setup; replace only the Viji-incompatible parts (window/document access, `requestAnimationFrame`, `THREE.Clock`, DOM event listeners).\r\n3. **Explain.** After the code block, give a short summary of the key changes you made (e.g., \"wrapped scene init in top-level code, moved per-frame logic into `render(viji)`, replaced `clock.getDelta()` with `viji.deltaTime`, replaced mouse listeners with `viji.pointer`\"). Flag any features you had to drop or simplify (e.g., `OrbitControls`, postprocessing that depends on DOM events).\r\n4. **Iterate.** Invite the artist to ask for refinements (\"add a slider for camera distance\", \"make the cube react to audio\", \"swap the material for a wireframe\").\r\n\r\n## REFERENCE (source of truth)\r\n\r\nThe resources below are AUTHORITATIVE. The rules and tables in this prompt focus on the most common Three.js → Viji mappings, but they do NOT cover the full Viji API surface. If anything ever conflicts, the linked files win.\r\n\r\n**If you have web/file access:**\r\n- REQUIRED before converting code: fetch and skim the Tier-1 resource. Use it to verify exact Viji API names, parameter types, and any Viji feature the source code may reach for (audio, video, CV, sensors, parameters).\r\n- ON DEMAND: fetch from the Tier-2 resource when the source uses a Viji-side feature this prompt does not map (advanced CV data structures, device sensors, full Viji examples) or when you need authoritative TypeScript signatures.\r\n\r\n**If you do NOT have web/file access:**\r\n- Use only the API surface explicitly named in this prompt and the standard Three.js API for direct ports.\r\n- Never invent Viji property or method names from memory.\r\n- If the source uses something not covered here, say so and ask the artist how they want it handled; do NOT fabricate a Viji equivalent.\r\n\r\n**Tier 1 (always consult when accessible):**\r\n- TypeScript API types (Viji JS surface, all renderers): https://unpkg.com/@viji-dev/core/dist/artist-global.d.ts\r\n\r\n**Tier 2 (consult when needed):**\r\n- Complete Viji docs (every page + every live example): https://unpkg.com/@viji-dev/core/dist/docs-api.js\r\n- Companion prompt for any Viji feature this conversion prompt does not cover (search for \"native-prompt\" in the docs above).\r\n\r\n**Last-resort lookup:** https://www.npmjs.com/package/@viji-dev/core\r\n\r\n## RULES\r\n\r\n1. ALWAYS import Three.js dynamically at the top level using `await import()`:\r\n   ```javascript\r\n   const THREE = await import('https://esm.sh/three@0.160.0');\r\n   ```\r\n   NEVER use `<script>` tags, `require()`, or static `import` statements.\r\n   ALWAYS pin the version number in the URL.\r\n\r\n2. ALWAYS use `viji.canvas` as the renderer's canvas:\r\n   ```javascript\r\n   const renderer = new THREE.WebGLRenderer({ canvas: viji.canvas, antialias: true });\r\n   renderer.setSize(viji.width, viji.height, false);\r\n   ```\r\n   ALWAYS pass `false` as the third argument to `setSize()`: this prevents Three.js from setting CSS styles, which would fail in the worker.\r\n\r\n3. NEVER use `requestAnimationFrame()`. Viji controls the render loop. Write all per-frame logic inside `function render(viji) { ... }` and call `renderer.render(scene, camera)` at the end.\r\n\r\n4. ALWAYS handle resize by checking `viji.width` / `viji.height` in `render()`:\r\n   ```javascript\r\n   let prevWidth = viji.width;\r\n   let prevHeight = viji.height;\r\n\r\n   function render(viji) {\r\n     if (viji.width !== prevWidth || viji.height !== prevHeight) {\r\n       renderer.setSize(viji.width, viji.height, false);\r\n       camera.aspect = viji.width / viji.height;\r\n       camera.updateProjectionMatrix();\r\n       prevWidth = viji.width;\r\n       prevHeight = viji.height;\r\n     }\r\n     renderer.render(scene, camera);\r\n   }\r\n   ```\r\n\r\n5. NEVER access `window`, `document`, `Image()`, or `localStorage`. `fetch()` IS available.\r\n\r\n6. NEVER use `window.innerWidth` / `window.innerHeight`. Use `viji.width` / `viji.height`.\r\n\r\n7. Replace hardcoded values with Viji parameters declared at the top level:\r\n   ```javascript\r\n   const speed = viji.slider(1, { min: 0.1, max: 5, label: 'Speed' });\r\n   const color = viji.color('#049ef4', { label: 'Color' });\r\n   ```\r\n   NEVER declare parameters inside `render()`.\r\n   ALWAYS read via `.value`: `speed.value`, `color.value`. Color parameters also expose `.rgb` (`{ r, g, b }` in 0..255) and `.hsb` (`{ h, s, b }`, h in 0..360, s/b in 0..100) — Three.js color objects can take `.rgb` directly, e.g. `material.color.setRGB(c.rgb.r/255, c.rgb.g/255, c.rgb.b/255)`, or just keep using `material.color.set(c.value)`.\r\n\r\n8. ALWAYS use `viji.deltaTime` for animation timing:\r\n   ```javascript\r\n   cube.rotation.y += speed.value * viji.deltaTime;\r\n   ```\r\n   NEVER use `clock.getDelta()` or `Date.now()`. Remove any `THREE.Clock` usage.\r\n   NEVER multiply `viji.time` by a parameter (`viji.time * speed.value`): it causes animation jumps when the parameter changes. Same for nested multiplications: never multiply an accumulator by another parameter; give each speed its own accumulator.\r\n\r\n9. Replace mouse/keyboard event listeners with Viji APIs:\r\n   - `event.clientX` → `viji.pointer.x` (works for both mouse and touch) or `viji.mouse.x`\r\n   - `event.clientY` → `viji.pointer.y` or `viji.mouse.y`\r\n   - Mouse buttons → `viji.mouse.leftButton`, `viji.mouse.rightButton`\r\n   - Key presses → `viji.keyboard.isPressed('keyName')`\r\n\r\n10. `OrbitControls` and other controls that depend on DOM events will NOT work in the worker.\r\n    For camera interaction, read `viji.pointer` (handles both mouse and touch) and update the camera manually.\r\n\r\n11. For Three.js addons, import from the examples directory:\r\n    ```javascript\r\n    const { GLTFLoader } = await import('https://esm.sh/three@0.160.0/examples/jsm/loaders/GLTFLoader.js');\r\n    const { EffectComposer } = await import('https://esm.sh/three@0.160.0/examples/jsm/postprocessing/EffectComposer.js');\r\n    ```\r\n    ALWAYS use the same Three.js version for addons as for the main library.\r\n\r\n12. For textures from file inputs, use Viji's image parameters:\r\n    ```javascript\r\n    const photo = viji.image(null, { label: 'Texture' });\r\n    // In render():\r\n    if (photo.value && !texture) {\r\n      texture = new THREE.CanvasTexture(photo.value);\r\n      material.map = texture;\r\n      material.needsUpdate = true;\r\n    }\r\n    ```\r\n\r\n13. For video textures, use `viji.video`:\r\n    ```javascript\r\n    if (viji.video.isConnected && viji.video.currentFrame) {\r\n      if (!videoTexture) {\r\n        videoTexture = new THREE.CanvasTexture(viji.video.currentFrame);\r\n        material.map = videoTexture;\r\n      }\r\n      videoTexture.needsUpdate = true;\r\n    }\r\n    ```\r\n\r\n14. NEVER allocate new objects inside `render()`. Pre-create vectors, colors, and materials at the top level.\r\n\r\n15. ALWAYS set `category` on parameters that depend on an external input: `category: 'audio'` for audio, `category: 'video'` for video/CV, `category: 'interaction'` for mouse/keyboard/touch. This lets the host hide irrelevant controls when the input is inactive.\r\n\r\n16. Remove any `window.addEventListener('resize', ...)`: resize is handled in `render()` (see rule 4).\r\n\r\n17. Remove any CSS, HTML, or DOM manipulation code. Viji scenes produce only canvas output.\r\n\r\n## COMPLETE VIJI API REFERENCE\r\n\r\nThe `viji` object is identical across all renderers (same object, same types). The mapping table above covers the most common Three.js → Viji ports; the reference below is the full surface for any Viji-side feature the source code reaches for (audio analysis, video frames, CV data, touch, device sensors).\r\n\r\n### Canvas & Context\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `viji.canvas` | `OffscreenCanvas` | The canvas element (pass to Three.js renderer) |\r\n| `viji.useContext('2d')` | `OffscreenCanvasRenderingContext2D` | Get 2D context |\r\n| `viji.useContext('webgl')` | `WebGLRenderingContext` | Get WebGL 1 context |\r\n| `viji.useContext('webgl2')` | `WebGL2RenderingContext` | Get WebGL 2 context |\r\n| `viji.ctx` | `OffscreenCanvasRenderingContext2D` | Shortcut (after useContext('2d')) |\r\n| `viji.gl` | `WebGLRenderingContext` | Shortcut (after useContext('webgl')) |\r\n| `viji.width` | `number` | Current canvas width in pixels |\r\n| `viji.height` | `number` | Current canvas height in pixels |\r\n\r\nWhen using Three.js, do NOT call `viji.useContext()`: pass `viji.canvas` to the `THREE.WebGLRenderer({ canvas: viji.canvas })` and Three.js manages its own GL context.\r\n\r\n### Timing\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `viji.time` | `number` | Seconds since scene start |\r\n| `viji.deltaTime` | `number` | Seconds since last frame |\r\n| `viji.frameCount` | `number` | Total frames rendered |\r\n| `viji.fps` | `number` | Target frame rate (based on host frame-rate mode) |\r\n\r\n### Parameters\r\n\r\nDeclare at top level. Read `.value` inside `render()`. All support `{ label, description?, group?, category? }`.\r\nCategory values: `'audio'`, `'video'`, `'interaction'`, `'general'`.\r\n\r\n```javascript\r\nviji.slider(default, { min?, max?, step?, label, group?, category? })   // { value: number }\r\nviji.color(default, { label, group?, category? })                       // { value: '#rrggbb', rgb: { r, g, b } in 0..255, hsb: { h: 0..360, s/b: 0..100 } }\r\nviji.toggle(default, { label, group?, category? })                      // { value: boolean }\r\nviji.select(default, { options: [...], label, group?, category? })      // { value: string|number }\r\nviji.number(default, { min?, max?, step?, label, group?, category? })   // { value: number }\r\nviji.text(default, { label, group?, category?, maxLength? })            // { value: string }\r\nviji.image(null, { label, group?, category? })                          // { value: ImageBitmap|null }\r\nviji.button({ label, description?, group?, category? })                 // { value: boolean } (true one frame)\r\nviji.coordinate(default, { step?, label, group?, category? })           // { value: { x, y } } (both -1 to 1)\r\n```\r\n\r\n### Audio: `viji.audio`\r\n\r\nALWAYS check `viji.audio.isConnected` first.\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `isConnected` | `boolean` | Whether audio source is active |\r\n| `volume.current` | `number` | RMS volume 0-1 |\r\n| `volume.peak` | `number` | Peak amplitude 0-1 |\r\n| `volume.smoothed` | `number` | Smoothed volume (200ms decay) |\r\n| `bands.low` | `number` | 20-120 Hz energy 0-1 |\r\n| `bands.lowMid` | `number` | 120-400 Hz energy 0-1 |\r\n| `bands.mid` | `number` | 400-1600 Hz energy 0-1 |\r\n| `bands.highMid` | `number` | 1600-6000 Hz energy 0-1 |\r\n| `bands.high` | `number` | 6000-16000 Hz energy 0-1 |\r\n| `bands.lowSmoothed` … `bands.highSmoothed` | `number` | Smoothed variants of each band |\r\n| `beat.kick` | `number` | Kick energy 0-1 |\r\n| `beat.snare` | `number` | Snare energy 0-1 |\r\n| `beat.hat` | `number` | Hi-hat energy 0-1 |\r\n| `beat.any` | `number` | Any beat energy 0-1 |\r\n| `beat.kickSmoothed` … `beat.anySmoothed` | `number` | Smoothed beat values |\r\n| `beat.triggers.kick` | `boolean` | True on kick frame |\r\n| `beat.triggers.snare` | `boolean` | True on snare frame |\r\n| `beat.triggers.hat` | `boolean` | True on hat frame |\r\n| `beat.triggers.any` | `boolean` | True on any beat frame |\r\n| `beat.events` | `Array<{type,time,strength}>` | Recent beat events |\r\n| `beat.bpm` | `number` | Estimated BPM (60-240) |\r\n| `beat.confidence` | `number` | BPM tracking confidence 0-1 |\r\n| `beat.isLocked` | `boolean` | True when BPM is locked |\r\n| `spectral.brightness` | `number` | Spectral centroid 0-1 |\r\n| `spectral.flatness` | `number` | Spectral flatness 0-1 |\r\n| `getFrequencyData()` | `Uint8Array` | Raw FFT bins (0-255) |\r\n| `getWaveform()` | `Float32Array` | Time-domain waveform (−1 to 1) |\r\n\r\n### Video: `viji.video`\r\n\r\nALWAYS check `viji.video.isConnected` first. Check `currentFrame` before drawing.\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `isConnected` | `boolean` | Whether video source is active |\r\n| `currentFrame` | `OffscreenCanvas\\|ImageBitmap\\|null` | Current video frame |\r\n| `frameWidth` | `number` | Frame width in pixels |\r\n| `frameHeight` | `number` | Frame height in pixels |\r\n| `frameRate` | `number` | Video frame rate |\r\n| `getFrameData()` | `ImageData\\|null` | Pixel data for CPU access |\r\n\r\nFor Three.js video textures, see rule 13.\r\n\r\n### Computer Vision: `viji.video.cv` & `viji.video.faces / hands / pose / segmentation`\r\n\r\nEnable features via toggle parameters (NEVER enable by default):\r\n\r\n```javascript\r\nawait viji.video.cv.enableFaceDetection(true/false);\r\nawait viji.video.cv.enableFaceMesh(true/false);\r\nawait viji.video.cv.enableEmotionDetection(true/false);\r\nawait viji.video.cv.enableHandTracking(true/false);\r\nawait viji.video.cv.enablePoseDetection(true/false);\r\nawait viji.video.cv.enableBodySegmentation(true/false);\r\nviji.video.cv.getActiveFeatures();  // CVFeature[]\r\nviji.video.cv.isProcessing();       // boolean\r\n```\r\n\r\n**`viji.video.faces: FaceData[]`**\r\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} in degrees), `blendshapes` (52 ARKit coefficients 0-1: 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).\r\n\r\n**`viji.video.hands: HandData[]`**\r\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).\r\n\r\n**`viji.video.pose: PoseData | null`**\r\n`confidence` (0-1), `landmarks` ({x,y,z,visibility}[], 33 points), plus body-part arrays: `face` ({x,y}[]), `torso`, `leftArm`, `rightArm`, `leftLeg`, `rightLeg`.\r\n\r\n**`viji.video.segmentation: SegmentationData | null`**\r\n`mask` (Uint8Array, 0=background 255=person), `width`, `height`.\r\n\r\n### Input: Pointer (unified mouse/touch): `viji.pointer`\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `x`, `y` | `number` | Position in pixels |\r\n| `deltaX`, `deltaY` | `number` | Movement since last frame |\r\n| `isDown` | `boolean` | True if pressed/touching |\r\n| `wasPressed` | `boolean` | True on press frame |\r\n| `wasReleased` | `boolean` | True on release frame |\r\n| `isInCanvas` | `boolean` | True if inside canvas |\r\n| `type` | `string` | `'mouse'`, `'touch'`, or `'none'` |\r\n\r\n### Input: Mouse: `viji.mouse`\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `x`, `y` | `number` | Position in pixels |\r\n| `isInCanvas` | `boolean` | Inside canvas bounds |\r\n| `isPressed` | `boolean` | Any button pressed |\r\n| `leftButton`, `rightButton`, `middleButton` | `boolean` | Specific buttons |\r\n| `deltaX`, `deltaY` | `number` | Movement delta |\r\n| `wheelDelta` | `number` | Scroll wheel delta |\r\n| `wheelX`, `wheelY` | `number` | Horizontal/vertical scroll |\r\n| `wasPressed`, `wasReleased`, `wasMoved` | `boolean` | Frame-edge events |\r\n\r\n### Input: Keyboard: `viji.keyboard`\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `isPressed(key)` | `boolean` | True while key is held |\r\n| `wasPressed(key)` | `boolean` | True on key-down frame |\r\n| `wasReleased(key)` | `boolean` | True on key-up frame |\r\n| `activeKeys` | `Set<string>` | Currently held keys |\r\n| `pressedThisFrame` | `Set<string>` | Keys pressed this frame |\r\n| `releasedThisFrame` | `Set<string>` | Keys released this frame |\r\n| `lastKeyPressed` | `string` | Most recent key-down |\r\n| `lastKeyReleased` | `string` | Most recent key-up |\r\n| `shift`, `ctrl`, `alt`, `meta` | `boolean` | Modifier states |\r\n\r\n### Input: Touch: `viji.touches`\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `count` | `number` | Active touch count |\r\n| `points` | `TouchPoint[]` | All active touches |\r\n| `started` | `TouchPoint[]` | Touches started this frame |\r\n| `moved` | `TouchPoint[]` | Touches moved this frame |\r\n| `ended` | `TouchPoint[]` | Touches ended this frame |\r\n| `primary` | `TouchPoint\\|null` | First active touch |\r\n\r\n**TouchPoint:** `id`, `x`, `y`, `pressure`, `radius`, `radiusX`, `radiusY`, `rotationAngle`, `force`, `isInCanvas`, `deltaX`, `deltaY`, `velocity` ({x,y}), `isNew`, `isActive`, `isEnding`.\r\n\r\n### Device Sensors: `viji.device`\r\n\r\n`viji.device.motion` (DeviceMotionData|null): `acceleration` ({x,y,z} m/s²), `accelerationIncludingGravity`, `rotationRate` ({alpha,beta,gamma} deg/s), `interval` (ms).\r\n`viji.device.orientation` (DeviceOrientationData|null): `alpha` (0-360° compass), `beta` (−180-180° tilt), `gamma` (−90-90° tilt), `absolute` (boolean).\r\n\r\n### External Devices: `viji.devices`\r\n\r\n`DeviceState[]`: connected external devices. Each entry: `id` (string), `name` (string), `motion` (DeviceMotionData|null), `orientation` (DeviceOrientationData|null), `video` (VideoAPI|null, same shape as `viji.video` but without CV), `audio` (AudioStreamAPI|null, lightweight subset of `viji.audio`: `isConnected`, `volume.{current,peak,smoothed}`, `bands.{low...high}` + each `*Smoothed`, `spectral.{brightness,flatness}`, `getFrequencyData()`, `getWaveform()`. **No** beat / BPM / triggers / events).\r\n\r\n### Streams: `viji.videoStreams` and `viji.audioStreams`\r\n\r\n`viji.videoStreams: VideoAPI[]` and `viji.audioStreams: AudioStreamAPI[]`: additional video/audio sources provided by the host application (used internally by Viji's compositor for scene mixing). May be empty. Audio streams use the AudioStreamAPI shape (no beat / BPM / triggers / events).\r\n\r\n## TEMPLATE\r\n\r\n```javascript\r\nconst THREE = await import('https://esm.sh/three@0.160.0');\r\n\r\nconst speed = viji.slider(1, { min: 0.1, max: 5, label: 'Speed' });\r\nconst color = viji.color('#049ef4', { label: 'Color' });\r\n\r\nconst scene = new THREE.Scene();\r\nconst camera = new THREE.PerspectiveCamera(60, viji.width / viji.height, 0.1, 100);\r\ncamera.position.set(0, 1, 3);\r\ncamera.lookAt(0, 0, 0);\r\n\r\nconst renderer = new THREE.WebGLRenderer({ canvas: viji.canvas, antialias: true });\r\nrenderer.setSize(viji.width, viji.height, false);\r\n\r\nconst geometry = new THREE.BoxGeometry();\r\nconst material = new THREE.MeshStandardMaterial({ color: color.value });\r\nconst mesh = new THREE.Mesh(geometry, material);\r\nscene.add(mesh);\r\n\r\nscene.add(new THREE.DirectionalLight(0xffffff, 1.5));\r\nscene.add(new THREE.AmbientLight(0x404040));\r\n\r\nlet prevWidth = viji.width;\r\nlet prevHeight = viji.height;\r\n\r\nfunction render(viji) {\r\n  mesh.rotation.y += speed.value * viji.deltaTime;\r\n  material.color.set(color.value);\r\n\r\n  if (viji.width !== prevWidth || viji.height !== prevHeight) {\r\n    renderer.setSize(viji.width, viji.height, false);\r\n    camera.aspect = viji.width / viji.height;\r\n    camera.updateProjectionMatrix();\r\n    prevWidth = viji.width;\r\n    prevHeight = viji.height;\r\n  }\r\n\r\n  renderer.render(scene, camera);\r\n}\r\n```\r\n\r\nNow convert the Three.js code I provide.\r\n\r\nIf the source is incomplete or uses a framework that needs to be unwrapped, ask one or two clarifying questions first (see YOUR BEHAVIOR above). Otherwise, proceed.\r\n\r\nWhen you produce the conversion:\r\n- Apply every rule above. The conversion-specific rules (1-17) cover the Three.js → Viji mappings most artists need; the **COMPLETE VIJI API REFERENCE** above lists the full Viji surface for any Viji-side feature the source code reaches for (audio, video, CV, touch, device sensors, parameters beyond the basics). For details not in this prompt, consult the **REFERENCE** links: the canonical companion generation prompt is `native-prompt` (in the `docs-api.js` bundle).\r\n- Output the Viji scene code in a single fenced code block.\r\n- After the code block, write a short summary of the key changes and flag anything you had to drop or simplify (controls, postprocessing, framework wrappers).\r\n- Invite the artist to ask for refinements.\r\n````\r\n\r\n## Usage\r\n\r\n1. Copy the entire prompt block above.\r\n2. Paste it into your AI assistant.\r\n3. After the prompt, paste the Three.js code you want to convert.\r\n4. The AI will return a Viji-compatible native scene.\r\n\r\n> [!NOTE]\r\n> This prompt handles standard Three.js scenes. If the original code uses a framework (React Three Fiber, Drei, etc.), you may need to manually extract the Three.js scene setup first.\r\n\r\n## Related\r\n\r\n- [External Libraries](/native/external-libraries): detailed guide for using Three.js and other libraries in Viji\r\n- [Prompt: Native Scenes](/ai-prompts/native-prompt): AI prompt for creating new native scenes from scratch\r\n- [Native Quick Start](/native/quickstart): your first Viji native scene"
         }
       ]
     },
@@ -1566,7 +1566,7 @@ 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 for the entire scene. A canvas only supports one context type, so 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) come through the Viji API. One exception: `fetch()` is available, so you can 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."
+          "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, so 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) come through the Viji API. One exception: `fetch()` is available, so you can 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#threejs) 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",
@@ -1659,7 +1659,7 @@ export const docsApi = {
       "content": [
         {
           "type": "text",
-          "markdown": "# API Reference\r\n\r\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.\r\n\r\nNew to Viji? Start with the [Quick Start](/native/quickstart) instead.\r\n\r\n## Entry Points\r\n\r\n```javascript\r\n// Top-level code runs once (initialization, parameters, state, imports)\r\nconst speed = viji.slider(1, { min: 0.1, max: 5, label: 'Speed' });\r\nlet angle = 0;\r\n\r\nfunction render(viji) {\r\n  // Called every frame: this is where you draw\r\n}\r\n```\r\n\r\nThere is no `setup()` function in native scenes. All initialization goes at the top level. Top-level `await` is supported for dynamic imports.\r\n\r\n## Canvas & Context\r\n\r\n| Member | Type | Description | Details |\r\n|--------|------|-------------|---------|\r\n| [`viji.canvas`](/native/canvas-context) | `OffscreenCanvas` | The rendering canvas | [Canvas & Context](/native/canvas-context) |\r\n| [`viji.ctx`](/native/canvas-context) | `OffscreenCanvasRenderingContext2D` | 2D context (after `useContext('2d')`) | [Canvas & Context](/native/canvas-context) |\r\n| [`viji.gl`](/native/canvas-context) | `WebGLRenderingContext \\| WebGL2RenderingContext` | WebGL context (after `useContext('webgl'\\|'webgl2')`) | [Canvas & Context](/native/canvas-context) |\r\n| [`viji.width`](/native/canvas-context) | `number` | Canvas width in pixels | [Canvas & Context](/native/canvas-context) |\r\n| [`viji.height`](/native/canvas-context) | `number` | Canvas height in pixels | [Canvas & Context](/native/canvas-context) |\r\n| [`viji.useContext(type)`](/native/canvas-context) | `Method` | Request a rendering context: `'2d'`, `'webgl'`, `'webgl2'` | [Canvas & Context](/native/canvas-context) |\r\n\r\n## Timing\r\n\r\n| Member | Type | Description | Details |\r\n|--------|------|-------------|---------|\r\n| [`viji.time`](/native/timing) | `number` | Seconds elapsed since the scene started | [Timing](/native/timing) |\r\n| [`viji.deltaTime`](/native/timing) | `number` | Seconds since the previous frame | [Timing](/native/timing) |\r\n| [`viji.frameCount`](/native/timing) | `number` | Monotonically increasing frame counter | [Timing](/native/timing) |\r\n| [`viji.fps`](/native/timing) | `number` | Target FPS based on the host's frame rate mode | [Timing](/native/timing) |\r\n\r\n## Parameters\r\n\r\nAll parameter methods are called at the top level of your scene file. Read `.value` inside `render()` to get the current value.\r\n\r\n| Method | Returns | `.value` Type | Details |\r\n|--------|---------|---------------|---------|\r\n| [`viji.slider(default, config)`](/native/parameters/slider) | `SliderParameter` | `number` | [Slider](/native/parameters/slider) |\r\n| [`viji.color(default, config)`](/native/parameters/color) | `ColorParameter` | `string` (hex) | [Color](/native/parameters/color) |\r\n| [`viji.toggle(default, config)`](/native/parameters/toggle) | `ToggleParameter` | `boolean` | [Toggle](/native/parameters/toggle) |\r\n| [`viji.select(default, config)`](/native/parameters/select) | `SelectParameter` | `string \\| number` | [Select](/native/parameters/select) |\r\n| [`viji.number(default, config)`](/native/parameters/number) | `NumberParameter` | `number` | [Number](/native/parameters/number) |\r\n| [`viji.text(default, config)`](/native/parameters/text) | `TextParameter` | `string` | [Text](/native/parameters/text) |\r\n| [`viji.image(null, config)`](/native/parameters/image) | `ImageParameter` | `ImageBitmap \\| null` | [Image](/native/parameters/image) |\r\n| [`viji.button(config)`](/native/parameters/button) | `ButtonParameter` | `boolean` (true for one frame) | [Button](/native/parameters/button) |\r\n| [`viji.coordinate(default, config)`](/native/parameters/coordinate) | `CoordinateParameter` | 2D coordinate pad: `{ x: number, y: number }`, both -1 to 1 | [Coordinate](/native/parameters/coordinate) |\r\n\r\nSee [Parameters Overview](/native/parameters) for the declaration pattern, [Grouping](/native/parameters/grouping) and [Categories](/native/parameters/categories) for organization.\r\n\r\n## Audio\r\n\r\n| Member | Type | Description | Details |\r\n|--------|------|-------------|---------|\r\n| [`viji.audio.isConnected`](/native/audio) | `boolean` | Whether an audio source is active | [Overview](/native/audio) |\r\n| [`viji.audio.volume.current`](/native/audio/volume) | `number` | Current RMS volume 0-1 | [Volume](/native/audio/volume) |\r\n| [`viji.audio.volume.peak`](/native/audio/volume) | `number` | Peak volume 0-1 | [Volume](/native/audio/volume) |\r\n| [`viji.audio.volume.smoothed`](/native/audio/volume) | `number` | Smoothed volume 0-1 | [Volume](/native/audio/volume) |\r\n| [`viji.audio.bands.low`](/native/audio/bands) | `number` | Low frequency band energy (20-120 Hz) | [Frequency Bands](/native/audio/bands) |\r\n| [`viji.audio.bands.lowMid`](/native/audio/bands) | `number` | Low-mid band energy (120-500 Hz) | [Frequency Bands](/native/audio/bands) |\r\n| [`viji.audio.bands.mid`](/native/audio/bands) | `number` | Mid band energy (500-2 kHz) | [Frequency Bands](/native/audio/bands) |\r\n| [`viji.audio.bands.highMid`](/native/audio/bands) | `number` | High-mid band energy (2-6 kHz) | [Frequency Bands](/native/audio/bands) |\r\n| [`viji.audio.bands.high`](/native/audio/bands) | `number` | High band energy (6-16 kHz) | [Frequency Bands](/native/audio/bands) |\r\n| [`viji.audio.bands.lowSmoothed`](/native/audio/bands) | `number` | Smoothed low band | [Frequency Bands](/native/audio/bands) |\r\n| [`viji.audio.bands.lowMidSmoothed`](/native/audio/bands) | `number` | Smoothed low-mid band | [Frequency Bands](/native/audio/bands) |\r\n| [`viji.audio.bands.midSmoothed`](/native/audio/bands) | `number` | Smoothed mid band | [Frequency Bands](/native/audio/bands) |\r\n| [`viji.audio.bands.highMidSmoothed`](/native/audio/bands) | `number` | Smoothed high-mid band | [Frequency Bands](/native/audio/bands) |\r\n| [`viji.audio.bands.highSmoothed`](/native/audio/bands) | `number` | Smoothed high band | [Frequency Bands](/native/audio/bands) |\r\n| [`viji.audio.beat.kick`](/native/audio/beat) | `number` | Kick beat energy | [Beat Detection](/native/audio/beat) |\r\n| [`viji.audio.beat.snare`](/native/audio/beat) | `number` | Snare beat energy | [Beat Detection](/native/audio/beat) |\r\n| [`viji.audio.beat.hat`](/native/audio/beat) | `number` | Hi-hat beat energy | [Beat Detection](/native/audio/beat) |\r\n| [`viji.audio.beat.any`](/native/audio/beat) | `number` | Combined beat energy | [Beat Detection](/native/audio/beat) |\r\n| [`viji.audio.beat.kickSmoothed`](/native/audio/beat) | `number` | Smoothed kick | [Beat Detection](/native/audio/beat) |\r\n| [`viji.audio.beat.snareSmoothed`](/native/audio/beat) | `number` | Smoothed snare | [Beat Detection](/native/audio/beat) |\r\n| [`viji.audio.beat.hatSmoothed`](/native/audio/beat) | `number` | Smoothed hi-hat | [Beat Detection](/native/audio/beat) |\r\n| [`viji.audio.beat.anySmoothed`](/native/audio/beat) | `number` | Smoothed combined | [Beat Detection](/native/audio/beat) |\r\n| [`viji.audio.beat.triggers.kick`](/native/audio/beat) | `boolean` | Kick trigger (true for one frame) | [Beat Detection](/native/audio/beat) |\r\n| [`viji.audio.beat.triggers.snare`](/native/audio/beat) | `boolean` | Snare trigger (true for one frame) | [Beat Detection](/native/audio/beat) |\r\n| [`viji.audio.beat.triggers.hat`](/native/audio/beat) | `boolean` | Hi-hat trigger (true for one frame) | [Beat Detection](/native/audio/beat) |\r\n| [`viji.audio.beat.triggers.any`](/native/audio/beat) | `boolean` | Any beat trigger (true for one frame) | [Beat Detection](/native/audio/beat) |\r\n| [`viji.audio.beat.events`](/native/audio/beat) | `Array<{ type, time, strength }>` | Beat events this frame | [Beat Detection](/native/audio/beat) |\r\n| [`viji.audio.beat.bpm`](/native/audio/beat) | `number` | Tracked BPM | [Beat Detection](/native/audio/beat) |\r\n| [`viji.audio.beat.confidence`](/native/audio/beat) | `number` | Beat-tracker confidence 0-1 | [Beat Detection](/native/audio/beat) |\r\n| [`viji.audio.beat.isLocked`](/native/audio/beat) | `boolean` | Whether beat tracking is locked | [Beat Detection](/native/audio/beat) |\r\n| [`viji.audio.spectral.brightness`](/native/audio/spectral) | `number` | Spectral brightness 0-1 | [Spectral Analysis](/native/audio/spectral) |\r\n| [`viji.audio.spectral.flatness`](/native/audio/spectral) | `number` | Spectral flatness 0-1 | [Spectral Analysis](/native/audio/spectral) |\r\n| [`viji.audio.getFrequencyData()`](/native/audio/frequency-data) | `() => Uint8Array` | Raw FFT frequency bins (0-255) | [Frequency Data](/native/audio/frequency-data) |\r\n| [`viji.audio.getWaveform()`](/native/audio/waveform) | `() => Float32Array` | Time-domain waveform (-1 to 1) | [Waveform](/native/audio/waveform) |\r\n\r\n## Video & CV\r\n\r\n| Member | Type | Description | Details |\r\n|--------|------|-------------|---------|\r\n| [`viji.video.isConnected`](/native/video) | `boolean` | Whether a video source is active | [Overview](/native/video) |\r\n| [`viji.video.currentFrame`](/native/video/basics) | `OffscreenCanvas \\| ImageBitmap \\| null` | Current video frame | [Video Basics](/native/video/basics) |\r\n| [`viji.video.frameWidth`](/native/video/basics) | `number` | Frame width in pixels | [Video Basics](/native/video/basics) |\r\n| [`viji.video.frameHeight`](/native/video/basics) | `number` | Frame height in pixels | [Video Basics](/native/video/basics) |\r\n| [`viji.video.frameRate`](/native/video/basics) | `number` | Video frame rate | [Video Basics](/native/video/basics) |\r\n| [`viji.video.getFrameData()`](/native/video/basics) | `() => ImageData \\| null` | Pixel data for the current frame | [Video Basics](/native/video/basics) |\r\n| [`viji.video.faces`](/native/video/face-detection) | `FaceData[]` | Detected faces | [Face Detection](/native/video/face-detection) |\r\n| [`viji.video.hands`](/native/video/hand-tracking) | `HandData[]` | Detected hands | [Hand Tracking](/native/video/hand-tracking) |\r\n| [`viji.video.pose`](/native/video/pose-detection) | `PoseData \\| null` | Detected body pose | [Pose Detection](/native/video/pose-detection) |\r\n| [`viji.video.segmentation`](/native/video/body-segmentation) | `SegmentationData \\| null` | Body segmentation mask | [Body Segmentation](/native/video/body-segmentation) |\r\n| [`viji.video.cv.enableFaceDetection(enabled)`](/native/video/face-detection) | `(boolean) => Promise<void>` | Enable/disable face detection | [Face Detection](/native/video/face-detection) |\r\n| [`viji.video.cv.enableFaceMesh(enabled)`](/native/video/face-mesh) | `(boolean) => Promise<void>` | Enable/disable face mesh | [Face Mesh](/native/video/face-mesh) |\r\n| [`viji.video.cv.enableEmotionDetection(enabled)`](/native/video/emotion-detection) | `(boolean) => Promise<void>` | Enable/disable emotion detection | [Emotion Detection](/native/video/emotion-detection) |\r\n| [`viji.video.cv.enableHandTracking(enabled)`](/native/video/hand-tracking) | `(boolean) => Promise<void>` | Enable/disable hand tracking | [Hand Tracking](/native/video/hand-tracking) |\r\n| [`viji.video.cv.enablePoseDetection(enabled)`](/native/video/pose-detection) | `(boolean) => Promise<void>` | Enable/disable pose detection | [Pose Detection](/native/video/pose-detection) |\r\n| [`viji.video.cv.enableBodySegmentation(enabled)`](/native/video/body-segmentation) | `(boolean) => Promise<void>` | Enable/disable body segmentation | [Body Segmentation](/native/video/body-segmentation) |\r\n| [`viji.video.cv.getActiveFeatures()`](/native/video) | `() => CVFeature[]` | List of active CV features | [Overview](/native/video) |\r\n| [`viji.video.cv.isProcessing()`](/native/video) | `() => boolean` | Whether CV is currently processing | [Overview](/native/video) |\r\n\r\n## Mouse\r\n\r\n| Member | Type | Description | Details |\r\n|--------|------|-------------|---------|\r\n| [`viji.mouse.x`](/native/mouse) | `number` | Cursor X position in pixels | [Mouse](/native/mouse) |\r\n| [`viji.mouse.y`](/native/mouse) | `number` | Cursor Y position in pixels | [Mouse](/native/mouse) |\r\n| [`viji.mouse.isInCanvas`](/native/mouse) | `boolean` | Whether cursor is inside the canvas | [Mouse](/native/mouse) |\r\n| [`viji.mouse.isPressed`](/native/mouse) | `boolean` | Whether any button is pressed | [Mouse](/native/mouse) |\r\n| [`viji.mouse.leftButton`](/native/mouse) | `boolean` | Left button state | [Mouse](/native/mouse) |\r\n| [`viji.mouse.rightButton`](/native/mouse) | `boolean` | Right button state | [Mouse](/native/mouse) |\r\n| [`viji.mouse.middleButton`](/native/mouse) | `boolean` | Middle button state | [Mouse](/native/mouse) |\r\n| [`viji.mouse.deltaX`](/native/mouse) | `number` | Horizontal movement since last frame | [Mouse](/native/mouse) |\r\n| [`viji.mouse.deltaY`](/native/mouse) | `number` | Vertical movement since last frame | [Mouse](/native/mouse) |\r\n| [`viji.mouse.wheelDelta`](/native/mouse) | `number` | Scroll wheel delta | [Mouse](/native/mouse) |\r\n| [`viji.mouse.wheelX`](/native/mouse) | `number` | Horizontal scroll delta | [Mouse](/native/mouse) |\r\n| [`viji.mouse.wheelY`](/native/mouse) | `number` | Vertical scroll delta | [Mouse](/native/mouse) |\r\n| [`viji.mouse.wasPressed`](/native/mouse) | `boolean` | True for one frame when pressed | [Mouse](/native/mouse) |\r\n| [`viji.mouse.wasReleased`](/native/mouse) | `boolean` | True for one frame when released | [Mouse](/native/mouse) |\r\n| [`viji.mouse.wasMoved`](/native/mouse) | `boolean` | True for one frame when moved | [Mouse](/native/mouse) |\r\n\r\n## Keyboard\r\n\r\n| Member | Type | Description | Details |\r\n|--------|------|-------------|---------|\r\n| [`viji.keyboard.isPressed(key)`](/native/keyboard) | `(string) => boolean` | Whether a key is currently held | [Keyboard](/native/keyboard) |\r\n| [`viji.keyboard.wasPressed(key)`](/native/keyboard) | `(string) => boolean` | True for one frame when pressed | [Keyboard](/native/keyboard) |\r\n| [`viji.keyboard.wasReleased(key)`](/native/keyboard) | `(string) => boolean` | True for one frame when released | [Keyboard](/native/keyboard) |\r\n| [`viji.keyboard.activeKeys`](/native/keyboard) | `Set<string>` | All currently held keys | [Keyboard](/native/keyboard) |\r\n| [`viji.keyboard.pressedThisFrame`](/native/keyboard) | `Set<string>` | Keys pressed this frame | [Keyboard](/native/keyboard) |\r\n| [`viji.keyboard.releasedThisFrame`](/native/keyboard) | `Set<string>` | Keys released this frame | [Keyboard](/native/keyboard) |\r\n| [`viji.keyboard.lastKeyPressed`](/native/keyboard) | `string` | Most recently pressed key | [Keyboard](/native/keyboard) |\r\n| [`viji.keyboard.lastKeyReleased`](/native/keyboard) | `string` | Most recently released key | [Keyboard](/native/keyboard) |\r\n| [`viji.keyboard.shift`](/native/keyboard) | `boolean` | Shift key state | [Keyboard](/native/keyboard) |\r\n| [`viji.keyboard.ctrl`](/native/keyboard) | `boolean` | Ctrl/Cmd key state | [Keyboard](/native/keyboard) |\r\n| [`viji.keyboard.alt`](/native/keyboard) | `boolean` | Alt/Option key state | [Keyboard](/native/keyboard) |\r\n| [`viji.keyboard.meta`](/native/keyboard) | `boolean` | Meta/Win key state | [Keyboard](/native/keyboard) |\r\n\r\n## Touch\r\n\r\n> **Note:** The property is `viji.touches` (plural), not `viji.touch`.\r\n\r\n| Member | Type | Description | Details |\r\n|--------|------|-------------|---------|\r\n| [`viji.touches.points`](/native/touch) | `TouchPoint[]` | All active touch points | [Touch](/native/touch) |\r\n| [`viji.touches.count`](/native/touch) | `number` | Number of active touches | [Touch](/native/touch) |\r\n| [`viji.touches.started`](/native/touch) | `TouchPoint[]` | Touch points that started this frame | [Touch](/native/touch) |\r\n| [`viji.touches.moved`](/native/touch) | `TouchPoint[]` | Touch points that moved this frame | [Touch](/native/touch) |\r\n| [`viji.touches.ended`](/native/touch) | `TouchPoint[]` | Touch points that ended this frame | [Touch](/native/touch) |\r\n| [`viji.touches.primary`](/native/touch) | `TouchPoint \\| null` | The first active touch point | [Touch](/native/touch) |\r\n\r\n**`TouchPoint` fields:** `id`, `x`, `y`, `pressure`, `radius`, `radiusX`, `radiusY`, `rotationAngle`, `force` (numbers); `isInCanvas`, `isNew`, `isActive`, `isEnding` (booleans); `deltaX`, `deltaY` (numbers); `velocity` `{ x, y }`.\r\n\r\n## Pointer (Unified)\r\n\r\n| Member | Type | Description | Details |\r\n|--------|------|-------------|---------|\r\n| [`viji.pointer.x`](/native/pointer) | `number` | Primary pointer X position | [Pointer](/native/pointer) |\r\n| [`viji.pointer.y`](/native/pointer) | `number` | Primary pointer Y position | [Pointer](/native/pointer) |\r\n| [`viji.pointer.deltaX`](/native/pointer) | `number` | Horizontal movement since last frame | [Pointer](/native/pointer) |\r\n| [`viji.pointer.deltaY`](/native/pointer) | `number` | Vertical movement since last frame | [Pointer](/native/pointer) |\r\n| [`viji.pointer.isDown`](/native/pointer) | `boolean` | Whether the pointer is active (click or touch) | [Pointer](/native/pointer) |\r\n| [`viji.pointer.wasPressed`](/native/pointer) | `boolean` | True for one frame when pressed | [Pointer](/native/pointer) |\r\n| [`viji.pointer.wasReleased`](/native/pointer) | `boolean` | True for one frame when released | [Pointer](/native/pointer) |\r\n| [`viji.pointer.isInCanvas`](/native/pointer) | `boolean` | Whether pointer is inside the canvas | [Pointer](/native/pointer) |\r\n| [`viji.pointer.type`](/native/pointer) | `'mouse' \\| 'touch' \\| 'none'` | Current input source | [Pointer](/native/pointer) |\r\n\r\n## Device Sensors\r\n\r\n| Member | Type | Description | Details |\r\n|--------|------|-------------|---------|\r\n| [`viji.device.motion`](/native/sensors) | `DeviceMotionData \\| null` | Accelerometer and gyroscope data | [Device Sensors](/native/sensors) |\r\n| [`viji.device.orientation`](/native/sensors) | `DeviceOrientationData \\| null` | Device orientation (alpha, beta, gamma) | [Device Sensors](/native/sensors) |\r\n\r\n**`DeviceMotionData`:** `acceleration` `{ x, y, z }`, `accelerationIncludingGravity` `{ x, y, z }`, `rotationRate` `{ alpha, beta, gamma }`, `interval`.\r\n\r\n**`DeviceOrientationData`:** `alpha`, `beta`, `gamma` (numbers or null), `absolute` (boolean).\r\n\r\n## External Devices\r\n\r\n| Member | Type | Description | Details |\r\n|--------|------|-------------|---------|\r\n| [`viji.devices`](/native/external-devices) | `DeviceState[]` | Connected external devices | [Overview](/native/external-devices) |\r\n| [`viji.devices[i].id`](/native/external-devices) | `string` | Unique device identifier | [Overview](/native/external-devices) |\r\n| [`viji.devices[i].name`](/native/external-devices) | `string` | User-friendly device name | [Overview](/native/external-devices) |\r\n| [`viji.devices[i].motion`](/native/external-devices/sensors) | `DeviceMotionData \\| null` | Device accelerometer/gyroscope | [Device Sensors](/native/external-devices/sensors) |\r\n| [`viji.devices[i].orientation`](/native/external-devices/sensors) | `DeviceOrientationData \\| null` | Device orientation | [Device Sensors](/native/external-devices/sensors) |\r\n| [`viji.devices[i].video`](/native/external-devices/video) | `VideoAPI \\| null` | Device camera video | [Device Video](/native/external-devices/video) |\r\n| [`viji.devices[i].audio`](/native/external-devices/audio) | `AudioStreamAPI \\| null` | Device audio stream | [Device Audio](/native/external-devices/audio) |\r\n\r\n## Streams\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `viji.videoStreams` | `VideoAPI[]` | Additional video streams provided by the host |\r\n| `viji.audioStreams` | `AudioStreamAPI[]` | Additional audio streams provided by the host |\r\n\r\nEach `videoStreams` element has the same shape as [`viji.video`](/native/video). Each `audioStreams` element provides lightweight audio analysis (volume, frequency bands, spectral features) but does **not** include beat detection or BPM tracking: see [`viji.audio`](/native/audio) for full analysis on the main stream.\r\n\r\nBoth arrays may be empty if the host does not provide additional streams. Audio streams from external devices appear on `device.audio`, not in `viji.audioStreams`.\r\n\r\n## Related\r\n\r\n- [Quick Start](/native/quickstart): getting started with the Native renderer\r\n- [Best Practices](/getting-started/best-practices): essential patterns for all renderers\r\n- [Common Mistakes](/getting-started/common-mistakes): pitfalls to avoid\r\n- [P5 API Reference](/p5/api-reference): the same API in the P5 renderer\r\n- [Shader API Reference](/shader/api-reference): built-in uniforms for shaders"
+          "markdown": "# API Reference\r\n\r\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.\r\n\r\nNew to Viji? Start with the [Quick Start](/native/quickstart) instead.\r\n\r\n## Entry Points\r\n\r\n```javascript\r\n// Top-level code runs once (initialization, parameters, state, imports)\r\nconst speed = viji.slider(1, { min: 0.1, max: 5, label: 'Speed' });\r\nlet angle = 0;\r\n\r\nfunction render(viji) {\r\n  // Called every frame: this is where you draw\r\n}\r\n```\r\n\r\nThere is no `setup()` function in native scenes. All initialization goes at the top level. Top-level `await` is supported for dynamic imports.\r\n\r\n## Canvas & Context\r\n\r\n| Member | Type | Description | Details |\r\n|--------|------|-------------|---------|\r\n| [`viji.canvas`](/native/canvas-context#the-canvas) | `OffscreenCanvas` | The rendering canvas | [Canvas & Context](/native/canvas-context) |\r\n| [`viji.ctx`](/native/canvas-context#2d-context) | `OffscreenCanvasRenderingContext2D` | 2D context (after `useContext('2d')`) | [Canvas & Context](/native/canvas-context) |\r\n| [`viji.gl`](/native/canvas-context#webgl-context) | `WebGLRenderingContext \\| WebGL2RenderingContext` | WebGL context (after `useContext('webgl'\\|'webgl2')`) | [Canvas & Context](/native/canvas-context) |\r\n| [`viji.width`](/native/canvas-context#dimension-properties) | `number` | Canvas width in pixels | [Canvas & Context](/native/canvas-context) |\r\n| [`viji.height`](/native/canvas-context#dimension-properties) | `number` | Canvas height in pixels | [Canvas & Context](/native/canvas-context) |\r\n| [`viji.useContext(type)`](/native/canvas-context#choosing-a-context) | `Method` | Request a rendering context: `'2d'`, `'webgl'`, `'webgl2'` | [Canvas & Context](/native/canvas-context) |\r\n\r\n## Timing\r\n\r\n| Member | Type | Description | Details |\r\n|--------|------|-------------|---------|\r\n| [`viji.time`](/native/timing#vijitime-absolute-time) | `number` | Seconds elapsed since the scene started | [Timing](/native/timing) |\r\n| [`viji.deltaTime`](/native/timing#vijideltatime-frame-delta) | `number` | Seconds since the previous frame | [Timing](/native/timing) |\r\n| [`viji.frameCount`](/native/timing#vijiframecount) | `number` | Monotonically increasing frame counter | [Timing](/native/timing) |\r\n| [`viji.fps`](/native/timing#vijifps-target-frame-rate) | `number` | Target FPS based on the host's frame rate mode | [Timing](/native/timing) |\r\n\r\n## Parameters\r\n\r\nAll parameter methods are called at the top level of your scene file. Read `.value` inside `render()` to get the current value.\r\n\r\n| Method | Returns | `.value` Type | Details |\r\n|--------|---------|---------------|---------|\r\n| [`viji.slider(default, config)`](/native/parameters/slider) | `SliderParameter` | `number` | [Slider](/native/parameters/slider) |\r\n| [`viji.color(default, config)`](/native/parameters/color) | `ColorParameter` | `string` (hex) | [Color](/native/parameters/color) |\r\n| [`viji.toggle(default, config)`](/native/parameters/toggle) | `ToggleParameter` | `boolean` | [Toggle](/native/parameters/toggle) |\r\n| [`viji.select(default, config)`](/native/parameters/select) | `SelectParameter` | `string \\| number` | [Select](/native/parameters/select) |\r\n| [`viji.number(default, config)`](/native/parameters/number) | `NumberParameter` | `number` | [Number](/native/parameters/number) |\r\n| [`viji.text(default, config)`](/native/parameters/text) | `TextParameter` | `string` | [Text](/native/parameters/text) |\r\n| [`viji.image(null, config)`](/native/parameters/image) | `ImageParameter` | `ImageBitmap \\| null` | [Image](/native/parameters/image) |\r\n| [`viji.button(config)`](/native/parameters/button) | `ButtonParameter` | `boolean` (true for one frame) | [Button](/native/parameters/button) |\r\n| [`viji.coordinate(default, config)`](/native/parameters/coordinate) | `CoordinateParameter` | 2D coordinate pad: `{ x: number, y: number }`, both -1 to 1 | [Coordinate](/native/parameters/coordinate) |\r\n\r\nSee [Parameters Overview](/native/parameters) for the declaration pattern, [Grouping](/native/parameters/grouping) and [Categories](/native/parameters/categories) for organization.\r\n\r\n## Audio\r\n\r\n| Member | Type | Description | Details |\r\n|--------|------|-------------|---------|\r\n| [`viji.audio.isConnected`](/native/audio) | `boolean` | Whether an audio source is active | [Overview](/native/audio) |\r\n| [`viji.audio.volume.current`](/native/audio/volume#property-reference) | `number` | Current RMS volume 0-1 | [Volume](/native/audio/volume) |\r\n| [`viji.audio.volume.peak`](/native/audio/volume#property-reference) | `number` | Peak volume 0-1 | [Volume](/native/audio/volume) |\r\n| [`viji.audio.volume.smoothed`](/native/audio/volume#property-reference) | `number` | Smoothed volume 0-1 | [Volume](/native/audio/volume) |\r\n| [`viji.audio.bands.low`](/native/audio/bands#instant-bands) | `number` | Low frequency band energy (20-120 Hz) | [Frequency Bands](/native/audio/bands) |\r\n| [`viji.audio.bands.lowMid`](/native/audio/bands#instant-bands) | `number` | Low-mid band energy (120-500 Hz) | [Frequency Bands](/native/audio/bands) |\r\n| [`viji.audio.bands.mid`](/native/audio/bands#instant-bands) | `number` | Mid band energy (500-2 kHz) | [Frequency Bands](/native/audio/bands) |\r\n| [`viji.audio.bands.highMid`](/native/audio/bands#instant-bands) | `number` | High-mid band energy (2-6 kHz) | [Frequency Bands](/native/audio/bands) |\r\n| [`viji.audio.bands.high`](/native/audio/bands#instant-bands) | `number` | High band energy (6-16 kHz) | [Frequency Bands](/native/audio/bands) |\r\n| [`viji.audio.bands.lowSmoothed`](/native/audio/bands#smoothed-bands) | `number` | Smoothed low band | [Frequency Bands](/native/audio/bands) |\r\n| [`viji.audio.bands.lowMidSmoothed`](/native/audio/bands#smoothed-bands) | `number` | Smoothed low-mid band | [Frequency Bands](/native/audio/bands) |\r\n| [`viji.audio.bands.midSmoothed`](/native/audio/bands#smoothed-bands) | `number` | Smoothed mid band | [Frequency Bands](/native/audio/bands) |\r\n| [`viji.audio.bands.highMidSmoothed`](/native/audio/bands#smoothed-bands) | `number` | Smoothed high-mid band | [Frequency Bands](/native/audio/bands) |\r\n| [`viji.audio.bands.highSmoothed`](/native/audio/bands#smoothed-bands) | `number` | Smoothed high band | [Frequency Bands](/native/audio/bands) |\r\n| [`viji.audio.beat.kick`](/native/audio/beat#energy-curves-fast-decay) | `number` | Kick beat energy | [Beat Detection](/native/audio/beat) |\r\n| [`viji.audio.beat.snare`](/native/audio/beat#energy-curves-fast-decay) | `number` | Snare beat energy | [Beat Detection](/native/audio/beat) |\r\n| [`viji.audio.beat.hat`](/native/audio/beat#energy-curves-fast-decay) | `number` | Hi-hat beat energy | [Beat Detection](/native/audio/beat) |\r\n| [`viji.audio.beat.any`](/native/audio/beat#energy-curves-fast-decay) | `number` | Combined beat energy | [Beat Detection](/native/audio/beat) |\r\n| [`viji.audio.beat.kickSmoothed`](/native/audio/beat#energy-curves-smoothed) | `number` | Smoothed kick | [Beat Detection](/native/audio/beat) |\r\n| [`viji.audio.beat.snareSmoothed`](/native/audio/beat#energy-curves-smoothed) | `number` | Smoothed snare | [Beat Detection](/native/audio/beat) |\r\n| [`viji.audio.beat.hatSmoothed`](/native/audio/beat#energy-curves-smoothed) | `number` | Smoothed hi-hat | [Beat Detection](/native/audio/beat) |\r\n| [`viji.audio.beat.anySmoothed`](/native/audio/beat#energy-curves-smoothed) | `number` | Smoothed combined | [Beat Detection](/native/audio/beat) |\r\n| [`viji.audio.beat.triggers.kick`](/native/audio/beat#triggers) | `boolean` | Kick trigger (true for one frame) | [Beat Detection](/native/audio/beat) |\r\n| [`viji.audio.beat.triggers.snare`](/native/audio/beat#triggers) | `boolean` | Snare trigger (true for one frame) | [Beat Detection](/native/audio/beat) |\r\n| [`viji.audio.beat.triggers.hat`](/native/audio/beat#triggers) | `boolean` | Hi-hat trigger (true for one frame) | [Beat Detection](/native/audio/beat) |\r\n| [`viji.audio.beat.triggers.any`](/native/audio/beat#triggers) | `boolean` | Any beat trigger (true for one frame) | [Beat Detection](/native/audio/beat) |\r\n| [`viji.audio.beat.events`](/native/audio/beat#events) | `Array<{ type, time, strength }>` | Beat events this frame | [Beat Detection](/native/audio/beat) |\r\n| [`viji.audio.beat.bpm`](/native/audio/beat#tempo) | `number` | Tracked BPM | [Beat Detection](/native/audio/beat) |\r\n| [`viji.audio.beat.confidence`](/native/audio/beat#tempo) | `number` | Beat-tracker confidence 0-1 | [Beat Detection](/native/audio/beat) |\r\n| [`viji.audio.beat.isLocked`](/native/audio/beat#tempo) | `boolean` | Whether beat tracking is locked | [Beat Detection](/native/audio/beat) |\r\n| [`viji.audio.spectral.brightness`](/native/audio/spectral#property-reference) | `number` | Spectral brightness 0-1 | [Spectral Analysis](/native/audio/spectral) |\r\n| [`viji.audio.spectral.flatness`](/native/audio/spectral#property-reference) | `number` | Spectral flatness 0-1 | [Spectral Analysis](/native/audio/spectral) |\r\n| [`viji.audio.getFrequencyData()`](/native/audio/frequency-data) | `() => Uint8Array` | Raw FFT frequency bins (0-255) | [Frequency Data](/native/audio/frequency-data) |\r\n| [`viji.audio.getWaveform()`](/native/audio/waveform) | `() => Float32Array` | Time-domain waveform (-1 to 1) | [Waveform](/native/audio/waveform) |\r\n\r\n## Video & CV\r\n\r\n| Member | Type | Description | Details |\r\n|--------|------|-------------|---------|\r\n| [`viji.video.isConnected`](/native/video) | `boolean` | Whether a video source is active | [Overview](/native/video) |\r\n| [`viji.video.currentFrame`](/native/video/basics) | `OffscreenCanvas \\| ImageBitmap \\| null` | Current video frame | [Video Basics](/native/video/basics) |\r\n| [`viji.video.frameWidth`](/native/video/basics) | `number` | Frame width in pixels | [Video Basics](/native/video/basics) |\r\n| [`viji.video.frameHeight`](/native/video/basics) | `number` | Frame height in pixels | [Video Basics](/native/video/basics) |\r\n| [`viji.video.frameRate`](/native/video/basics) | `number` | Video frame rate | [Video Basics](/native/video/basics) |\r\n| [`viji.video.getFrameData()`](/native/video/basics) | `() => ImageData \\| null` | Pixel data for the current frame | [Video Basics](/native/video/basics) |\r\n| [`viji.video.faces`](/native/video/face-detection) | `FaceData[]` | Detected faces | [Face Detection](/native/video/face-detection) |\r\n| [`viji.video.hands`](/native/video/hand-tracking) | `HandData[]` | Detected hands | [Hand Tracking](/native/video/hand-tracking) |\r\n| [`viji.video.pose`](/native/video/pose-detection) | `PoseData \\| null` | Detected body pose | [Pose Detection](/native/video/pose-detection) |\r\n| [`viji.video.segmentation`](/native/video/body-segmentation) | `SegmentationData \\| null` | Body segmentation mask | [Body Segmentation](/native/video/body-segmentation) |\r\n| [`viji.video.cv.enableFaceDetection(enabled)`](/native/video/face-detection) | `(boolean) => Promise<void>` | Enable/disable face detection | [Face Detection](/native/video/face-detection) |\r\n| [`viji.video.cv.enableFaceMesh(enabled)`](/native/video/face-mesh) | `(boolean) => Promise<void>` | Enable/disable face mesh | [Face Mesh](/native/video/face-mesh) |\r\n| [`viji.video.cv.enableEmotionDetection(enabled)`](/native/video/emotion-detection) | `(boolean) => Promise<void>` | Enable/disable emotion detection | [Emotion Detection](/native/video/emotion-detection) |\r\n| [`viji.video.cv.enableHandTracking(enabled)`](/native/video/hand-tracking) | `(boolean) => Promise<void>` | Enable/disable hand tracking | [Hand Tracking](/native/video/hand-tracking) |\r\n| [`viji.video.cv.enablePoseDetection(enabled)`](/native/video/pose-detection) | `(boolean) => Promise<void>` | Enable/disable pose detection | [Pose Detection](/native/video/pose-detection) |\r\n| [`viji.video.cv.enableBodySegmentation(enabled)`](/native/video/body-segmentation) | `(boolean) => Promise<void>` | Enable/disable body segmentation | [Body Segmentation](/native/video/body-segmentation) |\r\n| [`viji.video.cv.getActiveFeatures()`](/native/video) | `() => CVFeature[]` | List of active CV features | [Overview](/native/video) |\r\n| [`viji.video.cv.isProcessing()`](/native/video) | `() => boolean` | Whether CV is currently processing | [Overview](/native/video) |\r\n\r\n## Mouse\r\n\r\n| Member | Type | Description | Details |\r\n|--------|------|-------------|---------|\r\n| [`viji.mouse.x`](/native/mouse#position) | `number` | Cursor X position in pixels | [Mouse](/native/mouse) |\r\n| [`viji.mouse.y`](/native/mouse#position) | `number` | Cursor Y position in pixels | [Mouse](/native/mouse) |\r\n| [`viji.mouse.isInCanvas`](/native/mouse#position) | `boolean` | Whether cursor is inside the canvas | [Mouse](/native/mouse) |\r\n| [`viji.mouse.isPressed`](/native/mouse#buttons) | `boolean` | Whether any button is pressed | [Mouse](/native/mouse) |\r\n| [`viji.mouse.leftButton`](/native/mouse#buttons) | `boolean` | Left button state | [Mouse](/native/mouse) |\r\n| [`viji.mouse.rightButton`](/native/mouse#buttons) | `boolean` | Right button state | [Mouse](/native/mouse) |\r\n| [`viji.mouse.middleButton`](/native/mouse#buttons) | `boolean` | Middle button state | [Mouse](/native/mouse) |\r\n| [`viji.mouse.deltaX`](/native/mouse#movement) | `number` | Horizontal movement since last frame | [Mouse](/native/mouse) |\r\n| [`viji.mouse.deltaY`](/native/mouse#movement) | `number` | Vertical movement since last frame | [Mouse](/native/mouse) |\r\n| [`viji.mouse.wheelDelta`](/native/mouse#scroll-wheel) | `number` | Scroll wheel delta | [Mouse](/native/mouse) |\r\n| [`viji.mouse.wheelX`](/native/mouse#scroll-wheel) | `number` | Horizontal scroll delta | [Mouse](/native/mouse) |\r\n| [`viji.mouse.wheelY`](/native/mouse#scroll-wheel) | `number` | Vertical scroll delta | [Mouse](/native/mouse) |\r\n| [`viji.mouse.wasPressed`](/native/mouse#frame-events) | `boolean` | True for one frame when pressed | [Mouse](/native/mouse) |\r\n| [`viji.mouse.wasReleased`](/native/mouse#frame-events) | `boolean` | True for one frame when released | [Mouse](/native/mouse) |\r\n| [`viji.mouse.wasMoved`](/native/mouse#frame-events) | `boolean` | True for one frame when moved | [Mouse](/native/mouse) |\r\n\r\n## Keyboard\r\n\r\n| Member | Type | Description | Details |\r\n|--------|------|-------------|---------|\r\n| [`viji.keyboard.isPressed(key)`](/native/keyboard#methods) | `(string) => boolean` | Whether a key is currently held | [Keyboard](/native/keyboard) |\r\n| [`viji.keyboard.wasPressed(key)`](/native/keyboard#methods) | `(string) => boolean` | True for one frame when pressed | [Keyboard](/native/keyboard) |\r\n| [`viji.keyboard.wasReleased(key)`](/native/keyboard#methods) | `(string) => boolean` | True for one frame when released | [Keyboard](/native/keyboard) |\r\n| [`viji.keyboard.activeKeys`](/native/keyboard#properties) | `Set<string>` | All currently held keys | [Keyboard](/native/keyboard) |\r\n| [`viji.keyboard.pressedThisFrame`](/native/keyboard#properties) | `Set<string>` | Keys pressed this frame | [Keyboard](/native/keyboard) |\r\n| [`viji.keyboard.releasedThisFrame`](/native/keyboard#properties) | `Set<string>` | Keys released this frame | [Keyboard](/native/keyboard) |\r\n| [`viji.keyboard.lastKeyPressed`](/native/keyboard#properties) | `string` | Most recently pressed key | [Keyboard](/native/keyboard) |\r\n| [`viji.keyboard.lastKeyReleased`](/native/keyboard#properties) | `string` | Most recently released key | [Keyboard](/native/keyboard) |\r\n| [`viji.keyboard.shift`](/native/keyboard#modifier-keys) | `boolean` | Shift key state | [Keyboard](/native/keyboard) |\r\n| [`viji.keyboard.ctrl`](/native/keyboard#modifier-keys) | `boolean` | Ctrl/Cmd key state | [Keyboard](/native/keyboard) |\r\n| [`viji.keyboard.alt`](/native/keyboard#modifier-keys) | `boolean` | Alt/Option key state | [Keyboard](/native/keyboard) |\r\n| [`viji.keyboard.meta`](/native/keyboard#modifier-keys) | `boolean` | Meta/Win key state | [Keyboard](/native/keyboard) |\r\n\r\n## Touch\r\n\r\n> **Note:** The property is `viji.touches` (plural), not `viji.touch`.\r\n\r\n| Member | Type | Description | Details |\r\n|--------|------|-------------|---------|\r\n| [`viji.touches.points`](/native/touch#touchapi-vijitouches) | `TouchPoint[]` | All active touch points | [Touch](/native/touch) |\r\n| [`viji.touches.count`](/native/touch#touchapi-vijitouches) | `number` | Number of active touches | [Touch](/native/touch) |\r\n| [`viji.touches.started`](/native/touch#touchapi-vijitouches) | `TouchPoint[]` | Touch points that started this frame | [Touch](/native/touch) |\r\n| [`viji.touches.moved`](/native/touch#touchapi-vijitouches) | `TouchPoint[]` | Touch points that moved this frame | [Touch](/native/touch) |\r\n| [`viji.touches.ended`](/native/touch#touchapi-vijitouches) | `TouchPoint[]` | Touch points that ended this frame | [Touch](/native/touch) |\r\n| [`viji.touches.primary`](/native/touch#touchapi-vijitouches) | `TouchPoint \\| null` | The first active touch point | [Touch](/native/touch) |\r\n\r\n**`TouchPoint` fields:** `id`, `x`, `y`, `pressure`, `radius`, `radiusX`, `radiusY`, `rotationAngle`, `force` (numbers); `isInCanvas`, `isNew`, `isActive`, `isEnding` (booleans); `deltaX`, `deltaY` (numbers); `velocity` `{ x, y }`.\r\n\r\n## Pointer (Unified)\r\n\r\n| Member | Type | Description | Details |\r\n|--------|------|-------------|---------|\r\n| [`viji.pointer.x`](/native/pointer#api-reference) | `number` | Primary pointer X position | [Pointer](/native/pointer) |\r\n| [`viji.pointer.y`](/native/pointer#api-reference) | `number` | Primary pointer Y position | [Pointer](/native/pointer) |\r\n| [`viji.pointer.deltaX`](/native/pointer#api-reference) | `number` | Horizontal movement since last frame | [Pointer](/native/pointer) |\r\n| [`viji.pointer.deltaY`](/native/pointer#api-reference) | `number` | Vertical movement since last frame | [Pointer](/native/pointer) |\r\n| [`viji.pointer.isDown`](/native/pointer#api-reference) | `boolean` | Whether the pointer is active (click or touch) | [Pointer](/native/pointer) |\r\n| [`viji.pointer.wasPressed`](/native/pointer#api-reference) | `boolean` | True for one frame when pressed | [Pointer](/native/pointer) |\r\n| [`viji.pointer.wasReleased`](/native/pointer#api-reference) | `boolean` | True for one frame when released | [Pointer](/native/pointer) |\r\n| [`viji.pointer.isInCanvas`](/native/pointer#api-reference) | `boolean` | Whether pointer is inside the canvas | [Pointer](/native/pointer) |\r\n| [`viji.pointer.type`](/native/pointer#api-reference) | `'mouse' \\| 'touch' \\| 'none'` | Current input source | [Pointer](/native/pointer) |\r\n\r\n## Device Sensors\r\n\r\n| Member | Type | Description | Details |\r\n|--------|------|-------------|---------|\r\n| [`viji.device.motion`](/native/sensors#devicemotiondata-vijidevicemotion) | `DeviceMotionData \\| null` | Accelerometer and gyroscope data | [Device Sensors](/native/sensors) |\r\n| [`viji.device.orientation`](/native/sensors#deviceorientationdata-vijideviceorientation) | `DeviceOrientationData \\| null` | Device orientation (alpha, beta, gamma) | [Device Sensors](/native/sensors) |\r\n\r\n**`DeviceMotionData`:** `acceleration` `{ x, y, z }`, `accelerationIncludingGravity` `{ x, y, z }`, `rotationRate` `{ alpha, beta, gamma }`, `interval`.\r\n\r\n**`DeviceOrientationData`:** `alpha`, `beta`, `gamma` (numbers or null), `absolute` (boolean).\r\n\r\n## External Devices\r\n\r\n| Member | Type | Description | Details |\r\n|--------|------|-------------|---------|\r\n| [`viji.devices`](/native/external-devices#devicestate-vijidevicesi) | `DeviceState[]` | Connected external devices | [Overview](/native/external-devices) |\r\n| [`viji.devices[i].id`](/native/external-devices#devicestate-vijidevicesi) | `string` | Unique device identifier | [Overview](/native/external-devices) |\r\n| [`viji.devices[i].name`](/native/external-devices#devicestate-vijidevicesi) | `string` | User-friendly device name | [Overview](/native/external-devices) |\r\n| [`viji.devices[i].motion`](/native/external-devices/sensors#devicemotiondata-devicemotion) | `DeviceMotionData \\| null` | Device accelerometer/gyroscope | [Device Sensors](/native/external-devices/sensors) |\r\n| [`viji.devices[i].orientation`](/native/external-devices/sensors#deviceorientationdata-deviceorientation) | `DeviceOrientationData \\| null` | Device orientation | [Device Sensors](/native/external-devices/sensors) |\r\n| [`viji.devices[i].video`](/native/external-devices/video) | `VideoAPI \\| null` | Device camera video | [Device Video](/native/external-devices/video) |\r\n| [`viji.devices[i].audio`](/native/external-devices/audio) | `AudioStreamAPI \\| null` | Device audio stream | [Device Audio](/native/external-devices/audio) |\r\n\r\n## Streams\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `viji.videoStreams` | `VideoAPI[]` | Additional video streams provided by the host |\r\n| `viji.audioStreams` | `AudioStreamAPI[]` | Additional audio streams provided by the host |\r\n\r\nEach `videoStreams` element has the same shape as [`viji.video`](/native/video). Each `audioStreams` element provides lightweight audio analysis (volume, frequency bands, spectral features) but does **not** include beat detection or BPM tracking: see [`viji.audio`](/native/audio) for full analysis on the main stream.\r\n\r\nBoth arrays may be empty if the host does not provide additional streams. Audio streams from external devices appear on `device.audio`, not in `viji.audioStreams`.\r\n\r\n## Related\r\n\r\n- [Quick Start](/native/quickstart): getting started with the Native renderer\r\n- [Best Practices](/getting-started/best-practices): essential patterns for all renderers\r\n- [Common Mistakes](/getting-started/common-mistakes): pitfalls to avoid\r\n- [P5 API Reference](/p5/api-reference): the same API in the P5 renderer\r\n- [Shader API Reference](/shader/api-reference): built-in uniforms for shaders"
         }
       ]
     },
@@ -1941,7 +1941,7 @@ export const docsApi = {
       "content": [
         {
           "type": "text",
-          "markdown": "# Parameters\r\n\r\nParameters are the primary way to give users control over your scene. You define them at the top level of your code, and Viji renders corresponding UI controls (sliders, color pickers, toggles, etc.) in the host application. Read `.value` inside `render()` to get the current state. Values update in real time as users interact with the controls.\r\n\r\n## Parameter Types\r\n\r\n| Type | Function | Value | Use For |\r\n|---|---|---|---|\r\n| [Slider](slider/) | [`viji.slider(default, config)`](slider/) | `number` | Continuous numeric ranges (speed, size, opacity) |\r\n| [Number](number/) | [`viji.number(default, config)`](number/) | `number` | Precise numeric input (counts, thresholds) |\r\n| [Color](color/) | [`viji.color(default, config)`](color/) | `string` | Hex color values (`'#rrggbb'`) |\r\n| [Toggle](toggle/) | [`viji.toggle(default, config)`](toggle/) | `boolean` | On/off switches (enable audio, show trail) |\r\n| [Select](select/) | [`viji.select(default, config)`](select/) | `string \\| number` | Dropdown from predefined options (blend mode, shape type) |\r\n| [Text](text/) | [`viji.text(default, config)`](text/) | `string` | Free-form text input (titles, labels) |\r\n| [Image](image/) | [`viji.image(default, config)`](image/) | `ImageBitmap \\| null` | User-uploaded images and textures |\r\n| [Button](button/) | [`viji.button(config)`](button/) | `boolean` | Momentary trigger: true for 1 frame (resets, spawns) |\r\n| Coordinate | [`viji.coordinate(default, config)`](coordinate/) | `{ x: number, y: number }` | 2D coordinate pad control. Both axes range from -1 to 1. |\r\n\r\n## Basic Pattern\r\n\r\n```javascript\r\n// 1. Define at top level: runs once\r\nconst speed = viji.slider(1, { min: 0.1, max: 5, label: 'Speed' });\r\nconst color = viji.color('#ff6600', { label: 'Color' });\r\nconst mirror = viji.toggle(false, { label: 'Mirror' });\r\n\r\n// 2. Read .value in render(): updates in real-time\r\nfunction render(viji) {\r\n  const ctx = viji.useContext('2d');\r\n  ctx.fillStyle = color.value;\r\n  // speed.value, mirror.value, etc.\r\n}\r\n```\r\n\r\n> [!WARNING]\r\n> Parameters must be declared at the **top level** of your scene, never inside `render()`. They are registered once during initialization. Declaring 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## Common Config Keys\r\n\r\nAll parameter types share these optional configuration keys:\r\n\r\n| Key | Type | Default | Description |\r\n|---|---|---|---|\r\n| `label` | `string` | **(required)** | Display name shown in the parameter UI |\r\n| `description` | `string` |  | Tooltip or help text |\r\n| `group` | `string` | `'general'` | Group name for organizing parameters: see [Grouping](grouping/) |\r\n| `category` | `ParameterCategory` | `'general'` | Controls visibility based on active capabilities: see [Categories](categories/) |\r\n\r\n## Organization\r\n\r\nAs scenes grow, organize parameters into logical sections and control their visibility:\r\n\r\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.\r\n- **[Categories](categories/)**: Tag parameters as `'general'`, `'audio'`, `'video'`, or `'interaction'` to automatically show/hide them based on what inputs are currently active.\r\n\r\n## Related\r\n\r\n- [Slider](slider/): the most common parameter type\r\n- [Coordinate](coordinate/): 2D position control\r\n- [Grouping](grouping/): organizing parameters into named groups\r\n- [Categories](categories/): visibility based on capabilities\r\n- [P5 Parameters](/p5/parameters): same system in the P5 renderer\r\n- [Shader Parameters](/shader/parameters): comment-directive syntax for shaders\r\n- [Best Practices](/getting-started/best-practices): essential patterns for all renderers"
+          "markdown": "# Parameters\r\n\r\nParameters are the primary way to give users control over your scene. You define them at the top level of your code, and Viji renders corresponding UI controls (sliders, color pickers, toggles, etc.) in the host application. Read `.value` inside `render()` to get the current state. Values update in real time as users interact with the controls.\r\n\r\n## Parameter Types\r\n\r\n| Type | Function | Value | Use For |\r\n|---|---|---|---|\r\n| [Slider](slider/) | [`viji.slider(default, config)`](slider/) | `number` | Continuous numeric ranges (speed, size, opacity) |\r\n| [Number](number/) | [`viji.number(default, config)`](number/) | `number` | Precise numeric input (counts, thresholds) |\r\n| [Color](color/) | [`viji.color(default, config)`](color/) | `string` | Hex color values (`'#rrggbb'`) |\r\n| [Toggle](toggle/) | [`viji.toggle(default, config)`](toggle/) | `boolean` | On/off switches (enable audio, show trail) |\r\n| [Select](select/) | [`viji.select(default, config)`](select/) | `string \\| number` | Dropdown from predefined options (blend mode, shape type) |\r\n| [Text](text/) | [`viji.text(default, config)`](text/) | `string` | Free-form text input (titles, labels) |\r\n| [Image](image/) | [`viji.image(default, config)`](image/) | `ImageBitmap \\| null` | User-uploaded images and textures |\r\n| [Button](button/) | [`viji.button(config)`](button/) | `boolean` | Momentary trigger: true for 1 frame (resets, spawns) |\r\n| [Coordinate](coordinate/) | [`viji.coordinate(default, config)`](coordinate/) | `{ x: number, y: number }` | 2D coordinate pad. Both axes range from -1 to 1. |\r\n\r\n## Basic Pattern\r\n\r\n```javascript\r\n// 1. Define at top level: runs once\r\nconst speed = viji.slider(1, { min: 0.1, max: 5, label: 'Speed' });\r\nconst color = viji.color('#ff6600', { label: 'Color' });\r\nconst mirror = viji.toggle(false, { label: 'Mirror' });\r\n\r\n// 2. Read .value in render(): updates in real-time\r\nfunction render(viji) {\r\n  const ctx = viji.useContext('2d');\r\n  ctx.fillStyle = color.value;\r\n  // speed.value, mirror.value, etc.\r\n}\r\n```\r\n\r\n> [!WARNING]\r\n> Parameters must be declared at the **top level** of your scene, never inside `render()`. They are registered once during initialization. Declaring 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## Common Config Keys\r\n\r\nAll parameter types share these optional configuration keys:\r\n\r\n| Key | Type | Default | Description |\r\n|---|---|---|---|\r\n| `label` | `string` | **(required)** | Display name shown in the parameter UI |\r\n| `description` | `string` |  | Tooltip or help text |\r\n| `group` | `string` | `'general'` | Group name for organizing parameters: see [Grouping](grouping/) |\r\n| `category` | `ParameterCategory` | `'general'` | Controls visibility based on active capabilities: see [Categories](categories/) |\r\n\r\n## Organization\r\n\r\nAs scenes grow, organize parameters into logical sections and control their visibility:\r\n\r\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.\r\n- **[Categories](categories/)**: Tag parameters as `'general'`, `'audio'`, `'video'`, or `'interaction'` to automatically show/hide them based on what inputs are currently active.\r\n\r\n## Related\r\n\r\n- [Slider](slider/): the most common parameter type\r\n- [Coordinate](coordinate/): 2D position control\r\n- [Grouping](grouping/): organizing parameters into named groups\r\n- [Categories](categories/): visibility based on capabilities\r\n- [P5 Parameters](/p5/parameters): same system in the P5 renderer\r\n- [Shader Parameters](/shader/parameters): comment-directive syntax for shaders\r\n- [Best Practices](/getting-started/best-practices): essential patterns for all renderers"
         }
       ]
     },
@@ -1970,6 +1970,11 @@ export const docsApi = {
           "level": 2,
           "text": "Resolution-Agnostic Sizing"
         },
+        {
+          "id": "smooth-animation-speed",
+          "level": 2,
+          "text": "Smooth Animation Speed"
+        },
         {
           "id": "related",
           "level": 2,
@@ -1989,14 +1994,14 @@ export const docsApi = {
         },
         {
           "type": "text",
-          "markdown": "## Resolution-Agnostic Sizing\r\n\r\nWhen using a slider to control sizes or positions, always scale relative to [`viji.width`](../../canvas-context) and [`viji.height`](../../canvas-context) so the scene looks the same at any resolution. A slider value of `0` to `1` works well as a normalized proportion:\r\n\r\n```javascript\r\nconst size = viji.slider(0.15, {\r\n  min: 0.02,\r\n  max: 0.5,\r\n  step: 0.01,\r\n  label: 'Size',\r\n  group: 'shape'\r\n});\r\n\r\nfunction render(viji) {\r\n  const ctx = viji.useContext('2d');\r\n  const pixelSize = size.value * Math.min(viji.width, viji.height);\r\n  // pixelSize adapts automatically to any resolution\r\n}\r\n```\r\n\r\n## Related\r\n\r\n- [Color](../color/): color picker parameter\r\n- [Number](../number/): numeric input without a slider track\r\n- [Select](../select/): dropdown selection from predefined options\r\n- [Grouping](../grouping/): organizing parameters into named groups\r\n- [Categories](../categories/): controlling parameter visibility based on capabilities\r\n- [Shader Slider](/shader/parameters/slider): equivalent for the Shader renderer"
+          "markdown": "## Resolution-Agnostic Sizing\r\n\r\nWhen using a slider to control sizes or positions, always scale relative to [`viji.width`](../../canvas-context) and [`viji.height`](../../canvas-context) so the scene looks the same at any resolution. A slider value of `0` to `1` works well as a normalized proportion:\r\n\r\n```javascript\r\nconst size = viji.slider(0.15, {\r\n  min: 0.02,\r\n  max: 0.5,\r\n  step: 0.01,\r\n  label: 'Size',\r\n  group: 'shape'\r\n});\r\n\r\nfunction render(viji) {\r\n  const ctx = viji.useContext('2d');\r\n  const pixelSize = size.value * Math.min(viji.width, viji.height);\r\n  // pixelSize adapts automatically to any resolution\r\n}\r\n```\r\n\r\n## Smooth Animation Speed\r\n\r\nWhen a slider drives animation speed, **never** multiply `viji.time` by the slider value directly: changing the slider recalculates the entire phase history and causes a visible jump.\r\n\r\n```javascript\r\nconst wave = Math.sin(viji.time * speed.value); // jumps when speed changes\r\n```\r\n\r\nInstead, accumulate `speed × deltaTime` so the slider only affects future frames:\r\n\r\n```javascript\r\nconst speed = viji.slider(1, { min: 0.1, max: 5, label: 'Speed' });\r\nlet phase = 0;\r\n\r\nfunction render(viji) {\r\n  phase += speed.value * viji.deltaTime;\r\n  const wave = Math.sin(phase);\r\n}\r\n```\r\n\r\nSee [Accumulator Pattern](/getting-started/best-practices#accumulator-pattern-parameter-driven-speed) for the full rule and the nested-multiplication trap.\r\n\r\n## Related\r\n\r\n- [Color](../color/): color picker parameter\r\n- [Number](../number/): numeric input without a slider track\r\n- [Select](../select/): dropdown selection from predefined options\r\n- [Grouping](../grouping/): organizing parameters into named groups\r\n- [Categories](../categories/): controlling parameter visibility based on capabilities\r\n- [Shader Slider](/shader/parameters/slider): equivalent for the Shader renderer"
         }
       ]
     },
     "native-param-color": {
       "id": "native-param-color",
       "title": "native-param-color",
-      "description": "Create a color picker control that returns a hex color string.",
+      "description": "Create a color picker control with hex, RGB, and HSB accessors.",
       "headings": [
         {
           "id": "parameters",
@@ -2014,9 +2019,14 @@ export const docsApi = {
           "text": "Usage"
         },
         {
-          "id": "parsing-hex-values",
+          "id": "input-forms-for-defaultvalue",
+          "level": 2,
+          "text": "Input forms for defaultValue"
+        },
+        {
+          "id": "accessing-components",
           "level": 2,
-          "text": "Parsing Hex Values"
+          "text": "Accessing components"
         },
         {
           "id": "related",
@@ -2027,17 +2037,17 @@ export const docsApi = {
       "content": [
         {
           "type": "text",
-          "markdown": "# viji.color()\r\n\r\n```\r\ncolor(defaultValue: string, config: ColorConfig): ColorParameter\r\n```\r\n\r\nCreates a color picker parameter. The host renders it as a color swatch that opens a full color picker when clicked.\r\n\r\n## Parameters\r\n\r\n| Name | Type | Required | Default | Description |\r\n|------|------|----------|---------|-------------|\r\n| `defaultValue` | `string` | Yes |  | Initial hex color (e.g., `'#ff6600'`) |\r\n| `config.label` | `string` | Yes |  | Display name shown in the parameter UI |\r\n| `config.description` | `string` | No |  | Tooltip or help text |\r\n| `config.group` | `string` | No | `'general'` | Group name: see [Grouping](../grouping/) |\r\n| `config.category` | `ParameterCategory` | No | `'general'` | Visibility category: see [Categories](../categories/) |\r\n\r\n## Return Value\r\n\r\nReturns a `ColorParameter` object:\r\n\r\n| Property | Type | Description |\r\n|----------|------|-------------|\r\n| `value` | `string` | Current hex color (e.g., `'#ff6600'`). Updates in real-time. |\r\n| `label` | `string` | Display label |\r\n| `description` | `string \\| undefined` | Description text |\r\n| `group` | `string` | Group name |\r\n| `category` | `ParameterCategory` | Parameter category |\r\n\r\n## Usage\r\n\r\n```javascript\r\nconst bg = viji.color('#1a1a2e', { label: 'Background' });\r\nconst accent = viji.color('#ff6600', { label: 'Accent', group: 'colors' });\r\n\r\nfunction render(viji) {\r\n  const ctx = viji.useContext('2d');\r\n  ctx.fillStyle = bg.value;\r\n  ctx.fillRect(0, 0, viji.width, viji.height);\r\n\r\n  ctx.fillStyle = accent.value;\r\n  ctx.fillRect(viji.width * 0.1, viji.height * 0.1, viji.width * 0.8, viji.height * 0.8);\r\n}\r\n```\r\n\r\nThe `.value` is always a 6-digit hex string (`#rrggbb`). You can pass it directly to `ctx.fillStyle`, `ctx.strokeStyle`, `ctx.shadowColor`, or any Canvas 2D color property.\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."
+          "markdown": "# viji.color()\r\n\r\n```\r\ncolor(defaultValue: ColorInput, config: ColorConfig): ColorParameter\r\n```\r\n\r\nCreates a color picker parameter. The host renders it as a color swatch that opens a full color picker when clicked. The returned object exposes the live value as canonical hex plus auto-derived `.rgb` and `.hsb` accessors, so artist code never has to parse hex by hand.\r\n\r\n## Parameters\r\n\r\n| Name | Type | Required | Default | Description |\r\n|------|------|----------|---------|-------------|\r\n| `defaultValue` | `ColorInput` | Yes |  | Initial color. Accepts hex (3- or 6-digit), `{ r, g, b }` (0..255), `{ h, s, b }` (0..360 / 0..100), `'rgb(...)'` or `'hsl(...)'` strings. |\r\n| `config.label` | `string` | Yes |  | Display name shown in the parameter UI |\r\n| `config.description` | `string` | No |  | Tooltip or help text |\r\n| `config.group` | `string` | No | `'general'` | Group name: see [Grouping](../grouping/) |\r\n| `config.category` | `ParameterCategory` | No | `'general'` | Visibility category: see [Categories](../categories/) |\r\n\r\n## Return Value\r\n\r\nReturns a `ColorParameter` object:\r\n\r\n| Property | Type | Description |\r\n|----------|------|-------------|\r\n| `value` | `string` | Canonical lowercase hex `#rrggbb`. Updates in real-time. |\r\n| `rgb` | `{ r: number, g: number, b: number }` | Integer RGB components in `0..255`. Frozen, recomputed when `value` changes. |\r\n| `hsb` | `{ h: number, s: number, b: number }` | HSB components: `h` in `0..360`, `s` and `b` in `0..100`. Frozen, recomputed when `value` changes. |\r\n| `label` | `string` | Display label |\r\n| `description` | `string \\| undefined` | Description text |\r\n| `group` | `string` | Group name |\r\n| `category` | `ParameterCategory` | Parameter category |\r\n\r\n## Usage\r\n\r\n```javascript\r\nconst bg = viji.color('#1a1a2e', { label: 'Background' });\r\nconst accent = viji.color('#ff6600', { label: 'Accent', group: 'colors' });\r\n\r\nfunction render(viji) {\r\n  const ctx = viji.useContext('2d');\r\n  ctx.fillStyle = bg.value;\r\n  ctx.fillRect(0, 0, viji.width, viji.height);\r\n\r\n  ctx.fillStyle = accent.value;\r\n  ctx.fillRect(viji.width * 0.1, viji.height * 0.1, viji.width * 0.8, viji.height * 0.8);\r\n}\r\n```\r\n\r\nThe `.value` is always a 6-digit lowercase hex string (`#rrggbb`). You can pass it directly to `ctx.fillStyle`, `ctx.strokeStyle`, `ctx.shadowColor`, or any Canvas 2D color property.\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."
         },
         {
           "type": "live-example",
           "title": "Color Picker",
-          "sceneCode": "const bg = viji.color('#0f0f1a', { label: 'Background' });\r\nconst ring1 = viji.color('#ff4488', { label: 'Ring 1', group: 'colors' });\r\nconst ring2 = viji.color('#4488ff', { label: 'Ring 2', group: 'colors' });\r\nconst ring3 = viji.color('#44ff88', { label: 'Ring 3', group: 'colors' });\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  const cx = w / 2;\r\n  const cy = h / 2;\r\n  const unit = Math.min(w, h);\r\n\r\n  ctx.fillStyle = bg.value;\r\n  ctx.fillRect(0, 0, w, h);\r\n\r\n  const colors = [ring1.value, ring2.value, ring3.value];\r\n  for (let i = colors.length - 1; i >= 0; i--) {\r\n    const r = unit * (0.15 + i * 0.1);\r\n    const offset = Math.sin(viji.time * 2 + i * 1.2) * unit * 0.03;\r\n    ctx.beginPath();\r\n    ctx.arc(cx + offset, cy, r, 0, Math.PI * 2);\r\n    ctx.fillStyle = colors[i];\r\n    ctx.fill();\r\n  }\r\n}\r\n",
+          "sceneCode": "const ring1 = viji.color('#ff4488',                 { label: 'Ring 1 (hex)',     group: 'colors' });\r\nconst ring2 = viji.color({ r: 68, g: 136, b: 255 }, { label: 'Ring 2 (RGB obj)', group: 'colors' });\r\nconst ring3 = viji.color({ h: 145, s: 75, b: 100 }, { label: 'Ring 3 (HSB obj)', group: 'colors' });\r\nconst bg    = viji.color('#0f0f1a',                 { label: 'Background' });\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  const cx = w / 2;\r\n  const cy = h / 2;\r\n  const unit = Math.min(w, h);\r\n\r\n  ctx.fillStyle = bg.value;\r\n  ctx.fillRect(0, 0, w, h);\r\n\r\n  const rings = [ring1, ring2, ring3];\r\n  for (let i = rings.length - 1; i >= 0; i--) {\r\n    const ring = rings[i];\r\n    const r = unit * (0.15 + i * 0.1);\r\n    const offset = Math.sin(viji.time * 2 + i * 1.2) * unit * 0.03;\r\n\r\n    const { r: rr, g: gg, b: bb } = ring.rgb;\r\n    ctx.beginPath();\r\n    ctx.arc(cx + offset, cy, r * 1.25, 0, Math.PI * 2);\r\n    ctx.fillStyle = `rgba(${rr}, ${gg}, ${bb}, 0.18)`;\r\n    ctx.fill();\r\n\r\n    ctx.beginPath();\r\n    ctx.arc(cx + offset, cy, r, 0, Math.PI * 2);\r\n    ctx.fillStyle = ring.value;\r\n    ctx.fill();\r\n  }\r\n\r\n  const { h: hue, s: sat, b: bright } = ring1.hsb;\r\n  ctx.fillStyle = `hsl(${(hue + 180) % 360}, ${sat}%, ${bright * 0.5}%)`;\r\n  ctx.beginPath();\r\n  ctx.arc(cx, cy, unit * 0.06, 0, Math.PI * 2);\r\n  ctx.fill();\r\n}\r\n",
           "sceneFile": "color-basic.scene.js"
         },
         {
           "type": "text",
-          "markdown": "## Parsing Hex Values\r\n\r\nIf you need individual RGB components (e.g., for blending or alpha compositing):\r\n\r\n```javascript\r\nconst c = viji.color('#ff6600', { label: 'Color' });\r\n\r\nfunction hexToRGB(hex) {\r\n  const n = parseInt(hex.slice(1), 16);\r\n  return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };\r\n}\r\n\r\nfunction render(viji) {\r\n  const { r, g, b } = hexToRGB(c.value);\r\n  const ctx = viji.useContext('2d');\r\n  ctx.fillStyle = `rgba(${r}, ${g}, ${b}, 0.5)`;\r\n  // ...\r\n}\r\n```\r\n\r\n## Related\r\n\r\n- [Slider](../slider/): numeric slider parameter\r\n- [Toggle](../toggle/): boolean on/off parameter\r\n- [Grouping](../grouping/): organizing parameters into named groups\r\n- [Categories](../categories/): controlling parameter visibility\r\n- [Shader Color](/shader/parameters/color): equivalent for the Shader renderer"
+          "markdown": "## Input forms for `defaultValue`\r\n\r\nAll five forms are equivalent and produce the same canonical hex internally:\r\n\r\n```javascript\r\nviji.color('#ff6600',                       { label: 'A' });  // 6-digit hex\r\nviji.color('#f60',                          { label: 'B' });  // 3-digit hex (auto-expanded)\r\nviji.color({ r: 255, g: 102, b: 0 },        { label: 'C' });  // RGB object, 0..255\r\nviji.color({ h: 24, s: 100, b: 100 },       { label: 'D' });  // HSB object, 0..360 / 0..100\r\nviji.color('rgb(255, 102, 0)',              { label: 'E' });  // CSS rgb()\r\nviji.color('hsl(24, 100%, 50%)',            { label: 'F' });  // CSS hsl()\r\n```\r\n\r\nThe same forms are also accepted by `core.setParameter('myColor', ...)` from the host.\r\n\r\n## Accessing components\r\n\r\nBecause `.rgb` and `.hsb` are auto-derived, you never need to parse hex manually:\r\n\r\n```javascript\r\nconst c = viji.color('#ff6600', { label: 'Tint' });\r\n\r\nfunction render(viji) {\r\n  const ctx = viji.useContext('2d');\r\n\r\n  // RGB components in 0..255 — perfect for rgba() with custom alpha\r\n  const { r, g, b } = c.rgb;\r\n  ctx.fillStyle = `rgba(${r}, ${g}, ${b}, 0.5)`;\r\n  ctx.fillRect(0, 0, viji.width, viji.height);\r\n\r\n  // HSB components — useful for hue rotations or saturation effects\r\n  const { h, s, b: brightness } = c.hsb;\r\n  ctx.fillStyle = `hsl(${(h + 30) % 360}, ${s}%, ${brightness * 0.5}%)`;\r\n  ctx.fillRect(0, 0, viji.width / 2, viji.height);\r\n}\r\n```\r\n\r\n`c.value`, `c.rgb`, and `c.hsb` always reflect the current picker value; they\r\nupdate together whenever the user changes the color.\r\n\r\n## Related\r\n\r\n- [Slider](../slider/): numeric slider parameter\r\n- [Toggle](../toggle/): boolean on/off parameter\r\n- [Grouping](../grouping/): organizing parameters into named groups\r\n- [Categories](../categories/): controlling parameter visibility\r\n- [Shader Color](/shader/parameters/color): equivalent for the Shader renderer"
         }
       ]
     },
@@ -2090,7 +2100,7 @@ export const docsApi = {
         {
           "type": "live-example",
           "title": "Toggle Features",
-          "sceneCode": "const bg = viji.color('#0f0f1a', { label: 'Background' });\r\nconst dotColor = viji.color('#ff6644', { label: 'Dot Color' });\r\nconst showGrid = viji.toggle(true, { label: 'Show Grid' });\r\nconst animate = viji.toggle(true, { label: 'Animate' });\r\nconst count = viji.slider(8, { min: 2, max: 20, step: 1, label: 'Count' });\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  const unit = Math.min(w, h);\r\n\r\n  if (animate.value) {\r\n    angle += viji.deltaTime * 0.5;\r\n  }\r\n\r\n  ctx.fillStyle = bg.value;\r\n  ctx.fillRect(0, 0, w, h);\r\n\r\n  if (showGrid.value) {\r\n    ctx.strokeStyle = 'rgba(255,255,255,0.06)';\r\n    ctx.lineWidth = 1;\r\n    const step = unit / 10;\r\n    for (let x = step; x < w; x += step) {\r\n      ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, h); ctx.stroke();\r\n    }\r\n    for (let y = step; y < h; y += step) {\r\n      ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(w, y); ctx.stroke();\r\n    }\r\n  }\r\n\r\n  ctx.fillStyle = dotColor.value;\r\n  const r = unit * 0.02;\r\n  for (let i = 0; i < count.value; i++) {\r\n    const a = angle + (i / count.value) * Math.PI * 2;\r\n    const x = w / 2 + Math.cos(a) * unit * 0.3;\r\n    const y = h / 2 + Math.sin(a) * unit * 0.3;\r\n    ctx.beginPath();\r\n    ctx.arc(x, y, r, 0, Math.PI * 2);\r\n    ctx.fill();\r\n  }\r\n}\r\n",
+          "sceneCode": "const showGrid = viji.toggle(true, { label: 'Show Grid' });\r\nconst animate = viji.toggle(true, { label: 'Animate' });\r\nconst count = viji.slider(8, { min: 2, max: 20, step: 1, label: 'Count' });\r\nconst dotColor = viji.color('#ff6644', { label: 'Dot Color' });\r\nconst bg = viji.color('#0f0f1a', { label: 'Background' });\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  const unit = Math.min(w, h);\r\n\r\n  if (animate.value) {\r\n    angle += viji.deltaTime * 0.5;\r\n  }\r\n\r\n  ctx.fillStyle = bg.value;\r\n  ctx.fillRect(0, 0, w, h);\r\n\r\n  if (showGrid.value) {\r\n    ctx.strokeStyle = 'rgba(255,255,255,0.06)';\r\n    ctx.lineWidth = 1;\r\n    const step = unit / 10;\r\n    for (let x = step; x < w; x += step) {\r\n      ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, h); ctx.stroke();\r\n    }\r\n    for (let y = step; y < h; y += step) {\r\n      ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(w, y); ctx.stroke();\r\n    }\r\n  }\r\n\r\n  ctx.fillStyle = dotColor.value;\r\n  const r = unit * 0.02;\r\n  for (let i = 0; i < count.value; i++) {\r\n    const a = angle + (i / count.value) * Math.PI * 2;\r\n    const x = w / 2 + Math.cos(a) * unit * 0.3;\r\n    const y = h / 2 + Math.sin(a) * unit * 0.3;\r\n    ctx.beginPath();\r\n    ctx.arc(x, y, r, 0, Math.PI * 2);\r\n    ctx.fill();\r\n  }\r\n}\r\n",
           "sceneFile": "toggle-basic.scene.js"
         },
         {
@@ -2138,7 +2148,7 @@ export const docsApi = {
         {
           "type": "live-example",
           "title": "Shape Selector",
-          "sceneCode": "const bg = viji.color('#0f0f1a', { label: 'Background' });\r\nconst shapeColor = viji.color('#ff6644', { label: 'Shape Color' });\r\nconst shape = viji.select('circle', {\r\n  options: ['circle', 'square', 'triangle', 'star'],\r\n  label: 'Shape'\r\n});\r\nconst size = viji.slider(0.25, { min: 0.05, max: 0.45, step: 0.01, label: 'Size' });\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  const cx = w / 2;\r\n  const cy = h / 2;\r\n  const r = Math.min(w, h) * size.value;\r\n\r\n  ctx.fillStyle = bg.value;\r\n  ctx.fillRect(0, 0, w, h);\r\n\r\n  ctx.fillStyle = shapeColor.value;\r\n  ctx.beginPath();\r\n\r\n  switch (shape.value) {\r\n    case 'circle':\r\n      ctx.arc(cx, cy, r, 0, Math.PI * 2);\r\n      break;\r\n    case 'square':\r\n      ctx.rect(cx - r, cy - r, r * 2, r * 2);\r\n      break;\r\n    case 'triangle':\r\n      for (let i = 0; i < 3; i++) {\r\n        const a = (i / 3) * Math.PI * 2 - Math.PI / 2;\r\n        const method = i === 0 ? 'moveTo' : 'lineTo';\r\n        ctx[method](cx + Math.cos(a) * r, cy + Math.sin(a) * r);\r\n      }\r\n      ctx.closePath();\r\n      break;\r\n    case 'star':\r\n      for (let i = 0; i < 10; i++) {\r\n        const a = (i / 10) * Math.PI * 2 - Math.PI / 2;\r\n        const sr = i % 2 === 0 ? r : r * 0.5;\r\n        const method = i === 0 ? 'moveTo' : 'lineTo';\r\n        ctx[method](cx + Math.cos(a) * sr, cy + Math.sin(a) * sr);\r\n      }\r\n      ctx.closePath();\r\n      break;\r\n  }\r\n\r\n  ctx.fill();\r\n}\r\n",
+          "sceneCode": "const shape = viji.select('circle', {\r\n  options: ['circle', 'square', 'triangle', 'star'],\r\n  label: 'Shape'\r\n});\r\nconst size = viji.slider(0.25, { min: 0.05, max: 0.45, step: 0.01, label: 'Size' });\r\nconst shapeColor = viji.color('#ff6644', { label: 'Shape Color' });\r\nconst bg = viji.color('#0f0f1a', { label: 'Background' });\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  const cx = w / 2;\r\n  const cy = h / 2;\r\n  const r = Math.min(w, h) * size.value;\r\n\r\n  ctx.fillStyle = bg.value;\r\n  ctx.fillRect(0, 0, w, h);\r\n\r\n  ctx.fillStyle = shapeColor.value;\r\n  ctx.beginPath();\r\n\r\n  switch (shape.value) {\r\n    case 'circle':\r\n      ctx.arc(cx, cy, r, 0, Math.PI * 2);\r\n      break;\r\n    case 'square':\r\n      ctx.rect(cx - r, cy - r, r * 2, r * 2);\r\n      break;\r\n    case 'triangle':\r\n      for (let i = 0; i < 3; i++) {\r\n        const a = (i / 3) * Math.PI * 2 - Math.PI / 2;\r\n        const method = i === 0 ? 'moveTo' : 'lineTo';\r\n        ctx[method](cx + Math.cos(a) * r, cy + Math.sin(a) * r);\r\n      }\r\n      ctx.closePath();\r\n      break;\r\n    case 'star':\r\n      for (let i = 0; i < 10; i++) {\r\n        const a = (i / 10) * Math.PI * 2 - Math.PI / 2;\r\n        const sr = i % 2 === 0 ? r : r * 0.5;\r\n        const method = i === 0 ? 'moveTo' : 'lineTo';\r\n        ctx[method](cx + Math.cos(a) * sr, cy + Math.sin(a) * sr);\r\n      }\r\n      ctx.closePath();\r\n      break;\r\n  }\r\n\r\n  ctx.fill();\r\n}\r\n",
           "sceneFile": "select-basic.scene.js"
         },
         {
@@ -2177,6 +2187,11 @@ export const docsApi = {
           "level": 2,
           "text": "Resolution-Agnostic Sizing"
         },
+        {
+          "id": "smooth-animation-speed",
+          "level": 2,
+          "text": "Smooth Animation Speed"
+        },
         {
           "id": "related",
           "level": 2,
@@ -2191,12 +2206,12 @@ export const docsApi = {
         {
           "type": "live-example",
           "title": "Number Input",
-          "sceneCode": "const bg = viji.color('#0f0f1a', { label: 'Background' });\r\nconst dotColor = viji.color('#44ddff', { label: 'Dot Color' });\r\nconst count = viji.number(16, { min: 1, max: 64, step: 1, label: 'Dot Count' });\r\nconst layers = viji.number(3, { min: 1, max: 6, step: 1, label: 'Layers' });\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  const unit = Math.min(w, h);\r\n\r\n  ctx.fillStyle = bg.value;\r\n  ctx.fillRect(0, 0, w, h);\r\n\r\n  ctx.fillStyle = dotColor.value;\r\n  const r = unit * 0.012;\r\n\r\n  for (let layer = 0; layer < layers.value; layer++) {\r\n    const radius = unit * (0.1 + layer * 0.08);\r\n    const n = count.value;\r\n    for (let i = 0; i < n; i++) {\r\n      const a = (i / n) * Math.PI * 2 + viji.time * (0.5 + layer * 0.2);\r\n      const x = w / 2 + Math.cos(a) * radius;\r\n      const y = h / 2 + Math.sin(a) * radius;\r\n      ctx.beginPath();\r\n      ctx.arc(x, y, r, 0, Math.PI * 2);\r\n      ctx.fill();\r\n    }\r\n  }\r\n}\r\n",
+          "sceneCode": "const count = viji.number(16, { min: 1, max: 64, step: 1, label: 'Dot Count' });\r\nconst layers = viji.number(3, { min: 1, max: 6, step: 1, label: 'Layers' });\r\nconst dotColor = viji.color('#44ddff', { label: 'Dot Color' });\r\nconst bg = viji.color('#0f0f1a', { label: 'Background' });\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  const unit = Math.min(w, h);\r\n\r\n  ctx.fillStyle = bg.value;\r\n  ctx.fillRect(0, 0, w, h);\r\n\r\n  ctx.fillStyle = dotColor.value;\r\n  const r = unit * 0.012;\r\n\r\n  for (let layer = 0; layer < layers.value; layer++) {\r\n    const radius = unit * (0.1 + layer * 0.08);\r\n    const n = count.value;\r\n    for (let i = 0; i < n; i++) {\r\n      const a = (i / n) * Math.PI * 2 + viji.time * (0.5 + layer * 0.2);\r\n      const x = w / 2 + Math.cos(a) * radius;\r\n      const y = h / 2 + Math.sin(a) * radius;\r\n      ctx.beginPath();\r\n      ctx.arc(x, y, r, 0, Math.PI * 2);\r\n      ctx.fill();\r\n    }\r\n  }\r\n}\r\n",
           "sceneFile": "number-basic.scene.js"
         },
         {
           "type": "text",
-          "markdown": "## Number vs Slider\r\n\r\nBoth accept the same config options (`min`, `max`, `step`) and return the same shape. The difference is the host UI:\r\n\r\n| | Slider | Number |\r\n|--|--------|--------|\r\n| UI | Draggable track | Text input field |\r\n| Best for | Continuous ranges, visual tuning | Precise values, integer counts |\r\n| Interaction | Drag / click | Type / arrow keys |\r\n\r\nUse [`viji.slider()`](../slider/) when the artist needs to \"feel\" the value visually. Use `viji.number()` when exact entry matters.\r\n\r\n## Resolution-Agnostic Sizing\r\n\r\nWhen a number controls sizes or positions, normalize the value and scale relative to the canvas:\r\n\r\n```javascript\r\nconst gridCols = viji.number(8, { min: 2, max: 30, step: 1, label: 'Columns' });\r\n\r\nfunction render(viji) {\r\n  const cellW = viji.width / gridCols.value;\r\n  // ...\r\n}\r\n```\r\n\r\n## Related\r\n\r\n- [Slider](../slider/): numeric slider with a draggable track\r\n- [Select](../select/): dropdown for discrete choices\r\n- [Grouping](../grouping/): organizing parameters into named groups\r\n- [Categories](../categories/): controlling parameter visibility\r\n- [Shader Number](/shader/parameters/number): equivalent for the Shader renderer"
+          "markdown": "## Number vs Slider\r\n\r\nBoth accept the same config options (`min`, `max`, `step`) and return the same shape. The difference is the host UI:\r\n\r\n| | Slider | Number |\r\n|--|--------|--------|\r\n| UI | Draggable track | Text input field |\r\n| Best for | Continuous ranges, visual tuning | Precise values, integer counts |\r\n| Interaction | Drag / click | Type / arrow keys |\r\n\r\nUse [`viji.slider()`](../slider/) when the artist needs to \"feel\" the value visually. Use `viji.number()` when exact entry matters.\r\n\r\n## Resolution-Agnostic Sizing\r\n\r\nWhen a number controls sizes or positions, normalize the value and scale relative to the canvas:\r\n\r\n```javascript\r\nconst gridCols = viji.number(8, { min: 2, max: 30, step: 1, label: 'Columns' });\r\n\r\nfunction render(viji) {\r\n  const cellW = viji.width / gridCols.value;\r\n  // ...\r\n}\r\n```\r\n\r\n## Smooth Animation Speed\r\n\r\nWhen a number value drives animation speed, the same accumulator pattern applies: never multiply `viji.time` by the parameter directly, or the animation will jump when the value changes. See [Slider: Smooth Animation Speed](../slider/#smooth-animation-speed) for the wrong/right examples — the pattern is identical for `viji.number()`.\r\n\r\n## Related\r\n\r\n- [Slider](../slider/): numeric slider with a draggable track\r\n- [Select](../select/): dropdown for discrete choices\r\n- [Grouping](../grouping/): organizing parameters into named groups\r\n- [Categories](../categories/): controlling parameter visibility\r\n- [Shader Number](/shader/parameters/number): equivalent for the Shader renderer"
         }
       ]
     },
@@ -2234,7 +2249,7 @@ export const docsApi = {
         {
           "type": "live-example",
           "title": "Text Display",
-          "sceneCode": "const bg = viji.color('#0f0f1a', { label: 'Background' });\r\nconst textColor = viji.color('#ffffff', { label: 'Text Color' });\r\nconst message = viji.text('Viji', { label: 'Message', maxLength: 30 });\r\nconst fontSize = viji.slider(0.12, { min: 0.03, max: 0.3, step: 0.01, label: 'Font Size' });\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  const unit = Math.min(w, h);\r\n\r\n  ctx.fillStyle = bg.value;\r\n  ctx.fillRect(0, 0, w, h);\r\n\r\n  const size = unit * fontSize.value;\r\n  ctx.font = `bold ${size}px sans-serif`;\r\n  ctx.textAlign = 'center';\r\n  ctx.textBaseline = 'middle';\r\n\r\n  const wave = Math.sin(viji.time * 2) * unit * 0.02;\r\n  ctx.fillStyle = textColor.value;\r\n  ctx.fillText(message.value, w / 2, h / 2 + wave);\r\n}\r\n",
+          "sceneCode": "const message = viji.text('Viji', { label: 'Message', maxLength: 30 });\r\nconst fontSize = viji.slider(0.12, { min: 0.03, max: 0.3, step: 0.01, label: 'Font Size' });\r\nconst textColor = viji.color('#ffffff', { label: 'Text Color' });\r\nconst bg = viji.color('#0f0f1a', { label: 'Background' });\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  const unit = Math.min(w, h);\r\n\r\n  ctx.fillStyle = bg.value;\r\n  ctx.fillRect(0, 0, w, h);\r\n\r\n  const size = unit * fontSize.value;\r\n  ctx.font = `bold ${size}px sans-serif`;\r\n  ctx.textAlign = 'center';\r\n  ctx.textBaseline = 'middle';\r\n\r\n  const wave = Math.sin(viji.time * 2) * unit * 0.02;\r\n  ctx.fillStyle = textColor.value;\r\n  ctx.fillText(message.value, w / 2, h / 2 + wave);\r\n}\r\n",
           "sceneFile": "text-basic.scene.js"
         },
         {
@@ -2282,7 +2297,7 @@ export const docsApi = {
         {
           "type": "live-example",
           "title": "Image Upload",
-          "sceneCode": "const bg = viji.color('#0f0f1a', { label: 'Background' });\r\nconst tex = viji.image(null, { label: 'Image' });\r\nconst tint = viji.color('#ffffff', { label: 'Tint' });\r\nconst opacity = viji.slider(1, { min: 0, max: 1, step: 0.01, label: 'Opacity' });\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 = bg.value;\r\n  ctx.fillRect(0, 0, w, h);\r\n\r\n  if (tex.value) {\r\n    ctx.globalAlpha = opacity.value;\r\n    const imgAspect = tex.value.width / tex.value.height;\r\n    const canvasAspect = w / h;\r\n    let dw, dh;\r\n    if (imgAspect > canvasAspect) { dw = w; dh = w / imgAspect; }\r\n    else { dh = h; dw = h * imgAspect; }\r\n    ctx.drawImage(tex.value, (w - dw) / 2, (h - dh) / 2, dw, dh);\r\n    ctx.globalAlpha = 1;\r\n  } else {\r\n    ctx.fillStyle = 'rgba(255,255,255,0.15)';\r\n    ctx.font = `${Math.min(w, h) * 0.04}px sans-serif`;\r\n    ctx.textAlign = 'center';\r\n    ctx.textBaseline = 'middle';\r\n    ctx.fillText('Upload an image above', w / 2, h / 2);\r\n  }\r\n}\r\n",
+          "sceneCode": "const tex = viji.image(null, { label: 'Image' });\r\nconst opacity = viji.slider(1, { min: 0, max: 1, step: 0.01, label: 'Opacity' });\r\nconst tint = viji.color('#ffffff', { label: 'Tint' });\r\nconst bg = viji.color('#0f0f1a', { label: 'Background' });\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 = bg.value;\r\n  ctx.fillRect(0, 0, w, h);\r\n\r\n  if (tex.value) {\r\n    ctx.globalAlpha = opacity.value;\r\n    const imgAspect = tex.value.width / tex.value.height;\r\n    const canvasAspect = w / h;\r\n    let dw, dh;\r\n    if (imgAspect > canvasAspect) { dw = w; dh = w / imgAspect; }\r\n    else { dh = h; dw = h * imgAspect; }\r\n    const dx = (w - dw) / 2;\r\n    const dy = (h - dh) / 2;\r\n    ctx.drawImage(tex.value, dx, dy, dw, dh);\r\n    ctx.globalCompositeOperation = 'multiply';\r\n    ctx.fillStyle = tint.value;\r\n    ctx.fillRect(dx, dy, dw, dh);\r\n    ctx.globalCompositeOperation = 'source-over';\r\n    ctx.globalAlpha = 1;\r\n  } else {\r\n    ctx.fillStyle = 'rgba(255,255,255,0.15)';\r\n    ctx.font = `${Math.min(w, h) * 0.04}px sans-serif`;\r\n    ctx.textAlign = 'center';\r\n    ctx.textBaseline = 'middle';\r\n    ctx.fillText('Upload an image above', w / 2, h / 2);\r\n  }\r\n}\r\n",
           "sceneFile": "image-basic.scene.js"
         },
         {
@@ -2345,7 +2360,17 @@ export const docsApi = {
       "content": [
         {
           "type": "text",
-          "markdown": "# viji.button()\r\n\r\n```\r\nbutton(config: ButtonConfig): ButtonParameter\r\n```\r\n\r\nCreates a momentary button parameter. Unlike [`viji.toggle()`](../toggle/) which latches on/off, a button is `true` for exactly **one frame** when the user clicks it, then automatically resets to `false`. The host renders it as a clickable button.\r\n\r\n## Parameters\r\n\r\n| Name | Type | Required | Default | Description |\r\n|------|------|----------|---------|-------------|\r\n| `config.label` | `string` | Yes |  | Display name shown in the parameter UI |\r\n| `config.description` | `string` | No |  | Tooltip or help text |\r\n| `config.group` | `string` | No | `'general'` | Group name: see [Grouping](../grouping/) |\r\n| `config.category` | `ParameterCategory` | No | `'general'` | Visibility category: see [Categories](../categories/) |\r\n\r\n## Return Value\r\n\r\nReturns a `ButtonParameter` object:\r\n\r\n| Property | Type | Description |\r\n|----------|------|-------------|\r\n| `value` | `boolean` | `true` for the single frame after the user clicks, `false` otherwise. |\r\n| `label` | `string` | Display label |\r\n| `description` | `string \\| undefined` | Description text |\r\n| `group` | `string` | Group name |\r\n| `category` | `ParameterCategory` | Parameter category |\r\n\r\n## Usage\r\n\r\n```javascript\r\nconst reset = viji.button({ label: 'Reset' });\r\n\r\nlet rotation = 0;\r\n\r\nfunction render(viji) {\r\n  const ctx = viji.useContext('2d');\r\n\r\n  if (reset.value) {\r\n    rotation = 0;\r\n  }\r\n\r\n  rotation += viji.deltaTime;\r\n  // draw rotated shapes\r\n}\r\n```\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## How It Works\r\n\r\n1. The user clicks the button in the host UI.\r\n2. On the **next rendered frame**, `button.value` is `true`.\r\n3. After that frame completes, the value automatically resets to `false`.\r\n4. Subsequent frames see `false` until the user clicks again.\r\n\r\nThis makes buttons ideal for **one-shot actions** like resetting state, spawning particles, or triggering transitions.\r\n\r\n## Common Patterns\r\n\r\n### Resetting accumulated state\r\n\r\n```javascript\r\nconst resetPos = viji.button({ label: 'Reset Position' });\r\n\r\nlet posX = 0;\r\nlet posY = 0;\r\n\r\nfunction render(viji) {\r\n  if (resetPos.value) {\r\n    posX = 0;\r\n    posY = 0;\r\n  }\r\n\r\n  posX += viji.deltaTime * 50;\r\n  posY += Math.sin(viji.time) * viji.deltaTime * 30;\r\n  // draw at posX, posY\r\n}\r\n```\r\n\r\n### Spawning elements\r\n\r\n```javascript\r\nconst spawn = viji.button({ label: 'Spawn Particle' });\r\nconst particles = [];\r\n\r\nfunction render(viji) {\r\n  if (spawn.value) {\r\n    particles.push({ x: viji.width / 2, y: viji.height / 2, age: 0 });\r\n  }\r\n  // update and draw particles\r\n}\r\n```\r\n\r\n## Button vs Toggle\r\n\r\n| | [`viji.button()`](../button/) | [`viji.toggle()`](../toggle/) |\r\n|---|---|---|\r\n| Value | `true` for 1 frame, then `false` | Stays `true` or `false` until changed |\r\n| Default argument | None (always starts `false`) | Required (`true` or `false`) |\r\n| Use for | One-shot actions, resets, spawns | Persistent on/off switches |\r\n| Host UI | Clickable button | On/off switch |\r\n\r\n## Related\r\n\r\n- [Toggle](../toggle/): persistent boolean switch\r\n- [Slider](../slider/): numeric slider parameter\r\n- [Grouping](../grouping/): organizing parameters into named groups\r\n- [Categories](../categories/): controlling parameter visibility\r\n- [Shader Button](/shader/parameters/button): equivalent for the Shader renderer"
+          "markdown": "# viji.button()\r\n\r\n```\r\nbutton(config: ButtonConfig): ButtonParameter\r\n```\r\n\r\nCreates a momentary button parameter. Unlike [`viji.toggle()`](../toggle/) which latches on/off, a button is `true` for exactly **one frame** when the user clicks it, then automatically resets to `false`. The host renders it as a clickable button.\r\n\r\n## Parameters\r\n\r\n| Name | Type | Required | Default | Description |\r\n|------|------|----------|---------|-------------|\r\n| `config.label` | `string` | Yes |  | Display name shown in the parameter UI |\r\n| `config.description` | `string` | No |  | Tooltip or help text |\r\n| `config.group` | `string` | No | `'general'` | Group name: see [Grouping](../grouping/) |\r\n| `config.category` | `ParameterCategory` | No | `'general'` | Visibility category: see [Categories](../categories/) |\r\n\r\n## Return Value\r\n\r\nReturns a `ButtonParameter` object:\r\n\r\n| Property | Type | Description |\r\n|----------|------|-------------|\r\n| `value` | `boolean` | `true` for the single frame after the user clicks, `false` otherwise. |\r\n| `label` | `string` | Display label |\r\n| `description` | `string \\| undefined` | Description text |\r\n| `group` | `string` | Group name |\r\n| `category` | `ParameterCategory` | Parameter category |\r\n\r\n## Usage\r\n\r\n```javascript\r\nconst reset = viji.button({ label: 'Reset' });\r\n\r\nlet rotation = 0;\r\n\r\nfunction render(viji) {\r\n  const ctx = viji.useContext('2d');\r\n\r\n  if (reset.value) {\r\n    rotation = 0;\r\n  }\r\n\r\n  rotation += viji.deltaTime;\r\n  // draw rotated shapes\r\n}\r\n```\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."
+        },
+        {
+          "type": "live-example",
+          "title": "Spawn & Clear",
+          "sceneCode": "const spawn = viji.button({ label: 'Spawn Particle' });\nconst clear = viji.button({ label: 'Clear All' });\nconst speed = viji.slider(0.3, { min: 0.05, max: 1, step: 0.05, label: 'Drift Speed' });\nconst particleColor = viji.color('#ff6644', { label: 'Particle Color' });\nconst bg = viji.color('#0f0f1a', { label: 'Background' });\n\nconst particles = [];\nconst MAX_AGE = 4;\n\nfunction render(viji) {\n  const ctx = viji.useContext('2d');\n  const w = viji.width;\n  const h = viji.height;\n  const unit = Math.min(w, h);\n\n  if (clear.value) {\n    particles.length = 0;\n  }\n\n  if (spawn.value) {\n    const a = Math.random() * Math.PI * 2;\n    particles.push({\n      x: w / 2,\n      y: h / 2,\n      vx: Math.cos(a),\n      vy: Math.sin(a),\n      age: 0,\n    });\n  }\n\n  ctx.fillStyle = bg.value;\n  ctx.fillRect(0, 0, w, h);\n\n  ctx.fillStyle = particleColor.value;\n  for (let i = particles.length - 1; i >= 0; i--) {\n    const p = particles[i];\n    p.age += viji.deltaTime;\n    const alpha = 1 - p.age / MAX_AGE;\n    if (alpha <= 0) {\n      particles.splice(i, 1);\n      continue;\n    }\n    const dist = p.age * speed.value * unit * 0.5;\n    const x = p.x + p.vx * dist;\n    const y = p.y + p.vy * dist;\n    const r = unit * 0.025 * alpha;\n    ctx.globalAlpha = alpha;\n    ctx.beginPath();\n    ctx.arc(x, y, r, 0, Math.PI * 2);\n    ctx.fill();\n  }\n  ctx.globalAlpha = 1;\n\n  if (particles.length === 0) {\n    ctx.fillStyle = 'rgba(255,255,255,0.35)';\n    ctx.font = `${unit * 0.04}px sans-serif`;\n    ctx.textAlign = 'center';\n    ctx.textBaseline = 'middle';\n    ctx.fillText('Click \"Spawn Particle\" above', w / 2, h / 2);\n  }\n}\n",
+          "sceneFile": "button-basic.scene.js"
+        },
+        {
+          "type": "text",
+          "markdown": "## How It Works\r\n\r\n1. The user clicks the button in the host UI.\r\n2. On the **next rendered frame**, `button.value` is `true`.\r\n3. After that frame completes, the value automatically resets to `false`.\r\n4. Subsequent frames see `false` until the user clicks again.\r\n\r\nThis makes buttons ideal for **one-shot actions** like resetting state, spawning particles, or triggering transitions.\r\n\r\n## Common Patterns\r\n\r\n### Resetting accumulated state\r\n\r\n```javascript\r\nconst resetPos = viji.button({ label: 'Reset Position' });\r\n\r\nlet posX = 0;\r\nlet posY = 0;\r\n\r\nfunction render(viji) {\r\n  if (resetPos.value) {\r\n    posX = 0;\r\n    posY = 0;\r\n  }\r\n\r\n  posX += viji.deltaTime * 50;\r\n  posY += Math.sin(viji.time) * viji.deltaTime * 30;\r\n  // draw at posX, posY\r\n}\r\n```\r\n\r\n### Spawning elements\r\n\r\n```javascript\r\nconst spawn = viji.button({ label: 'Spawn Particle' });\r\nconst particles = [];\r\n\r\nfunction render(viji) {\r\n  if (spawn.value) {\r\n    particles.push({ x: viji.width / 2, y: viji.height / 2, age: 0 });\r\n  }\r\n  // update and draw particles\r\n}\r\n```\r\n\r\n## Button vs Toggle\r\n\r\n| | [`viji.button()`](../button/) | [`viji.toggle()`](../toggle/) |\r\n|---|---|---|\r\n| Value | `true` for 1 frame, then `false` | Stays `true` or `false` until changed |\r\n| Default argument | None (always starts `false`) | Required (`true` or `false`) |\r\n| Use for | One-shot actions, resets, spawns | Persistent on/off switches |\r\n| Host UI | Clickable button | On/off switch |\r\n\r\n## Related\r\n\r\n- [Toggle](../toggle/): persistent boolean switch\r\n- [Slider](../slider/): numeric slider parameter\r\n- [Grouping](../grouping/): organizing parameters into named groups\r\n- [Categories](../categories/): controlling parameter visibility\r\n- [Shader Button](/shader/parameters/button): equivalent for the Shader renderer"
         }
       ]
     },
@@ -3414,7 +3439,7 @@ export const docsApi = {
       "content": [
         {
           "type": "text",
-          "markdown": "# Pointer (Unified Input)\r\n\r\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.**\r\n\r\n## Why Use Pointer?\r\n\r\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.\r\n\r\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.\r\n\r\n## API Reference\r\n\r\n| Property | Type | Description |\r\n|----------|------|-------------|\r\n| `x` | `number` | Canvas-space X position (pixels) |\r\n| `y` | `number` | Canvas-space Y position (pixels) |\r\n| `deltaX` | `number` | Horizontal movement since last frame (pixels) |\r\n| `deltaY` | `number` | Vertical movement since last frame (pixels) |\r\n| `isDown` | `boolean` | `true` if left mouse button is held or a touch is active |\r\n| `wasPressed` | `boolean` | `true` for exactly one frame when input becomes active, then resets |\r\n| `wasReleased` | `boolean` | `true` for exactly one frame when input is released, then resets |\r\n| `isInCanvas` | `boolean` | `true` if the input position is within the canvas bounds |\r\n| `type` | `'mouse' \\| 'touch' \\| 'none'` | Which input device is currently active |\r\n\r\n## Coordinate System\r\n\r\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.\r\n\r\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.\r\n\r\n## How It Works\r\n\r\nWhen a touch is active, the pointer follows the primary touch point. Otherwise, it follows the mouse. This switching happens automatically each frame.\r\n\r\n- **When a touch is active** (`viji.touches.count > 0`): pointer tracks the primary touch. `isDown` is always `true`, `type` is `'touch'`.\r\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.\r\n\r\n`wasPressed` and `wasReleased` reflect frame-to-frame transitions of `isDown`: each is `true` for exactly one frame, then automatically resets.\r\n\r\n## Basic Example"
+          "markdown": "# Pointer (Unified Input)\r\n\r\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.**\r\n\r\n## Why Use Pointer?\r\n\r\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.\r\n\r\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.\r\n\r\n## API Reference\r\n\r\n| Property | Type | Description |\r\n|----------|------|-------------|\r\n| `x` | `number` | Canvas-space X position (pixels) |\r\n| `y` | `number` | Canvas-space Y position (pixels) |\r\n| `deltaX` | `number` | Horizontal movement since last frame (pixels) |\r\n| `deltaY` | `number` | Vertical movement since last frame (pixels) |\r\n| `isDown` | `boolean` | `true` if left mouse button is held or a touch is active |\r\n| `wasPressed` | `boolean` | `true` for exactly one frame when input becomes active, then resets |\r\n| `wasReleased` | `boolean` | `true` for exactly one frame when input is released, then resets |\r\n| `isInCanvas` | `boolean` | `true` if the input position is within the canvas bounds |\r\n| `type` | `'mouse' \\| 'touch' \\| 'none'` | Which input device is currently active |\r\n\r\n## Coordinate System\r\n\r\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#dimension-properties) horizontally and `0` to [`viji.height`](/native/canvas-context#dimension-properties) vertically.\r\n\r\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.\r\n\r\n## How It Works\r\n\r\nWhen a touch is active, the pointer follows the primary touch point. Otherwise, it follows the mouse. This switching happens automatically each frame.\r\n\r\n- **When a touch is active** (`viji.touches.count > 0`): pointer tracks the primary touch. `isDown` is always `true`, `type` is `'touch'`.\r\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.\r\n\r\n`wasPressed` and `wasReleased` reflect frame-to-frame transitions of `isDown`: each is `true` for exactly one frame, then automatically resets.\r\n\r\n## Basic Example"
         },
         {
           "type": "live-example",
@@ -4203,7 +4228,7 @@ export const docsApi = {
       "content": [
         {
           "type": "text",
-          "markdown": "# API Reference\r\n\r\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.\r\n\r\nNew to Viji P5? Start with the [Quick Start](/p5/quickstart) instead.\r\n\r\n## Entry Points\r\n\r\n```javascript\r\n// @renderer p5\r\n\r\nfunction setup(viji, p5) {\r\n  // Called once when the scene starts (optional)\r\n}\r\n\r\nfunction render(viji, p5) {\r\n  // Called every frame\r\n}\r\n```\r\n\r\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.\r\n\r\n## Canvas & Context\r\n\r\n| Member | Type | Description | Details |\r\n|--------|------|-------------|---------|\r\n| [`viji.canvas`](/p5/canvas-resolution) | `OffscreenCanvas` | The rendering canvas | [Canvas & Resolution](/p5/canvas-resolution) |\r\n| [`viji.width`](/p5/canvas-resolution) | `number` | Canvas width in pixels | [Canvas & Resolution](/p5/canvas-resolution) |\r\n| [`viji.height`](/p5/canvas-resolution) | `number` | Canvas height in pixels | [Canvas & Resolution](/p5/canvas-resolution) |\r\n\r\n> [!WARNING]\r\n> `viji.useContext()` is **not available** in P5 scenes. The canvas and its rendering context (2D or WEBGL, depending on the directive) are managed by P5 internally. Calling `useContext()` would conflict with P5's rendering pipeline.\r\n\r\n## Timing\r\n\r\n| Member | Type | Description | Details |\r\n|--------|------|-------------|---------|\r\n| [`viji.time`](/p5/timing) | `number` | Seconds elapsed since the scene started | [Timing](/p5/timing) |\r\n| [`viji.deltaTime`](/p5/timing) | `number` | Seconds since the previous frame | [Timing](/p5/timing) |\r\n| [`viji.frameCount`](/p5/timing) | `number` | Monotonically increasing frame counter | [Timing](/p5/timing) |\r\n| [`viji.fps`](/p5/timing) | `number` | Target FPS based on the host's frame rate mode | [Timing](/p5/timing) |\r\n\r\n## Parameters\r\n\r\nAll parameter methods are called at the top level of your scene file. Read `.value` inside `render()` to get the current value.\r\n\r\n| Method | Returns | `.value` Type | Details |\r\n|--------|---------|---------------|---------|\r\n| [`viji.slider(default, config)`](/p5/parameters/slider) | `SliderParameter` | `number` | [Slider](/p5/parameters/slider) |\r\n| [`viji.color(default, config)`](/p5/parameters/color) | `ColorParameter` | `string` (hex) | [Color](/p5/parameters/color) |\r\n| [`viji.toggle(default, config)`](/p5/parameters/toggle) | `ToggleParameter` | `boolean` | [Toggle](/p5/parameters/toggle) |\r\n| [`viji.select(default, config)`](/p5/parameters/select) | `SelectParameter` | `string \\| number` | [Select](/p5/parameters/select) |\r\n| [`viji.number(default, config)`](/p5/parameters/number) | `NumberParameter` | `number` | [Number](/p5/parameters/number) |\r\n| [`viji.text(default, config)`](/p5/parameters/text) | `TextParameter` | `string` | [Text](/p5/parameters/text) |\r\n| [`viji.image(null, config)`](/p5/parameters/image) | `ImageParameter` | `ImageBitmap \\| null` | [Image](/p5/parameters/image) |\r\n| [`viji.button(config)`](/p5/parameters/button) | `ButtonParameter` | `boolean` (true for one frame) | [Button](/p5/parameters/button) |\r\n| [`viji.coordinate(default, config)`](/p5/parameters/coordinate) | `CoordinateParameter` | 2D coordinate pad: `{ x: number, y: number }`, both -1 to 1 | [Coordinate](/p5/parameters/coordinate) |\r\n\r\n> [!NOTE]\r\n> Image parameters have a `.p5` property for use with `p5.image()`. See [Drawing with P5: Image Parameters](/p5/drawing) for the pattern.\r\n\r\nSee [Parameters Overview](/p5/parameters) for the declaration pattern, [Grouping](/p5/parameters/grouping) and [Categories](/p5/parameters/categories) for organization.\r\n\r\n## Audio\r\n\r\n| Member | Type | Description | Details |\r\n|--------|------|-------------|---------|\r\n| [`viji.audio.isConnected`](/p5/audio) | `boolean` | Whether an audio source is active | [Overview](/p5/audio) |\r\n| [`viji.audio.volume.current`](/p5/audio/volume) | `number` | Current RMS volume 0-1 | [Volume](/p5/audio/volume) |\r\n| [`viji.audio.volume.peak`](/p5/audio/volume) | `number` | Peak volume 0-1 | [Volume](/p5/audio/volume) |\r\n| [`viji.audio.volume.smoothed`](/p5/audio/volume) | `number` | Smoothed volume 0-1 | [Volume](/p5/audio/volume) |\r\n| [`viji.audio.bands.low`](/p5/audio/bands) | `number` | Low frequency band energy (20-120 Hz) | [Frequency Bands](/p5/audio/bands) |\r\n| [`viji.audio.bands.lowMid`](/p5/audio/bands) | `number` | Low-mid band energy (120-500 Hz) | [Frequency Bands](/p5/audio/bands) |\r\n| [`viji.audio.bands.mid`](/p5/audio/bands) | `number` | Mid band energy (500-2 kHz) | [Frequency Bands](/p5/audio/bands) |\r\n| [`viji.audio.bands.highMid`](/p5/audio/bands) | `number` | High-mid band energy (2-6 kHz) | [Frequency Bands](/p5/audio/bands) |\r\n| [`viji.audio.bands.high`](/p5/audio/bands) | `number` | High band energy (6-16 kHz) | [Frequency Bands](/p5/audio/bands) |\r\n| [`viji.audio.bands.lowSmoothed`](/p5/audio/bands) | `number` | Smoothed low band | [Frequency Bands](/p5/audio/bands) |\r\n| [`viji.audio.bands.lowMidSmoothed`](/p5/audio/bands) | `number` | Smoothed low-mid band | [Frequency Bands](/p5/audio/bands) |\r\n| [`viji.audio.bands.midSmoothed`](/p5/audio/bands) | `number` | Smoothed mid band | [Frequency Bands](/p5/audio/bands) |\r\n| [`viji.audio.bands.highMidSmoothed`](/p5/audio/bands) | `number` | Smoothed high-mid band | [Frequency Bands](/p5/audio/bands) |\r\n| [`viji.audio.bands.highSmoothed`](/p5/audio/bands) | `number` | Smoothed high band | [Frequency Bands](/p5/audio/bands) |\r\n| [`viji.audio.beat.kick`](/p5/audio/beat) | `number` | Kick beat energy | [Beat Detection](/p5/audio/beat) |\r\n| [`viji.audio.beat.snare`](/p5/audio/beat) | `number` | Snare beat energy | [Beat Detection](/p5/audio/beat) |\r\n| [`viji.audio.beat.hat`](/p5/audio/beat) | `number` | Hi-hat beat energy | [Beat Detection](/p5/audio/beat) |\r\n| [`viji.audio.beat.any`](/p5/audio/beat) | `number` | Combined beat energy | [Beat Detection](/p5/audio/beat) |\r\n| [`viji.audio.beat.kickSmoothed`](/p5/audio/beat) | `number` | Smoothed kick | [Beat Detection](/p5/audio/beat) |\r\n| [`viji.audio.beat.snareSmoothed`](/p5/audio/beat) | `number` | Smoothed snare | [Beat Detection](/p5/audio/beat) |\r\n| [`viji.audio.beat.hatSmoothed`](/p5/audio/beat) | `number` | Smoothed hi-hat | [Beat Detection](/p5/audio/beat) |\r\n| [`viji.audio.beat.anySmoothed`](/p5/audio/beat) | `number` | Smoothed combined | [Beat Detection](/p5/audio/beat) |\r\n| [`viji.audio.beat.triggers.kick`](/p5/audio/beat) | `boolean` | Kick trigger (true for one frame) | [Beat Detection](/p5/audio/beat) |\r\n| [`viji.audio.beat.triggers.snare`](/p5/audio/beat) | `boolean` | Snare trigger (true for one frame) | [Beat Detection](/p5/audio/beat) |\r\n| [`viji.audio.beat.triggers.hat`](/p5/audio/beat) | `boolean` | Hi-hat trigger (true for one frame) | [Beat Detection](/p5/audio/beat) |\r\n| [`viji.audio.beat.triggers.any`](/p5/audio/beat) | `boolean` | Any beat trigger (true for one frame) | [Beat Detection](/p5/audio/beat) |\r\n| [`viji.audio.beat.events`](/p5/audio/beat) | `Array<{ type, time, strength }>` | Beat events this frame | [Beat Detection](/p5/audio/beat) |\r\n| [`viji.audio.beat.bpm`](/p5/audio/beat) | `number` | Tracked BPM | [Beat Detection](/p5/audio/beat) |\r\n| [`viji.audio.beat.confidence`](/p5/audio/beat) | `number` | Beat-tracker confidence 0-1 | [Beat Detection](/p5/audio/beat) |\r\n| [`viji.audio.beat.isLocked`](/p5/audio/beat) | `boolean` | Whether beat tracking is locked | [Beat Detection](/p5/audio/beat) |\r\n| [`viji.audio.spectral.brightness`](/p5/audio/spectral) | `number` | Spectral brightness 0-1 | [Spectral Analysis](/p5/audio/spectral) |\r\n| [`viji.audio.spectral.flatness`](/p5/audio/spectral) | `number` | Spectral flatness 0-1 | [Spectral Analysis](/p5/audio/spectral) |\r\n| [`viji.audio.getFrequencyData()`](/p5/audio/frequency-data) | `() => Uint8Array` | Raw FFT frequency bins (0-255) | [Frequency Data](/p5/audio/frequency-data) |\r\n| [`viji.audio.getWaveform()`](/p5/audio/waveform) | `() => Float32Array` | Time-domain waveform (-1 to 1) | [Waveform](/p5/audio/waveform) |\r\n\r\n## Video & CV\r\n\r\n| Member | Type | Description | Details |\r\n|--------|------|-------------|---------|\r\n| [`viji.video.isConnected`](/p5/video) | `boolean` | Whether a video source is active | [Overview](/p5/video) |\r\n| [`viji.video.currentFrame`](/p5/video/basics) | `OffscreenCanvas \\| ImageBitmap \\| null` | Current video frame | [Video Basics](/p5/video/basics) |\r\n| [`viji.video.frameWidth`](/p5/video/basics) | `number` | Frame width in pixels | [Video Basics](/p5/video/basics) |\r\n| [`viji.video.frameHeight`](/p5/video/basics) | `number` | Frame height in pixels | [Video Basics](/p5/video/basics) |\r\n| [`viji.video.frameRate`](/p5/video/basics) | `number` | Video frame rate | [Video Basics](/p5/video/basics) |\r\n| [`viji.video.getFrameData()`](/p5/video/basics) | `() => ImageData \\| null` | Pixel data for the current frame | [Video Basics](/p5/video/basics) |\r\n| [`viji.video.faces`](/p5/video/face-detection) | `FaceData[]` | Detected faces | [Face Detection](/p5/video/face-detection) |\r\n| [`viji.video.hands`](/p5/video/hand-tracking) | `HandData[]` | Detected hands | [Hand Tracking](/p5/video/hand-tracking) |\r\n| [`viji.video.pose`](/p5/video/pose-detection) | `PoseData \\| null` | Detected body pose | [Pose Detection](/p5/video/pose-detection) |\r\n| [`viji.video.segmentation`](/p5/video/body-segmentation) | `SegmentationData \\| null` | Body segmentation mask | [Body Segmentation](/p5/video/body-segmentation) |\r\n| [`viji.video.cv.enableFaceDetection(enabled)`](/p5/video/face-detection) | `(boolean) => Promise<void>` | Enable/disable face detection | [Face Detection](/p5/video/face-detection) |\r\n| [`viji.video.cv.enableFaceMesh(enabled)`](/p5/video/face-mesh) | `(boolean) => Promise<void>` | Enable/disable face mesh | [Face Mesh](/p5/video/face-mesh) |\r\n| [`viji.video.cv.enableEmotionDetection(enabled)`](/p5/video/emotion-detection) | `(boolean) => Promise<void>` | Enable/disable emotion detection | [Emotion Detection](/p5/video/emotion-detection) |\r\n| [`viji.video.cv.enableHandTracking(enabled)`](/p5/video/hand-tracking) | `(boolean) => Promise<void>` | Enable/disable hand tracking | [Hand Tracking](/p5/video/hand-tracking) |\r\n| [`viji.video.cv.enablePoseDetection(enabled)`](/p5/video/pose-detection) | `(boolean) => Promise<void>` | Enable/disable pose detection | [Pose Detection](/p5/video/pose-detection) |\r\n| [`viji.video.cv.enableBodySegmentation(enabled)`](/p5/video/body-segmentation) | `(boolean) => Promise<void>` | Enable/disable body segmentation | [Body Segmentation](/p5/video/body-segmentation) |\r\n| [`viji.video.cv.getActiveFeatures()`](/p5/video) | `() => CVFeature[]` | List of active CV features | [Overview](/p5/video) |\r\n| [`viji.video.cv.isProcessing()`](/p5/video) | `() => boolean` | Whether CV is currently processing | [Overview](/p5/video) |\r\n\r\n## Mouse\r\n\r\n| Member | Type | Description | Details |\r\n|--------|------|-------------|---------|\r\n| [`viji.mouse.x`](/p5/mouse) | `number` | Cursor X position in pixels | [Mouse](/p5/mouse) |\r\n| [`viji.mouse.y`](/p5/mouse) | `number` | Cursor Y position in pixels | [Mouse](/p5/mouse) |\r\n| [`viji.mouse.isInCanvas`](/p5/mouse) | `boolean` | Whether cursor is inside the canvas | [Mouse](/p5/mouse) |\r\n| [`viji.mouse.isPressed`](/p5/mouse) | `boolean` | Whether any button is pressed | [Mouse](/p5/mouse) |\r\n| [`viji.mouse.leftButton`](/p5/mouse) | `boolean` | Left button state | [Mouse](/p5/mouse) |\r\n| [`viji.mouse.rightButton`](/p5/mouse) | `boolean` | Right button state | [Mouse](/p5/mouse) |\r\n| [`viji.mouse.middleButton`](/p5/mouse) | `boolean` | Middle button state | [Mouse](/p5/mouse) |\r\n| [`viji.mouse.deltaX`](/p5/mouse) | `number` | Horizontal movement since last frame | [Mouse](/p5/mouse) |\r\n| [`viji.mouse.deltaY`](/p5/mouse) | `number` | Vertical movement since last frame | [Mouse](/p5/mouse) |\r\n| [`viji.mouse.wheelDelta`](/p5/mouse) | `number` | Scroll wheel delta | [Mouse](/p5/mouse) |\r\n| [`viji.mouse.wheelX`](/p5/mouse) | `number` | Horizontal scroll delta | [Mouse](/p5/mouse) |\r\n| [`viji.mouse.wheelY`](/p5/mouse) | `number` | Vertical scroll delta | [Mouse](/p5/mouse) |\r\n| [`viji.mouse.wasPressed`](/p5/mouse) | `boolean` | True for one frame when pressed | [Mouse](/p5/mouse) |\r\n| [`viji.mouse.wasReleased`](/p5/mouse) | `boolean` | True for one frame when released | [Mouse](/p5/mouse) |\r\n| [`viji.mouse.wasMoved`](/p5/mouse) | `boolean` | True for one frame when moved | [Mouse](/p5/mouse) |\r\n\r\n## Keyboard\r\n\r\n| Member | Type | Description | Details |\r\n|--------|------|-------------|---------|\r\n| [`viji.keyboard.isPressed(key)`](/p5/keyboard) | `(string) => boolean` | Whether a key is currently held | [Keyboard](/p5/keyboard) |\r\n| [`viji.keyboard.wasPressed(key)`](/p5/keyboard) | `(string) => boolean` | True for one frame when pressed | [Keyboard](/p5/keyboard) |\r\n| [`viji.keyboard.wasReleased(key)`](/p5/keyboard) | `(string) => boolean` | True for one frame when released | [Keyboard](/p5/keyboard) |\r\n| [`viji.keyboard.activeKeys`](/p5/keyboard) | `Set<string>` | All currently held keys | [Keyboard](/p5/keyboard) |\r\n| [`viji.keyboard.pressedThisFrame`](/p5/keyboard) | `Set<string>` | Keys pressed this frame | [Keyboard](/p5/keyboard) |\r\n| [`viji.keyboard.releasedThisFrame`](/p5/keyboard) | `Set<string>` | Keys released this frame | [Keyboard](/p5/keyboard) |\r\n| [`viji.keyboard.lastKeyPressed`](/p5/keyboard) | `string` | Most recently pressed key | [Keyboard](/p5/keyboard) |\r\n| [`viji.keyboard.lastKeyReleased`](/p5/keyboard) | `string` | Most recently released key | [Keyboard](/p5/keyboard) |\r\n| [`viji.keyboard.shift`](/p5/keyboard) | `boolean` | Shift key state | [Keyboard](/p5/keyboard) |\r\n| [`viji.keyboard.ctrl`](/p5/keyboard) | `boolean` | Ctrl/Cmd key state | [Keyboard](/p5/keyboard) |\r\n| [`viji.keyboard.alt`](/p5/keyboard) | `boolean` | Alt/Option key state | [Keyboard](/p5/keyboard) |\r\n| [`viji.keyboard.meta`](/p5/keyboard) | `boolean` | Meta/Win key state | [Keyboard](/p5/keyboard) |\r\n\r\n## Touch\r\n\r\n> **Note:** The property is `viji.touches` (plural), not `viji.touch`.\r\n\r\n| Member | Type | Description | Details |\r\n|--------|------|-------------|---------|\r\n| [`viji.touches.points`](/p5/touch) | `TouchPoint[]` | All active touch points | [Touch](/p5/touch) |\r\n| [`viji.touches.count`](/p5/touch) | `number` | Number of active touches | [Touch](/p5/touch) |\r\n| [`viji.touches.started`](/p5/touch) | `TouchPoint[]` | Touch points that started this frame | [Touch](/p5/touch) |\r\n| [`viji.touches.moved`](/p5/touch) | `TouchPoint[]` | Touch points that moved this frame | [Touch](/p5/touch) |\r\n| [`viji.touches.ended`](/p5/touch) | `TouchPoint[]` | Touch points that ended this frame | [Touch](/p5/touch) |\r\n| [`viji.touches.primary`](/p5/touch) | `TouchPoint \\| null` | The first active touch point | [Touch](/p5/touch) |\r\n\r\n**`TouchPoint` fields:** `id`, `x`, `y`, `pressure`, `radius`, `radiusX`, `radiusY`, `rotationAngle`, `force` (numbers); `isInCanvas`, `isNew`, `isActive`, `isEnding` (booleans); `deltaX`, `deltaY` (numbers); `velocity` `{ x, y }`.\r\n\r\n## Pointer (Unified)\r\n\r\n| Member | Type | Description | Details |\r\n|--------|------|-------------|---------|\r\n| [`viji.pointer.x`](/p5/pointer) | `number` | Primary pointer X position | [Pointer](/p5/pointer) |\r\n| [`viji.pointer.y`](/p5/pointer) | `number` | Primary pointer Y position | [Pointer](/p5/pointer) |\r\n| [`viji.pointer.deltaX`](/p5/pointer) | `number` | Horizontal movement since last frame | [Pointer](/p5/pointer) |\r\n| [`viji.pointer.deltaY`](/p5/pointer) | `number` | Vertical movement since last frame | [Pointer](/p5/pointer) |\r\n| [`viji.pointer.isDown`](/p5/pointer) | `boolean` | Whether the pointer is active (click or touch) | [Pointer](/p5/pointer) |\r\n| [`viji.pointer.wasPressed`](/p5/pointer) | `boolean` | True for one frame when pressed | [Pointer](/p5/pointer) |\r\n| [`viji.pointer.wasReleased`](/p5/pointer) | `boolean` | True for one frame when released | [Pointer](/p5/pointer) |\r\n| [`viji.pointer.isInCanvas`](/p5/pointer) | `boolean` | Whether pointer is inside the canvas | [Pointer](/p5/pointer) |\r\n| [`viji.pointer.type`](/p5/pointer) | `'mouse' \\| 'touch' \\| 'none'` | Current input source | [Pointer](/p5/pointer) |\r\n\r\n## Device Sensors\r\n\r\n| Member | Type | Description | Details |\r\n|--------|------|-------------|---------|\r\n| [`viji.device.motion`](/p5/sensors) | `DeviceMotionData \\| null` | Accelerometer and gyroscope data | [Device Sensors](/p5/sensors) |\r\n| [`viji.device.orientation`](/p5/sensors) | `DeviceOrientationData \\| null` | Device orientation (alpha, beta, gamma) | [Device Sensors](/p5/sensors) |\r\n\r\n**`DeviceMotionData`:** `acceleration` `{ x, y, z }`, `accelerationIncludingGravity` `{ x, y, z }`, `rotationRate` `{ alpha, beta, gamma }`, `interval`.\r\n\r\n**`DeviceOrientationData`:** `alpha`, `beta`, `gamma` (numbers or null), `absolute` (boolean).\r\n\r\n## External Devices\r\n\r\n| Member | Type | Description | Details |\r\n|--------|------|-------------|---------|\r\n| [`viji.devices`](/p5/external-devices) | `DeviceState[]` | Connected external devices | [Overview](/p5/external-devices) |\r\n| [`viji.devices[i].id`](/p5/external-devices) | `string` | Unique device identifier | [Overview](/p5/external-devices) |\r\n| [`viji.devices[i].name`](/p5/external-devices) | `string` | User-friendly device name | [Overview](/p5/external-devices) |\r\n| [`viji.devices[i].motion`](/p5/external-devices/sensors) | `DeviceMotionData \\| null` | Device accelerometer/gyroscope | [Device Sensors](/p5/external-devices/sensors) |\r\n| [`viji.devices[i].orientation`](/p5/external-devices/sensors) | `DeviceOrientationData \\| null` | Device orientation | [Device Sensors](/p5/external-devices/sensors) |\r\n| [`viji.devices[i].video`](/p5/external-devices/video) | `VideoAPI \\| null` | Device camera video | [Device Video](/p5/external-devices/video) |\r\n| [`viji.devices[i].audio`](/p5/external-devices/audio) | `AudioStreamAPI \\| null` | Device audio stream | [Device Audio](/p5/external-devices/audio) |\r\n\r\n## Streams\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `viji.videoStreams` | `VideoAPI[]` | Additional video streams provided by the host |\r\n| `viji.audioStreams` | `AudioStreamAPI[]` | Additional audio streams provided by the host |\r\n\r\nEach `videoStreams` element has the same shape as [`viji.video`](/p5/video). Each `audioStreams` element provides lightweight audio analysis (volume, frequency bands, spectral features) but does **not** include beat detection or BPM tracking: see [`viji.audio`](/p5/audio) for full analysis on the main stream.\r\n\r\nBoth arrays may be empty if the host does not provide additional streams. Audio streams from external devices appear on `device.audio`, not in `viji.audioStreams`.\r\n\r\n## Related\r\n\r\n- [Quick Start](/p5/quickstart): getting started with the P5 renderer\r\n- [Scene Structure](/p5/scene-structure): setup/render pattern and instance mode\r\n- [Drawing with P5](/p5/drawing): Viji-specific drawing patterns\r\n- [Best Practices](/getting-started/best-practices): essential patterns for all renderers\r\n- [Native API Reference](/native/api-reference): the same API in the Native renderer\r\n- [Shader API Reference](/shader/api-reference): built-in uniforms for shaders\r\n- [P5.js Reference](https://p5js.org/reference/): official P5.js documentation"
+          "markdown": "# API Reference\r\n\r\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.\r\n\r\nNew to Viji P5? Start with the [Quick Start](/p5/quickstart) instead.\r\n\r\n## Entry Points\r\n\r\n```javascript\r\n// @renderer p5\r\n\r\nfunction setup(viji, p5) {\r\n  // Called once when the scene starts (optional)\r\n}\r\n\r\nfunction render(viji, p5) {\r\n  // Called every frame\r\n}\r\n```\r\n\r\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.\r\n\r\n## Canvas & Context\r\n\r\n| Member | Type | Description | Details |\r\n|--------|------|-------------|---------|\r\n| [`viji.canvas`](/p5/canvas-resolution#vijicanvas-in-p5-scenes) | `OffscreenCanvas` | The rendering canvas | [Canvas & Resolution](/p5/canvas-resolution) |\r\n| [`viji.width`](/p5/canvas-resolution#resolution-properties) | `number` | Canvas width in pixels | [Canvas & Resolution](/p5/canvas-resolution) |\r\n| [`viji.height`](/p5/canvas-resolution#resolution-properties) | `number` | Canvas height in pixels | [Canvas & Resolution](/p5/canvas-resolution) |\r\n\r\n> [!WARNING]\r\n> `viji.useContext()` is **not available** in P5 scenes. The canvas and its rendering context (2D or WEBGL, depending on the directive) are managed by P5 internally. Calling `useContext()` would conflict with P5's rendering pipeline.\r\n\r\n## Timing\r\n\r\n| Member | Type | Description | Details |\r\n|--------|------|-------------|---------|\r\n| [`viji.time`](/p5/timing#vijitime-oscillations--cycles) | `number` | Seconds elapsed since the scene started | [Timing](/p5/timing) |\r\n| [`viji.deltaTime`](/p5/timing#vijideltatime-accumulation) | `number` | Seconds since the previous frame | [Timing](/p5/timing) |\r\n| [`viji.frameCount`](/p5/timing#vijiframecount-vs-p5framecount) | `number` | Monotonically increasing frame counter | [Timing](/p5/timing) |\r\n| [`viji.fps`](/p5/timing#vijifps-target-frame-rate) | `number` | Target FPS based on the host's frame rate mode | [Timing](/p5/timing) |\r\n\r\n## Parameters\r\n\r\nAll parameter methods are called at the top level of your scene file. Read `.value` inside `render()` to get the current value.\r\n\r\n| Method | Returns | `.value` Type | Details |\r\n|--------|---------|---------------|---------|\r\n| [`viji.slider(default, config)`](/p5/parameters/slider) | `SliderParameter` | `number` | [Slider](/p5/parameters/slider) |\r\n| [`viji.color(default, config)`](/p5/parameters/color) | `ColorParameter` | `string` (hex) | [Color](/p5/parameters/color) |\r\n| [`viji.toggle(default, config)`](/p5/parameters/toggle) | `ToggleParameter` | `boolean` | [Toggle](/p5/parameters/toggle) |\r\n| [`viji.select(default, config)`](/p5/parameters/select) | `SelectParameter` | `string \\| number` | [Select](/p5/parameters/select) |\r\n| [`viji.number(default, config)`](/p5/parameters/number) | `NumberParameter` | `number` | [Number](/p5/parameters/number) |\r\n| [`viji.text(default, config)`](/p5/parameters/text) | `TextParameter` | `string` | [Text](/p5/parameters/text) |\r\n| [`viji.image(null, config)`](/p5/parameters/image) | `ImageParameter` | `ImageBitmap \\| null` | [Image](/p5/parameters/image) |\r\n| [`viji.button(config)`](/p5/parameters/button) | `ButtonParameter` | `boolean` (true for one frame) | [Button](/p5/parameters/button) |\r\n| [`viji.coordinate(default, config)`](/p5/parameters/coordinate) | `CoordinateParameter` | 2D coordinate pad: `{ x: number, y: number }`, both -1 to 1 | [Coordinate](/p5/parameters/coordinate) |\r\n\r\n> [!NOTE]\r\n> Image parameters have a `.p5` property for use with `p5.image()`. See [Drawing with P5: Image Parameters](/p5/drawing) for the pattern.\r\n\r\nSee [Parameters Overview](/p5/parameters) for the declaration pattern, [Grouping](/p5/parameters/grouping) and [Categories](/p5/parameters/categories) for organization.\r\n\r\n## Audio\r\n\r\n| Member | Type | Description | Details |\r\n|--------|------|-------------|---------|\r\n| [`viji.audio.isConnected`](/p5/audio) | `boolean` | Whether an audio source is active | [Overview](/p5/audio) |\r\n| [`viji.audio.volume.current`](/p5/audio/volume#property-reference) | `number` | Current RMS volume 0-1 | [Volume](/p5/audio/volume) |\r\n| [`viji.audio.volume.peak`](/p5/audio/volume#property-reference) | `number` | Peak volume 0-1 | [Volume](/p5/audio/volume) |\r\n| [`viji.audio.volume.smoothed`](/p5/audio/volume#property-reference) | `number` | Smoothed volume 0-1 | [Volume](/p5/audio/volume) |\r\n| [`viji.audio.bands.low`](/p5/audio/bands#instant-bands) | `number` | Low frequency band energy (20-120 Hz) | [Frequency Bands](/p5/audio/bands) |\r\n| [`viji.audio.bands.lowMid`](/p5/audio/bands#instant-bands) | `number` | Low-mid band energy (120-500 Hz) | [Frequency Bands](/p5/audio/bands) |\r\n| [`viji.audio.bands.mid`](/p5/audio/bands#instant-bands) | `number` | Mid band energy (500-2 kHz) | [Frequency Bands](/p5/audio/bands) |\r\n| [`viji.audio.bands.highMid`](/p5/audio/bands#instant-bands) | `number` | High-mid band energy (2-6 kHz) | [Frequency Bands](/p5/audio/bands) |\r\n| [`viji.audio.bands.high`](/p5/audio/bands#instant-bands) | `number` | High band energy (6-16 kHz) | [Frequency Bands](/p5/audio/bands) |\r\n| [`viji.audio.bands.lowSmoothed`](/p5/audio/bands#smoothed-bands) | `number` | Smoothed low band | [Frequency Bands](/p5/audio/bands) |\r\n| [`viji.audio.bands.lowMidSmoothed`](/p5/audio/bands#smoothed-bands) | `number` | Smoothed low-mid band | [Frequency Bands](/p5/audio/bands) |\r\n| [`viji.audio.bands.midSmoothed`](/p5/audio/bands#smoothed-bands) | `number` | Smoothed mid band | [Frequency Bands](/p5/audio/bands) |\r\n| [`viji.audio.bands.highMidSmoothed`](/p5/audio/bands#smoothed-bands) | `number` | Smoothed high-mid band | [Frequency Bands](/p5/audio/bands) |\r\n| [`viji.audio.bands.highSmoothed`](/p5/audio/bands#smoothed-bands) | `number` | Smoothed high band | [Frequency Bands](/p5/audio/bands) |\r\n| [`viji.audio.beat.kick`](/p5/audio/beat#energy-curves-fast-decay) | `number` | Kick beat energy | [Beat Detection](/p5/audio/beat) |\r\n| [`viji.audio.beat.snare`](/p5/audio/beat#energy-curves-fast-decay) | `number` | Snare beat energy | [Beat Detection](/p5/audio/beat) |\r\n| [`viji.audio.beat.hat`](/p5/audio/beat#energy-curves-fast-decay) | `number` | Hi-hat beat energy | [Beat Detection](/p5/audio/beat) |\r\n| [`viji.audio.beat.any`](/p5/audio/beat#energy-curves-fast-decay) | `number` | Combined beat energy | [Beat Detection](/p5/audio/beat) |\r\n| [`viji.audio.beat.kickSmoothed`](/p5/audio/beat#energy-curves-smoothed) | `number` | Smoothed kick | [Beat Detection](/p5/audio/beat) |\r\n| [`viji.audio.beat.snareSmoothed`](/p5/audio/beat#energy-curves-smoothed) | `number` | Smoothed snare | [Beat Detection](/p5/audio/beat) |\r\n| [`viji.audio.beat.hatSmoothed`](/p5/audio/beat#energy-curves-smoothed) | `number` | Smoothed hi-hat | [Beat Detection](/p5/audio/beat) |\r\n| [`viji.audio.beat.anySmoothed`](/p5/audio/beat#energy-curves-smoothed) | `number` | Smoothed combined | [Beat Detection](/p5/audio/beat) |\r\n| [`viji.audio.beat.triggers.kick`](/p5/audio/beat#triggers) | `boolean` | Kick trigger (true for one frame) | [Beat Detection](/p5/audio/beat) |\r\n| [`viji.audio.beat.triggers.snare`](/p5/audio/beat#triggers) | `boolean` | Snare trigger (true for one frame) | [Beat Detection](/p5/audio/beat) |\r\n| [`viji.audio.beat.triggers.hat`](/p5/audio/beat#triggers) | `boolean` | Hi-hat trigger (true for one frame) | [Beat Detection](/p5/audio/beat) |\r\n| [`viji.audio.beat.triggers.any`](/p5/audio/beat#triggers) | `boolean` | Any beat trigger (true for one frame) | [Beat Detection](/p5/audio/beat) |\r\n| [`viji.audio.beat.events`](/p5/audio/beat#events) | `Array<{ type, time, strength }>` | Beat events this frame | [Beat Detection](/p5/audio/beat) |\r\n| [`viji.audio.beat.bpm`](/p5/audio/beat#tempo) | `number` | Tracked BPM | [Beat Detection](/p5/audio/beat) |\r\n| [`viji.audio.beat.confidence`](/p5/audio/beat#tempo) | `number` | Beat-tracker confidence 0-1 | [Beat Detection](/p5/audio/beat) |\r\n| [`viji.audio.beat.isLocked`](/p5/audio/beat#tempo) | `boolean` | Whether beat tracking is locked | [Beat Detection](/p5/audio/beat) |\r\n| [`viji.audio.spectral.brightness`](/p5/audio/spectral#property-reference) | `number` | Spectral brightness 0-1 | [Spectral Analysis](/p5/audio/spectral) |\r\n| [`viji.audio.spectral.flatness`](/p5/audio/spectral#property-reference) | `number` | Spectral flatness 0-1 | [Spectral Analysis](/p5/audio/spectral) |\r\n| [`viji.audio.getFrequencyData()`](/p5/audio/frequency-data) | `() => Uint8Array` | Raw FFT frequency bins (0-255) | [Frequency Data](/p5/audio/frequency-data) |\r\n| [`viji.audio.getWaveform()`](/p5/audio/waveform) | `() => Float32Array` | Time-domain waveform (-1 to 1) | [Waveform](/p5/audio/waveform) |\r\n\r\n## Video & CV\r\n\r\n| Member | Type | Description | Details |\r\n|--------|------|-------------|---------|\r\n| [`viji.video.isConnected`](/p5/video) | `boolean` | Whether a video source is active | [Overview](/p5/video) |\r\n| [`viji.video.currentFrame`](/p5/video/basics) | `OffscreenCanvas \\| ImageBitmap \\| null` | Current video frame | [Video Basics](/p5/video/basics) |\r\n| [`viji.video.frameWidth`](/p5/video/basics) | `number` | Frame width in pixels | [Video Basics](/p5/video/basics) |\r\n| [`viji.video.frameHeight`](/p5/video/basics) | `number` | Frame height in pixels | [Video Basics](/p5/video/basics) |\r\n| [`viji.video.frameRate`](/p5/video/basics) | `number` | Video frame rate | [Video Basics](/p5/video/basics) |\r\n| [`viji.video.getFrameData()`](/p5/video/basics) | `() => ImageData \\| null` | Pixel data for the current frame | [Video Basics](/p5/video/basics) |\r\n| [`viji.video.faces`](/p5/video/face-detection) | `FaceData[]` | Detected faces | [Face Detection](/p5/video/face-detection) |\r\n| [`viji.video.hands`](/p5/video/hand-tracking) | `HandData[]` | Detected hands | [Hand Tracking](/p5/video/hand-tracking) |\r\n| [`viji.video.pose`](/p5/video/pose-detection) | `PoseData \\| null` | Detected body pose | [Pose Detection](/p5/video/pose-detection) |\r\n| [`viji.video.segmentation`](/p5/video/body-segmentation) | `SegmentationData \\| null` | Body segmentation mask | [Body Segmentation](/p5/video/body-segmentation) |\r\n| [`viji.video.cv.enableFaceDetection(enabled)`](/p5/video/face-detection) | `(boolean) => Promise<void>` | Enable/disable face detection | [Face Detection](/p5/video/face-detection) |\r\n| [`viji.video.cv.enableFaceMesh(enabled)`](/p5/video/face-mesh) | `(boolean) => Promise<void>` | Enable/disable face mesh | [Face Mesh](/p5/video/face-mesh) |\r\n| [`viji.video.cv.enableEmotionDetection(enabled)`](/p5/video/emotion-detection) | `(boolean) => Promise<void>` | Enable/disable emotion detection | [Emotion Detection](/p5/video/emotion-detection) |\r\n| [`viji.video.cv.enableHandTracking(enabled)`](/p5/video/hand-tracking) | `(boolean) => Promise<void>` | Enable/disable hand tracking | [Hand Tracking](/p5/video/hand-tracking) |\r\n| [`viji.video.cv.enablePoseDetection(enabled)`](/p5/video/pose-detection) | `(boolean) => Promise<void>` | Enable/disable pose detection | [Pose Detection](/p5/video/pose-detection) |\r\n| [`viji.video.cv.enableBodySegmentation(enabled)`](/p5/video/body-segmentation) | `(boolean) => Promise<void>` | Enable/disable body segmentation | [Body Segmentation](/p5/video/body-segmentation) |\r\n| [`viji.video.cv.getActiveFeatures()`](/p5/video) | `() => CVFeature[]` | List of active CV features | [Overview](/p5/video) |\r\n| [`viji.video.cv.isProcessing()`](/p5/video) | `() => boolean` | Whether CV is currently processing | [Overview](/p5/video) |\r\n\r\n## Mouse\r\n\r\n| Member | Type | Description | Details |\r\n|--------|------|-------------|---------|\r\n| [`viji.mouse.x`](/p5/mouse#position) | `number` | Cursor X position in pixels | [Mouse](/p5/mouse) |\r\n| [`viji.mouse.y`](/p5/mouse#position) | `number` | Cursor Y position in pixels | [Mouse](/p5/mouse) |\r\n| [`viji.mouse.isInCanvas`](/p5/mouse#position) | `boolean` | Whether cursor is inside the canvas | [Mouse](/p5/mouse) |\r\n| [`viji.mouse.isPressed`](/p5/mouse#buttons) | `boolean` | Whether any button is pressed | [Mouse](/p5/mouse) |\r\n| [`viji.mouse.leftButton`](/p5/mouse#buttons) | `boolean` | Left button state | [Mouse](/p5/mouse) |\r\n| [`viji.mouse.rightButton`](/p5/mouse#buttons) | `boolean` | Right button state | [Mouse](/p5/mouse) |\r\n| [`viji.mouse.middleButton`](/p5/mouse#buttons) | `boolean` | Middle button state | [Mouse](/p5/mouse) |\r\n| [`viji.mouse.deltaX`](/p5/mouse#movement) | `number` | Horizontal movement since last frame | [Mouse](/p5/mouse) |\r\n| [`viji.mouse.deltaY`](/p5/mouse#movement) | `number` | Vertical movement since last frame | [Mouse](/p5/mouse) |\r\n| [`viji.mouse.wheelDelta`](/p5/mouse#scroll-wheel) | `number` | Scroll wheel delta | [Mouse](/p5/mouse) |\r\n| [`viji.mouse.wheelX`](/p5/mouse#scroll-wheel) | `number` | Horizontal scroll delta | [Mouse](/p5/mouse) |\r\n| [`viji.mouse.wheelY`](/p5/mouse#scroll-wheel) | `number` | Vertical scroll delta | [Mouse](/p5/mouse) |\r\n| [`viji.mouse.wasPressed`](/p5/mouse#frame-events) | `boolean` | True for one frame when pressed | [Mouse](/p5/mouse) |\r\n| [`viji.mouse.wasReleased`](/p5/mouse#frame-events) | `boolean` | True for one frame when released | [Mouse](/p5/mouse) |\r\n| [`viji.mouse.wasMoved`](/p5/mouse#frame-events) | `boolean` | True for one frame when moved | [Mouse](/p5/mouse) |\r\n\r\n## Keyboard\r\n\r\n| Member | Type | Description | Details |\r\n|--------|------|-------------|---------|\r\n| [`viji.keyboard.isPressed(key)`](/p5/keyboard#methods) | `(string) => boolean` | Whether a key is currently held | [Keyboard](/p5/keyboard) |\r\n| [`viji.keyboard.wasPressed(key)`](/p5/keyboard#methods) | `(string) => boolean` | True for one frame when pressed | [Keyboard](/p5/keyboard) |\r\n| [`viji.keyboard.wasReleased(key)`](/p5/keyboard#methods) | `(string) => boolean` | True for one frame when released | [Keyboard](/p5/keyboard) |\r\n| [`viji.keyboard.activeKeys`](/p5/keyboard#properties) | `Set<string>` | All currently held keys | [Keyboard](/p5/keyboard) |\r\n| [`viji.keyboard.pressedThisFrame`](/p5/keyboard#properties) | `Set<string>` | Keys pressed this frame | [Keyboard](/p5/keyboard) |\r\n| [`viji.keyboard.releasedThisFrame`](/p5/keyboard#properties) | `Set<string>` | Keys released this frame | [Keyboard](/p5/keyboard) |\r\n| [`viji.keyboard.lastKeyPressed`](/p5/keyboard#properties) | `string` | Most recently pressed key | [Keyboard](/p5/keyboard) |\r\n| [`viji.keyboard.lastKeyReleased`](/p5/keyboard#properties) | `string` | Most recently released key | [Keyboard](/p5/keyboard) |\r\n| [`viji.keyboard.shift`](/p5/keyboard#modifier-keys) | `boolean` | Shift key state | [Keyboard](/p5/keyboard) |\r\n| [`viji.keyboard.ctrl`](/p5/keyboard#modifier-keys) | `boolean` | Ctrl/Cmd key state | [Keyboard](/p5/keyboard) |\r\n| [`viji.keyboard.alt`](/p5/keyboard#modifier-keys) | `boolean` | Alt/Option key state | [Keyboard](/p5/keyboard) |\r\n| [`viji.keyboard.meta`](/p5/keyboard#modifier-keys) | `boolean` | Meta/Win key state | [Keyboard](/p5/keyboard) |\r\n\r\n## Touch\r\n\r\n> **Note:** The property is `viji.touches` (plural), not `viji.touch`.\r\n\r\n| Member | Type | Description | Details |\r\n|--------|------|-------------|---------|\r\n| [`viji.touches.points`](/p5/touch#touchapi-vijitouches) | `TouchPoint[]` | All active touch points | [Touch](/p5/touch) |\r\n| [`viji.touches.count`](/p5/touch#touchapi-vijitouches) | `number` | Number of active touches | [Touch](/p5/touch) |\r\n| [`viji.touches.started`](/p5/touch#touchapi-vijitouches) | `TouchPoint[]` | Touch points that started this frame | [Touch](/p5/touch) |\r\n| [`viji.touches.moved`](/p5/touch#touchapi-vijitouches) | `TouchPoint[]` | Touch points that moved this frame | [Touch](/p5/touch) |\r\n| [`viji.touches.ended`](/p5/touch#touchapi-vijitouches) | `TouchPoint[]` | Touch points that ended this frame | [Touch](/p5/touch) |\r\n| [`viji.touches.primary`](/p5/touch#touchapi-vijitouches) | `TouchPoint \\| null` | The first active touch point | [Touch](/p5/touch) |\r\n\r\n**`TouchPoint` fields:** `id`, `x`, `y`, `pressure`, `radius`, `radiusX`, `radiusY`, `rotationAngle`, `force` (numbers); `isInCanvas`, `isNew`, `isActive`, `isEnding` (booleans); `deltaX`, `deltaY` (numbers); `velocity` `{ x, y }`.\r\n\r\n## Pointer (Unified)\r\n\r\n| Member | Type | Description | Details |\r\n|--------|------|-------------|---------|\r\n| [`viji.pointer.x`](/p5/pointer#api-reference) | `number` | Primary pointer X position | [Pointer](/p5/pointer) |\r\n| [`viji.pointer.y`](/p5/pointer#api-reference) | `number` | Primary pointer Y position | [Pointer](/p5/pointer) |\r\n| [`viji.pointer.deltaX`](/p5/pointer#api-reference) | `number` | Horizontal movement since last frame | [Pointer](/p5/pointer) |\r\n| [`viji.pointer.deltaY`](/p5/pointer#api-reference) | `number` | Vertical movement since last frame | [Pointer](/p5/pointer) |\r\n| [`viji.pointer.isDown`](/p5/pointer#api-reference) | `boolean` | Whether the pointer is active (click or touch) | [Pointer](/p5/pointer) |\r\n| [`viji.pointer.wasPressed`](/p5/pointer#api-reference) | `boolean` | True for one frame when pressed | [Pointer](/p5/pointer) |\r\n| [`viji.pointer.wasReleased`](/p5/pointer#api-reference) | `boolean` | True for one frame when released | [Pointer](/p5/pointer) |\r\n| [`viji.pointer.isInCanvas`](/p5/pointer#api-reference) | `boolean` | Whether pointer is inside the canvas | [Pointer](/p5/pointer) |\r\n| [`viji.pointer.type`](/p5/pointer#api-reference) | `'mouse' \\| 'touch' \\| 'none'` | Current input source | [Pointer](/p5/pointer) |\r\n\r\n## Device Sensors\r\n\r\n| Member | Type | Description | Details |\r\n|--------|------|-------------|---------|\r\n| [`viji.device.motion`](/p5/sensors#devicemotiondata-vijidevicemotion) | `DeviceMotionData \\| null` | Accelerometer and gyroscope data | [Device Sensors](/p5/sensors) |\r\n| [`viji.device.orientation`](/p5/sensors#deviceorientationdata-vijideviceorientation) | `DeviceOrientationData \\| null` | Device orientation (alpha, beta, gamma) | [Device Sensors](/p5/sensors) |\r\n\r\n**`DeviceMotionData`:** `acceleration` `{ x, y, z }`, `accelerationIncludingGravity` `{ x, y, z }`, `rotationRate` `{ alpha, beta, gamma }`, `interval`.\r\n\r\n**`DeviceOrientationData`:** `alpha`, `beta`, `gamma` (numbers or null), `absolute` (boolean).\r\n\r\n## External Devices\r\n\r\n| Member | Type | Description | Details |\r\n|--------|------|-------------|---------|\r\n| [`viji.devices`](/p5/external-devices#devicestate-vijidevicesi) | `DeviceState[]` | Connected external devices | [Overview](/p5/external-devices) |\r\n| [`viji.devices[i].id`](/p5/external-devices#devicestate-vijidevicesi) | `string` | Unique device identifier | [Overview](/p5/external-devices) |\r\n| [`viji.devices[i].name`](/p5/external-devices#devicestate-vijidevicesi) | `string` | User-friendly device name | [Overview](/p5/external-devices) |\r\n| [`viji.devices[i].motion`](/p5/external-devices/sensors#devicemotiondata-devicemotion) | `DeviceMotionData \\| null` | Device accelerometer/gyroscope | [Device Sensors](/p5/external-devices/sensors) |\r\n| [`viji.devices[i].orientation`](/p5/external-devices/sensors#deviceorientationdata-deviceorientation) | `DeviceOrientationData \\| null` | Device orientation | [Device Sensors](/p5/external-devices/sensors) |\r\n| [`viji.devices[i].video`](/p5/external-devices/video) | `VideoAPI \\| null` | Device camera video | [Device Video](/p5/external-devices/video) |\r\n| [`viji.devices[i].audio`](/p5/external-devices/audio) | `AudioStreamAPI \\| null` | Device audio stream | [Device Audio](/p5/external-devices/audio) |\r\n\r\n## Streams\r\n\r\n| Member | Type | Description |\r\n|--------|------|-------------|\r\n| `viji.videoStreams` | `VideoAPI[]` | Additional video streams provided by the host |\r\n| `viji.audioStreams` | `AudioStreamAPI[]` | Additional audio streams provided by the host |\r\n\r\nEach `videoStreams` element has the same shape as [`viji.video`](/p5/video). Each `audioStreams` element provides lightweight audio analysis (volume, frequency bands, spectral features) but does **not** include beat detection or BPM tracking: see [`viji.audio`](/p5/audio) for full analysis on the main stream.\r\n\r\nBoth arrays may be empty if the host does not provide additional streams. Audio streams from external devices appear on `device.audio`, not in `viji.audioStreams`.\r\n\r\n## Related\r\n\r\n- [Quick Start](/p5/quickstart): getting started with the P5 renderer\r\n- [Scene Structure](/p5/scene-structure): setup/render pattern and instance mode\r\n- [Drawing with P5](/p5/drawing): Viji-specific drawing patterns\r\n- [Best Practices](/getting-started/best-practices): essential patterns for all renderers\r\n- [Native API Reference](/native/api-reference): the same API in the Native renderer\r\n- [Shader API Reference](/shader/api-reference): built-in uniforms for shaders\r\n- [P5.js Reference](https://p5js.org/reference/): official P5.js documentation"
         }
       ]
     },
@@ -4271,7 +4296,7 @@ export const docsApi = {
         },
         {
           "type": "text",
-          "markdown": "## 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(p5.width / 2, p5.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\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.\r\n\r\nConstants are also namespaced: use `p5.PI`, `p5.TWO_PI`, `p5.HSB`, `p5.CENTER`, etc.\r\n\r\n## What's Different from Standard P5.js\r\n\r\n| Standard P5.js | Viji P5 | Reason |\r\n|----------------|---------|--------|\r\n| `function draw() { ... }` | `function render(viji, p5) { ... }` | Viji controls the render loop |\r\n| `createCanvas(800, 600)` | Not needed | Canvas is managed by Viji |\r\n| `resizeCanvas(w, h)` | Not needed | Resizing is automatic |\r\n| `preload()` | Not available | Use `viji.image()` parameters or `fetch()` in `setup()` |\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)) | P5 input globals don't update in workers |\r\n| `frameRate(30)` | Not available | Viji controls the frame rate |\r\n| `keyPressed()`, `mouseClicked()` | Check state in `render()` | No event callbacks in worker environment |\r\n| Global mode (`background(0)`) | Instance mode (`p5.background(0)`) | Worker environment requires explicit namespacing |\r\n\r\n## Environment Constraints\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. One exception: `fetch()` is available, so you can load external data (JSON, etc.) from CDNs.\r\n\r\n## Next Steps\r\n\r\n- [Canvas & Resolution](/p5/canvas-resolution): [`viji.width`](/p5/canvas-resolution), [`viji.height`](/p5/canvas-resolution), responsive layouts\r\n- [Timing](/p5/timing): [`viji.time`](/p5/timing), [`viji.deltaTime`](/p5/timing), frame counting\r\n- [Drawing with P5](/p5/drawing): P5 drawing functions in Viji\r\n- [Parameters](/p5/parameters): sliders, colors, toggles\r\n- [Converting P5 Sketches](/p5/converting-sketches): migrate existing sketches\r\n- [API Reference](/p5/api-reference): full list of everything available"
+          "markdown": "## 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(p5.width / 2, p5.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\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.\r\n\r\nConstants are also namespaced: use `p5.PI`, `p5.TWO_PI`, `p5.HSB`, `p5.CENTER`, etc.\r\n\r\n## What's Different from Standard P5.js\r\n\r\n| Standard P5.js | Viji P5 | Reason |\r\n|----------------|---------|--------|\r\n| `function draw() { ... }` | `function render(viji, p5) { ... }` | Viji controls the render loop |\r\n| `createCanvas(800, 600)` | Not needed | Canvas is managed by Viji |\r\n| `resizeCanvas(w, h)` | Not needed | Resizing is automatic |\r\n| `preload()` | Not available | Use `viji.image()` parameters or `fetch()` in `setup()` |\r\n| `mouseX`, `mouseY` | [`viji.pointer.x`](/p5/pointer#api-reference), [`viji.pointer.y`](/p5/pointer#api-reference) (or [`viji.mouse.x`](/p5/mouse#position), [`viji.mouse.y`](/p5/mouse#position)) | P5 input globals don't update in workers |\r\n| `frameRate(30)` | Not available | Viji controls the frame rate |\r\n| `keyPressed()`, `mouseClicked()` | Check state in `render()` | No event callbacks in worker environment |\r\n| Global mode (`background(0)`) | Instance mode (`p5.background(0)`) | Worker environment requires explicit namespacing |\r\n\r\n## Environment Constraints\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. One exception: `fetch()` is available, so you can load external data (JSON, etc.) from CDNs.\r\n\r\n## Next Steps\r\n\r\n- [Canvas & Resolution](/p5/canvas-resolution): [`viji.width`](/p5/canvas-resolution), [`viji.height`](/p5/canvas-resolution), responsive layouts\r\n- [Timing](/p5/timing): [`viji.time`](/p5/timing), [`viji.deltaTime`](/p5/timing), frame counting\r\n- [Drawing with P5](/p5/drawing): P5 drawing functions in Viji\r\n- [Parameters](/p5/parameters): sliders, colors, toggles\r\n- [Converting P5 Sketches](/p5/converting-sketches): migrate existing sketches\r\n- [API Reference](/p5/api-reference): full list of everything available"
         }
       ]
     },
@@ -4490,7 +4515,7 @@ export const docsApi = {
       "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 for a **2D** canvas:\r\n\r\n```javascript\r\n// @renderer p5\r\n```\r\n\r\nIf the sketch used `createCanvas(w, h, WEBGL)` or relies on the WEBGL renderer for the main canvas, use:\r\n\r\n```javascript\r\n// @renderer p5 webgl\r\n```\r\n\r\nDo not keep `createCanvas()` in the converted scene: Viji creates the canvas in the mode chosen by the directive.\r\n\r\n> [!IMPORTANT]\r\n> Without `// @renderer p5` (or `// @renderer p5 webgl`), 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": "# 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#api-reference), [`viji.pointer.y`](/p5/pointer#api-reference) (or [`viji.mouse.x`](/p5/mouse#position), [`viji.mouse.y`](/p5/mouse#position)) |\r\n| `keyIsPressed` | [`viji.keyboard.isPressed('a')`](/p5/keyboard#methods) |\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 for a **2D** canvas:\r\n\r\n```javascript\r\n// @renderer p5\r\n```\r\n\r\nIf the sketch used `createCanvas(w, h, WEBGL)` or relies on the WEBGL renderer for the main canvas, use:\r\n\r\n```javascript\r\n// @renderer p5 webgl\r\n```\r\n\r\nDo not keep `createCanvas()` in the converted scene: Viji creates the canvas in the mode chosen by the directive.\r\n\r\n> [!IMPORTANT]\r\n> Without `// @renderer p5` (or `// @renderer p5 webgl`), 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#why-use-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",
@@ -4621,7 +4646,7 @@ export const docsApi = {
       "content": [
         {
           "type": "text",
-          "markdown": "# Parameters\r\n\r\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.\r\n\r\n## Parameter Types\r\n\r\n| Type | Function | Value | Use For |\r\n|---|---|---|---|\r\n| [Slider](slider/) | [`viji.slider(default, config)`](slider/) | `number` | Continuous numeric ranges (speed, size, opacity) |\r\n| [Number](number/) | [`viji.number(default, config)`](number/) | `number` | Precise numeric input (counts, thresholds) |\r\n| [Color](color/) | [`viji.color(default, config)`](color/) | `string` | Hex color values (`'#rrggbb'`) |\r\n| [Toggle](toggle/) | [`viji.toggle(default, config)`](toggle/) | `boolean` | On/off switches (enable audio, show trail) |\r\n| [Select](select/) | [`viji.select(default, config)`](select/) | `string \\| number` | Dropdown from predefined options (blend mode, shape type) |\r\n| [Text](text/) | [`viji.text(default, config)`](text/) | `string` | Free-form text input (titles, labels) |\r\n| [Image](image/) | [`viji.image(default, config)`](image/) | `ImageBitmap \\| null` | User-uploaded images and textures |\r\n| [Button](button/) | [`viji.button(config)`](button/) | `boolean` | Momentary trigger: true for 1 frame (resets, spawns) |\r\n| Coordinate | [`viji.coordinate(default, config)`](coordinate/) | `{ x: number, y: number }` | 2D coordinate pad control. Both axes range from -1 to 1. |\r\n\r\n## Basic Pattern\r\n\r\n```javascript\r\n// @renderer p5\r\n\r\n// 1. Define at top level: runs once\r\nconst speed = viji.slider(1, { min: 0.1, max: 5, label: 'Speed' });\r\nconst color = viji.color('#ff6600', { label: 'Color' });\r\nconst mirror = viji.toggle(false, { label: 'Mirror' });\r\n\r\n// 2. Read .value in render(): updates in real-time\r\nfunction render(viji, p5) {\r\n  const r = parseInt(color.value.slice(1, 3), 16);\r\n  const g = parseInt(color.value.slice(3, 5), 16);\r\n  const b = parseInt(color.value.slice(5, 7), 16);\r\n  p5.fill(r, g, b);\r\n  // speed.value, mirror.value, etc.\r\n}\r\n```\r\n\r\n> [!WARNING]\r\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.\r\n\r\n## Image Parameters in P5\r\n\r\nWhen using [`viji.image()`](image/) with P5 drawing functions, use the `.p5` property instead of `.value`:\r\n\r\n```javascript\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\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.\r\n\r\n## Common Config Keys\r\n\r\nAll parameter types share these optional configuration keys:\r\n\r\n| Key | Type | Default | Description |\r\n|---|---|---|---|\r\n| `label` | `string` | **(required)** | Display name shown in the parameter UI |\r\n| `description` | `string` |  | Tooltip or help text |\r\n| `group` | `string` | `'general'` | Group name for organizing parameters: see [Grouping](grouping/) |\r\n| `category` | `ParameterCategory` | `'general'` | Controls visibility based on capabilities: see [Categories](categories/) |\r\n\r\n## Organization\r\n\r\nAs scenes grow, you'll want to organize parameters into logical sections and control when they're visible:\r\n\r\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.\r\n- **[Categories](categories/)**: Tag parameters as `'general'`, `'audio'`, `'video'`, or `'interaction'` to automatically show/hide them based on what inputs are currently active.\r\n\r\n## Related\r\n\r\n- [Slider](slider/): the most common parameter type\r\n- [Coordinate](coordinate/): 2D position control\r\n- [Image](image/): image parameters with the `.p5` property\r\n- [Grouping](grouping/): organizing parameters into named groups\r\n- [Categories](categories/): visibility based on capabilities\r\n- [Native Parameters](/native/parameters): same system in the native renderer\r\n- [Shader Parameters](/shader/parameters): comment-directive syntax for shaders\r\n- [Best Practices](/getting-started/best-practices): essential patterns for all renderers"
+          "markdown": "# Parameters\r\n\r\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.\r\n\r\n## Parameter Types\r\n\r\n| Type | Function | Value | Use For |\r\n|---|---|---|---|\r\n| [Slider](slider/) | [`viji.slider(default, config)`](slider/) | `number` | Continuous numeric ranges (speed, size, opacity) |\r\n| [Number](number/) | [`viji.number(default, config)`](number/) | `number` | Precise numeric input (counts, thresholds) |\r\n| [Color](color/) | [`viji.color(default, config)`](color/) | `string` | Hex color values (`'#rrggbb'`) |\r\n| [Toggle](toggle/) | [`viji.toggle(default, config)`](toggle/) | `boolean` | On/off switches (enable audio, show trail) |\r\n| [Select](select/) | [`viji.select(default, config)`](select/) | `string \\| number` | Dropdown from predefined options (blend mode, shape type) |\r\n| [Text](text/) | [`viji.text(default, config)`](text/) | `string` | Free-form text input (titles, labels) |\r\n| [Image](image/) | [`viji.image(default, config)`](image/) | `ImageBitmap \\| null` | User-uploaded images and textures |\r\n| [Button](button/) | [`viji.button(config)`](button/) | `boolean` | Momentary trigger: true for 1 frame (resets, spawns) |\r\n| [Coordinate](coordinate/) | [`viji.coordinate(default, config)`](coordinate/) | `{ x: number, y: number }` | 2D coordinate pad. Both axes range from -1 to 1. |\r\n\r\n## Basic Pattern\r\n\r\n```javascript\r\n// @renderer p5\r\n\r\n// 1. Define at top level: runs once\r\nconst speed = viji.slider(1, { min: 0.1, max: 5, label: 'Speed' });\r\nconst color = viji.color('#ff6600', { label: 'Color' });\r\nconst mirror = viji.toggle(false, { label: 'Mirror' });\r\n\r\n// 2. Read .value in render(): updates in real-time\r\nfunction render(viji, p5) {\r\n  const r = parseInt(color.value.slice(1, 3), 16);\r\n  const g = parseInt(color.value.slice(3, 5), 16);\r\n  const b = parseInt(color.value.slice(5, 7), 16);\r\n  p5.fill(r, g, b);\r\n  // speed.value, mirror.value, etc.\r\n}\r\n```\r\n\r\n> [!WARNING]\r\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.\r\n\r\n## Image Parameters in P5\r\n\r\nWhen using [`viji.image()`](image/) with P5 drawing functions, use the `.p5` property instead of `.value`:\r\n\r\n```javascript\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\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.\r\n\r\n## Common Config Keys\r\n\r\nAll parameter types share these optional configuration keys:\r\n\r\n| Key | Type | Default | Description |\r\n|---|---|---|---|\r\n| `label` | `string` | **(required)** | Display name shown in the parameter UI |\r\n| `description` | `string` |  | Tooltip or help text |\r\n| `group` | `string` | `'general'` | Group name for organizing parameters: see [Grouping](grouping/) |\r\n| `category` | `ParameterCategory` | `'general'` | Controls visibility based on capabilities: see [Categories](categories/) |\r\n\r\n## Organization\r\n\r\nAs scenes grow, you'll want to organize parameters into logical sections and control when they're visible:\r\n\r\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.\r\n- **[Categories](categories/)**: Tag parameters as `'general'`, `'audio'`, `'video'`, or `'interaction'` to automatically show/hide them based on what inputs are currently active.\r\n\r\n## Related\r\n\r\n- [Slider](slider/): the most common parameter type\r\n- [Coordinate](coordinate/): 2D position control\r\n- [Image](image/): image parameters with the `.p5` property\r\n- [Grouping](grouping/): organizing parameters into named groups\r\n- [Categories](categories/): visibility based on capabilities\r\n- [Native Parameters](/native/parameters): same system in the native renderer\r\n- [Shader Parameters](/shader/parameters): comment-directive syntax for shaders\r\n- [Best Practices](/getting-started/best-practices): essential patterns for all renderers"
         }
       ]
     },
@@ -4650,6 +4675,11 @@ export const docsApi = {
           "level": 2,
           "text": "Resolution-Agnostic Sizing"
         },
+        {
+          "id": "smooth-animation-speed",
+          "level": 2,
+          "text": "Smooth Animation Speed"
+        },
         {
           "id": "related",
           "level": 2,
@@ -4664,19 +4694,19 @@ export const docsApi = {
         {
           "type": "live-example",
           "title": "Slider Control",
-          "sceneCode": "const bg = viji.color('#0f0f1a', { label: 'Background' });\r\nconst dotColor = viji.color('#44ddff', { label: 'Color' });\r\nconst radius = viji.slider(0.25, { min: 0.05, max: 0.45, step: 0.01, label: 'Radius' });\r\nconst count = viji.slider(12, { min: 3, max: 30, step: 1, label: 'Count' });\r\nconst speed = viji.slider(1, { min: 0, max: 5, step: 0.1, label: 'Speed' });\r\nlet phase = 0;\r\n\r\nfunction render(viji, p5) {\r\n  phase += speed.value * viji.deltaTime;\r\n  p5.background(bg.value);\r\n  p5.fill(dotColor.value);\r\n  p5.noStroke();\r\n\r\n  const unit = Math.min(p5.width, p5.height);\r\n  const r = unit * radius.value;\r\n  const n = count.value;\r\n  const dotR = unit * 0.02;\r\n\r\n  for (let i = 0; i < n; i++) {\r\n    const a = (i / n) * p5.TWO_PI + phase;\r\n    const x = p5.width / 2 + Math.cos(a) * r;\r\n    const y = p5.height / 2 + Math.sin(a) * r;\r\n    p5.ellipse(x, y, dotR * 2);\r\n  }\r\n}\r\n",
+          "sceneCode": "// @renderer p5\r\n\r\nconst radius = viji.slider(0.25, { min: 0.05, max: 0.45, step: 0.01, label: 'Radius' });\r\nconst count = viji.slider(12, { min: 3, max: 30, step: 1, label: 'Count' });\r\nconst speed = viji.slider(1, { min: 0, max: 5, step: 0.1, label: 'Speed' });\r\nconst dotColor = viji.color('#44ddff', { label: 'Color' });\r\nconst bg = viji.color('#0f0f1a', { label: 'Background' });\r\nlet phase = 0;\r\n\r\nfunction render(viji, p5) {\r\n  phase += speed.value * viji.deltaTime;\r\n  p5.background(bg.value);\r\n  p5.fill(dotColor.value);\r\n  p5.noStroke();\r\n\r\n  const unit = Math.min(p5.width, p5.height);\r\n  const r = unit * radius.value;\r\n  const n = count.value;\r\n  const dotR = unit * 0.02;\r\n\r\n  for (let i = 0; i < n; i++) {\r\n    const a = (i / n) * p5.TWO_PI + phase;\r\n    const x = p5.width / 2 + Math.cos(a) * r;\r\n    const y = p5.height / 2 + Math.sin(a) * r;\r\n    p5.ellipse(x, y, dotR * 2);\r\n  }\r\n}\r\n",
           "sceneFile": "slider-p5.scene.js"
         },
         {
           "type": "text",
-          "markdown": "## Resolution-Agnostic Sizing\r\n\r\nWhen using a slider to control sizes or positions, use normalized values (`0` to `1`) and scale relative to `p5.width` and `p5.height`:\r\n\r\n```javascript\r\nconst size = viji.slider(0.15, {\r\n  min: 0.02,\r\n  max: 0.5,\r\n  step: 0.01,\r\n  label: 'Size'\r\n});\r\n\r\nfunction render(viji, p5) {\r\n  const pixelSize = size.value * Math.min(p5.width, p5.height);\r\n  // pixelSize adapts automatically to any resolution\r\n}\r\n```\r\n\r\n## Related\r\n\r\n- [Color](../color/): color picker parameter\r\n- [Number](../number/): numeric input without a slider track\r\n- [Select](../select/): dropdown selection from predefined options\r\n- [Grouping](../grouping/): organizing parameters into named groups\r\n- [Categories](../categories/): controlling parameter visibility\r\n- [Native Slider](/native/parameters/slider): equivalent for the Native renderer\r\n- [Shader Slider](/shader/parameters/slider): equivalent for the Shader renderer"
+          "markdown": "## Resolution-Agnostic Sizing\r\n\r\nWhen using a slider to control sizes or positions, use normalized values (`0` to `1`) and scale relative to `p5.width` and `p5.height`:\r\n\r\n```javascript\r\nconst size = viji.slider(0.15, {\r\n  min: 0.02,\r\n  max: 0.5,\r\n  step: 0.01,\r\n  label: 'Size'\r\n});\r\n\r\nfunction render(viji, p5) {\r\n  const pixelSize = size.value * Math.min(p5.width, p5.height);\r\n  // pixelSize adapts automatically to any resolution\r\n}\r\n```\r\n\r\n## Smooth Animation Speed\r\n\r\nWhen a slider drives animation speed, **never** multiply `viji.time` by the slider value directly: changing the slider recalculates the entire phase history and causes a visible jump.\r\n\r\n```javascript\r\nconst wave = Math.sin(viji.time * speed.value); // jumps when speed changes\r\n```\r\n\r\nInstead, accumulate `speed × deltaTime` so the slider only affects future frames:\r\n\r\n```javascript\r\nconst speed = viji.slider(1, { min: 0.1, max: 5, label: 'Speed' });\r\nlet phase = 0;\r\n\r\nfunction render(viji, p5) {\r\n  phase += speed.value * viji.deltaTime;\r\n  const wave = Math.sin(phase);\r\n}\r\n```\r\n\r\nSee [Accumulator Pattern](/getting-started/best-practices#accumulator-pattern-parameter-driven-speed) for the full rule and the nested-multiplication trap.\r\n\r\n## Related\r\n\r\n- [Color](../color/): color picker parameter\r\n- [Number](../number/): numeric input without a slider track\r\n- [Select](../select/): dropdown selection from predefined options\r\n- [Grouping](../grouping/): organizing parameters into named groups\r\n- [Categories](../categories/): controlling parameter visibility\r\n- [Native Slider](/native/parameters/slider): equivalent for the Native renderer\r\n- [Shader Slider](/shader/parameters/slider): equivalent for the Shader renderer"
         }
       ]
     },
     "p5-param-color": {
       "id": "p5-param-color",
       "title": "p5-param-color",
-      "description": "Create a color picker control that returns a hex color string in P5.js scenes.",
+      "description": "Create a color picker control with hex, RGB, and HSB accessors in P5.js scenes.",
       "headings": [
         {
           "id": "parameters",
@@ -4694,9 +4724,14 @@ export const docsApi = {
           "text": "Usage"
         },
         {
-          "id": "parsing-for-p5-color-functions",
+          "id": "input-forms-for-defaultvalue",
           "level": 2,
-          "text": "Parsing for P5 Color Functions"
+          "text": "Input forms for defaultValue"
+        },
+        {
+          "id": "working-with-p5-color-modes",
+          "level": 2,
+          "text": "Working with P5 color modes"
         },
         {
           "id": "related",
@@ -4707,17 +4742,17 @@ export const docsApi = {
       "content": [
         {
           "type": "text",
-          "markdown": "# viji.color()\r\n\r\n```\r\ncolor(defaultValue: string, config: ColorConfig): ColorParameter\r\n```\r\n\r\nCreates a color picker parameter. The host renders it as a color swatch that opens a full color picker when clicked.\r\n\r\n## Parameters\r\n\r\n| Name | Type | Required | Default | Description |\r\n|------|------|----------|---------|-------------|\r\n| `defaultValue` | `string` | Yes |  | Initial hex color (e.g., `'#ff6600'`) |\r\n| `config.label` | `string` | Yes |  | Display name shown in the parameter UI |\r\n| `config.description` | `string` | No |  | Tooltip or help text |\r\n| `config.group` | `string` | No | `'general'` | Group name: see [Grouping](../grouping/) |\r\n| `config.category` | `ParameterCategory` | No | `'general'` | Visibility category: see [Categories](../categories/) |\r\n\r\n## Return Value\r\n\r\nReturns a `ColorParameter` object:\r\n\r\n| Property | Type | Description |\r\n|----------|------|-------------|\r\n| `value` | `string` | Current hex color (e.g., `'#ff6600'`). Updates in real-time. |\r\n| `label` | `string` | Display label |\r\n| `description` | `string \\| undefined` | Description text |\r\n| `group` | `string` | Group name |\r\n| `category` | `ParameterCategory` | Parameter category |\r\n\r\n## Usage\r\n\r\n```javascript\r\nconst bg = viji.color('#1a1a2e', { label: 'Background' });\r\nconst accent = viji.color('#ff6600', { label: 'Accent' });\r\n\r\nfunction render(viji, p5) {\r\n  p5.background(bg.value);\r\n  p5.fill(accent.value);\r\n  p5.noStroke();\r\n  p5.ellipse(p5.width / 2, p5.height / 2, p5.width * 0.5);\r\n}\r\n```\r\n\r\nThe `.value` is always a 6-digit hex string (`#rrggbb`). P5.js accepts hex strings directly in `p5.fill()`, `p5.stroke()`, and `p5.background()`.\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."
+          "markdown": "# viji.color()\r\n\r\n```\r\ncolor(defaultValue: ColorInput, config: ColorConfig): ColorParameter\r\n```\r\n\r\nCreates a color picker parameter. The host renders it as a color swatch that opens a full color picker when clicked. The returned object exposes the live value as canonical hex plus auto-derived `.rgb` and `.hsb` accessors that map cleanly onto P5's color modes.\r\n\r\n## Parameters\r\n\r\n| Name | Type | Required | Default | Description |\r\n|------|------|----------|---------|-------------|\r\n| `defaultValue` | `ColorInput` | Yes |  | Initial color. Accepts hex (3- or 6-digit), `{ r, g, b }` (0..255), `{ h, s, b }` (0..360 / 0..100), `'rgb(...)'` or `'hsl(...)'` strings. |\r\n| `config.label` | `string` | Yes |  | Display name shown in the parameter UI |\r\n| `config.description` | `string` | No |  | Tooltip or help text |\r\n| `config.group` | `string` | No | `'general'` | Group name: see [Grouping](../grouping/) |\r\n| `config.category` | `ParameterCategory` | No | `'general'` | Visibility category: see [Categories](../categories/) |\r\n\r\n## Return Value\r\n\r\nReturns a `ColorParameter` object:\r\n\r\n| Property | Type | Description |\r\n|----------|------|-------------|\r\n| `value` | `string` | Canonical lowercase hex `#rrggbb`. Updates in real-time. |\r\n| `rgb` | `{ r: number, g: number, b: number }` | Integer RGB components in `0..255`. Frozen, recomputed when `value` changes. |\r\n| `hsb` | `{ h: number, s: number, b: number }` | HSB components: `h` in `0..360`, `s` and `b` in `0..100`. Frozen, recomputed when `value` changes. |\r\n| `label` | `string` | Display label |\r\n| `description` | `string \\| undefined` | Description text |\r\n| `group` | `string` | Group name |\r\n| `category` | `ParameterCategory` | Parameter category |\r\n\r\n## Usage\r\n\r\n```javascript\r\nconst bg = viji.color('#1a1a2e', { label: 'Background' });\r\nconst accent = viji.color('#ff6600', { label: 'Accent' });\r\n\r\nfunction render(viji, p5) {\r\n  p5.background(bg.value);\r\n  p5.fill(accent.value);\r\n  p5.noStroke();\r\n  p5.ellipse(p5.width / 2, p5.height / 2, p5.width * 0.5);\r\n}\r\n```\r\n\r\nThe `.value` is always a 6-digit lowercase hex string (`#rrggbb`). P5.js accepts hex strings directly in `p5.fill()`, `p5.stroke()`, and `p5.background()`.\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."
         },
         {
           "type": "live-example",
           "title": "Color Picker",
-          "sceneCode": "const bg = viji.color('#0f0f1a', { label: 'Background' });\r\nconst color1 = viji.color('#ff4488', { label: 'Color 1', group: 'colors' });\r\nconst color2 = viji.color('#4488ff', { label: 'Color 2', group: 'colors' });\r\nconst count = viji.slider(6, { min: 2, max: 16, step: 1, label: 'Count' });\r\n\r\nfunction render(viji, p5) {\r\n  p5.background(bg.value);\r\n  p5.noStroke();\r\n\r\n  const n = count.value;\r\n  for (let i = 0; i < n; i++) {\r\n    const t = i / (n - 1);\r\n    const col = p5.lerpColor(p5.color(color1.value), p5.color(color2.value), t);\r\n    p5.fill(col);\r\n    const a = (i / n) * p5.TWO_PI + viji.time;\r\n    const r = Math.min(p5.width, p5.height) * 0.3;\r\n    const x = p5.width / 2 + Math.cos(a) * r;\r\n    const y = p5.height / 2 + Math.sin(a) * r;\r\n    p5.ellipse(x, y, Math.min(p5.width, p5.height) * 0.08);\r\n  }\r\n}\r\n",
+          "sceneCode": "// @renderer p5\r\n\r\nconst color1 = viji.color('#ff4488',                  { label: 'Color 1 (hex)',    group: 'colors' });\r\nconst color2 = viji.color({ h: 215, s: 75, b: 100 },  { label: 'Color 2 (HSB obj)', group: 'colors' });\r\nconst count  = viji.slider(6, { min: 2, max: 16, step: 1, label: 'Count' });\r\nconst bg     = viji.color('#0f0f1a', { label: 'Background' });\r\n\r\nfunction render(viji, p5) {\r\n  p5.background(bg.value);\r\n  p5.noStroke();\r\n\r\n  const n = count.value;\r\n  for (let i = 0; i < n; i++) {\r\n    const t = i / (n - 1);\r\n\r\n    const r = color1.rgb.r + (color2.rgb.r - color1.rgb.r) * t;\r\n    const g = color1.rgb.g + (color2.rgb.g - color1.rgb.g) * t;\r\n    const b = color1.rgb.b + (color2.rgb.b - color1.rgb.b) * t;\r\n    const alpha = 80 + 175 * (1 - Math.abs(2 * t - 1));\r\n\r\n    p5.fill(r, g, b, alpha);\r\n\r\n    const a = (i / n) * p5.TWO_PI + viji.time;\r\n    const radius = Math.min(p5.width, p5.height) * 0.3;\r\n    const x = p5.width / 2 + Math.cos(a) * radius;\r\n    const y = p5.height / 2 + Math.sin(a) * radius;\r\n    p5.ellipse(x, y, Math.min(p5.width, p5.height) * 0.08);\r\n  }\r\n\r\n  p5.colorMode(p5.HSB, 360, 100, 100);\r\n  const center = color1.hsb;\r\n  p5.fill(center.h, center.s, center.b);\r\n  p5.ellipse(p5.width / 2, p5.height / 2, Math.min(p5.width, p5.height) * 0.06);\r\n  p5.colorMode(p5.RGB, 255);\r\n}\r\n",
           "sceneFile": "color-p5.scene.js"
         },
         {
           "type": "text",
-          "markdown": "## Parsing for P5 Color Functions\r\n\r\nIf you need to decompose a hex value for use with `p5.color()` or alpha blending:\r\n\r\n```javascript\r\nconst c = viji.color('#ff6600', { label: 'Color' });\r\n\r\nfunction render(viji, p5) {\r\n  const col = p5.color(c.value);\r\n  col.setAlpha(128);\r\n  p5.fill(col);\r\n  // ...\r\n}\r\n```\r\n\r\n## Related\r\n\r\n- [Slider](../slider/): numeric slider parameter\r\n- [Toggle](../toggle/): boolean on/off parameter\r\n- [Grouping](../grouping/): organizing parameters into named groups\r\n- [Categories](../categories/): controlling parameter visibility\r\n- [Native Color](/native/parameters/color): equivalent for the Native renderer\r\n- [Shader Color](/shader/parameters/color): equivalent for the Shader renderer"
+          "markdown": "## Input forms for `defaultValue`\r\n\r\n```javascript\r\nviji.color('#ff6600',                       { label: 'A' });  // 6-digit hex\r\nviji.color('#f60',                          { label: 'B' });  // 3-digit hex (auto-expanded)\r\nviji.color({ r: 255, g: 102, b: 0 },        { label: 'C' });  // RGB object, 0..255\r\nviji.color({ h: 24, s: 100, b: 100 },       { label: 'D' });  // HSB object, 0..360 / 0..100\r\nviji.color('rgb(255, 102, 0)',              { label: 'E' });  // CSS rgb()\r\nviji.color('hsl(24, 100%, 50%)',            { label: 'F' });  // CSS hsl()\r\n```\r\n\r\nThe same forms are accepted by `core.setParameter('myColor', ...)` from the host.\r\n\r\n## Working with P5 color modes\r\n\r\nThe component ranges of `.rgb` and `.hsb` align with P5's defaults for `colorMode(RGB, 255)` and `colorMode(HSB, 360, 100, 100)`, so you can pass them straight through:\r\n\r\n```javascript\r\nconst c = viji.color('#ff6600', { label: 'Tint' });\r\n\r\nfunction render(viji, p5) {\r\n  // RGB with custom alpha — defaults to colorMode(RGB, 255)\r\n  const { r, g, b } = c.rgb;\r\n  p5.fill(r, g, b, 128);\r\n  p5.rect(0, 0, p5.width / 2, p5.height);\r\n\r\n  // HSB with rotated hue — switch to HSB mode and feed components directly\r\n  p5.colorMode(p5.HSB, 360, 100, 100);\r\n  const { h, s, b: brightness } = c.hsb;\r\n  p5.fill((h + 60) % 360, s, brightness);\r\n  p5.rect(p5.width / 2, 0, p5.width / 2, p5.height);\r\n  p5.colorMode(p5.RGB, 255); // restore default for the rest of the frame\r\n}\r\n```\r\n\r\n`c.value`, `c.rgb`, and `c.hsb` always reflect the current picker value; they update together whenever the user changes the color.\r\n\r\n## Related\r\n\r\n- [Slider](../slider/): numeric slider parameter\r\n- [Toggle](../toggle/): boolean on/off parameter\r\n- [Grouping](../grouping/): organizing parameters into named groups\r\n- [Categories](../categories/): controlling parameter visibility\r\n- [Native Color](/native/parameters/color): equivalent for the Native renderer\r\n- [Shader Color](/shader/parameters/color): equivalent for the Shader renderer"
         }
       ]
     },
@@ -4770,7 +4805,7 @@ export const docsApi = {
         {
           "type": "live-example",
           "title": "Toggle Features",
-          "sceneCode": "const bg = viji.color('#0f0f1a', { label: 'Background' });\r\nconst dotColor = viji.color('#ff6644', { label: 'Color' });\r\nconst trail = viji.toggle(true, { label: 'Trail Effect' });\r\nconst animate = viji.toggle(true, { label: 'Animate' });\r\n\r\nlet angle = 0;\r\n\r\nfunction render(viji, p5) {\r\n  if (trail.value) {\r\n    p5.background(p5.color(bg.value + '0a'));\r\n  } else {\r\n    p5.background(bg.value);\r\n  }\r\n\r\n  if (animate.value) {\r\n    angle += viji.deltaTime;\r\n  }\r\n\r\n  p5.noStroke();\r\n  p5.fill(dotColor.value);\r\n  const r = Math.min(p5.width, p5.height) * 0.3;\r\n  const x = p5.width / 2 + Math.cos(angle) * r;\r\n  const y = p5.height / 2 + Math.sin(angle * 1.3) * r;\r\n  p5.ellipse(x, y, Math.min(p5.width, p5.height) * 0.06);\r\n}\r\n",
+          "sceneCode": "// @renderer p5\r\n\r\nconst trail = viji.toggle(true, { label: 'Trail Effect' });\r\nconst animate = viji.toggle(true, { label: 'Animate' });\r\nconst dotColor = viji.color('#ff6644', { label: 'Color' });\r\nconst bg = viji.color('#0f0f1a', { label: 'Background' });\r\n\r\nlet angle = 0;\r\n\r\nfunction render(viji, p5) {\r\n  if (trail.value) {\r\n    p5.background(p5.color(bg.value + '0a'));\r\n  } else {\r\n    p5.background(bg.value);\r\n  }\r\n\r\n  if (animate.value) {\r\n    angle += viji.deltaTime;\r\n  }\r\n\r\n  p5.noStroke();\r\n  p5.fill(dotColor.value);\r\n  const r = Math.min(p5.width, p5.height) * 0.3;\r\n  const x = p5.width / 2 + Math.cos(angle) * r;\r\n  const y = p5.height / 2 + Math.sin(angle * 1.3) * r;\r\n  p5.ellipse(x, y, Math.min(p5.width, p5.height) * 0.06);\r\n}\r\n",
           "sceneFile": "toggle-p5.scene.js"
         },
         {
@@ -4818,7 +4853,7 @@ export const docsApi = {
         {
           "type": "live-example",
           "title": "Shape Selector",
-          "sceneCode": "const bg = viji.color('#0f0f1a', { label: 'Background' });\r\nconst fillColor = viji.color('#44ddff', { label: 'Fill' });\r\nconst shape = viji.select('ellipse', {\r\n  options: ['ellipse', 'rect', 'triangle'],\r\n  label: 'Shape'\r\n});\r\nconst size = viji.slider(0.3, { min: 0.05, max: 0.45, step: 0.01, label: 'Size' });\r\n\r\nfunction render(viji, p5) {\r\n  p5.background(bg.value);\r\n  p5.fill(fillColor.value);\r\n  p5.noStroke();\r\n\r\n  const s = Math.min(p5.width, p5.height) * size.value;\r\n  const cx = p5.width / 2;\r\n  const cy = p5.height / 2;\r\n\r\n  switch (shape.value) {\r\n    case 'ellipse':\r\n      p5.ellipse(cx, cy, s * 2);\r\n      break;\r\n    case 'rect':\r\n      p5.rectMode(p5.CENTER);\r\n      p5.rect(cx, cy, s * 2, s * 2);\r\n      break;\r\n    case 'triangle':\r\n      p5.triangle(\r\n        cx, cy - s,\r\n        cx - s, cy + s,\r\n        cx + s, cy + s\r\n      );\r\n      break;\r\n  }\r\n}\r\n",
+          "sceneCode": "// @renderer p5\r\n\r\nconst shape = viji.select('ellipse', {\r\n  options: ['ellipse', 'rect', 'triangle'],\r\n  label: 'Shape'\r\n});\r\nconst size = viji.slider(0.3, { min: 0.05, max: 0.45, step: 0.01, label: 'Size' });\r\nconst fillColor = viji.color('#44ddff', { label: 'Fill' });\r\nconst bg = viji.color('#0f0f1a', { label: 'Background' });\r\n\r\nfunction render(viji, p5) {\r\n  p5.background(bg.value);\r\n  p5.fill(fillColor.value);\r\n  p5.noStroke();\r\n\r\n  const s = Math.min(p5.width, p5.height) * size.value;\r\n  const cx = p5.width / 2;\r\n  const cy = p5.height / 2;\r\n\r\n  switch (shape.value) {\r\n    case 'ellipse':\r\n      p5.ellipse(cx, cy, s * 2);\r\n      break;\r\n    case 'rect':\r\n      p5.rectMode(p5.CENTER);\r\n      p5.rect(cx, cy, s * 2, s * 2);\r\n      break;\r\n    case 'triangle':\r\n      p5.triangle(\r\n        cx, cy - s,\r\n        cx - s, cy + s,\r\n        cx + s, cy + s\r\n      );\r\n      break;\r\n  }\r\n}\r\n",
           "sceneFile": "select-p5.scene.js"
         },
         {
@@ -4852,6 +4887,11 @@ export const docsApi = {
           "level": 2,
           "text": "Number vs Slider"
         },
+        {
+          "id": "smooth-animation-speed",
+          "level": 2,
+          "text": "Smooth Animation Speed"
+        },
         {
           "id": "related",
           "level": 2,
@@ -4866,12 +4906,12 @@ export const docsApi = {
         {
           "type": "live-example",
           "title": "Number Input",
-          "sceneCode": "const bg = viji.color('#0f0f1a', { label: 'Background' });\r\nconst dotColor = viji.color('#ff88cc', { label: 'Color' });\r\nconst cols = viji.number(6, { min: 2, max: 16, step: 1, label: 'Columns' });\r\nconst rows = viji.number(6, { min: 2, max: 16, step: 1, label: 'Rows' });\r\n\r\nfunction render(viji, p5) {\r\n  p5.background(bg.value);\r\n  p5.fill(dotColor.value);\r\n  p5.noStroke();\r\n\r\n  const margin = Math.min(p5.width, p5.height) * 0.1;\r\n  const cellW = (p5.width - margin * 2) / cols.value;\r\n  const cellH = (p5.height - margin * 2) / rows.value;\r\n  const r = Math.min(cellW, cellH) * 0.3;\r\n\r\n  for (let c = 0; c < cols.value; c++) {\r\n    for (let row = 0; row < rows.value; row++) {\r\n      const x = margin + cellW * (c + 0.5);\r\n      const y = margin + cellH * (row + 0.5);\r\n      const wave = Math.sin(viji.time * 2 + c * 0.5 + row * 0.5) * 0.5 + 0.5;\r\n      p5.ellipse(x, y, r * wave * 2);\r\n    }\r\n  }\r\n}\r\n",
+          "sceneCode": "// @renderer p5\r\n\r\nconst cols = viji.number(6, { min: 2, max: 16, step: 1, label: 'Columns' });\r\nconst rows = viji.number(6, { min: 2, max: 16, step: 1, label: 'Rows' });\r\nconst dotColor = viji.color('#ff88cc', { label: 'Color' });\r\nconst bg = viji.color('#0f0f1a', { label: 'Background' });\r\n\r\nfunction render(viji, p5) {\r\n  p5.background(bg.value);\r\n  p5.fill(dotColor.value);\r\n  p5.noStroke();\r\n\r\n  const margin = Math.min(p5.width, p5.height) * 0.1;\r\n  const cellW = (p5.width - margin * 2) / cols.value;\r\n  const cellH = (p5.height - margin * 2) / rows.value;\r\n  const r = Math.min(cellW, cellH) * 0.3;\r\n\r\n  for (let c = 0; c < cols.value; c++) {\r\n    for (let row = 0; row < rows.value; row++) {\r\n      const x = margin + cellW * (c + 0.5);\r\n      const y = margin + cellH * (row + 0.5);\r\n      const wave = Math.sin(viji.time * 2 + c * 0.5 + row * 0.5) * 0.5 + 0.5;\r\n      p5.ellipse(x, y, r * wave * 2);\r\n    }\r\n  }\r\n}\r\n",
           "sceneFile": "number-p5.scene.js"
         },
         {
           "type": "text",
-          "markdown": "## Number vs Slider\r\n\r\nBoth accept the same config options (`min`, `max`, `step`) and return the same shape. The difference is the host UI:\r\n\r\n| | Slider | Number |\r\n|--|--------|--------|\r\n| UI | Draggable track | Text input field |\r\n| Best for | Continuous ranges, visual tuning | Precise values, integer counts |\r\n| Interaction | Drag / click | Type / arrow keys |\r\n\r\nUse [`viji.slider()`](../slider/) when the artist needs to \"feel\" the value visually. Use `viji.number()` when exact entry matters.\r\n\r\n## Related\r\n\r\n- [Slider](../slider/): numeric slider with a draggable track\r\n- [Select](../select/): dropdown for discrete choices\r\n- [Grouping](../grouping/): organizing parameters into named groups\r\n- [Categories](../categories/): controlling parameter visibility\r\n- [Native Number](/native/parameters/number): equivalent for the Native renderer\r\n- [Shader Number](/shader/parameters/number): equivalent for the Shader renderer"
+          "markdown": "## Number vs Slider\r\n\r\nBoth accept the same config options (`min`, `max`, `step`) and return the same shape. The difference is the host UI:\r\n\r\n| | Slider | Number |\r\n|--|--------|--------|\r\n| UI | Draggable track | Text input field |\r\n| Best for | Continuous ranges, visual tuning | Precise values, integer counts |\r\n| Interaction | Drag / click | Type / arrow keys |\r\n\r\nUse [`viji.slider()`](../slider/) when the artist needs to \"feel\" the value visually. Use `viji.number()` when exact entry matters.\r\n\r\n## Smooth Animation Speed\r\n\r\nWhen a number value drives animation speed, the same accumulator pattern applies: never multiply `viji.time` by the parameter directly, or the animation will jump when the value changes. See [Slider: Smooth Animation Speed](../slider/#smooth-animation-speed) for the wrong/right examples — the pattern is identical for `viji.number()`.\r\n\r\n## Related\r\n\r\n- [Slider](../slider/): numeric slider with a draggable track\r\n- [Select](../select/): dropdown for discrete choices\r\n- [Grouping](../grouping/): organizing parameters into named groups\r\n- [Categories](../categories/): controlling parameter visibility\r\n- [Native Number](/native/parameters/number): equivalent for the Native renderer\r\n- [Shader Number](/shader/parameters/number): equivalent for the Shader renderer"
         }
       ]
     },
@@ -4909,7 +4949,7 @@ export const docsApi = {
         {
           "type": "live-example",
           "title": "Text Display",
-          "sceneCode": "const bg = viji.color('#0f0f1a', { label: 'Background' });\r\nconst textColor = viji.color('#ffffff', { label: 'Text Color' });\r\nconst message = viji.text('Viji', { label: 'Message', maxLength: 30 });\r\nconst fontSize = viji.slider(0.12, { min: 0.03, max: 0.3, step: 0.01, label: 'Font Size' });\r\n\r\nfunction render(viji, p5) {\r\n  p5.background(bg.value);\r\n  p5.fill(textColor.value);\r\n  p5.noStroke();\r\n  p5.textAlign(p5.CENTER, p5.CENTER);\r\n  p5.textSize(Math.min(p5.width, p5.height) * fontSize.value);\r\n\r\n  const wave = Math.sin(viji.time * 2) * Math.min(p5.width, p5.height) * 0.02;\r\n  p5.text(message.value, p5.width / 2, p5.height / 2 + wave);\r\n}\r\n",
+          "sceneCode": "// @renderer p5\r\n\r\nconst message = viji.text('Viji', { label: 'Message', maxLength: 30 });\r\nconst fontSize = viji.slider(0.12, { min: 0.03, max: 0.3, step: 0.01, label: 'Font Size' });\r\nconst textColor = viji.color('#ffffff', { label: 'Text Color' });\r\nconst bg = viji.color('#0f0f1a', { label: 'Background' });\r\n\r\nfunction render(viji, p5) {\r\n  p5.background(bg.value);\r\n  p5.fill(textColor.value);\r\n  p5.noStroke();\r\n  p5.textAlign(p5.CENTER, p5.CENTER);\r\n  p5.textSize(Math.min(p5.width, p5.height) * fontSize.value);\r\n\r\n  const wave = Math.sin(viji.time * 2) * Math.min(p5.width, p5.height) * 0.02;\r\n  p5.text(message.value, p5.width / 2, p5.height / 2 + wave);\r\n}\r\n",
           "sceneFile": "text-p5.scene.js"
         },
         {
@@ -4962,7 +5002,7 @@ export const docsApi = {
         {
           "type": "live-example",
           "title": "Image Upload",
-          "sceneCode": "const bg = viji.color('#0f0f1a', { label: 'Background' });\r\nconst tex = viji.image(null, { label: 'Image' });\r\nconst opacity = viji.slider(255, { min: 0, max: 255, step: 1, label: 'Opacity' });\r\nconst scale = viji.slider(1, { min: 0.2, max: 2, step: 0.05, label: 'Scale' });\r\n\r\nfunction render(viji, p5) {\r\n  p5.background(bg.value);\r\n\r\n  if (tex.value) {\r\n    const img = tex.p5;\r\n    const imgAspect = img.width / img.height;\r\n    const canvasAspect = p5.width / p5.height;\r\n    let dw, dh;\r\n    if (imgAspect > canvasAspect) { dw = p5.width; dh = p5.width / imgAspect; }\r\n    else { dh = p5.height; dw = p5.height * imgAspect; }\r\n\r\n    dw *= scale.value;\r\n    dh *= scale.value;\r\n\r\n    p5.tint(255, opacity.value);\r\n    p5.imageMode(p5.CENTER);\r\n    p5.image(img, p5.width / 2, p5.height / 2, dw, dh);\r\n    p5.noTint();\r\n  } else {\r\n    p5.fill(255, 40);\r\n    p5.noStroke();\r\n    p5.textAlign(p5.CENTER, p5.CENTER);\r\n    p5.textSize(Math.min(p5.width, p5.height) * 0.04);\r\n    p5.text('Upload an image above', p5.width / 2, p5.height / 2);\r\n  }\r\n}\r\n",
+          "sceneCode": "// @renderer p5\r\n\r\nconst tex = viji.image(null, { label: 'Image' });\r\nconst opacity = viji.slider(255, { min: 0, max: 255, step: 1, label: 'Opacity' });\r\nconst scale = viji.slider(1, { min: 0.2, max: 2, step: 0.05, label: 'Scale' });\r\nconst bg = viji.color('#0f0f1a', { label: 'Background' });\r\n\r\nfunction render(viji, p5) {\r\n  p5.background(bg.value);\r\n\r\n  if (tex.value) {\r\n    const img = tex.p5;\r\n    const imgAspect = img.width / img.height;\r\n    const canvasAspect = p5.width / p5.height;\r\n    let dw, dh;\r\n    if (imgAspect > canvasAspect) { dw = p5.width; dh = p5.width / imgAspect; }\r\n    else { dh = p5.height; dw = p5.height * imgAspect; }\r\n\r\n    dw *= scale.value;\r\n    dh *= scale.value;\r\n\r\n    p5.tint(255, opacity.value);\r\n    p5.imageMode(p5.CENTER);\r\n    p5.image(img, p5.width / 2, p5.height / 2, dw, dh);\r\n    p5.noTint();\r\n  } else {\r\n    p5.fill(255, 40);\r\n    p5.noStroke();\r\n    p5.textAlign(p5.CENTER, p5.CENTER);\r\n    p5.textSize(Math.min(p5.width, p5.height) * 0.04);\r\n    p5.text('Upload an image above', p5.width / 2, p5.height / 2);\r\n  }\r\n}\r\n",
           "sceneFile": "image-p5.scene.js"
         },
         {
@@ -5025,7 +5065,17 @@ export const docsApi = {
       "content": [
         {
           "type": "text",
-          "markdown": "# viji.button()\r\n\r\n```\r\nbutton(config: ButtonConfig): ButtonParameter\r\n```\r\n\r\nCreates a momentary button parameter. Unlike [`viji.toggle()`](../toggle/) which latches on/off, a button is `true` for exactly **one frame** when the user clicks it, then automatically resets to `false`. The host renders it as a clickable button.\r\n\r\n## Parameters\r\n\r\n| Name | Type | Required | Default | Description |\r\n|------|------|----------|---------|-------------|\r\n| `config.label` | `string` | Yes |  | Display name shown in the parameter UI |\r\n| `config.description` | `string` | No |  | Tooltip or help text |\r\n| `config.group` | `string` | No | `'general'` | Group name: see [Grouping](../grouping/) |\r\n| `config.category` | `ParameterCategory` | No | `'general'` | Visibility category: see [Categories](../categories/) |\r\n\r\n## Return Value\r\n\r\nReturns a `ButtonParameter` object:\r\n\r\n| Property | Type | Description |\r\n|----------|------|-------------|\r\n| `value` | `boolean` | `true` for the single frame after the user clicks, `false` otherwise. |\r\n| `label` | `string` | Display label |\r\n| `description` | `string \\| undefined` | Description text |\r\n| `group` | `string` | Group name |\r\n| `category` | `ParameterCategory` | Parameter category |\r\n\r\n## Usage\r\n\r\n```javascript\r\n// @renderer p5\r\nconst reset = viji.button({ label: 'Reset' });\r\n\r\nlet angle = 0;\r\n\r\nfunction render(viji, p5) {\r\n  p5.background(0);\r\n\r\n  if (reset.value) {\r\n    angle = 0;\r\n  }\r\n\r\n  angle += viji.deltaTime;\r\n  p5.translate(p5.width / 2, p5.height / 2);\r\n  p5.rotate(angle);\r\n  p5.rect(-50, -50, 100, 100);\r\n}\r\n```\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## How It Works\r\n\r\n1. The user clicks the button in the host UI.\r\n2. On the **next rendered frame**, `button.value` is `true`.\r\n3. After that frame completes, the value automatically resets to `false`.\r\n4. Subsequent frames see `false` until the user clicks again.\r\n\r\n## Common Patterns\r\n\r\n### Resetting accumulated state\r\n\r\n```javascript\r\nconst resetPos = viji.button({ label: 'Reset Position' });\r\n\r\nlet x = 0;\r\nlet y = 0;\r\n\r\nfunction render(viji, p5) {\r\n  p5.background(20);\r\n\r\n  if (resetPos.value) {\r\n    x = 0;\r\n    y = 0;\r\n  }\r\n\r\n  x += viji.deltaTime * 50;\r\n  y = p5.sin(viji.time) * 100;\r\n  p5.ellipse(p5.width / 2 + x, p5.height / 2 + y, 30, 30);\r\n}\r\n```\r\n\r\n### Clearing a canvas\r\n\r\n```javascript\r\nconst clear = viji.button({ label: 'Clear Canvas' });\r\nlet shouldClear = false;\r\n\r\nfunction render(viji, p5) {\r\n  if (clear.value) {\r\n    p5.background(0);\r\n  }\r\n  // draw without clearing: paint mode\r\n  p5.ellipse(viji.mouse.x, viji.mouse.y, 20, 20);\r\n}\r\n```\r\n\r\n## Button vs Toggle\r\n\r\n| | [`viji.button()`](../button/) | [`viji.toggle()`](../toggle/) |\r\n|---|---|---|\r\n| Value | `true` for 1 frame, then `false` | Stays `true` or `false` until changed |\r\n| Default argument | None (always starts `false`) | Required (`true` or `false`) |\r\n| Use for | One-shot actions, resets, spawns | Persistent on/off switches |\r\n| Host UI | Clickable button | On/off switch |\r\n\r\n## Related\r\n\r\n- [Toggle](../toggle/): persistent boolean switch\r\n- [Slider](../slider/): numeric slider parameter\r\n- [Grouping](../grouping/): organizing parameters into named groups\r\n- [Categories](../categories/): controlling parameter visibility\r\n- [Native Button](/native/parameters/button): equivalent for the Native renderer\r\n- [Shader Button](/shader/parameters/button): equivalent for the Shader renderer"
+          "markdown": "# viji.button()\r\n\r\n```\r\nbutton(config: ButtonConfig): ButtonParameter\r\n```\r\n\r\nCreates a momentary button parameter. Unlike [`viji.toggle()`](../toggle/) which latches on/off, a button is `true` for exactly **one frame** when the user clicks it, then automatically resets to `false`. The host renders it as a clickable button.\r\n\r\n## Parameters\r\n\r\n| Name | Type | Required | Default | Description |\r\n|------|------|----------|---------|-------------|\r\n| `config.label` | `string` | Yes |  | Display name shown in the parameter UI |\r\n| `config.description` | `string` | No |  | Tooltip or help text |\r\n| `config.group` | `string` | No | `'general'` | Group name: see [Grouping](../grouping/) |\r\n| `config.category` | `ParameterCategory` | No | `'general'` | Visibility category: see [Categories](../categories/) |\r\n\r\n## Return Value\r\n\r\nReturns a `ButtonParameter` object:\r\n\r\n| Property | Type | Description |\r\n|----------|------|-------------|\r\n| `value` | `boolean` | `true` for the single frame after the user clicks, `false` otherwise. |\r\n| `label` | `string` | Display label |\r\n| `description` | `string \\| undefined` | Description text |\r\n| `group` | `string` | Group name |\r\n| `category` | `ParameterCategory` | Parameter category |\r\n\r\n## Usage\r\n\r\n```javascript\r\n// @renderer p5\r\nconst reset = viji.button({ label: 'Reset' });\r\n\r\nlet angle = 0;\r\n\r\nfunction render(viji, p5) {\r\n  p5.background(0);\r\n\r\n  if (reset.value) {\r\n    angle = 0;\r\n  }\r\n\r\n  angle += viji.deltaTime;\r\n  p5.translate(p5.width / 2, p5.height / 2);\r\n  p5.rotate(angle);\r\n  p5.rect(-50, -50, 100, 100);\r\n}\r\n```\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."
+        },
+        {
+          "type": "live-example",
+          "title": "Spawn & Clear",
+          "sceneCode": "// @renderer p5\n\nconst spawn = viji.button({ label: 'Spawn Particle' });\nconst clear = viji.button({ label: 'Clear All' });\nconst speed = viji.slider(0.3, { min: 0.05, max: 1, step: 0.05, label: 'Drift Speed' });\nconst particleColor = viji.color('#ff6644', { label: 'Particle Color' });\nconst bg = viji.color('#0f0f1a', { label: 'Background' });\n\nconst particles = [];\nconst MAX_AGE = 4;\n\nfunction render(viji, p5) {\n  const w = p5.width;\n  const h = p5.height;\n  const unit = Math.min(w, h);\n\n  if (clear.value) {\n    particles.length = 0;\n  }\n\n  if (spawn.value) {\n    const a = Math.random() * p5.TWO_PI;\n    particles.push({\n      x: w / 2,\n      y: h / 2,\n      vx: Math.cos(a),\n      vy: Math.sin(a),\n      age: 0,\n    });\n  }\n\n  p5.background(bg.value);\n  p5.noStroke();\n\n  for (let i = particles.length - 1; i >= 0; i--) {\n    const part = particles[i];\n    part.age += viji.deltaTime;\n    const alpha = 1 - part.age / MAX_AGE;\n    if (alpha <= 0) {\n      particles.splice(i, 1);\n      continue;\n    }\n    const dist = part.age * speed.value * unit * 0.5;\n    const x = part.x + part.vx * dist;\n    const y = part.y + part.vy * dist;\n    const r = unit * 0.025 * alpha;\n    const col = p5.color(particleColor.value);\n    col.setAlpha(alpha * 255);\n    p5.fill(col);\n    p5.ellipse(x, y, r * 2);\n  }\n\n  if (particles.length === 0) {\n    p5.fill(255, 255, 255, 90);\n    p5.textAlign(p5.CENTER, p5.CENTER);\n    p5.textSize(unit * 0.04);\n    p5.text('Click \"Spawn Particle\" above', w / 2, h / 2);\n  }\n}\n",
+          "sceneFile": "button-p5.scene.js"
+        },
+        {
+          "type": "text",
+          "markdown": "## How It Works\r\n\r\n1. The user clicks the button in the host UI.\r\n2. On the **next rendered frame**, `button.value` is `true`.\r\n3. After that frame completes, the value automatically resets to `false`.\r\n4. Subsequent frames see `false` until the user clicks again.\r\n\r\n## Common Patterns\r\n\r\n### Resetting accumulated state\r\n\r\n```javascript\r\nconst resetPos = viji.button({ label: 'Reset Position' });\r\n\r\nlet x = 0;\r\nlet y = 0;\r\n\r\nfunction render(viji, p5) {\r\n  p5.background(20);\r\n\r\n  if (resetPos.value) {\r\n    x = 0;\r\n    y = 0;\r\n  }\r\n\r\n  x += viji.deltaTime * 50;\r\n  y = p5.sin(viji.time) * 100;\r\n  p5.ellipse(p5.width / 2 + x, p5.height / 2 + y, 30, 30);\r\n}\r\n```\r\n\r\n### Clearing a canvas\r\n\r\n```javascript\r\nconst clear = viji.button({ label: 'Clear Canvas' });\r\nlet shouldClear = false;\r\n\r\nfunction render(viji, p5) {\r\n  if (clear.value) {\r\n    p5.background(0);\r\n  }\r\n  // draw without clearing: paint mode\r\n  p5.ellipse(viji.mouse.x, viji.mouse.y, 20, 20);\r\n}\r\n```\r\n\r\n## Button vs Toggle\r\n\r\n| | [`viji.button()`](../button/) | [`viji.toggle()`](../toggle/) |\r\n|---|---|---|\r\n| Value | `true` for 1 frame, then `false` | Stays `true` or `false` until changed |\r\n| Default argument | None (always starts `false`) | Required (`true` or `false`) |\r\n| Use for | One-shot actions, resets, spawns | Persistent on/off switches |\r\n| Host UI | Clickable button | On/off switch |\r\n\r\n## Related\r\n\r\n- [Toggle](../toggle/): persistent boolean switch\r\n- [Slider](../slider/): numeric slider parameter\r\n- [Grouping](../grouping/): organizing parameters into named groups\r\n- [Categories](../categories/): controlling parameter visibility\r\n- [Native Button](/native/parameters/button): equivalent for the Native renderer\r\n- [Shader Button](/shader/parameters/button): equivalent for the Shader renderer"
         }
       ]
     },
@@ -5068,7 +5118,7 @@ export const docsApi = {
         {
           "type": "live-example",
           "title": "Basic Coordinate",
-          "sceneCode": "// @renderer p5\r\n\r\nconst origin = viji.coordinate({ x: 0, y: 0 }, {\r\n  label: 'Circle Position',\r\n  description: 'Drag to move the circle',\r\n  group: 'position'\r\n});\r\n\r\nconst size = viji.slider(0.1, {\r\n  min: 0.03,\r\n  max: 0.3,\r\n  step: 0.01,\r\n  label: 'Size',\r\n  group: 'position'\r\n});\r\n\r\nconst color = viji.color('#ff6b6b', {\r\n  label: 'Color',\r\n  group: 'appearance'\r\n});\r\n\r\nfunction draw(viji, p5) {\r\n  p5.background(26, 26, 46);\r\n\r\n  const s = Math.min(p5.width, p5.height);\r\n\r\n  // Draw grid\r\n  p5.stroke(255, 255, 255, 15);\r\n  p5.strokeWeight(1);\r\n  for (let i = -1; i <= 1; i += 0.25) {\r\n    const px = p5.width / 2 + i * p5.width * 0.4;\r\n    const py = p5.height / 2 - i * p5.height * 0.4;\r\n    p5.line(px, 0, px, p5.height);\r\n    p5.line(0, py, p5.width, py);\r\n  }\r\n\r\n  // Draw crosshair\r\n  p5.stroke(255, 255, 255, 40);\r\n  p5.line(p5.width / 2, 0, p5.width / 2, p5.height);\r\n  p5.line(0, p5.height / 2, p5.width, p5.height / 2);\r\n\r\n  // Map coordinate\r\n  const cx = p5.width / 2 + origin.value.x * p5.width * 0.4;\r\n  const cy = p5.height / 2 - origin.value.y * p5.height * 0.4;\r\n  const r = size.value * s;\r\n\r\n  // Draw circle\r\n  p5.noStroke();\r\n  p5.fill(color.value);\r\n  p5.ellipse(cx, cy, r * 2, r * 2);\r\n\r\n  // Coordinate readout\r\n  p5.fill(255, 255, 255, 130);\r\n  p5.textAlign(p5.CENTER);\r\n  p5.textSize(Math.round(s * 0.025));\r\n  p5.text(\r\n    'x: ' + origin.value.x.toFixed(2) + '  y: ' + origin.value.y.toFixed(2),\r\n    p5.width / 2, p5.height - s * 0.03\r\n  );\r\n}\r\n",
+          "sceneCode": "// @renderer p5\r\n\r\nconst origin = viji.coordinate({ x: 0, y: 0 }, {\r\n  label: 'Circle Position',\r\n  description: 'Drag to move the circle',\r\n  group: 'position'\r\n});\r\n\r\nconst size = viji.slider(0.1, {\r\n  min: 0.03,\r\n  max: 0.3,\r\n  step: 0.01,\r\n  label: 'Size',\r\n  group: 'position'\r\n});\r\n\r\nconst color = viji.color('#ff6b6b', {\r\n  label: 'Color',\r\n  group: 'appearance'\r\n});\r\n\r\nfunction render(viji, p5) {\r\n  p5.background(26, 26, 46);\r\n\r\n  const s = Math.min(p5.width, p5.height);\r\n\r\n  // Draw grid\r\n  p5.stroke(255, 255, 255, 15);\r\n  p5.strokeWeight(1);\r\n  for (let i = -1; i <= 1; i += 0.25) {\r\n    const px = p5.width / 2 + i * p5.width * 0.4;\r\n    const py = p5.height / 2 - i * p5.height * 0.4;\r\n    p5.line(px, 0, px, p5.height);\r\n    p5.line(0, py, p5.width, py);\r\n  }\r\n\r\n  // Draw crosshair\r\n  p5.stroke(255, 255, 255, 40);\r\n  p5.line(p5.width / 2, 0, p5.width / 2, p5.height);\r\n  p5.line(0, p5.height / 2, p5.width, p5.height / 2);\r\n\r\n  // Map coordinate\r\n  const cx = p5.width / 2 + origin.value.x * p5.width * 0.4;\r\n  const cy = p5.height / 2 - origin.value.y * p5.height * 0.4;\r\n  const r = size.value * s;\r\n\r\n  // Draw circle\r\n  p5.noStroke();\r\n  p5.fill(color.value);\r\n  p5.ellipse(cx, cy, r * 2, r * 2);\r\n\r\n  // Coordinate readout\r\n  p5.fill(255, 255, 255, 130);\r\n  p5.textAlign(p5.CENTER);\r\n  p5.textSize(Math.round(s * 0.025));\r\n  p5.text(\r\n    'x: ' + origin.value.x.toFixed(2) + '  y: ' + origin.value.y.toFixed(2),\r\n    p5.width / 2, p5.height - s * 0.03\r\n  );\r\n}\r\n",
           "sceneFile": "coordinate-p5.scene.js"
         },
         {
@@ -6059,7 +6109,7 @@ export const docsApi = {
       "content": [
         {
           "type": "text",
-          "markdown": "# Pointer (Unified Input)\r\n\r\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.**\r\n\r\n> [!WARNING]\r\n> P5's built-in input globals (`mouseX`, `mouseY`, `mouseIsPressed`, `touchX`, `touchY`, etc.) are **not updated** in the worker environment. P5 event callbacks (`mousePressed()`, `mouseDragged()`, `touchStarted()`, etc.) are **never called**. Use Viji's interaction APIs instead.\r\n\r\n## Why Use Pointer?\r\n\r\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.\r\n\r\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.\r\n\r\n## API Reference\r\n\r\n| Property | Type | Description |\r\n|----------|------|-------------|\r\n| `x` | `number` | Canvas-space X position (pixels) |\r\n| `y` | `number` | Canvas-space Y position (pixels) |\r\n| `deltaX` | `number` | Horizontal movement since last frame (pixels) |\r\n| `deltaY` | `number` | Vertical movement since last frame (pixels) |\r\n| `isDown` | `boolean` | `true` if left mouse button is held or a touch is active |\r\n| `wasPressed` | `boolean` | `true` for exactly one frame when input becomes active, then resets |\r\n| `wasReleased` | `boolean` | `true` for exactly one frame when input is released, then resets |\r\n| `isInCanvas` | `boolean` | `true` if the input position is within the canvas bounds |\r\n| `type` | `'mouse' \\| 'touch' \\| 'none'` | Which input device is currently active |\r\n\r\n## Coordinate System\r\n\r\nPointer coordinates are in **canvas-space pixels**, with `(0, 0)` at the top-left corner. Values match [`viji.width`](/p5/canvas-resolution) and [`viji.height`](/p5/canvas-resolution) (which are the same as `p5.width` and `p5.height`).\r\n\r\n## How It Works\r\n\r\nWhen a touch is active, the pointer follows the primary touch point. Otherwise, it follows the mouse. This switching happens automatically each frame.\r\n\r\n- **When a touch is active** (`viji.touches.count > 0`): pointer tracks the primary touch. `isDown` is always `true`, `type` is `'touch'`.\r\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.\r\n\r\n`wasPressed` and `wasReleased` reflect frame-to-frame transitions of `isDown`: each is `true` for exactly one frame, then automatically resets.\r\n\r\n## P5 Input Migration\r\n\r\n| P5 Global | Viji Equivalent |\r\n|-----------|-----------------|\r\n| `mouseX` / `mouseY` | `viji.pointer.x` / `viji.pointer.y` (or `viji.mouse.x` / `viji.mouse.y`) |\r\n| `mouseIsPressed` | `viji.pointer.isDown` |\r\n| `touchX` / `touchY` | `viji.pointer.x` / `viji.pointer.y` |\r\n| `mousePressed()` callback | Check `viji.pointer.wasPressed` in `render()` |\r\n| `mouseDragged()` callback | Check `viji.pointer.isDown` and `deltaX`/`deltaY` in `render()` |\r\n| `touchStarted()` callback | Check `viji.pointer.wasPressed` in `render()` |\r\n\r\n## Basic Example"
+          "markdown": "# Pointer (Unified Input)\r\n\r\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.**\r\n\r\n> [!WARNING]\r\n> P5's built-in input globals (`mouseX`, `mouseY`, `mouseIsPressed`, `touchX`, `touchY`, etc.) are **not updated** in the worker environment. P5 event callbacks (`mousePressed()`, `mouseDragged()`, `touchStarted()`, etc.) are **never called**. Use Viji's interaction APIs instead.\r\n\r\n## Why Use Pointer?\r\n\r\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.\r\n\r\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.\r\n\r\n## API Reference\r\n\r\n| Property | Type | Description |\r\n|----------|------|-------------|\r\n| `x` | `number` | Canvas-space X position (pixels) |\r\n| `y` | `number` | Canvas-space Y position (pixels) |\r\n| `deltaX` | `number` | Horizontal movement since last frame (pixels) |\r\n| `deltaY` | `number` | Vertical movement since last frame (pixels) |\r\n| `isDown` | `boolean` | `true` if left mouse button is held or a touch is active |\r\n| `wasPressed` | `boolean` | `true` for exactly one frame when input becomes active, then resets |\r\n| `wasReleased` | `boolean` | `true` for exactly one frame when input is released, then resets |\r\n| `isInCanvas` | `boolean` | `true` if the input position is within the canvas bounds |\r\n| `type` | `'mouse' \\| 'touch' \\| 'none'` | Which input device is currently active |\r\n\r\n## Coordinate System\r\n\r\nPointer coordinates are in **canvas-space pixels**, with `(0, 0)` at the top-left corner. Values match [`viji.width`](/p5/canvas-resolution#resolution-properties) and [`viji.height`](/p5/canvas-resolution#resolution-properties) (which are the same as `p5.width` and `p5.height`).\r\n\r\n## How It Works\r\n\r\nWhen a touch is active, the pointer follows the primary touch point. Otherwise, it follows the mouse. This switching happens automatically each frame.\r\n\r\n- **When a touch is active** (`viji.touches.count > 0`): pointer tracks the primary touch. `isDown` is always `true`, `type` is `'touch'`.\r\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.\r\n\r\n`wasPressed` and `wasReleased` reflect frame-to-frame transitions of `isDown`: each is `true` for exactly one frame, then automatically resets.\r\n\r\n## P5 Input Migration\r\n\r\n| P5 Global | Viji Equivalent |\r\n|-----------|-----------------|\r\n| `mouseX` / `mouseY` | `viji.pointer.x` / `viji.pointer.y` (or `viji.mouse.x` / `viji.mouse.y`) |\r\n| `mouseIsPressed` | `viji.pointer.isDown` |\r\n| `touchX` / `touchY` | `viji.pointer.x` / `viji.pointer.y` |\r\n| `mousePressed()` callback | Check `viji.pointer.wasPressed` in `render()` |\r\n| `mouseDragged()` callback | Check `viji.pointer.isDown` and `deltaX`/`deltaY` in `render()` |\r\n| `touchStarted()` callback | Check `viji.pointer.wasPressed` in `render()` |\r\n\r\n## Basic Example"
         },
         {
           "type": "live-example",
@@ -6770,7 +6820,7 @@ 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, with 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`, and `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 | Directive | Uniform Type | Default | Description |\r\n|------|-----------|--------------|---------|-------------|\r\n| `slider` | `@viji-slider` | `float` | `default:1.0 min:0.0 max:5.0` | `// @viji-slider:speed label:\"Speed\" default:1.0 min:0.0 max:5.0` |\r\n| `number` | `@viji-number` | `float` | `default:10.0 min:1.0 max:100.0` | `// @viji-number:count label:\"Count\" default:10.0 min:1.0 max:100.0` |\r\n| `color` | `@viji-color` | `vec3` | `default:#ff6600` | `// @viji-color:tint label:\"Tint\" default:#ff6600` |\r\n| `toggle` | `@viji-toggle` | `bool` | `default:false` | `// @viji-toggle:invert label:\"Invert\" default:false` |\r\n| `select` | `@viji-select` | `int` | `default:0 options:[\"Wave\",\"Spiral\",\"Grid\"]` | `// @viji-select:mode label:\"Mode\" default:0 options:[\"Wave\",\"Spiral\",\"Grid\"]` |\r\n| `image` | `@viji-image` | `sampler2D` | `label:\"Texture\"` | `// @viji-image:tex label:\"Texture\"` |\r\n| `button` | `@viji-button` | `bool` | `label:\"Trigger\"` | `// @viji-button:trigger label:\"Trigger\"` |\r\n| `coordinate` | `@viji-coordinate` | `vec2` | `default:[0,0]` | 2D position pad, -1 to 1 |\r\n| `accumulator` | `@viji-accumulator` | `float` | `rate:speed` | `// @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, so the animation 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. That prefix is reserved for built-in Viji uniforms. Use descriptive names like `speed`, `colorMix`, or `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\nThe main ES 3.00 differences: `gl_FragColor` becomes `out vec4`, and `texture2D()` becomes `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. Reference `backbuffer` anywhere in your code and it's enabled automatically:\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, with 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`, and `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 | Directive | Uniform Type | Default | Description |\r\n|------|-----------|--------------|---------|-------------|\r\n| `slider` | `@viji-slider` | `float` | `default:1.0 min:0.0 max:5.0` | `// @viji-slider:speed label:\"Speed\" default:1.0 min:0.0 max:5.0` |\r\n| `number` | `@viji-number` | `float` | `default:10.0 min:1.0 max:100.0` | `// @viji-number:count label:\"Count\" default:10.0 min:1.0 max:100.0` |\r\n| `color` | `@viji-color` | `vec3` | `default:#ff6600` | `// @viji-color:tint label:\"Tint\" default:#ff6600` |\r\n| `toggle` | `@viji-toggle` | `bool` | `default:false` | `// @viji-toggle:invert label:\"Invert\" default:false` |\r\n| `select` | `@viji-select` | `int` | `default:0 options:[\"Wave\",\"Spiral\",\"Grid\"]` | `// @viji-select:mode label:\"Mode\" default:0 options:[\"Wave\",\"Spiral\",\"Grid\"]` |\r\n| `image` | `@viji-image` | `sampler2D` | `label:\"Texture\"` | `// @viji-image:tex label:\"Texture\"` |\r\n| `button` | `@viji-button` | `bool` | `label:\"Trigger\"` | `// @viji-button:trigger label:\"Trigger\"` |\r\n| `coordinate` | `@viji-coordinate` | `vec2` | `default:[0,0]` | 2D position pad, -1 to 1 |\r\n| `accumulator` | `@viji-accumulator` | `float` | `rate:speed` | `// @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, so the animation 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. That prefix is reserved for built-in Viji uniforms. Use descriptive names like `speed`, `colorMix`, or `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\nThe main ES 3.00 differences: `gl_FragColor` becomes `out vec4`, and `texture2D()` becomes `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. Reference `backbuffer` anywhere in your code and it's enabled automatically:\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#how-to-enable) 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#uniform-mapping) 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#how-to-enable): 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"
         }
       ]
     },
@@ -6923,7 +6973,7 @@ export const docsApi = {
       "content": [
         {
           "type": "text",
-          "markdown": "# API Reference\r\n\r\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.\r\n\r\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.\r\n\r\nNew to Viji shaders? Start with [Shader Basics](/shader/basics) instead.\r\n\r\n## Core / Timing\r\n\r\n| Uniform | Type | Description | Details |\r\n|---------|------|-------------|---------|\r\n| [`u_time`](/shader/timing) | `float` | Seconds elapsed since the scene started | [Timing](/shader/timing) |\r\n| [`u_deltaTime`](/shader/timing) | `float` | Seconds since the previous frame | [Timing](/shader/timing) |\r\n| [`u_frame`](/shader/timing) | `int` | Frame index (monotonically increasing) | [Timing](/shader/timing) |\r\n| [`u_fps`](/shader/timing) | `float` | Target FPS based on host's frame rate mode | [Timing](/shader/timing) |\r\n\r\n## Resolution\r\n\r\n| Uniform | Type | Description | Details |\r\n|---------|------|-------------|---------|\r\n| [`u_resolution`](/shader/resolution) | `vec2` | Canvas width and height in pixels | [Resolution](/shader/resolution) |\r\n\r\n## Mouse\r\n\r\n| Uniform | Type | Description | Details |\r\n|---------|------|-------------|---------|\r\n| [`u_mouse`](/shader/mouse) | `vec2` | Cursor position in pixels (WebGL Y-flipped) | [Mouse](/shader/mouse) |\r\n| [`u_mouseInCanvas`](/shader/mouse) | `bool` | Whether cursor is inside the canvas | [Mouse](/shader/mouse) |\r\n| [`u_mousePressed`](/shader/mouse) | `bool` | Whether any button is pressed | [Mouse](/shader/mouse) |\r\n| [`u_mouseLeft`](/shader/mouse) | `bool` | Left button state | [Mouse](/shader/mouse) |\r\n| [`u_mouseRight`](/shader/mouse) | `bool` | Right button state | [Mouse](/shader/mouse) |\r\n| [`u_mouseMiddle`](/shader/mouse) | `bool` | Middle button state | [Mouse](/shader/mouse) |\r\n| [`u_mouseDelta`](/shader/mouse) | `vec2` | Pixel movement this frame (Y-flipped) | [Mouse](/shader/mouse) |\r\n| [`u_mouseWheel`](/shader/mouse) | `float` | Scroll delta this frame | [Mouse](/shader/mouse) |\r\n| [`u_mouseWasPressed`](/shader/mouse) | `bool` | True for one frame when pressed | [Mouse](/shader/mouse) |\r\n| [`u_mouseWasReleased`](/shader/mouse) | `bool` | True for one frame when released | [Mouse](/shader/mouse) |\r\n\r\n## Keyboard\r\n\r\n| Uniform | Type | Description | Details |\r\n|---------|------|-------------|---------|\r\n| [`u_keySpace`](/shader/keyboard) | `bool` | Space bar | [Keyboard](/shader/keyboard) |\r\n| [`u_keyShift`](/shader/keyboard) | `bool` | Shift key | [Keyboard](/shader/keyboard) |\r\n| [`u_keyCtrl`](/shader/keyboard) | `bool` | Ctrl/Cmd key | [Keyboard](/shader/keyboard) |\r\n| [`u_keyAlt`](/shader/keyboard) | `bool` | Alt/Option key | [Keyboard](/shader/keyboard) |\r\n| [`u_keyW`](/shader/keyboard) | `bool` | W key | [Keyboard](/shader/keyboard) |\r\n| [`u_keyA`](/shader/keyboard) | `bool` | A key | [Keyboard](/shader/keyboard) |\r\n| [`u_keyS`](/shader/keyboard) | `bool` | S key | [Keyboard](/shader/keyboard) |\r\n| [`u_keyD`](/shader/keyboard) | `bool` | D key | [Keyboard](/shader/keyboard) |\r\n| [`u_keyUp`](/shader/keyboard) | `bool` | Up arrow | [Keyboard](/shader/keyboard) |\r\n| [`u_keyDown`](/shader/keyboard) | `bool` | Down arrow | [Keyboard](/shader/keyboard) |\r\n| [`u_keyLeft`](/shader/keyboard) | `bool` | Left arrow | [Keyboard](/shader/keyboard) |\r\n| [`u_keyRight`](/shader/keyboard) | `bool` | Right arrow | [Keyboard](/shader/keyboard) |\r\n| [`u_keyboard`](/shader/keyboard) | `sampler2D` | 256×3 LUMINANCE texture (row 0: held, row 1: pressed, row 2: toggle) | [Keyboard](/shader/keyboard) |\r\n\r\n## Touch\r\n\r\n| Uniform | Type | Description | Details |\r\n|---------|------|-------------|---------|\r\n| [`u_touchCount`](/shader/touch) | `int` | Number of active touches (0-5) | [Touch](/shader/touch) |\r\n| [`u_touch0`](/shader/touch) | `vec2` | Touch point 0 position (pixels, Y-flipped) | [Touch](/shader/touch) |\r\n| [`u_touch1`](/shader/touch) | `vec2` | Touch point 1 position | [Touch](/shader/touch) |\r\n| [`u_touch2`](/shader/touch) | `vec2` | Touch point 2 position | [Touch](/shader/touch) |\r\n| [`u_touch3`](/shader/touch) | `vec2` | Touch point 3 position | [Touch](/shader/touch) |\r\n| [`u_touch4`](/shader/touch) | `vec2` | Touch point 4 position | [Touch](/shader/touch) |\r\n\r\n## Pointer (Unified)\r\n\r\n| Uniform | Type | Description | Details |\r\n|---------|------|-------------|---------|\r\n| [`u_pointer`](/shader/pointer) | `vec2` | Primary pointer position (pixels, Y-flipped) | [Pointer](/shader/pointer) |\r\n| [`u_pointerDelta`](/shader/pointer) | `vec2` | Movement delta (Y-flipped) | [Pointer](/shader/pointer) |\r\n| [`u_pointerDown`](/shader/pointer) | `bool` | Whether pointer is active (click or touch) | [Pointer](/shader/pointer) |\r\n| [`u_pointerWasPressed`](/shader/pointer) | `bool` | True for one frame when pressed | [Pointer](/shader/pointer) |\r\n| [`u_pointerWasReleased`](/shader/pointer) | `bool` | True for one frame when released | [Pointer](/shader/pointer) |\r\n| [`u_pointerInCanvas`](/shader/pointer) | `bool` | Whether pointer is inside the canvas | [Pointer](/shader/pointer) |\r\n\r\n## Audio: Scalars\r\n\r\n### Volume\r\n\r\n| Uniform | Type | Description | Details |\r\n|---------|------|-------------|---------|\r\n| [`u_audioVolume`](/shader/audio/volume) | `float` | Current RMS volume 0-1 | [Volume](/shader/audio/volume) |\r\n| [`u_audioPeak`](/shader/audio/volume) | `float` | Peak volume 0-1 | [Volume](/shader/audio/volume) |\r\n| [`u_audioVolumeSmoothed`](/shader/audio/volume) | `float` | Smoothed volume (~200ms decay) | [Volume](/shader/audio/volume) |\r\n\r\n### Frequency Bands\r\n\r\n| Uniform | Type | Description | Details |\r\n|---------|------|-------------|---------|\r\n| [`u_audioLow`](/shader/audio/bands) | `float` | Low band energy (20-120 Hz) | [Bands](/shader/audio/bands) |\r\n| [`u_audioLowMid`](/shader/audio/bands) | `float` | Low-mid band energy (120-500 Hz) | [Bands](/shader/audio/bands) |\r\n| [`u_audioMid`](/shader/audio/bands) | `float` | Mid band energy (500-2 kHz) | [Bands](/shader/audio/bands) |\r\n| [`u_audioHighMid`](/shader/audio/bands) | `float` | High-mid band energy (2-6 kHz) | [Bands](/shader/audio/bands) |\r\n| [`u_audioHigh`](/shader/audio/bands) | `float` | High band energy (6-16 kHz) | [Bands](/shader/audio/bands) |\r\n| [`u_audioLowSmoothed`](/shader/audio/bands) | `float` | Smoothed low band | [Bands](/shader/audio/bands) |\r\n| [`u_audioLowMidSmoothed`](/shader/audio/bands) | `float` | Smoothed low-mid band | [Bands](/shader/audio/bands) |\r\n| [`u_audioMidSmoothed`](/shader/audio/bands) | `float` | Smoothed mid band | [Bands](/shader/audio/bands) |\r\n| [`u_audioHighMidSmoothed`](/shader/audio/bands) | `float` | Smoothed high-mid band | [Bands](/shader/audio/bands) |\r\n| [`u_audioHighSmoothed`](/shader/audio/bands) | `float` | Smoothed high band | [Bands](/shader/audio/bands) |\r\n\r\n### Beat Detection\r\n\r\n| Uniform | Type | Description | Details |\r\n|---------|------|-------------|---------|\r\n| [`u_audioKick`](/shader/audio/beat) | `float` | Kick beat energy | [Beat](/shader/audio/beat) |\r\n| [`u_audioSnare`](/shader/audio/beat) | `float` | Snare beat energy | [Beat](/shader/audio/beat) |\r\n| [`u_audioHat`](/shader/audio/beat) | `float` | Hi-hat beat energy | [Beat](/shader/audio/beat) |\r\n| [`u_audioAny`](/shader/audio/beat) | `float` | Combined beat energy | [Beat](/shader/audio/beat) |\r\n| [`u_audioKickSmoothed`](/shader/audio/beat) | `float` | Smoothed kick | [Beat](/shader/audio/beat) |\r\n| [`u_audioSnareSmoothed`](/shader/audio/beat) | `float` | Smoothed snare | [Beat](/shader/audio/beat) |\r\n| [`u_audioHatSmoothed`](/shader/audio/beat) | `float` | Smoothed hi-hat | [Beat](/shader/audio/beat) |\r\n| [`u_audioAnySmoothed`](/shader/audio/beat) | `float` | Smoothed combined | [Beat](/shader/audio/beat) |\r\n| [`u_audioKickTrigger`](/shader/audio/beat) | `bool` | Kick trigger (true for one frame) | [Beat](/shader/audio/beat) |\r\n| [`u_audioSnareTrigger`](/shader/audio/beat) | `bool` | Snare trigger (true for one frame) | [Beat](/shader/audio/beat) |\r\n| [`u_audioHatTrigger`](/shader/audio/beat) | `bool` | Hi-hat trigger (true for one frame) | [Beat](/shader/audio/beat) |\r\n| [`u_audioAnyTrigger`](/shader/audio/beat) | `bool` | Any beat trigger (true for one frame) | [Beat](/shader/audio/beat) |\r\n| [`u_audioBPM`](/shader/audio/beat) | `float` | Tracked BPM | [Beat](/shader/audio/beat) |\r\n| [`u_audioConfidence`](/shader/audio/beat) | `float` | Beat-tracker confidence 0-1 | [Beat](/shader/audio/beat) |\r\n| [`u_audioIsLocked`](/shader/audio/beat) | `bool` | Whether beat tracking is locked | [Beat](/shader/audio/beat) |\r\n\r\n### Spectral Analysis\r\n\r\n| Uniform | Type | Description | Details |\r\n|---------|------|-------------|---------|\r\n| [`u_audioBrightness`](/shader/audio/spectral) | `float` | Spectral brightness 0-1 | [Spectral](/shader/audio/spectral) |\r\n| [`u_audioFlatness`](/shader/audio/spectral) | `float` | Spectral flatness 0-1 | [Spectral](/shader/audio/spectral) |\r\n\r\n## Audio: Textures\r\n\r\n| Uniform | Type | Description | Details |\r\n|---------|------|-------------|---------|\r\n| [`u_audioFFT`](/shader/audio/fft) | `sampler2D` | FFT as 1D LUMINANCE strip (bin count × 1, values 0-255) | [FFT Texture](/shader/audio/fft) |\r\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) |\r\n\r\n## Video\r\n\r\n| Uniform | Type | Description | Details |\r\n|---------|------|-------------|---------|\r\n| [`u_video`](/shader/video/basics) | `sampler2D` | Main video frame texture | [Video Basics](/shader/video/basics) |\r\n| [`u_videoResolution`](/shader/video/basics) | `vec2` | Video frame size in pixels (0,0 if disconnected) | [Video Basics](/shader/video/basics) |\r\n| [`u_videoFrameRate`](/shader/video/basics) | `float` | Video frame rate | [Video Basics](/shader/video/basics) |\r\n\r\n## CV: Face Detection\r\n\r\n| Uniform | Type | Description | Details |\r\n|---------|------|-------------|---------|\r\n| [`u_faceCount`](/shader/video/face-detection) | `int` | Number of detected faces | [Face Detection](/shader/video/face-detection) |\r\n| [`u_face0Bounds`](/shader/video/face-detection) | `vec4` | Bounding box (x, y, w, h) normalized 0-1 | [Face Detection](/shader/video/face-detection) |\r\n| [`u_face0Center`](/shader/video/face-detection) | `vec2` | Face center normalized 0-1 | [Face Detection](/shader/video/face-detection) |\r\n| [`u_face0HeadPose`](/shader/video/face-mesh) | `vec3` | Pitch, yaw, roll in degrees | [Face Mesh](/shader/video/face-mesh) |\r\n| [`u_face0Confidence`](/shader/video/face-detection) | `float` | Detection confidence | [Face Detection](/shader/video/face-detection) |\r\n\r\n### Expressions\r\n\r\n| Uniform | Type | Details |\r\n|---------|------|---------|\r\n| [`u_face0Neutral`](/shader/video/emotion-detection) | `float` | [Emotion Detection](/shader/video/emotion-detection) |\r\n| [`u_face0Happy`](/shader/video/emotion-detection) | `float` | [Emotion Detection](/shader/video/emotion-detection) |\r\n| [`u_face0Sad`](/shader/video/emotion-detection) | `float` | [Emotion Detection](/shader/video/emotion-detection) |\r\n| [`u_face0Angry`](/shader/video/emotion-detection) | `float` | [Emotion Detection](/shader/video/emotion-detection) |\r\n| [`u_face0Surprised`](/shader/video/emotion-detection) | `float` | [Emotion Detection](/shader/video/emotion-detection) |\r\n| [`u_face0Disgusted`](/shader/video/emotion-detection) | `float` | [Emotion Detection](/shader/video/emotion-detection) |\r\n| [`u_face0Fearful`](/shader/video/emotion-detection) | `float` | [Emotion Detection](/shader/video/emotion-detection) |\r\n\r\n### Blendshapes (52 uniforms)\r\n\r\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.\r\n\r\n| Uniform | Uniform | Uniform |\r\n|---------|---------|---------|\r\n| `u_face0BrowDownLeft` | `u_face0BrowDownRight` | `u_face0BrowInnerUp` |\r\n| `u_face0BrowOuterUpLeft` | `u_face0BrowOuterUpRight` | `u_face0CheekPuff` |\r\n| `u_face0CheekSquintLeft` | `u_face0CheekSquintRight` | `u_face0EyeBlinkLeft` |\r\n| `u_face0EyeBlinkRight` | `u_face0EyeLookDownLeft` | `u_face0EyeLookDownRight` |\r\n| `u_face0EyeLookInLeft` | `u_face0EyeLookInRight` | `u_face0EyeLookOutLeft` |\r\n| `u_face0EyeLookOutRight` | `u_face0EyeLookUpLeft` | `u_face0EyeLookUpRight` |\r\n| `u_face0EyeSquintLeft` | `u_face0EyeSquintRight` | `u_face0EyeWideLeft` |\r\n| `u_face0EyeWideRight` | `u_face0JawForward` | `u_face0JawLeft` |\r\n| `u_face0JawOpen` | `u_face0JawRight` | `u_face0MouthClose` |\r\n| `u_face0MouthDimpleLeft` | `u_face0MouthDimpleRight` | `u_face0MouthFrownLeft` |\r\n| `u_face0MouthFrownRight` | `u_face0MouthFunnel` | `u_face0MouthLeft` |\r\n| `u_face0MouthLowerDownLeft` | `u_face0MouthLowerDownRight` | `u_face0MouthPressLeft` |\r\n| `u_face0MouthPressRight` | `u_face0MouthPucker` | `u_face0MouthRight` |\r\n| `u_face0MouthRollLower` | `u_face0MouthRollUpper` | `u_face0MouthShrugLower` |\r\n| `u_face0MouthShrugUpper` | `u_face0MouthSmileLeft` | `u_face0MouthSmileRight` |\r\n| `u_face0MouthStretchLeft` | `u_face0MouthStretchRight` | `u_face0MouthUpperUpLeft` |\r\n| `u_face0MouthUpperUpRight` | `u_face0NoseSneerLeft` | `u_face0NoseSneerRight` |\r\n| `u_face0TongueOut` | | |\r\n\r\n## CV: Hand Tracking\r\n\r\n| Uniform | Type | Description | Details |\r\n|---------|------|-------------|---------|\r\n| [`u_handCount`](/shader/video/hand-tracking) | `int` | Number of detected hands (0-2) | [Hand Tracking](/shader/video/hand-tracking) |\r\n| [`u_leftHandPalm`](/shader/video/hand-tracking) | `vec3` | Left hand palm position | [Hand Tracking](/shader/video/hand-tracking) |\r\n| [`u_rightHandPalm`](/shader/video/hand-tracking) | `vec3` | Right hand palm position | [Hand Tracking](/shader/video/hand-tracking) |\r\n| [`u_leftHandConfidence`](/shader/video/hand-tracking) | `float` | Left hand confidence | [Hand Tracking](/shader/video/hand-tracking) |\r\n| [`u_rightHandConfidence`](/shader/video/hand-tracking) | `float` | Right hand confidence | [Hand Tracking](/shader/video/hand-tracking) |\r\n| [`u_leftHandBounds`](/shader/video/hand-tracking) | `vec4` | Left hand bounding box (x, y, w, h) | [Hand Tracking](/shader/video/hand-tracking) |\r\n| [`u_rightHandBounds`](/shader/video/hand-tracking) | `vec4` | Right hand bounding box (x, y, w, h) | [Hand Tracking](/shader/video/hand-tracking) |\r\n\r\n### Gesture Scores (per hand)\r\n\r\nAll gesture uniforms are `float` values 0-1. Replace `left` with `right` for the other hand.\r\n\r\n| Uniform | Description | Details |\r\n|---------|-------------|---------|\r\n| [`u_leftHandFist`](/shader/video/hand-tracking) | Fist gesture confidence | [Hand Tracking](/shader/video/hand-tracking) |\r\n| [`u_leftHandOpenPalm`](/shader/video/hand-tracking) | Open palm confidence | [Hand Tracking](/shader/video/hand-tracking) |\r\n| [`u_leftHandPeace`](/shader/video/hand-tracking) | Peace/V-sign confidence | [Hand Tracking](/shader/video/hand-tracking) |\r\n| [`u_leftHandThumbsUp`](/shader/video/hand-tracking) | Thumbs up confidence | [Hand Tracking](/shader/video/hand-tracking) |\r\n| [`u_leftHandThumbsDown`](/shader/video/hand-tracking) | Thumbs down confidence | [Hand Tracking](/shader/video/hand-tracking) |\r\n| [`u_leftHandPointing`](/shader/video/hand-tracking) | Pointing confidence | [Hand Tracking](/shader/video/hand-tracking) |\r\n| [`u_leftHandILoveYou`](/shader/video/hand-tracking) | I Love You sign confidence | [Hand Tracking](/shader/video/hand-tracking) |\r\n\r\n## CV: Pose Detection\r\n\r\n| Uniform | Type | Description | Details |\r\n|---------|------|-------------|---------|\r\n| [`u_poseDetected`](/shader/video/pose-detection) | `bool` | Whether a body pose is detected | [Pose Detection](/shader/video/pose-detection) |\r\n| [`u_poseConfidence`](/shader/video/pose-detection) | `float` | Pose detection confidence | [Pose Detection](/shader/video/pose-detection) |\r\n| [`u_nosePosition`](/shader/video/pose-detection) | `vec2` | Nose landmark position | [Pose Detection](/shader/video/pose-detection) |\r\n| [`u_leftShoulderPosition`](/shader/video/pose-detection) | `vec2` | Left shoulder position | [Pose Detection](/shader/video/pose-detection) |\r\n| [`u_rightShoulderPosition`](/shader/video/pose-detection) | `vec2` | Right shoulder position | [Pose Detection](/shader/video/pose-detection) |\r\n| [`u_leftElbowPosition`](/shader/video/pose-detection) | `vec2` | Left elbow position | [Pose Detection](/shader/video/pose-detection) |\r\n| [`u_rightElbowPosition`](/shader/video/pose-detection) | `vec2` | Right elbow position | [Pose Detection](/shader/video/pose-detection) |\r\n| [`u_leftWristPosition`](/shader/video/pose-detection) | `vec2` | Left wrist position | [Pose Detection](/shader/video/pose-detection) |\r\n| [`u_rightWristPosition`](/shader/video/pose-detection) | `vec2` | Right wrist position | [Pose Detection](/shader/video/pose-detection) |\r\n| [`u_leftHipPosition`](/shader/video/pose-detection) | `vec2` | Left hip position | [Pose Detection](/shader/video/pose-detection) |\r\n| [`u_rightHipPosition`](/shader/video/pose-detection) | `vec2` | Right hip position | [Pose Detection](/shader/video/pose-detection) |\r\n| [`u_leftKneePosition`](/shader/video/pose-detection) | `vec2` | Left knee position | [Pose Detection](/shader/video/pose-detection) |\r\n| [`u_rightKneePosition`](/shader/video/pose-detection) | `vec2` | Right knee position | [Pose Detection](/shader/video/pose-detection) |\r\n| [`u_leftAnklePosition`](/shader/video/pose-detection) | `vec2` | Left ankle position | [Pose Detection](/shader/video/pose-detection) |\r\n| [`u_rightAnklePosition`](/shader/video/pose-detection) | `vec2` | Right ankle position | [Pose Detection](/shader/video/pose-detection) |\r\n\r\n## CV: Body Segmentation\r\n\r\n| Uniform | Type | Description | Details |\r\n|---------|------|-------------|---------|\r\n| [`u_segmentationMask`](/shader/video/body-segmentation) | `sampler2D` | Body mask (LUMINANCE: 0 = background, 1 = person) | [Segmentation](/shader/video/body-segmentation) |\r\n| [`u_segmentationRes`](/shader/video/body-segmentation) | `vec2` | Mask dimensions in pixels | [Segmentation](/shader/video/body-segmentation) |\r\n\r\n## Device Sensors\r\n\r\n| Uniform | Type | Description | Details |\r\n|---------|------|-------------|---------|\r\n| [`u_deviceAcceleration`](/shader/sensors) | `vec3` | Acceleration without gravity (m/s²) | [Sensor Uniforms](/shader/sensors) |\r\n| [`u_deviceAccelerationGravity`](/shader/sensors) | `vec3` | Acceleration with gravity (m/s²) | [Sensor Uniforms](/shader/sensors) |\r\n| [`u_deviceRotationRate`](/shader/sensors) | `vec3` | Gyroscope: alpha, beta, gamma (deg/s) | [Sensor Uniforms](/shader/sensors) |\r\n| [`u_deviceOrientation`](/shader/sensors) | `vec3` | Orientation: alpha, beta, gamma (degrees) | [Sensor Uniforms](/shader/sensors) |\r\n| [`u_deviceOrientationAbsolute`](/shader/sensors) | `bool` | Whether orientation is magnetometer-based | [Sensor Uniforms](/shader/sensors) |\r\n\r\n## External Devices: Video\r\n\r\n| Uniform | Type | Description | Details |\r\n|---------|------|-------------|---------|\r\n| [`u_deviceCount`](/shader/external-devices) | `int` | Number of devices with active cameras (0-8) | [Overview](/shader/external-devices) |\r\n| [`u_device0`](/shader/external-devices/video) - `u_device7` | `sampler2D` | Device camera frame texture | [Video Textures](/shader/external-devices/video) |\r\n| [`u_device0Resolution`](/shader/external-devices/video) - `u_device7Resolution` | `vec2` | Device camera frame size | [Video Textures](/shader/external-devices/video) |\r\n| [`u_device0Connected`](/shader/external-devices/video) - `u_device7Connected` | `bool` | Whether device camera is active | [Video Textures](/shader/external-devices/video) |\r\n\r\n> [!NOTE]\r\n> Audio stream uniforms from devices are accessed via `u_audioStream{i}*` uniforms (same pool as additional audio streams, different index range managed by the host).\r\n\r\n## External Devices: Sensors\r\n\r\n| Uniform | Type | Description | Details |\r\n|---------|------|-------------|---------|\r\n| [`u_externalDeviceCount`](/shader/external-devices) | `int` | Number of connected external devices (0-8) | [Overview](/shader/external-devices) |\r\n| [`u_device0Acceleration`](/shader/external-devices/sensors) - `u_device7Acceleration` | `vec3` | Per-device acceleration without gravity | [Sensor Uniforms](/shader/external-devices/sensors) |\r\n| [`u_device0AccelerationGravity`](/shader/external-devices/sensors) - `u_device7AccelerationGravity` | `vec3` | Per-device acceleration with gravity | [Sensor Uniforms](/shader/external-devices/sensors) |\r\n| [`u_device0RotationRate`](/shader/external-devices/sensors) - `u_device7RotationRate` | `vec3` | Per-device rotation rate | [Sensor Uniforms](/shader/external-devices/sensors) |\r\n| [`u_device0Orientation`](/shader/external-devices/sensors) - `u_device7Orientation` | `vec3` | Per-device orientation angles | [Sensor Uniforms](/shader/external-devices/sensors) |\r\n\r\n> [!NOTE]\r\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.\r\n\r\n## Streams (Compositor)\r\n\r\n| Uniform | Type | Description |\r\n|---------|------|-------------|\r\n| `u_videoStreamCount` | `int` | Number of active streams (0-8) |\r\n| `u_videoStream0` - `u_videoStream7` | `sampler2D` | Stream frame textures |\r\n| `u_videoStream0Resolution` - `u_videoStream7Resolution` | `vec2` | Stream frame sizes in pixels |\r\n| `u_videoStream0Connected` - `u_videoStream7Connected` | `bool` | Whether stream has an active frame |\r\n\r\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_videoStreamCount` is `0` and the textures sample as black. Each stream works the same way as [`u_video`](/shader/video/basics).\r\n\r\n## Audio Streams\r\n\r\n| Uniform | Type | Description |\r\n|---------|------|-------------|\r\n| `u_audioStreamCount` | `int` | Number of active audio streams (0-8) |\r\n| `u_audioStream0Connected` - `u_audioStream7Connected` | `bool` | Whether stream is actively providing audio |\r\n| `u_audioStream0Volume` - `u_audioStream7Volume` | `float` | Stream volume (0-1) |\r\n| `u_audioStream0Low` - `u_audioStream7Low` | `float` | Low frequency band energy (0-1) |\r\n| `u_audioStream0LowMid` - `u_audioStream7LowMid` | `float` | Low-mid band energy (0-1) |\r\n| `u_audioStream0Mid` - `u_audioStream7Mid` | `float` | Mid band energy (0-1) |\r\n| `u_audioStream0HighMid` - `u_audioStream7HighMid` | `float` | High-mid band energy (0-1) |\r\n| `u_audioStream0High` - `u_audioStream7High` | `float` | High band energy (0-1) |\r\n| `u_audioStream0Brightness` - `u_audioStream7Brightness` | `float` | Spectral brightness (0-1) |\r\n| `u_audioStream0Flatness` - `u_audioStream7Flatness` | `float` | Spectral flatness (0-1) |\r\n\r\nAdditional audio streams provide lightweight scalar uniforms only: **no** FFT or waveform textures. Beat detection, BPM, and onset uniforms are only available on the main audio stream (`u_audioVolume`, `u_audioBPM`, etc.).\r\n\r\nWhen no audio streams are provided, `u_audioStreamCount` is `0` and all per-stream uniforms default to `0.0` / `false`.\r\n\r\n## Backbuffer\r\n\r\n| Uniform | Type | Description | Details |\r\n|---------|------|-------------|---------|\r\n| [`backbuffer`](/shader/backbuffer) | `sampler2D` | Previous frame texture (feedback effects) | [Backbuffer & Feedback](/shader/backbuffer) |\r\n\r\n> [!WARNING]\r\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.\r\n\r\n## Parameter Directives\r\n\r\nDeclare parameters using `// @viji-TYPE:uniformName key:value ...` comments. Each directive generates a uniform and a UI control in the host.\r\n\r\n| Directive | Uniform Type | UI Control | Details |\r\n|-----------|-------------|------------|---------|\r\n| [`@viji-slider`](/shader/parameters/slider) | `float` | Numeric slider | [Slider](/shader/parameters/slider) |\r\n| [`@viji-number`](/shader/parameters/number) | `float` | Numeric input | [Number](/shader/parameters/number) |\r\n| [`@viji-color`](/shader/parameters/color) | `vec3` | Color picker (hex → RGB 0-1) | [Color](/shader/parameters/color) |\r\n| [`@viji-toggle`](/shader/parameters/toggle) | `bool` | On/off switch | [Toggle](/shader/parameters/toggle) |\r\n| [`@viji-select`](/shader/parameters/select) | `int` | Dropdown (0-based option index) | [Select](/shader/parameters/select) |\r\n| [`@viji-image`](/shader/parameters/image) | `sampler2D` | Image upload | [Image](/shader/parameters/image) |\r\n| [`@viji-button`](/shader/parameters/button) | `bool` | Momentary button (true for one frame) | [Button](/shader/parameters/button) |\r\n| [`@viji-coordinate`](/shader/parameters/coordinate) | `vec2` | 2D coordinate pad: both components -1 to 1 | [Coordinate](/shader/parameters/coordinate) |\r\n| [`@viji-accumulator`](/shader/parameters/accumulator) | `float` | CPU-side: `+= rate × deltaTime` | [Accumulator](/shader/parameters/accumulator) |\r\n\r\nSee [Parameters Overview](/shader/parameters) for syntax, [Grouping](/shader/parameters/grouping) and [Categories](/shader/parameters/categories) for organization.\r\n\r\n## Related\r\n\r\n- [Shader Basics](/shader/basics): auto-injection, GLSL versions, `@renderer shader`\r\n- [Shader Quick Start](/shader/quickstart): getting started with shader scenes\r\n- [Best Practices](/getting-started/best-practices): essential patterns for all renderers\r\n- [Native API Reference](/native/api-reference): JavaScript API for the Native renderer\r\n- [P5 API Reference](/p5/api-reference): JavaScript API for the P5 renderer"
+          "markdown": "# API Reference\r\n\r\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.\r\n\r\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.\r\n\r\nNew to Viji shaders? Start with [Shader Basics](/shader/basics) instead.\r\n\r\n## Core / Timing\r\n\r\n| Uniform | Type | Description | Details |\r\n|---------|------|-------------|---------|\r\n| [`u_time`](/shader/timing#u_time-absolute-time) | `float` | Seconds elapsed since the scene started | [Timing](/shader/timing) |\r\n| [`u_deltaTime`](/shader/timing#u_deltatime-frame-delta) | `float` | Seconds since the previous frame | [Timing](/shader/timing) |\r\n| [`u_frame`](/shader/timing#u_frame-frame-counter) | `int` | Frame index (monotonically increasing) | [Timing](/shader/timing) |\r\n| [`u_fps`](/shader/timing#u_fps-target-frame-rate) | `float` | Target FPS based on host's frame rate mode | [Timing](/shader/timing) |\r\n\r\n## Resolution\r\n\r\n| Uniform | Type | Description | Details |\r\n|---------|------|-------------|---------|\r\n| [`u_resolution`](/shader/resolution) | `vec2` | Canvas width and height in pixels | [Resolution](/shader/resolution) |\r\n\r\n## Mouse\r\n\r\n| Uniform | Type | Description | Details |\r\n|---------|------|-------------|---------|\r\n| [`u_mouse`](/shader/mouse#position) | `vec2` | Cursor position in pixels (WebGL Y-flipped) | [Mouse](/shader/mouse) |\r\n| [`u_mouseInCanvas`](/shader/mouse#position) | `bool` | Whether cursor is inside the canvas | [Mouse](/shader/mouse) |\r\n| [`u_mousePressed`](/shader/mouse#buttons) | `bool` | Whether any button is pressed | [Mouse](/shader/mouse) |\r\n| [`u_mouseLeft`](/shader/mouse#buttons) | `bool` | Left button state | [Mouse](/shader/mouse) |\r\n| [`u_mouseRight`](/shader/mouse#buttons) | `bool` | Right button state | [Mouse](/shader/mouse) |\r\n| [`u_mouseMiddle`](/shader/mouse#buttons) | `bool` | Middle button state | [Mouse](/shader/mouse) |\r\n| [`u_mouseDelta`](/shader/mouse#movement--wheel) | `vec2` | Pixel movement this frame (Y-flipped) | [Mouse](/shader/mouse) |\r\n| [`u_mouseWheel`](/shader/mouse#movement--wheel) | `float` | Scroll delta this frame | [Mouse](/shader/mouse) |\r\n| [`u_mouseWasPressed`](/shader/mouse#frame-events) | `bool` | True for one frame when pressed | [Mouse](/shader/mouse) |\r\n| [`u_mouseWasReleased`](/shader/mouse#frame-events) | `bool` | True for one frame when released | [Mouse](/shader/mouse) |\r\n\r\n## Keyboard\r\n\r\n| Uniform | Type | Description | Details |\r\n|---------|------|-------------|---------|\r\n| [`u_keySpace`](/shader/keyboard#action--modifiers) | `bool` | Space bar | [Keyboard](/shader/keyboard) |\r\n| [`u_keyShift`](/shader/keyboard#action--modifiers) | `bool` | Shift key | [Keyboard](/shader/keyboard) |\r\n| [`u_keyCtrl`](/shader/keyboard#action--modifiers) | `bool` | Ctrl/Cmd key | [Keyboard](/shader/keyboard) |\r\n| [`u_keyAlt`](/shader/keyboard#action--modifiers) | `bool` | Alt/Option key | [Keyboard](/shader/keyboard) |\r\n| [`u_keyW`](/shader/keyboard#movement-keys) | `bool` | W key | [Keyboard](/shader/keyboard) |\r\n| [`u_keyA`](/shader/keyboard#movement-keys) | `bool` | A key | [Keyboard](/shader/keyboard) |\r\n| [`u_keyS`](/shader/keyboard#movement-keys) | `bool` | S key | [Keyboard](/shader/keyboard) |\r\n| [`u_keyD`](/shader/keyboard#movement-keys) | `bool` | D key | [Keyboard](/shader/keyboard) |\r\n| [`u_keyUp`](/shader/keyboard#movement-keys) | `bool` | Up arrow | [Keyboard](/shader/keyboard) |\r\n| [`u_keyDown`](/shader/keyboard#movement-keys) | `bool` | Down arrow | [Keyboard](/shader/keyboard) |\r\n| [`u_keyLeft`](/shader/keyboard#movement-keys) | `bool` | Left arrow | [Keyboard](/shader/keyboard) |\r\n| [`u_keyRight`](/shader/keyboard#movement-keys) | `bool` | Right arrow | [Keyboard](/shader/keyboard) |\r\n| [`u_keyboard`](/shader/keyboard#keyboard-texture-u_keyboard) | `sampler2D` | 256×3 LUMINANCE texture (row 0: held, row 1: pressed, row 2: toggle) | [Keyboard](/shader/keyboard) |\r\n\r\n## Touch\r\n\r\n| Uniform | Type | Description | Details |\r\n|---------|------|-------------|---------|\r\n| [`u_touchCount`](/shader/touch#uniform-reference) | `int` | Number of active touches (0-5) | [Touch](/shader/touch) |\r\n| [`u_touch0`](/shader/touch#uniform-reference) | `vec2` | Touch point 0 position (pixels, Y-flipped) | [Touch](/shader/touch) |\r\n| [`u_touch1`](/shader/touch#uniform-reference) | `vec2` | Touch point 1 position | [Touch](/shader/touch) |\r\n| [`u_touch2`](/shader/touch#uniform-reference) | `vec2` | Touch point 2 position | [Touch](/shader/touch) |\r\n| [`u_touch3`](/shader/touch#uniform-reference) | `vec2` | Touch point 3 position | [Touch](/shader/touch) |\r\n| [`u_touch4`](/shader/touch#uniform-reference) | `vec2` | Touch point 4 position | [Touch](/shader/touch) |\r\n\r\n## Pointer (Unified)\r\n\r\n| Uniform | Type | Description | Details |\r\n|---------|------|-------------|---------|\r\n| [`u_pointer`](/shader/pointer#uniform-reference) | `vec2` | Primary pointer position (pixels, Y-flipped) | [Pointer](/shader/pointer) |\r\n| [`u_pointerDelta`](/shader/pointer#uniform-reference) | `vec2` | Movement delta (Y-flipped) | [Pointer](/shader/pointer) |\r\n| [`u_pointerDown`](/shader/pointer#uniform-reference) | `bool` | Whether pointer is active (click or touch) | [Pointer](/shader/pointer) |\r\n| [`u_pointerWasPressed`](/shader/pointer#uniform-reference) | `bool` | True for one frame when pressed | [Pointer](/shader/pointer) |\r\n| [`u_pointerWasReleased`](/shader/pointer#uniform-reference) | `bool` | True for one frame when released | [Pointer](/shader/pointer) |\r\n| [`u_pointerInCanvas`](/shader/pointer#uniform-reference) | `bool` | Whether pointer is inside the canvas | [Pointer](/shader/pointer) |\r\n\r\n## Audio: Scalars\r\n\r\n### Volume\r\n\r\n| Uniform | Type | Description | Details |\r\n|---------|------|-------------|---------|\r\n| [`u_audioVolume`](/shader/audio/volume#uniform-reference) | `float` | Current RMS volume 0-1 | [Volume](/shader/audio/volume) |\r\n| [`u_audioPeak`](/shader/audio/volume#uniform-reference) | `float` | Peak volume 0-1 | [Volume](/shader/audio/volume) |\r\n| [`u_audioVolumeSmoothed`](/shader/audio/volume#uniform-reference) | `float` | Smoothed volume (~200ms decay) | [Volume](/shader/audio/volume) |\r\n\r\n### Frequency Bands\r\n\r\n| Uniform | Type | Description | Details |\r\n|---------|------|-------------|---------|\r\n| [`u_audioLow`](/shader/audio/bands#instant-bands) | `float` | Low band energy (20-120 Hz) | [Bands](/shader/audio/bands) |\r\n| [`u_audioLowMid`](/shader/audio/bands#instant-bands) | `float` | Low-mid band energy (120-500 Hz) | [Bands](/shader/audio/bands) |\r\n| [`u_audioMid`](/shader/audio/bands#instant-bands) | `float` | Mid band energy (500-2 kHz) | [Bands](/shader/audio/bands) |\r\n| [`u_audioHighMid`](/shader/audio/bands#instant-bands) | `float` | High-mid band energy (2-6 kHz) | [Bands](/shader/audio/bands) |\r\n| [`u_audioHigh`](/shader/audio/bands#instant-bands) | `float` | High band energy (6-16 kHz) | [Bands](/shader/audio/bands) |\r\n| [`u_audioLowSmoothed`](/shader/audio/bands#smoothed-bands) | `float` | Smoothed low band | [Bands](/shader/audio/bands) |\r\n| [`u_audioLowMidSmoothed`](/shader/audio/bands#smoothed-bands) | `float` | Smoothed low-mid band | [Bands](/shader/audio/bands) |\r\n| [`u_audioMidSmoothed`](/shader/audio/bands#smoothed-bands) | `float` | Smoothed mid band | [Bands](/shader/audio/bands) |\r\n| [`u_audioHighMidSmoothed`](/shader/audio/bands#smoothed-bands) | `float` | Smoothed high-mid band | [Bands](/shader/audio/bands) |\r\n| [`u_audioHighSmoothed`](/shader/audio/bands#smoothed-bands) | `float` | Smoothed high band | [Bands](/shader/audio/bands) |\r\n\r\n### Beat Detection\r\n\r\n| Uniform | Type | Description | Details |\r\n|---------|------|-------------|---------|\r\n| [`u_audioKick`](/shader/audio/beat#energy-curves-fast-decay) | `float` | Kick beat energy | [Beat](/shader/audio/beat) |\r\n| [`u_audioSnare`](/shader/audio/beat#energy-curves-fast-decay) | `float` | Snare beat energy | [Beat](/shader/audio/beat) |\r\n| [`u_audioHat`](/shader/audio/beat#energy-curves-fast-decay) | `float` | Hi-hat beat energy | [Beat](/shader/audio/beat) |\r\n| [`u_audioAny`](/shader/audio/beat#energy-curves-fast-decay) | `float` | Combined beat energy | [Beat](/shader/audio/beat) |\r\n| [`u_audioKickSmoothed`](/shader/audio/beat#energy-curves-smoothed) | `float` | Smoothed kick | [Beat](/shader/audio/beat) |\r\n| [`u_audioSnareSmoothed`](/shader/audio/beat#energy-curves-smoothed) | `float` | Smoothed snare | [Beat](/shader/audio/beat) |\r\n| [`u_audioHatSmoothed`](/shader/audio/beat#energy-curves-smoothed) | `float` | Smoothed hi-hat | [Beat](/shader/audio/beat) |\r\n| [`u_audioAnySmoothed`](/shader/audio/beat#energy-curves-smoothed) | `float` | Smoothed combined | [Beat](/shader/audio/beat) |\r\n| [`u_audioKickTrigger`](/shader/audio/beat#triggers) | `bool` | Kick trigger (true for one frame) | [Beat](/shader/audio/beat) |\r\n| [`u_audioSnareTrigger`](/shader/audio/beat#triggers) | `bool` | Snare trigger (true for one frame) | [Beat](/shader/audio/beat) |\r\n| [`u_audioHatTrigger`](/shader/audio/beat#triggers) | `bool` | Hi-hat trigger (true for one frame) | [Beat](/shader/audio/beat) |\r\n| [`u_audioAnyTrigger`](/shader/audio/beat#triggers) | `bool` | Any beat trigger (true for one frame) | [Beat](/shader/audio/beat) |\r\n| [`u_audioBPM`](/shader/audio/beat#tempo) | `float` | Tracked BPM | [Beat](/shader/audio/beat) |\r\n| [`u_audioConfidence`](/shader/audio/beat#tempo) | `float` | Beat-tracker confidence 0-1 | [Beat](/shader/audio/beat) |\r\n| [`u_audioIsLocked`](/shader/audio/beat#tempo) | `bool` | Whether beat tracking is locked | [Beat](/shader/audio/beat) |\r\n\r\n### Spectral Analysis\r\n\r\n| Uniform | Type | Description | Details |\r\n|---------|------|-------------|---------|\r\n| [`u_audioBrightness`](/shader/audio/spectral#uniform-reference) | `float` | Spectral brightness 0-1 | [Spectral](/shader/audio/spectral) |\r\n| [`u_audioFlatness`](/shader/audio/spectral#uniform-reference) | `float` | Spectral flatness 0-1 | [Spectral](/shader/audio/spectral) |\r\n\r\n## Audio: Textures\r\n\r\n| Uniform | Type | Description | Details |\r\n|---------|------|-------------|---------|\r\n| [`u_audioFFT`](/shader/audio/fft) | `sampler2D` | FFT as 1D LUMINANCE strip (bin count × 1, values 0-255) | [FFT Texture](/shader/audio/fft) |\r\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) |\r\n\r\n## Video\r\n\r\n| Uniform | Type | Description | Details |\r\n|---------|------|-------------|---------|\r\n| [`u_video`](/shader/video/basics#uniform-reference) | `sampler2D` | Main video frame texture | [Video Basics](/shader/video/basics) |\r\n| [`u_videoResolution`](/shader/video/basics#uniform-reference) | `vec2` | Video frame size in pixels (0,0 if disconnected) | [Video Basics](/shader/video/basics) |\r\n| [`u_videoFrameRate`](/shader/video/basics#uniform-reference) | `float` | Video frame rate | [Video Basics](/shader/video/basics) |\r\n\r\n## CV: Face Detection\r\n\r\n| Uniform | Type | Description | Details |\r\n|---------|------|-------------|---------|\r\n| [`u_faceCount`](/shader/video/face-detection#uniform-reference) | `int` | Number of detected faces | [Face Detection](/shader/video/face-detection) |\r\n| [`u_face0Bounds`](/shader/video/face-detection#uniform-reference) | `vec4` | Bounding box (x, y, w, h) normalized 0-1 | [Face Detection](/shader/video/face-detection) |\r\n| [`u_face0Center`](/shader/video/face-detection#uniform-reference) | `vec2` | Face center normalized 0-1 | [Face Detection](/shader/video/face-detection) |\r\n| [`u_face0HeadPose`](/shader/video/face-mesh) | `vec3` | Pitch, yaw, roll in degrees | [Face Mesh](/shader/video/face-mesh) |\r\n| [`u_face0Confidence`](/shader/video/face-detection#uniform-reference) | `float` | Detection confidence | [Face Detection](/shader/video/face-detection) |\r\n\r\n### Expressions\r\n\r\n| Uniform | Type | Details |\r\n|---------|------|---------|\r\n| [`u_face0Neutral`](/shader/video/emotion-detection) | `float` | [Emotion Detection](/shader/video/emotion-detection) |\r\n| [`u_face0Happy`](/shader/video/emotion-detection) | `float` | [Emotion Detection](/shader/video/emotion-detection) |\r\n| [`u_face0Sad`](/shader/video/emotion-detection) | `float` | [Emotion Detection](/shader/video/emotion-detection) |\r\n| [`u_face0Angry`](/shader/video/emotion-detection) | `float` | [Emotion Detection](/shader/video/emotion-detection) |\r\n| [`u_face0Surprised`](/shader/video/emotion-detection) | `float` | [Emotion Detection](/shader/video/emotion-detection) |\r\n| [`u_face0Disgusted`](/shader/video/emotion-detection) | `float` | [Emotion Detection](/shader/video/emotion-detection) |\r\n| [`u_face0Fearful`](/shader/video/emotion-detection) | `float` | [Emotion Detection](/shader/video/emotion-detection) |\r\n\r\n### Blendshapes (52 uniforms)\r\n\r\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.\r\n\r\n| Uniform | Uniform | Uniform |\r\n|---------|---------|---------|\r\n| `u_face0BrowDownLeft` | `u_face0BrowDownRight` | `u_face0BrowInnerUp` |\r\n| `u_face0BrowOuterUpLeft` | `u_face0BrowOuterUpRight` | `u_face0CheekPuff` |\r\n| `u_face0CheekSquintLeft` | `u_face0CheekSquintRight` | `u_face0EyeBlinkLeft` |\r\n| `u_face0EyeBlinkRight` | `u_face0EyeLookDownLeft` | `u_face0EyeLookDownRight` |\r\n| `u_face0EyeLookInLeft` | `u_face0EyeLookInRight` | `u_face0EyeLookOutLeft` |\r\n| `u_face0EyeLookOutRight` | `u_face0EyeLookUpLeft` | `u_face0EyeLookUpRight` |\r\n| `u_face0EyeSquintLeft` | `u_face0EyeSquintRight` | `u_face0EyeWideLeft` |\r\n| `u_face0EyeWideRight` | `u_face0JawForward` | `u_face0JawLeft` |\r\n| `u_face0JawOpen` | `u_face0JawRight` | `u_face0MouthClose` |\r\n| `u_face0MouthDimpleLeft` | `u_face0MouthDimpleRight` | `u_face0MouthFrownLeft` |\r\n| `u_face0MouthFrownRight` | `u_face0MouthFunnel` | `u_face0MouthLeft` |\r\n| `u_face0MouthLowerDownLeft` | `u_face0MouthLowerDownRight` | `u_face0MouthPressLeft` |\r\n| `u_face0MouthPressRight` | `u_face0MouthPucker` | `u_face0MouthRight` |\r\n| `u_face0MouthRollLower` | `u_face0MouthRollUpper` | `u_face0MouthShrugLower` |\r\n| `u_face0MouthShrugUpper` | `u_face0MouthSmileLeft` | `u_face0MouthSmileRight` |\r\n| `u_face0MouthStretchLeft` | `u_face0MouthStretchRight` | `u_face0MouthUpperUpLeft` |\r\n| `u_face0MouthUpperUpRight` | `u_face0NoseSneerLeft` | `u_face0NoseSneerRight` |\r\n| `u_face0TongueOut` | | |\r\n\r\n## CV: Hand Tracking\r\n\r\n| Uniform | Type | Description | Details |\r\n|---------|------|-------------|---------|\r\n| [`u_handCount`](/shader/video/hand-tracking#detection) | `int` | Number of detected hands (0-2) | [Hand Tracking](/shader/video/hand-tracking) |\r\n| [`u_leftHandPalm`](/shader/video/hand-tracking#per-hand-data) | `vec3` | Left hand palm position | [Hand Tracking](/shader/video/hand-tracking) |\r\n| [`u_rightHandPalm`](/shader/video/hand-tracking#per-hand-data) | `vec3` | Right hand palm position | [Hand Tracking](/shader/video/hand-tracking) |\r\n| [`u_leftHandConfidence`](/shader/video/hand-tracking#per-hand-data) | `float` | Left hand confidence | [Hand Tracking](/shader/video/hand-tracking) |\r\n| [`u_rightHandConfidence`](/shader/video/hand-tracking#per-hand-data) | `float` | Right hand confidence | [Hand Tracking](/shader/video/hand-tracking) |\r\n| [`u_leftHandBounds`](/shader/video/hand-tracking#per-hand-data) | `vec4` | Left hand bounding box (x, y, w, h) | [Hand Tracking](/shader/video/hand-tracking) |\r\n| [`u_rightHandBounds`](/shader/video/hand-tracking#per-hand-data) | `vec4` | Right hand bounding box (x, y, w, h) | [Hand Tracking](/shader/video/hand-tracking) |\r\n\r\n### Gesture Scores (per hand)\r\n\r\nAll gesture uniforms are `float` values 0-1. Replace `left` with `right` for the other hand.\r\n\r\n| Uniform | Description | Details |\r\n|---------|-------------|---------|\r\n| [`u_leftHandFist`](/shader/video/hand-tracking#gesture-uniforms-per-hand) | Fist gesture confidence | [Hand Tracking](/shader/video/hand-tracking) |\r\n| [`u_leftHandOpenPalm`](/shader/video/hand-tracking#gesture-uniforms-per-hand) | Open palm confidence | [Hand Tracking](/shader/video/hand-tracking) |\r\n| [`u_leftHandPeace`](/shader/video/hand-tracking#gesture-uniforms-per-hand) | Peace/V-sign confidence | [Hand Tracking](/shader/video/hand-tracking) |\r\n| [`u_leftHandThumbsUp`](/shader/video/hand-tracking#gesture-uniforms-per-hand) | Thumbs up confidence | [Hand Tracking](/shader/video/hand-tracking) |\r\n| [`u_leftHandThumbsDown`](/shader/video/hand-tracking#gesture-uniforms-per-hand) | Thumbs down confidence | [Hand Tracking](/shader/video/hand-tracking) |\r\n| [`u_leftHandPointing`](/shader/video/hand-tracking#gesture-uniforms-per-hand) | Pointing confidence | [Hand Tracking](/shader/video/hand-tracking) |\r\n| [`u_leftHandILoveYou`](/shader/video/hand-tracking#gesture-uniforms-per-hand) | I Love You sign confidence | [Hand Tracking](/shader/video/hand-tracking) |\r\n\r\n## CV: Pose Detection\r\n\r\n| Uniform | Type | Description | Details |\r\n|---------|------|-------------|---------|\r\n| [`u_poseDetected`](/shader/video/pose-detection#detection-state) | `bool` | Whether a body pose is detected | [Pose Detection](/shader/video/pose-detection) |\r\n| [`u_poseConfidence`](/shader/video/pose-detection#detection-state) | `float` | Pose detection confidence | [Pose Detection](/shader/video/pose-detection) |\r\n| [`u_nosePosition`](/shader/video/pose-detection#key-landmark-positions) | `vec2` | Nose landmark position | [Pose Detection](/shader/video/pose-detection) |\r\n| [`u_leftShoulderPosition`](/shader/video/pose-detection#key-landmark-positions) | `vec2` | Left shoulder position | [Pose Detection](/shader/video/pose-detection) |\r\n| [`u_rightShoulderPosition`](/shader/video/pose-detection#key-landmark-positions) | `vec2` | Right shoulder position | [Pose Detection](/shader/video/pose-detection) |\r\n| [`u_leftElbowPosition`](/shader/video/pose-detection#key-landmark-positions) | `vec2` | Left elbow position | [Pose Detection](/shader/video/pose-detection) |\r\n| [`u_rightElbowPosition`](/shader/video/pose-detection#key-landmark-positions) | `vec2` | Right elbow position | [Pose Detection](/shader/video/pose-detection) |\r\n| [`u_leftWristPosition`](/shader/video/pose-detection#key-landmark-positions) | `vec2` | Left wrist position | [Pose Detection](/shader/video/pose-detection) |\r\n| [`u_rightWristPosition`](/shader/video/pose-detection#key-landmark-positions) | `vec2` | Right wrist position | [Pose Detection](/shader/video/pose-detection) |\r\n| [`u_leftHipPosition`](/shader/video/pose-detection#key-landmark-positions) | `vec2` | Left hip position | [Pose Detection](/shader/video/pose-detection) |\r\n| [`u_rightHipPosition`](/shader/video/pose-detection#key-landmark-positions) | `vec2` | Right hip position | [Pose Detection](/shader/video/pose-detection) |\r\n| [`u_leftKneePosition`](/shader/video/pose-detection#key-landmark-positions) | `vec2` | Left knee position | [Pose Detection](/shader/video/pose-detection) |\r\n| [`u_rightKneePosition`](/shader/video/pose-detection#key-landmark-positions) | `vec2` | Right knee position | [Pose Detection](/shader/video/pose-detection) |\r\n| [`u_leftAnklePosition`](/shader/video/pose-detection#key-landmark-positions) | `vec2` | Left ankle position | [Pose Detection](/shader/video/pose-detection) |\r\n| [`u_rightAnklePosition`](/shader/video/pose-detection#key-landmark-positions) | `vec2` | Right ankle position | [Pose Detection](/shader/video/pose-detection) |\r\n\r\n## CV: Body Segmentation\r\n\r\n| Uniform | Type | Description | Details |\r\n|---------|------|-------------|---------|\r\n| [`u_segmentationMask`](/shader/video/body-segmentation#uniform-reference) | `sampler2D` | Body mask (LUMINANCE: 0 = background, 1 = person) | [Segmentation](/shader/video/body-segmentation) |\r\n| [`u_segmentationRes`](/shader/video/body-segmentation#uniform-reference) | `vec2` | Mask dimensions in pixels | [Segmentation](/shader/video/body-segmentation) |\r\n\r\n## Device Sensors\r\n\r\n| Uniform | Type | Description | Details |\r\n|---------|------|-------------|---------|\r\n| [`u_deviceAcceleration`](/shader/sensors#uniform-reference) | `vec3` | Acceleration without gravity (m/s²) | [Sensor Uniforms](/shader/sensors) |\r\n| [`u_deviceAccelerationGravity`](/shader/sensors#uniform-reference) | `vec3` | Acceleration with gravity (m/s²) | [Sensor Uniforms](/shader/sensors) |\r\n| [`u_deviceRotationRate`](/shader/sensors#uniform-reference) | `vec3` | Gyroscope: alpha, beta, gamma (deg/s) | [Sensor Uniforms](/shader/sensors) |\r\n| [`u_deviceOrientation`](/shader/sensors#uniform-reference) | `vec3` | Orientation: alpha, beta, gamma (degrees) | [Sensor Uniforms](/shader/sensors) |\r\n| [`u_deviceOrientationAbsolute`](/shader/sensors#uniform-reference) | `bool` | Whether orientation is magnetometer-based | [Sensor Uniforms](/shader/sensors) |\r\n\r\n## External Devices: Video\r\n\r\n| Uniform | Type | Description | Details |\r\n|---------|------|-------------|---------|\r\n| [`u_deviceCount`](/shader/external-devices) | `int` | Number of devices with active cameras (0-8) | [Overview](/shader/external-devices) |\r\n| [`u_device0`](/shader/external-devices/video) - `u_device7` | `sampler2D` | Device camera frame texture | [Video Textures](/shader/external-devices/video) |\r\n| [`u_device0Resolution`](/shader/external-devices/video) - `u_device7Resolution` | `vec2` | Device camera frame size | [Video Textures](/shader/external-devices/video) |\r\n| [`u_device0Connected`](/shader/external-devices/video) - `u_device7Connected` | `bool` | Whether device camera is active | [Video Textures](/shader/external-devices/video) |\r\n\r\n> [!NOTE]\r\n> Audio stream uniforms from devices are accessed via `u_audioStream{i}*` uniforms (same pool as additional audio streams, different index range managed by the host).\r\n\r\n## External Devices: Sensors\r\n\r\n| Uniform | Type | Description | Details |\r\n|---------|------|-------------|---------|\r\n| [`u_externalDeviceCount`](/shader/external-devices) | `int` | Number of connected external devices (0-8) | [Overview](/shader/external-devices) |\r\n| [`u_device0Acceleration`](/shader/external-devices/sensors) - `u_device7Acceleration` | `vec3` | Per-device acceleration without gravity | [Sensor Uniforms](/shader/external-devices/sensors) |\r\n| [`u_device0AccelerationGravity`](/shader/external-devices/sensors) - `u_device7AccelerationGravity` | `vec3` | Per-device acceleration with gravity | [Sensor Uniforms](/shader/external-devices/sensors) |\r\n| [`u_device0RotationRate`](/shader/external-devices/sensors) - `u_device7RotationRate` | `vec3` | Per-device rotation rate | [Sensor Uniforms](/shader/external-devices/sensors) |\r\n| [`u_device0Orientation`](/shader/external-devices/sensors) - `u_device7Orientation` | `vec3` | Per-device orientation angles | [Sensor Uniforms](/shader/external-devices/sensors) |\r\n\r\n> [!NOTE]\r\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.\r\n\r\n## Streams (Compositor)\r\n\r\n| Uniform | Type | Description |\r\n|---------|------|-------------|\r\n| `u_videoStreamCount` | `int` | Number of active streams (0-8) |\r\n| `u_videoStream0` - `u_videoStream7` | `sampler2D` | Stream frame textures |\r\n| `u_videoStream0Resolution` - `u_videoStream7Resolution` | `vec2` | Stream frame sizes in pixels |\r\n| `u_videoStream0Connected` - `u_videoStream7Connected` | `bool` | Whether stream has an active frame |\r\n\r\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_videoStreamCount` is `0` and the textures sample as black. Each stream works the same way as [`u_video`](/shader/video/basics).\r\n\r\n## Audio Streams\r\n\r\n| Uniform | Type | Description |\r\n|---------|------|-------------|\r\n| `u_audioStreamCount` | `int` | Number of active audio streams (0-8) |\r\n| `u_audioStream0Connected` - `u_audioStream7Connected` | `bool` | Whether stream is actively providing audio |\r\n| `u_audioStream0Volume` - `u_audioStream7Volume` | `float` | Stream volume (0-1) |\r\n| `u_audioStream0Low` - `u_audioStream7Low` | `float` | Low frequency band energy (0-1) |\r\n| `u_audioStream0LowMid` - `u_audioStream7LowMid` | `float` | Low-mid band energy (0-1) |\r\n| `u_audioStream0Mid` - `u_audioStream7Mid` | `float` | Mid band energy (0-1) |\r\n| `u_audioStream0HighMid` - `u_audioStream7HighMid` | `float` | High-mid band energy (0-1) |\r\n| `u_audioStream0High` - `u_audioStream7High` | `float` | High band energy (0-1) |\r\n| `u_audioStream0Brightness` - `u_audioStream7Brightness` | `float` | Spectral brightness (0-1) |\r\n| `u_audioStream0Flatness` - `u_audioStream7Flatness` | `float` | Spectral flatness (0-1) |\r\n\r\nAdditional audio streams provide lightweight scalar uniforms only: **no** FFT or waveform textures. Beat detection, BPM, and onset uniforms are only available on the main audio stream (`u_audioVolume`, `u_audioBPM`, etc.).\r\n\r\nWhen no audio streams are provided, `u_audioStreamCount` is `0` and all per-stream uniforms default to `0.0` / `false`.\r\n\r\n## Backbuffer\r\n\r\n| Uniform | Type | Description | Details |\r\n|---------|------|-------------|---------|\r\n| [`backbuffer`](/shader/backbuffer) | `sampler2D` | Previous frame texture (feedback effects) | [Backbuffer & Feedback](/shader/backbuffer) |\r\n\r\n> [!WARNING]\r\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.\r\n\r\n## Parameter Directives\r\n\r\nDeclare parameters using `// @viji-TYPE:uniformName key:value ...` comments. Each directive generates a uniform and a UI control in the host.\r\n\r\n| Directive | Uniform Type | UI Control | Details |\r\n|-----------|-------------|------------|---------|\r\n| [`@viji-slider`](/shader/parameters/slider) | `float` | Numeric slider | [Slider](/shader/parameters/slider) |\r\n| [`@viji-number`](/shader/parameters/number) | `float` | Numeric input | [Number](/shader/parameters/number) |\r\n| [`@viji-color`](/shader/parameters/color) | `vec3` | Color picker (hex → RGB 0-1) | [Color](/shader/parameters/color) |\r\n| [`@viji-toggle`](/shader/parameters/toggle) | `bool` | On/off switch | [Toggle](/shader/parameters/toggle) |\r\n| [`@viji-select`](/shader/parameters/select) | `int` | Dropdown (0-based option index) | [Select](/shader/parameters/select) |\r\n| [`@viji-image`](/shader/parameters/image) | `sampler2D` | Image upload | [Image](/shader/parameters/image) |\r\n| [`@viji-button`](/shader/parameters/button) | `bool` | Momentary button (true for one frame) | [Button](/shader/parameters/button) |\r\n| [`@viji-coordinate`](/shader/parameters/coordinate) | `vec2` | 2D coordinate pad: both components -1 to 1 | [Coordinate](/shader/parameters/coordinate) |\r\n| [`@viji-accumulator`](/shader/parameters/accumulator) | `float` | CPU-side: `+= rate × deltaTime` | [Accumulator](/shader/parameters/accumulator) |\r\n\r\nSee [Parameters Overview](/shader/parameters) for syntax, [Grouping](/shader/parameters/grouping) and [Categories](/shader/parameters/categories) for organization.\r\n\r\n## Related\r\n\r\n- [Shader Basics](/shader/basics): auto-injection, GLSL versions, `@renderer shader`\r\n- [Shader Quick Start](/shader/quickstart): getting started with shader scenes\r\n- [Best Practices](/getting-started/best-practices): essential patterns for all renderers\r\n- [Native API Reference](/native/api-reference): JavaScript API for the Native renderer\r\n- [P5 API Reference](/p5/api-reference): JavaScript API for the P5 renderer"
         }
       ]
     },
@@ -7006,7 +7056,7 @@ export const docsApi = {
         },
         {
           "type": "text",
-          "markdown": "## Auto-Injection\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\nWhen your shader is compiled, Viji prepends the following before your code:\r\n\r\n1. `#extension GL_OES_standard_derivatives : enable`: only if your code uses `fwidth` (GLSL ES 1.00 only)\r\n2. `precision mediump float;`\r\n3. All built-in uniform declarations (`u_resolution`, `u_time`, `u_deltaTime`, etc.)\r\n4. All `@viji-*` parameter uniform declarations\r\n\r\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.\r\n\r\n### What You Write vs What Viji Adds\r\n\r\n```glsl\r\n// What you write:\r\n// @renderer shader\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// What Viji compiles (conceptual):\r\nprecision mediump float;\r\nuniform vec2 u_resolution;\r\nuniform float u_time;\r\nuniform float u_deltaTime;\r\nuniform int u_frame;\r\nuniform float u_fps;\r\n// ... (100+ more built-in uniforms)\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## Key Built-in Uniforms\r\n\r\nThese are always available: a brief overview (each has a dedicated page):\r\n\r\n| Uniform | Type | Description | Details |\r\n|---------|------|-------------|---------|\r\n| [`u_resolution`](/shader/resolution) | `vec2` | Canvas width and height in pixels | [Resolution & Coordinates](/shader/resolution) |\r\n| [`u_time`](/shader/timing) | `float` | Elapsed seconds since scene start | [Timing & Animation](/shader/timing) |\r\n| [`u_deltaTime`](/shader/timing) | `float` | Seconds since last frame | [Timing & Animation](/shader/timing) |\r\n| [`u_frame`](/shader/timing) | `int` | Current frame number | [Timing & Animation](/shader/timing) |\r\n| [`u_fps`](/shader/timing) | `float` | Target FPS | [Timing & Animation](/shader/timing) |\r\n| `u_mouse` | `vec2` | Mouse position in pixels | [Mouse Uniforms](/shader/mouse) |\r\n\r\nSee [API Reference](/shader/api-reference) for the complete list of 100+ built-in uniforms.\r\n\r\n## GLSL Versions\r\n\r\n### GLSL ES 1.00 (Default)\r\n\r\nThe default. No `#version` declaration needed. Maximum browser compatibility. Uses `gl_FragColor` for output and `texture2D()` for texture sampling:\r\n\r\n```glsl\r\n// @renderer shader\r\n\r\nvoid main() {\r\n  vec2 uv = gl_FragCoord.xy / u_resolution;\r\n  gl_FragColor = vec4(uv, 0.5, 1.0);\r\n}\r\n```\r\n\r\n### GLSL ES 3.00 (WebGL 2)\r\n\r\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\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\nWhen your shader is compiled, Viji prepends the following before your code:\r\n\r\n1. `#extension GL_OES_standard_derivatives : enable`: only if your code uses `fwidth` (GLSL ES 1.00 only)\r\n2. `precision mediump float;`\r\n3. All built-in uniform declarations (`u_resolution`, `u_time`, `u_deltaTime`, etc.)\r\n4. All `@viji-*` parameter uniform declarations\r\n\r\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.\r\n\r\n### What You Write vs What Viji Adds\r\n\r\n```glsl\r\n// What you write:\r\n// @renderer shader\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// What Viji compiles (conceptual):\r\nprecision mediump float;\r\nuniform vec2 u_resolution;\r\nuniform float u_time;\r\nuniform float u_deltaTime;\r\nuniform int u_frame;\r\nuniform float u_fps;\r\n// ... (100+ more built-in uniforms)\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## Key Built-in Uniforms\r\n\r\nThese are always available: a brief overview (each has a dedicated page):\r\n\r\n| Uniform | Type | Description | Details |\r\n|---------|------|-------------|---------|\r\n| [`u_resolution`](/shader/resolution#u_resolution) | `vec2` | Canvas width and height in pixels | [Resolution & Coordinates](/shader/resolution) |\r\n| [`u_time`](/shader/timing#u_time-absolute-time) | `float` | Elapsed seconds since scene start | [Timing & Animation](/shader/timing) |\r\n| [`u_deltaTime`](/shader/timing#u_deltatime-frame-delta) | `float` | Seconds since last frame | [Timing & Animation](/shader/timing) |\r\n| [`u_frame`](/shader/timing#u_frame-frame-counter) | `int` | Current frame number | [Timing & Animation](/shader/timing) |\r\n| [`u_fps`](/shader/timing#u_fps-target-frame-rate) | `float` | Target FPS | [Timing & Animation](/shader/timing) |\r\n| `u_mouse` | `vec2` | Mouse position in pixels | [Mouse Uniforms](/shader/mouse#position) |\r\n\r\nSee [API Reference](/shader/api-reference) for the complete list of 100+ built-in uniforms.\r\n\r\n## GLSL Versions\r\n\r\n### GLSL ES 1.00 (Default)\r\n\r\nThe default. No `#version` declaration needed. Maximum browser compatibility. Uses `gl_FragColor` for output and `texture2D()` for texture sampling:\r\n\r\n```glsl\r\n// @renderer shader\r\n\r\nvoid main() {\r\n  vec2 uv = gl_FragCoord.xy / u_resolution;\r\n  gl_FragColor = vec4(uv, 0.5, 1.0);\r\n}\r\n```\r\n\r\n### GLSL ES 3.00 (WebGL 2)\r\n\r\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",
@@ -7016,7 +7066,7 @@ export const docsApi = {
         },
         {
           "type": "text",
-          "markdown": "### ES 3.00 Differences\r\n\r\n| ES 1.00 | ES 3.00 | Notes |\r\n|---------|---------|-------|\r\n| `gl_FragColor = vec4(...)` | `out vec4 fragColor; ... fragColor = vec4(...)` | You must declare the output variable |\r\n| `texture2D(sampler, uv)` | `texture(sampler, uv)` | Function renamed |\r\n| `attribute` / `varying` | `in` / `out` | Keyword changes (vertex shader) |\r\n\r\n**Recommendation:** Use GLSL ES 1.00 unless you specifically need WebGL 2 features. ES 1.00 has the widest browser support and is simpler to write.\r\n\r\n> [!WARNING]\r\n> If `#version 300 es` is declared but the browser doesn't support WebGL 2, the shader will fail with a \"WebGL 2 not supported\" error.\r\n\r\n## Parameter Directives\r\n\r\nShader parameters are declared with `// @viji-TYPE:uniformName` comments. Viji parses them, generates uniform declarations, and creates UI controls on the host:\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// @viji-color:tint label:\"Tint\" default:#ff6600\r\n\r\nvoid main() {\r\n  vec2 uv = gl_FragCoord.xy / u_resolution;\r\n  gl_FragColor = vec4(uv * brightness * tint, 1.0);\r\n}\r\n```\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\nSee [Shader Parameters](/shader/parameters) for the full reference on all parameter types, config keys, and the accumulator directive.\r\n\r\n## Environment Constraints\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. One exception: `fetch()` is available, so you can load external data (JSON, etc.) from CDNs.\r\n\r\nThis applies to the host environment, not the shader itself: GLSL runs on the GPU and has no concept of DOM APIs. The constraint matters if you're using JavaScript alongside your shader (not applicable to pure shader scenes).\r\n\r\n## Next Steps\r\n\r\n- [Resolution & Coordinates](/shader/resolution): [`u_resolution`](/shader/resolution), normalization, aspect ratio\r\n- [Timing & Animation](/shader/timing): [`u_time`](/shader/timing), [`u_deltaTime`](/shader/timing), animation patterns\r\n- [Parameters](/shader/parameters): sliders, colors, toggles, accumulators\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": "### ES 3.00 Differences\r\n\r\n| ES 1.00 | ES 3.00 | Notes |\r\n|---------|---------|-------|\r\n| `gl_FragColor = vec4(...)` | `out vec4 fragColor; ... fragColor = vec4(...)` | You must declare the output variable |\r\n| `texture2D(sampler, uv)` | `texture(sampler, uv)` | Function renamed |\r\n| `attribute` / `varying` | `in` / `out` | Keyword changes (vertex shader) |\r\n\r\n**Recommendation:** Use GLSL ES 1.00 unless you specifically need WebGL 2 features. ES 1.00 has the widest browser support and is simpler to write.\r\n\r\n> [!WARNING]\r\n> If `#version 300 es` is declared but the browser doesn't support WebGL 2, the shader will fail with a \"WebGL 2 not supported\" error.\r\n\r\n## Parameter Directives\r\n\r\nShader parameters are declared with `// @viji-TYPE:uniformName` comments. Viji parses them, generates uniform declarations, and creates UI controls on the host:\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// @viji-color:tint label:\"Tint\" default:#ff6600\r\n\r\nvoid main() {\r\n  vec2 uv = gl_FragCoord.xy / u_resolution;\r\n  gl_FragColor = vec4(uv * brightness * tint, 1.0);\r\n}\r\n```\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\nSee [Shader Parameters](/shader/parameters#parameter-types) for the full reference on all parameter types, config keys, and the accumulator directive.\r\n\r\n## Environment Constraints\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. One exception: `fetch()` is available, so you can load external data (JSON, etc.) from CDNs.\r\n\r\nThis applies to the host environment, not the shader itself: GLSL runs on the GPU and has no concept of DOM APIs. The constraint matters if you're using JavaScript alongside your shader (not applicable to pure shader scenes).\r\n\r\n## Next Steps\r\n\r\n- [Resolution & Coordinates](/shader/resolution): [`u_resolution`](/shader/resolution#u_resolution), normalization, aspect ratio\r\n- [Timing & Animation](/shader/timing): [`u_time`](/shader/timing#u_time-absolute-time), [`u_deltaTime`](/shader/timing#u_deltatime-frame-delta), animation patterns\r\n- [Parameters](/shader/parameters): sliders, colors, toggles, accumulators\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"
         }
       ]
     },
@@ -7109,7 +7159,7 @@ export const docsApi = {
         },
         {
           "type": "text",
-          "markdown": "### The Aspect Ratio Value\r\n\r\nWhen you need the aspect ratio as a number:\r\n\r\n```glsl\r\nfloat aspect = u_resolution.x / u_resolution.y;\r\n```\r\n\r\nUse it to scale one axis:\r\n\r\n```glsl\r\nvec2 uv = gl_FragCoord.xy / u_resolution - 0.5;\r\nuv.x *= aspect; // correct for non-square canvas\r\n```\r\n\r\n## Common Patterns\r\n\r\n### Distance from Center\r\n\r\n```glsl\r\nvec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution) / u_resolution.y;\r\nfloat d = length(uv);\r\n```\r\n\r\n### Anti-Aliased Circle\r\n\r\n```glsl\r\nfloat circle = smoothstep(0.3, 0.3 - 2.0 / u_resolution.y, d);\r\n```\r\n\r\nThe `2.0 / u_resolution.y` term creates a 2-pixel-wide anti-aliased edge that stays sharp at any resolution.\r\n\r\n### Tiled Coordinates\r\n\r\n```glsl\r\nvec2 uv = gl_FragCoord.xy / u_resolution;\r\nvec2 tiled = fract(uv * 10.0); // 10x10 grid of tiles\r\n```\r\n\r\n## Resolution Agnosticism\r\n\r\n> [!NOTE]\r\n> Always use `u_resolution` for coordinate normalization. This keeps your shader resolution-agnostic: it will look correct at any canvas size from small thumbnails to fullscreen 4K.\r\n\r\nNever hardcode pixel values in a shader:\r\n\r\n```glsl\r\n// Bad: assumes specific resolution\r\nvec2 uv = gl_FragCoord.xy / vec2(1920.0, 1080.0);\r\n\r\n// Good: adapts to any resolution\r\nvec2 uv = gl_FragCoord.xy / u_resolution;\r\n```\r\n\r\n## Comparison Across Renderers\r\n\r\n| Concept | Native | P5 | Shader |\r\n|---------|--------|-----|--------|\r\n| Canvas width | [`viji.width`](/native/canvas-context) | [`viji.width`](/p5/canvas-resolution) / `p5.width` | `u_resolution.x` |\r\n| Canvas height | [`viji.height`](/native/canvas-context) | [`viji.height`](/p5/canvas-resolution) / `p5.height` | `u_resolution.y` |\r\n| Aspect ratio | `viji.width / viji.height` | `viji.width / viji.height` | `u_resolution.x / u_resolution.y` |\r\n\r\n## Next Steps\r\n\r\n- [Timing & Animation](/shader/timing): [`u_time`](/shader/timing), [`u_deltaTime`](/shader/timing), animation patterns\r\n- [Shader Basics](/shader/basics): auto-injection, GLSL versions, `@renderer shader`\r\n- [Parameters](/shader/parameters): sliders, colors, toggles, accumulators\r\n- [Native Canvas & Context](/native/canvas-context): `viji.width`, `viji.height` in native scenes\r\n- [P5 Canvas & Resolution](/p5/canvas-resolution): resolution in P5 scenes\r\n- [API Reference](/shader/api-reference): complete list of built-in uniforms"
+          "markdown": "### The Aspect Ratio Value\r\n\r\nWhen you need the aspect ratio as a number:\r\n\r\n```glsl\r\nfloat aspect = u_resolution.x / u_resolution.y;\r\n```\r\n\r\nUse it to scale one axis:\r\n\r\n```glsl\r\nvec2 uv = gl_FragCoord.xy / u_resolution - 0.5;\r\nuv.x *= aspect; // correct for non-square canvas\r\n```\r\n\r\n## Common Patterns\r\n\r\n### Distance from Center\r\n\r\n```glsl\r\nvec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution) / u_resolution.y;\r\nfloat d = length(uv);\r\n```\r\n\r\n### Anti-Aliased Circle\r\n\r\n```glsl\r\nfloat circle = smoothstep(0.3, 0.3 - 2.0 / u_resolution.y, d);\r\n```\r\n\r\nThe `2.0 / u_resolution.y` term creates a 2-pixel-wide anti-aliased edge that stays sharp at any resolution.\r\n\r\n### Tiled Coordinates\r\n\r\n```glsl\r\nvec2 uv = gl_FragCoord.xy / u_resolution;\r\nvec2 tiled = fract(uv * 10.0); // 10x10 grid of tiles\r\n```\r\n\r\n## Resolution Agnosticism\r\n\r\n> [!NOTE]\r\n> Always use `u_resolution` for coordinate normalization. This keeps your shader resolution-agnostic: it will look correct at any canvas size from small thumbnails to fullscreen 4K.\r\n\r\nNever hardcode pixel values in a shader:\r\n\r\n```glsl\r\n// Bad: assumes specific resolution\r\nvec2 uv = gl_FragCoord.xy / vec2(1920.0, 1080.0);\r\n\r\n// Good: adapts to any resolution\r\nvec2 uv = gl_FragCoord.xy / u_resolution;\r\n```\r\n\r\n## Comparison Across Renderers\r\n\r\n| Concept | Native | P5 | Shader |\r\n|---------|--------|-----|--------|\r\n| Canvas width | [`viji.width`](/native/canvas-context#dimension-properties) | [`viji.width`](/p5/canvas-resolution#resolution-properties) / `p5.width` | `u_resolution.x` |\r\n| Canvas height | [`viji.height`](/native/canvas-context#dimension-properties) | [`viji.height`](/p5/canvas-resolution#resolution-properties) / `p5.height` | `u_resolution.y` |\r\n| Aspect ratio | `viji.width / viji.height` | `viji.width / viji.height` | `u_resolution.x / u_resolution.y` |\r\n\r\n## Next Steps\r\n\r\n- [Timing & Animation](/shader/timing): [`u_time`](/shader/timing), [`u_deltaTime`](/shader/timing), animation patterns\r\n- [Shader Basics](/shader/basics): auto-injection, GLSL versions, `@renderer shader`\r\n- [Parameters](/shader/parameters): sliders, colors, toggles, accumulators\r\n- [Native Canvas & Context](/native/canvas-context): `viji.width`, `viji.height` in native scenes\r\n- [P5 Canvas & Resolution](/p5/canvas-resolution): resolution in P5 scenes\r\n- [API Reference](/shader/api-reference): complete list of built-in uniforms"
         }
       ]
     },
@@ -7212,7 +7262,7 @@ export const docsApi = {
         },
         {
           "type": "text",
-          "markdown": "### When to Use `u_time` vs `@viji-accumulator`\r\n\r\n| Scenario | Use | Why |\r\n|----------|-----|-----|\r\n| Fixed-speed animation | `u_time` | No slider controls speed, so no jump risk |\r\n| Slider-controlled speed | `@viji-accumulator` | Prevents jumps when user changes the slider |\r\n| Phase offset per element | `u_time + offset` | Offset is constant, no jump risk |\r\n| Speed × slider in one expression | `@viji-accumulator` | `u_time * speed` jumps on slider change |\r\n\r\n## Frame-Rate Independence\r\n\r\n> [!NOTE]\r\n> Always use `u_resolution` for coordinate normalization. Use `u_time` or `u_deltaTime` for frame-rate-independent animation. Never hardcode pixel values or assume a specific frame rate.\r\n\r\nShaders are inherently frame-rate-independent when using `u_time` because the time value is absolute. The only case where frame rate matters is backbuffer-based feedback effects: there, scale the feedback strength by `u_deltaTime`.\r\n\r\n## Comparison Across Renderers\r\n\r\n| Concept | Native | P5 | Shader |\r\n|---------|--------|-----|--------|\r\n| Elapsed time | [`viji.time`](/native/timing) | [`viji.time`](/p5/timing) | `u_time` |\r\n| Frame delta | [`viji.deltaTime`](/native/timing) | [`viji.deltaTime`](/p5/timing) | `u_deltaTime` |\r\n| Frame count | [`viji.frameCount`](/native/timing) | [`viji.frameCount`](/p5/timing) | `u_frame` |\r\n| Target FPS | [`viji.fps`](/native/timing) | [`viji.fps`](/p5/timing) | `u_fps` |\r\n\r\n## Next Steps\r\n\r\n- [Resolution & Coordinates](/shader/resolution): [`u_resolution`](/shader/resolution), normalization, aspect ratio\r\n- [Shader Basics](/shader/basics): auto-injection, GLSL versions, `@renderer shader`\r\n- [Parameters](/shader/parameters): sliders, colors, toggles\r\n- [Accumulator](/shader/parameters/accumulator): full accumulator reference\r\n- [Backbuffer](/shader/backbuffer): feedback effects using the previous frame\r\n- [Native Timing](/native/timing): timing in the native renderer\r\n- [P5 Timing](/p5/timing): timing in the P5 renderer\r\n- [API Reference](/shader/api-reference): complete list of built-in uniforms"
+          "markdown": "### When to Use `u_time` vs `@viji-accumulator`\r\n\r\n| Scenario | Use | Why |\r\n|----------|-----|-----|\r\n| Fixed-speed animation | `u_time` | No slider controls speed, so no jump risk |\r\n| Slider-controlled speed | `@viji-accumulator` | Prevents jumps when user changes the slider |\r\n| Phase offset per element | `u_time + offset` | Offset is constant, no jump risk |\r\n| Speed × slider in one expression | `@viji-accumulator` | `u_time * speed` jumps on slider change |\r\n\r\n## Frame-Rate Independence\r\n\r\n> [!NOTE]\r\n> Always use `u_resolution` for coordinate normalization. Use `u_time` or `u_deltaTime` for frame-rate-independent animation. Never hardcode pixel values or assume a specific frame rate.\r\n\r\nShaders are inherently frame-rate-independent when using `u_time` because the time value is absolute. The only case where frame rate matters is backbuffer-based feedback effects: there, scale the feedback strength by `u_deltaTime`.\r\n\r\n## Comparison Across Renderers\r\n\r\n| Concept | Native | P5 | Shader |\r\n|---------|--------|-----|--------|\r\n| Elapsed time | [`viji.time`](/native/timing#vijitime-absolute-time) | [`viji.time`](/p5/timing#vijitime-oscillations--cycles) | `u_time` |\r\n| Frame delta | [`viji.deltaTime`](/native/timing#vijideltatime-frame-delta) | [`viji.deltaTime`](/p5/timing#vijideltatime-accumulation) | `u_deltaTime` |\r\n| Frame count | [`viji.frameCount`](/native/timing#vijiframecount) | [`viji.frameCount`](/p5/timing#vijiframecount-vs-p5framecount) | `u_frame` |\r\n| Target FPS | [`viji.fps`](/native/timing#vijifps-target-frame-rate) | [`viji.fps`](/p5/timing#vijifps-target-frame-rate) | `u_fps` |\r\n\r\n## Next Steps\r\n\r\n- [Resolution & Coordinates](/shader/resolution): [`u_resolution`](/shader/resolution), normalization, aspect ratio\r\n- [Shader Basics](/shader/basics): auto-injection, GLSL versions, `@renderer shader`\r\n- [Parameters](/shader/parameters): sliders, colors, toggles\r\n- [Accumulator](/shader/parameters/accumulator): full accumulator reference\r\n- [Backbuffer](/shader/backbuffer): feedback effects using the previous frame\r\n- [Native Timing](/native/timing): timing in the native renderer\r\n- [P5 Timing](/p5/timing): timing in the P5 renderer\r\n- [API Reference](/shader/api-reference): complete list of built-in uniforms"
         }
       ]
     },
@@ -7260,7 +7310,7 @@ export const docsApi = {
       "content": [
         {
           "type": "text",
-          "markdown": "# Shader Parameters\r\n\r\nParameters are the primary way to give users control over your scene. You declare them at the top of your shader, and Viji renders corresponding UI controls (sliders, color pickers, toggles, etc.) in the host application. Values update in real-time as users interact with the controls.\r\n\r\nIn the shader renderer, parameters are declared using `// @viji-*` comment directives. Each directive creates a UI control and a corresponding GLSL uniform: no manual `uniform` declarations needed. Read the uniform directly in your shader code to get the current value.\r\n\r\n## Parameter Types\r\n\r\n| Directive | Uniform Type | Value | Use For |\r\n|---|---|---|---|\r\n| [`@viji-slider`](slider/) | `float` | Continuous range | Speed, intensity, size |\r\n| [`@viji-number`](number/) | `float` | Precise numeric | Count, threshold |\r\n| [`@viji-color`](color/) | `vec3` | RGB (0-1) | Tint, palette |\r\n| [`@viji-toggle`](toggle/) | `bool` | On/off | Invert, enable effect |\r\n| [`@viji-select`](select/) | `int` | Index (0-based) | Mode, pattern selection |\r\n| [`@viji-image`](image/) | `sampler2D` | Texture | Overlay, displacement map |\r\n| [`@viji-button`](button/) | `bool` | Momentary trigger | Reset, spawn, one-shot action |\r\n| Coordinate | `@viji-coordinate` | `vec2` | 2D coordinate pad control. Both axes range from -1 to 1. |\r\n| [`@viji-accumulator`](accumulator/) | `float` | CPU-side integration | Smooth animation phase |\r\n\r\n## Basic Pattern\r\n\r\n```glsl\r\n// @renderer shader\r\n// @viji-slider:speed label:\"Speed\" default:1.0 min:0.1 max:5.0\r\n// @viji-color:tint label:\"Tint\" default:#ff6600\r\n// @viji-toggle:invert label:\"Invert\" default:false\r\n\r\nvoid main() {\r\n  vec2 uv = gl_FragCoord.xy / u_resolution;\r\n  vec3 col = tint * uv.x * speed;\r\n  if (invert) col = 1.0 - col;\r\n  gl_FragColor = vec4(col, 1.0);\r\n}\r\n```\r\n\r\nEach `@viji-*` directive auto-generates a `uniform` declaration with the name after the colon. `speed` becomes `uniform float speed;`, `tint` becomes `uniform vec3 tint;`, etc.\r\n\r\n> [!WARNING]\r\n> Do not use the `u_` prefix for parameter names: it is reserved for built-in Viji uniforms. Use descriptive names like `speed`, `tint`, `brightness`.\r\n\r\n> [!NOTE]\r\n> Parameter directives use **single-line `//` comments only**. Block comments `/* */` are not parsed for `@viji-*` directives.\r\n\r\n## Directive Syntax\r\n\r\n```\r\n// @viji-TYPE:uniformName key:value key:\"string value\" key:[array]\r\n```\r\n\r\n- **TYPE**: one of: [`slider`](slider/), [`number`](number/), [`color`](color/), [`toggle`](toggle/), [`select`](select/), [`image`](image/), [`button`](button/), [`coordinate`](coordinate/), [`accumulator`](accumulator/)\r\n- **uniformName**: the GLSL uniform name (no `u_` prefix)\r\n- **key:value** pairs: configure the parameter\r\n\r\n## Common Config Keys\r\n\r\n| Key | Type | Description |\r\n|---|---|---|\r\n| `label` | `string` | **(required)** Display name in the UI |\r\n| `default` | varies | **(required for most types)** Initial value |\r\n| `min` | `number` | Minimum value ([slider](slider/)/[number](number/)) |\r\n| `max` | `number` | Maximum value ([slider](slider/)/[number](number/)) |\r\n| `step` | `number` | Step increment ([slider](slider/)/[number](number/)) |\r\n| `description` | `string` | Help text |\r\n| `group` | `string` | Group name for organizing parameters: see [Grouping](grouping/) |\r\n| `category` | `string` | Visibility category: see [Categories](categories/) |\r\n| `options` | `array` | Options list ([select](select/) only) |\r\n\r\n## Uniform Type Mapping\r\n\r\n| Parameter Type | GLSL Uniform | Notes |\r\n|---|---|---|\r\n| [`slider`](slider/) | `uniform float` | |\r\n| [`number`](number/) | `uniform float` | Same as slider |\r\n| [`color`](color/) | `uniform vec3` | RGB components, each 0-1 |\r\n| [`toggle`](toggle/) | `uniform bool` | |\r\n| [`select`](select/) | `uniform int` | 0-based index of selected option |\r\n| [`image`](image/) | `uniform sampler2D` | |\r\n| [`button`](button/) | `uniform bool` | `true` for 1 frame after click, then `false` |\r\n| `coordinate` | `vec2` | `{ x: number, y: number }` mapped to `vec2(x, y)` |\r\n| [`accumulator`](accumulator/) | `uniform float` | CPU-side `value += rate × deltaTime` each frame |\r\n\r\n> [!WARNING]\r\n> All `@viji-*` directives must appear as top-level comments before `void main()`. They are parsed once during shader compilation. Viji's shader auto-injection places the generated `uniform` declarations before your code.\r\n\r\n## Organization\r\n\r\nAs scenes grow, you'll want to organize parameters into logical sections and control when they're visible:\r\n\r\n- **[Grouping](grouping/)**. Use the `group:` key to collect related parameters under a shared heading (e.g., `group:animation`). Parameters with the same `group` value appear together in the UI.\r\n- **[Categories](categories/)**. Use the `category:` key to tag parameters as `general`, `audio`, `video`, or `interaction` to automatically show/hide them based on what inputs are currently active.\r\n\r\n## Related\r\n\r\n- [Slider](slider/): the most common parameter type\r\n- [Coordinate](coordinate/): 2D position control\r\n- [Accumulator](accumulator/): smooth animation without `u_time * speed` jumps\r\n- [Grouping](grouping/): organizing parameters into named groups\r\n- [Categories](categories/): visibility based on capabilities\r\n- [Native Parameters](/native/parameters): equivalent JavaScript API\r\n- [P5 Parameters](/p5/parameters): same system in the P5 renderer\r\n- [Best Practices](/getting-started/best-practices): essential patterns for all renderers"
+          "markdown": "# Shader Parameters\r\n\r\nParameters are the primary way to give users control over your scene. You declare them at the top of your shader, and Viji renders corresponding UI controls (sliders, color pickers, toggles, etc.) in the host application. Values update in real-time as users interact with the controls.\r\n\r\nIn the shader renderer, parameters are declared using `// @viji-*` comment directives. Each directive creates a UI control and a corresponding GLSL uniform: no manual `uniform` declarations needed. Read the uniform directly in your shader code to get the current value.\r\n\r\n## Parameter Types\r\n\r\n| Directive | Uniform Type | Value | Use For |\r\n|---|---|---|---|\r\n| [`@viji-slider`](slider/) | `float` | Continuous range | Speed, intensity, size |\r\n| [`@viji-number`](number/) | `float` | Precise numeric | Count, threshold |\r\n| [`@viji-color`](color/) | `vec3` | RGB (0-1) | Tint, palette |\r\n| [`@viji-toggle`](toggle/) | `bool` | On/off | Invert, enable effect |\r\n| [`@viji-select`](select/) | `int` | Index (0-based) | Mode, pattern selection |\r\n| [`@viji-image`](image/) | `sampler2D` | Texture | Overlay, displacement map |\r\n| [`@viji-button`](button/) | `bool` | Momentary trigger | Reset, spawn, one-shot action |\r\n| [`@viji-coordinate`](coordinate/) | `vec2` | 2D point (-1 to 1) | XY pad, origin, target position |\r\n| [`@viji-accumulator`](accumulator/) | `float` | CPU-side integration | Smooth animation phase |\r\n\r\n## Basic Pattern\r\n\r\n```glsl\r\n// @renderer shader\r\n// @viji-slider:speed label:\"Speed\" default:1.0 min:0.1 max:5.0\r\n// @viji-color:tint label:\"Tint\" default:#ff6600\r\n// @viji-toggle:invert label:\"Invert\" default:false\r\n\r\nvoid main() {\r\n  vec2 uv = gl_FragCoord.xy / u_resolution;\r\n  vec3 col = tint * uv.x * speed;\r\n  if (invert) col = 1.0 - col;\r\n  gl_FragColor = vec4(col, 1.0);\r\n}\r\n```\r\n\r\nEach `@viji-*` directive auto-generates a `uniform` declaration with the name after the colon. `speed` becomes `uniform float speed;`, `tint` becomes `uniform vec3 tint;`, etc.\r\n\r\n> [!WARNING]\r\n> Do not use the `u_` prefix for parameter names: it is reserved for built-in Viji uniforms. Use descriptive names like `speed`, `tint`, `brightness`.\r\n\r\n> [!NOTE]\r\n> Parameter directives use **single-line `//` comments only**. Block comments `/* */` are not parsed for `@viji-*` directives.\r\n\r\n## Directive Syntax\r\n\r\n```\r\n// @viji-TYPE:uniformName key:value key:\"string value\" key:[array]\r\n```\r\n\r\n- **TYPE**: one of: [`slider`](slider/), [`number`](number/), [`color`](color/), [`toggle`](toggle/), [`select`](select/), [`image`](image/), [`button`](button/), [`coordinate`](coordinate/), [`accumulator`](accumulator/)\r\n- **uniformName**: the GLSL uniform name (no `u_` prefix)\r\n- **key:value** pairs: configure the parameter\r\n\r\n## Common Config Keys\r\n\r\n| Key | Type | Description |\r\n|---|---|---|\r\n| `label` | `string` | **(required)** Display name in the UI |\r\n| `default` | varies | **(required for most types)** Initial value |\r\n| `min` | `number` | Minimum value ([slider](slider/)/[number](number/)) |\r\n| `max` | `number` | Maximum value ([slider](slider/)/[number](number/)) |\r\n| `step` | `number` | Step increment ([slider](slider/)/[number](number/)) |\r\n| `description` | `string` | Help text |\r\n| `group` | `string` | Group name for organizing parameters: see [Grouping](grouping/) |\r\n| `category` | `string` | Visibility category: see [Categories](categories/) |\r\n| `options` | `array` | Options list ([select](select/) only) |\r\n\r\n## Uniform Type Mapping\r\n\r\n| Parameter Type | GLSL Uniform | Notes |\r\n|---|---|---|\r\n| [`slider`](slider/) | `uniform float` | |\r\n| [`number`](number/) | `uniform float` | Same as slider |\r\n| [`color`](color/) | `uniform vec3` | RGB components, each 0-1 |\r\n| [`toggle`](toggle/) | `uniform bool` | |\r\n| [`select`](select/) | `uniform int` | 0-based index of selected option |\r\n| [`image`](image/) | `uniform sampler2D` | |\r\n| [`button`](button/) | `uniform bool` | `true` for 1 frame after click, then `false` |\r\n| `coordinate` | `vec2` | `{ x: number, y: number }` mapped to `vec2(x, y)` |\r\n| [`accumulator`](accumulator/) | `uniform float` | CPU-side `value += rate × deltaTime` each frame |\r\n\r\n> [!WARNING]\r\n> All `@viji-*` directives must appear as top-level comments before `void main()`. They are parsed once during shader compilation. Viji's shader auto-injection places the generated `uniform` declarations before your code.\r\n\r\n## Organization\r\n\r\nAs scenes grow, you'll want to organize parameters into logical sections and control when they're visible:\r\n\r\n- **[Grouping](grouping/)**. Use the `group:` key to collect related parameters under a shared heading (e.g., `group:animation`). Parameters with the same `group` value appear together in the UI.\r\n- **[Categories](categories/)**. Use the `category:` key to tag parameters as `general`, `audio`, `video`, or `interaction` to automatically show/hide them based on what inputs are currently active.\r\n\r\n## Related\r\n\r\n- [Slider](slider/): the most common parameter type\r\n- [Coordinate](coordinate/): 2D position control\r\n- [Accumulator](accumulator/): smooth animation without `u_time * speed` jumps\r\n- [Grouping](grouping/): organizing parameters into named groups\r\n- [Categories](categories/): visibility based on capabilities\r\n- [Native Parameters](/native/parameters): equivalent JavaScript API\r\n- [P5 Parameters](/p5/parameters): same system in the P5 renderer\r\n- [Best Practices](/getting-started/best-practices): essential patterns for all renderers"
         }
       ]
     },
@@ -7290,9 +7340,9 @@ export const docsApi = {
           "text": "Slider vs Number in Shaders"
         },
         {
-          "id": "smooth-animation-with-accumulators",
+          "id": "smooth-animation-speed",
           "level": 2,
-          "text": "Smooth Animation with Accumulators"
+          "text": "Smooth Animation Speed"
         },
         {
           "id": "rules",
@@ -7318,7 +7368,7 @@ export const docsApi = {
         },
         {
           "type": "text",
-          "markdown": "## Slider vs Number in Shaders\r\n\r\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:\r\n\r\n| | @viji-slider | @viji-number |\r\n|--|--------------|--------------|\r\n| UI | Draggable track | Text input field |\r\n| Best for | Continuous ranges, visual tuning | Precise values, integer counts |\r\n\r\n## Smooth Animation with Accumulators\r\n\r\nA common pattern is using a slider to control animation speed:\r\n\r\n```glsl\r\nfloat phase = u_time * speed;  // jumps when speed changes mid-animation\r\n```\r\n\r\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:\r\n\r\n```glsl\r\n// @viji-slider:speed label:\"Speed\" default:1 min:0 max:5 step:0.1\r\n// @viji-accumulator:phase rate:speed\r\n// Generates: uniform float speed; and uniform float phase;\r\n// phase grows by speed × deltaTime each frame, no jumps\r\n```\r\n\r\nSee [Accumulator](../accumulator/) for full details and examples.\r\n\r\n## Rules\r\n\r\n- Numeric values have no quotes: `default:1`, `min:0`, `max:5`\r\n- String values use quotes: `label:\"Speed\"`\r\n- The `label` and `default` keys are required\r\n\r\n## Related\r\n\r\n- [Shader Basics](/shader/basics): shader file structure and directives\r\n- [Number](../number/): numeric input `uniform float`\r\n- [Color](../color/): color picker `uniform vec3`\r\n- [Toggle](../toggle/): boolean `uniform bool`\r\n- [Select](../select/): dropdown `uniform int`\r\n- [Accumulator](../accumulator/): frame-persistent state driven by slider values\r\n- [Native Slider](/native/parameters/slider): equivalent for the Native renderer\r\n- [P5 Slider](/p5/parameters/slider): equivalent for the P5 renderer"
+          "markdown": "## Slider vs Number in Shaders\r\n\r\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:\r\n\r\n| | @viji-slider | @viji-number |\r\n|--|--------------|--------------|\r\n| UI | Draggable track | Text input field |\r\n| Best for | Continuous ranges, visual tuning | Precise values, integer counts |\r\n\r\n## Smooth Animation Speed\r\n\r\nA common pattern is using a slider to control animation speed:\r\n\r\n```glsl\r\nfloat phase = u_time * speed;  // jumps when speed changes mid-animation\r\n```\r\n\r\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:\r\n\r\n```glsl\r\n// @viji-slider:speed label:\"Speed\" default:1 min:0 max:5 step:0.1\r\n// @viji-accumulator:phase rate:speed\r\n// Generates: uniform float speed; and uniform float phase;\r\n// phase grows by speed × deltaTime each frame, no jumps\r\n```\r\n\r\nSee [Accumulator](../accumulator/) for full details and examples.\r\n\r\n## Rules\r\n\r\n- Numeric values have no quotes: `default:1`, `min:0`, `max:5`\r\n- String values use quotes: `label:\"Speed\"`\r\n- The `label` and `default` keys are required\r\n\r\n## Related\r\n\r\n- [Shader Basics](/shader/basics): shader file structure and directives\r\n- [Number](../number/): numeric input `uniform float`\r\n- [Color](../color/): color picker `uniform vec3`\r\n- [Toggle](../toggle/): boolean `uniform bool`\r\n- [Select](../select/): dropdown `uniform int`\r\n- [Accumulator](../accumulator/): frame-persistent state driven by slider values\r\n- [Native Slider](/native/parameters/slider): equivalent for the Native renderer\r\n- [P5 Slider](/p5/parameters/slider): equivalent for the P5 renderer"
         }
       ]
     },
@@ -7337,6 +7387,11 @@ export const docsApi = {
           "level": 2,
           "text": "Uniform Type"
         },
+        {
+          "id": "default-value-forms",
+          "level": 2,
+          "text": "Default value forms"
+        },
         {
           "id": "usage",
           "level": 2,
@@ -7356,17 +7411,17 @@ export const docsApi = {
       "content": [
         {
           "type": "text",
-          "markdown": "# @viji-color\r\n\r\n```glsl\r\n// @viji-color:myColor label:\"Color\" default:#ff6600\r\nuniform vec3 myColor;\r\n```\r\n\r\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`.\r\n\r\n## Directive Syntax\r\n\r\n```\r\n// @viji-color:uniformName key:value key:value ...\r\n```\r\n\r\n| Key | Required | Default | Description |\r\n|-----|----------|---------|-------------|\r\n| `label` | Yes |  | Display name in the parameter UI |\r\n| `default` | Yes |  | Initial hex color (e.g., `#ff6600`): **no quotes** |\r\n| `description` | No |  | Tooltip text (use quotes: `description:\"Help text\"`) |\r\n| `group` | No | `general` | Group name (use quotes: `group:\"colors\"`) |\r\n| `category` | No | `general` | Visibility category |\r\n\r\n## Uniform Type\r\n\r\nThe color is injected as a `vec3`:\r\n\r\n| Component | Value | Range |\r\n|-----------|-------|-------|\r\n| `.r` | Red channel | 0.0 - 1.0 |\r\n| `.g` | Green channel | 0.0 - 1.0 |\r\n| `.b` | Blue channel | 0.0 - 1.0 |\r\n\r\nFor hex `#ff8040`: `.r = 1.0`, `.g ≈ 0.502`, `.b ≈ 0.251`.\r\n\r\n## Usage\r\n\r\n```glsl\r\n// @renderer shader\r\n// @viji-color:bgColor label:\"Background\" default:#0f0f1a\r\n// @viji-color:accent label:\"Accent\" default:#ff4488\r\n\r\nvoid main() {\r\n  vec2 uv = gl_FragCoord.xy / u_resolution;\r\n  float d = distance(uv, vec2(0.5));\r\n  vec3 col = mix(accent, bgColor, smoothstep(0.1, 0.4, d));\r\n  gl_FragColor = vec4(col, 1.0);\r\n}\r\n```\r\n\r\n> [!WARNING]\r\n> The directive must use `//` comments only. Block comments (`/* */`) are not parsed.\r\n\r\n> [!NOTE]\r\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."
+          "markdown": "# @viji-color\r\n\r\n```glsl\r\n// @viji-color:myColor label:\"Color\" default:#ff6600\r\nuniform vec3 myColor;\r\n```\r\n\r\nDeclares a color picker parameter. The host renders a color swatch that opens a full picker when clicked. The chosen color is normalized to canonical hex internally and uploaded to the GPU as a `vec3` uniform with components in `0.0-1.0`.\r\n\r\n## Directive Syntax\r\n\r\n```\r\n// @viji-color:uniformName key:value key:value ...\r\n```\r\n\r\n| Key | Required | Default | Description |\r\n|-----|----------|---------|-------------|\r\n| `label` | Yes |  | Display name in the parameter UI |\r\n| `default` | Yes |  | Initial color in any of the [supported forms](#default-value-forms) — **no quotes** |\r\n| `description` | No |  | Tooltip text (use quotes: `description:\"Help text\"`) |\r\n| `group` | No | `general` | Group name (use quotes: `group:\"colors\"`) |\r\n| `category` | No | `general` | Visibility category |\r\n\r\n## Uniform Type\r\n\r\nThe color is injected as a `vec3`:\r\n\r\n| Component | Value | Range |\r\n|-----------|-------|-------|\r\n| `.r` | Red channel | 0.0 - 1.0 |\r\n| `.g` | Green channel | 0.0 - 1.0 |\r\n| `.b` | Blue channel | 0.0 - 1.0 |\r\n\r\nFor hex `#ff8040`: `.r = 1.0`, `.g ≈ 0.502`, `.b ≈ 0.251`.\r\n\r\n## Default value forms\r\n\r\nThe `default:` key accepts any of the following forms. They are all converted\r\nto canonical lowercase hex internally; the GPU uniform is always a `vec3` in `0..1`.\r\n\r\n| Form | Example | Component ranges |\r\n|------|---------|------------------|\r\n| Hex (6-digit) | `default:#ff6600` | — |\r\n| Hex (3-digit) | `default:#f60` | Auto-expanded |\r\n| GLSL `vec3()` | `default:vec3(1.0, 0.4, 0.0)` | `0..1` (matches the uniform's runtime range) |\r\n| CSS-style `rgb()` | `default:rgb(255, 102, 0)` | `0..255` |\r\n| CSS-style `hsl()` | `default:hsl(24, 100%, 50%)` | `h`: `0..360`, `s`/`l`: `0..100%` |\r\n| P5-style `hsb()` | `default:hsb(24, 100, 100)` | `h`: `0..360`, `s`/`b`: `0..100` |\r\n\r\nFunction-call forms must not be wrapped in quotes (e.g., `default:rgb(255, 102, 0)`,\r\nnot `default:\"rgb(255, 102, 0)\"`). Spaces inside the parentheses are fine.\r\n\r\n## Usage\r\n\r\n```glsl\r\n// @renderer shader\r\n// @viji-color:bgColor label:\"Background\" default:#0f0f1a\r\n// @viji-color:accent  label:\"Accent\"     default:vec3(1.0, 0.27, 0.53)\r\n// @viji-color:warm    label:\"Warm\"       default:rgb(255, 200, 100)\r\n// @viji-color:cool    label:\"Cool\"       default:hsb(200, 80, 90)\r\n\r\nvoid main() {\r\n  vec2 uv = gl_FragCoord.xy / u_resolution;\r\n  float d = distance(uv, vec2(0.5));\r\n  vec3 col = mix(accent, bgColor, smoothstep(0.1, 0.4, d));\r\n  // bgColor, accent, warm, cool are all vec3 in 0..1 — usable directly in any\r\n  // GLSL color expression (mix, *, +, etc.)\r\n  gl_FragColor = vec4(col, 1.0);\r\n}\r\n```\r\n\r\n> [!WARNING]\r\n> The directive must use `//` comments only. Block comments (`/* */`) are not parsed.\r\n\r\n> [!NOTE]\r\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\r\n// @viji-color:bgColor label:\"Background\" default:#0f0f1a\r\n// @viji-color:color1 label:\"Color 1\" default:#ff4488 group:\"colors\"\r\n// @viji-color:color2 label:\"Color 2\" default:#4488ff group:\"colors\"\r\n\r\nvoid main() {\r\n  vec2 uv = gl_FragCoord.xy / u_resolution;\r\n  float t = sin(uv.x * 6.2832 + u_time) * 0.5 + 0.5;\r\n  vec3 gradient = mix(color1, color2, t);\r\n  float d = distance(uv, vec2(0.5));\r\n  vec3 col = mix(gradient, bgColor, smoothstep(0.2, 0.5, d));\r\n  gl_FragColor = vec4(col, 1.0);\r\n}\r\n",
+          "sceneCode": "// @renderer shader\r\n// @viji-color:color1  label:\"Color 1 (hex)\"  default:#ff4488            group:\"colors\"\r\n// @viji-color:color2  label:\"Color 2 (vec3)\" default:vec3(0.27, 0.53, 1.0) group:\"colors\"\r\n// @viji-color:accent  label:\"Accent (rgb)\"   default:rgb(68, 255, 136)  group:\"colors\"\r\n// @viji-color:bgColor label:\"Background (hsb)\" default:hsb(240, 60, 12)\r\n\r\nvoid main() {\r\n  vec2 uv = gl_FragCoord.xy / u_resolution;\r\n  float t = sin(uv.x * 6.2832 + u_time) * 0.5 + 0.5;\r\n  vec3 gradient = mix(color1, color2, t);\r\n\r\n  float d = distance(uv, vec2(0.5));\r\n  vec3 col = mix(gradient, bgColor, smoothstep(0.2, 0.5, d));\r\n\r\n  float ring = smoothstep(0.02, 0.0, abs(d - 0.32));\r\n  col = mix(col, accent, ring);\r\n\r\n  gl_FragColor = vec4(col, 1.0);\r\n}\r\n",
           "sceneFile": "color-shader.scene.glsl"
         },
         {
           "type": "text",
-          "markdown": "## Rules\r\n\r\n- Hex values do not use quotes: `default:#ff6600` (not `default:\"#ff6600\"`)\r\n- String values use quotes: `label:\"My Color\"`, `description:\"Pick a color\"`\r\n- The `label` key is required for all parameter directives\r\n- The `default` key is required for color parameters\r\n\r\n## Related\r\n\r\n- [Shader Basics](/shader/basics): shader file structure and directives\r\n- [Toggle](../toggle/): boolean `uniform bool`\r\n- [Select](../select/): dropdown `uniform int`\r\n- [Native Color](/native/parameters/color): equivalent for the Native renderer\r\n- [P5 Color](/p5/parameters/color): equivalent for the P5 renderer"
+          "markdown": "## Rules\r\n\r\n- Hex values do not use quotes: `default:#ff6600` (not `default:\"#ff6600\"`)\r\n- Function-call values do not use quotes: `default:vec3(1.0, 0.4, 0.0)`\r\n- String values do use quotes: `label:\"My Color\"`, `description:\"Pick a color\"`\r\n- The `label` key is required for all parameter directives\r\n- The `default` key is required for color parameters\r\n\r\n## Related\r\n\r\n- [Shader Basics](/shader/basics): shader file structure and directives\r\n- [Toggle](../toggle/): boolean `uniform bool`\r\n- [Select](../select/): dropdown `uniform int`\r\n- [Native Color](/native/parameters/color): equivalent for the Native renderer\r\n- [P5 Color](/p5/parameters/color): equivalent for the P5 renderer"
         }
       ]
     },
@@ -7492,9 +7547,9 @@ export const docsApi = {
           "text": "Number vs Slider in Shaders"
         },
         {
-          "id": "smooth-animation-with-accumulators",
+          "id": "smooth-animation-speed",
           "level": 2,
-          "text": "Smooth Animation with Accumulators"
+          "text": "Smooth Animation Speed"
         },
         {
           "id": "rules",
@@ -7520,7 +7575,7 @@ export const docsApi = {
         },
         {
           "type": "text",
-          "markdown": "## Number vs Slider in Shaders\r\n\r\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:\r\n\r\n| | @viji-slider | @viji-number |\r\n|--|--------------|--------------|\r\n| UI | Draggable track | Text input field |\r\n| Best for | Continuous ranges, visual tuning | Precise values, integer counts |\r\n\r\n## Smooth Animation with Accumulators\r\n\r\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:\r\n\r\n```glsl\r\n// @viji-number:bpm label:\"BPM\" default:120 min:30 max:300 step:1\r\n// @viji-accumulator:beat rate:bpm\r\n// Generates: uniform float bpm; and uniform float beat;\r\n// beat grows by bpm × deltaTime each frame, no jumps\r\n```\r\n\r\nSee [Accumulator](../accumulator/) for full details and examples.\r\n\r\n## Rules\r\n\r\n- Numeric values have no quotes: `default:5`, `min:1`, `max:20`\r\n- String values use quotes: `label:\"Density\"`\r\n- The `label` and `default` keys are required\r\n\r\n## Related\r\n\r\n- [Shader Basics](/shader/basics): shader file structure and directives\r\n- [Slider](/shader/parameters/slider): numeric slider `uniform float`\r\n- [Toggle](../toggle/): boolean `uniform bool`\r\n- [Select](../select/): dropdown `uniform int`\r\n- [Accumulator](../accumulator/): frame-persistent state driven by numeric values\r\n- [Native Number](/native/parameters/number): equivalent for the Native renderer\r\n- [P5 Number](/p5/parameters/number): equivalent for the P5 renderer"
+          "markdown": "## Number vs Slider in Shaders\r\n\r\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:\r\n\r\n| | @viji-slider | @viji-number |\r\n|--|--------------|--------------|\r\n| UI | Draggable track | Text input field |\r\n| Best for | Continuous ranges, visual tuning | Precise values, integer counts |\r\n\r\n## Smooth Animation Speed\r\n\r\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:\r\n\r\n```glsl\r\n// @viji-number:bpm label:\"BPM\" default:120 min:30 max:300 step:1\r\n// @viji-accumulator:beat rate:bpm\r\n// Generates: uniform float bpm; and uniform float beat;\r\n// beat grows by bpm × deltaTime each frame, no jumps\r\n```\r\n\r\nSee [Accumulator](../accumulator/) for full details and examples.\r\n\r\n## Rules\r\n\r\n- Numeric values have no quotes: `default:5`, `min:1`, `max:20`\r\n- String values use quotes: `label:\"Density\"`\r\n- The `label` and `default` keys are required\r\n\r\n## Related\r\n\r\n- [Shader Basics](/shader/basics): shader file structure and directives\r\n- [Slider](/shader/parameters/slider): numeric slider `uniform float`\r\n- [Toggle](../toggle/): boolean `uniform bool`\r\n- [Select](../select/): dropdown `uniform int`\r\n- [Accumulator](../accumulator/): frame-persistent state driven by numeric values\r\n- [Native Number](/native/parameters/number): equivalent for the Native renderer\r\n- [P5 Number](/p5/parameters/number): equivalent for the P5 renderer"
         }
       ]
     },
@@ -7616,7 +7671,17 @@ export const docsApi = {
       "content": [
         {
           "type": "text",
-          "markdown": "# @viji-button\r\n\r\n```glsl\r\n// @viji-button:resetPhase label:\"Reset Phase\"\r\n```\r\n\r\nDeclares a momentary button parameter. Unlike [`@viji-toggle`](../toggle/) which latches on/off, a button is `true` for exactly **one frame** when the user clicks it, then automatically resets to `false`. The value is injected as a `uniform bool`.\r\n\r\n## Directive Syntax\r\n\r\n```\r\n// @viji-button:uniformName key:value key:value ...\r\n```\r\n\r\n| Key | Required | Default | Description |\r\n|-----|----------|---------|-------------|\r\n| `label` | Yes |  | Display name in the parameter UI |\r\n| `description` | No |  | Tooltip text (use quotes: `description:\"Help text\"`) |\r\n| `group` | No | `general` | Group name (use quotes: `group:\"controls\"`) |\r\n| `category` | No | `general` | Visibility category |\r\n\r\nThe `default` key is **not used** for buttons: they always start as `false`.\r\n\r\n## Uniform Type\r\n\r\nThe button is injected as a `bool`:\r\n\r\n| State | GLSL Value |\r\n|-------|------------|\r\n| Not pressed | `false` |\r\n| Frame after click | `true` (1 frame only) |\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 `resetPhase`, `spawnBurst`, `clearTrail` instead.\r\n\r\n## Usage\r\n\r\n```glsl\r\n// @renderer shader\r\n// @viji-button:resetPhase label:\"Reset Phase\"\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\nvoid main() {\r\n  vec2 uv = gl_FragCoord.xy / u_resolution;\r\n\r\n  float p = resetPhase ? 0.0 : phase;\r\n  float wave = sin(uv.x * 10.0 + p);\r\n  vec3 col = mix(vec3(0.1, 0.1, 0.3), vec3(0.3, 0.8, 1.0), wave * 0.5 + 0.5);\r\n\r\n  gl_FragColor = vec4(col, 1.0);\r\n}\r\n```\r\n\r\n> [!WARNING]\r\n> The directive must use `//` comments only. Block comments (`/* */`) are not parsed.\r\n\r\n> [!NOTE]\r\n> Because the button is `true` for only one frame, it is most useful for triggering one-shot state changes. In the example above, the reset only affects one frame: combine with a backbuffer or accumulator pattern for persistent resets.\r\n\r\n## Rules\r\n\r\n- The `label` key is required\r\n- The `default` key is not used and will be ignored with a warning\r\n- String values use quotes: `label:\"Reset Phase\"`\r\n- The uniform name in the directive must match the `uniform bool` declaration\r\n\r\n## Button vs Toggle\r\n\r\n| | `@viji-button` | `@viji-toggle` |\r\n|---|---|---|\r\n| Uniform type | `bool` | `bool` |\r\n| Value | `true` for 1 frame, then `false` | Stays `true` or `false` until changed |\r\n| `default` key | Not used | Required |\r\n| Use for | One-shot triggers, resets | Persistent on/off switches |\r\n\r\n## Related\r\n\r\n- [Shader Basics](/shader/basics): shader file structure and directives\r\n- [Toggle](../toggle/): persistent boolean `uniform bool`\r\n- [Accumulator](../accumulator/): smooth parameter-driven animation\r\n- [Slider](../slider/): numeric `uniform float`\r\n- [Native Button](/native/parameters/button): equivalent for the Native renderer\r\n- [P5 Button](/p5/parameters/button): equivalent for the P5 renderer"
+          "markdown": "# @viji-button\r\n\r\n```glsl\r\n// @viji-button:resetPhase label:\"Reset Phase\"\r\n```\r\n\r\nDeclares a momentary button parameter. Unlike [`@viji-toggle`](../toggle/) which latches on/off, a button is `true` for exactly **one frame** when the user clicks it, then automatically resets to `false`. The value is injected as a `uniform bool`.\r\n\r\n## Directive Syntax\r\n\r\n```\r\n// @viji-button:uniformName key:value key:value ...\r\n```\r\n\r\n| Key | Required | Default | Description |\r\n|-----|----------|---------|-------------|\r\n| `label` | Yes |  | Display name in the parameter UI |\r\n| `description` | No |  | Tooltip text (use quotes: `description:\"Help text\"`) |\r\n| `group` | No | `general` | Group name (use quotes: `group:\"controls\"`) |\r\n| `category` | No | `general` | Visibility category |\r\n\r\nThe `default` key is **not used** for buttons: they always start as `false`.\r\n\r\n## Uniform Type\r\n\r\nThe button is injected as a `bool`:\r\n\r\n| State | GLSL Value |\r\n|-------|------------|\r\n| Not pressed | `false` |\r\n| Frame after click | `true` (1 frame only) |\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 `resetPhase`, `spawnBurst`, `clearTrail` instead.\r\n\r\n## Usage\r\n\r\n```glsl\r\n// @renderer shader\r\n// @viji-button:resetPhase label:\"Reset Phase\"\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\nvoid main() {\r\n  vec2 uv = gl_FragCoord.xy / u_resolution;\r\n\r\n  float p = resetPhase ? 0.0 : phase;\r\n  float wave = sin(uv.x * 10.0 + p);\r\n  vec3 col = mix(vec3(0.1, 0.1, 0.3), vec3(0.3, 0.8, 1.0), wave * 0.5 + 0.5);\r\n\r\n  gl_FragColor = vec4(col, 1.0);\r\n}\r\n```\r\n\r\n> [!WARNING]\r\n> The directive must use `//` comments only. Block comments (`/* */`) are not parsed.\r\n\r\n> [!NOTE]\r\n> Because the button is `true` for only one frame, it is most useful for triggering one-shot state changes. In the example above, the reset only affects one frame: combine with a backbuffer or accumulator pattern for persistent resets."
+        },
+        {
+          "type": "live-example",
+          "title": "Reset Phase",
+          "sceneCode": "// @renderer shader\n// @viji-button:pulse label:\"Pulse\"\n// @viji-button:clear label:\"Clear\"\n// @viji-slider:fade label:\"Fade\" default:0.96 min:0.85 max:0.995 step:0.005\n// @viji-color:pulseColor label:\"Pulse Color\" default:#44ddff\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / u_resolution;\n\n  if (clear) {\n    gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);\n    return;\n  }\n\n  vec2 centered = uv - 0.5;\n  vec2 sampleUV = centered * 0.99 + 0.5;\n  vec3 prev = texture2D(backbuffer, sampleUV).rgb * fade;\n\n  vec3 add = vec3(0.0);\n  if (pulse) {\n    vec2 c = centered;\n    c.x *= u_resolution.x / u_resolution.y;\n    float d = length(c);\n    float ring = smoothstep(0.07, 0.06, d) - smoothstep(0.05, 0.04, d);\n    add = pulseColor * ring;\n  }\n\n  gl_FragColor = vec4(prev + add, 1.0);\n}\n",
+          "sceneFile": "button-shader.scene.glsl"
+        },
+        {
+          "type": "text",
+          "markdown": "## Rules\r\n\r\n- The `label` key is required\r\n- The `default` key is not used and will be ignored with a warning\r\n- String values use quotes: `label:\"Reset Phase\"`\r\n- The uniform name in the directive must match the `uniform bool` declaration\r\n\r\n## Button vs Toggle\r\n\r\n| | `@viji-button` | `@viji-toggle` |\r\n|---|---|---|\r\n| Uniform type | `bool` | `bool` |\r\n| Value | `true` for 1 frame, then `false` | Stays `true` or `false` until changed |\r\n| `default` key | Not used | Required |\r\n| Use for | One-shot triggers, resets | Persistent on/off switches |\r\n\r\n## Related\r\n\r\n- [Shader Basics](/shader/basics): shader file structure and directives\r\n- [Toggle](../toggle/): persistent boolean `uniform bool`\r\n- [Accumulator](../accumulator/): smooth parameter-driven animation\r\n- [Slider](../slider/): numeric `uniform float`\r\n- [Native Button](/native/parameters/button): equivalent for the Native renderer\r\n- [P5 Button](/p5/parameters/button): equivalent for the P5 renderer"
         }
       ]
     },
@@ -9400,7 +9465,7 @@ export const docsApi = {
       "content": [
         {
           "type": "text",
-          "markdown": "# Backbuffer & Feedback\r\n\r\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.\r\n\r\n## How to Enable\r\n\r\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:\r\n\r\n```glsl\r\nvec4 prev = texture2D(backbuffer, uv);\r\n```\r\n\r\n> [!WARNING]\r\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.\r\n\r\n## Uniform Reference\r\n\r\n| Property | Value |\r\n|----------|-------|\r\n| Name | `backbuffer` |\r\n| Type | `sampler2D` |\r\n| Prefix | None: `backbuffer`, not `u_backbuffer` |\r\n| Resolution | Matches canvas size exactly ([`u_resolution`](/shader/resolution)) |\r\n| Format | RGBA, 8 bits per channel (`gl_UNSIGNED_BYTE`) |\r\n| Filtering | Linear (bilinear interpolation between texels) |\r\n| Wrapping | Clamp-to-edge on both axes |\r\n| Initial state | `vec4(0.0)`: transparent black on the first frame |\r\n\r\nThe uniform is auto-injected when the system is active. Do not redeclare it.\r\n\r\n## Sampling\r\n\r\nSample the backbuffer with standard texture lookup. The texture coordinates match the canvas UV space:\r\n\r\n```glsl\r\nvec2 uv = gl_FragCoord.xy / u_resolution;\r\nvec4 previous = texture2D(backbuffer, uv); // GLSL ES 1.00\r\n```\r\n\r\nFor GLSL ES 3.00 shaders, use `texture()` instead:\r\n\r\n```glsl\r\nvec4 previous = texture(backbuffer, uv); // GLSL ES 3.00\r\n```\r\n\r\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.\r\n\r\n## Trail / Fade Effect\r\n\r\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."
+          "markdown": "# Backbuffer & Feedback\r\n\r\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.\r\n\r\n## How to Enable\r\n\r\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:\r\n\r\n```glsl\r\nvec4 prev = texture2D(backbuffer, uv);\r\n```\r\n\r\n> [!WARNING]\r\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.\r\n\r\n## Uniform Reference\r\n\r\n| Property | Value |\r\n|----------|-------|\r\n| Name | `backbuffer` |\r\n| Type | `sampler2D` |\r\n| Prefix | None: `backbuffer`, not `u_backbuffer` |\r\n| Resolution | Matches canvas size exactly ([`u_resolution`](/shader/resolution#u_resolution)) |\r\n| Format | RGBA, 8 bits per channel (`gl_UNSIGNED_BYTE`) |\r\n| Filtering | Linear (bilinear interpolation between texels) |\r\n| Wrapping | Clamp-to-edge on both axes |\r\n| Initial state | `vec4(0.0)`: transparent black on the first frame |\r\n\r\nThe uniform is auto-injected when the system is active. Do not redeclare it.\r\n\r\n## Sampling\r\n\r\nSample the backbuffer with standard texture lookup. The texture coordinates match the canvas UV space:\r\n\r\n```glsl\r\nvec2 uv = gl_FragCoord.xy / u_resolution;\r\nvec4 previous = texture2D(backbuffer, uv); // GLSL ES 1.00\r\n```\r\n\r\nFor GLSL ES 3.00 shaders, use `texture()` instead:\r\n\r\n```glsl\r\nvec4 previous = texture(backbuffer, uv); // GLSL ES 3.00\r\n```\r\n\r\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.\r\n\r\n## Trail / Fade Effect\r\n\r\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",
@@ -9413,7 +9478,7 @@ export const docsApi = {
         },
         {
           "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.\r\n\r\n## Frame-Rate Independence\r\n\r\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.\r\n\r\nScale the feedback factor by [`u_deltaTime`](/shader/timing) to get consistent behavior across frame rates:\r\n\r\n```glsl\r\nfloat fade = 1.0 - exp(-decay * u_deltaTime);\r\nvec3 result = mix(prev.rgb, current, fade);\r\n```\r\n\r\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.\r\n\r\n## Feedback Distortion\r\n\r\nSampling the backbuffer with offset UVs creates feedback distortion: the previous frame shifts, rotates, or warps before blending with new content:\r\n\r\n```glsl\r\nvec2 center = vec2(0.5);\r\nvec2 dir = uv - center;\r\nvec2 distortedUV = uv + dir * 0.01;     // zoom outward\r\nvec4 prev = texture2D(backbuffer, distortedUV);\r\n```\r\n\r\nCommon distortion patterns:\r\n\r\n| Pattern | UV Offset | Effect |\r\n|---------|-----------|--------|\r\n| Zoom out | `uv + (uv - 0.5) * strength` | Expands from center |\r\n| Zoom in | `uv - (uv - 0.5) * strength` | Contracts toward center |\r\n| Rotation | Apply 2D rotation matrix to `uv - 0.5` | Spiraling trails |\r\n| Drift | `uv + vec2(dx, dy)` | Directional smear |\r\n\r\n## Paint / Accumulation\r\n\r\nFor paint-style effects, the backbuffer preserves everything drawn in previous frames. New content is composited on top without fading:\r\n\r\n```glsl\r\nvec4 prev = texture2D(backbuffer, uv);\r\nvec4 stroke = drawBrush(uv, brushPos, brushColor);\r\ngl_FragColor = mix(prev, stroke, stroke.a);\r\n```\r\n\r\nThis creates a persistent canvas where each frame's output accumulates indefinitely."
+          "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.\r\n\r\n## Frame-Rate Independence\r\n\r\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.\r\n\r\nScale the feedback factor by [`u_deltaTime`](/shader/timing#u_deltatime-frame-delta) to get consistent behavior across frame rates:\r\n\r\n```glsl\r\nfloat fade = 1.0 - exp(-decay * u_deltaTime);\r\nvec3 result = mix(prev.rgb, current, fade);\r\n```\r\n\r\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.\r\n\r\n## Feedback Distortion\r\n\r\nSampling the backbuffer with offset UVs creates feedback distortion: the previous frame shifts, rotates, or warps before blending with new content:\r\n\r\n```glsl\r\nvec2 center = vec2(0.5);\r\nvec2 dir = uv - center;\r\nvec2 distortedUV = uv + dir * 0.01;     // zoom outward\r\nvec4 prev = texture2D(backbuffer, distortedUV);\r\n```\r\n\r\nCommon distortion patterns:\r\n\r\n| Pattern | UV Offset | Effect |\r\n|---------|-----------|--------|\r\n| Zoom out | `uv + (uv - 0.5) * strength` | Expands from center |\r\n| Zoom in | `uv - (uv - 0.5) * strength` | Contracts toward center |\r\n| Rotation | Apply 2D rotation matrix to `uv - 0.5` | Spiraling trails |\r\n| Drift | `uv + vec2(dx, dy)` | Directional smear |\r\n\r\n## Paint / Accumulation\r\n\r\nFor paint-style effects, the backbuffer preserves everything drawn in previous frames. New content is composited on top without fading:\r\n\r\n```glsl\r\nvec4 prev = texture2D(backbuffer, uv);\r\nvec4 stroke = drawBrush(uv, brushPos, brushColor);\r\ngl_FragColor = mix(prev, stroke, stroke.a);\r\n```\r\n\r\nThis creates a persistent canvas where each frame's output accumulates indefinitely."
         },
         {
           "type": "live-example",
@@ -9426,7 +9491,7 @@ export const docsApi = {
         },
         {
           "type": "text",
-          "markdown": "## Clearing the Backbuffer\r\n\r\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:\r\n\r\n```glsl\r\n// @viji-button:clearCanvas label:\"Clear\"\r\n\r\nvoid main() {\r\n  vec2 uv = gl_FragCoord.xy / u_resolution;\r\n  vec4 prev = texture2D(backbuffer, uv);\r\n\r\n  if (clearCanvas) {\r\n    gl_FragColor = vec4(0.0);\r\n    return;\r\n  }\r\n\r\n  // ... normal drawing logic using prev ...\r\n}\r\n```\r\n\r\nWhen `clearCanvas` is `true` (for exactly one frame), the shader outputs black everywhere, which becomes the next frame's backbuffer: effectively resetting the canvas.\r\n\r\n## Resize Behavior\r\n\r\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.\r\n\r\nThis is unavoidable because the old texture dimensions no longer match the new canvas size. Design your effect to handle occasional resets gracefully.\r\n\r\n## Backbuffer vs Accumulator\r\n\r\nBoth provide persistence across frames, but they work at fundamentally different levels:\r\n\r\n| | Backbuffer | [`@viji-accumulator`](/shader/parameters/accumulator/) |\r\n|---|---|---|\r\n| Scope | Full-frame pixel buffer | Single scalar value |\r\n| Side | GPU (texture) | CPU (uniform float) |\r\n| Data | RGBA per pixel | One float |\r\n| Use case | Visual feedback, trails, paint | Smooth animation phase, counters |\r\n| Precision | 8 bits per channel | 32-bit float |\r\n\r\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).\r\n\r\n## Limitations\r\n\r\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.\r\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.\r\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.\r\n- **Clamp-to-edge wrapping.** Sampling outside the 0-1 UV range repeats the edge pixels. Wrap-around (REPEAT) is not available.\r\n- **String-based detection.** As noted above, even a comment containing `backbuffer` activates the system. Be mindful of naming in comments.\r\n\r\n## Related\r\n\r\n- [Shader Quick Start](/shader/quickstart): backbuffer introduction and basic example\r\n- [Timing & Animation](/shader/timing): [`u_deltaTime`](/shader/timing) for frame-rate-independent feedback\r\n- [Accumulator](/shader/parameters/accumulator/): CPU-side scalar persistence\r\n- [Button](/shader/parameters/button/): momentary trigger for clearing the backbuffer\r\n- [Shadertoy Compatibility](/shader/shadertoy): differences in multi-buffer feedback\r\n- [Resolution & Coordinates](/shader/resolution): canvas size and UV normalization"
+          "markdown": "## Clearing the Backbuffer\r\n\r\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:\r\n\r\n```glsl\r\n// @viji-button:clearCanvas label:\"Clear\"\r\n\r\nvoid main() {\r\n  vec2 uv = gl_FragCoord.xy / u_resolution;\r\n  vec4 prev = texture2D(backbuffer, uv);\r\n\r\n  if (clearCanvas) {\r\n    gl_FragColor = vec4(0.0);\r\n    return;\r\n  }\r\n\r\n  // ... normal drawing logic using prev ...\r\n}\r\n```\r\n\r\nWhen `clearCanvas` is `true` (for exactly one frame), the shader outputs black everywhere, which becomes the next frame's backbuffer: effectively resetting the canvas.\r\n\r\n## Resize Behavior\r\n\r\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.\r\n\r\nThis is unavoidable because the old texture dimensions no longer match the new canvas size. Design your effect to handle occasional resets gracefully.\r\n\r\n## Backbuffer vs Accumulator\r\n\r\nBoth provide persistence across frames, but they work at fundamentally different levels:\r\n\r\n| | Backbuffer | [`@viji-accumulator`](/shader/parameters/accumulator/) |\r\n|---|---|---|\r\n| Scope | Full-frame pixel buffer | Single scalar value |\r\n| Side | GPU (texture) | CPU (uniform float) |\r\n| Data | RGBA per pixel | One float |\r\n| Use case | Visual feedback, trails, paint | Smooth animation phase, counters |\r\n| Precision | 8 bits per channel | 32-bit float |\r\n\r\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).\r\n\r\n## Limitations\r\n\r\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.\r\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.\r\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.\r\n- **Clamp-to-edge wrapping.** Sampling outside the 0-1 UV range repeats the edge pixels. Wrap-around (REPEAT) is not available.\r\n- **String-based detection.** As noted above, even a comment containing `backbuffer` activates the system. Be mindful of naming in comments.\r\n\r\n## Related\r\n\r\n- [Shader Quick Start](/shader/quickstart): backbuffer introduction and basic example\r\n- [Timing & Animation](/shader/timing): [`u_deltaTime`](/shader/timing#u_deltatime-frame-delta) for frame-rate-independent feedback\r\n- [Accumulator](/shader/parameters/accumulator/): CPU-side scalar persistence\r\n- [Button](/shader/parameters/button/): momentary trigger for clearing the backbuffer\r\n- [Shadertoy Compatibility](/shader/shadertoy): differences in multi-buffer feedback\r\n- [Resolution & Coordinates](/shader/resolution): canvas size and UV normalization"
         }
       ]
     },
@@ -9559,7 +9624,7 @@ export const docsApi = {
         },
         {
           "type": "text",
-          "markdown": "The native version is simpler: no forward declarations, no `main()` wrapper, and direct use of `u_resolution`, `phase`, and `gl_FragCoord`.\r\n\r\n## GLSL Sandbox Compatibility\r\n\r\nGLSL Sandbox shaders use different variable names. The compatibility layer is simpler:\r\n\r\n```glsl\r\n// @renderer shader\r\n\r\n#define time u_time\r\n#define mouse (u_mouse / u_resolution)\r\n#define resolution u_resolution\r\n```\r\n\r\nGLSL Sandbox shaders use `void main()` and `gl_FragColor` directly, so no function wrapper is needed: just paste the shader below the defines.\r\n\r\n## Keyboard Texture\r\n\r\nShadertoy provides keyboard input as a 256x3 texture. Viji supports this with `u_keyboard`:\r\n\r\n```glsl\r\n// Shadertoy pattern:\r\nfloat held   = texelFetch(iChannel0, ivec2(KEY, 0), 0).x;\r\nfloat pressed = texelFetch(iChannel0, ivec2(KEY, 1), 0).x;\r\nfloat toggle  = texelFetch(iChannel0, ivec2(KEY, 2), 0).x;\r\n\r\n// Viji equivalent (no iChannel: use u_keyboard directly):\r\nfloat held   = texelFetch(u_keyboard, ivec2(KEY, 0), 0).x;\r\nfloat pressed = texelFetch(u_keyboard, ivec2(KEY, 1), 0).x;\r\nfloat toggle  = texelFetch(u_keyboard, ivec2(KEY, 2), 0).x;\r\n```\r\n\r\nThe texture layout matches Shadertoy exactly:\r\n\r\n| Row | Y | Meaning |\r\n|---|---|---|\r\n| 0 | `0.5/3.0` | 1.0 if key is currently held, 0.0 otherwise |\r\n| 1 | `1.5/3.0` | 1.0 on the frame the key was pressed, 0.0 otherwise |\r\n| 2 | `2.5/3.0` | Toggles between 0.0 and 1.0 on each press |\r\n\r\nThe X coordinate is the JavaScript `keyCode` value (e.g., 65 for A, 32 for Space, 37 for Left arrow). When converting a shader that uses keyboard via `iChannel`, replace `iChannelN` with `u_keyboard`: no other changes are needed.\r\n\r\n> [!NOTE]\r\n> In addition to the texture, Viji also provides 12 boolean uniforms (`u_keyW`, `u_keyA`, `u_keySpace`, etc.) for the most common keys. See [Keyboard Uniforms](/shader/keyboard) for details.\r\n\r\n## Known Limitations\r\n\r\nNot all Shadertoy features are available in Viji. Shaders that rely on the following will require manual adaptation or cannot be converted:\r\n\r\n### Multipass Rendering (Buffer A-D)\r\n\r\nShadertoy supports up to 4 intermediate buffers (Buffer A through D) for multi-pass rendering pipelines. Viji provides a single **backbuffer** that stores the previous frame's output: sufficient for feedback effects, trails, and simple accumulation, but not for pipelines where separate passes produce distinct intermediate textures.\r\n\r\n**What works:** Shaders that read their own previous output via a single buffer (e.g., `iChannel0` set to \"Buffer A\" in Buffer A itself).\r\n\r\n**What doesn't work:** Shaders where Buffer A feeds into Buffer B, or where the Image pass reads from multiple buffers simultaneously.\r\n\r\n### CubeMap Buffer\r\n\r\nShadertoy's CubeMap buffer renders six cube faces as a `samplerCube`. Viji only supports `sampler2D` textures: there is no cube map rendering or sampling.\r\n\r\n### 3D / Volume Textures\r\n\r\nShadertoy provides 3D noise textures accessible via `sampler3D`. Viji does not expose 3D textures. Workaround: use 2D noise with layered sampling to approximate 3D noise.\r\n\r\n### `iChannelTime`\r\n\r\nShadertoy provides `iChannelTime[4]` for the current playback position of video or audio textures bound to each channel. Viji does not have an equivalent: use `u_time` for elapsed time instead.\r\n\r\n### `iChannelResolution`\r\n\r\nShadertoy provides `iChannelResolution[4]` with the dimensions of textures bound to each channel. Viji does not auto-inject these. If needed, track image dimensions manually or hardcode expected sizes.\r\n\r\n### Texture Filtering and Wrapping\r\n\r\nShadertoy allows per-channel configuration of texture filtering (nearest, linear, mipmap) and wrapping (clamp, repeat). Viji image parameter textures use fixed settings: `CLAMP_TO_EDGE` wrapping and `LINEAR` filtering. Shaders that depend on `repeat` wrapping should use `fract(uv)` to simulate the behavior.\r\n\r\n### Sound Output Buffer\r\n\r\nShadertoy's \"Sound\" tab generates audio procedurally from a shader. Viji does not support shader-based sound generation.\r\n\r\n### VR Mode\r\n\r\nShadertoy's `mainVR()` entry point for stereoscopic rendering is not supported.\r\n\r\n## Conversion Checklist\r\n\r\n1. Add `// @renderer shader` at the very top.\r\n2. Paste the compatibility defines (or convert to native Viji uniforms).\r\n3. If the shader uses `mainImage`, add the `main()` wrapper.\r\n4. Replace `iChannel0`-`iChannel3` with `@viji-image` parameters.\r\n5. If the shader uses a keyboard channel, replace `iChannelN` keyboard reads with `u_keyboard`.\r\n6. Remove any `precision` statements: Viji auto-injects them.\r\n7. If using GLSL ES 3.00, add `#version 300 es` as the first line and replace `gl_FragColor` with `out vec4`, `texture2D` with `texture`.\r\n8. Check for [known limitations](#known-limitations): multipass, cubemap, 3D textures, and sound output are not supported.\r\n9. Test and adjust: most shaders work immediately; complex ones may need minor tweaks.\r\n\r\n## Related\r\n\r\n- [Shader Quick Start](/shader/quickstart): build shaders from scratch in Viji\r\n- [Keyboard Uniforms](/shader/keyboard): keyboard texture and boolean uniforms\r\n- [Accumulator](/shader/parameters/accumulator): smooth speed control for converted shaders\r\n- [Backbuffer](/shader/backbuffer): feedback effects (replaces Shadertoy's Buffer A-D for simple cases)\r\n- [Built-in Uniforms](/shader/api-reference): complete list of Viji uniforms\r\n- [Best Practices](/getting-started/best-practices): essential patterns for all renderers"
+          "markdown": "The native version is simpler: no forward declarations, no `main()` wrapper, and direct use of `u_resolution`, `phase`, and `gl_FragCoord`.\r\n\r\n## GLSL Sandbox Compatibility\r\n\r\nGLSL Sandbox shaders use different variable names. The compatibility layer is simpler:\r\n\r\n```glsl\r\n// @renderer shader\r\n\r\n#define time u_time\r\n#define mouse (u_mouse / u_resolution)\r\n#define resolution u_resolution\r\n```\r\n\r\nGLSL Sandbox shaders use `void main()` and `gl_FragColor` directly, so no function wrapper is needed: just paste the shader below the defines.\r\n\r\n## Keyboard Texture\r\n\r\nShadertoy provides keyboard input as a 256x3 texture. Viji supports this with `u_keyboard`:\r\n\r\n```glsl\r\n// Shadertoy pattern:\r\nfloat held   = texelFetch(iChannel0, ivec2(KEY, 0), 0).x;\r\nfloat pressed = texelFetch(iChannel0, ivec2(KEY, 1), 0).x;\r\nfloat toggle  = texelFetch(iChannel0, ivec2(KEY, 2), 0).x;\r\n\r\n// Viji equivalent (no iChannel: use u_keyboard directly):\r\nfloat held   = texelFetch(u_keyboard, ivec2(KEY, 0), 0).x;\r\nfloat pressed = texelFetch(u_keyboard, ivec2(KEY, 1), 0).x;\r\nfloat toggle  = texelFetch(u_keyboard, ivec2(KEY, 2), 0).x;\r\n```\r\n\r\nThe texture layout matches Shadertoy exactly:\r\n\r\n| Row | Y | Meaning |\r\n|---|---|---|\r\n| 0 | `0.5/3.0` | 1.0 if key is currently held, 0.0 otherwise |\r\n| 1 | `1.5/3.0` | 1.0 on the frame the key was pressed, 0.0 otherwise |\r\n| 2 | `2.5/3.0` | Toggles between 0.0 and 1.0 on each press |\r\n\r\nThe X coordinate is the JavaScript `keyCode` value (e.g., 65 for A, 32 for Space, 37 for Left arrow). When converting a shader that uses keyboard via `iChannel`, replace `iChannelN` with `u_keyboard`: no other changes are needed.\r\n\r\n> [!NOTE]\r\n> In addition to the texture, Viji also provides 12 boolean uniforms (`u_keyW`, `u_keyA`, `u_keySpace`, etc.) for the most common keys. See [Keyboard Uniforms](/shader/keyboard#boolean-uniforms) for details.\r\n\r\n## Known Limitations\r\n\r\nNot all Shadertoy features are available in Viji. Shaders that rely on the following will require manual adaptation or cannot be converted:\r\n\r\n### Multipass Rendering (Buffer A-D)\r\n\r\nShadertoy supports up to 4 intermediate buffers (Buffer A through D) for multi-pass rendering pipelines. Viji provides a single **backbuffer** that stores the previous frame's output: sufficient for feedback effects, trails, and simple accumulation, but not for pipelines where separate passes produce distinct intermediate textures.\r\n\r\n**What works:** Shaders that read their own previous output via a single buffer (e.g., `iChannel0` set to \"Buffer A\" in Buffer A itself).\r\n\r\n**What doesn't work:** Shaders where Buffer A feeds into Buffer B, or where the Image pass reads from multiple buffers simultaneously.\r\n\r\n### CubeMap Buffer\r\n\r\nShadertoy's CubeMap buffer renders six cube faces as a `samplerCube`. Viji only supports `sampler2D` textures: there is no cube map rendering or sampling.\r\n\r\n### 3D / Volume Textures\r\n\r\nShadertoy provides 3D noise textures accessible via `sampler3D`. Viji does not expose 3D textures. Workaround: use 2D noise with layered sampling to approximate 3D noise.\r\n\r\n### `iChannelTime`\r\n\r\nShadertoy provides `iChannelTime[4]` for the current playback position of video or audio textures bound to each channel. Viji does not have an equivalent: use `u_time` for elapsed time instead.\r\n\r\n### `iChannelResolution`\r\n\r\nShadertoy provides `iChannelResolution[4]` with the dimensions of textures bound to each channel. Viji does not auto-inject these. If needed, track image dimensions manually or hardcode expected sizes.\r\n\r\n### Texture Filtering and Wrapping\r\n\r\nShadertoy allows per-channel configuration of texture filtering (nearest, linear, mipmap) and wrapping (clamp, repeat). Viji image parameter textures use fixed settings: `CLAMP_TO_EDGE` wrapping and `LINEAR` filtering. Shaders that depend on `repeat` wrapping should use `fract(uv)` to simulate the behavior.\r\n\r\n### Sound Output Buffer\r\n\r\nShadertoy's \"Sound\" tab generates audio procedurally from a shader. Viji does not support shader-based sound generation.\r\n\r\n### VR Mode\r\n\r\nShadertoy's `mainVR()` entry point for stereoscopic rendering is not supported.\r\n\r\n## Conversion Checklist\r\n\r\n1. Add `// @renderer shader` at the very top.\r\n2. Paste the compatibility defines (or convert to native Viji uniforms).\r\n3. If the shader uses `mainImage`, add the `main()` wrapper.\r\n4. Replace `iChannel0`-`iChannel3` with `@viji-image` parameters.\r\n5. If the shader uses a keyboard channel, replace `iChannelN` keyboard reads with `u_keyboard`.\r\n6. Remove any `precision` statements: Viji auto-injects them.\r\n7. If using GLSL ES 3.00, add `#version 300 es` as the first line and replace `gl_FragColor` with `out vec4`, `texture2D` with `texture`.\r\n8. Check for [known limitations](#known-limitations): multipass, cubemap, 3D textures, and sound output are not supported.\r\n9. Test and adjust: most shaders work immediately; complex ones may need minor tweaks.\r\n\r\n## Related\r\n\r\n- [Shader Quick Start](/shader/quickstart): build shaders from scratch in Viji\r\n- [Keyboard Uniforms](/shader/keyboard#boolean-uniforms): keyboard texture and boolean uniforms\r\n- [Accumulator](/shader/parameters/accumulator): smooth speed control for converted shaders\r\n- [Backbuffer](/shader/backbuffer): feedback effects (replaces Shadertoy's Buffer A-D for simple cases)\r\n- [Built-in Uniforms](/shader/api-reference): complete list of Viji uniforms\r\n- [Best Practices](/getting-started/best-practices): essential patterns for all renderers"
         }
       ]
     }