examples.json

{
    "application-scenes": [
        {
            "slug": "camera-and-view",
            "path": "application-scenes/camera-and-view.js",
            "language": "typescript",
            "title": "Camera and View",
            "description": "Pan and zoom the Camera by dragging and scrolling; observe world and screen coordinates update live.",
            "backend": "core",
            "tags": [
                "camera",
                "view",
                "scene"
            ],
            "capabilities": [
                "keyboard"
            ]
        },
        {
            "slug": "camera-basic",
            "path": "application-scenes/camera-basic.js",
            "language": "typescript",
            "title": "Camera Basic",
            "description": "High-level Camera facade: the camera follows the pointer, the mouse wheel zooms, the world slowly rotates, and a HUD bar is drawn in screen space through a per-render view override.",
            "backend": "core",
            "tags": [
                "camera",
                "view",
                "pointer"
            ],
            "capabilities": [
                "pointer"
            ]
        },
        {
            "slug": "hud-overlay-scene",
            "path": "application-scenes/hud-overlay-scene.js",
            "language": "typescript",
            "title": "Hud Overlay Scene",
            "description": "Build a screen-fixed HUD on scene.ui — a Label and a live ProgressBar auto-rendered above the world, with no separate scene or stack.",
            "backend": "core",
            "tags": [
                "hud",
                "overlay",
                "scene",
                "camera"
            ]
        },
        {
            "slug": "multi-view-split-screen",
            "path": "application-scenes/multi-view-split-screen.js",
            "language": "typescript",
            "title": "Multi View Split Screen",
            "description": "Render two independent camera views side-by-side on a single canvas using viewport scissors.",
            "backend": "core",
            "tags": [
                "camera",
                "view",
                "scene",
                "rendering"
            ],
            "capabilities": [
                "keyboard"
            ]
        },
        {
            "slug": "multiple-scenes",
            "path": "application-scenes/multiple-scenes.js",
            "language": "typescript",
            "title": "Multiple Scenes",
            "description": "Switch between two active Scenes using keyboard shortcuts. Demonstrates addScene, removeScene, and scene priority.",
            "backend": "core",
            "tags": [
                "scene",
                "scenes"
            ],
            "capabilities": [
                "pointer",
                "keyboard"
            ]
        },
        {
            "slug": "pause-and-resume",
            "path": "application-scenes/pause-and-resume.js",
            "language": "typescript",
            "title": "Pause and Resume",
            "description": "Pause and resume the game loop by pressing Space — freeze updates without stopping the renderer or audio.",
            "backend": "core",
            "tags": [
                "scene",
                "pause"
            ],
            "capabilities": [
                "keyboard"
            ]
        },
        {
            "slug": "picture-in-picture",
            "path": "application-scenes/picture-in-picture.js",
            "language": "typescript",
            "title": "Picture in Picture",
            "description": "Embed a secondary scene view inside the main view — classic minimap or security-camera picture-in-picture layout.",
            "backend": "core",
            "tags": [
                "camera",
                "scene",
                "rendering"
            ]
        },
        {
            "slug": "scene-lifecycle",
            "path": "application-scenes/scene-lifecycle.js",
            "language": "typescript",
            "title": "Scene Lifecycle",
            "description": "Observe the full Scene lifecycle: onLoad, onActivate, onUpdate, onDeactivate, and onUnload through a simple counter display.",
            "backend": "core",
            "featured": true,
            "level": "intro",
            "tags": [
                "scene"
            ]
        },
        {
            "slug": "world-vs-screen-coords",
            "path": "application-scenes/world-vs-screen-coords.js",
            "language": "typescript",
            "title": "World Vs Screen Coords",
            "description": "Convert pointer positions between world space and screen space as the camera pans and zooms.",
            "backend": "core",
            "tags": [
                "camera",
                "scene",
                "pointer"
            ],
            "capabilities": [
                "pointer"
            ]
        }
    ],
    "audio-basics": [
        {
            "slug": "audio-buses",
            "path": "audio-basics/audio-buses.js",
            "language": "typescript",
            "title": "Audio Buses",
            "description": "Route sounds through named buses (music, sfx, master) and control volume per bus with sliders.",
            "backend": "core",
            "tags": [
                "audio",
                "buses"
            ],
            "capabilities": [
                "pointer",
                "audio"
            ]
        },
        {
            "slug": "crossfade-tracks",
            "path": "audio-basics/crossfade-tracks.js",
            "language": "typescript",
            "title": "Crossfade Tracks",
            "description": "Crossfade between two audio tracks by fading out one bus and fading in another over a configurable duration.",
            "backend": "core",
            "tags": [
                "audio",
                "crossfade"
            ],
            "capabilities": [
                "pointer",
                "audio"
            ]
        },
        {
            "slug": "music-loop",
            "path": "audio-basics/music-loop.js",
            "language": "typescript",
            "title": "Music Loop",
            "description": "Play a seamlessly looping music track with live controls for volume, playback rate, and looping.",
            "backend": "core",
            "tags": [
                "audio",
                "music"
            ],
            "capabilities": [
                "audio"
            ]
        },
        {
            "slug": "play-sound",
            "path": "audio-basics/play-sound.js",
            "language": "typescript",
            "title": "Play Sound",
            "description": "Load a Sound asset and play it on a pointer tap — covers the required user-gesture unlock and basic volume control.",
            "backend": "core",
            "featured": true,
            "level": "intro",
            "tags": [
                "audio",
                "sound"
            ],
            "capabilities": [
                "pointer",
                "audio"
            ]
        },
        {
            "slug": "random-pitch-pool",
            "path": "audio-basics/random-pitch-pool.js",
            "language": "typescript",
            "title": "Random Pitch Pool",
            "description": "Play the same sound with randomised pitch on each keypress to add variation to repeated sound effects.",
            "backend": "core",
            "tags": [
                "audio",
                "sound",
                "pool"
            ],
            "capabilities": [
                "keyboard",
                "audio"
            ]
        },
        {
            "slug": "sound-pool",
            "path": "audio-basics/sound-pool.js",
            "language": "typescript",
            "title": "Sound Pool",
            "description": "Manage a fixed pool of audio instances so overlapping sounds play without clipping or stacking.",
            "backend": "core",
            "tags": [
                "audio",
                "sound",
                "pool"
            ],
            "capabilities": [
                "keyboard",
                "audio"
            ]
        }
    ],
    "audio-fx": [
        {
            "slug": "compressor",
            "path": "audio-fx/compressor.js",
            "language": "typescript",
            "title": "Compressor",
            "description": "Apply a dynamic compressor to even out loud and quiet audio signals. Adjust threshold, ratio, attack, and release live.",
            "backend": "core",
            "tags": [
                "audio",
                "fx",
                "compressor"
            ],
            "capabilities": [
                "pointer",
                "audio"
            ]
        },
        {
            "slug": "ducking",
            "path": "audio-fx/ducking.js",
            "language": "typescript",
            "title": "Ducking",
            "description": "Automatically lower music volume when a sound effect plays — classic game audio ducking via the DuckingFilter.",
            "backend": "core",
            "tags": [
                "audio",
                "fx",
                "ducking"
            ],
            "capabilities": [
                "pointer",
                "audio"
            ]
        },
        {
            "slug": "reverb-and-delay",
            "path": "audio-fx/reverb-and-delay.js",
            "language": "typescript",
            "title": "Reverb and Delay",
            "description": "Chain a reverb and a delay effect on an audio bus; tweak wet/dry, decay, and feedback live.",
            "backend": "core",
            "tags": [
                "audio",
                "fx",
                "reverb",
                "delay"
            ],
            "capabilities": [
                "pointer",
                "audio"
            ]
        },
        {
            "slug": "vocoder",
            "path": "audio-fx/vocoder.js",
            "language": "typescript",
            "title": "Vocoder",
            "description": "Vocode a spoken voice phrase with a synth carrier to produce the classic robot-voice effect — pick a phrase and click to speak.",
            "backend": "core",
            "tags": [
                "audio",
                "fx",
                "vocoder"
            ],
            "capabilities": [
                "pointer",
                "audio"
            ]
        }
    ],
    "beat-detection": [
        {
            "slug": "beat-sync-pulse",
            "path": "beat-detection/beat-sync-pulse.js",
            "language": "typescript",
            "title": "Beat Sync Pulse",
            "description": "Flash a circle in sync with detected beats. BeatDetector fires a callback each time onset energy crosses the threshold.",
            "backend": "core",
            "tags": [
                "audio",
                "beat",
                "reactive"
            ],
            "capabilities": [
                "audio"
            ]
        },
        {
            "slug": "frequency-bands",
            "path": "beat-detection/frequency-bands.js",
            "language": "typescript",
            "title": "Frequency Bands",
            "description": "Drive animated bars from AudioAnalyser frequency data after a user gesture — sub-bass to brilliance, eight bands.",
            "backend": "core",
            "tags": [
                "audio",
                "reactive",
                "visualiser"
            ],
            "capabilities": [
                "audio"
            ]
        },
        {
            "slug": "tempo-tracking",
            "path": "beat-detection/tempo-tracking.js",
            "language": "typescript",
            "title": "Tempo Tracking",
            "description": "Estimate live BPM from an audio stream and display the running tempo estimate alongside raw onset energy.",
            "backend": "core",
            "tags": [
                "audio",
                "beat",
                "reactive"
            ],
            "capabilities": [
                "audio"
            ]
        }
    ],
    "custom-renderers": [
        {
            "slug": "custom-render-pass",
            "path": "custom-renderers/custom-render-pass.js",
            "language": "typescript",
            "title": "Custom Render Pass",
            "description": "Compose a RenderPipeline that slots a CallbackRenderPass with procedural geometry between two scene nodes.",
            "backend": "advanced",
            "tags": [
                "rendering",
                "advanced",
                "custom"
            ]
        },
        {
            "slug": "custom-triangle-renderer",
            "path": "custom-renderers/custom-triangle-renderer.js",
            "language": "typescript",
            "title": "Custom Triangle Renderer",
            "description": "Write raw WGSL and wire a custom WebGPU pipeline alongside the built-in renderer — a minimal custom-renderer skeleton.",
            "backend": "advanced",
            "tags": [
                "rendering",
                "advanced",
                "custom",
                "webgpu"
            ],
            "capabilities": [
                "webgpu"
            ]
        }
    ],
    "debug-layer": [
        {
            "slug": "asset-browser",
            "path": "debug-layer/asset-browser.js",
            "language": "typescript",
            "title": "Asset Browser",
            "description": "Interactive browser for the injected globalThis.assets catalog — inspect textures, sprites, audio, SVG, fonts, video, and input-prompt sheets with per-type previews.",
            "backend": "core",
            "tags": [
                "asset",
                "browser",
                "debug"
            ],
            "capabilities": [
                "pointer",
                "audio"
            ]
        },
        {
            "slug": "bounding-boxes",
            "path": "debug-layer/bounding-boxes.js",
            "language": "typescript",
            "title": "Bounding Boxes",
            "description": "Overlay axis-aligned bounding boxes on every rendered node to debug layout, culling, and hit-test regions.",
            "backend": "core",
            "tags": [
                "debug",
                "rendering"
            ]
        },
        {
            "slug": "performance-overlay",
            "path": "debug-layer/performance-overlay.js",
            "language": "typescript",
            "title": "Performance Overlay",
            "description": "Enable the built-in debug overlay to monitor FPS, draw calls, sprite count, and GPU memory inside your scene.",
            "backend": "core",
            "featured": true,
            "level": "intro",
            "tags": [
                "debug",
                "performance"
            ],
            "capabilities": [
                "keyboard"
            ]
        },
        {
            "slug": "pointer-and-hittest",
            "path": "debug-layer/pointer-and-hittest.js",
            "language": "typescript",
            "title": "Pointer and Hittest",
            "description": "Visualise pointer hit-test regions and see which node receives each event — useful for debugging interactive areas.",
            "backend": "core",
            "tags": [
                "debug",
                "pointer",
                "input"
            ]
        },
        {
            "slug": "signal-bus-inspector",
            "path": "debug-layer/signal-bus-inspector.js",
            "language": "typescript",
            "title": "Signal Bus Inspector",
            "description": "List all active Signals on the SignalBus, inspect current values, and monitor subscriber counts in the debug layer.",
            "backend": "core",
            "tags": [
                "debug"
            ]
        }
    ],
    "filters": [
        {
            "slug": "blur-filter",
            "path": "filters/blur-filter.js",
            "language": "typescript",
            "title": "Blur Filter",
            "description": "Apply a configurable Gaussian blur filter to a Sprite; drag a slider to adjust the radius live.",
            "backend": "core",
            "tags": [
                "fx",
                "blur",
                "filter"
            ]
        },
        {
            "slug": "chromatic-aberration",
            "path": "filters/chromatic-aberration.js",
            "language": "typescript",
            "title": "Chromatic Aberration",
            "description": "Offset RGB channels by different amounts to simulate lens chromatic aberration — drag the pointer to control intensity.",
            "backend": "core",
            "tags": [
                "fx",
                "filter",
                "shader"
            ]
        },
        {
            "slug": "color-filter",
            "path": "filters/color-filter.js",
            "language": "typescript",
            "title": "Color Filter",
            "description": "Tint, desaturate, invert, and adjust the brightness of a sprite; cycle through the presets from the control panel.",
            "backend": "core",
            "tags": [
                "fx",
                "color",
                "filter"
            ]
        },
        {
            "slug": "crt-scanlines",
            "path": "filters/crt-scanlines.js",
            "language": "typescript",
            "title": "Crt Scanlines",
            "description": "Overlay a CRT scanline pattern via a custom fragment shader filter — classic retro screen post-processing.",
            "backend": "core",
            "tags": [
                "fx",
                "filter",
                "shader"
            ]
        },
        {
            "slug": "custom-fragment-shader",
            "path": "filters/custom-fragment-shader.js",
            "language": "typescript",
            "title": "Custom Fragment Shader",
            "description": "Write a GLSL/WGSL fragment shader and wire it as a Filter on a sprite — shows the minimal filter authoring API.",
            "backend": "core",
            "tags": [
                "fx",
                "filter",
                "shader",
                "advanced"
            ]
        },
        {
            "slug": "filter-stack",
            "path": "filters/filter-stack.js",
            "language": "typescript",
            "title": "Filter Stack",
            "description": "Chain multiple filters on a single sprite and toggle each layer independently to see how they compose.",
            "backend": "core",
            "tags": [
                "fx",
                "filter"
            ]
        },
        {
            "slug": "metaballs",
            "path": "filters/metaballs.js",
            "language": "typescript",
            "title": "Metaballs",
            "description": "Render organic metaball blobs using a threshold-based signed-distance shader filter applied to moving circles.",
            "backend": "core",
            "tags": [
                "fx",
                "filter",
                "shader"
            ]
        },
        {
            "slug": "noise-vignette",
            "path": "filters/noise-vignette.js",
            "language": "typescript",
            "title": "Noise Vignette",
            "description": "Combine animated film grain and a radial vignette in a single pass filter — common cinematic post-processing.",
            "backend": "core",
            "tags": [
                "fx",
                "filter",
                "shader"
            ]
        },
        {
            "slug": "palette-cycling",
            "path": "filters/palette-cycling.js",
            "language": "typescript",
            "title": "Palette Cycling",
            "description": "Animate a 1D LUT each frame to recolour a sprite — classic indexed-colour palette-cycling effect (DOS-demo style).",
            "backend": "core",
            "tags": [
                "lut",
                "palette",
                "color"
            ]
        }
    ],
    "geometry-graphics": [
        {
            "slug": "graphics-primitives",
            "path": "geometry-graphics/graphics-primitives.js",
            "language": "typescript",
            "title": "Graphics Primitives",
            "description": "Draw filled and stroked rectangles, circles, polygons, and Bézier curves with the Graphics API.",
            "backend": "core",
            "featured": true,
            "level": "intro",
            "tags": [
                "graphics",
                "rendering"
            ],
            "capabilities": [
                "webgpu"
            ]
        },
        {
            "slug": "graphics-gradient",
            "path": "geometry-graphics/graphics-gradient.js",
            "language": "typescript",
            "title": "Graphics Gradient",
            "description": "Paint Graphics shapes with gradients through the fillStyle / strokeStyle API: a linear-gradient rectangle, a radial-gradient circle, a radial-gradient stroked ring, and a spinning linear-gradient star.",
            "backend": "core",
            "tags": [
                "graphics",
                "gradient",
                "fillStyle",
                "strokeStyle"
            ]
        },
        {
            "slug": "gradient",
            "path": "geometry-graphics/gradient.js",
            "language": "typescript",
            "title": "Gradient",
            "description": "Use a Gradient Drawable to fill a rectangle with a smooth linear or radial colour gradient.",
            "backend": "core",
            "tags": [
                "graphics",
                "gradient",
                "rendering"
            ]
        },
        {
            "slug": "infinite-grid",
            "path": "geometry-graphics/infinite-grid.js",
            "language": "typescript",
            "title": "Infinite Grid",
            "description": "Render an infinite scrolling grid in screen space as a debug aid for level editors and world-space tools.",
            "backend": "core",
            "tags": [
                "graphics",
                "rendering",
                "debug"
            ],
            "capabilities": [
                "keyboard"
            ]
        },
        {
            "slug": "mesh-deformed-grid",
            "path": "geometry-graphics/mesh-deformed-grid.js",
            "language": "typescript",
            "title": "Mesh Deformed Grid",
            "description": "Animate vertex positions on a Mesh grid to produce wave and ripple deformation effects.",
            "backend": "core",
            "tags": [
                "mesh",
                "graphics",
                "rendering"
            ]
        },
        {
            "slug": "mesh-textured-quad",
            "path": "geometry-graphics/mesh-textured-quad.js",
            "language": "typescript",
            "title": "Mesh Textured Quad",
            "description": "Map a texture onto a custom Mesh quad and control UV coordinates per vertex.",
            "backend": "core",
            "tags": [
                "mesh",
                "graphics",
                "rendering"
            ]
        },
        {
            "slug": "mesh-triangle",
            "path": "geometry-graphics/mesh-triangle.js",
            "language": "typescript",
            "title": "Mesh Triangle",
            "description": "Render a single vertex-coloured triangle with a custom Mesh — the minimal GPU geometry example.",
            "backend": "core",
            "tags": [
                "mesh",
                "graphics",
                "rendering"
            ]
        }
    ],
    "getting-started": [
        {
            "slug": "game-loop",
            "path": "getting-started/game-loop.js",
            "language": "typescript",
            "title": "Game Loop",
            "description": "Run a single Scene with a fixed-step update loop, draw a spinning rectangle, and observe how tick and deltaTime drive motion.",
            "backend": "core",
            "featured": true,
            "level": "intro",
            "tags": [
                "game",
                "loop",
                "scene"
            ]
        },
        {
            "slug": "hello-world",
            "path": "getting-started/hello-world.js",
            "language": "typescript",
            "title": "Hello World",
            "description": "Create an Application, attach a Scene, draw a Graphics shape, and see the first render cycle — the minimal ExoJS starting point.",
            "backend": "core",
            "featured": true,
            "level": "intro",
            "tags": [
                "scene",
                "graphics",
                "rendering"
            ]
        },
        {
            "slug": "resize-and-dpr",
            "path": "getting-started/resize-and-dpr.js",
            "language": "typescript",
            "title": "Resize and DPR",
            "description": "Handle window resizes and device pixel ratio changes so the canvas stays sharp on high-DPI screens without stretching.",
            "backend": "core",
            "level": "intro",
            "tags": [
                "resize",
                "dpr",
                "responsive"
            ]
        }
    ],
    "input": [
        {
            "slug": "action-mapping",
            "path": "input/action-mapping.js",
            "language": "typescript",
            "title": "Action Mapping",
            "description": "Map multiple physical inputs (keyboard keys + gamepad buttons) to named actions and read them identically in the update loop.",
            "backend": "core",
            "tags": [
                "input",
                "keyboard",
                "gamepad"
            ],
            "capabilities": [
                "keyboard",
                "gamepad"
            ]
        },
        {
            "slug": "gamepad",
            "path": "input/gamepad.js",
            "language": "typescript",
            "title": "Gamepad",
            "description": "Read axes and buttons from a connected gamepad — plug in a controller and drive a circle around the canvas.",
            "backend": "core",
            "featured": true,
            "level": "intro",
            "tags": [
                "input",
                "gamepad"
            ],
            "capabilities": [
                "gamepad"
            ]
        },
        {
            "slug": "key-rebinding",
            "path": "input/key-rebinding.js",
            "language": "typescript",
            "title": "Key Rebinding",
            "description": "Let players reassign key bindings at runtime and persist the new mapping through a serialisable InputProfile.",
            "backend": "core",
            "tags": [
                "input",
                "keyboard"
            ],
            "capabilities": [
                "keyboard"
            ]
        },
        {
            "slug": "keyboard",
            "path": "input/keyboard.js",
            "language": "typescript",
            "title": "Keyboard",
            "description": "Read key state per-frame and on-event with the Keyboard API. Move a square using the arrow keys.",
            "backend": "core",
            "featured": true,
            "level": "intro",
            "tags": [
                "input",
                "keyboard"
            ],
            "capabilities": [
                "keyboard"
            ]
        },
        {
            "slug": "mouse-and-pointer",
            "path": "input/mouse-and-pointer.js",
            "language": "typescript",
            "title": "Mouse and Pointer",
            "description": "Track pointer position, button state, and movement delta; fire discrete click and drag events.",
            "backend": "core",
            "tags": [
                "input",
                "pointer",
                "mouse"
            ],
            "capabilities": [
                "pointer"
            ]
        },
        {
            "slug": "multi-gamepad",
            "path": "input/multi-gamepad.js",
            "language": "typescript",
            "title": "Multi Gamepad",
            "description": "Handle multiple connected gamepads simultaneously — each controller drives its own coloured square.",
            "backend": "core",
            "tags": [
                "input",
                "gamepad"
            ],
            "capabilities": [
                "gamepad"
            ]
        },
        {
            "slug": "multitouch",
            "path": "input/multitouch.js",
            "language": "typescript",
            "title": "Multitouch",
            "description": "Track up to ten simultaneous touch points and render each finger as a labelled circle.",
            "backend": "core",
            "tags": [
                "input",
                "touch",
                "pointer"
            ],
            "capabilities": [
                "pointer",
                "touch"
            ]
        },
        {
            "slug": "pointer-to-world",
            "path": "input/pointer-to-world.js",
            "language": "typescript",
            "title": "Pointer to World",
            "description": "Convert screen-space pointer coordinates to world-space positions as the camera pans and zooms.",
            "backend": "core",
            "tags": [
                "input",
                "pointer",
                "camera"
            ],
            "capabilities": [
                "pointer"
            ]
        }
    ],
    "particles": [
        {
            "slug": "bonfire",
            "path": "particles/bonfire.js",
            "language": "typescript",
            "title": "Bonfire",
            "description": "Simulate a campfire with an emitter that varies particle colour, lifetime, and velocity over the flame shape.",
            "backend": "core",
            "tags": [
                "particles"
            ]
        },
        {
            "slug": "cursor-attractor-particles",
            "path": "particles/cursor-attractor-particles.js",
            "language": "typescript",
            "title": "Cursor Attractor Particles",
            "description": "Attract and repel particles toward the pointer position using a custom force field on the particle emitter.",
            "backend": "core",
            "tags": [
                "particles",
                "pointer"
            ],
            "capabilities": [
                "pointer"
            ]
        },
        {
            "slug": "custom-wgsl-module",
            "path": "particles/custom-wgsl-module.js",
            "language": "typescript",
            "title": "Custom Wgsl Module",
            "description": "Supply a custom WGSL compute module to the GPU particle system to implement non-standard particle behaviour.",
            "backend": "core",
            "tags": [
                "particles",
                "advanced",
                "webgpu"
            ]
        },
        {
            "slug": "emitter-basics",
            "path": "particles/emitter-basics.js",
            "language": "typescript",
            "title": "Emitter Basics",
            "description": "Configure a particle emitter — set rate, lifetime, start/end size, colour gradient, and velocity spread.",
            "backend": "core",
            "tags": [
                "particles"
            ]
        },
        {
            "slug": "fireworks",
            "path": "particles/fireworks.js",
            "language": "typescript",
            "title": "Fireworks",
            "description": "Click to launch a firework rocket that bursts into a radial particle shower at its apex.",
            "backend": "core",
            "tags": [
                "particles",
                "pointer"
            ],
            "capabilities": [
                "pointer"
            ]
        },
        {
            "slug": "gpu-particles",
            "path": "particles/gpu-particles.js",
            "language": "typescript",
            "title": "Gpu Particles",
            "description": "Run hundreds of thousands of particles on the GPU via WebGPU compute shaders, with a smaller CPU-simulated budget on WebGL2 — the live count shows the active backend.",
            "backend": "core",
            "tags": [
                "particles",
                "webgpu",
                "performance"
            ]
        }
    ],
    "performance": [
        {
            "slug": "backend-comparison",
            "path": "performance/backend-comparison.js",
            "language": "typescript",
            "title": "Backend Comparison",
            "description": "Switch between WebGPU and WebGL2 backends at runtime and compare frame times for the same scene.",
            "backend": "core",
            "tags": [
                "performance",
                "webgpu",
                "rendering"
            ],
            "capabilities": [
                "keyboard"
            ]
        },
        {
            "slug": "multi-texture-stress",
            "path": "performance/multi-texture-stress.js",
            "language": "typescript",
            "title": "Multi Texture Stress",
            "description": "Render sprites from many different textures simultaneously to stress-test texture-atlas batching.",
            "backend": "core",
            "tags": [
                "performance",
                "rendering"
            ],
            "capabilities": [
                "webgpu"
            ]
        },
        {
            "slug": "particle-stress",
            "path": "performance/particle-stress.js",
            "language": "typescript",
            "title": "Particle Stress",
            "description": "Push the GPU particle system to its limits — ramp up particle count until frame time degrades.",
            "backend": "core",
            "tags": [
                "performance",
                "particles",
                "webgpu"
            ],
            "capabilities": [
                "webgpu"
            ]
        },
        {
            "slug": "sprite-stress",
            "path": "performance/sprite-stress.js",
            "language": "typescript",
            "title": "Sprite Stress",
            "description": "Render thousands of sprites to measure raw throughput; compare WebGPU and WebGL2 backends at high counts.",
            "backend": "core",
            "featured": true,
            "level": "intermediate",
            "tags": [
                "performance",
                "rendering",
                "webgpu"
            ],
            "capabilities": [
                "webgpu"
            ]
        }
    ],
    "render-targets": [
        {
            "slug": "bloom-lite",
            "path": "render-targets/bloom-lite.js",
            "language": "typescript",
            "title": "Bloom Lite",
            "description": "Multi-pass bloom: render the scene into a RenderTarget, blur it, and composite back with additive blending.",
            "backend": "core",
            "tags": [
                "fx",
                "rendering",
                "advanced"
            ]
        },
        {
            "slug": "mini-map",
            "path": "render-targets/mini-map.js",
            "language": "typescript",
            "title": "Mini Map",
            "description": "Render a second camera view into a RenderTarget and display it as a minimap overlay in the HUD.",
            "backend": "core",
            "tags": [
                "rendering",
                "camera",
                "advanced"
            ]
        },
        {
            "slug": "post-processing-chain",
            "path": "render-targets/post-processing-chain.js",
            "language": "typescript",
            "title": "Post Processing Chain",
            "description": "Chain multiple RenderTarget passes to build a full-scene post-processing pipeline (blur → vignette → colour grade).",
            "backend": "core",
            "tags": [
                "fx",
                "rendering",
                "advanced"
            ]
        },
        {
            "slug": "render-pipeline",
            "path": "render-targets/render-pipeline.js",
            "language": "typescript",
            "title": "Render Pipeline",
            "description": "Compose a frame from named RenderPass steps: render the world off-screen, blur it, composite to the screen, and nest a UI pipeline — with a runtime-toggleable blur step and resize wiring.",
            "backend": "core",
            "tags": [
                "rendering",
                "advanced",
                "fx"
            ]
        },
        {
            "slug": "render-to-texture",
            "path": "render-targets/render-to-texture.js",
            "language": "typescript",
            "title": "Render to Texture",
            "description": "Draw a scene into a RenderTarget and sample the result as a texture on another sprite in the same frame.",
            "backend": "core",
            "tags": [
                "rendering",
                "advanced"
            ]
        },
        {
            "slug": "trail-feedback",
            "path": "render-targets/trail-feedback.js",
            "language": "typescript",
            "title": "Trail Feedback",
            "description": "Create motion trails by feeding the previous frame back into the current frame with slight fade and blur.",
            "backend": "core",
            "tags": [
                "fx",
                "rendering",
                "advanced"
            ]
        },
        {
            "slug": "water-mirror",
            "path": "render-targets/water-mirror.js",
            "language": "typescript",
            "title": "Water Mirror",
            "description": "Reflect the scene in a distorted water surface using a flipped RenderTarget and a ripple displacement shader.",
            "backend": "core",
            "tags": [
                "fx",
                "rendering",
                "advanced"
            ]
        }
    ],
    "scene-graph": [
        {
            "slug": "containers",
            "path": "scene-graph/containers.js",
            "language": "typescript",
            "title": "Containers",
            "description": "Group sprites into a Container node and transform the group as a unit — translation, scale, and alpha propagate to children.",
            "backend": "core",
            "tags": [
                "scene-graph",
                "rendering"
            ]
        },
        {
            "slug": "local-vs-global-transform",
            "path": "scene-graph/local-vs-global-transform.js",
            "language": "typescript",
            "title": "Local Vs Global Transform",
            "description": "Compare local and world transforms on nested nodes and see how parent transforms compose with children.",
            "backend": "core",
            "tags": [
                "scene-graph",
                "rendering"
            ]
        },
        {
            "slug": "masks",
            "path": "scene-graph/masks.js",
            "language": "typescript",
            "title": "Masks",
            "description": "Apply a stencil mask to a Container so children only render inside the mask's geometry.",
            "backend": "core",
            "tags": [
                "scene-graph",
                "fx",
                "rendering"
            ]
        },
        {
            "slug": "nested-transforms",
            "path": "scene-graph/nested-transforms.js",
            "language": "typescript",
            "title": "Nested Transforms",
            "description": "Build a solar-system hierarchy of orbiting nodes to practice parent-child transform composition.",
            "backend": "core",
            "tags": [
                "scene-graph",
                "animation"
            ]
        },
        {
            "slug": "parallax-starfield",
            "path": "scene-graph/parallax-starfield.js",
            "language": "typescript",
            "title": "Parallax Starfield",
            "description": "Layer three Container rows at different scroll speeds to create a parallax depth effect driven by pointer movement.",
            "backend": "core",
            "tags": [
                "scene-graph",
                "rendering"
            ],
            "capabilities": [
                "pointer"
            ]
        },
        {
            "slug": "pivot-and-anchor",
            "path": "scene-graph/pivot-and-anchor.js",
            "language": "typescript",
            "title": "Pivot and Anchor",
            "description": "Set pivot and anchor on a Sprite to control the point around which it rotates and how it aligns to its position.",
            "backend": "core",
            "tags": [
                "scene-graph",
                "sprite"
            ]
        },
        {
            "slug": "z-ordering",
            "path": "scene-graph/z-ordering.js",
            "language": "typescript",
            "title": "Z Ordering",
            "description": "Change zIndex on sprites at runtime and observe draw order update instantly without re-sorting the scene graph.",
            "backend": "core",
            "tags": [
                "scene-graph",
                "rendering"
            ],
            "capabilities": [
                "keyboard"
            ]
        }
    ],
    "showcase": [
        {
            "slug": "audio-reactive-particles",
            "path": "showcase/audio-reactive-particles.js",
            "language": "typescript",
            "title": "Audio Reactive Particles",
            "description": "Emit particles driven by real-time AudioAnalyser frequency data — bass controls density, treble controls spread.",
            "backend": "core",
            "featured": true,
            "level": "intermediate",
            "tags": [
                "audio",
                "reactive",
                "particles"
            ],
            "capabilities": [
                "audio"
            ]
        },
        {
            "slug": "audio-visualisation",
            "path": "showcase/audio-visualisation.js",
            "language": "typescript",
            "title": "Audio Visualisation",
            "description": "Full-screen audio visualiser: frequency bars, waveform, and a beat-pulse ring driven by AudioAnalyser data.",
            "backend": "core",
            "tags": [
                "audio",
                "reactive",
                "visualiser"
            ],
            "capabilities": [
                "pointer",
                "audio"
            ]
        },
        {
            "slug": "boss-intro-cinematic",
            "path": "showcase/boss-intro-cinematic.js",
            "language": "typescript",
            "title": "Boss Intro Cinematic",
            "description": "Tween-driven cinematic sequence with a dramatic boss reveal, screen shake, and synced audio sting.",
            "backend": "core",
            "tags": [
                "animation",
                "audio",
                "scene"
            ],
            "capabilities": [
                "pointer",
                "keyboard",
                "audio"
            ]
        },
        {
            "slug": "color-grading",
            "path": "showcase/color-grading.js",
            "language": "typescript",
            "title": "Color Grading",
            "description": "Switch between procedurally-built 3D LUTs (Sepia, Cool Cinematic, Warm Sunset, Bleach Bypass, Protanopia simulation) plus an Identity bypass, on a single sprite.",
            "backend": "core",
            "tags": [
                "lut",
                "color",
                "grading"
            ],
            "capabilities": [
                "keyboard"
            ]
        },
        {
            "slug": "damage-flash",
            "path": "showcase/damage-flash.js",
            "language": "typescript",
            "title": "Damage Flash",
            "description": "Click a sprite to trigger a red flash tween — a common game-feel pattern for hit feedback.",
            "backend": "core",
            "tags": [
                "animation",
                "fx"
            ],
            "capabilities": [
                "pointer"
            ]
        },
        {
            "slug": "dialog-system",
            "path": "showcase/dialog-system.js",
            "language": "typescript",
            "title": "Dialog System",
            "description": "Click through a typewriter-animated dialog box with portrait, name plate, and choice buttons — game UI recipe.",
            "backend": "core",
            "tags": [
                "scene",
                "text",
                "audio"
            ],
            "capabilities": [
                "pointer",
                "audio"
            ]
        },
        {
            "slug": "gamepad-spaceship",
            "path": "showcase/gamepad-spaceship.js",
            "language": "typescript",
            "title": "Gamepad Spaceship",
            "description": "Fly a spaceship with a gamepad: left stick steers, right trigger fires, and rumble kicks on impact.",
            "backend": "core",
            "featured": true,
            "level": "intermediate",
            "tags": [
                "gamepad",
                "input",
                "audio",
                "scene"
            ],
            "capabilities": [
                "gamepad",
                "audio"
            ]
        },
        {
            "slug": "loading-progress-with-shader",
            "path": "showcase/loading-progress-with-shader.js",
            "language": "typescript",
            "title": "Loading Progress with Shader",
            "description": "Show an animated progress ring during asset loading using a custom GLSL fill-sweep shader.",
            "backend": "core",
            "tags": [
                "fx",
                "shader",
                "scene"
            ]
        },
        {
            "slug": "low-band-camera-shake",
            "path": "showcase/low-band-camera-shake.js",
            "language": "typescript",
            "title": "Low Band Camera Shake",
            "description": "Shake the camera in sync with low-frequency beats using AudioAnalyser band energy as a shake amplitude.",
            "backend": "core",
            "tags": [
                "audio",
                "reactive",
                "camera"
            ],
            "capabilities": [
                "audio"
            ]
        },
        {
            "slug": "minimap-with-mask",
            "path": "showcase/minimap-with-mask.js",
            "language": "typescript",
            "title": "Minimap with Mask",
            "description": "Render a secondary camera view inside a circular stencil mask to create a round minimap overlay.",
            "backend": "core",
            "tags": [
                "rendering",
                "camera",
                "fx"
            ]
        },
        {
            "slug": "mouse-parallax",
            "path": "showcase/mouse-parallax.js",
            "language": "typescript",
            "title": "Mouse Parallax",
            "description": "Move layered background planes at different speeds relative to pointer position for a depth parallax effect.",
            "backend": "core",
            "tags": [
                "scene-graph",
                "rendering",
                "pointer"
            ],
            "capabilities": [
                "pointer"
            ]
        },
        {
            "slug": "pause-blur",
            "path": "showcase/pause-blur.js",
            "language": "typescript",
            "title": "Pause Blur",
            "description": "Pause the game, fade up a blur filter over the scene, and show a pause menu — common game polish pattern.",
            "backend": "core",
            "tags": [
                "fx",
                "scene"
            ],
            "capabilities": [
                "keyboard"
            ]
        },
        {
            "slug": "rectangles-collision",
            "path": "showcase/rectangles-collision.js",
            "language": "typescript",
            "title": "Rectangles Collision",
            "description": "Drag rectangles around the canvas and detect AABB overlap in the update loop — foundational collision recipe.",
            "backend": "core",
            "tags": [
                "scene",
                "rendering"
            ]
        },
        {
            "slug": "screen-shake-on-explosion",
            "path": "showcase/screen-shake-on-explosion.js",
            "language": "typescript",
            "title": "Screen Shake on Explosion",
            "description": "Click to detonate — trigger an explosion particle burst followed by a camera shake tween.",
            "backend": "core",
            "tags": [
                "camera",
                "fx",
                "particles"
            ],
            "capabilities": [
                "pointer"
            ]
        },
        {
            "slug": "typewriter-text",
            "path": "showcase/typewriter-text.js",
            "language": "typescript",
            "title": "Typewriter Text",
            "description": "Reveal text character-by-character with a configurable delay and a key-click sound effect per character.",
            "backend": "core",
            "tags": [
                "text",
                "animation",
                "audio"
            ],
            "capabilities": [
                "audio"
            ]
        },
        {
            "slug": "vinyl-record",
            "path": "showcase/vinyl-record.js",
            "language": "typescript",
            "title": "Vinyl Record",
            "description": "Spin an animated vinyl record that speeds up or slows down as music plays — an audio-driven visual recipe.",
            "backend": "core",
            "tags": [
                "audio",
                "animation"
            ],
            "capabilities": [
                "audio"
            ]
        },
        {
            "slug": "orb-dodge",
            "path": "showcase/orb-dodge.js",
            "language": "typescript",
            "title": "Orb Dodge",
            "description": "A complete dodge-and-collect loop: move with WASD or arrow keys, collect green orbs for points, avoid red orbs, and restart from the game-over screen.",
            "backend": "core",
            "featured": true,
            "level": "intermediate",
            "tags": [
                "game",
                "input",
                "collision",
                "hud"
            ],
            "capabilities": [
                "keyboard"
            ]
        }
    ],
    "spatial-audio": [
        {
            "slug": "listener-and-source",
            "path": "spatial-audio/listener-and-source.js",
            "language": "typescript",
            "title": "Listener and Source",
            "description": "Drag a sound source around a fixed listener and watch distance-based spatial attenuation update live.",
            "backend": "core",
            "tags": [
                "listener",
                "source",
                "spatial"
            ],
            "capabilities": [
                "pointer",
                "audio"
            ]
        },
        {
            "slug": "moving-source",
            "path": "spatial-audio/moving-source.js",
            "language": "typescript",
            "title": "Moving Source",
            "description": "An automatically circling spatial source orbits a fixed listener to demonstrate continuous panning and attenuation.",
            "backend": "core",
            "tags": [
                "moving",
                "source",
                "spatial"
            ],
            "capabilities": [
                "audio"
            ]
        },
        {
            "slug": "falloff-curves",
            "path": "spatial-audio/falloff-curves.js",
            "language": "typescript",
            "title": "Falloff Curves",
            "description": "Compare linear, inverse, and exponential distance attenuation models on three sources around a draggable listener.",
            "backend": "core",
            "tags": [
                "falloff",
                "distance",
                "model",
                "spatial"
            ],
            "capabilities": [
                "pointer",
                "audio"
            ]
        }
    ],
    "sprites-textures": [
        {
            "slug": "blendmodes",
            "path": "sprites-textures/blendmodes.js",
            "language": "typescript",
            "title": "Blendmodes",
            "description": "Click through all built-in blend modes applied to an overlapping sprite pair to see how they composite.",
            "backend": "core",
            "tags": [
                "sprite",
                "rendering",
                "fx"
            ],
            "capabilities": [
                "pointer"
            ]
        },
        {
            "slug": "sprite-basics",
            "path": "sprites-textures/sprite-basics.js",
            "language": "typescript",
            "title": "Sprite Basics",
            "description": "Load a texture, create a Sprite, and control position, rotation, scale, and alpha inside a Scene.",
            "backend": "core",
            "featured": true,
            "level": "intro",
            "tags": [
                "sprite",
                "rendering"
            ]
        },
        {
            "slug": "spritesheet-frames",
            "path": "sprites-textures/spritesheet-frames.js",
            "language": "typescript",
            "title": "Spritesheet Frames",
            "description": "Slice a spritesheet into named frames and step through them to play a simple frame animation.",
            "backend": "core",
            "tags": [
                "sprite",
                "animation"
            ]
        },
        {
            "slug": "svg-drawable",
            "path": "sprites-textures/svg-drawable.js",
            "language": "typescript",
            "title": "Svg Drawable",
            "description": "Rasterise an SVG string into a GPU texture and use it as a Sprite — combine vector art with the sprite pipeline.",
            "backend": "core",
            "tags": [
                "sprite",
                "rendering"
            ]
        },
        {
            "slug": "texture-loader",
            "path": "sprites-textures/texture-loader.js",
            "language": "typescript",
            "title": "Texture Loader",
            "description": "Load image assets at startup, reference them by key, and assign the resulting Texture to a Sprite.",
            "backend": "core",
            "tags": [
                "sprite",
                "rendering"
            ]
        },
        {
            "slug": "video-drawable",
            "path": "sprites-textures/video-drawable.js",
            "language": "typescript",
            "title": "Video Drawable",
            "description": "Stream a video element as a live GPU texture and composite it with sprites and filters.",
            "backend": "core",
            "tags": [
                "sprite",
                "rendering"
            ],
            "capabilities": [
                "pointer"
            ]
        }
    ],
    "text-fonts": [
        {
            "slug": "bitmap-text-basic",
            "path": "text-fonts/bitmap-text-basic.js",
            "language": "typescript",
            "title": "Bitmap Text Basic",
            "description": "BitmapText rendered from an AngelCode .fnt atlas (Kenney Blocks, CC0). Demonstrates pre-built atlas rendering, word wrap, and live text updates without Canvas 2D rasterisation.",
            "backend": "core",
            "tags": [
                "bitmap",
                "text",
                "bmfont"
            ]
        },
        {
            "slug": "basic-text",
            "path": "text-fonts/basic-text.js",
            "language": "typescript",
            "title": "Basic Text",
            "description": "Render canvas-rasterised text inside a Scene. Set font, size, colour, and alignment via TextStyle.",
            "backend": "core",
            "tags": [
                "text"
            ]
        },
        {
            "slug": "multiline-and-wrap",
            "path": "text-fonts/multiline-and-wrap.js",
            "language": "typescript",
            "title": "Multiline and Wrap",
            "description": "Configure word-wrap width, line height, and horizontal alignment for multi-line Text drawables.",
            "backend": "core",
            "tags": [
                "text"
            ]
        },
        {
            "slug": "stroke-and-shadow",
            "path": "text-fonts/stroke-and-shadow.js",
            "language": "typescript",
            "title": "Stroke and Shadow",
            "description": "Add outline stroke and drop shadow to text using TextStyle properties — common game UI typography.",
            "backend": "core",
            "tags": [
                "text"
            ]
        },
        {
            "slug": "text-glitch",
            "path": "text-fonts/text-glitch.js",
            "language": "typescript",
            "title": "Text Glitch",
            "description": "Animate randomised character substitution on a Text drawable to produce a classic digital glitch effect.",
            "backend": "core",
            "tags": [
                "text",
                "fx",
                "animation"
            ]
        },
        {
            "slug": "web-fonts",
            "path": "text-fonts/web-fonts.js",
            "language": "typescript",
            "title": "Web Fonts",
            "description": "Load a custom web font via FontFace API and render it in a Text drawable — use any Google Font or local .ttf.",
            "backend": "core",
            "tags": [
                "text"
            ]
        }
    ],
    "tweens-animation": [
        {
            "slug": "easing-curves",
            "path": "tweens-animation/easing-curves.js",
            "language": "typescript",
            "title": "Easing Curves",
            "description": "Visualise all built-in easing functions side-by-side and pick the curve that fits your animation.",
            "backend": "core",
            "tags": [
                "animation",
                "tween"
            ]
        },
        {
            "slug": "frame-animation",
            "path": "tweens-animation/frame-animation.js",
            "language": "typescript",
            "title": "Frame Animation",
            "description": "Step through spritesheet frames on a timer to play a looping animation with configurable FPS.",
            "backend": "core",
            "tags": [
                "animation",
                "sprite"
            ]
        },
        {
            "slug": "interrupt-and-replace",
            "path": "tweens-animation/interrupt-and-replace.js",
            "language": "typescript",
            "title": "Interrupt and Replace",
            "description": "Click to interrupt a running tween and start a new one from the current position — no jitter or snap.",
            "backend": "core",
            "tags": [
                "animation",
                "tween"
            ],
            "capabilities": [
                "pointer"
            ]
        },
        {
            "slug": "tween-basics",
            "path": "tweens-animation/tween-basics.js",
            "language": "typescript",
            "title": "Tween Basics",
            "description": "Animate numeric properties with Tween: set from/to, duration, easing, and chain an onComplete callback.",
            "backend": "core",
            "tags": [
                "animation",
                "tween"
            ]
        },
        {
            "slug": "tween-chains",
            "path": "tweens-animation/tween-chains.js",
            "language": "typescript",
            "title": "Tween Chains",
            "description": "Build a sequence of tweens that fire one after another using tween.then() chaining.",
            "backend": "core",
            "tags": [
                "animation",
                "tween"
            ]
        },
        {
            "slug": "tween-from-array",
            "path": "tweens-animation/tween-from-array.js",
            "language": "typescript",
            "title": "Tween From Array",
            "description": "Drive a tween along a keyframe path defined as an array of values — useful for motion paths and patrol routes.",
            "backend": "core",
            "tags": [
                "animation",
                "tween"
            ]
        },
        {
            "slug": "tween-with-yoyo",
            "path": "tweens-animation/tween-with-yoyo.js",
            "language": "typescript",
            "title": "Tween with Yoyo",
            "description": "Ping-pong a tween back and forth with the yoyo option — ideal for pulsing, breathing, or idle animations.",
            "backend": "core",
            "tags": [
                "animation",
                "tween"
            ]
        }
    ],
    "ui": [
        {
            "slug": "hud-and-widgets",
            "path": "ui/hud-and-widgets.js",
            "language": "typescript",
            "title": "HUD and Widgets",
            "description": "Build a screen-fixed HUD on scene.ui: anchored score and health widgets, plus a panel of clickable, keyboard-focusable buttons that update them.",
            "backend": "core",
            "tags": [
                "ui",
                "hud",
                "button",
                "widget"
            ]
        }
    ]
}