My first aholo viewer app

${headingHtml}
]*\bdata-key=(["'])section-[^"']+\1[^>]*>\s*
(.*?)<\/h2>/g, + ), + ] + .map(match => ({ + depth: 2, + index: match.index ?? 0, + slug: match[3], + text: typeDocHeadingText(match[4]), + })) + .concat( + [...content.matchAll(/]*\bid=(["'])([^"']+)\1[^>]*>([\s\S]*?)<\/h3>/g)].map(match => ({ + depth: 3, + index: match.index ?? 0, + slug: match[2], + text: typeDocHeadingText(match[3]), + })), + ) + .filter(heading => heading.text) + .sort((left, right) => left.index - right.index) + .map(({ index, ...heading }) => heading); +} + +function typeDocHeadingText(content) { + return decodeBasicHtml( + stripHtml( + content + .replace(/]*class=(["'])[^"']*\btsd-anchor-icon\b[^"']*\1[^>]*><\/a>/g, '') + .replace(/
[\s\S]*?<\/code>/g, '')
+                .replace(/[\s\S]*?<\/code>/g, '')
+                .replace(/[\s\S]*?<\/span>/g, '')
+                .replace(//g, ''),
+        ),
+    );
+}
+
+function stripHtml(content) {
+    return content.replace(/<[^>]*>/g, '').trim();
+}
+
+function decodeBasicHtml(content) {
+    return content
+        .replace(/&/g, '&')
+        .replace(/</g, '<')
+        .replace(/>/g, '>')
+        .replace(/"/g, '"')
+        .replace(/'/g, "'");
+}
+
+function normalizeRelativePath(sourceDir, href) {
+    const stack = sourceDir ? sourceDir.split('/') : [];
+
+    for (const part of href.split('/')) {
+        if (part === '.' || part === '') {
+            continue;
+        }
+
+        if (part === '..') {
+            stack.pop();
+            continue;
+        }
+
+        stack.push(part);
+    }
+
+    return stack.join('/');
+}
+
+function toKebabCase(value) {
+    return value
+        .replace(/([A-Z]+)([A-Z][a-z])/g, '$1-$2')
+        .replace(/([a-z])([A-Z])/g, '$1-$2')
+        .replace(/([A-Za-z])(\d+)/g, '$1-$2')
+        .replace(/[\s_]+/g, '-')
+        .toLowerCase();
+}
diff --git a/scripts/generate-llm-docs.mjs b/scripts/generate-llm-docs.mjs
new file mode 100644
index 0000000..e02a820
--- /dev/null
+++ b/scripts/generate-llm-docs.mjs
@@ -0,0 +1,661 @@
+#!/usr/bin/env node
+/**
+ * Generates AI-friendly English markdown copies of the built documentation
+ * under website/dist/llm/. Reads cleanest sources where possible (manual
+ * markdown, example .ts/.json) and converts generated API HTML fragments
+ * to markdown.
+ *
+ * Output layout:
+ *   website/dist/llm/
+ *     index.md
+ *     README.md
+ *     manual/{slug}.md, index.md
+ *     api/{category}/{folder}/{name}.md, index.md
+ *     examples/{slug}.md, index.md
+ *   website/dist/llms.txt
+ */
+
+import { existsSync } from 'node:fs';
+import { mkdir, readdir, readFile, rm, writeFile } from 'node:fs/promises';
+import { dirname, extname, resolve } from 'node:path';
+import { workspaceRoot } from './package-utils.mjs';
+
+const LOCALE = 'en-US';
+const manualSourceRoot = resolve(workspaceRoot, 'website/src/content/manual');
+const examplesSourceRoot = resolve(workspaceRoot, 'website/src/content/examples');
+const generatedApiRoot = resolve(workspaceRoot, 'website/.generated/api');
+const websiteDistRoot = resolve(workspaceRoot, 'website/dist');
+const llmRoot = resolve(workspaceRoot, 'website/dist/llm');
+const llmsTxtPath = resolve(websiteDistRoot, 'llms.txt');
+
+await rm(llmRoot, { recursive: true, force: true });
+await mkdir(llmRoot, { recursive: true });
+
+const apiManifest = await loadApiManifest();
+const manualEntries = await emitManual();
+const apiEntries = await emitApi();
+const exampleEntries = await emitExamples();
+
+await writeFile(resolve(llmRoot, 'index.md'), renderRootIndex(manualEntries, apiEntries, exampleEntries));
+await writeFile(resolve(llmRoot, 'README.md'), renderReadme());
+await writeFile(llmsTxtPath, renderLlmsTxt(manualEntries, apiEntries, exampleEntries));
+
+console.log(
+    `[llm-docs] Wrote markdown corpus and /llms.txt: ` +
+        `${manualEntries.length} manual, ${apiEntries.length} api, ${exampleEntries.length} example files.`,
+);
+
+// ---------- Manual ----------
+
+async function emitManual() {
+    const sourceDir = resolve(manualSourceRoot, LOCALE);
+
+    if (!existsSync(sourceDir)) {
+        return [];
+    }
+
+    const files = (await readdir(sourceDir, { withFileTypes: true }))
+        .filter(entry => entry.isFile() && extname(entry.name) === '.md')
+        .map(entry => entry.name);
+
+    const entries = [];
+
+    for (const fileName of files) {
+        const filePath = resolve(sourceDir, fileName);
+        const source = await readFile(filePath, 'utf8');
+        const { frontmatter, body } = parseFrontmatter(source);
+        const slug = fileName.replace(/\.md$/, '');
+        const title = stringField(frontmatter, 'title') ?? slug;
+        const description = stringField(frontmatter, 'description') ?? '';
+        const order = numberField(frontmatter, 'order') ?? 0;
+        const rewrittenBody = rewriteManualBody(body);
+        const markdown = renderManualMarkdown(title, description, rewrittenBody);
+
+        await writeMarkdown(resolve(llmRoot, 'manual', `${slug}.md`), markdown);
+        entries.push({ slug, title, description, order });
+    }
+
+    entries.sort((left, right) => left.order - right.order || left.slug.localeCompare(right.slug));
+
+    await writeMarkdown(resolve(llmRoot, 'manual', 'index.md'), renderManualIndex(entries));
+
+    return entries;
+}
+
+function renderManualMarkdown(title, description, body) {
+    const sections = [`# ${title}`];
+
+    if (description && description !== title) {
+        sections.push(`> ${description}`);
+    }
+
+    sections.push(body.trim());
+
+    return `${sections.join('\n\n')}\n`;
+}
+
+function renderManualIndex(entries) {
+    const lines = [
+        '# Manual',
+        '',
+        '> Full product manual. Read `getting-started.md` then `basic-concepts.md` before using the SDK.',
+        '',
+    ];
+
+    for (const entry of entries) {
+        const description = entry.description && entry.description !== entry.title ? ` — ${entry.description}` : '';
+        lines.push(`- [${entry.title}](./${entry.slug}.md)${description}`);
+    }
+
+    return `${lines.join('\n')}\n`;
+}
+
+function rewriteManualBody(body) {
+    const withRewrittenLinks = body.replace(
+        /(^|[^!])(\[[^\]]*]\()([^)\s]+)([^)]*\))/g,
+        (match, prefix, opening, href, closing) => {
+            const rewritten = rewriteManualHref(href);
+            return rewritten ? `${prefix}${opening}${rewritten}${closing}` : match;
+        },
+    );
+
+    return withRewrittenLinks.replace(/(!\[[^\]]*]\()([^)\s]+)([^)]*\))/g, (match, opening, href, closing) => {
+        if (href.startsWith('http://') || href.startsWith('https://') || href.startsWith('/')) {
+            return match;
+        }
+
+        const sourceLocation = `../../src/content/manual/${LOCALE}/${href.replace(/^\.?\/+/, '')}`;
+        return `${opening}${sourceLocation}${closing}`;
+    });
+}
+
+function rewriteManualHref(href) {
+    if (!href) {
+        return undefined;
+    }
+
+    if (href.startsWith('http://') || href.startsWith('https://') || href.startsWith('#')) {
+        return undefined;
+    }
+
+    if (href.startsWith('api:')) {
+        const symbol = href
+            .slice('api:'.length)
+            .replace(/[#?].*$/, '')
+            .trim();
+        const entry = findApiEntryBySymbol(symbol);
+        return entry ? `../api/${entry.slug}.md` : undefined;
+    }
+
+    if (href.startsWith('/')) {
+        return undefined;
+    }
+
+    // Rewrite cross-section relative links like `../../examples/foo/` → `../examples/foo.md`.
+    const crossSection = href.match(/^\.\.\/\.\.\/(examples|api|manual)\/([^?#]*?)\/?([?#].*)?$/);
+
+    if (crossSection) {
+        const [, section, slug, trailing = ''] = crossSection;
+        const cleanSlug = slug.replace(/\/$/, '');
+        return `../${section}/${cleanSlug === '' ? 'index' : cleanSlug}.md${trailing}`;
+    }
+
+    if (href.endsWith('.md') || /\.md[?#]/.test(href)) {
+        return href;
+    }
+
+    return undefined;
+}
+
+// ---------- API ----------
+
+async function emitApi() {
+    if (!apiManifest) {
+        return [];
+    }
+
+    const apiLocaleDir = resolve(generatedApiRoot, LOCALE);
+
+    if (!existsSync(apiLocaleDir)) {
+        return [];
+    }
+
+    const entries = [];
+
+    for (const entry of apiManifest.entries ?? []) {
+        const sourcePath = resolve(apiLocaleDir, `${entry.slug}.html`);
+
+        if (!existsSync(sourcePath)) {
+            continue;
+        }
+
+        const html = await readFile(sourcePath, 'utf8');
+        const body = htmlToMarkdown(html, {
+            rewriteLink: href => rewriteApiHref(href, entry.slug),
+        });
+        const heading = entry.signature
+            ? `# ${entry.title}\n\n\`\`\`ts\n${entry.signature}\n\`\`\``
+            : `# ${entry.title}`;
+        const meta = renderApiMeta(entry);
+        const description = entry.description ? `> ${entry.description}\n\n` : '';
+        const markdown = `${heading}\n\n${meta}${description}${body.trim()}\n`;
+
+        await writeMarkdown(resolve(llmRoot, 'api', `${entry.slug}.md`), markdown);
+        entries.push(entry);
+    }
+
+    await writeMarkdown(resolve(llmRoot, 'api', 'index.md'), renderApiIndex(entries));
+
+    return entries;
+}
+
+function renderApiMeta(entry) {
+    const segments = [];
+
+    if (entry.categoryLabel) {
+        segments.push(`Category: \`${entry.categoryLabel}\``);
+    }
+
+    if (entry.namespaceLabel && entry.namespaceLabel !== entry.categoryLabel) {
+        segments.push(`Namespace: \`${entry.namespaceLabel}\``);
+    }
+
+    if (entry.kindLabel) {
+        segments.push(`Kind: \`${entry.kindLabel}\``);
+    }
+
+    return segments.length ? `${segments.join(' · ')}\n\n` : '';
+}
+
+function renderApiIndex(entries) {
+    const grouped = new Map();
+
+    for (const entry of entries) {
+        const key = `${entry.categoryLabel ?? 'Misc'}::${entry.namespaceLabel ?? entry.categoryLabel ?? 'Misc'}`;
+
+        if (!grouped.has(key)) {
+            grouped.set(key, {
+                categoryLabel: entry.categoryLabel ?? 'Misc',
+                namespaceLabel: entry.namespaceLabel ?? entry.categoryLabel ?? 'Misc',
+                entries: [],
+            });
+        }
+
+        grouped.get(key).entries.push(entry);
+    }
+
+    const lines = [
+        '# API Reference',
+        '',
+        '> Generated from TypeDoc, grouped by namespace. Each `.md` file corresponds to one exported symbol.',
+        '',
+    ];
+
+    let lastCategory;
+
+    for (const group of grouped.values()) {
+        if (group.categoryLabel !== lastCategory) {
+            lines.push('', `## ${group.categoryLabel}`, '');
+            lastCategory = group.categoryLabel;
+        }
+
+        if (group.namespaceLabel && group.namespaceLabel !== group.categoryLabel) {
+            lines.push(`### ${group.namespaceLabel}`, '');
+        }
+
+        for (const entry of group.entries) {
+            lines.push(`- [${entry.title}](./${entry.slug}.md) — ${entry.kindLabel}`);
+        }
+    }
+
+    return `${lines.join('\n')}\n`;
+}
+
+function rewriteApiHref(href, currentSlug) {
+    if (!href) {
+        return undefined;
+    }
+
+    const localePrefix = `/${LOCALE}/api/`;
+
+    if (href.startsWith(localePrefix)) {
+        const [pathname, hash = ''] = splitHash(href.slice(localePrefix.length));
+        const targetSlug = pathname.replace(/\/$/, '');
+        if (!targetSlug) {
+            return `./index.md${hash}`;
+        }
+        return relativeMdHref(currentSlug, targetSlug) + hash;
+    }
+
+    if (href.startsWith('http://') || href.startsWith('https://')) {
+        return href;
+    }
+
+    return undefined;
+}
+
+function splitHash(value) {
+    const index = value.indexOf('#');
+    if (index === -1) {
+        return [value, ''];
+    }
+    return [value.slice(0, index), value.slice(index)];
+}
+
+function relativeMdHref(fromSlug, toSlug) {
+    const fromParts = fromSlug.split('/');
+    const toParts = toSlug.split('/');
+    fromParts.pop();
+
+    let common = 0;
+    while (common < fromParts.length && common < toParts.length && fromParts[common] === toParts[common]) {
+        common += 1;
+    }
+
+    const ups = fromParts.length - common;
+    const downs = toParts.slice(common);
+    const prefix = ups === 0 ? './' : '../'.repeat(ups);
+
+    return `${prefix}${downs.join('/')}.md`;
+}
+
+function findApiEntryBySymbol(symbol) {
+    if (!apiManifest) {
+        return undefined;
+    }
+
+    const entries = apiManifest.entries ?? [];
+    const direct = entries.find(entry => entry.title === symbol);
+
+    if (direct) {
+        return direct;
+    }
+
+    const dotted = symbol.split('.');
+
+    if (dotted.length === 2) {
+        return entries.find(entry => entry.namespace === dotted[0] && entry.title === dotted[1]);
+    }
+
+    return undefined;
+}
+
+async function loadApiManifest() {
+    const manifestPath = resolve(generatedApiRoot, 'manifest.ts');
+
+    if (!existsSync(manifestPath)) {
+        return undefined;
+    }
+
+    const source = await readFile(manifestPath, 'utf8');
+    const start = source.indexOf('{');
+    const end = source.lastIndexOf('}');
+
+    if (start === -1 || end === -1 || end <= start) {
+        return undefined;
+    }
+
+    return JSON.parse(source.slice(start, end + 1));
+}
+
+// ---------- Examples ----------
+
+async function emitExamples() {
+    if (!existsSync(examplesSourceRoot)) {
+        return [];
+    }
+
+    const entries = await readdir(examplesSourceRoot, { withFileTypes: true });
+    const slugs = entries
+        .filter(entry => entry.isFile() && extname(entry.name) === '.json')
+        .map(entry => entry.name.replace(/\.json$/, ''));
+
+    const items = [];
+
+    for (const slug of slugs) {
+        const jsonPath = resolve(examplesSourceRoot, `${slug}.json`);
+        const codePath = resolve(examplesSourceRoot, `${slug}.ts`);
+        const meta = JSON.parse(await readFile(jsonPath, 'utf8'));
+        const code = existsSync(codePath) ? await readFile(codePath, 'utf8') : '';
+        const title = meta?.title?.[LOCALE] ?? meta?.title?.['en-US'] ?? slug;
+        const tags = Array.isArray(meta?.tags) ? meta.tags : [];
+        const order = typeof meta?.order === 'number' ? meta.order : Number.POSITIVE_INFINITY;
+
+        const markdown = renderExampleMarkdown({ slug, title, tags, code });
+
+        await writeMarkdown(resolve(llmRoot, 'examples', `${slug}.md`), markdown);
+        items.push({ slug, title, tags, order });
+    }
+
+    items.sort((left, right) => left.order - right.order || left.slug.localeCompare(right.slug));
+
+    await writeMarkdown(resolve(llmRoot, 'examples', 'index.md'), renderExamplesIndex(items));
+
+    return items;
+}
+
+function renderExampleMarkdown({ slug, title, tags, code }) {
+    const tagLine = tags.length ? `Tags: ${tags.map(tag => `\`${tag}\``).join(', ')}\n\n` : '';
+    const sourceHint = `Source: \`website/src/content/examples/${slug}.ts\`\n\n`;
+    const liveUrl = `/${LOCALE}/examples/${slug}/`;
+    const codeBlock = code.trim() ? `\`\`\`ts\n${code.trim()}\n\`\`\`\n` : '_No code attached._\n';
+
+    return `# ${title}\n\n${tagLine}${sourceHint}Live page: \`${liveUrl}\`\n\n${codeBlock}`;
+}
+
+function renderExamplesIndex(items) {
+    const lines = [
+        '# Examples',
+        '',
+        '> Each example demonstrates one SDK capability. The markdown file contains the original TypeScript source.',
+        '',
+    ];
+
+    for (const item of items) {
+        const tagSuffix = item.tags.length ? ` — tags: ${item.tags.join(', ')}` : '';
+        lines.push(`- [${item.title}](./${item.slug}.md)${tagSuffix}`);
+    }
+
+    return `${lines.join('\n')}\n`;
+}
+
+// ---------- Root index ----------
+
+function renderRootIndex(manual, api, examples) {
+    const lines = [
+        '# Aholo Viewer — AI-Friendly Documentation',
+        '',
+        'This directory is the machine-readable corpus of the Aholo Viewer docs. ',
+        'It is regenerated on every `pnpm build` from the same sources that produce the public website.',
+        '',
+        '## Entry Points',
+        '',
+        `- [Manual](./manual/index.md) — ${manual.length} pages`,
+        `- [API Reference](./api/index.md) — ${api.length} symbols`,
+        `- [Examples](./examples/index.md) — ${examples.length} runnable demos`,
+        '',
+        '## Recommended Reading Order',
+        '',
+        '1. `manual/getting-started.md` — install and bootstrap a viewer in minutes.',
+        '2. `manual/basic-concepts.md` — mental model for scene, camera, renderer.',
+        '3. Browse `api/` and `examples/` on demand.',
+        '',
+        '## Directory Layout',
+        '',
+        '```',
+        'llm/',
+        '  index.md       # this file',
+        '  manual/        # user manual (markdown)',
+        '  api/           # API reference (converted from TypeDoc HTML)',
+        '  examples/      # runnable examples with TypeScript source',
+        '```',
+        '',
+    ];
+
+    return `${lines.join('\n')}\n`;
+}
+
+function renderReadme() {
+    return [
+        '# /llm — AI-friendly docs',
+        '',
+        'This folder is generated by `scripts/generate-llm-docs.mjs` as part of `pnpm build`.',
+        '',
+        'It mirrors the human-facing site under `/{locale}/manual`, `/{locale}/api`, `/{locale}/examples`',
+        'but as plain English markdown, which is easier for automated coding agents to parse.',
+        '',
+        'Do not edit files here directly — they will be regenerated on every build.',
+        '',
+    ].join('\n');
+}
+
+function renderLlmsTxt(manual, api, examples) {
+    return [
+        '# Aholo Viewer',
+        '',
+        '> High-performance 3D Gaussian Splatting rendering for web applications.',
+        '',
+        'AI assistants should use the markdown corpus under `/llm/` before scraping the human-facing site.',
+        '',
+        '## Primary Docs',
+        '',
+        `- [AI documentation index](/llm/index.md): overview and recommended reading order.`,
+        `- [Manual](/llm/manual/index.md): product manual, ${manual.length} pages.`,
+        `- [API Reference](/llm/api/index.md): exported SDK symbols, ${api.length} entries.`,
+        `- [Examples](/llm/examples/index.md): runnable TypeScript examples, ${examples.length} demos.`,
+        '',
+        '## Recommended Use',
+        '',
+        '- Start with `/llm/manual/getting-started.md` for setup.',
+        '- Read `/llm/manual/basic-concepts.md` for the scene, camera, and renderer model.',
+        '- Use `/llm/api/index.md` to locate public exports.',
+        '- Use `/llm/examples/index.md` for runnable integration patterns.',
+        '',
+    ].join('\n');
+}
+
+// ---------- Utilities ----------
+
+async function writeMarkdown(filePath, content) {
+    await mkdir(dirname(filePath), { recursive: true });
+    await writeFile(filePath, content);
+}
+
+function parseFrontmatter(source) {
+    if (!source.startsWith('---')) {
+        return { frontmatter: {}, body: source };
+    }
+
+    const closing = source.indexOf('\n---', 3);
+
+    if (closing === -1) {
+        return { frontmatter: {}, body: source };
+    }
+
+    const rawFrontmatter = source.slice(3, closing).trim();
+    const body = source.slice(closing + 4).replace(/^\r?\n/, '');
+    const frontmatter = {};
+
+    for (const line of rawFrontmatter.split(/\r?\n/)) {
+        const match = line.match(/^([\w-]+)\s*:\s*(.*)$/);
+
+        if (!match) {
+            continue;
+        }
+
+        const [, key, rawValue] = match;
+        const trimmed = rawValue.trim().replace(/^['"](.*)['"]$/, '$1');
+
+        frontmatter[key] = trimmed;
+    }
+
+    return { frontmatter, body };
+}
+
+function stringField(frontmatter, key) {
+    const value = frontmatter[key];
+
+    if (typeof value !== 'string') {
+        return undefined;
+    }
+
+    const trimmed = value.trim();
+
+    return trimmed === '' ? undefined : trimmed;
+}
+
+function numberField(frontmatter, key) {
+    const value = Number(frontmatter[key]);
+
+    return Number.isFinite(value) ? value : undefined;
+}
+
+// ---------- HTML → Markdown ----------
+
+function htmlToMarkdown(html, { rewriteLink } = {}) {
+    let working = html;
+
+    working = working.replace(/]*class=(["'])[^"']*\btsd-anchor-icon\b[^"']*\1[^>]*>[\s\S]*?<\/a>/g, '');
+    working = working.replace(//g, '');
+    working = working.replace(//g, '');
+
+    working = working.replace(/]*>\s*]*)>([\s\S]*?)<\/code>\s*<\/pre>/g, (_match, attrs, inner) => {
+        const langMatch = attrs.match(/class=(["'])([^"']*)\1/);
+        const langClass = langMatch?.[2] ?? '';
+        const lang = langClass.match(/language-([\w-]+)/)?.[1] ?? '';
+        const text = decodeHtmlEntities(stripTags(inner));
+        return `\n\n\`\`\`${lang}\n${text.replace(/\n+$/, '')}\n\`\`\`\n\n`;
+    });
+
+    working = working.replace(/]*>([\s\S]*?)<\/pre>/g, (_match, inner) => {
+        const text = decodeHtmlEntities(stripTags(inner));
+        return `\n\n\`\`\`\n${text.replace(/\n+$/, '')}\n\`\`\`\n\n`;
+    });
+
+    working = working.replace(/]*>([\s\S]*?)<\/code>/g, (_match, inner) => {
+        const text = decodeHtmlEntities(stripTags(inner)).replace(/`/g, '\\`');
+        return `\`${text}\``;
+    });
+
+    working = working.replace(/]*>([\s\S]*?)<\/h\1>/g, (_match, level, inner) => {
+        const text = decodeHtmlEntities(stripTags(inner)).trim();
+        if (!text) return '';
+        return `\n\n${'#'.repeat(Number(level))} ${text}\n\n`;
+    });
+
+    working = working.replace(/]*)>([\s\S]*?)<\/a>/g, (_match, attrs, inner) => {
+        const hrefMatch = attrs.match(/href=(["'])([^"']*)\1/);
+        const text = decodeHtmlEntities(stripTags(inner)).trim();
+
+        if (!hrefMatch) {
+            return text;
+        }
+
+        const rawHref = decodeHtmlEntities(hrefMatch[2]);
+        const finalHref = rewriteLink ? (rewriteLink(rawHref) ?? rawHref) : rawHref;
+
+        if (!text) {
+            return finalHref;
+        }
+
+        return `[${text}](${finalHref})`;
+    });
+
+    working = working.replace(/<(?:strong|b)\b[^>]*>([\s\S]*?)<\/(?:strong|b)>/g, (_match, inner) => {
+        return `**${decodeHtmlEntities(stripTags(inner)).trim()}**`;
+    });
+    working = working.replace(/<(?:em|i)\b[^>]*>([\s\S]*?)<\/(?:em|i)>/g, (_match, inner) => {
+        return `*${decodeHtmlEntities(stripTags(inner)).trim()}*`;
+    });
+
+    working = working.replace(/(\s*)/g, '\n$1');
+
+    working = working.replace(/<(ul|ol)\b[^>]*>([\s\S]*?)<\/\1>/g, (_match, tag, inner) => {
+        const isOrdered = tag === 'ol';
+        const items = [];
+        let counter = 1;
+
+        inner.replace(/]*>([\s\S]*?)<\/li>/g, (_full, itemInner) => {
+            const itemText = collapseWhitespace(decodeHtmlEntities(stripTags(itemInner)));
+            if (itemText) {
+                const bullet = isOrdered ? `${counter}.` : '-';
+                items.push(`${bullet} ${itemText}`);
+                counter += 1;
+            }
+            return '';
+        });
+
+        return `\n\n${items.join('\n')}\n\n`;
+    });
+
+    working = working.replace(/<(p|section|article|div|details|summary)\b[^>]*>/g, '\n\n');
+    working = working.replace(/<\/(p|section|article|div|details|summary)>/g, '\n\n');
+
+    working = stripTags(working);
+    working = decodeHtmlEntities(working);
+    working = working.replace(/[ \t]+\n/g, '\n');
+    working = working.replace(/\n{3,}/g, '\n\n');
+
+    return working.trim();
+}
+
+function stripTags(value) {
+    return value.replace(/<[^>]+>/g, '');
+}
+
+function collapseWhitespace(value) {
+    return value.replace(/\s+/g, ' ').trim();
+}
+
+function decodeHtmlEntities(value) {
+    return value
+        .replace(/</g, '<')
+        .replace(/>/g, '>')
+        .replace(/"/g, '"')
+        .replace(/'/g, "'")
+        .replace(/'/g, "'")
+        .replace(/ /g, ' ')
+        .replace(/&#(\d+);/g, (_match, code) => String.fromCodePoint(Number(code)))
+        .replace(/&#x([0-9a-fA-F]+);/g, (_match, code) => String.fromCodePoint(parseInt(code, 16)))
+        .replace(/&/g, '&');
+}
diff --git a/scripts/package-utils.mjs b/scripts/package-utils.mjs
new file mode 100644
index 0000000..6b4b841
--- /dev/null
+++ b/scripts/package-utils.mjs
@@ -0,0 +1,156 @@
+import { spawnSync } from 'node:child_process';
+import { existsSync, readdirSync, readFileSync, statSync } from 'node:fs';
+import { dirname, isAbsolute, relative, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+export const workspaceRoot = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+
+export function resolvePackageRoot(packageRootArg = process.argv[2]) {
+    const packageRoot = resolve(process.cwd(), packageRootArg ?? '.');
+    assertInsideDir(workspaceRoot, packageRoot, 'Package root');
+
+    const packageJsonPath = resolve(packageRoot, 'package.json');
+
+    if (!existsSync(packageJsonPath)) {
+        throw new Error(`Package root is missing package.json: ${packageRoot}`);
+    }
+
+    return packageRoot;
+}
+
+export function readPackageJson(packageRoot) {
+    return readJsonFile(resolve(packageRoot, 'package.json'), 'package metadata');
+}
+
+export function readJsonFile(filePath, label = 'JSON') {
+    try {
+        return JSON.parse(readFileSync(filePath, 'utf8'));
+    } catch (error) {
+        throw new Error(`Unable to read ${label} at ${filePath}.`, { cause: error });
+    }
+}
+
+export function resolvePackagePath(packageRoot, value, label) {
+    if (typeof value !== 'string' || value.trim() === '') {
+        throw new Error(`Missing ${label}.`);
+    }
+
+    const absolutePath = resolve(packageRoot, value);
+    assertInsideDir(packageRoot, absolutePath, label);
+    return absolutePath;
+}
+
+export function resolveWorkspacePath(value, label) {
+    if (typeof value !== 'string' || value.trim() === '') {
+        throw new Error(`Missing ${label}.`);
+    }
+
+    const absolutePath = resolve(workspaceRoot, value);
+    assertInsideDir(workspaceRoot, absolutePath, label);
+    return absolutePath;
+}
+
+export function assertInsideDir(parent, child, label) {
+    if (!isInsideDir(parent, child)) {
+        throw new Error(`${label} must stay inside ${parent}: ${child}`);
+    }
+}
+
+export function isInsideDir(parent, child) {
+    const relativePath = relative(resolve(parent), resolve(child));
+
+    return relativePath === '' || (!!relativePath && !relativePath.startsWith('..') && !isAbsolute(relativePath));
+}
+
+export function formatWorkspacePath(filePath) {
+    return toPosixPath(relative(workspaceRoot, resolve(filePath)));
+}
+
+export function statSafe(filePath) {
+    try {
+        return statSync(filePath);
+    } catch {
+        return undefined;
+    }
+}
+
+export function listFiles(directory, options = {}) {
+    if (!existsSync(directory)) {
+        return [];
+    }
+
+    const files = [];
+    const skipDirectories = new Set(options.skipDirectories ?? []);
+
+    for (const entry of readdirSync(directory, { withFileTypes: true })) {
+        if (entry.isDirectory() && skipDirectories.has(entry.name)) {
+            continue;
+        }
+
+        const entryPath = resolve(directory, entry.name);
+
+        if (entry.isDirectory()) {
+            files.push(...listFiles(entryPath, options));
+            continue;
+        }
+
+        if (entry.isFile()) {
+            files.push(entryPath);
+        }
+    }
+
+    return files;
+}
+
+export function readWebsiteLocales() {
+    const localeSourcePath = resolve(workspaceRoot, 'website/src/i18n/locales.ts');
+    const source = readFileSync(localeSourcePath, 'utf8');
+    const localeMatches = [...source.matchAll(/code:\s*["']([^"']+)["']/g)].map(match => match[1]);
+
+    if (localeMatches.length === 0) {
+        throw new Error(`Unable to read website locales from ${formatWorkspacePath(localeSourcePath)}.`);
+    }
+
+    return localeMatches;
+}
+
+export function getPnpmCommand() {
+    return process.platform === 'win32' ? 'pnpm.cmd' : 'pnpm';
+}
+
+export function runCommand(command, args, options = {}) {
+    return spawnSync(command, args, {
+        cwd: options.cwd ?? workspaceRoot,
+        encoding: options.encoding,
+        env: options.env ?? process.env,
+        shell: options.shell ?? false,
+        stdio: options.stdio ?? 'inherit',
+    });
+}
+
+export function runCommandOrExit(command, args, options = {}) {
+    const result = runCommand(command, args, options);
+
+    if (result.status === 0) {
+        return result;
+    }
+
+    const cwd = options.cwd ?? workspaceRoot;
+    const label = options.label ?? `${command} ${args.join(' ')}`;
+
+    console.error(`[scripts] Command failed in ${cwd}: ${label}`);
+
+    if (result.error) {
+        console.error(result.error);
+    }
+
+    if (result.stderr) {
+        console.error(result.stderr);
+    }
+
+    process.exit(result.status ?? 1);
+}
+
+export function toPosixPath(value) {
+    return value.replace(/\\/g, '/');
+}
diff --git a/scripts/prepare-egs-types.mjs b/scripts/prepare-egs-types.mjs
new file mode 100644
index 0000000..0c960d4
--- /dev/null
+++ b/scripts/prepare-egs-types.mjs
@@ -0,0 +1,43 @@
+import { existsSync } from 'node:fs';
+import { join } from 'node:path';
+import { getPnpmCommand, runCommandOrExit, workspaceRoot } from './package-utils.mjs';
+
+const rootDir = workspaceRoot;
+const egsRoot = join(rootDir, 'external/egs-core');
+
+if (process.env.AHOLO_SKIP_EGS_TYPES === '1') {
+    console.log('[egs-types] Skipping EGS type preparation because AHOLO_SKIP_EGS_TYPES=1.');
+    process.exit(0);
+}
+
+runCommandOrExit(process.execPath, [join(rootDir, 'scripts/ensure-submodules.mjs')], {
+    cwd: rootDir,
+    label: 'node scripts/ensure-submodules.mjs',
+});
+ensureEgsInstall();
+
+runCommandOrExit(getPnpmCommand(), ['run', '--filter=!@internal/*', '-r', '--if-present', 'build:types:release'], {
+    cwd: egsRoot,
+    label: 'pnpm run --filter=!@internal/* -r --if-present build:types:release',
+    shell: process.platform === 'win32',
+});
+
+console.log('[egs-types] Ready.');
+
+function ensureEgsInstall() {
+    const requiredFiles = [
+        join(egsRoot, 'node_modules/@internal/tsconfig/index.json'),
+        join(egsRoot, 'node_modules/typescript/lib/tsc.js'),
+    ];
+
+    if (requiredFiles.every(file => existsSync(file))) {
+        return;
+    }
+
+    console.log('[egs-types] Installing EGS build dependencies from external/egs-core/pnpm-lock.yaml.');
+    runCommandOrExit(getPnpmCommand(), ['install', '--frozen-lockfile', '--ignore-scripts'], {
+        cwd: egsRoot,
+        label: 'pnpm install --frozen-lockfile --ignore-scripts',
+        shell: process.platform === 'win32',
+    });
+}
diff --git a/scripts/publish-packages.mjs b/scripts/publish-packages.mjs
new file mode 100644
index 0000000..be71959
--- /dev/null
+++ b/scripts/publish-packages.mjs
@@ -0,0 +1,74 @@
+import child_process from 'node:child_process';
+import fs from 'node:fs';
+import path from 'node:path';
+
+const packages = JSON.parse(
+    child_process.execSync('pnpm list --filter=@manycore/* -r -depth -1 --json', { stdio: 'pipe' }).toString('utf-8'),
+).filter(item => !item.private);
+
+// update splat-transform sub packages version.
+{
+    const splatTransformSubPackages = packages.filter(
+        item =>
+            item.name.startsWith('@manycore/aholo-splat-transform') && item.name !== '@manycore/aholo-splat-transform',
+    );
+    const splatTransformMainPackage = packages.find(item => item.name === '@manycore/aholo-splat-transform');
+    const splatTransformMainPackageJson = JSON.parse(
+        fs.readFileSync(path.resolve(splatTransformMainPackage.path, 'package.json'), 'utf-8'),
+    );
+    for (const p of splatTransformSubPackages) {
+        const packageJson = JSON.parse(fs.readFileSync(path.resolve(p.path, 'package.json'), 'utf-8'));
+        p.version = splatTransformMainPackageJson.version;
+        packageJson.version = splatTransformMainPackageJson.version;
+        splatTransformMainPackageJson.optionalDependencies[p.name] = splatTransformMainPackageJson.version;
+        fs.writeFileSync(path.resolve(p.path, 'package.json'), JSON.stringify(packageJson, undefined, 2), 'utf-8');
+    }
+    fs.writeFileSync(
+        path.resolve(splatTransformMainPackage.path, 'package.json'),
+        JSON.stringify(splatTransformMainPackageJson, undefined, 2),
+        'utf-8',
+    );
+}
+
+const publishedPackages = [];
+
+for (const p of packages) {
+    const cwd = p.path;
+    const packageJson = JSON.parse(fs.readFileSync(path.resolve(cwd, 'package.json'), 'utf-8'));
+    const hiddenBuildCommand = packageJson.scripts?.['.build'];
+    let published = false;
+    try {
+        child_process.execSync(`npm view ${p.name}@${p.version}`, { stdio: 'ignore' });
+        published = true;
+    } catch {
+        // assume not found. should publish.
+    }
+    if (!published) {
+        if (hiddenBuildCommand) {
+            // hidden build command exists, add build commands to call .build
+            packageJson.scripts.build = 'pnpm run .build';
+            fs.writeFileSync(path.resolve(cwd, 'package.json'), JSON.stringify(packageJson, undefined, 2), 'utf-8');
+        }
+        // run build command if exists
+        child_process.execSync('pnpm run --if-present build', { stdio: 'inherit', cwd });
+        // cleanup package.json before publish
+        child_process.execSync('npm pkg delete scripts devDependencies', { stdio: 'inherit', cwd });
+        child_process.execSync('npm publish --access public', { stdio: 'inherit', cwd });
+        // restore package.json
+        if (hiddenBuildCommand) {
+            delete packageJson.scripts.build;
+        }
+        fs.writeFileSync(path.resolve(cwd, 'package.json'), JSON.stringify(packageJson, undefined, 2), 'utf-8');
+        publishedPackages.push({
+            name: p.name,
+            version: p.version,
+        });
+    }
+}
+
+if (publishedPackages.length > 0) {
+    console.log('published:');
+    for (const p of publishedPackages) {
+        console.log(`\t${p.name}@${p.version}`);
+    }
+}
diff --git a/scripts/read-package-changelog.mjs b/scripts/read-package-changelog.mjs
new file mode 100644
index 0000000..e7e947d
--- /dev/null
+++ b/scripts/read-package-changelog.mjs
@@ -0,0 +1,60 @@
+import child_process from 'node:child_process';
+import { existsSync, readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+
+import { assertInsideDir, formatWorkspacePath, readPackageJson, resolveWorkspacePath } from './package-utils.mjs';
+
+const [packageName, versionArg] = process.argv.slice(2);
+
+if (!packageName) {
+    console.error('Usage: node scripts/read-package-changelog.mjs  [version]');
+    process.exit(1);
+}
+
+const packageInfo = JSON.parse(
+    child_process.execSync('pnpm list --filter=@manycore/* -r -depth -1 --json', { stdio: 'pipe' }).toString('utf-8'),
+).find(item => item.name === packageName);
+
+const packageRoot = resolveWorkspacePath(packageInfo.path, 'Package root');
+const packageJson = readPackageJson(packageRoot);
+const packageVersion = versionArg ?? packageJson.version;
+
+if (typeof packageVersion !== 'string' || packageVersion.trim() === '') {
+    throw new Error(`Missing package version for ${formatWorkspacePath(packageRoot)}.`);
+}
+
+const changelogPath = resolve(packageRoot, 'CHANGELOG.md');
+assertInsideDir(packageRoot, changelogPath, 'Changelog path');
+
+if (!existsSync(changelogPath)) {
+    throw new Error(`Missing CHANGELOG.md for ${formatWorkspacePath(packageRoot)}.`);
+}
+
+const changelog = readFileSync(changelogPath, 'utf8');
+const body = readChangelogSection(changelog, packageVersion, formatWorkspacePath(changelogPath));
+
+process.stdout.write(body);
+
+function readChangelogSection(changelog, version, changelogLabel) {
+    const versionHeading = new RegExp(`^##\\s+\\[?${escapeRegExp(version)}\\]?(?:\\s.*)?$`, 'm');
+    const match = versionHeading.exec(changelog);
+
+    if (!match) {
+        throw new Error(`Missing ${version} section in ${changelogLabel}.`);
+    }
+
+    const sectionStart = match.index + match[0].length;
+    const rest = changelog.slice(sectionStart);
+    const nextSection = /^##\s+/m.exec(rest);
+    const body = (nextSection ? rest.slice(0, nextSection.index) : rest).trim();
+
+    if (!body) {
+        throw new Error(`Empty ${version} section in ${changelogLabel}.`);
+    }
+
+    return body;
+}
+
+function escapeRegExp(value) {
+    return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
diff --git a/tsconfig.base.json b/tsconfig.base.json
new file mode 100644
index 0000000..a8cba2f
--- /dev/null
+++ b/tsconfig.base.json
@@ -0,0 +1,10 @@
+{
+  "extends": "@internal/utils/tsconfig.json",
+  "compilerOptions": {
+    "resolveJsonModule": true,
+    "noEmit": true,
+    "allowJs": true,
+    "jsx": "preserve",
+    "strict": true
+  }
+}
diff --git a/website/astro.config.mjs b/website/astro.config.mjs
new file mode 100644
index 0000000..593eec5
--- /dev/null
+++ b/website/astro.config.mjs
@@ -0,0 +1,473 @@
+import { defineConfig } from 'astro/config';
+import { spawn } from 'node:child_process';
+import { createReadStream, existsSync } from 'node:fs';
+import { copyFile, mkdir, readdir, rm, stat } from 'node:fs/promises';
+import { dirname, extname, isAbsolute, relative, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import checker from 'vite-plugin-checker';
+import {
+    assetsPrefix,
+    astroAssetsDir,
+    buildHashLength,
+    getManualAssetOutputPath,
+    manualAssetsDir,
+    manualAssetPath,
+} from './src/utils/manual-assets.js';
+
+const workspaceRoot = fileURLToPath(new URL('../', import.meta.url));
+const manualContentRoot = fileURLToPath(new URL('./src/content/manual', import.meta.url));
+const manualAssetSourceRoot = fileURLToPath(new URL('./src/content/manual/assets', import.meta.url));
+const manualBuildAssetRoot = fileURLToPath(new URL(`./dist/${astroAssetsDir}/${manualAssetsDir}`, import.meta.url));
+const manualDevAssetPath = manualAssetPath;
+const examplesContentRoot = fileURLToPath(new URL('./src/content/examples', import.meta.url));
+const rolldownOutputFileNames = {
+    entryFileNames: `${astroAssetsDir}/[name].[hash:${buildHashLength}].js`,
+    chunkFileNames: `${astroAssetsDir}/[name].[hash:${buildHashLength}].js`,
+    assetFileNames: `${astroAssetsDir}/[name].[hash:${buildHashLength}][extname]`,
+};
+const egsCoreWatchRoots = [
+    fileURLToPath(new URL('../external/egs-core/packages', import.meta.url)),
+    fileURLToPath(new URL('../external/egs-core/tools/utils', import.meta.url)),
+];
+const contentReloadEvents = ['add', 'change', 'unlink'];
+const manualInvalidationRules = {
+    includes: ['/src/content/manual/', '/src/pages/[lang]/manual/'],
+    endsWith: ['/src/utils/manual.ts'],
+};
+const examplesInvalidationRules = {
+    includes: ['/src/content/examples/', '/src/pages/[lang]/examples/'],
+    endsWith: [
+        '/src/components/PlaygroundShell.astro',
+        '/src/pages/[lang]/index.astro',
+        '/src/pages/[lang]/playground.astro',
+        '/src/utils/examples.ts',
+    ],
+};
+const rendererInvalidationRules = {
+    includes: ['/packages/renderer/dist/', '/node_modules/@manycore/aholo-viewer/', '@manycore/aholo-viewer'],
+    endsWith: ['/packages/renderer/dist/index.js', '/packages/renderer/dist/splat-worker.js'],
+};
+
+const isProd = process.env.NODE_ENV === 'production';
+
+export default defineConfig({
+    output: 'static',
+    trailingSlash: 'always',
+    build: {
+        assets: astroAssetsDir,
+        assetsPrefix,
+    },
+    vite: {
+        build: {
+            rolldownOptions: {
+                output: rolldownOutputFileNames,
+            },
+        },
+        worker: {
+            rolldownOptions: {
+                output: rolldownOutputFileNames,
+            },
+        },
+        server: {
+            watch: {
+                interval: 250,
+                usePolling: true,
+            },
+        },
+        optimizeDeps: {
+            exclude: ['monaco-editor', '@manycore/aholo-viewer'],
+        },
+        environments: {
+            client: {
+                build: {
+                    rolldownOptions: {
+                        output: rolldownOutputFileNames,
+                    },
+                },
+            },
+        },
+        plugins: [
+            !isProd &&
+                checker({
+                    typescript: true,
+                }),
+            manualAssetsPlugin(),
+            manualContentReloadPlugin(),
+            examplesContentReloadPlugin(),
+            egsCoreReloadPlugin(),
+        ],
+    },
+});
+
+function manualAssetsPlugin() {
+    return {
+        name: 'aholo-manual-assets',
+        configureServer(server) {
+            server.watcher.add(manualAssetSourceRoot);
+            server.middlewares.use(manualDevAssetPath, async (request, response, next) => {
+                try {
+                    const requestedPath = getManualAssetRequestPath(request.url);
+
+                    if (!requestedPath) {
+                        next();
+                        return;
+                    }
+
+                    const assetPath = resolve(manualAssetSourceRoot, requestedPath);
+
+                    if (!isWithinRoot(manualAssetSourceRoot, assetPath)) {
+                        next();
+                        return;
+                    }
+
+                    const assetStat = await stat(assetPath);
+
+                    if (!assetStat.isFile()) {
+                        next();
+                        return;
+                    }
+
+                    response.statusCode = 200;
+                    response.setHeader('Content-Type', getContentType(assetPath));
+                    createReadStream(assetPath).pipe(response);
+                } catch {
+                    next();
+                }
+            });
+        },
+        async closeBundle() {
+            if (!existsSync(manualAssetSourceRoot)) {
+                return;
+            }
+
+            await rm(manualBuildAssetRoot, { recursive: true, force: true });
+            await copyManualBuildAssets(manualAssetSourceRoot);
+        },
+    };
+}
+
+async function copyManualBuildAssets(root, currentDir = root) {
+    const entries = await readdir(currentDir, { withFileTypes: true });
+
+    for (const entry of entries) {
+        const sourcePath = resolve(currentDir, entry.name);
+
+        if (entry.isDirectory()) {
+            await copyManualBuildAssets(root, sourcePath);
+            continue;
+        }
+
+        if (!entry.isFile()) {
+            continue;
+        }
+
+        const relativeAssetPath = toPosixPath(relative(root, sourcePath));
+        const outputAssetPath = getManualAssetOutputPath(relativeAssetPath, sourcePath, { hash: true });
+        const buildAssetPath = resolve(manualBuildAssetRoot, outputAssetPath);
+
+        await mkdir(dirname(buildAssetPath), { recursive: true });
+        await copyFile(sourcePath, buildAssetPath);
+    }
+}
+
+function manualContentReloadPlugin() {
+    return contentReloadPlugin({
+        name: 'aholo-manual-content-reload',
+        root: manualContentRoot,
+        shouldReload: isManualMarkdown,
+        invalidate: invalidateManualModules,
+        notify: [sendFullReload],
+    });
+}
+
+function examplesContentReloadPlugin() {
+    return contentReloadPlugin({
+        name: 'aholo-examples-content-reload',
+        root: examplesContentRoot,
+        shouldReload: isExampleContent,
+        invalidate: invalidateExampleModules,
+        notify: [sendContentChanged, sendFullReload],
+    });
+}
+
+function egsCoreReloadPlugin() {
+    let rebuildTimer;
+    let rebuildRunning = false;
+    let rebuildQueued = false;
+
+    return {
+        name: 'aholo-egs-core-reload',
+        apply: 'serve',
+        configureServer(server) {
+            server.watcher.setMaxListeners(Math.max(server.watcher.getMaxListeners(), 20));
+            server.watcher.add(egsCoreWatchRoots.filter(root => existsSync(root)));
+
+            const scheduleRebuild = file => {
+                if (!isEgsCoreDevSource(file)) {
+                    return;
+                }
+
+                clearTimeout(rebuildTimer);
+                rebuildTimer = setTimeout(() => {
+                    rebuildTimer = undefined;
+                    void rebuildRendererFromEgs(server);
+                }, 250);
+            };
+
+            for (const eventName of contentReloadEvents) {
+                server.watcher.on(eventName, scheduleRebuild);
+            }
+        },
+    };
+
+    async function rebuildRendererFromEgs(server) {
+        if (rebuildRunning) {
+            rebuildQueued = true;
+            return;
+        }
+
+        rebuildRunning = true;
+
+        try {
+            do {
+                rebuildQueued = false;
+                console.log('[egs-dev] EGS source changed. Rebuilding renderer.');
+                await runWorkspaceScript('.renderer:build');
+            } while (rebuildQueued);
+
+            invalidateRendererModules(server);
+            sendFullReload(server);
+            console.log('[egs-dev] Renderer rebuild complete. Site reloaded.');
+        } catch (error) {
+            console.error('[egs-dev] Renderer rebuild failed. Fix the error and save again to retry.');
+            console.error(error);
+        } finally {
+            rebuildRunning = false;
+
+            if (rebuildQueued) {
+                void rebuildRendererFromEgs(server);
+            }
+        }
+    }
+}
+
+function contentReloadPlugin({ name, root, shouldReload, invalidate, notify }) {
+    return {
+        name,
+        configureServer(server) {
+            server.watcher.setMaxListeners(Math.max(server.watcher.getMaxListeners(), 20));
+            server.watcher.add(root);
+
+            const reload = file => {
+                if (!shouldReload(file)) {
+                    return;
+                }
+
+                invalidate(server);
+
+                for (const send of notify) {
+                    send(server);
+                }
+            };
+
+            for (const eventName of contentReloadEvents) {
+                server.watcher.on(eventName, reload);
+            }
+        },
+    };
+}
+
+function invalidateManualModules(server) {
+    invalidateModules(server, id => matchesRule(id, manualInvalidationRules));
+}
+
+function invalidateExampleModules(server) {
+    invalidateModules(server, id => matchesRule(id, examplesInvalidationRules));
+}
+
+function invalidateRendererModules(server) {
+    invalidateModules(server, id => matchesRule(id, rendererInvalidationRules));
+}
+
+function invalidateModules(server, shouldInvalidate) {
+    const invalidatedModules = new Set();
+    const timestamp = Date.now();
+
+    for (const moduleGraph of getModuleGraphs(server)) {
+        for (const moduleNode of getModuleNodes(moduleGraph)) {
+            const id = toPosixPath(moduleNode.id ?? moduleNode.url ?? '');
+
+            if (!id || !shouldInvalidate(id) || invalidatedModules.has(moduleNode)) {
+                continue;
+            }
+
+            moduleGraph.invalidateModule(moduleNode, undefined, timestamp, true);
+            invalidatedModules.add(moduleNode);
+        }
+    }
+}
+
+function getModuleGraphs(server) {
+    const moduleGraphs = [];
+    const environments = server.environments ? Object.values(server.environments) : [];
+
+    for (const environment of environments) {
+        if (environment?.moduleGraph && !moduleGraphs.includes(environment.moduleGraph)) {
+            moduleGraphs.push(environment.moduleGraph);
+        }
+    }
+
+    if (server.moduleGraph && !moduleGraphs.includes(server.moduleGraph)) {
+        moduleGraphs.push(server.moduleGraph);
+    }
+
+    return moduleGraphs;
+}
+
+function getModuleNodes(moduleGraph) {
+    if (moduleGraph.idToModuleMap) {
+        return moduleGraph.idToModuleMap.values();
+    }
+
+    if (moduleGraph.urlToModuleMap) {
+        return moduleGraph.urlToModuleMap.values();
+    }
+
+    return [];
+}
+
+function matchesRule(value, rule) {
+    const matchesInclude = rule.includes.some(pattern => value.includes(pattern));
+    const matchesSuffix = rule.endsWith.some(pattern => value.endsWith(pattern));
+
+    return matchesInclude || matchesSuffix;
+}
+
+function sendContentChanged(server) {
+    server.environments?.ssr?.hot?.send('astro:content-changed', {});
+}
+
+function sendFullReload(server) {
+    const payload = { type: 'full-reload', path: '*' };
+
+    if (server.environments?.client?.hot) {
+        server.environments.client.hot.send(payload);
+        return;
+    }
+
+    server.ws.send(payload);
+}
+
+function isManualMarkdown(file) {
+    const normalized = toPosixPath(file);
+
+    return normalized.includes('/src/content/manual/') && normalized.endsWith('.md');
+}
+
+function isExampleContent(file) {
+    const normalized = toPosixPath(file);
+
+    return normalized.includes('/src/content/examples/') && ['.json', '.ts'].includes(extname(normalized));
+}
+
+function isEgsCoreDevSource(file) {
+    if (!file) {
+        return false;
+    }
+
+    const normalized = toPosixPath(file);
+
+    if (
+        normalized.includes('/build/') ||
+        normalized.includes('/dist/') ||
+        normalized.includes('/node_modules/') ||
+        !egsCoreWatchRoots.some(root => isWithinRoot(root, file))
+    ) {
+        return false;
+    }
+
+    return (
+        normalized.endsWith('.ts') ||
+        normalized.endsWith('.tsx') ||
+        normalized.endsWith('/package.json') ||
+        normalized.endsWith('/tsconfig.json')
+    );
+}
+
+function runWorkspaceScript(scriptName) {
+    return new Promise((resolveRun, rejectRun) => {
+        const child = spawn(getPnpmCommand(), ['run', scriptName], {
+            cwd: workspaceRoot,
+            shell: process.platform === 'win32',
+            stdio: 'inherit',
+        });
+        let settled = false;
+
+        const finish = error => {
+            if (settled) {
+                return;
+            }
+
+            settled = true;
+
+            if (error) {
+                rejectRun(error);
+                return;
+            }
+
+            resolveRun();
+        };
+
+        child.on('error', finish);
+        child.on('close', (code, signal) => {
+            if (code === 0) {
+                finish();
+                return;
+            }
+
+            finish(new Error(`pnpm run ${scriptName} failed with ${signal ?? `exit code ${code}`}.`));
+        });
+    });
+}
+
+function getPnpmCommand() {
+    return process.platform === 'win32' ? 'pnpm.cmd' : 'pnpm';
+}
+
+function toPosixPath(value) {
+    return value.replace(/\\/g, '/');
+}
+
+function getManualAssetRequestPath(url) {
+    let pathname = new URL(url ?? '/', 'http://localhost').pathname;
+
+    if (pathname.startsWith(`${manualDevAssetPath}/`)) {
+        pathname = pathname.slice(manualDevAssetPath.length);
+    }
+
+    return decodeURIComponent(pathname).replace(/^\/+/, '') || undefined;
+}
+
+function isWithinRoot(root, filePath) {
+    const relativePath = relative(root, filePath);
+
+    return relativePath === '' || (!!relativePath && !relativePath.startsWith('..') && !isAbsolute(relativePath));
+}
+
+function getContentType(filePath) {
+    switch (extname(filePath).toLowerCase()) {
+        case '.gif':
+            return 'image/gif';
+        case '.jpg':
+        case '.jpeg':
+            return 'image/jpeg';
+        case '.png':
+            return 'image/png';
+        case '.svg':
+            return 'image/svg+xml';
+        case '.webp':
+            return 'image/webp';
+        default:
+            return 'application/octet-stream';
+    }
+}
diff --git a/website/package.json b/website/package.json
new file mode 100644
index 0000000..4855cc9
--- /dev/null
+++ b/website/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "@manycore/aholo-viewer-website",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    ".dev": "astro dev --host",
+    ".build": "astro build",
+    ".preview": "astro preview --host 127.0.0.1",
+    ".check": "astro check",
+    ".clean": "node scripts/clean.mjs"
+  },
+  "dependencies": {
+    "@astrojs/markdown-satteri": "^0.3.3",
+    "@manycore/aholo-viewer": "workspace:*",
+    "@tweakpane/plugin-essentials": "^0.2.1",
+    "astro": "^7.0.6",
+    "lz-string": "^1.5.0",
+    "monaco-editor": "^0.55.1",
+    "tslib": "^2.8.1",
+    "tweakpane": "^4.0.5",
+    "yaml": "^2.9.0"
+  },
+  "devDependencies": {
+    "@astrojs/check": "^0.9.9",
+    "@tweakpane/core": "^2.0.5",
+    "@types/node": "^22.20.0",
+    "typescript": "^6.0.3",
+    "vite-plugin-checker": "^0.14.4"
+  }
+}
diff --git a/website/public/aholo-logo.svg b/website/public/aholo-logo.svg
new file mode 100644
index 0000000..0d32236
--- /dev/null
+++ b/website/public/aholo-logo.svg
@@ -0,0 +1,65 @@
+
diff --git a/website/public/favicon.ico b/website/public/favicon.ico
new file mode 100644
index 0000000..a59a255
Binary files /dev/null and b/website/public/favicon.ico differ
diff --git a/website/public/home/feature-tools.svg b/website/public/home/feature-tools.svg
new file mode 100644
index 0000000..9568f1b
--- /dev/null
+++ b/website/public/home/feature-tools.svg
@@ -0,0 +1,257 @@
+
diff --git a/website/public/icons/example-edit-code.svg b/website/public/icons/example-edit-code.svg
new file mode 100644
index 0000000..47fccbb
--- /dev/null
+++ b/website/public/icons/example-edit-code.svg
@@ -0,0 +1,4 @@
+
diff --git a/website/scripts/clean.mjs b/website/scripts/clean.mjs
new file mode 100644
index 0000000..8b36e00
--- /dev/null
+++ b/website/scripts/clean.mjs
@@ -0,0 +1,37 @@
+import { rm } from 'node:fs/promises';
+import { dirname, isAbsolute, relative, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const packageRoot = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+const cleanTargets = ['dist', '.astro', '.generated', 'src/content/api'];
+const args = process.argv.slice(2);
+const allowedArgs = new Set(['--dry-run']);
+const unknownArgs = args.filter(arg => !allowedArgs.has(arg));
+const dryRun = args.includes('--dry-run');
+
+if (unknownArgs.length > 0) {
+    throw new Error(`Unsupported clean argument(s): ${unknownArgs.join(', ')}`);
+}
+
+function resolveCleanTarget(target) {
+    const targetPath = resolve(packageRoot, target);
+    const relativePath = relative(packageRoot, targetPath);
+
+    if (relativePath === '' || relativePath.startsWith('..') || isAbsolute(relativePath)) {
+        throw new Error(`Refusing to clean outside website package root: ${targetPath}`);
+    }
+
+    return targetPath;
+}
+
+for (const target of cleanTargets) {
+    const targetPath = resolveCleanTarget(target);
+
+    if (dryRun) {
+        console.log(`[clean] would remove ${target}`);
+        continue;
+    }
+
+    await rm(targetPath, { recursive: true, force: true });
+    console.log(`[clean] removed ${target}`);
+}
diff --git a/website/src/client/camera-control.ts b/website/src/client/camera-control.ts
new file mode 100644
index 0000000..a2a31c5
--- /dev/null
+++ b/website/src/client/camera-control.ts
@@ -0,0 +1,979 @@
+interface CameraControlVector3 {
+    x: number;
+    y: number;
+    z: number;
+}
+
+interface CameraControlEuler extends CameraControlVector3 {
+    order?: string;
+    set?: (x: number, y: number, z: number, order?: string) => unknown;
+}
+
+interface CameraControlQuaternion extends CameraControlVector3 {
+    w: number;
+}
+
+interface CameraControlMatrix4 {
+    _elements: Float32Array;
+}
+
+interface CameraControlCamera {
+    position: CameraControlVector3;
+    rotation: CameraControlEuler;
+    up?: CameraControlVector3;
+    quaternion?: CameraControlQuaternion;
+}
+
+interface CameraControlOptions {
+    enabled?: boolean;
+    keyboardEnabled?: boolean;
+    pointerEnabled?: boolean;
+    orbitEnabled?: boolean;
+    useOrbit?: boolean;
+    orbitCenter?: CameraControlVector3;
+    orbitMinDistance?: number;
+    moveSpeed?: number;
+    lookSpeed?: number;
+    wheelSpeed?: number;
+    panSpeed?: number;
+    rollSpeed?: number;
+    shiftMultiplier?: number;
+    ctrlMultiplier?: number;
+    capsMultiplier?: number;
+}
+
+interface CameraControlState {
+    position: CameraControlVector3;
+    rotation: CameraControlVector3;
+    moving: boolean;
+    rotating: boolean;
+    panning: boolean;
+    orbiting: boolean;
+    touching: boolean;
+    interacting: boolean;
+    speedMultiplier: number;
+    activePointers: number;
+    orbitCenter: CameraControlVector3;
+    orbitDistance: number;
+}
+
+type PointerMode = 'rotate' | 'pan' | 'orbit';
+
+interface PointerTrack {
+    pointerId: number;
+    pointerType: string;
+    button: number;
+    mode: PointerMode;
+    lastX: number;
+    lastY: number;
+    x: number;
+    y: number;
+}
+
+const DEFAULT_OPTIONS: Required = {
+    enabled: true,
+    keyboardEnabled: true,
+    pointerEnabled: true,
+    orbitEnabled: true,
+    useOrbit: false,
+    orbitCenter: { x: 0, y: 0, z: 0 },
+    orbitMinDistance: 0.01,
+    moveSpeed: 0.4,
+    lookSpeed: 0.004,
+    wheelSpeed: 0.006,
+    panSpeed: 0.006,
+    rollSpeed: 1,
+    ctrlMultiplier: 2,
+    shiftMultiplier: 10,
+    capsMultiplier: 20,
+};
+
+const KEYBOARD_CONTROL_KEYS = new Set([
+    'KeyW',
+    'KeyA',
+    'KeyS',
+    'KeyD',
+    'KeyQ',
+    'KeyE',
+    'KeyR',
+    'KeyF',
+    'ShiftLeft',
+    'ShiftRight',
+    'ControlLeft',
+    'ControlRight',
+    'AltLeft',
+    'AltRight',
+    'CapsLock',
+]);
+
+const MAX_PITCH = Math.PI / 2 - 0.001;
+const EPSILON = 1e-6;
+const DEFAULT_UP: CameraControlVector3 = { x: 0, y: 1, z: 0 };
+const DEFAULT_ORBIT_CENTER: CameraControlVector3 = { x: 0, y: 0, z: 0 };
+
+/**
+ * Lightweight free-flight camera controls for website and Playground preview surfaces.
+ */
+export class CameraControl {
+    enabled: boolean;
+    keyboardEnabled: boolean;
+    pointerEnabled: boolean;
+    orbitEnabled: boolean;
+    useOrbit: boolean;
+    orbitMinDistance: number;
+    moveSpeed: number;
+    lookSpeed: number;
+    wheelSpeed: number;
+    panSpeed: number;
+    rollSpeed: number;
+    shiftMultiplier: number;
+    ctrlMultiplier: number;
+    capsMultiplier: number;
+
+    readonly #camera: CameraControlCamera;
+    readonly #element: HTMLElement;
+    readonly #pointers = new Map();
+    readonly #keys = new Set();
+    readonly #orbitCenter = copyVector(DEFAULT_ORBIT_CENTER);
+    readonly #initialTabIndex: string | null;
+    readonly #initialTouchAction: string;
+    #lastTime = 0;
+    #wheelDelta = 0;
+    #capsLock = false;
+    #altKey = false;
+    #moving = false;
+    #rotating = false;
+    #panning = false;
+    #orbiting = false;
+    #disposed = false;
+
+    constructor(camera: CameraControlCamera, element: HTMLElement, options: CameraControlOptions = {}) {
+        this.#camera = camera;
+        this.#element = element;
+        this.#initialTabIndex = element.getAttribute('tabindex');
+        this.#initialTouchAction = element.style.touchAction;
+
+        const resolved = {
+            ...DEFAULT_OPTIONS,
+            ...options,
+        };
+
+        this.enabled = resolved.enabled;
+        this.keyboardEnabled = resolved.keyboardEnabled;
+        this.pointerEnabled = resolved.pointerEnabled;
+        this.orbitEnabled = resolved.orbitEnabled;
+        this.useOrbit = resolved.useOrbit;
+        this.orbitMinDistance = Math.max(EPSILON, resolved.orbitMinDistance);
+        this.setOrbitCenter(resolved.orbitCenter);
+        this.moveSpeed = resolved.moveSpeed;
+        this.lookSpeed = resolved.lookSpeed;
+        this.wheelSpeed = resolved.wheelSpeed;
+        this.panSpeed = resolved.panSpeed;
+        this.rollSpeed = resolved.rollSpeed;
+        this.shiftMultiplier = resolved.shiftMultiplier;
+        this.ctrlMultiplier = resolved.ctrlMultiplier;
+        this.capsMultiplier = resolved.capsMultiplier;
+
+        if (this.#initialTabIndex === null) {
+            element.tabIndex = 0;
+        }
+
+        element.style.touchAction = 'none';
+        element.addEventListener('pointerdown', this.#onPointerDown);
+        element.addEventListener('pointermove', this.#onPointerMove);
+        element.addEventListener('pointerup', this.#onPointerUp);
+        element.addEventListener('pointercancel', this.#onPointerUp);
+        element.addEventListener('contextmenu', this.#onContextMenu);
+        element.addEventListener('wheel', this.#onWheel, { passive: false });
+        element.addEventListener('keydown', this.#onKeyDown);
+        element.addEventListener('keyup', this.#onKeyUp);
+        window.addEventListener('keyup', this.#onKeyUp);
+        window.addEventListener('blur', this.#onBlur);
+    }
+
+    setOptions(options: CameraControlOptions) {
+        const { orbitCenter, ...rest } = options;
+
+        if (orbitCenter !== undefined) {
+            this.setOrbitCenter(orbitCenter);
+        }
+
+        for (const [key, value] of Object.entries(rest)) {
+            if (value !== undefined) {
+                if (key === 'orbitMinDistance' && typeof value === 'number') {
+                    this.orbitMinDistance = Math.max(EPSILON, value);
+                } else {
+                    (this as unknown as Record)[key] = value;
+                }
+            }
+        }
+    }
+
+    setOrbitCenter(center: CameraControlVector3) {
+        this.#orbitCenter.x = center.x;
+        this.#orbitCenter.y = center.y;
+        this.#orbitCenter.z = center.z;
+    }
+
+    stop() {
+        for (const pointer of this.#pointers.values()) {
+            if (this.#element.hasPointerCapture(pointer.pointerId)) {
+                this.#element.releasePointerCapture(pointer.pointerId);
+            }
+        }
+
+        this.#keys.clear();
+        this.#pointers.clear();
+        this.#wheelDelta = 0;
+        this.#altKey = false;
+        this.#moving = false;
+        this.#rotating = false;
+        this.#panning = false;
+        this.#orbiting = false;
+    }
+
+    update(deltaSeconds?: number) {
+        if (this.#disposed || !this.enabled) {
+            return false;
+        }
+
+        const now = performance.now();
+        const delta = deltaSeconds ?? Math.min((now - (this.#lastTime || now)) / 1000, 0.1);
+        this.#lastTime = now;
+
+        const pointerChanged = this.pointerEnabled ? this.#updatePointers() : false;
+        const keyboardChanged = this.keyboardEnabled ? this.#updateKeyboard(delta) : false;
+        const wheelChanged = this.pointerEnabled ? this.#updateWheel() : false;
+
+        return pointerChanged || keyboardChanged || wheelChanged;
+    }
+
+    getState(): CameraControlState {
+        const position = this.#camera.position;
+        const rotation = this.#camera.rotation;
+        const touching = Array.from(this.#pointers.values()).some(pointer => pointer.pointerType === 'touch');
+        const interacting =
+            this.#moving || this.#rotating || this.#panning || this.#orbiting || this.#pointers.size > 0;
+
+        return {
+            position: { x: position.x, y: position.y, z: position.z },
+            rotation: { x: rotation.x, y: rotation.y, z: rotation.z },
+            moving: this.#moving,
+            rotating: this.#rotating,
+            panning: this.#panning,
+            orbiting: this.#orbiting,
+            touching,
+            interacting,
+            speedMultiplier: this.#getSpeedMultiplier(),
+            activePointers: this.#pointers.size,
+            orbitCenter: copyVector(this.#orbitCenter),
+            orbitDistance: this.#getOrbitDistance(),
+        };
+    }
+
+    dispose() {
+        if (this.#disposed) {
+            return;
+        }
+
+        this.stop();
+        this.#disposed = true;
+        this.#element.removeEventListener('pointerdown', this.#onPointerDown);
+        this.#element.removeEventListener('pointermove', this.#onPointerMove);
+        this.#element.removeEventListener('pointerup', this.#onPointerUp);
+        this.#element.removeEventListener('pointercancel', this.#onPointerUp);
+        this.#element.removeEventListener('contextmenu', this.#onContextMenu);
+        this.#element.removeEventListener('wheel', this.#onWheel);
+        this.#element.removeEventListener('keydown', this.#onKeyDown);
+        this.#element.removeEventListener('keyup', this.#onKeyUp);
+        window.removeEventListener('keyup', this.#onKeyUp);
+        window.removeEventListener('blur', this.#onBlur);
+        this.#element.style.touchAction = this.#initialTouchAction;
+
+        if (this.#initialTabIndex === null) {
+            this.#element.removeAttribute('tabindex');
+        } else {
+            this.#element.setAttribute('tabindex', this.#initialTabIndex);
+        }
+    }
+
+    #onPointerDown = (event: PointerEvent) => {
+        if (!this.enabled || !this.pointerEnabled) {
+            return;
+        }
+
+        this.#element.focus({ preventScroll: true });
+        this.#altKey = event.altKey;
+        this.#pointers.set(event.pointerId, {
+            pointerId: event.pointerId,
+            pointerType: event.pointerType,
+            button: event.button,
+            mode: this.#getPointerMode(event.pointerType, event.button),
+            lastX: event.clientX,
+            lastY: event.clientY,
+            x: event.clientX,
+            y: event.clientY,
+        });
+        this.#element.setPointerCapture(event.pointerId);
+        event.preventDefault();
+    };
+
+    #onPointerMove = (event: PointerEvent) => {
+        const pointer = this.#pointers.get(event.pointerId);
+
+        if (!pointer) {
+            return;
+        }
+
+        this.#altKey = event.altKey;
+        pointer.x = event.clientX;
+        pointer.y = event.clientY;
+        event.preventDefault();
+    };
+
+    #onPointerUp = (event: PointerEvent) => {
+        if (this.#pointers.has(event.pointerId)) {
+            this.#pointers.delete(event.pointerId);
+
+            if (this.#element.hasPointerCapture(event.pointerId)) {
+                this.#element.releasePointerCapture(event.pointerId);
+            }
+
+            if (this.#pointers.size === 0) {
+                this.#rotating = false;
+                this.#panning = false;
+                this.#orbiting = false;
+            }
+        }
+    };
+
+    #onContextMenu = (event: MouseEvent) => {
+        event.preventDefault();
+    };
+
+    #onWheel = (event: WheelEvent) => {
+        if (!this.enabled || !this.pointerEnabled) {
+            return;
+        }
+
+        this.#wheelDelta += event.deltaY;
+        event.preventDefault();
+    };
+
+    #onKeyDown = (event: KeyboardEvent) => {
+        if (!this.enabled || !this.keyboardEnabled || !KEYBOARD_CONTROL_KEYS.has(event.code)) {
+            return;
+        }
+
+        this.#keys.add(event.code);
+        this.#capsLock = event.getModifierState('CapsLock');
+        this.#altKey = event.altKey || event.code === 'AltLeft' || event.code === 'AltRight';
+        event.preventDefault();
+    };
+
+    #onKeyUp = (event: KeyboardEvent) => {
+        this.#keys.delete(event.code);
+        this.#capsLock = event.getModifierState('CapsLock');
+        this.#altKey = event.altKey;
+    };
+
+    #onBlur = () => {
+        this.stop();
+    };
+
+    #updatePointers() {
+        const pointers = Array.from(this.#pointers.values());
+        this.#rotating = false;
+        this.#panning = false;
+        this.#orbiting = false;
+
+        if (pointers.length === 0) {
+            return false;
+        }
+
+        let updated = false;
+
+        if (pointers.length >= 2) {
+            const first = pointers[0];
+            const second = pointers[1];
+            const lastMidX = (first.lastX + second.lastX) * 0.5;
+            const lastMidY = (first.lastY + second.lastY) * 0.5;
+            const midX = (first.x + second.x) * 0.5;
+            const midY = (first.y + second.y) * 0.5;
+            const lastDistance = distance(first.lastX, first.lastY, second.lastX, second.lastY);
+            const currentDistance = distance(first.x, first.y, second.x, second.y);
+            const panX = midX - lastMidX;
+            const panY = midY - lastMidY;
+            const pinch = currentDistance - lastDistance;
+
+            updated = this.#panByPixels(panX, panY) || updated;
+            updated = this.#moveAlongView(pinch * this.wheelSpeed) || updated;
+            this.#panning = Math.abs(panX) + Math.abs(panY) + Math.abs(pinch) > 0.001;
+        } else {
+            const pointer = pointers[0];
+            const mode = this.#getPointerMode(pointer.pointerType, pointer.button);
+
+            if (pointer.mode !== mode) {
+                pointer.mode = mode;
+                pointer.lastX = pointer.x;
+                pointer.lastY = pointer.y;
+            }
+
+            const deltaX = pointer.x - pointer.lastX;
+            const deltaY = pointer.y - pointer.lastY;
+
+            if (mode === 'pan') {
+                updated = this.#panByPixels(deltaX, deltaY);
+                this.#panning = updated;
+            } else if (mode === 'orbit') {
+                updated = this.#orbitByPixels(deltaX, deltaY);
+                this.#orbiting = true;
+            } else {
+                updated = this.#rotateByPixels(deltaX, deltaY);
+                this.#rotating = updated;
+            }
+        }
+
+        for (const pointer of pointers) {
+            pointer.lastX = pointer.x;
+            pointer.lastY = pointer.y;
+        }
+
+        return updated;
+    }
+
+    #updateKeyboard(deltaSeconds: number) {
+        const forwardInput = numberFromKey(this.#keys, 'KeyW') - numberFromKey(this.#keys, 'KeyS');
+        const strafeInput = numberFromKey(this.#keys, 'KeyD') - numberFromKey(this.#keys, 'KeyA');
+        const verticalInput = numberFromKey(this.#keys, 'KeyQ') - numberFromKey(this.#keys, 'KeyE');
+        const rollInput = numberFromKey(this.#keys, 'KeyR') - numberFromKey(this.#keys, 'KeyF');
+        const multiplier = this.#getSpeedMultiplier();
+        let updated = false;
+
+        const movementLength = Math.hypot(forwardInput, strafeInput, verticalInput);
+        this.#moving = movementLength > 0;
+
+        if (movementLength > 0) {
+            const scale = (this.moveSpeed * multiplier * deltaSeconds) / Math.max(1, movementLength);
+            const basis = getCameraBasis(this.#camera);
+            const position = this.#camera.position;
+
+            position.x +=
+                (basis.forward.x * forwardInput + basis.right.x * strafeInput + basis.up.x * verticalInput) * scale;
+            position.y +=
+                (basis.forward.y * forwardInput + basis.right.y * strafeInput + basis.up.y * verticalInput) * scale;
+            position.z +=
+                (basis.forward.z * forwardInput + basis.right.z * strafeInput + basis.up.z * verticalInput) * scale;
+            updated = true;
+        }
+
+        if (rollInput !== 0) {
+            rollCamera(this.#camera, rollInput * this.rollSpeed * deltaSeconds);
+            this.#rotating = true;
+            updated = true;
+        } else if (this.#pointers.size === 0) {
+            this.#rotating = false;
+        }
+
+        return updated;
+    }
+
+    #updateWheel() {
+        if (Math.abs(this.#wheelDelta) < 0.001) {
+            return false;
+        }
+
+        const delta = -this.#wheelDelta * this.wheelSpeed;
+        this.#wheelDelta = 0;
+        return this.#moveAlongView(delta);
+    }
+
+    #rotateByPixels(deltaX: number, deltaY: number) {
+        if (Math.abs(deltaX) + Math.abs(deltaY) < 0.001) {
+            return false;
+        }
+
+        rotateCamera(this.#camera, -deltaX * this.lookSpeed, -deltaY * this.lookSpeed);
+        return true;
+    }
+
+    #orbitByPixels(deltaX: number, deltaY: number) {
+        if (Math.abs(deltaX) + Math.abs(deltaY) < 0.001) {
+            return false;
+        }
+
+        return orbitCamera(
+            this.#camera,
+            this.#orbitCenter,
+            -deltaX * this.lookSpeed,
+            -deltaY * this.lookSpeed,
+            this.orbitMinDistance,
+        );
+    }
+
+    #panByPixels(deltaX: number, deltaY: number) {
+        if (Math.abs(deltaX) + Math.abs(deltaY) < 0.001) {
+            return false;
+        }
+
+        const basis = getCameraBasis(this.#camera);
+        const position = this.#camera.position;
+        const x = deltaX * this.panSpeed;
+        const y = -deltaY * this.panSpeed;
+
+        position.x += basis.right.x * x + basis.viewUp.x * y;
+        position.y += basis.right.y * x + basis.viewUp.y * y;
+        position.z += basis.right.z * x + basis.viewUp.z * y;
+        return true;
+    }
+
+    #moveAlongView(distanceValue: number) {
+        if (Math.abs(distanceValue) < 0.001) {
+            return false;
+        }
+
+        const forward = getCameraBasis(this.#camera).forward;
+        const position = this.#camera.position;
+        position.x += forward.x * distanceValue;
+        position.y += forward.y * distanceValue;
+        position.z += forward.z * distanceValue;
+        return true;
+    }
+
+    #getSpeedMultiplier() {
+        let multiplier = 1;
+
+        if (this.#keys.has('ShiftLeft') || this.#keys.has('ShiftRight')) {
+            multiplier *= this.shiftMultiplier;
+        }
+
+        if (this.#keys.has('ControlLeft') || this.#keys.has('ControlRight')) {
+            multiplier *= this.ctrlMultiplier;
+        }
+
+        if (this.#capsLock || this.#keys.has('CapsLock')) {
+            multiplier *= this.capsMultiplier;
+        }
+
+        return multiplier;
+    }
+
+    #getPointerMode(pointerType: string, button: number): PointerMode {
+        if (pointerType === 'mouse') {
+            if (button === 1 || button === 2) {
+                return 'pan';
+            }
+
+            if (button === 0 && this.orbitEnabled && (this.useOrbit || this.#isOrbitModifierActive())) {
+                return 'orbit';
+            }
+        }
+
+        return 'rotate';
+    }
+
+    #isOrbitModifierActive() {
+        return this.#altKey || this.#keys.has('AltLeft') || this.#keys.has('AltRight');
+    }
+
+    #getOrbitDistance() {
+        return lengthVector(subtractVectors(this.#camera.position, this.#orbitCenter));
+    }
+}
+
+function rotateCamera(camera: CameraControlCamera, yawDelta: number, pitchDelta: number) {
+    const basis = getCameraBasis(camera);
+    const orientation = getCameraOrientationBasis(camera);
+    const rollAngle = getForwardAxisRoll(orientation.forward, orientation.up, orientation.viewUp);
+    const currentPitch = Math.asin(clamp(dotVector(basis.forward, basis.up), -1, 1));
+    const nextPitch = clamp(currentPitch + pitchDelta, -MAX_PITCH, MAX_PITCH);
+    const horizontalForward =
+        normalizeVector(projectOnPlane(basis.forward, basis.up)) ?? getPerpendicularUnit(basis.up);
+    const yawedForward = rotateVectorAroundAxis(horizontalForward, basis.up, yawDelta);
+    const forward = normalizeVector(
+        addVectors(multiplyVector(yawedForward, Math.cos(nextPitch)), multiplyVector(basis.up, Math.sin(nextPitch))),
+    );
+
+    if (!forward) {
+        return;
+    }
+
+    setCameraLookBasis(camera, forward, getViewUpWithRoll(forward, basis.up, rollAngle));
+}
+
+function orbitCamera(
+    camera: CameraControlCamera,
+    center: CameraControlVector3,
+    yawDelta: number,
+    pitchDelta: number,
+    minDistance: number,
+) {
+    const basis = getCameraBasis(camera);
+    const orientation = getCameraOrientationBasis(camera);
+    const rollAngle = getForwardAxisRoll(orientation.forward, orientation.up, orientation.viewUp);
+    const safeMinDistance = Math.max(EPSILON, minDistance);
+    let distanceValue = lengthVector(subtractVectors(camera.position, center));
+    let forward = normalizeVector(subtractVectors(center, camera.position)) ??
+        normalizeVector(orientation.forward) ?? { x: 0, y: 0, z: -1 };
+
+    if (distanceValue < safeMinDistance) {
+        distanceValue = safeMinDistance;
+        forward = normalizeVector(orientation.forward) ?? forward;
+    }
+
+    const currentPitch = Math.asin(clamp(dotVector(forward, basis.up), -1, 1));
+    const nextPitch = clamp(currentPitch + pitchDelta, -MAX_PITCH, MAX_PITCH);
+    const horizontalForward = normalizeVector(projectOnPlane(forward, basis.up)) ?? getPerpendicularUnit(basis.up);
+    const yawedForward = rotateVectorAroundAxis(horizontalForward, basis.up, yawDelta);
+    const nextForward = normalizeVector(
+        addVectors(multiplyVector(yawedForward, Math.cos(nextPitch)), multiplyVector(basis.up, Math.sin(nextPitch))),
+    );
+
+    if (!nextForward) {
+        return false;
+    }
+
+    camera.position.x = center.x - nextForward.x * distanceValue;
+    camera.position.y = center.y - nextForward.y * distanceValue;
+    camera.position.z = center.z - nextForward.z * distanceValue;
+    setCameraLookBasis(camera, nextForward, getViewUpWithRoll(nextForward, basis.up, rollAngle));
+    return true;
+}
+
+function rollCamera(camera: CameraControlCamera, rollDelta: number) {
+    const basis = getCameraOrientationBasis(camera);
+    const viewUp = normalizeVector(rotateVectorAroundAxis(basis.viewUp, basis.forward, -rollDelta));
+
+    if (!viewUp) {
+        return;
+    }
+
+    setCameraLookBasis(camera, basis.forward, viewUp);
+}
+
+function getCameraBasis(camera: CameraControlCamera) {
+    const orientation = getCameraOrientationBasis(camera);
+    const right = normalizeVector(crossVectors(orientation.forward, orientation.up)) ?? orientation.right;
+    const viewUp = normalizeVector(crossVectors(right, orientation.forward)) ?? orientation.viewUp;
+
+    return {
+        forward: orientation.forward,
+        right,
+        up: orientation.up,
+        viewUp,
+    };
+}
+
+function getCameraOrientationBasis(camera: CameraControlCamera) {
+    const up = getCameraUp(camera);
+    const matrix = getCameraRotationMatrix(camera);
+    const elements = matrix._elements;
+    const forward = normalizeVector({
+        x: -elements[8],
+        y: -elements[9],
+        z: -elements[10],
+    }) ?? { x: 0, y: 0, z: -1 };
+    const matrixRight =
+        normalizeVector({
+            x: elements[0],
+            y: elements[1],
+            z: elements[2],
+        }) ?? getPerpendicularUnit(up);
+    const viewUp =
+        normalizeVector({
+            x: elements[4],
+            y: elements[5],
+            z: elements[6],
+        }) ??
+        normalizeVector(crossVectors(matrixRight, forward)) ??
+        up;
+
+    return {
+        forward,
+        right: matrixRight,
+        up,
+        viewUp,
+    };
+}
+
+function getForwardAxisRoll(forward: CameraControlVector3, up: CameraControlVector3, viewUp: CameraControlVector3) {
+    const levelViewUp = getViewUpWithRoll(forward, up, 0);
+    return angleAroundAxis(levelViewUp, viewUp, forward);
+}
+
+function getViewUpWithRoll(forward: CameraControlVector3, up: CameraControlVector3, rollAngle: number) {
+    const right = normalizeVector(crossVectors(forward, up)) ?? getPerpendicularUnit(forward);
+    const viewUp = normalizeVector(crossVectors(right, forward)) ?? up;
+    return normalizeVector(rotateVectorAroundAxis(viewUp, forward, rollAngle)) ?? viewUp;
+}
+
+function setCameraLookBasis(camera: CameraControlCamera, forward: CameraControlVector3, up: CameraControlVector3) {
+    const right = normalizeVector(crossVectors(forward, up)) ?? getPerpendicularUnit(up);
+    const viewUp = normalizeVector(crossVectors(right, forward)) ?? up;
+    const back = multiplyVector(forward, -1);
+    const matrix = makeBasisMatrix(right, viewUp, back);
+    const rotation = camera.rotation;
+    const matrixRotation = rotation as CameraControlEuler & {
+        setFromRotationMatrix?: (matrix: CameraControlMatrix4, order?: string) => unknown;
+    };
+
+    if (typeof matrixRotation.setFromRotationMatrix === 'function') {
+        matrixRotation.setFromRotationMatrix(matrix, rotation.order);
+        return;
+    }
+
+    const euler = getEulerFromRotationMatrix(matrix, rotation.order ?? 'XYZ');
+
+    if (typeof rotation.set === 'function') {
+        rotation.set(euler.x, euler.y, euler.z, euler.order);
+    } else {
+        rotation.x = euler.x;
+        rotation.y = euler.y;
+        rotation.z = euler.z;
+    }
+}
+
+function getCameraUp(camera: CameraControlCamera) {
+    return normalizeVector(camera.up ?? DEFAULT_UP) ?? DEFAULT_UP;
+}
+
+function getCameraRotationMatrix(camera: CameraControlCamera) {
+    if (camera.quaternion) {
+        return makeRotationMatrixFromQuaternion(camera.quaternion);
+    }
+
+    return makeRotationMatrixFromEuler(camera.rotation);
+}
+
+function makeRotationMatrixFromQuaternion(quaternion: CameraControlQuaternion): CameraControlMatrix4 {
+    const { x, y, z, w } = quaternion;
+    const x2 = x + x;
+    const y2 = y + y;
+    const z2 = z + z;
+    const xx = x * x2;
+    const xy = x * y2;
+    const xz = x * z2;
+    const yy = y * y2;
+    const yz = y * z2;
+    const zz = z * z2;
+    const wx = w * x2;
+    const wy = w * y2;
+    const wz = w * z2;
+
+    return makeMatrix([
+        1 - (yy + zz),
+        xy + wz,
+        xz - wy,
+        0,
+        xy - wz,
+        1 - (xx + zz),
+        yz + wx,
+        0,
+        xz + wy,
+        yz - wx,
+        1 - (xx + yy),
+        0,
+        0,
+        0,
+        0,
+        1,
+    ]);
+}
+
+function makeRotationMatrixFromEuler(rotation: CameraControlEuler): CameraControlMatrix4 {
+    const x = rotation.x;
+    const y = rotation.y;
+    const z = rotation.z;
+    const a = Math.cos(x);
+    const b = Math.sin(x);
+    const c = Math.cos(y);
+    const d = Math.sin(y);
+    const e = Math.cos(z);
+    const f = Math.sin(z);
+    const ae = a * e;
+    const af = a * f;
+    const be = b * e;
+    const bf = b * f;
+
+    return makeMatrix([
+        c * e,
+        af + be * d,
+        bf - ae * d,
+        0,
+        -c * f,
+        ae - bf * d,
+        be + af * d,
+        0,
+        d,
+        -b * c,
+        a * c,
+        0,
+        0,
+        0,
+        0,
+        1,
+    ]);
+}
+
+function makeBasisMatrix(
+    xAxis: CameraControlVector3,
+    yAxis: CameraControlVector3,
+    zAxis: CameraControlVector3,
+): CameraControlMatrix4 {
+    return makeMatrix([
+        xAxis.x,
+        xAxis.y,
+        xAxis.z,
+        0,
+        yAxis.x,
+        yAxis.y,
+        yAxis.z,
+        0,
+        zAxis.x,
+        zAxis.y,
+        zAxis.z,
+        0,
+        0,
+        0,
+        0,
+        1,
+    ]);
+}
+
+function makeMatrix(elements: number[]): CameraControlMatrix4 {
+    return {
+        _elements: Float32Array.from(elements),
+    };
+}
+
+function getEulerFromRotationMatrix(matrix: CameraControlMatrix4, order: string) {
+    const te = matrix._elements;
+    const m11 = te[0];
+    const m12 = te[4];
+    const m13 = te[8];
+    const m23 = te[9];
+    const m33 = te[10];
+    const euler = {
+        x: 0,
+        y: Math.asin(clamp(m13, -1, 1)),
+        z: 0,
+        order,
+    };
+
+    if (Math.abs(m13) < 0.99999) {
+        euler.x = Math.atan2(-m23, m33);
+        euler.z = Math.atan2(-m12, m11);
+    } else {
+        const m22 = te[5];
+        const m32 = te[6];
+        euler.x = Math.atan2(m32, m22);
+    }
+
+    return euler;
+}
+
+function projectOnPlane(vector: CameraControlVector3, normal: CameraControlVector3) {
+    return subtractVectors(vector, multiplyVector(normal, dotVector(vector, normal)));
+}
+
+function angleAroundAxis(from: CameraControlVector3, to: CameraControlVector3, axis: CameraControlVector3) {
+    const projectedFrom = normalizeVector(projectOnPlane(from, axis));
+    const projectedTo = normalizeVector(projectOnPlane(to, axis));
+
+    if (!projectedFrom || !projectedTo) {
+        return 0;
+    }
+
+    return Math.atan2(dotVector(crossVectors(projectedFrom, projectedTo), axis), dotVector(projectedFrom, projectedTo));
+}
+
+function rotateVectorAroundAxis(vector: CameraControlVector3, axis: CameraControlVector3, angle: number) {
+    const cos = Math.cos(angle);
+    const sin = Math.sin(angle);
+    const cross = crossVectors(axis, vector);
+    const axisScale = dotVector(axis, vector) * (1 - cos);
+
+    return addVectors(
+        addVectors(multiplyVector(vector, cos), multiplyVector(cross, sin)),
+        multiplyVector(axis, axisScale),
+    );
+}
+
+function getPerpendicularUnit(axis: CameraControlVector3) {
+    const helper = Math.abs(axis.y) < 0.9 ? { x: 0, y: 1, z: 0 } : { x: 1, y: 0, z: 0 };
+    return normalizeVector(crossVectors(axis, helper)) ?? { x: 1, y: 0, z: 0 };
+}
+
+function addVectors(a: CameraControlVector3, b: CameraControlVector3) {
+    return {
+        x: a.x + b.x,
+        y: a.y + b.y,
+        z: a.z + b.z,
+    };
+}
+
+function subtractVectors(a: CameraControlVector3, b: CameraControlVector3) {
+    return {
+        x: a.x - b.x,
+        y: a.y - b.y,
+        z: a.z - b.z,
+    };
+}
+
+function multiplyVector(vector: CameraControlVector3, scale: number) {
+    return {
+        x: vector.x * scale,
+        y: vector.y * scale,
+        z: vector.z * scale,
+    };
+}
+
+function copyVector(vector: CameraControlVector3) {
+    return {
+        x: vector.x,
+        y: vector.y,
+        z: vector.z,
+    };
+}
+
+function lengthVector(vector: CameraControlVector3) {
+    return Math.hypot(vector.x, vector.y, vector.z);
+}
+
+function dotVector(a: CameraControlVector3, b: CameraControlVector3) {
+    return a.x * b.x + a.y * b.y + a.z * b.z;
+}
+
+function crossVectors(a: CameraControlVector3, b: CameraControlVector3) {
+    return {
+        x: a.y * b.z - a.z * b.y,
+        y: a.z * b.x - a.x * b.z,
+        z: a.x * b.y - a.y * b.x,
+    };
+}
+
+function normalizeVector(vector: CameraControlVector3) {
+    const length = Math.hypot(vector.x, vector.y, vector.z);
+
+    if (length < EPSILON) {
+        return undefined;
+    }
+
+    return {
+        x: vector.x / length,
+        y: vector.y / length,
+        z: vector.z / length,
+    };
+}
+
+function numberFromKey(keys: Set, code: string) {
+    return keys.has(code) ? 1 : 0;
+}
+
+function distance(x1: number, y1: number, x2: number, y2: number) {
+    return Math.hypot(x2 - x1, y2 - y1);
+}
+
+function clamp(value: number, minimum: number, maximum: number) {
+    return Math.min(Math.max(value, minimum), maximum);
+}
diff --git a/website/src/client/docs.ts b/website/src/client/docs.ts
new file mode 100644
index 0000000..5183cfd
--- /dev/null
+++ b/website/src/client/docs.ts
@@ -0,0 +1,110 @@
+interface DocsCodeToolsConfig {
+    copyLabel: string;
+    copiedLabel: string;
+    failedLabel: string;
+}
+
+const copyTargetsSelector = '.markdown-body pre, .typedoc-html pre';
+const resetTimers = new WeakMap();
+
+export function mountDocsCodeTools(config: DocsCodeToolsConfig) {
+    const targets = Array.from(document.querySelectorAll(copyTargetsSelector));
+
+    for (const target of targets) {
+        if (target.closest('[data-code-block-copy]') || !getCodeText(target).trim()) {
+            continue;
+        }
+
+        const shell = document.createElement('div');
+        shell.className = 'code-block-shell';
+        shell.dataset.codeBlockCopy = '';
+
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.className = 'code-copy-button';
+        button.dataset.copyState = 'idle';
+        setButtonState(button, config.copyLabel, 'idle');
+        button.addEventListener('click', () => {
+            void copyCode(target, button, config);
+        });
+
+        target.before(shell);
+        shell.append(target, button);
+    }
+}
+
+async function copyCode(target: HTMLElement, button: HTMLButtonElement, config: DocsCodeToolsConfig) {
+    const text = getCodeText(target);
+
+    try {
+        await writeClipboard(text);
+        setButtonState(button, config.copiedLabel, 'copied');
+        scheduleReset(button, config.copyLabel);
+    } catch {
+        setButtonState(button, config.failedLabel, 'failed');
+        scheduleReset(button, config.copyLabel);
+    }
+}
+
+function getCodeText(target: HTMLElement) {
+    return target.querySelector('code')?.textContent ?? target.textContent ?? '';
+}
+
+async function writeClipboard(text: string) {
+    if (navigator.clipboard?.writeText) {
+        try {
+            await navigator.clipboard.writeText(text);
+            return;
+        } catch {
+            // Fall back for browsers that expose Clipboard API but deny this call.
+        }
+    }
+
+    const textarea = document.createElement('textarea');
+    const activeElement = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+
+    textarea.value = text;
+    textarea.setAttribute('readonly', '');
+    textarea.style.position = 'fixed';
+    textarea.style.top = '-999px';
+    textarea.style.left = '-999px';
+    textarea.style.width = '1px';
+    textarea.style.height = '1px';
+    textarea.style.opacity = '0';
+    document.body.append(textarea);
+    textarea.focus({ preventScroll: true });
+    textarea.select();
+    textarea.setSelectionRange(0, text.length);
+
+    const clipboardFallback = document as unknown as { execCommand(commandId: string): boolean };
+    const copied = clipboardFallback.execCommand('copy');
+    textarea.remove();
+    activeElement?.focus({ preventScroll: true });
+
+    if (!copied) {
+        throw new Error('Copy failed');
+    }
+}
+
+function scheduleReset(button: HTMLButtonElement, copyLabel: string) {
+    const existingTimer = resetTimers.get(button);
+
+    if (existingTimer !== undefined) {
+        window.clearTimeout(existingTimer);
+    }
+
+    resetTimers.set(
+        button,
+        window.setTimeout(() => {
+            setButtonState(button, copyLabel, 'idle');
+            resetTimers.delete(button);
+        }, 1600),
+    );
+}
+
+function setButtonState(button: HTMLButtonElement, label: string, state: string) {
+    button.textContent = label;
+    button.title = label;
+    button.setAttribute('aria-label', label);
+    button.dataset.copyState = state;
+}
diff --git a/website/src/client/examples.ts b/website/src/client/examples.ts
new file mode 100644
index 0000000..15000ae
--- /dev/null
+++ b/website/src/client/examples.ts
@@ -0,0 +1,284 @@
+import { createRenderSession } from './render-runtime.js';
+import { mountSplitPane } from './split-pane.js';
+import { WORKSPACE_FULLSCREEN_CHANGE_EVENT, mountWorkspaceFullscreenMode } from './workspace-fullscreen.js';
+
+interface PreviewEmbedConfig {
+    accent: string;
+    configLabel: string;
+    code: string;
+    errorLabel: string;
+    loadingLabel: string;
+    renderer: {
+        antialiasing: boolean;
+        pixelRatio?: number;
+    };
+}
+
+export function mountAllPreviewEmbeds(root: ParentNode = document) {
+    for (const previewRoot of root.querySelectorAll('[data-example-preview]')) {
+        mountPreviewEmbed(previewRoot);
+    }
+}
+
+function mountPreviewEmbed(root: HTMLElement) {
+    if (root.dataset.mounted === 'true') {
+        return;
+    }
+
+    root.dataset.mounted = 'true';
+
+    const canvas = root.querySelector('[data-example-preview-canvas]');
+    const configPanel = root.querySelector('[data-example-config-panel]');
+    const configElement = root.querySelector('[data-example-preview-config]');
+    const status = root.querySelector('[data-example-preview-status]');
+
+    if (!canvas || !configElement?.textContent) {
+        return;
+    }
+
+    const previewCanvas = canvas;
+    const config = JSON.parse(configElement.textContent) as PreviewEmbedConfig;
+    let renderSession: Awaited> | undefined;
+    let renderAbortController: AbortController | undefined;
+    let renderVersion = 0;
+    let resizeTimer: number | undefined;
+    let disposed = false;
+
+    runEmbedSession();
+
+    const resizeObserver = new ResizeObserver(() => {
+        scheduleSessionResize();
+    });
+    resizeObserver.observe(root);
+
+    window.addEventListener(WORKSPACE_FULLSCREEN_CHANGE_EVENT, scheduleSessionResize);
+    window.addEventListener('beforeunload', dispose, { once: true });
+    document.addEventListener('astro:before-swap', dispose, { once: true });
+
+    function scheduleSessionResize() {
+        window.clearTimeout(resizeTimer);
+        resizeTimer = window.setTimeout(() => {
+            renderSession?.resize();
+        }, 120);
+    }
+
+    async function runEmbedSession() {
+        if (disposed) {
+            return;
+        }
+
+        const version = renderVersion + 1;
+        renderVersion = version;
+        renderAbortController?.abort();
+        renderAbortController = new AbortController();
+        renderSession?.dispose();
+        renderSession = undefined;
+        setPreviewState('loading', config.loadingLabel);
+
+        try {
+            const session = await createRenderSession(previewCanvas, config.code, config.accent, {
+                configPanel: configPanel
+                    ? {
+                          container: configPanel,
+                          title: config.configLabel,
+                      }
+                    : undefined,
+                signal: renderAbortController.signal,
+                renderer: config.renderer,
+                onStatus(nextStatus) {
+                    if (disposed || version !== renderVersion) {
+                        return;
+                    }
+
+                    if (nextStatus.state === 'loading') {
+                        setPreviewState('loading', nextStatus.label ?? config.loadingLabel);
+                    } else {
+                        setPreviewState('ready');
+                    }
+                },
+            });
+
+            if (disposed || version !== renderVersion) {
+                session.dispose();
+                return;
+            }
+
+            renderSession = session;
+            renderAbortController = undefined;
+        } catch (error) {
+            if (disposed || version !== renderVersion) {
+                return;
+            }
+
+            const message = error instanceof Error ? error.message : String(error);
+            renderAbortController = undefined;
+            setPreviewState('error', `${config.errorLabel}: ${message}`);
+
+            console.error(error);
+        }
+    }
+
+    function dispose() {
+        disposed = true;
+        window.clearTimeout(resizeTimer);
+        resizeObserver.disconnect();
+        window.removeEventListener(WORKSPACE_FULLSCREEN_CHANGE_EVENT, scheduleSessionResize);
+        renderAbortController?.abort();
+        renderAbortController = undefined;
+        renderSession?.dispose();
+        renderSession = undefined;
+    }
+
+    function setPreviewState(state: 'loading' | 'ready' | 'error', label?: string) {
+        root.dataset.state = state;
+        root.setAttribute('aria-busy', String(state === 'loading'));
+
+        if (!status) {
+            return;
+        }
+
+        if (state === 'ready') {
+            status.hidden = true;
+            status.textContent = '';
+            return;
+        }
+
+        status.hidden = false;
+        status.textContent = label ?? config.loadingLabel;
+    }
+}
+
+const collapsedStorageKey = 'aholo:examples:rail-collapsed';
+const widthStorageKey = 'aholo:examples:rail-width';
+const defaultRailWidth = 286;
+const railCollapseThreshold = 160;
+const railMinWidth = 220;
+const railMaxWidth = 420;
+const stageMinWidth = 420;
+const splitterWidth = 9;
+
+export function mountExamplesPage(root: ParentNode = document) {
+    const viewer = root.querySelector('[data-example-viewer]');
+    const splitter = root.querySelector('[data-example-splitter]');
+
+    if (!viewer || !splitter || viewer.dataset.mounted === 'true') {
+        return;
+    }
+
+    viewer.dataset.mounted = 'true';
+
+    const isCompactLayout = () => window.matchMedia('(max-width: 900px)').matches;
+    let disposed = false;
+    const splitPane = mountSplitPane({
+        container: viewer,
+        splitter,
+        collapsedDatasetKey: 'paneCollapsed',
+        cssProperty: '--example-rail-width',
+        defaultValue: readRailWidth(),
+        valueUnit: 'px',
+        keyboardStep: 24,
+        isDisabled: isCompactLayout,
+        toggleWhenDisabled: true,
+        clampValue(value, rect) {
+            const maximum = getMaximumRailWidth(rect.width);
+            return clamp(value, Math.min(railMinWidth, maximum), maximum);
+        },
+        shouldCollapse(value, rect) {
+            return value <= Math.min(railCollapseThreshold, rect.width * 0.24);
+        },
+        getAriaValue(value, rect) {
+            return rect.width > 0 ? (value / rect.width) * 100 : 0;
+        },
+        getInitialCollapsed: readCollapsed,
+        onCollapsedChange(collapsed, { persist }) {
+            if (persist) {
+                writeCollapsed(collapsed);
+            }
+        },
+        onValueChange(value, { persist }) {
+            if (persist) {
+                writeRailWidth(value);
+            }
+        },
+    });
+    const fullscreenMode = mountWorkspaceFullscreenMode({
+        onChange() {
+            handleResize();
+        },
+    });
+
+    requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+            viewer.dataset.layoutReady = 'true';
+        });
+    });
+
+    window.addEventListener('resize', handleResize);
+    window.addEventListener('beforeunload', dispose, { once: true });
+    document.addEventListener('astro:before-swap', dispose, { once: true });
+
+    function handleResize() {
+        if (!splitPane.getCollapsed() && !isCompactLayout()) {
+            splitPane.setSize(splitPane.getSize(), { persist: false });
+        }
+    }
+
+    function dispose() {
+        if (disposed) {
+            return;
+        }
+
+        disposed = true;
+        fullscreenMode.dispose();
+        splitPane.dispose();
+        window.removeEventListener('resize', handleResize);
+        window.removeEventListener('beforeunload', dispose);
+        document.removeEventListener('astro:before-swap', dispose);
+    }
+}
+
+function getMaximumRailWidth(viewerWidth: number) {
+    return Math.max(railMinWidth, Math.min(railMaxWidth, viewerWidth - stageMinWidth - splitterWidth));
+}
+
+function readCollapsed() {
+    try {
+        return localStorage.getItem(collapsedStorageKey) === 'true';
+    } catch {
+        return false;
+    }
+}
+
+function writeCollapsed(collapsed: boolean) {
+    try {
+        localStorage.setItem(collapsedStorageKey, String(collapsed));
+    } catch {
+        // Persisting the rail state is optional; resizing should still work.
+    }
+}
+
+function readRailWidth() {
+    try {
+        const stored = Number(localStorage.getItem(widthStorageKey));
+
+        if (Number.isFinite(stored) && stored > 0) {
+            return stored;
+        }
+    } catch {
+        // Persisting the rail width is optional; the default width is fine.
+    }
+
+    return defaultRailWidth;
+}
+
+function writeRailWidth(width: number) {
+    try {
+        localStorage.setItem(widthStorageKey, String(Math.round(width)));
+    } catch {
+        // Persisting the rail width is optional; resizing should still work.
+    }
+}
+
+function clamp(value: number, minimum: number, maximum: number) {
+    return Math.min(Math.max(value, minimum), maximum);
+}
diff --git a/website/src/client/home.ts b/website/src/client/home.ts
new file mode 100644
index 0000000..84d3f66
--- /dev/null
+++ b/website/src/client/home.ts
@@ -0,0 +1,235 @@
+import { createRenderSession } from './render-runtime.js';
+
+const HOME_INTERACTION_ENTER_EVENT = 'aholo:home-interaction-enter';
+
+interface HomeStageConfig {
+    code: string;
+}
+
+export function mountHomeStage(stage: HTMLElement, config: HomeStageConfig) {
+    if (stage.dataset.mounted === 'true') {
+        return;
+    }
+
+    const canvas = stage.querySelector('[data-home-preview]');
+    const enterButtons = Array.from(stage.querySelectorAll('[data-home-enter]'));
+    const exitButton = stage.querySelector('[data-home-exit]');
+
+    if (!canvas) {
+        return;
+    }
+
+    const previewCanvas = canvas;
+    stage.dataset.mounted = 'true';
+
+    let previewTiltX = 0;
+    let previewTiltY = 0;
+    let dragStartX = 0;
+    let dragStartY = 0;
+    let dragBaseX = 0;
+    let dragBaseY = 0;
+    let dragging = false;
+    let renderSession: Awaited> | undefined;
+    let renderVersion = 0;
+    let transitionTimer: number | undefined;
+    let resizeFrame: number | undefined;
+    let disposed = false;
+
+    renderHomePreview();
+    setHomeInteractive(false);
+
+    for (const enterButton of enterButtons) {
+        enterButton.addEventListener('click', handleEnter);
+    }
+    exitButton?.addEventListener('click', handleExit);
+    document.addEventListener('keydown', handleKeydown);
+    previewCanvas.addEventListener('pointerdown', handlePointerDown);
+    previewCanvas.addEventListener('pointermove', handlePointerMove);
+    previewCanvas.addEventListener('pointerup', handlePointerUp);
+    previewCanvas.addEventListener('pointercancel', handlePointerCancel);
+
+    // Theme switches must not reload the splat scene; the accent only feeds
+    // the surface CSS variable, so update it in place.
+    const themeObserver = new MutationObserver(() => {
+        renderSession?.setAccent(readThemeAccent());
+    });
+    themeObserver.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ['data-theme'],
+    });
+
+    // The stage sits in the first viewport only; stop the render loop while it
+    // is scrolled out of view so scrolling the rest of the page stays idle.
+    let stageVisible = true;
+    const stageVisibilityObserver = new IntersectionObserver(entries => {
+        stageVisible = entries[entries.length - 1]?.isIntersecting ?? true;
+        renderSession?.setPaused(!stageVisible);
+    });
+    stageVisibilityObserver.observe(stage);
+
+    window.addEventListener('pageshow', handlePageShow);
+    window.addEventListener('resize', schedulePreviewResize);
+    document.addEventListener('astro:before-swap', dispose, { once: true });
+
+    async function renderHomePreview() {
+        const version = renderVersion + 1;
+        renderVersion = version;
+        renderSession?.dispose();
+        renderSession = undefined;
+
+        try {
+            const session = await createRenderSession(previewCanvas, config.code, readThemeAccent());
+
+            if (disposed || version !== renderVersion) {
+                session.dispose();
+                return;
+            }
+
+            renderSession = session;
+            session.setAccent(readThemeAccent());
+            session.setPaused(!stageVisible);
+        } catch (error) {
+            console.error(error);
+        }
+    }
+
+    function handleEnter() {
+        setHomeInteractive(true, { animate: true });
+        document.dispatchEvent(new Event(HOME_INTERACTION_ENTER_EVENT));
+    }
+
+    function handleExit() {
+        setHomeInteractive(false);
+    }
+
+    function handleKeydown(event: KeyboardEvent) {
+        if (event.key === 'Escape' && stage.dataset.interactive === 'true') {
+            setHomeInteractive(false);
+        }
+    }
+
+    function handlePointerDown(event: PointerEvent) {
+        if (stage.dataset.interactive !== 'true') {
+            return;
+        }
+
+        dragging = true;
+        dragStartX = event.clientX;
+        dragStartY = event.clientY;
+        dragBaseX = previewTiltX;
+        dragBaseY = previewTiltY;
+        previewCanvas.setPointerCapture(event.pointerId);
+    }
+
+    function handlePointerMove(event: PointerEvent) {
+        if (!dragging) {
+            return;
+        }
+
+        previewTiltY = clamp(dragBaseY + (event.clientX - dragStartX) * 0.04, -10, 10);
+        previewTiltX = clamp(dragBaseX - (event.clientY - dragStartY) * 0.035, -7, 7);
+        stage.style.setProperty('--home-tilt-x', `${previewTiltX}deg`);
+        stage.style.setProperty('--home-tilt-y', `${previewTiltY}deg`);
+    }
+
+    function handlePointerUp(event: PointerEvent) {
+        dragging = false;
+
+        if (previewCanvas.hasPointerCapture(event.pointerId)) {
+            previewCanvas.releasePointerCapture(event.pointerId);
+        }
+    }
+
+    function handlePointerCancel() {
+        dragging = false;
+    }
+
+    function handlePageShow(event: PageTransitionEvent) {
+        if (event.persisted) {
+            schedulePreviewResize();
+        }
+    }
+
+    function schedulePreviewResize() {
+        if (resizeFrame !== undefined) {
+            window.cancelAnimationFrame(resizeFrame);
+        }
+
+        resizeFrame = window.requestAnimationFrame(() => {
+            resizeFrame = undefined;
+            renderSession?.resize();
+        });
+    }
+
+    function dispose() {
+        if (disposed) {
+            return;
+        }
+
+        disposed = true;
+        renderVersion += 1;
+        window.clearTimeout(transitionTimer);
+
+        if (resizeFrame !== undefined) {
+            window.cancelAnimationFrame(resizeFrame);
+            resizeFrame = undefined;
+        }
+
+        setHomeInteractive(false, { resize: false });
+        for (const enterButton of enterButtons) {
+            enterButton.removeEventListener('click', handleEnter);
+        }
+        exitButton?.removeEventListener('click', handleExit);
+        document.removeEventListener('keydown', handleKeydown);
+        previewCanvas.removeEventListener('pointerdown', handlePointerDown);
+        previewCanvas.removeEventListener('pointermove', handlePointerMove);
+        previewCanvas.removeEventListener('pointerup', handlePointerUp);
+        previewCanvas.removeEventListener('pointercancel', handlePointerCancel);
+        window.removeEventListener('pageshow', handlePageShow);
+        window.removeEventListener('resize', schedulePreviewResize);
+        document.removeEventListener('astro:before-swap', dispose);
+        themeObserver.disconnect();
+        stageVisibilityObserver.disconnect();
+        renderSession?.dispose();
+        renderSession = undefined;
+        delete stage.dataset.mounted;
+    }
+
+    function readThemeAccent() {
+        return getComputedStyle(document.documentElement).getPropertyValue('--primary').trim() || '#18181b';
+    }
+
+    function setHomeInteractive(interactive: boolean, options: { animate?: boolean; resize?: boolean } = {}) {
+        window.clearTimeout(transitionTimer);
+
+        if (interactive && options.animate) {
+            stage.dataset.transition = 'enter';
+            transitionTimer = window.setTimeout(() => {
+                if (stage.dataset.transition === 'enter') {
+                    delete stage.dataset.transition;
+                }
+            }, 860);
+        } else {
+            delete stage.dataset.transition;
+        }
+
+        stage.dataset.interactive = interactive ? 'true' : 'false';
+        document.documentElement.classList.toggle('home-interactive', interactive);
+        document.body.classList.toggle('home-interactive', interactive);
+        for (const enterButton of enterButtons) {
+            enterButton.setAttribute('aria-expanded', interactive ? 'true' : 'false');
+        }
+
+        if (exitButton) {
+            exitButton.hidden = !interactive;
+        }
+
+        if (options.resize !== false) {
+            schedulePreviewResize();
+        }
+    }
+}
+
+function clamp(value: number, min: number, max: number) {
+    return Math.min(Math.max(value, min), max);
+}
diff --git a/website/src/client/interaction-guide.ts b/website/src/client/interaction-guide.ts
new file mode 100644
index 0000000..1206304
--- /dev/null
+++ b/website/src/client/interaction-guide.ts
@@ -0,0 +1,100 @@
+const GUIDE_SELECTOR = '[data-interaction-guide]';
+const MIN_TRIGGER_DISTANCE = 88;
+const MAX_TRIGGER_DISTANCE = 152;
+const TRIGGER_HEIGHT_RATIO = 0.24;
+const TOUCH_HIDE_DELAY = 1800;
+
+export function mountInteractionGuides(root: ParentNode = document) {
+    for (const guide of root.querySelectorAll(GUIDE_SELECTOR)) {
+        mountInteractionGuide(guide);
+    }
+}
+
+function mountInteractionGuide(guide: HTMLElement) {
+    if (guide.dataset.mounted === 'true') {
+        return;
+    }
+
+    const surface = guide.parentElement;
+
+    if (!surface) {
+        return;
+    }
+
+    const surfaceElement = surface;
+
+    guide.dataset.mounted = 'true';
+
+    let hideTimer: number | undefined;
+    const stateObserver = new MutationObserver(() => {
+        if (!isEnabled()) {
+            hide();
+        }
+    });
+
+    surfaceElement.addEventListener('pointermove', handlePointerMove);
+    surfaceElement.addEventListener('pointerleave', hide);
+    surfaceElement.addEventListener('pointercancel', hide);
+    window.addEventListener('blur', hide);
+    document.addEventListener('astro:before-swap', dispose, { once: true });
+
+    if (guide.dataset.activeWhen === 'interactive') {
+        stateObserver.observe(surfaceElement, {
+            attributes: true,
+            attributeFilter: ['data-interactive'],
+        });
+    }
+
+    function handlePointerMove(event: PointerEvent) {
+        window.clearTimeout(hideTimer);
+
+        if (!isEnabled()) {
+            hide();
+            return;
+        }
+
+        const rect = surfaceElement.getBoundingClientRect();
+        const triggerDistance = clamp(rect.height * TRIGGER_HEIGHT_RATIO, MIN_TRIGGER_DISTANCE, MAX_TRIGGER_DISTANCE);
+        const insideHorizontal = event.clientX >= rect.left && event.clientX <= rect.right;
+        const nearBottom =
+            insideHorizontal && event.clientY >= rect.bottom - triggerDistance && event.clientY <= rect.bottom;
+
+        if (nearBottom) {
+            show();
+
+            if (event.pointerType === 'touch') {
+                hideTimer = window.setTimeout(hide, TOUCH_HIDE_DELAY);
+            }
+        } else {
+            hide();
+        }
+    }
+
+    function isEnabled() {
+        return guide.dataset.activeWhen !== 'interactive' || surfaceElement.dataset.interactive === 'true';
+    }
+
+    function show() {
+        guide.dataset.visible = 'true';
+    }
+
+    function hide() {
+        window.clearTimeout(hideTimer);
+        hideTimer = undefined;
+        delete guide.dataset.visible;
+    }
+
+    function dispose() {
+        hide();
+        surfaceElement.removeEventListener('pointermove', handlePointerMove);
+        surfaceElement.removeEventListener('pointerleave', hide);
+        surfaceElement.removeEventListener('pointercancel', hide);
+        window.removeEventListener('blur', hide);
+        stateObserver.disconnect();
+        delete guide.dataset.mounted;
+    }
+}
+
+function clamp(value: number, minimum: number, maximum: number) {
+    return Math.min(Math.max(value, minimum), maximum);
+}
diff --git a/website/src/client/playground.ts b/website/src/client/playground.ts
new file mode 100644
index 0000000..4593b9f
--- /dev/null
+++ b/website/src/client/playground.ts
@@ -0,0 +1,749 @@
+import { compressToEncodedURIComponent, decompressFromEncodedURIComponent } from 'lz-string';
+import { Pane } from 'tweakpane';
+import * as TweakpaneEssentialsPlugin from '@tweakpane/plugin-essentials';
+import type { RenderSession } from './render-runtime.js';
+import { createRenderSession } from './render-runtime.js';
+import { mountSplitPane } from './split-pane.js';
+import { mountWorkspaceFullscreenMode } from './workspace-fullscreen.js';
+
+const CODE_QUERY_PARAM = 'code';
+const PRESET_QUERY_PARAM = 'example';
+const URL_SYNC_DELAY = 250;
+const DEFAULT_EDITOR_WIDTH_PERCENT = 48;
+const EDITOR_COLLAPSE_THRESHOLD_PX = 260;
+const EDITOR_MIN_WIDTH_PX = 360;
+const EDITOR_SIDE_MIN_RATIO = 0.42;
+const INSPECTOR_REFRESH_INTERVAL_MS = 100;
+const DEFAULT_REFRESH_RATE = 60;
+const FPS_GRAPH_HEADROOM = 1.5;
+
+type MonacoModule = typeof import('monaco-editor/esm/vs/editor/editor.api.js');
+type MonacoTextModel = ReturnType;
+interface RenderStats {
+    drawCalls: number;
+    objects: number;
+}
+
+interface PlaygroundRendererOptions {
+    antialiasing?: boolean;
+    pixelRatio?: number;
+}
+
+interface PlaygroundPreset {
+    slug: string;
+    title: string;
+    tags: string[];
+    code: string;
+    accent: string;
+    renderer: PlaygroundRendererOptions;
+}
+
+interface PlaygroundConfig {
+    presets: PlaygroundPreset[];
+    labels: {
+        ready: string;
+        error: string;
+    };
+    common: {
+        run: string;
+        preset: string;
+    };
+    typeDefinitions: Array<{
+        path: string;
+        content: string;
+    }>;
+}
+
+interface TypeScriptContribution {
+    ModuleKind: {
+        ESNext: number;
+    };
+    ModuleResolutionKind: {
+        NodeJs: number;
+    };
+    ScriptTarget: {
+        ES2020: number;
+    };
+    typescriptDefaults: {
+        addExtraLib(content: string, filePath?: string): unknown;
+        setCompilerOptions(options: Record): void;
+        setDiagnosticsOptions(options: Record): void;
+    };
+}
+
+interface MonacoRuntime {
+    monaco: MonacoModule;
+    typescript: TypeScriptContribution;
+}
+
+interface EditorController {
+    getValue(): string;
+    setPreset(preset: PlaygroundPreset, code?: string): void;
+    onChange(callback: (code: string) => void): void;
+    layout(): void;
+}
+
+const detectRefreshRate = (function () {
+    function refreshRate() {
+        let frameCount = 0;
+        let startTime = 0;
+        return new Promise(resolve => {
+            function estimateRefreshRate(currentTime: number) {
+                frameCount++;
+                const elapsedTime = currentTime - startTime;
+                if (elapsedTime >= 1000) {
+                    resolve(normalizeRefreshRate(Math.round((frameCount * 1000) / elapsedTime)));
+                    return;
+                }
+                requestAnimationFrame(estimateRefreshRate);
+            }
+
+            requestAnimationFrame(t => {
+                startTime = t;
+                frameCount = -1;
+                estimateRefreshRate(t);
+            });
+        });
+    }
+    let cached: number | undefined = undefined;
+
+    return async function () {
+        if (cached == null) {
+            cached = await refreshRate();
+        }
+        return cached;
+    };
+})();
+
+let monacoPromise: Promise | undefined;
+
+export async function mountPlayground(root: HTMLElement, config: PlaygroundConfig) {
+    const editorHost = query(root, '[data-editor-host]');
+    const loading = query(root, '[data-editor-loading]');
+    const canvas = query(root, '[data-render-canvas]');
+    const presetMenu = query(root, '[data-preset-menu]');
+    const presetTrigger = query(root, '[data-preset-trigger]');
+    const currentPresetLabel = query(root, '[data-current-preset]');
+    const presetList = query(root, '[data-preset-list]');
+    const status = query(root, '[data-status]');
+    const runButton = query(root, '[data-run]');
+    const workspace = query(root, '[data-workspace]');
+    const splitter = query(root, '[data-workspace-splitter]');
+    const inspector = query(root, '[data-inspector]');
+    const configPanel = root.querySelector('[data-config-panel]');
+    const previewStatus = root.querySelector('[data-preview-status]');
+
+    const initialParams = new URLSearchParams(window.location.search);
+    const requestedPreset = initialParams.get(PRESET_QUERY_PARAM);
+    const initialCode = readCodeFromUrl(initialParams);
+    let currentPreset = config.presets.find(preset => preset.slug === requestedPreset) ?? config.presets[0];
+    let isApplyingEditorValue = false;
+    let urlSyncTimer: number | undefined;
+    let runId = 0;
+    let activeSession: RenderSession | undefined;
+    let runAbortController: AbortController | undefined;
+    const presetButtons = new Map();
+    const inspectorPane = await setupInspectorPane(inspector);
+
+    setStatus('loading', 'Loading editor');
+
+    for (const preset of config.presets) {
+        const button = createPresetButton(preset);
+        button.addEventListener('click', () => {
+            applyPreset(preset, { syncUrl: true });
+            setPresetMenuOpen(false);
+            presetTrigger.focus();
+        });
+        presetButtons.set(preset.slug, button);
+        presetList.append(button);
+    }
+
+    const monacoRuntime = await loadMonaco();
+    configureTypeScript(monacoRuntime.typescript, config);
+    const editor = createCodeEditor(monacoRuntime.monaco, editorHost, config);
+    const fullscreenMode = mountWorkspaceFullscreenMode({
+        onChange() {
+            handleViewportChange();
+        },
+    });
+    let disposed = false;
+    loading.remove();
+
+    function applyPreset(preset: PlaygroundPreset, options: { code?: string; syncUrl?: boolean } = {}) {
+        currentPreset = preset;
+        updatePresetMenu(preset);
+        applyEditorValue(() => editor.setPreset(preset, options.code));
+
+        if (options.syncUrl) {
+            if (urlSyncTimer !== undefined) {
+                window.clearTimeout(urlSyncTimer);
+                urlSyncTimer = undefined;
+            }
+
+            syncPresetUrl(preset);
+        }
+
+        run();
+    }
+
+    function applyEditorValue(callback: () => void) {
+        isApplyingEditorValue = true;
+        callback();
+        window.setTimeout(() => {
+            isApplyingEditorValue = false;
+        }, 0);
+    }
+
+    async function run() {
+        const nextRunId = runId + 1;
+        runId = nextRunId;
+        runAbortController?.abort();
+        const abortController = new AbortController();
+        runAbortController = abortController;
+        activeSession?.dispose();
+        activeSession = undefined;
+        inspectorPane.setError('');
+        setStatus('loading', config.common.run);
+        setPreviewStatus('loading', previewStatus?.dataset.loadingLabel ?? config.common.run);
+
+        try {
+            const session = await createRenderSession(canvas, editor.getValue(), currentPreset.accent, {
+                configPanel: configPanel
+                    ? {
+                          container: configPanel,
+                          title: configPanel.dataset.configPanelTitle ?? 'Config',
+                      }
+                    : undefined,
+                signal: abortController.signal,
+                renderer: currentPreset.renderer,
+                onStats(stats) {
+                    if (nextRunId === runId) {
+                        updateStats(stats);
+                    }
+                },
+                beginFrame() {
+                    inspectorPane.beginFrame();
+                },
+                endFrame() {
+                    inspectorPane.endFrame();
+                },
+                onStatus(nextStatus) {
+                    if (nextRunId !== runId) {
+                        return;
+                    }
+
+                    const label =
+                        nextStatus.label ?? (nextStatus.state === 'loading' ? config.common.run : config.labels.ready);
+                    setStatus(nextStatus.state, label);
+                    setPreviewStatus(
+                        nextStatus.state,
+                        nextStatus.state === 'loading'
+                            ? (nextStatus.label ?? previewStatus?.dataset.loadingLabel)
+                            : undefined,
+                    );
+                },
+            });
+
+            if (nextRunId !== runId) {
+                session.dispose();
+                return;
+            }
+
+            activeSession = session;
+            if (runAbortController === abortController) {
+                runAbortController = undefined;
+            }
+            updateStats(session.stats);
+        } catch (caught) {
+            if (nextRunId !== runId) {
+                return;
+            }
+
+            if (runAbortController === abortController) {
+                runAbortController = undefined;
+            }
+            const message = caught instanceof Error ? caught.message : String(caught);
+            inspectorPane.setError(message);
+            inspectorPane.expand();
+            setPreviewStatus('ready');
+            setStatus('error', config.labels.error);
+        }
+    }
+
+    presetTrigger.addEventListener('click', () => {
+        setPresetMenuOpen(presetList.hidden as any as boolean);
+    });
+    presetTrigger.addEventListener('keydown', event => {
+        if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            setPresetMenuOpen(true);
+        }
+    });
+    presetList.addEventListener('keydown', handlePresetListKeydown);
+    document.addEventListener('pointerdown', event => {
+        if (event.target instanceof Node && !presetMenu.contains(event.target)) {
+            setPresetMenuOpen(false);
+        }
+    });
+
+    editor.onChange(code => {
+        if (isApplyingEditorValue) {
+            return;
+        }
+
+        scheduleCodeUrlSync(code, currentPreset);
+    });
+
+    runButton.addEventListener('click', run);
+
+    const splitPane = mountSplitPane({
+        container: workspace,
+        splitter,
+        collapsedDatasetKey: 'paneCollapsed',
+        cssProperty: '--editor-width',
+        defaultValue: DEFAULT_EDITOR_WIDTH_PERCENT,
+        valueUnit: '%',
+        keyboardStep: 4,
+        clampValue(value, rect) {
+            if (rect.width <= 0) {
+                return value;
+            }
+
+            const requestedWidth = (value / 100) * rect.width;
+            const minimum = Math.min(EDITOR_MIN_WIDTH_PX, rect.width * EDITOR_SIDE_MIN_RATIO);
+            const maximum = rect.width - minimum;
+            const width = Math.min(Math.max(requestedWidth, minimum), maximum);
+
+            return (width / rect.width) * 100;
+        },
+        shouldCollapse(value, rect) {
+            return (value / 100) * rect.width <= Math.min(EDITOR_COLLAPSE_THRESHOLD_PX, rect.width * 0.28);
+        },
+        pointerToValue(event, rect) {
+            return rect.width > 0 ? ((event.clientX - rect.left) / rect.width) * 100 : DEFAULT_EDITOR_WIDTH_PERCENT;
+        },
+        onChange() {
+            editor.layout();
+            resizePreview();
+        },
+    });
+    window.addEventListener('resize', handleViewportChange);
+    window.addEventListener('beforeunload', dispose, { once: true });
+    document.addEventListener('astro:before-swap', dispose, { once: true });
+
+    applyPreset(currentPreset, { code: initialCode });
+
+    function handleViewportChange() {
+        setPresetMenuOpen(false);
+        editor.layout();
+        resizePreview();
+    }
+
+    function dispose() {
+        if (disposed) {
+            return;
+        }
+
+        disposed = true;
+        runAbortController?.abort();
+        activeSession?.dispose();
+        inspectorPane.dispose();
+        splitPane.dispose();
+        fullscreenMode.dispose();
+        window.removeEventListener('resize', handleViewportChange);
+        window.removeEventListener('beforeunload', dispose);
+        document.removeEventListener('astro:before-swap', dispose);
+    }
+
+    function scheduleCodeUrlSync(code: string, preset: PlaygroundPreset) {
+        if (urlSyncTimer !== undefined) {
+            window.clearTimeout(urlSyncTimer);
+        }
+
+        urlSyncTimer = window.setTimeout(() => {
+            syncCodeUrl(code, preset);
+            urlSyncTimer = undefined;
+        }, URL_SYNC_DELAY);
+    }
+
+    function setStatus(state: 'loading' | 'ready' | 'error', label: string) {
+        status.dataset.state = state;
+        status.setAttribute('aria-label', `${config.common.run}: ${label}`);
+        status.title = label;
+    }
+
+    function setPreviewStatus(state: 'loading' | 'ready', label?: string) {
+        if (!previewStatus) {
+            return;
+        }
+
+        if (state === 'ready') {
+            previewStatus.hidden = true;
+            previewStatus.textContent = '';
+            return;
+        }
+
+        previewStatus.hidden = false;
+        previewStatus.textContent = label ?? previewStatus.dataset.loadingLabel ?? config.common.run;
+    }
+
+    function updateStats(stats: RenderStats) {
+        inspectorPane.updateStats(stats);
+    }
+
+    function resizePreview() {
+        activeSession?.resize();
+    }
+
+    function createPresetButton(preset: PlaygroundPreset) {
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.className = 'preset-option';
+        button.dataset.presetOption = preset.slug;
+        button.setAttribute('role', 'menuitemradio');
+        button.setAttribute('aria-checked', 'false');
+        button.style.setProperty('--preset-accent', preset.accent);
+
+        const marker = document.createElement('span');
+        marker.className = 'preset-option-marker';
+        marker.setAttribute('aria-hidden', 'true');
+
+        const content = document.createElement('span');
+        content.className = 'preset-option-content';
+
+        const title = document.createElement('strong');
+        title.textContent = preset.title;
+
+        const tags = document.createElement('span');
+        tags.className = 'preset-option-tags';
+        tags.textContent = preset.tags.join(' / ');
+
+        content.append(title, tags);
+        button.append(marker, content);
+
+        return button;
+    }
+
+    function updatePresetMenu(preset: PlaygroundPreset) {
+        currentPresetLabel.textContent = preset.title;
+        currentPresetLabel.style.setProperty('--preset-accent', preset.accent);
+
+        for (const [slug, button] of presetButtons) {
+            const isActive = slug === preset.slug;
+            button.setAttribute('aria-checked', String(isActive));
+            if (isActive) {
+                button.dataset.active = 'true';
+            } else {
+                delete button.dataset.active;
+            }
+        }
+    }
+
+    function setPresetMenuOpen(open: boolean) {
+        presetList.hidden = !open;
+        presetTrigger.setAttribute('aria-expanded', String(open));
+
+        if (open) {
+            const activeButton =
+                presetButtons.get(currentPreset.slug) ?? presetList.querySelector('button');
+            activeButton?.focus({ preventScroll: true });
+        }
+    }
+
+    function handlePresetListKeydown(event: KeyboardEvent) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            setPresetMenuOpen(false);
+            presetTrigger.focus();
+            return;
+        }
+
+        if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp' && event.key !== 'Home' && event.key !== 'End') {
+            return;
+        }
+
+        event.preventDefault();
+        const buttons = Array.from(presetButtons.values());
+        const currentIndex = buttons.findIndex(button => button === document.activeElement);
+
+        if (event.key === 'Home') {
+            buttons[0]?.focus();
+            return;
+        }
+
+        if (event.key === 'End') {
+            buttons[buttons.length - 1]?.focus();
+            return;
+        }
+
+        const direction = event.key === 'ArrowDown' ? 1 : -1;
+        const nextIndex = currentIndex === -1 ? 0 : (currentIndex + direction + buttons.length) % buttons.length;
+        buttons[nextIndex]?.focus();
+    }
+}
+
+async function loadMonaco() {
+    if (!monacoPromise) {
+        monacoPromise = (async () => {
+            const [{ default: EditorWorker }, { default: TypeScriptWorker }] = await Promise.all([
+                import('monaco-editor/esm/vs/editor/editor.worker.js?worker&inline'),
+                import('monaco-editor/esm/vs/language/typescript/ts.worker.js?worker&inline'),
+            ]);
+
+            (self as unknown as { MonacoEnvironment: unknown }).MonacoEnvironment = {
+                getWorker(_workerId: string, label: string) {
+                    if (label === 'typescript' || label === 'javascript') {
+                        return new TypeScriptWorker();
+                    }
+                    return new EditorWorker();
+                },
+            };
+
+            const monaco = await import('monaco-editor/esm/vs/editor/editor.api.js');
+            await import('monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution.js');
+            const typescript =
+                (await import('monaco-editor/esm/vs/language/typescript/monaco.contribution.js')) as unknown as TypeScriptContribution;
+
+            return {
+                monaco,
+                typescript,
+            };
+        })();
+    }
+
+    return monacoPromise;
+}
+
+function configureTypeScript(typescript: TypeScriptContribution, config: PlaygroundConfig) {
+    const defaults = typescript.typescriptDefaults;
+
+    defaults.setDiagnosticsOptions({
+        noSemanticValidation: false,
+        noSyntaxValidation: false,
+        noSuggestionDiagnostics: false,
+    });
+    defaults.setCompilerOptions({
+        allowNonTsExtensions: true,
+        module: typescript.ModuleKind.ESNext,
+        moduleResolution: typescript.ModuleResolutionKind.NodeJs,
+        noEmit: true,
+        strict: true,
+        target: typescript.ScriptTarget.ES2020,
+        lib: ['es2020', 'dom'],
+    });
+    for (const definition of config.typeDefinitions) {
+        defaults.addExtraLib(definition.content, definition.path);
+    }
+}
+
+function createCodeEditor(monaco: MonacoModule, host: HTMLElement, config: PlaygroundConfig): EditorController {
+    const models = new Map();
+    const editor = monaco.editor.create(host, {
+        automaticLayout: false,
+        contextmenu: false,
+        fixedOverflowWidgets: true,
+        fontFamily: 'SFMono-Regular, Consolas, Liberation Mono, monospace',
+        fontSize: 13,
+        lineNumbers: 'on',
+        minimap: { enabled: false },
+        overviewRulerLanes: 0,
+        padding: { top: 14, bottom: 92 },
+        renderLineHighlight: 'line',
+        scrollBeyondLastLine: false,
+        scrollbar: {
+            horizontalScrollbarSize: 10,
+            verticalScrollbarSize: 10,
+        },
+        tabSize: 2,
+        theme: document.documentElement.dataset.theme === 'dark' ? 'vs-dark' : 'vs',
+        wordWrap: 'off',
+    });
+
+    for (const preset of config.presets) {
+        models.set(preset.slug, createModel(monaco, preset));
+    }
+
+    const themeObserver = new MutationObserver(() => {
+        monaco.editor.setTheme(document.documentElement.dataset.theme === 'dark' ? 'vs-dark' : 'vs');
+    });
+    themeObserver.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ['data-theme'],
+    });
+
+    return {
+        getValue() {
+            return editor.getValue();
+        },
+        setPreset(preset, code = preset.code) {
+            const model = models.get(preset.slug) ?? createModel(monaco, preset);
+            model.setValue(code);
+            models.set(preset.slug, model);
+            editor.setModel(model);
+            editor.focus();
+            editor.layout();
+        },
+        onChange(callback) {
+            editor.onDidChangeModelContent(() => callback(editor.getValue()));
+        },
+        layout() {
+            editor.layout();
+        },
+    };
+}
+
+function createModel(monaco: MonacoModule, preset: PlaygroundPreset) {
+    const uri = monaco.Uri.parse(`file:///src/content/examples/${preset.slug}.ts`);
+    const existing = monaco.editor.getModel(uri);
+
+    if (existing) {
+        existing.setValue(preset.code);
+        return existing;
+    }
+
+    return monaco.editor.createModel(preset.code, 'typescript', uri);
+}
+
+async function setupInspectorPane(container: HTMLElement) {
+    const params = {
+        fps: DEFAULT_REFRESH_RATE,
+        drawCalls: 0,
+        objects: 0,
+        error: '',
+    };
+    const pane = new Pane({
+        container,
+        expanded: true,
+        title: container.dataset.inspectorTitle ?? 'Inspector',
+    });
+
+    pane.registerPlugin(TweakpaneEssentialsPlugin);
+
+    let pendingStats: RenderStats | undefined;
+    let refreshTimer: number | undefined;
+    let lastRefreshTime = 0;
+
+    const fpsGraph = pane.addBlade({
+        view: 'fpsgraph',
+        label: 'FPS',
+        max: (await detectRefreshRate()) * FPS_GRAPH_HEADROOM,
+        rows: 2,
+    });
+    pane.addBinding(params, 'drawCalls', {
+        interval: INSPECTOR_REFRESH_INTERVAL_MS,
+        label: container.dataset.drawCallsLabel ?? 'Draw calls',
+        format: v => v.toString(),
+        readonly: true,
+    });
+    pane.addBinding(params, 'objects', {
+        interval: INSPECTOR_REFRESH_INTERVAL_MS,
+        label: container.dataset.objectsLabel ?? 'Objects',
+        format: v => v.toString(),
+        readonly: true,
+    });
+    const errorBinding = pane.addBinding(params, 'error', {
+        label: container.dataset.errorLabel ?? 'Error',
+        multiline: true,
+        readonly: true,
+        rows: 3,
+    });
+    errorBinding.hidden = true;
+
+    function scheduleRefresh() {
+        if (refreshTimer !== undefined) {
+            return;
+        }
+
+        const now = performance.now();
+        const delay = Math.max(0, INSPECTOR_REFRESH_INTERVAL_MS - (now - lastRefreshTime));
+        refreshTimer = window.setTimeout(() => {
+            refreshTimer = undefined;
+            lastRefreshTime = performance.now();
+            applyPendingStats();
+            pane.refresh();
+        }, delay);
+    }
+
+    function applyPendingStats() {
+        if (!pendingStats) {
+            return;
+        }
+
+        const stats = pendingStats;
+        pendingStats = undefined;
+
+        params.drawCalls = stats.drawCalls;
+        params.objects = stats.objects;
+    }
+
+    return {
+        dispose() {
+            if (refreshTimer !== undefined) {
+                window.clearTimeout(refreshTimer);
+                refreshTimer = undefined;
+            }
+
+            pane.dispose();
+        },
+        expand() {
+            pane.expanded = true;
+        },
+        setError(message: string) {
+            params.error = message;
+            errorBinding.hidden = message.length === 0;
+            scheduleRefresh();
+        },
+        beginFrame() {
+            (fpsGraph as any).begin();
+        },
+        endFrame() {
+            (fpsGraph as any).end();
+        },
+        updateStats(stats: RenderStats) {
+            pendingStats = stats;
+            scheduleRefresh();
+        },
+    };
+}
+
+function normalizeRefreshRate(value: number) {
+    return Number.isFinite(value) && value > 0 ? value : DEFAULT_REFRESH_RATE;
+}
+
+function readCodeFromUrl(params: URLSearchParams) {
+    const encodedCode = params.get(CODE_QUERY_PARAM);
+
+    if (!encodedCode) {
+        return undefined;
+    }
+
+    try {
+        return decompressFromEncodedURIComponent(encodedCode) ?? undefined;
+    } catch {
+        return undefined;
+    }
+}
+
+function syncPresetUrl(preset: PlaygroundPreset) {
+    const url = new URL(window.location.href);
+    url.searchParams.set(PRESET_QUERY_PARAM, preset.slug);
+    url.searchParams.delete(CODE_QUERY_PARAM);
+    window.history.replaceState({}, '', url);
+}
+
+function syncCodeUrl(code: string, preset: PlaygroundPreset) {
+    const url = new URL(window.location.href);
+    url.searchParams.set(PRESET_QUERY_PARAM, preset.slug);
+    url.searchParams.set(CODE_QUERY_PARAM, compressToEncodedURIComponent(code));
+    window.history.replaceState({}, '', url);
+}
+
+function query(root: HTMLElement, selector: string): T {
+    const element = root.querySelector(selector);
+
+    if (!element) {
+        throw new Error(`Missing playground element: ${selector}`);
+    }
+
+    return element;
+}
diff --git a/website/src/client/render-runtime.d.ts b/website/src/client/render-runtime.d.ts
new file mode 100644
index 0000000..288b0af
--- /dev/null
+++ b/website/src/client/render-runtime.d.ts
@@ -0,0 +1,55 @@
+import type { Scene3D, Viewer } from '@manycore/aholo-viewer';
+import type { Pane } from 'tweakpane';
+import type { CameraControl } from './camera-control.js';
+
+export interface RuntimeRenderer {
+    readonly viewer: Viewer;
+    readonly scene: Scene3D;
+    frame(callback: (state: { time: number; delta: number }) => boolean): void;
+    render(): void;
+    resize(): void;
+}
+
+export interface RuntimeLoadingController {
+    show(label?: string): void;
+    hide(): void;
+}
+
+interface RuntimeConfigPaneOptions {
+    expanded?: boolean;
+    title?: string;
+}
+
+export interface RuntimeConfigPanel {
+    readonly available: boolean;
+    readonly container: HTMLElement;
+    createPane(options?: RuntimeConfigPaneOptions): Pane;
+    clear(): void;
+    hide(): void;
+    show(): void;
+}
+
+interface RuntimeIndexedDBSetOptions {
+    version?: number;
+}
+
+interface RuntimeIndexedDBGetOptions {
+    version?: number;
+}
+
+export interface RuntimeIndexedDBStorage {
+    readonly available: boolean;
+    get(key: string, options?: RuntimeIndexedDBGetOptions): Promise;
+    set(key: string, value: T, options?: RuntimeIndexedDBSetOptions): Promise;
+    delete(key: string): Promise;
+    clear(): Promise;
+}
+
+export interface RenderRuntime {
+    renderer: RuntimeRenderer;
+    control: CameraControl;
+    loading: RuntimeLoadingController;
+    configPanel: RuntimeConfigPanel;
+    indexedDB: RuntimeIndexedDBStorage;
+    signal: AbortSignal;
+}
diff --git a/website/src/client/render-runtime.ts b/website/src/client/render-runtime.ts
new file mode 100644
index 0000000..3300695
--- /dev/null
+++ b/website/src/client/render-runtime.ts
@@ -0,0 +1,941 @@
+import * as RendererApi from '@manycore/aholo-viewer';
+import * as TweakpaneApi from 'tweakpane';
+import type { Camera3D, Scene3D, Viewer } from '@manycore/aholo-viewer';
+import type { Pane } from 'tweakpane';
+import type { Diagnostic } from 'typescript';
+import { CameraControl } from './camera-control.js';
+import {
+    abortable as abortableWithMessage,
+    countSceneObjects,
+    createAbortError as createAbortErrorWithMessage,
+    syncCameraAspect,
+    throwIfAborted as throwIfAbortedWithMessage,
+} from './rendering.js';
+
+export interface RenderStats {
+    drawCalls: number;
+    objects: number;
+}
+
+export interface RenderSession {
+    stats: RenderStats;
+    dispose(): void;
+    resize(): void;
+    setAccent(accent: string): void;
+    setPaused(paused: boolean): void;
+}
+
+export interface RenderSessionStatus {
+    state: 'loading' | 'ready';
+    label?: string;
+}
+
+export interface RenderSessionOptions {
+    configPanel?: RenderSessionConfigPanelOptions;
+    refreshRate?: number;
+    onStats?: (stats: RenderStats) => void;
+    onStatus?: (status: RenderSessionStatus) => void;
+    beginFrame?: () => void;
+    endFrame?: () => void;
+    renderer?: RenderSessionRendererOptions;
+    signal?: AbortSignal;
+}
+
+export interface RenderSessionConfigPanelOptions {
+    container?: HTMLElement | null;
+    title?: string;
+}
+
+export interface RenderSessionRendererOptions {
+    antialiasing?: boolean;
+    pixelRatio?: number;
+}
+
+export interface RuntimeRenderer {
+    readonly viewer: Viewer;
+    readonly scene: Scene3D;
+    frame(callback: (state: { time: number; delta: number }) => boolean): void;
+    render(): void;
+    resize(): void;
+}
+
+export interface RuntimeLoadingController {
+    show(label?: string): void;
+    hide(): void;
+}
+
+interface RuntimeConfigPaneOptions {
+    expanded?: boolean;
+    title?: string;
+}
+
+export interface RuntimeConfigPanel {
+    readonly available: boolean;
+    readonly container: HTMLElement;
+    createPane(options?: RuntimeConfigPaneOptions): Pane;
+    clear(): void;
+    hide(): void;
+    show(): void;
+}
+
+interface RuntimeIndexedDBSetOptions {
+    version?: number;
+}
+
+interface RuntimeIndexedDBGetOptions {
+    version?: number;
+}
+
+export interface RuntimeIndexedDBStorage {
+    readonly available: boolean;
+    get(key: string, options?: RuntimeIndexedDBGetOptions): Promise;
+    set(key: string, value: T, options?: RuntimeIndexedDBSetOptions): Promise;
+    delete(key: string): Promise;
+    clear(): Promise;
+}
+
+export interface RenderRuntime {
+    renderer: RuntimeRenderer;
+    control: CameraControl;
+    loading: RuntimeLoadingController;
+    configPanel: RuntimeConfigPanel;
+    indexedDB: RuntimeIndexedDBStorage;
+    signal: AbortSignal;
+}
+
+type TypeScriptModule = typeof import('typescript');
+type RenderRuntimeCleanup = () => void;
+type RenderRuntimeEntry = (
+    runtime: RenderRuntime,
+) => void | RenderRuntimeCleanup | Promise;
+type FrameCallback = (state: { time: number; delta: number }) => boolean;
+type RuntimeRendererApi = typeof RendererApi;
+type RuntimeTweakpaneApi = typeof TweakpaneApi;
+type RenderSessionOptionsInput = RenderSessionOptions | ((stats: RenderStats) => void);
+type TweakpanePane = InstanceType;
+type VersionedCacheOptions = {
+    version?: number;
+};
+type IndexedDBCacheRecord = {
+    key: string;
+    value: T;
+    version?: number;
+};
+
+interface RuntimeGlobal {
+    __AHOLO_RENDER_RUNTIME_API__?: RuntimeRendererApi;
+    __AHOLO_TWEAKPANE_RUNTIME_API__?: RuntimeTweakpaneApi;
+}
+
+const RENDER_RUNTIME_DB_NAME = 'aholo-render-runtime';
+const RENDER_RUNTIME_CACHE_STORE_NAME = 'runtime-cache';
+const RENDER_RUNTIME_ABORT_MESSAGE = 'Render runtime was aborted.';
+
+let renderSessionId = 0;
+const renderSurfaces = new WeakMap();
+
+export async function createRenderSession(
+    target: HTMLElement,
+    code: string,
+    accent: string,
+    optionsInput?: RenderSessionOptionsInput,
+): Promise {
+    const options = normalizeRenderSessionOptions(optionsInput);
+    const abortController = new AbortController();
+    const unlinkAbortSignal = linkAbortSignal(options.signal, abortController);
+    const signal = abortController.signal;
+    const loading = createRuntimeLoadingController(options.onStatus);
+    const configPanel = createRuntimeConfigPanel(options.configPanel);
+    const indexedDB = createRuntimeIndexedDBStorage(signal);
+    let renderer: RenderSessionRenderer | undefined;
+    let cleanup: RenderRuntimeCleanup | undefined;
+
+    try {
+        loading.startInitial();
+
+        const entry = await abortable(compileRenderRuntimeModule(code), signal);
+        throwIfAborted(signal);
+        const surface = prepareRenderSurface(target, accent);
+        renderer = new RenderSessionRenderer(
+            surface,
+            options.onStats,
+            options.beginFrame,
+            options.endFrame,
+            options.renderer,
+        );
+        renderer.start();
+        throwIfAborted(signal);
+        const result = await abortable(
+            Promise.resolve(
+                entry({
+                    renderer,
+                    control: renderer.control,
+                    loading: loading.controller,
+                    configPanel: configPanel.controller,
+                    indexedDB,
+                    signal,
+                }),
+            ),
+            signal,
+        );
+
+        cleanup = typeof result === 'function' ? result : undefined;
+        throwIfAborted(signal);
+        loading.finishInitial();
+
+        return {
+            stats: renderer.stats,
+            dispose() {
+                loading.dispose();
+                configPanel.dispose();
+                abortController.abort();
+                unlinkAbortSignal();
+                try {
+                    cleanup?.();
+                } finally {
+                    renderer?.dispose();
+                }
+            },
+            resize() {
+                renderer?.resize();
+            },
+            setAccent(nextAccent: string) {
+                surface.style.setProperty('--runtime-accent', nextAccent);
+            },
+            setPaused(paused: boolean) {
+                if (paused) {
+                    renderer?.pause();
+                } else {
+                    renderer?.start();
+                }
+            },
+        };
+    } catch (error) {
+        loading.dispose();
+        configPanel.dispose();
+        abortController.abort();
+        unlinkAbortSignal();
+        try {
+            cleanup?.();
+        } finally {
+            renderer?.dispose();
+        }
+        throw error;
+    }
+}
+
+function normalizeRenderSessionOptions(options: RenderSessionOptionsInput | undefined): RenderSessionOptions {
+    if (typeof options === 'function') {
+        return {
+            onStats: options,
+        };
+    }
+
+    return options ?? {};
+}
+
+function linkAbortSignal(source: AbortSignal | undefined, target: AbortController) {
+    if (!source) {
+        return () => {};
+    }
+
+    if (source.aborted) {
+        target.abort();
+        return () => {};
+    }
+
+    const abort = () => {
+        target.abort();
+    };
+    source.addEventListener('abort', abort, { once: true });
+
+    return () => {
+        source.removeEventListener('abort', abort);
+    };
+}
+
+function createRuntimeIndexedDBStorage(signal: AbortSignal): RuntimeIndexedDBStorage {
+    const available = 'indexedDB' in globalThis;
+
+    return {
+        available,
+        async get(key: string, options?: VersionedCacheOptions) {
+            if (!available) {
+                return undefined;
+            }
+
+            const record = await readIndexedDBRecord(key, signal);
+
+            if (!record || !versionsMatch(record.version, options?.version)) {
+                return undefined;
+            }
+
+            return record.value;
+        },
+        async set(key: string, value: T, options?: VersionedCacheOptions) {
+            if (!available) {
+                return;
+            }
+
+            await writeIndexedDBRecord(
+                {
+                    key,
+                    version: options?.version ?? 0,
+                    value,
+                },
+                signal,
+            );
+        },
+        async delete(key: string) {
+            if (!available) {
+                return;
+            }
+
+            await deleteIndexedDBRecord(key, signal);
+        },
+        async clear() {
+            if (!available) {
+                return;
+            }
+
+            await clearIndexedDBStore(signal);
+        },
+    };
+}
+
+function createRuntimeLoadingController(onStatus: RenderSessionOptions['onStatus']) {
+    let disposed = false;
+    let manualLoading = false;
+
+    function notify(state: RenderSessionStatus['state'], label?: string) {
+        if (!disposed) {
+            onStatus?.({ state, label });
+        }
+    }
+
+    const controller: RuntimeLoadingController = {
+        show(label?: string) {
+            manualLoading = true;
+            notify('loading', label);
+        },
+        hide() {
+            manualLoading = false;
+            notify('ready');
+        },
+    };
+
+    return {
+        controller,
+        dispose() {
+            disposed = true;
+        },
+        finishInitial() {
+            if (!manualLoading) {
+                notify('ready');
+            }
+        },
+        startInitial() {
+            notify('loading');
+        },
+    };
+}
+
+function createRuntimeConfigPanel(options: RenderSessionConfigPanelOptions | undefined) {
+    const connectedContainer = options?.container ?? undefined;
+    const container = connectedContainer ?? document.createElement('div');
+    const defaultTitle = options?.title ?? container.dataset.configPanelTitle ?? 'Config';
+    let pane: TweakpanePane | undefined;
+
+    hide();
+
+    function show() {
+        container.hidden = false;
+        container.dataset.state = 'active';
+    }
+
+    function hide() {
+        container.hidden = true;
+        delete container.dataset.state;
+    }
+
+    function clear() {
+        pane?.dispose();
+        pane = undefined;
+        container.replaceChildren();
+    }
+
+    const controller: RuntimeConfigPanel = {
+        available: connectedContainer !== undefined,
+        get container() {
+            show();
+            return container;
+        },
+        createPane(paneOptions: { expanded?: boolean; title?: string } = {}) {
+            clear();
+            show();
+            pane = new TweakpaneApi.Pane({
+                container,
+                expanded: paneOptions.expanded ?? getDefaultConfigPaneExpanded(),
+                title: paneOptions.title ?? defaultTitle,
+            });
+            return pane;
+        },
+        clear() {
+            clear();
+        },
+        hide() {
+            hide();
+        },
+        show() {
+            show();
+        },
+    };
+
+    return {
+        controller,
+        dispose() {
+            clear();
+            hide();
+        },
+    };
+}
+
+function getDefaultConfigPaneExpanded() {
+    return !window.matchMedia('(max-width: 900px)').matches;
+}
+
+function throwIfAborted(signal: AbortSignal) {
+    throwIfAbortedWithMessage(signal, RENDER_RUNTIME_ABORT_MESSAGE);
+}
+
+function createAbortError() {
+    return createAbortErrorWithMessage(RENDER_RUNTIME_ABORT_MESSAGE);
+}
+
+function abortable(promise: Promise, signal: AbortSignal) {
+    return abortableWithMessage(promise, signal, RENDER_RUNTIME_ABORT_MESSAGE);
+}
+
+function versionsMatch(recordVersion: number | string | undefined, requestedVersion: number | string | undefined) {
+    return requestedVersion === undefined || recordVersion === requestedVersion;
+}
+
+async function readIndexedDBRecord(key: string, signal: AbortSignal): Promise | undefined> {
+    const database = await openRuntimeIndexedDB(signal);
+
+    try {
+        const transaction = database.transaction(RENDER_RUNTIME_CACHE_STORE_NAME, 'readonly');
+        const done = waitForIndexedDBTransaction(transaction, signal);
+        const request = transaction.objectStore(RENDER_RUNTIME_CACHE_STORE_NAME).get(key);
+        const record = await indexedDBRequestToPromise | undefined>(request, signal);
+        await done;
+
+        return record;
+    } finally {
+        database.close();
+    }
+}
+
+async function writeIndexedDBRecord(record: IndexedDBCacheRecord, signal: AbortSignal) {
+    const database = await openRuntimeIndexedDB(signal);
+
+    try {
+        const transaction = database.transaction(RENDER_RUNTIME_CACHE_STORE_NAME, 'readwrite');
+        const done = waitForIndexedDBTransaction(transaction, signal);
+        transaction.objectStore(RENDER_RUNTIME_CACHE_STORE_NAME).put(record);
+        await done;
+    } finally {
+        database.close();
+    }
+}
+
+async function deleteIndexedDBRecord(key: string, signal: AbortSignal) {
+    const database = await openRuntimeIndexedDB(signal);
+
+    try {
+        const transaction = database.transaction(RENDER_RUNTIME_CACHE_STORE_NAME, 'readwrite');
+        const done = waitForIndexedDBTransaction(transaction, signal);
+        transaction.objectStore(RENDER_RUNTIME_CACHE_STORE_NAME).delete(key);
+        await done;
+    } finally {
+        database.close();
+    }
+}
+
+async function clearIndexedDBStore(signal: AbortSignal) {
+    const database = await openRuntimeIndexedDB(signal);
+
+    try {
+        const transaction = database.transaction(RENDER_RUNTIME_CACHE_STORE_NAME, 'readwrite');
+        const done = waitForIndexedDBTransaction(transaction, signal);
+        transaction.objectStore(RENDER_RUNTIME_CACHE_STORE_NAME).clear();
+        await done;
+    } finally {
+        database.close();
+    }
+}
+
+function openRuntimeIndexedDB(
+    signal: AbortSignal,
+    version?: number,
+    schemaRepairAttempted = false,
+): Promise {
+    if (signal.aborted) {
+        return Promise.reject(createAbortError());
+    }
+
+    return new Promise((resolve, reject) => {
+        const request =
+            version === undefined
+                ? indexedDB.open(RENDER_RUNTIME_DB_NAME)
+                : indexedDB.open(RENDER_RUNTIME_DB_NAME, version);
+        const rejectAbort = () => {
+            reject(createAbortError());
+        };
+
+        signal.addEventListener('abort', rejectAbort, { once: true });
+
+        request.onupgradeneeded = () => {
+            const database = request.result;
+
+            if (!database.objectStoreNames.contains(RENDER_RUNTIME_CACHE_STORE_NAME)) {
+                database.createObjectStore(RENDER_RUNTIME_CACHE_STORE_NAME, { keyPath: 'key' });
+            }
+        };
+        request.onsuccess = () => {
+            signal.removeEventListener('abort', rejectAbort);
+            const database = request.result;
+
+            if (signal.aborted) {
+                database.close();
+                reject(createAbortError());
+                return;
+            }
+
+            if (!database.objectStoreNames.contains(RENDER_RUNTIME_CACHE_STORE_NAME)) {
+                if (schemaRepairAttempted) {
+                    database.close();
+                    reject(new Error(`IndexedDB store "${RENDER_RUNTIME_CACHE_STORE_NAME}" could not be created.`));
+                    return;
+                }
+
+                const nextVersion = database.version + 1;
+                database.close();
+                openRuntimeIndexedDB(signal, nextVersion, true).then(resolve, reject);
+                return;
+            }
+
+            resolve(database);
+        };
+        request.onerror = () => {
+            signal.removeEventListener('abort', rejectAbort);
+            reject(request.error ?? new Error('IndexedDB open failed.'));
+        };
+        request.onblocked = () => {
+            signal.removeEventListener('abort', rejectAbort);
+            reject(new Error('IndexedDB upgrade is blocked by another open tab.'));
+        };
+    });
+}
+
+function indexedDBRequestToPromise(request: IDBRequest, signal: AbortSignal): Promise {
+    throwIfAborted(signal);
+
+    return new Promise((resolve, reject) => {
+        const rejectAbort = () => {
+            reject(createAbortError());
+        };
+
+        signal.addEventListener('abort', rejectAbort, { once: true });
+
+        request.onsuccess = () => {
+            signal.removeEventListener('abort', rejectAbort);
+            resolve(request.result);
+        };
+        request.onerror = () => {
+            signal.removeEventListener('abort', rejectAbort);
+            reject(request.error ?? new Error('IndexedDB request failed.'));
+        };
+    });
+}
+
+function waitForIndexedDBTransaction(transaction: IDBTransaction, signal: AbortSignal): Promise {
+    throwIfAborted(signal);
+
+    return new Promise((resolve, reject) => {
+        const cleanup = () => {
+            signal.removeEventListener('abort', rejectAbort);
+        };
+        const rejectAbort = () => {
+            try {
+                transaction.abort();
+            } catch {
+                // The transaction may have already completed.
+            }
+
+            reject(createAbortError());
+        };
+
+        signal.addEventListener('abort', rejectAbort, { once: true });
+
+        transaction.oncomplete = () => {
+            cleanup();
+            resolve();
+        };
+        transaction.onerror = () => {
+            cleanup();
+            reject(transaction.error ?? new Error('IndexedDB transaction failed.'));
+        };
+        transaction.onabort = () => {
+            cleanup();
+            reject(transaction.error ?? createAbortError());
+        };
+    });
+}
+
+async function compileRenderRuntimeModule(code: string): Promise {
+    const ts = await import('typescript');
+    const output = transpileRenderRuntimeCode(ts, code);
+    const module = await importModule(output);
+    const entry = module.default;
+
+    if (typeof entry !== 'function') {
+        throw new Error('Playground code must export a default function.');
+    }
+
+    return entry as RenderRuntimeEntry;
+}
+
+function transpileRenderRuntimeCode(ts: TypeScriptModule, code: string) {
+    const result = ts.transpileModule(code, {
+        compilerOptions: {
+            allowJs: true,
+            esModuleInterop: true,
+            module: ts.ModuleKind.ESNext,
+            strict: true,
+            target: ts.ScriptTarget.ES2020,
+        },
+        reportDiagnostics: true,
+    });
+
+    const diagnostic = result.diagnostics?.find(item => item.category === ts.DiagnosticCategory.Error);
+    if (diagnostic) {
+        throw new Error(formatDiagnostic(ts, diagnostic));
+    }
+
+    const outputText = replaceRuntimeImports(result.outputText);
+
+    if (/^\s*import\s/m.test(outputText)) {
+        throw new Error('Playground code can only import runtime objects from @manycore/aholo-viewer and tweakpane.');
+    }
+
+    return `${outputText}\n//# sourceURL=aholo-render-runtime.js`;
+}
+
+function replaceRuntimeImports(source: string) {
+    return source
+        .replace(
+            /^\s*import\s+\{([\s\S]*?)\}\s+from\s+["']@manycore\/aholo-viewer["'];?\s*$/gm,
+            (_match, specifiers: string) => {
+                const bindings = specifiers
+                    .split(',')
+                    .map(specifier => specifier.trim())
+                    .filter(Boolean)
+                    .map(specifier => specifier.replace(/\s+as\s+/u, ': '))
+                    .join(', ');
+
+                return `const { ${bindings} } = globalThis.__AHOLO_RENDER_RUNTIME_API__;`;
+            },
+        )
+        .replace(
+            /^\s*import\s+\*\s+as\s+([A-Za-z_$][\w$]*)\s+from\s+["']@manycore\/aholo-viewer["'];?\s*$/gm,
+            'const $1 = globalThis.__AHOLO_RENDER_RUNTIME_API__;',
+        )
+        .replace(/^\s*import\s+\{([\s\S]*?)\}\s+from\s+["']tweakpane["'];?\s*$/gm, (_match, specifiers: string) => {
+            const bindings = specifiers
+                .split(',')
+                .map(specifier => specifier.trim())
+                .filter(Boolean)
+                .map(specifier => specifier.replace(/\s+as\s+/u, ': '))
+                .join(', ');
+
+            return `const { ${bindings} } = globalThis.__AHOLO_TWEAKPANE_RUNTIME_API__;`;
+        })
+        .replace(
+            /^\s*import\s+\*\s+as\s+([A-Za-z_$][\w$]*)\s+from\s+["']tweakpane["'];?\s*$/gm,
+            'const $1 = globalThis.__AHOLO_TWEAKPANE_RUNTIME_API__;',
+        );
+}
+
+async function importModule(source: string) {
+    const runtimeGlobal = globalThis as typeof globalThis & RuntimeGlobal;
+    runtimeGlobal.__AHOLO_RENDER_RUNTIME_API__ = RendererApi;
+    runtimeGlobal.__AHOLO_TWEAKPANE_RUNTIME_API__ = TweakpaneApi;
+
+    const url = URL.createObjectURL(
+        new Blob([source], {
+            type: 'text/javascript',
+        }),
+    );
+
+    try {
+        return await import(/* @vite-ignore */ url);
+    } finally {
+        URL.revokeObjectURL(url);
+    }
+}
+
+function formatDiagnostic(ts: TypeScriptModule, diagnostic: Diagnostic) {
+    return ts.flattenDiagnosticMessageText(diagnostic.messageText, '\n');
+}
+
+class RenderSessionRenderer implements RuntimeRenderer {
+    readonly #viewer: Viewer;
+    readonly #scene: Scene3D;
+    readonly #camera: Camera3D;
+    readonly #control: CameraControl;
+    readonly #onStats: ((stats: RenderStats) => void) | undefined;
+    readonly #frameCallbacks: FrameCallback[] = [];
+    readonly #beginFrame: (() => void) | undefined;
+    readonly #endFrame: (() => void) | undefined;
+    #rafRequestId: number | undefined;
+    #resizeTimer: number | undefined;
+    #lastFrameTime = 0;
+    #renderRequested = true;
+    #disposed = false;
+    #stats: RenderStats = {
+        drawCalls: 0,
+        objects: 0,
+    };
+
+    constructor(
+        surface: HTMLElement,
+        onStats?: (stats: RenderStats) => void,
+        beginFrame?: () => void,
+        endFrame?: () => void,
+        options: RenderSessionRendererOptions = {},
+    ) {
+        this.#onStats = onStats;
+        this.#beginFrame = beginFrame;
+        this.#endFrame = endFrame;
+
+        removeEngineCanvases(surface);
+        this.#viewer = RendererApi.createViewer(`aholo-render-${++renderSessionId}`, surface, {
+            antialiasing: options.antialiasing ?? false,
+        });
+        RendererApi.setViewerConfig(this.#viewer, {
+            pixelRatio: (options.pixelRatio ?? 1) / window.devicePixelRatio,
+            pipeline: {
+                Background: {
+                    background: {
+                        active: RendererApi.BackgroundMode.BasicBackground,
+                        basic: {
+                            color: new RendererApi.Color(0, 0, 0),
+                        },
+                    },
+                    ground: {
+                        enabled: false,
+                    },
+                },
+                TAA: {
+                    enabled: false,
+                },
+            },
+        });
+        this.#viewer.requestRenderHandler = this.requestRender;
+        this.#scene = new RendererApi.Scene3D();
+        this.#camera = new RendererApi.PerspectiveCamera(60, 1, 0.1, 2000);
+        this.#viewer.setScene(this.#scene);
+        this.#viewer.setCamera(this.#camera);
+        this.#control = new CameraControl(this.#camera, surface, {
+            enabled: false,
+        });
+
+        this.#resizeTimer = window.setTimeout(() => {
+            this.resize();
+        }, 0);
+    }
+
+    get control() {
+        return this.#control;
+    }
+
+    get viewer() {
+        return this.#viewer;
+    }
+
+    get scene() {
+        return this.#scene;
+    }
+
+    get stats() {
+        return this.#stats;
+    }
+
+    frame(callback: FrameCallback): void {
+        this.#frameCallbacks.push(callback);
+        this.requestRender();
+    }
+
+    render(): void {
+        if (this.#disposed) {
+            return;
+        }
+
+        syncCameraAspect(this.#viewer.getCamera(), this.#viewer);
+        this.#viewer.getScene().notifySceneChange();
+        this.requestRender();
+    }
+
+    requestRender = () => {
+        this.#renderRequested = true;
+    };
+
+    resize(): void {
+        if (this.#disposed) {
+            return;
+        }
+
+        this.#viewer.resize();
+
+        syncCameraAspect(this.#viewer.getCamera(), this.#viewer);
+        this.requestRender();
+    }
+
+    start() {
+        if (this.#disposed || this.#rafRequestId !== undefined) {
+            return;
+        }
+
+        this.#viewer.resume();
+        this.resize();
+        this.#rafRequestId = window.requestAnimationFrame(this.#tick);
+    }
+
+    pause() {
+        if (this.#disposed || this.#rafRequestId === undefined) {
+            return;
+        }
+
+        window.cancelAnimationFrame(this.#rafRequestId);
+        this.#rafRequestId = undefined;
+        this.#lastFrameTime = 0;
+        // Also stops the engine-internal FPS/tick loop so a hidden surface
+        // schedules no animation frames at all.
+        this.#viewer.pause();
+    }
+
+    dispose() {
+        if (this.#disposed) {
+            return;
+        }
+
+        this.#disposed = true;
+
+        if (this.#resizeTimer !== undefined) {
+            window.clearTimeout(this.#resizeTimer);
+            this.#resizeTimer = undefined;
+        }
+
+        if (this.#rafRequestId !== undefined) {
+            window.cancelAnimationFrame(this.#rafRequestId);
+            this.#rafRequestId = undefined;
+        }
+
+        this.#viewer.requestRenderHandler = undefined;
+        this.#control.dispose();
+        this.#viewer.destroy();
+    }
+
+    #tick = (time: number) => {
+        if (this.#disposed) {
+            return;
+        }
+        this.#beginFrame?.();
+        const delta = this.#lastFrameTime > 0 ? Math.min((time - this.#lastFrameTime) / 1000, 0.1) : 0;
+        this.#lastFrameTime = time;
+
+        let shouldRender = this.#renderRequested;
+        for (const callback of this.#frameCallbacks) {
+            shouldRender = callback({ time, delta }) || shouldRender;
+        }
+        if (shouldRender) {
+            this.#renderRequested = false;
+            this.#viewer.render();
+            this.#updateStats();
+        }
+        this.#endFrame?.();
+        this.#rafRequestId = window.requestAnimationFrame(this.#tick);
+    };
+
+    #updateStats() {
+        const renderStats = this.#viewer.getRenderStatistics();
+        this.#stats = {
+            drawCalls: Number(renderStats.calls ?? 0),
+            objects: countSceneObjects(this.#viewer.getScene()),
+        };
+        this.#onStats?.(this.#stats);
+    }
+}
+
+function prepareRenderSurface(target: HTMLElement, accent: string) {
+    if (!(target instanceof HTMLCanvasElement)) {
+        styleRenderSurface(target, accent);
+        return target;
+    }
+
+    let surface = renderSurfaces.get(target);
+
+    if (!surface) {
+        surface = document.createElement('div');
+        renderSurfaces.set(target, surface);
+        target.before(surface);
+    } else if (!surface.isConnected) {
+        target.before(surface);
+    }
+
+    for (const className of target.classList) {
+        surface.classList.add(className);
+    }
+
+    target.hidden = true;
+    target.style.display = 'none';
+    target.setAttribute('aria-hidden', 'true');
+
+    styleRenderSurface(surface, accent, target);
+    return surface;
+}
+
+function styleRenderSurface(surface: HTMLElement, accent: string, source?: HTMLElement) {
+    surface.classList.add('renderer-runtime-surface');
+    surface.dataset.rendererRuntimeSurface = 'true';
+    surface.style.setProperty('--runtime-accent', accent);
+    surface.style.display = 'block';
+    surface.style.width = '100%';
+    surface.style.height = '100%';
+    surface.style.minHeight = '0';
+    surface.style.overflow = 'hidden';
+
+    if (!source) {
+        surface.style.position ||= 'relative';
+        return;
+    }
+
+    const sourceStyle = window.getComputedStyle(source);
+
+    if (sourceStyle.position === 'absolute' || sourceStyle.position === 'fixed') {
+        surface.style.position = sourceStyle.position;
+        surface.style.inset = '0';
+        surface.style.zIndex = sourceStyle.zIndex;
+    } else {
+        surface.style.position = 'relative';
+    }
+}
+
+function removeEngineCanvases(surface: HTMLElement) {
+    for (const child of Array.from(surface.children)) {
+        if (child instanceof HTMLCanvasElement && child.dataset.engine) {
+            child.remove();
+        }
+    }
+}
diff --git a/website/src/client/rendering.ts b/website/src/client/rendering.ts
new file mode 100644
index 0000000..17f8426
--- /dev/null
+++ b/website/src/client/rendering.ts
@@ -0,0 +1,77 @@
+import type { Camera3D, Viewer } from '@manycore/aholo-viewer';
+
+export function syncCameraAspect(camera: Camera3D, viewer: Viewer) {
+    if (!('aspect' in camera)) {
+        return;
+    }
+
+    const { width, height } = viewer.getSize();
+    const aspect = width > 0 && height > 0 ? width / height : 1;
+    const perspectiveCamera = camera as Camera3D & {
+        aspect: number;
+        updateProjectionMatrix?: () => void;
+    };
+
+    if (Number.isFinite(aspect) && Math.abs(perspectiveCamera.aspect - aspect) > 0.001) {
+        perspectiveCamera.aspect = aspect;
+        perspectiveCamera.updateProjectionMatrix?.();
+    }
+}
+
+export function countSceneObjects(scene: unknown) {
+    let count = 0;
+
+    function visit(node: unknown) {
+        if (!node || typeof node !== 'object') {
+            return;
+        }
+
+        if (node !== scene && isRenderableSceneObject(node)) {
+            count += 1;
+        }
+
+        if ('children' in node && Array.isArray(node.children)) {
+            for (const child of node.children) {
+                visit(child);
+            }
+        }
+    }
+
+    visit(scene);
+    return count;
+}
+
+export async function abortable(promise: Promise, signal: AbortSignal, abortMessage: string): Promise {
+    throwIfAborted(signal, abortMessage);
+
+    return new Promise((resolve, reject) => {
+        const abort = () => {
+            reject(createAbortError(abortMessage));
+        };
+
+        signal.addEventListener('abort', abort, { once: true });
+        promise.then(resolve, reject).finally(() => {
+            signal.removeEventListener('abort', abort);
+        });
+    });
+}
+
+export function throwIfAborted(signal: AbortSignal, abortMessage: string) {
+    if (signal.aborted) {
+        throw createAbortError(abortMessage);
+    }
+}
+
+export function createAbortError(abortMessage: string) {
+    return new DOMException(abortMessage, 'AbortError');
+}
+
+function isRenderableSceneObject(node: object) {
+    return (
+        ('isMesh' in node && node.isMesh === true) ||
+        ('isSplat' in node && node.isSplat === true) ||
+        ('isSprite' in node && node.isSprite === true) ||
+        ('isPoints' in node && node.isPoints === true) ||
+        ('isLine' in node && node.isLine === true)
+    );
+}
diff --git a/website/src/client/split-pane.ts b/website/src/client/split-pane.ts
new file mode 100644
index 0000000..b2d8caf
--- /dev/null
+++ b/website/src/client/split-pane.ts
@@ -0,0 +1,241 @@
+interface SplitPaneController {
+    dispose(): void;
+    getCollapsed(): boolean;
+    getSize(): number;
+    setCollapsed(collapsed: boolean, options?: SplitPaneUpdateOptions): void;
+    setSize(value: number, options?: SplitPaneUpdateOptions): void;
+}
+
+interface SplitPaneUpdateOptions {
+    persist?: boolean;
+}
+
+interface SplitPaneOptions {
+    container: HTMLElement;
+    splitter: HTMLElement;
+    collapsedDatasetKey: string;
+    cssProperty: string;
+    defaultValue: number;
+    valueUnit: 'px' | '%';
+    keyboardStep: number;
+    clampValue(value: number, rect: DOMRect): number;
+    shouldCollapse(value: number, rect: DOMRect): boolean;
+    expandKey?: 'ArrowLeft' | 'ArrowRight';
+    getAriaValue?: (value: number, rect: DOMRect) => number;
+    getInitialCollapsed?: () => boolean;
+    isDisabled?: () => boolean;
+    onChange?: () => void;
+    onCollapsedChange?: (collapsed: boolean, options: Required) => void;
+    onValueChange?: (value: number, options: Required) => void;
+    pointerToValue?: (event: PointerEvent, rect: DOMRect) => number;
+    toggleWhenDisabled?: boolean;
+}
+
+const DEFAULT_UPDATE_OPTIONS: Required = {
+    persist: true,
+};
+
+export function mountSplitPane(options: SplitPaneOptions): SplitPaneController {
+    const {
+        container,
+        splitter,
+        collapsedDatasetKey,
+        cssProperty,
+        defaultValue,
+        valueUnit,
+        keyboardStep,
+        clampValue,
+        shouldCollapse,
+        expandKey = 'ArrowRight',
+        getAriaValue = value => value,
+        getInitialCollapsed = () => false,
+        isDisabled = () => false,
+        onChange,
+        onCollapsedChange,
+        onValueChange,
+        pointerToValue = (event, rect) => event.clientX - rect.left,
+        toggleWhenDisabled = false,
+    } = options;
+    const collapseKey = expandKey === 'ArrowRight' ? 'ArrowLeft' : 'ArrowRight';
+    const resizeLabel = splitter.dataset.resizeLabel ?? splitter.getAttribute('aria-label') ?? 'Resize panes';
+    const expandLabel = splitter.dataset.expandLabel ?? 'Expand pane';
+
+    let activePointerId: number | undefined;
+    let didDrag = false;
+    let pointerStartX = 0;
+    let collapsed = getInitialCollapsed();
+    let value = defaultValue;
+
+    setSize(value, { persist: false });
+    setCollapsed(collapsed, { persist: false });
+
+    splitter.addEventListener('pointerdown', handlePointerDown);
+    splitter.addEventListener('pointermove', handlePointerMove);
+    splitter.addEventListener('pointerup', endPointerResize);
+    splitter.addEventListener('pointercancel', endPointerResize);
+    splitter.addEventListener('click', handleClick);
+    splitter.addEventListener('keydown', handleKeydown);
+
+    return {
+        dispose() {
+            splitter.removeEventListener('pointerdown', handlePointerDown);
+            splitter.removeEventListener('pointermove', handlePointerMove);
+            splitter.removeEventListener('pointerup', endPointerResize);
+            splitter.removeEventListener('pointercancel', endPointerResize);
+            splitter.removeEventListener('click', handleClick);
+            splitter.removeEventListener('keydown', handleKeydown);
+
+            if (activePointerId !== undefined && splitter.hasPointerCapture(activePointerId)) {
+                splitter.releasePointerCapture(activePointerId);
+            }
+
+            activePointerId = undefined;
+            delete container.dataset.resizing;
+        },
+        getCollapsed() {
+            return collapsed;
+        },
+        getSize() {
+            return value;
+        },
+        setCollapsed,
+        setSize,
+    };
+
+    function handlePointerDown(event: PointerEvent) {
+        if (isDisabled()) {
+            return;
+        }
+
+        activePointerId = event.pointerId;
+        pointerStartX = event.clientX;
+        didDrag = false;
+        splitter.setPointerCapture(event.pointerId);
+        container.dataset.resizing = 'true';
+        updateFromPointer(event);
+    }
+
+    function handlePointerMove(event: PointerEvent) {
+        if (activePointerId !== event.pointerId) {
+            return;
+        }
+
+        didDrag = didDrag || Math.abs(event.clientX - pointerStartX) > 4;
+        updateFromPointer(event);
+    }
+
+    function endPointerResize(event: PointerEvent) {
+        if (activePointerId !== event.pointerId) {
+            return;
+        }
+
+        if (splitter.hasPointerCapture(event.pointerId)) {
+            splitter.releasePointerCapture(event.pointerId);
+        }
+
+        activePointerId = undefined;
+        delete container.dataset.resizing;
+    }
+
+    function handleClick() {
+        if (didDrag) {
+            didDrag = false;
+            return;
+        }
+
+        if (isDisabled()) {
+            if (toggleWhenDisabled) {
+                setCollapsed(!collapsed);
+            }
+            return;
+        }
+
+        if (collapsed) {
+            setCollapsed(false);
+        }
+    }
+
+    function handleKeydown(event: KeyboardEvent) {
+        if (isDisabled() || (event.key !== collapseKey && event.key !== expandKey)) {
+            return;
+        }
+
+        event.preventDefault();
+
+        if (collapsed) {
+            if (event.key === expandKey) {
+                setCollapsed(false);
+            }
+            return;
+        }
+
+        const direction = event.key === collapseKey ? -1 : 1;
+        const nextValue = value + direction * keyboardStep;
+        const rect = container.getBoundingClientRect();
+
+        if (event.key === collapseKey && shouldCollapse(nextValue, rect)) {
+            setCollapsed(true);
+            return;
+        }
+
+        setSize(nextValue);
+    }
+
+    function updateFromPointer(event: PointerEvent) {
+        const rect = container.getBoundingClientRect();
+        const nextValue = pointerToValue(event, rect);
+
+        if (shouldCollapse(nextValue, rect)) {
+            setCollapsed(true);
+            return;
+        }
+
+        setSize(nextValue);
+    }
+
+    function setCollapsed(nextCollapsed: boolean, updateOptions: SplitPaneUpdateOptions = {}) {
+        const resolvedOptions = {
+            ...DEFAULT_UPDATE_OPTIONS,
+            ...updateOptions,
+        };
+
+        collapsed = nextCollapsed;
+
+        if (!nextCollapsed) {
+            applyValue(value);
+        }
+
+        syncSplitter();
+        onCollapsedChange?.(nextCollapsed, resolvedOptions);
+        onChange?.();
+    }
+
+    function setSize(nextValue: number, updateOptions: SplitPaneUpdateOptions = {}) {
+        const resolvedOptions = {
+            ...DEFAULT_UPDATE_OPTIONS,
+            ...updateOptions,
+        };
+        const rect = container.getBoundingClientRect();
+
+        value = clampValue(nextValue, rect);
+        collapsed = false;
+        applyValue(value);
+        syncSplitter();
+        onValueChange?.(value, resolvedOptions);
+        onCollapsedChange?.(false, resolvedOptions);
+        onChange?.();
+    }
+
+    function applyValue(nextValue: number) {
+        container.style.setProperty(cssProperty, `${nextValue}${valueUnit}`);
+    }
+
+    function syncSplitter() {
+        container.dataset[collapsedDatasetKey] = String(collapsed);
+        splitter.setAttribute('aria-expanded', String(!collapsed));
+        splitter.setAttribute('aria-label', collapsed ? expandLabel : resizeLabel);
+
+        const ariaValue = collapsed ? 0 : Math.round(getAriaValue(value, container.getBoundingClientRect()));
+        splitter.setAttribute('aria-valuenow', String(ariaValue));
+    }
+}
diff --git a/website/src/client/viewer.ts b/website/src/client/viewer.ts
new file mode 100644
index 0000000..bd3224e
--- /dev/null
+++ b/website/src/client/viewer.ts
@@ -0,0 +1,1596 @@
+import {
+    BackgroundMode,
+    Color,
+    PerspectiveCamera,
+    Scene3D,
+    SplatLoader,
+    SplatUtils,
+    ToneMapping,
+    Vector3,
+    createViewer,
+    createViewerContext,
+    setViewerConfig,
+    type Object3D,
+    type Viewer,
+} from '@manycore/aholo-viewer';
+import { Pane } from 'tweakpane';
+import { CameraControl } from './camera-control.js';
+import {
+    abortable as abortableWithMessage,
+    syncCameraAspect,
+    throwIfAborted as throwIfAbortedWithMessage,
+} from './rendering.js';
+import { mountWorkspaceFullscreenMode } from './workspace-fullscreen.js';
+
+const { SplatFileType, SplatPackType, detectSplatFileType, parseSplatData } = SplatLoader;
+const { LodSplat, createSplat } = SplatUtils;
+const LOD_MAGIC_CODE = 0x262834;
+const VIEWER_ABORT_MESSAGE = 'Viewer loading was aborted.';
+const LEFT_RAIL_COLLAPSED_STORAGE_KEY = 'aholo:viewer:left-collapsed';
+const RIGHT_RAIL_COLLAPSED_STORAGE_KEY = 'aholo:viewer:right-collapsed';
+const FPS_DISPLAY_INTERVAL_MS = 250;
+const FPS_SMOOTHING_FACTOR = 0.08;
+const SUPPORTED_FILE_EXTENSIONS = ['.ply', '.spz', '.splat', '.ksplat', '.lcc', '.sog', '.esz', '.json'] as const;
+
+type SplatFileTypeValue = (typeof SplatFileType)[keyof typeof SplatFileType];
+type SplatPackTypeValue = (typeof SplatPackType)[keyof typeof SplatPackType];
+type ToneMappingValue = (typeof ToneMapping)[keyof typeof ToneMapping];
+type SplattingPresetId =
+    | 'custom'
+    | 'maxQuality'
+    | 'qualityFirst'
+    | 'balanced'
+    | 'performanceFirst'
+    | 'extremePerformance0'
+    | 'extremePerformance1';
+type SplatObject = Awaited>;
+type LodSplatInstance = InstanceType;
+type LodMeta = ConstructorParameters[0] & {
+    counts?: number;
+    files?: string[];
+    levels?: number;
+    magicCode?: number;
+    type?: string;
+};
+
+interface ViewerPageConfig {
+    labels: ViewerLabels;
+}
+
+interface ViewerLabels {
+    settings: string;
+    preset: string;
+    presetCustom: string;
+    presetMaxQuality: string;
+    presetQualityFirst: string;
+    presetBalanced: string;
+    presetPerformanceFirst: string;
+    presetExtremePerformance0: string;
+    presetExtremePerformance1: string;
+    presetPackTypeTip: string;
+    packTypeTip: string;
+    statusReady: string;
+    statusLoading: string;
+    statusError: string;
+    unsupportedFileType: string;
+    emptyFiles: string;
+    removeFile: string;
+}
+
+type Source =
+    | {
+          kind: 'file';
+          file: File;
+          name: string;
+          size: number;
+      }
+    | {
+          kind: 'url';
+          url: string;
+          name: string;
+          size?: number;
+      };
+
+interface FileRecord {
+    name: string;
+    format: string;
+    size: string;
+    status: 'loading' | 'ready' | 'error';
+    error?: string;
+}
+
+interface ViewerParams {
+    splattingPreset: SplattingPresetId;
+    pixelRatio: number;
+    splatPackType: SplatPackTypeValue;
+    maxSh: number;
+    maxStdDev: number;
+    packHighPrecisionEnabled: boolean;
+    precalculateEnabled: boolean;
+    cameraRelativeEnabled: boolean;
+    sortedLayoutEnabled: boolean;
+    autoFreeResourceOnGpuPacked: boolean;
+    renderAttachHighPrecisionEnabled: boolean;
+    normalizedFalloff: boolean;
+    preBlurAmount: number;
+    blurAmount: number;
+    focalAdjustment: number;
+    detailCullingThreshold: number;
+    maxPixelRadius: number;
+    minIntervalMs: number;
+    sortSplatDistance: number;
+    sortSplatCoorient: number;
+    sortCameraDistance: number;
+    sortCameraCoorient: number;
+    sortHighPrecisionEnabled: boolean;
+    toneMappingEnabled: boolean;
+    toneMapping: ToneMappingValue;
+    exposure: number;
+    highlightEnabled: boolean;
+    highlightSize: number;
+    highlightColor: string;
+    lodMinLevel: number;
+    lodMaxBudget: number;
+    lodBackgroundPenalty: number;
+    lodOutsidePenalty: number;
+    lodBehindPenalty: number;
+    lodBehindTolerance: number;
+    lodBehindDistanceTolerance: number;
+    lodHysteresisTicks: number;
+    lodSchedulerParallelCounts: number;
+    lodSchedulerExistingTaskLimit: number;
+    lodSchedulerMinDuration: number;
+}
+
+const DEFAULT_SORT_PARAMS: Pick<
+    ViewerParams,
+    'minIntervalMs' | 'sortSplatDistance' | 'sortSplatCoorient' | 'sortCameraDistance' | 'sortCameraCoorient'
+> = {
+    minIntervalMs: 0,
+    sortSplatDistance: 0.1,
+    sortSplatCoorient: 0.99999,
+    sortCameraDistance: 1,
+    sortCameraCoorient: 0.99,
+};
+
+const EXTREME_PERFORMANCE_SORT_PARAMS: typeof DEFAULT_SORT_PARAMS = {
+    ...DEFAULT_SORT_PARAMS,
+    minIntervalMs: 160,
+    sortSplatCoorient: 0.999999,
+};
+
+const VIEWER_SPLATTING_PRESETS: Record }> = {
+    custom: {
+        params: {},
+    },
+    maxQuality: {
+        params: {
+            ...DEFAULT_SORT_PARAMS,
+            splatPackType: SplatPackType.Compressed,
+            maxSh: 3,
+            maxStdDev: 8,
+            packHighPrecisionEnabled: true,
+            precalculateEnabled: true,
+            cameraRelativeEnabled: false,
+            sortedLayoutEnabled: false,
+            autoFreeResourceOnGpuPacked: true,
+            renderAttachHighPrecisionEnabled: true,
+            normalizedFalloff: true,
+            preBlurAmount: 0.3,
+            blurAmount: 0,
+            focalAdjustment: 2,
+            detailCullingThreshold: 0,
+            maxPixelRadius: 1024,
+            sortHighPrecisionEnabled: true,
+        },
+    },
+    qualityFirst: {
+        params: {
+            ...DEFAULT_SORT_PARAMS,
+            splatPackType: SplatPackType.Compressed,
+            maxSh: 3,
+            maxStdDev: 8,
+            packHighPrecisionEnabled: true,
+            precalculateEnabled: true,
+            cameraRelativeEnabled: false,
+            sortedLayoutEnabled: false,
+            autoFreeResourceOnGpuPacked: true,
+            renderAttachHighPrecisionEnabled: false,
+            normalizedFalloff: false,
+            preBlurAmount: 0.3,
+            blurAmount: 0,
+            focalAdjustment: 2,
+            detailCullingThreshold: 1,
+            maxPixelRadius: 1024,
+            sortHighPrecisionEnabled: false,
+        },
+    },
+    balanced: {
+        params: {
+            ...DEFAULT_SORT_PARAMS,
+            splatPackType: SplatPackType.SuperCompressed,
+            maxSh: 3,
+            maxStdDev: 8,
+            packHighPrecisionEnabled: false,
+            precalculateEnabled: true,
+            cameraRelativeEnabled: true,
+            sortedLayoutEnabled: false,
+            autoFreeResourceOnGpuPacked: false,
+            renderAttachHighPrecisionEnabled: false,
+            normalizedFalloff: false,
+            preBlurAmount: 0.3,
+            blurAmount: 0,
+            focalAdjustment: 2,
+            detailCullingThreshold: 1,
+            maxPixelRadius: 1024,
+            sortHighPrecisionEnabled: false,
+        },
+    },
+    performanceFirst: {
+        params: {
+            ...DEFAULT_SORT_PARAMS,
+            splatPackType: SplatPackType.SuperCompressed,
+            maxSh: 3,
+            maxStdDev: 5,
+            packHighPrecisionEnabled: false,
+            precalculateEnabled: true,
+            cameraRelativeEnabled: false,
+            sortedLayoutEnabled: false,
+            autoFreeResourceOnGpuPacked: true,
+            renderAttachHighPrecisionEnabled: false,
+            normalizedFalloff: false,
+            preBlurAmount: 0.3,
+            blurAmount: 0,
+            focalAdjustment: 2,
+            detailCullingThreshold: 1,
+            maxPixelRadius: 1024,
+            sortHighPrecisionEnabled: false,
+        },
+    },
+    extremePerformance0: {
+        params: {
+            ...EXTREME_PERFORMANCE_SORT_PARAMS,
+            splatPackType: SplatPackType.SuperCompressed,
+            maxSh: 0,
+            maxStdDev: 5,
+            packHighPrecisionEnabled: false,
+            precalculateEnabled: false,
+            cameraRelativeEnabled: false,
+            sortedLayoutEnabled: true,
+            autoFreeResourceOnGpuPacked: true,
+            renderAttachHighPrecisionEnabled: false,
+            normalizedFalloff: false,
+            preBlurAmount: 0.3,
+            blurAmount: 0,
+            focalAdjustment: 2,
+            detailCullingThreshold: 4,
+            maxPixelRadius: 1024,
+            sortHighPrecisionEnabled: false,
+        },
+    },
+    extremePerformance1: {
+        params: {
+            ...EXTREME_PERFORMANCE_SORT_PARAMS,
+            splatPackType: SplatPackType.Sog,
+            maxSh: 0,
+            maxStdDev: 5,
+            packHighPrecisionEnabled: false,
+            precalculateEnabled: false,
+            cameraRelativeEnabled: false,
+            sortedLayoutEnabled: true,
+            autoFreeResourceOnGpuPacked: true,
+            renderAttachHighPrecisionEnabled: false,
+            normalizedFalloff: false,
+            preBlurAmount: 0.3,
+            blurAmount: 0,
+            focalAdjustment: 2,
+            detailCullingThreshold: 4,
+            maxPixelRadius: 1024,
+            sortHighPrecisionEnabled: false,
+        },
+    },
+};
+
+export async function mountViewerPage(root: HTMLElement, config: ViewerPageConfig) {
+    const surface = query(root, '[data-render-surface]');
+    const stage = query(root, '[data-viewer-stage]');
+    const status = query(root, '[data-status]');
+    const leftRail = query(root, '[data-left-rail]');
+    const leftToggle = query(root, '[data-left-toggle]');
+    const leftClose = query(root, '[data-left-close]');
+    const rightRail = query(root, '[data-right-rail]');
+    const rightToggle = query(root, '[data-right-toggle]');
+    const rightClose = query(root, '[data-right-close]');
+    const fileInput = query(root, '[data-file-input]');
+    const urlForm = query(root, '[data-url-form]');
+    const urlInput = query(root, '[data-url-input]');
+    const clipboardLoad = query(root, '[data-clipboard-load]');
+    const fileList = query(root, '[data-file-list]');
+    const coordSelect = query(root, '[data-camera-coord]');
+    const farInput = query(root, '[data-camera-far]');
+    const useOrbitInput = query(root, '[data-camera-use-orbit]');
+    const copyCameraButton = query(root, '[data-camera-copy]');
+    const pasteCameraButton = query(root, '[data-camera-paste]');
+    const resetCameraButton = query(root, '[data-camera-reset]');
+    const configPanel = query(root, '[data-config-panel]');
+    const fpsStat = query(root, '[data-stat-fps]');
+    const supportedFileExtensions = getSupportedFileExtensions(fileInput);
+
+    const params = createDefaultParams();
+    const viewer = createViewer(`aholo-viewer-page-${Date.now()}`, surface, { antialiasing: false });
+    const scene = new Scene3D();
+    const camera = new PerspectiveCamera(60, 1, 0.1, Number(farInput.value) || 2000);
+    const control = new CameraControl(camera, surface, { enabled: true });
+
+    let disposed = false;
+    let rafId: number | undefined;
+    let lastFrameTime = 0;
+    let renderRequested = true;
+    let loadAbortController: AbortController | undefined;
+    let leftRailCollapsed = readLeftRailCollapsed();
+    let rightRailCollapsed = readRightRailCollapsed();
+    let fileDragDepth = 0;
+    let keepPrecalculateDisabled = false;
+    const lodSplats: LodSplatInstance[] = [];
+    const records: FileRecord[] = [];
+    const estimateFps = createFpsEstimator();
+
+    configureFileInputForPlatform(fileInput);
+
+    const pane = setupConfigPanel(
+        configPanel,
+        config.labels,
+        params,
+        () => keepPrecalculateDisabled,
+        () => {
+            applyViewerConfig(viewer, params);
+            syncLodConfig();
+            requestRender();
+        },
+    );
+    const fullscreenMode = mountWorkspaceFullscreenMode({
+        onChange() {
+            resize();
+        },
+    });
+    const resizeObserver = new ResizeObserver(() => resize());
+
+    syncLeftRail();
+    syncRightRail();
+    viewer.setScene(scene);
+    viewer.setCamera(camera);
+    applyViewerConfig(viewer, params);
+    applyCoordinateSystem(coordSelect.value);
+    resizeObserver.observe(stage);
+    resize();
+    tick();
+    setStatus('ready', config.labels.statusReady);
+
+    fileInput.addEventListener('change', () => {
+        const files = Array.from(fileInput.files ?? []);
+        if (files.length > 0) {
+            void loadSources(files.map(fileToSource));
+        }
+        fileInput.value = '';
+    });
+    root.addEventListener('dragenter', handleDragEnter);
+    root.addEventListener('dragover', handleDragOver);
+    root.addEventListener('dragleave', handleDragLeave);
+    root.addEventListener('drop', handleDrop);
+    urlForm.addEventListener('submit', event => {
+        event.preventDefault();
+        const sources = parseUrls(urlInput.value).map(urlToSource);
+        if (sources.length > 0) {
+            void loadSources(sources);
+        }
+    });
+    clipboardLoad.addEventListener('click', async () => {
+        try {
+            const text = await navigator.clipboard.readText();
+            urlInput.value = text;
+            const sources = parseUrls(text).map(urlToSource);
+            if (sources.length > 0) {
+                void loadSources(sources);
+            }
+        } catch (error) {
+            setStatus('error', getErrorMessage(error));
+        }
+    });
+    fileList.addEventListener('click', event => {
+        const target = event.target;
+        if (!(target instanceof Element)) {
+            return;
+        }
+
+        const deleteButton = target.closest('[data-file-delete]');
+        if (!deleteButton || !fileList.contains(deleteButton)) {
+            return;
+        }
+
+        clearLoadedScene();
+    });
+    coordSelect.addEventListener('change', () => {
+        applyCoordinateSystem(coordSelect.value);
+        requestRender();
+    });
+    farInput.addEventListener('change', () => {
+        const far = Number(farInput.value);
+        if (Number.isFinite(far) && far > camera.near) {
+            camera.far = far;
+            camera.updateProjectionMatrix();
+            requestRender();
+        }
+    });
+    useOrbitInput.addEventListener('change', () => {
+        control.setOptions({ useOrbit: useOrbitInput.checked });
+        requestRender();
+    });
+    copyCameraButton.addEventListener('click', () => {
+        void navigator.clipboard.writeText(JSON.stringify(serializeCamera(camera)));
+    });
+    pasteCameraButton.addEventListener('click', async () => {
+        try {
+            applyCameraState(camera, JSON.parse(await navigator.clipboard.readText()));
+            farInput.value = String(camera.far);
+            requestRender();
+        } catch (error) {
+            setStatus('error', getErrorMessage(error));
+        }
+    });
+    resetCameraButton.addEventListener('click', () => {
+        applyCoordinateSystem(coordSelect.value);
+        requestRender();
+    });
+    window.addEventListener('resize', resize);
+    window.addEventListener('beforeunload', dispose, { once: true });
+    document.addEventListener('astro:before-swap', dispose, { once: true });
+    leftToggle.addEventListener('click', handleLeftExpandClick);
+    leftClose.addEventListener('click', handleLeftCloseClick);
+    rightToggle.addEventListener('click', handleRightExpandClick);
+    rightClose.addEventListener('click', handleRightCloseClick);
+
+    function handleLeftExpandClick() {
+        setLeftRailCollapsed(false);
+    }
+
+    function handleLeftCloseClick() {
+        setLeftRailCollapsed(true);
+    }
+
+    function handleRightExpandClick() {
+        setRightRailCollapsed(false);
+    }
+
+    function handleRightCloseClick() {
+        setRightRailCollapsed(true);
+    }
+
+    function setLeftRailCollapsed(nextCollapsed: boolean) {
+        leftRailCollapsed = nextCollapsed;
+        writeLeftRailCollapsed(nextCollapsed);
+        syncLeftRail();
+        resize();
+    }
+
+    function setRightRailCollapsed(nextCollapsed: boolean) {
+        rightRailCollapsed = nextCollapsed;
+        writeRightRailCollapsed(nextCollapsed);
+        syncRightRail();
+        resize();
+    }
+
+    function syncLeftRail() {
+        root.dataset.leftCollapsed = String(leftRailCollapsed);
+        document.documentElement.dataset.viewerLeftCollapsed = String(leftRailCollapsed);
+        leftRail.setAttribute('aria-hidden', String(leftRailCollapsed));
+        leftRail.toggleAttribute('inert', leftRailCollapsed);
+        leftToggle.setAttribute('aria-expanded', String(!leftRailCollapsed));
+        const label = leftToggle.dataset.expandLabel;
+        if (label) {
+            leftToggle.setAttribute('aria-label', label);
+            leftToggle.title = label;
+        }
+    }
+
+    function syncRightRail() {
+        root.dataset.rightCollapsed = String(rightRailCollapsed);
+        document.documentElement.dataset.viewerRightCollapsed = String(rightRailCollapsed);
+        rightRail.setAttribute('aria-hidden', String(rightRailCollapsed));
+        rightRail.toggleAttribute('inert', rightRailCollapsed);
+        rightToggle.setAttribute('aria-expanded', String(!rightRailCollapsed));
+        const label = rightToggle.dataset.expandLabel;
+        if (label) {
+            rightToggle.setAttribute('aria-label', label);
+            rightToggle.title = label;
+        }
+    }
+
+    async function loadSources(sources: Source[]) {
+        const abortController = new AbortController();
+        loadAbortController?.abort();
+        loadAbortController = abortController;
+        clearScene();
+        keepPrecalculateDisabled = false;
+        records.length = 0;
+        records.push(...sources.map(createFileRecord));
+        renderRecords();
+        setStatus('loading', config.labels.statusLoading);
+
+        let loaded = 0;
+        for (let index = 0; index < sources.length; index++) {
+            const source = sources[index];
+            const record = records[index];
+            if (!record) {
+                continue;
+            }
+
+            try {
+                validateImportSource(source, supportedFileExtensions, config.labels.unsupportedFileType);
+                await loadSource(source, record, abortController.signal);
+                if (abortController.signal.aborted) {
+                    return;
+                }
+                record.status = 'ready';
+                loaded++;
+            } catch (error) {
+                if (abortController.signal.aborted) {
+                    return;
+                }
+                record.status = 'error';
+                record.error = getErrorMessage(error);
+            }
+            renderRecords();
+            requestRender();
+        }
+
+        if (loadAbortController === abortController) {
+            loadAbortController = undefined;
+        }
+
+        setStatus(loaded > 0 ? 'ready' : 'error', loaded > 0 ? config.labels.statusReady : config.labels.statusError);
+        requestRender();
+    }
+
+    function clearLoadedScene() {
+        loadAbortController?.abort();
+        clearScene();
+        keepPrecalculateDisabled = false;
+        records.length = 0;
+        renderRecords();
+        setStatus('ready', config.labels.statusReady);
+        requestRender();
+    }
+
+    async function loadSource(source: Source, record: FileRecord, signal: AbortSignal) {
+        throwIfAborted(signal);
+        const json = await readJsonIfNeeded(source, signal);
+
+        if (json && isLodMeta(json)) {
+            record.format = 'LOD JSON';
+            await loadLodMeta(json, source.kind === 'url' ? source.url : undefined, signal);
+            return;
+        }
+
+        const probe = await getDetectionProbe(source, json);
+        const type = detectSplatFileType(source.name, probe);
+
+        if (type === undefined) {
+            throw new Error(`Unsupported file type: ${source.name}`);
+        }
+
+        record.format = getFileTypeLabel(type);
+        const data = await parseSourceData(source, type, signal);
+        applyImportedSplatDefaults(data);
+        const splat = await abortable(createSplat(data), signal);
+        splat.autoFreeResourceOnGpuPacked = params.autoFreeResourceOnGpuPacked;
+        scene.add(splat as Object3D);
+    }
+
+    async function parseSourceData(source: Source, type: SplatFileTypeValue, signal: AbortSignal) {
+        const input = source.kind === 'url' ? source.url : source.file;
+        return abortable(
+            parseSplatData(type, input, params.splatPackType, {
+                maxShDegree: params.maxSh,
+                maxTextureSize: 8192,
+            }),
+            signal,
+        );
+    }
+
+    function applyImportedSplatDefaults(data: { readonly shDegree: number }) {
+        if (data.shDegree !== 0) {
+            return;
+        }
+
+        keepPrecalculateDisabled = true;
+        params.precalculateEnabled = false;
+        pane.refreshProgrammatic();
+        applyViewerConfig(viewer, params);
+        requestRender();
+    }
+
+    async function loadLodMeta(meta: LodMeta, baseUrl: string | undefined, signal: AbortSignal) {
+        let rejectResourceError: (error: unknown) => void = () => {};
+        const resourceError = new Promise((_resolve, reject) => {
+            rejectResourceError = reject;
+        });
+        resourceError.catch(() => {});
+
+        const lodSplat = new LodSplat(
+            meta,
+            {
+                ...getLodConfig(params),
+                minLevel: getInitialLodLevel(meta, params),
+                schedulerParallelCounts: 99999,
+                schedulerExistingTaskLimit: 99999,
+                schedulerMinDuration: 0,
+            },
+            createViewerContext(viewer),
+            async (url: string) => {
+                try {
+                    return await loadLodResource(url, baseUrl, signal);
+                } catch (error) {
+                    rejectResourceError(error);
+                    throw error;
+                }
+            },
+        );
+
+        lodSplats.push(lodSplat);
+        scene.add(lodSplat.container);
+        lodSplat.tick(camera);
+        lodSplat.start();
+        requestRender();
+
+        await Promise.race([abortable(lodSplat.onFinishSchedule(), signal), resourceError]);
+        throwIfAborted(signal);
+        lodSplat.setConfig(getLodConfig(params));
+        lodSplat.tick(camera);
+    }
+
+    async function loadLodResource(url: string, baseUrl: string | undefined, signal: AbortSignal) {
+        throwIfAborted(signal);
+        const resourceUrl = resolveResourceUrl(url, baseUrl);
+        const type = detectSplatFileType(resourceUrl, new Uint8Array());
+
+        if (type === undefined) {
+            throw new Error(`Unsupported LOD resource: ${resourceUrl}`);
+        }
+
+        const data = await abortable(parseSplatData(type, resourceUrl, SplatPackType.Compressed), signal);
+        applyImportedSplatDefaults(data);
+        return data;
+    }
+
+    function clearScene() {
+        for (const lodSplat of lodSplats.splice(0)) {
+            lodSplat.destroy();
+        }
+
+        for (const child of scene.removeAllChildren()) {
+            disposeSceneObject(child);
+        }
+        scene.notifySceneChange();
+    }
+
+    function syncLodConfig() {
+        const lodConfig = getLodConfig(params);
+        for (const lodSplat of lodSplats) {
+            lodSplat.setConfig(lodConfig);
+            lodSplat.tick(camera);
+        }
+    }
+
+    function resize() {
+        viewer.resize();
+        syncCameraAspect(camera, viewer);
+        requestRender();
+    }
+
+    function requestRender() {
+        renderRequested = true;
+    }
+
+    function tick(time = performance.now()) {
+        if (disposed) {
+            return;
+        }
+
+        const delta = lastFrameTime > 0 ? Math.min((time - lastFrameTime) / 1000, 0.1) : 0;
+        lastFrameTime = time;
+        const controlUpdated = control.update(delta);
+        let lodUpdated = false;
+
+        for (const lodSplat of lodSplats) {
+            lodSplat.tick(camera);
+            lodUpdated = true;
+        }
+
+        if (renderRequested || controlUpdated || lodUpdated) {
+            syncCameraAspect(camera, viewer);
+            scene.notifySceneChange();
+        }
+
+        renderRequested = false;
+        viewer.render();
+        updateStats();
+        rafId = window.requestAnimationFrame(tick);
+    }
+
+    function updateStats() {
+        fpsStat.textContent = estimateFps().toString();
+    }
+
+    function applyCoordinateSystem(value: string) {
+        switch (value) {
+            case 'aholo':
+                camera.up.set(0, 0, 1);
+                camera.position.set(0, -3, 1.2);
+                break;
+            case 'opengl':
+                camera.up.set(0, 1, 0);
+                camera.position.set(0, 1.2, 3);
+                break;
+            case 'opencv':
+            default:
+                camera.up.set(0, -1, 0);
+                camera.position.set(0, -1.2, 3);
+                break;
+        }
+
+        camera.lookAt(new Vector3(0, 0, 0));
+        camera.far = Number(farInput.value) || 2000;
+        camera.updateProjectionMatrix();
+        control.stop();
+    }
+
+    function setStatus(state: 'loading' | 'ready' | 'error', message: string) {
+        status.dataset.state = state;
+        status.textContent = state === 'error' ? message : '';
+    }
+
+    function handleDragEnter(event: DragEvent) {
+        if (!isFileDrag(event)) {
+            return;
+        }
+
+        event.preventDefault();
+        fileDragDepth++;
+        setDropActive(true);
+    }
+
+    function handleDragOver(event: DragEvent) {
+        if (!isFileDrag(event)) {
+            return;
+        }
+
+        event.preventDefault();
+        if (event.dataTransfer) {
+            event.dataTransfer.dropEffect = 'copy';
+        }
+        setDropActive(true);
+    }
+
+    function handleDragLeave(event: DragEvent) {
+        if (!isFileDrag(event)) {
+            return;
+        }
+
+        event.preventDefault();
+        fileDragDepth = Math.max(0, fileDragDepth - 1);
+
+        if (fileDragDepth === 0) {
+            setDropActive(false);
+        }
+    }
+
+    function handleDrop(event: DragEvent) {
+        const files = Array.from(event.dataTransfer?.files ?? []);
+
+        if (files.length === 0) {
+            return;
+        }
+
+        event.preventDefault();
+        fileDragDepth = 0;
+        setDropActive(false);
+
+        if (files.length > 0) {
+            void loadSources(files.map(fileToSource));
+        }
+    }
+
+    function setDropActive(active: boolean) {
+        root.dataset.fileDragging = String(active);
+    }
+
+    function renderRecords() {
+        renderFileList(fileList, records, config);
+    }
+
+    function isFileDrag(event: DragEvent) {
+        return Array.from(event.dataTransfer?.types ?? []).includes('Files');
+    }
+
+    function dispose() {
+        if (disposed) {
+            return;
+        }
+
+        disposed = true;
+        loadAbortController?.abort();
+        resizeObserver.disconnect();
+        root.removeEventListener('dragenter', handleDragEnter);
+        root.removeEventListener('dragover', handleDragOver);
+        root.removeEventListener('dragleave', handleDragLeave);
+        root.removeEventListener('drop', handleDrop);
+        window.removeEventListener('resize', resize);
+        leftToggle.removeEventListener('click', handleLeftExpandClick);
+        leftClose.removeEventListener('click', handleLeftCloseClick);
+        rightToggle.removeEventListener('click', handleRightExpandClick);
+        rightClose.removeEventListener('click', handleRightCloseClick);
+        if (rafId !== undefined) {
+            window.cancelAnimationFrame(rafId);
+        }
+        control.dispose();
+        clearScene();
+        fullscreenMode.dispose();
+        pane.dispose();
+        viewer.destroy();
+    }
+
+    renderRecords();
+}
+
+function createDefaultParams(): ViewerParams {
+    return {
+        splattingPreset: 'balanced',
+        pixelRatio: 1,
+        splatPackType: SplatPackType.SuperCompressed,
+        maxSh: 3,
+        maxStdDev: 8,
+        packHighPrecisionEnabled: false,
+        precalculateEnabled: true,
+        cameraRelativeEnabled: true,
+        sortedLayoutEnabled: false,
+        autoFreeResourceOnGpuPacked: false,
+        renderAttachHighPrecisionEnabled: false,
+        normalizedFalloff: false,
+        preBlurAmount: 0.3,
+        blurAmount: 0,
+        focalAdjustment: 2,
+        detailCullingThreshold: 1,
+        maxPixelRadius: 1024,
+        minIntervalMs: 0,
+        sortSplatDistance: 0.1,
+        sortSplatCoorient: 0.99999,
+        sortCameraDistance: 1,
+        sortCameraCoorient: 0.99,
+        sortHighPrecisionEnabled: false,
+        toneMappingEnabled: false,
+        toneMapping: ToneMapping.Linear,
+        exposure: 1,
+        highlightEnabled: false,
+        highlightSize: 2,
+        highlightColor: '#0000ff',
+        lodMinLevel: 0,
+        lodMaxBudget: 3_000_000,
+        lodBackgroundPenalty: 0.5,
+        lodOutsidePenalty: 0.4,
+        lodBehindPenalty: 0.1,
+        lodBehindTolerance: -0.2,
+        lodBehindDistanceTolerance: 2,
+        lodHysteresisTicks: 4,
+        lodSchedulerParallelCounts: 4,
+        lodSchedulerExistingTaskLimit: 64,
+        lodSchedulerMinDuration: 160,
+    };
+}
+
+function applySplattingPreset(
+    params: ViewerParams,
+    preset: SplattingPresetId,
+    options: { keepPrecalculateDisabled: boolean },
+) {
+    Object.assign(params, VIEWER_SPLATTING_PRESETS[preset].params, {
+        splattingPreset: preset,
+    });
+
+    if (options.keepPrecalculateDisabled) {
+        params.precalculateEnabled = false;
+    }
+}
+
+function createSplattingPresetOptions(labels: ViewerLabels) {
+    return {
+        [labels.presetCustom]: 'custom',
+        [labels.presetMaxQuality]: 'maxQuality',
+        [labels.presetQualityFirst]: 'qualityFirst',
+        [labels.presetBalanced]: 'balanced',
+        [labels.presetPerformanceFirst]: 'performanceFirst',
+        [labels.presetExtremePerformance0]: 'extremePerformance0',
+        [labels.presetExtremePerformance1]: 'extremePerformance1',
+    } satisfies Record;
+}
+
+function setupConfigPanel(
+    container: HTMLElement,
+    labels: ViewerLabels,
+    params: ViewerParams,
+    shouldKeepPrecalculateDisabled: () => boolean,
+    onChange: () => void,
+) {
+    const pane = new Pane({
+        container,
+        expanded: true,
+        title: labels.settings,
+    });
+    const presetBinding = pane.addBinding(params, 'splattingPreset', {
+        label: labels.preset,
+        options: createSplattingPresetOptions(labels),
+    });
+    addViewerConfigTip(presetBinding, labels.presetPackTypeTip);
+    let isApplyingSplattingPreset = false;
+    const refreshProgrammatic = () => {
+        isApplyingSplattingPreset = true;
+        pane.refresh();
+        queueMicrotask(() => {
+            isApplyingSplattingPreset = false;
+        });
+    };
+    presetBinding.on('change', event => {
+        isApplyingSplattingPreset = true;
+        applySplattingPreset(params, event.value, { keepPrecalculateDisabled: shouldKeepPrecalculateDisabled() });
+        pane.refresh();
+        onChange();
+        queueMicrotask(() => {
+            isApplyingSplattingPreset = false;
+        });
+    });
+    const pixelRatioBinding = pane.addBinding(params, 'pixelRatio', {
+        label: 'Pixel Ratio',
+        max: Math.max(2, window.devicePixelRatio),
+        min: 0.5,
+        step: 0.1,
+    });
+    pixelRatioBinding.on('change', onChange);
+    const markCustomPreset = () => {
+        if (isApplyingSplattingPreset || params.splattingPreset === 'custom') {
+            return;
+        }
+
+        params.splattingPreset = 'custom';
+        presetBinding.refresh();
+    };
+    const handleSplattingParamChange = () => {
+        markCustomPreset();
+        onChange();
+    };
+
+    const importOptions = pane.addFolder({ title: `Import · ${labels.packTypeTip}`, expanded: false });
+    const pack = pane.addFolder({ title: 'Pack', expanded: false });
+    const raster = pane.addFolder({ title: 'Raster', expanded: false });
+    const sort = pane.addFolder({ title: 'Sort', expanded: false });
+    const composite = pane.addFolder({ title: 'Composite', expanded: false });
+
+    importOptions
+        .addBinding(params, 'splatPackType', {
+            label: 'Pack type',
+            options: {
+                compressed: SplatPackType.Compressed,
+                superCompressed: SplatPackType.SuperCompressed,
+                sog: SplatPackType.Sog,
+            },
+        })
+        .on('change', markCustomPreset);
+    importOptions
+        .addBinding(params, 'maxSh', { label: 'Max SH', min: 0, max: 3, step: 1 })
+        .on('change', handleSplattingParamChange);
+    importOptions
+        .addBinding(params, 'autoFreeResourceOnGpuPacked', { label: 'Auto free packed data' })
+        .on('change', handleSplattingParamChange);
+    pack.addBinding(params, 'packHighPrecisionEnabled', { label: 'High precision' }).on(
+        'change',
+        handleSplattingParamChange,
+    );
+    pack.addBinding(params, 'precalculateEnabled', { label: 'Precalculate SH' }).on(
+        'change',
+        handleSplattingParamChange,
+    );
+    pack.addBinding(params, 'cameraRelativeEnabled', { label: 'Camera relative' }).on(
+        'change',
+        handleSplattingParamChange,
+    );
+    pack.addBinding(params, 'sortedLayoutEnabled', { label: 'Sorted layout' }).on('change', handleSplattingParamChange);
+    raster
+        .addBinding(params, 'normalizedFalloff', { label: 'Normalized falloff' })
+        .on('change', handleSplattingParamChange);
+    raster
+        .addBinding(params, 'preBlurAmount', { label: 'Pre blur', min: 0, max: 1, step: 0.1 })
+        .on('change', handleSplattingParamChange);
+    raster
+        .addBinding(params, 'blurAmount', { label: 'Blur', min: 0, max: 1, step: 0.1 })
+        .on('change', handleSplattingParamChange);
+    raster
+        .addBinding(params, 'focalAdjustment', { label: 'Focal adjustment', min: 0.5, max: 2, step: 0.1 })
+        .on('change', handleSplattingParamChange);
+    raster
+        .addBinding(params, 'detailCullingThreshold', { label: 'Detail culling', min: 0, max: 8, step: 1 })
+        .on('change', handleSplattingParamChange);
+    raster
+        .addBinding(params, 'maxPixelRadius', { label: 'Max pixel radius', min: 1, max: 1024, step: 1 })
+        .on('change', handleSplattingParamChange);
+    raster
+        .addBinding(params, 'maxStdDev', { label: 'Max std dev', min: 5, max: 8, step: 1 })
+        .on('change', handleSplattingParamChange);
+    sort.addBinding(params, 'minIntervalMs', { label: 'Min duration', min: 0, max: 160, step: 16 }).on(
+        'change',
+        handleSplattingParamChange,
+    );
+    sort.addBinding(params, 'sortSplatDistance', { label: 'Splat distance', min: 0, max: 1, step: 0.01 }).on(
+        'change',
+        handleSplattingParamChange,
+    );
+    sort.addBinding(params, 'sortSplatCoorient', { label: 'Splat coorient', min: 0, max: 1, step: 0.01 }).on(
+        'change',
+        handleSplattingParamChange,
+    );
+    sort.addBinding(params, 'sortCameraDistance', { label: 'Camera distance', min: 0, max: 1, step: 0.01 }).on(
+        'change',
+        handleSplattingParamChange,
+    );
+    sort.addBinding(params, 'sortCameraCoorient', { label: 'Camera coorient', min: 0, max: 1, step: 0.01 }).on(
+        'change',
+        handleSplattingParamChange,
+    );
+    sort.addBinding(params, 'sortHighPrecisionEnabled', { label: 'High precision' }).on(
+        'change',
+        handleSplattingParamChange,
+    );
+    composite
+        .addBinding(params, 'renderAttachHighPrecisionEnabled', { label: 'High precision attach' })
+        .on('change', handleSplattingParamChange);
+
+    const toneMapping = pane.addFolder({ title: 'Tone Mapping', expanded: false });
+    toneMapping.addBinding(params, 'toneMappingEnabled', { label: 'Enabled' }).on('change', onChange);
+    toneMapping
+        .addBinding(params, 'toneMapping', {
+            label: 'Curve',
+            options: {
+                Linear: ToneMapping.Linear,
+                Reinhard: ToneMapping.Reinhard,
+                ACES: ToneMapping.ACES,
+                ACESFilmic: ToneMapping.ACESFilmic,
+                Neutral: ToneMapping.Neutral,
+            },
+        })
+        .on('change', onChange);
+    toneMapping
+        .addBinding(params, 'exposure', { label: 'Exposure', min: 0.1, max: 4, step: 0.1 })
+        .on('change', onChange);
+
+    const highlight = pane.addFolder({ title: 'Highlight Kernel', expanded: false });
+    highlight.addBinding(params, 'highlightEnabled', { label: 'Enabled' }).on('change', onChange);
+    highlight.addBinding(params, 'highlightSize', { label: 'Size', min: 1, max: 10, step: 1 }).on('change', onChange);
+    highlight.addBinding(params, 'highlightColor', { label: 'Color' }).on('change', onChange);
+
+    const lod = pane.addFolder({ title: 'LOD Config', expanded: false });
+    lod.addBinding(params, 'lodMinLevel', { label: 'Min level', min: 0, max: 4, step: 1 }).on('change', onChange);
+    lod.addBinding(params, 'lodMaxBudget', { label: 'Max budget', min: 1_000_000, max: 40_000_000, step: 100_000 }).on(
+        'change',
+        onChange,
+    );
+    lod.addBinding(params, 'lodBackgroundPenalty', { label: 'Background penalty', min: 0, max: 1, step: 0.1 }).on(
+        'change',
+        onChange,
+    );
+    lod.addBinding(params, 'lodOutsidePenalty', { label: 'Outside penalty', min: 0, max: 1, step: 0.1 }).on(
+        'change',
+        onChange,
+    );
+    lod.addBinding(params, 'lodBehindPenalty', { label: 'Behind penalty', min: 0, max: 1, step: 0.1 }).on(
+        'change',
+        onChange,
+    );
+    lod.addBinding(params, 'lodBehindTolerance', { label: 'Behind tolerance', min: -1, max: 1, step: 0.1 }).on(
+        'change',
+        onChange,
+    );
+    lod.addBinding(params, 'lodBehindDistanceTolerance', { label: 'Behind distance', min: 0, max: 10, step: 1 }).on(
+        'change',
+        onChange,
+    );
+    lod.addBinding(params, 'lodHysteresisTicks', { label: 'Hysteresis', min: 1, max: 10, step: 1 }).on(
+        'change',
+        onChange,
+    );
+    lod.addBinding(params, 'lodSchedulerParallelCounts', { label: 'Parallel', min: 1, max: 16, step: 1 }).on(
+        'change',
+        onChange,
+    );
+    lod.addBinding(params, 'lodSchedulerExistingTaskLimit', { label: 'Task limit', min: 1, max: 128, step: 1 }).on(
+        'change',
+        onChange,
+    );
+    lod.addBinding(params, 'lodSchedulerMinDuration', { label: 'Min duration', min: 16, max: 1600, step: 16 }).on(
+        'change',
+        onChange,
+    );
+
+    return {
+        dispose() {
+            pane.dispose();
+        },
+        refreshProgrammatic,
+    };
+}
+
+function addViewerConfigTip(target: { element: HTMLElement }, text: string) {
+    target.element.title = text;
+}
+
+function applyViewerConfig(viewer: Viewer, params: ViewerParams) {
+    setViewerConfig(viewer, {
+        pixelRatio: params.pixelRatio / window.devicePixelRatio,
+        pipeline: {
+            Background: {
+                background: {
+                    active: BackgroundMode.BasicBackground,
+                    basic: { color: new Color(0, 0, 0), alpha: 1 },
+                },
+                ground: { enabled: false },
+            },
+            Splatting: {
+                enabled: true,
+                pack: {
+                    highPrecisionEnabled: params.packHighPrecisionEnabled,
+                    precalculateEnabled: params.precalculateEnabled,
+                    cameraRelativeEnabled: params.cameraRelativeEnabled,
+                    sortedLayoutEnabled: params.sortedLayoutEnabled,
+                },
+                raster: {
+                    normalizedFalloff: params.normalizedFalloff,
+                    preBlurAmount: params.preBlurAmount,
+                    blurAmount: params.blurAmount,
+                    focalAdjustment: params.focalAdjustment,
+                    detailCullingThreshold: params.detailCullingThreshold,
+                    maxPixelRadius: params.maxPixelRadius,
+                    maxStdDev: globalThis.Math.sqrt(params.maxStdDev),
+                },
+                sort: {
+                    highPrecisionEnabled: params.sortHighPrecisionEnabled,
+                    minIntervalMs: params.minIntervalMs,
+                    sortSplatDistance: params.sortSplatDistance,
+                    sortSplatCoorient: params.sortSplatCoorient,
+                    sortCameraDistance: params.sortCameraDistance,
+                    sortCameraCoorient: params.sortCameraCoorient,
+                },
+                composite: {
+                    enabled: params.renderAttachHighPrecisionEnabled,
+                    highPrecisionEnabled: params.renderAttachHighPrecisionEnabled,
+                },
+                toneMapping: {
+                    enabled: params.toneMappingEnabled,
+                    toneMapping: params.toneMapping,
+                    exposure: params.exposure,
+                },
+                highlightKernel: {
+                    enabled: params.highlightEnabled,
+                    size: params.highlightSize,
+                    color: colorToNumber(params.highlightColor),
+                },
+            },
+            TAA: { enabled: false },
+        },
+    });
+}
+
+function getLodConfig(params: ViewerParams) {
+    return {
+        minLevel: params.lodMinLevel,
+        maxBudget: params.lodMaxBudget,
+        backgroundPenalty: params.lodBackgroundPenalty,
+        outsidePenalty: params.lodOutsidePenalty,
+        behindPenalty: params.lodBehindPenalty,
+        behindTolerance: params.lodBehindTolerance,
+        behindDistanceTolerance: params.lodBehindDistanceTolerance,
+        hysteresisTicks: params.lodHysteresisTicks,
+        schedulerParallelCounts: params.lodSchedulerParallelCounts,
+        schedulerExistingTaskLimit: params.lodSchedulerExistingTaskLimit,
+        schedulerMinDuration: params.lodSchedulerMinDuration,
+    };
+}
+
+function getInitialLodLevel(meta: LodMeta, params: ViewerParams) {
+    const levels = typeof meta.levels === 'number' ? meta.levels : 1;
+    return globalThis.Math.min(globalThis.Math.max(0, levels - 1), globalThis.Math.max(4, params.lodMinLevel));
+}
+
+function isLodMeta(value: unknown): value is LodMeta {
+    if (!value || typeof value !== 'object') {
+        return false;
+    }
+
+    const meta = value as Record;
+    return (
+        meta.magicCode === LOD_MAGIC_CODE &&
+        meta.type === 'lod-splat' &&
+        typeof meta.counts === 'number' &&
+        typeof meta.levels === 'number' &&
+        Array.isArray(meta.files)
+    );
+}
+
+async function readJsonIfNeeded(source: Source, signal: AbortSignal) {
+    if (!source.name.toLowerCase().endsWith('.json')) {
+        return undefined;
+    }
+
+    const text =
+        source.kind === 'url'
+            ? await abortable(fetchText(source.url, signal), signal)
+            : await abortable(source.file.text(), signal);
+
+    return JSON.parse(text) as unknown;
+}
+
+async function fetchText(url: string, signal: AbortSignal) {
+    const response = await fetch(url, { signal });
+
+    if (!response.ok) {
+        throw new Error(`HTTP ${response.status} ${response.statusText}`);
+    }
+
+    return response.text();
+}
+
+async function getDetectionProbe(source: Source, json: unknown) {
+    if (json !== undefined) {
+        return new TextEncoder().encode(JSON.stringify(json));
+    }
+
+    if (source.kind === 'file') {
+        return new Uint8Array(await source.file.slice(0, 4096).arrayBuffer());
+    }
+
+    return new Uint8Array();
+}
+
+function renderFileList(container: HTMLElement, records: FileRecord[], config: ViewerPageConfig) {
+    container.replaceChildren();
+
+    if (records.length === 0) {
+        const item = document.createElement('li');
+        item.className = 'viewer-empty-file';
+        item.textContent = config.labels.emptyFiles;
+        container.append(item);
+        return;
+    }
+
+    for (const record of records) {
+        const item = document.createElement('li');
+        item.className = 'viewer-file-item';
+        item.dataset.state = record.status;
+
+        const header = document.createElement('div');
+        header.className = 'viewer-file-item-header';
+
+        const info = document.createElement('div');
+        info.className = 'viewer-file-info';
+
+        const title = document.createElement('strong');
+        title.textContent = record.name;
+
+        const details = document.createElement('span');
+        details.textContent = `${record.format} / ${record.size}`;
+        info.append(title, details);
+
+        const state = document.createElement('span');
+        state.className = 'viewer-file-state';
+        state.dataset.state = record.status;
+        state.setAttribute('aria-label', record.error ?? record.status);
+        state.title = record.error ?? record.status;
+
+        const deleteButton = document.createElement('button');
+        deleteButton.type = 'button';
+        deleteButton.className = 'viewer-file-delete';
+        deleteButton.dataset.fileDelete = '';
+        deleteButton.setAttribute('aria-label', `${config.labels.removeFile}: ${record.name}`);
+        deleteButton.title = config.labels.removeFile;
+
+        const deleteIcon = createTrashIcon();
+        deleteButton.append(deleteIcon);
+        header.append(info, state, deleteButton);
+
+        item.append(header);
+        container.append(item);
+    }
+}
+
+function readLeftRailCollapsed() {
+    return readRailCollapsed(LEFT_RAIL_COLLAPSED_STORAGE_KEY);
+}
+
+function readRightRailCollapsed() {
+    return readRailCollapsed(RIGHT_RAIL_COLLAPSED_STORAGE_KEY);
+}
+
+function readRailCollapsed(storageKey: string) {
+    if (isCompactViewerLayout()) {
+        return true;
+    }
+
+    try {
+        const stored = localStorage.getItem(storageKey);
+        if (stored !== null) {
+            return stored === 'true';
+        }
+    } catch {
+        // Fall through to the responsive default when storage is unavailable.
+    }
+
+    return false;
+}
+
+function createTrashIcon() {
+    const namespace = 'http://www.w3.org/2000/svg';
+    const icon = document.createElementNS(namespace, 'svg');
+    icon.setAttribute('class', 'viewer-delete-icon');
+    icon.setAttribute('viewBox', '0 0 24 24');
+    icon.setAttribute('aria-hidden', 'true');
+
+    for (const attributes of [
+        { d: 'M3 6h18' },
+        { d: 'M8 6V4h8v2' },
+        { d: 'M6 6l1 15h10l1-15' },
+        { d: 'M10 11v6' },
+        { d: 'M14 11v6' },
+    ]) {
+        const path = document.createElementNS(namespace, 'path');
+        path.setAttribute('d', attributes.d);
+        icon.append(path);
+    }
+
+    return icon;
+}
+
+function writeLeftRailCollapsed(collapsed: boolean) {
+    writeRailCollapsed(LEFT_RAIL_COLLAPSED_STORAGE_KEY, collapsed);
+}
+
+function writeRightRailCollapsed(collapsed: boolean) {
+    writeRailCollapsed(RIGHT_RAIL_COLLAPSED_STORAGE_KEY, collapsed);
+}
+
+function writeRailCollapsed(storageKey: string, collapsed: boolean) {
+    try {
+        localStorage.setItem(storageKey, String(collapsed));
+    } catch {
+        // Persisting the panel state is optional; the viewer should still run.
+    }
+}
+
+function isCompactViewerLayout() {
+    return window.matchMedia('(max-width: 720px)').matches;
+}
+
+function createFileRecord(source: Source): FileRecord {
+    return {
+        name: source.name,
+        format: getInitialFormat(source.name),
+        size: source.size === undefined ? '-' : formatBytes(source.size),
+        status: 'loading',
+    };
+}
+
+function fileToSource(file: File): Source {
+    return {
+        kind: 'file',
+        file,
+        name: file.name,
+        size: file.size,
+    };
+}
+
+function urlToSource(url: string): Source {
+    return {
+        kind: 'url',
+        url,
+        name: getUrlFileName(url),
+    };
+}
+
+function parseUrls(value: string) {
+    return value
+        .split(/[\s,]+/u)
+        .map(item => item.trim())
+        .filter(Boolean);
+}
+
+function configureFileInputForPlatform(fileInput: HTMLInputElement) {
+    if (isIosFilePicker()) {
+        fileInput.removeAttribute('accept');
+    }
+}
+
+function isIosFilePicker() {
+    const userAgent = navigator.userAgent;
+
+    return /iP(?:ad|hone|od)/u.test(userAgent) || (/Macintosh/u.test(userAgent) && navigator.maxTouchPoints > 1);
+}
+
+function getSupportedFileExtensions(fileInput: HTMLInputElement) {
+    const extensions = fileInput.accept
+        .split(',')
+        .map(item => item.trim().toLowerCase())
+        .filter(item => item.startsWith('.'));
+
+    return extensions.length > 0 ? extensions : [...SUPPORTED_FILE_EXTENSIONS];
+}
+
+function validateImportSource(source: Source, supportedExtensions: readonly string[], unsupportedLabel: string) {
+    if (supportedExtensions.includes(getSourceExtension(source))) {
+        return;
+    }
+
+    throw new Error(`${unsupportedLabel}: ${source.name} (${supportedExtensions.join(', ')})`);
+}
+
+function getSourceExtension(source: Source) {
+    const name = source.name.trim().toLowerCase();
+    const queryIndex = name.search(/[?#]/u);
+    const filename = queryIndex === -1 ? name : name.slice(0, queryIndex);
+    const extensionIndex = filename.lastIndexOf('.');
+
+    return extensionIndex === -1 ? '' : filename.slice(extensionIndex);
+}
+
+function getUrlFileName(url: string) {
+    try {
+        const parsed = new URL(url);
+        const pathname = decodeURIComponent(parsed.pathname);
+        return pathname.split('/').filter(Boolean).pop() || parsed.hostname;
+    } catch {
+        return url;
+    }
+}
+
+function getInitialFormat(name: string) {
+    const extension = name.split('.').pop();
+    return extension ? extension.toUpperCase() : 'Unknown';
+}
+
+function getFileTypeLabel(type: SplatFileTypeValue) {
+    switch (type) {
+        case SplatFileType.PLY:
+            return 'PLY';
+        case SplatFileType.SPZ:
+            return 'SPZ';
+        case SplatFileType.SPLAT:
+            return 'SPLAT';
+        case SplatFileType.KSPLAT:
+            return 'KSPLAT';
+        case SplatFileType.LCC:
+            return 'LCC';
+        case SplatFileType.SOG:
+            return 'SOG';
+        case SplatFileType.ESZ:
+            return 'ESZ';
+        default:
+            return 'Unknown';
+    }
+}
+
+function formatBytes(bytes: number) {
+    if (bytes <= 0) {
+        return '0 B';
+    }
+
+    const units = ['B', 'KB', 'MB', 'GB'];
+    const exponent = globalThis.Math.min(
+        globalThis.Math.floor(globalThis.Math.log(bytes) / globalThis.Math.log(1024)),
+        units.length - 1,
+    );
+    const value = bytes / 1024 ** exponent;
+    return `${value.toFixed(value >= 10 || exponent === 0 ? 0 : 1)} ${units[exponent]}`;
+}
+
+function colorToNumber(value: string) {
+    return Number.parseInt(value.replace(/^#/u, ''), 16);
+}
+
+function resolveResourceUrl(url: string, baseUrl: string | undefined) {
+    try {
+        return new URL(url, baseUrl ?? window.location.href).toString();
+    } catch {
+        return url;
+    }
+}
+
+function serializeCamera(camera: PerspectiveCamera) {
+    return {
+        position: { x: camera.position.x, y: camera.position.y, z: camera.position.z },
+        rotation: { x: camera.rotation.x, y: camera.rotation.y, z: camera.rotation.z, order: camera.rotation.order },
+        up: { x: camera.up.x, y: camera.up.y, z: camera.up.z },
+        fov: camera.fov,
+        near: camera.near,
+        far: camera.far,
+    };
+}
+
+function applyCameraState(camera: PerspectiveCamera, state: unknown) {
+    if (!state || typeof state !== 'object') {
+        throw new Error('Invalid camera state.');
+    }
+
+    const value = state as ReturnType;
+    camera.position.set(value.position.x, value.position.y, value.position.z);
+    camera.rotation.order = value.rotation.order;
+    camera.rotation.set(value.rotation.x, value.rotation.y, value.rotation.z);
+    camera.up.set(value.up.x, value.up.y, value.up.z);
+    camera.fov = value.fov;
+    camera.near = value.near;
+    camera.far = value.far;
+    camera.updateProjectionMatrix();
+}
+
+function disposeSceneObject(object: Object3D | SplatObject) {
+    const disposable = object as Object3D & {
+        destroy?: () => void;
+        freeGPU?: () => void;
+    };
+
+    disposable.freeGPU?.();
+    disposable.destroy?.();
+}
+
+function createFpsEstimator() {
+    let lastFrameTime = 0;
+    let lastDisplayTime = 0;
+    let smoothedFps = 0;
+    let displayedFps = 0;
+
+    return () => {
+        const now = performance.now();
+
+        if (lastFrameTime === 0) {
+            lastFrameTime = now;
+            lastDisplayTime = now;
+            return displayedFps;
+        }
+
+        const frameDelta = globalThis.Math.max(1, now - lastFrameTime);
+        const fps = 1000 / frameDelta;
+        lastFrameTime = now;
+        smoothedFps = smoothedFps === 0 ? fps : smoothedFps + (fps - smoothedFps) * FPS_SMOOTHING_FACTOR;
+
+        if (now - lastDisplayTime >= FPS_DISPLAY_INTERVAL_MS) {
+            displayedFps = globalThis.Math.round(smoothedFps);
+            lastDisplayTime = now;
+        }
+
+        return displayedFps;
+    };
+}
+
+function throwIfAborted(signal: AbortSignal) {
+    throwIfAbortedWithMessage(signal, VIEWER_ABORT_MESSAGE);
+}
+
+function abortable(promise: Promise, signal: AbortSignal) {
+    return abortableWithMessage(promise, signal, VIEWER_ABORT_MESSAGE);
+}
+
+function getErrorMessage(error: unknown) {
+    return error instanceof Error ? error.message : String(error);
+}
+
+function query(root: HTMLElement, selector: string): T {
+    const element = root.querySelector(selector);
+
+    if (!element) {
+        throw new Error(`Missing viewer element: ${selector}`);
+    }
+
+    return element;
+}
diff --git a/website/src/client/workspace-fullscreen.ts b/website/src/client/workspace-fullscreen.ts
new file mode 100644
index 0000000..5aacbec
--- /dev/null
+++ b/website/src/client/workspace-fullscreen.ts
@@ -0,0 +1,323 @@
+export const WORKSPACE_FULLSCREEN_CHANGE_EVENT = 'aholo:workspace-fullscreenchange';
+
+type WorkspaceFullscreenSource = 'query' | 'keyboard' | 'browser' | 'none';
+
+interface WorkspaceFullscreenChangeDetail {
+    active: boolean;
+    source: WorkspaceFullscreenSource;
+}
+
+interface WorkspaceFullscreenOptions {
+    onChange?: (active: boolean, detail: WorkspaceFullscreenChangeDetail) => void;
+}
+
+interface WorkspaceFullscreenController {
+    dispose(): void;
+}
+
+const fullscreenQueryParam = 'fullscreen';
+const viewQueryParam = 'view';
+const fullscreenViewValue = 'fullscreen';
+const keyboardEnterGraceMs = 900;
+const keyboardExitSuppressMs = 900;
+const fullscreenViewportTolerance = 12;
+const browserChromeTolerance = 24;
+const browserFullscreenPollMs = 250;
+const truthyValues = new Set(['1', 'true', 'yes', 'on']);
+const falsyValues = new Set(['0', 'false', 'no', 'off']);
+
+export function mountWorkspaceFullscreenMode(options: WorkspaceFullscreenOptions = {}): WorkspaceFullscreenController {
+    let queryMode = readQueryMode();
+    let keyboardRequested = false;
+    let observedBrowserFullscreen = false;
+    let keyboardEnterDeadline = 0;
+    let browserSuppressUntil = 0;
+    let active = false;
+    let source: WorkspaceFullscreenSource = 'none';
+    let frameId: number | undefined;
+    let stateTimer: number | undefined;
+    let browserPollTimer: number | undefined;
+    let disposed = false;
+
+    sync();
+
+    window.addEventListener('keydown', handleKeydown, true);
+    window.addEventListener('resize', scheduleSync);
+    window.visualViewport?.addEventListener('resize', scheduleSync);
+    document.addEventListener('fullscreenchange', scheduleSync);
+    window.addEventListener('popstate', handlePopState);
+
+    return {
+        dispose() {
+            if (disposed) {
+                return;
+            }
+
+            disposed = true;
+
+            if (frameId !== undefined) {
+                window.cancelAnimationFrame(frameId);
+                frameId = undefined;
+            }
+
+            clearStateTimer();
+            clearBrowserPollTimer();
+
+            window.removeEventListener('keydown', handleKeydown, true);
+            window.removeEventListener('resize', scheduleSync);
+            window.visualViewport?.removeEventListener('resize', scheduleSync);
+            document.removeEventListener('fullscreenchange', scheduleSync);
+            window.removeEventListener('popstate', handlePopState);
+        },
+    };
+
+    function handleKeydown(event: KeyboardEvent) {
+        if (event.key !== 'F11' || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
+            return;
+        }
+
+        if (queryMode !== undefined) {
+            return;
+        }
+
+        const now = performance.now();
+
+        if (active) {
+            keyboardRequested = false;
+            observedBrowserFullscreen = false;
+            keyboardEnterDeadline = 0;
+            browserSuppressUntil = now + keyboardExitSuppressMs;
+            scheduleStateSync(keyboardExitSuppressMs);
+        } else {
+            keyboardRequested = true;
+            observedBrowserFullscreen = false;
+            keyboardEnterDeadline = now + keyboardEnterGraceMs;
+            browserSuppressUntil = 0;
+            scheduleStateSync(keyboardEnterGraceMs);
+        }
+
+        sync();
+    }
+
+    function handlePopState() {
+        queryMode = readQueryMode();
+        sync();
+    }
+
+    function scheduleSync() {
+        if (frameId !== undefined) {
+            return;
+        }
+
+        frameId = window.requestAnimationFrame(() => {
+            frameId = undefined;
+            sync();
+        });
+    }
+
+    function scheduleStateSync(delay: number) {
+        if (stateTimer !== undefined) {
+            clearStateTimer();
+        }
+
+        stateTimer = window.setTimeout(
+            () => {
+                stateTimer = undefined;
+                sync();
+            },
+            Math.max(0, delay),
+        );
+    }
+
+    function clearStateTimer() {
+        if (stateTimer === undefined) {
+            return;
+        }
+
+        window.clearTimeout(stateTimer);
+        stateTimer = undefined;
+    }
+
+    function syncBrowserPollTimer() {
+        if (active && source === 'browser') {
+            if (browserPollTimer === undefined) {
+                browserPollTimer = window.setInterval(sync, browserFullscreenPollMs);
+            }
+            return;
+        }
+
+        clearBrowserPollTimer();
+    }
+
+    function clearBrowserPollTimer() {
+        if (browserPollTimer === undefined) {
+            return;
+        }
+
+        window.clearInterval(browserPollTimer);
+        browserPollTimer = undefined;
+    }
+
+    function sync() {
+        const nextState = getNextState();
+
+        if (active === nextState.active && source === nextState.source) {
+            syncDataset(nextState.active);
+            syncBrowserPollTimer();
+            return;
+        }
+
+        active = nextState.active;
+        source = nextState.source;
+        syncDataset(nextState.active);
+        syncBrowserPollTimer();
+
+        const detail = {
+            active: nextState.active,
+            source: nextState.source,
+        };
+        window.dispatchEvent(
+            new CustomEvent(WORKSPACE_FULLSCREEN_CHANGE_EVENT, {
+                detail,
+            }),
+        );
+        options.onChange?.(nextState.active, detail);
+    }
+
+    function getNextState(): WorkspaceFullscreenChangeDetail {
+        if (queryMode !== undefined) {
+            keyboardRequested = false;
+            observedBrowserFullscreen = false;
+            browserSuppressUntil = 0;
+            clearStateTimer();
+
+            return {
+                active: queryMode,
+                source: queryMode ? 'query' : 'none',
+            };
+        }
+
+        const now = performance.now();
+        const browserFullscreen = document.fullscreenElement !== null || isBrowserFullscreenViewport();
+        const browserSuppressed = browserSuppressUntil > now;
+
+        if (browserFullscreen) {
+            observedBrowserFullscreen = true;
+        }
+
+        if (browserFullscreen && !browserSuppressed) {
+            keyboardRequested = false;
+            keyboardEnterDeadline = 0;
+            clearStateTimer();
+
+            return {
+                active: true,
+                source: 'browser',
+            };
+        }
+
+        if (browserSuppressed) {
+            scheduleStateSync(browserSuppressUntil - now);
+        } else if (browserSuppressUntil > 0) {
+            browserSuppressUntil = 0;
+        }
+
+        if (keyboardRequested) {
+            if (observedBrowserFullscreen && !browserFullscreen) {
+                keyboardRequested = false;
+                observedBrowserFullscreen = false;
+                keyboardEnterDeadline = 0;
+                clearStateTimer();
+
+                return {
+                    active: false,
+                    source: 'none',
+                };
+            }
+
+            if (keyboardEnterDeadline > now) {
+                scheduleStateSync(keyboardEnterDeadline - now);
+
+                return {
+                    active: true,
+                    source: 'keyboard',
+                };
+            }
+
+            keyboardRequested = false;
+            observedBrowserFullscreen = false;
+            keyboardEnterDeadline = 0;
+            clearStateTimer();
+        }
+
+        return {
+            active: false,
+            source: 'none',
+        };
+    }
+}
+
+function readQueryMode() {
+    const params = new URLSearchParams(window.location.search);
+    const value = params.get(fullscreenQueryParam);
+
+    if (value !== null) {
+        const normalized = value.trim().toLowerCase();
+
+        if (truthyValues.has(normalized) || normalized === '') {
+            return true;
+        }
+
+        if (falsyValues.has(normalized)) {
+            return false;
+        }
+    }
+
+    return params.get(viewQueryParam)?.trim().toLowerCase() === fullscreenViewValue ? true : undefined;
+}
+
+function syncDataset(active: boolean) {
+    const root = document.documentElement;
+    const body = document.body;
+
+    if (active) {
+        root.dataset.workspaceFullscreen = 'true';
+        if (body) {
+            body.dataset.workspaceFullscreen = 'true';
+        }
+        return;
+    }
+
+    delete root.dataset.workspaceFullscreen;
+    if (body) {
+        delete body.dataset.workspaceFullscreen;
+    }
+}
+
+function isBrowserFullscreenViewport() {
+    if (!canInferBrowserFullscreenViewport()) {
+        return false;
+    }
+
+    const { screen } = window;
+    const targetWidth = Math.max(screen.width, screen.availWidth);
+    const targetHeight = Math.max(screen.height, screen.availHeight);
+
+    if (!targetWidth || !targetHeight || !window.outerWidth || !window.outerHeight) {
+        return false;
+    }
+
+    const fillsScreen =
+        window.innerWidth >= targetWidth - fullscreenViewportTolerance &&
+        window.innerHeight >= targetHeight - fullscreenViewportTolerance;
+    const browserChromeHidden =
+        Math.abs(window.outerWidth - window.innerWidth) <= browserChromeTolerance &&
+        Math.abs(window.outerHeight - window.innerHeight) <= browserChromeTolerance;
+
+    return fillsScreen && browserChromeHidden;
+}
+
+function canInferBrowserFullscreenViewport() {
+    // Mobile browsers often report a screen-filling viewport during normal browsing.
+    return !window.matchMedia('(max-width: 900px), (hover: none), (pointer: coarse)').matches;
+}
diff --git a/website/src/components/ExamplePreview.astro b/website/src/components/ExamplePreview.astro
new file mode 100644
index 0000000..718037d
--- /dev/null
+++ b/website/src/components/ExamplePreview.astro
@@ -0,0 +1,67 @@
+---
+import InteractionGuide from './InteractionGuide.astro';
+import type { Locale } from '../i18n/locales.js';
+
+interface Props {
+  accent: string;
+  configLabel: string;
+  code: string;
+  errorLabel: string;
+  lang: Locale;
+  loadingLabel: string;
+  renderer: {
+    antialiasing: boolean;
+    pixelRatio?: number;
+  };
+  showInteractionGuide?: boolean;
+  title: string;
+}
+
+const {
+  accent,
+  configLabel,
+  code,
+  errorLabel,
+  lang,
+  loadingLabel,
+  renderer,
+  showInteractionGuide = true,
+  title,
+} = Astro.props;
+const configJson = JSON.stringify({
+  accent,
+  configLabel,
+  code,
+  errorLabel,
+  loadingLabel,
+  renderer,
+}).replace(/
+  
+  {loadingLabel}
+  
+  
+  {showInteractionGuide && }
+  
diff --git a/website/src/components/ExampleRail.astro b/website/src/components/ExampleRail.astro
new file mode 100644
index 0000000..fd8c964
--- /dev/null
+++ b/website/src/components/ExampleRail.astro
@@ -0,0 +1,49 @@
+---
+import type { Locale } from '../i18n/locales.js';
+import { localizedPath } from '../i18n/routes.js';
+import { examples } from '../utils/examples.js';
+
+interface Props {
+  currentSlug: string;
+  label: string;
+  lang: Locale;
+  navId?: string;
+  tagsLabel: string;
+  variant?: 'workspace' | 'drawer';
+}
+
+const { currentSlug, label, lang, navId, tagsLabel, variant = 'workspace' } = Astro.props;
+---
+
+
+  
+    {
+      examples.map(item => (
+        
+          
+            
+          
+          {item.title[lang]}
+          
+            {item.tags.slice(0, 2).map(tag => (
+              {tag}
+            ))}
+          
+        
+      ))
+    }
+  
+
diff --git a/website/src/components/InteractionGuide.astro b/website/src/components/InteractionGuide.astro
new file mode 100644
index 0000000..759a28f
--- /dev/null
+++ b/website/src/components/InteractionGuide.astro
@@ -0,0 +1,302 @@
+---
+import type { Locale } from '../i18n/locales.js';
+
+interface Props {
+  activeWhen?: 'interactive';
+  lang: Locale;
+}
+
+const { activeWhen, lang } = Astro.props;
+const labels =
+  lang === 'zh-CN'
+    ? {
+        move: '移动',
+        riseDescend: '升降',
+        zoom: '缩放',
+        rotate: '旋转',
+        orbit: '环绕',
+        roll: '滚转',
+        pan: '平移',
+        fullscreen: '全屏',
+      }
+    : {
+        move: 'Move',
+        riseDescend: 'Rise / Descend',
+        zoom: 'Zoom',
+        rotate: 'Rotate',
+        orbit: 'Orbit',
+        roll: 'Roll',
+        pan: 'Pan',
+        fullscreen: 'Fullscreen',
+      };
+---
+
+
+  
+    
+      {labels.move}
+      
+        W
+        A
+        S
+        D
+      
+    
+    
+      {labels.riseDescend}
+      
+        Q
+        E
+      
+    
+    
+      {labels.roll}
+      
+        R
+        F
+      
+    
+    
+      {labels.zoom}
+      
+        
+      
+    
+    
+      {labels.rotate}
+      
+        
+      
+    
+    
+      {labels.orbit}
+      
+        Alt
+        
+          
+        
+      
+    
+    
+      {labels.pan}
+      
+        
+      
+    
+    
+      {labels.fullscreen}
+      F11
+    
+  
+
+
+
+
+
diff --git a/website/src/components/PlaygroundShell.astro b/website/src/components/PlaygroundShell.astro
new file mode 100644
index 0000000..3c00505
--- /dev/null
+++ b/website/src/components/PlaygroundShell.astro
@@ -0,0 +1,201 @@
+---
+import InteractionGuide from './InteractionGuide.astro';
+import { dictionary } from '../i18n/dictionary.js';
+import type { Locale } from '../i18n/locales.js';
+// oxlint-disable-next-line import/default
+import cameraControlTypes from '../client/camera-control.ts?raw';
+// oxlint-disable-next-line import/default
+import renderRuntimeTypes from '../client/render-runtime.d.ts?raw';
+// oxlint-disable-next-line import/default
+import rendererTypes from '../../node_modules/@manycore/aholo-viewer/dist/index.d.ts?raw';
+import { getPlaygroundPresets } from '../utils/examples.js';
+
+interface Props {
+  lang: Locale;
+}
+
+const { lang } = Astro.props;
+const t = dictionary[lang];
+const rendererEntryTypes = 'export * from "./dist/index";\n';
+const tweakpaneTypes = `
+declare module "tweakpane" {
+  export interface PaneConfig {
+    container?: HTMLElement;
+    expanded?: boolean;
+    title?: string;
+  }
+
+  export interface TpChangeEvent {
+    value: T;
+    last: boolean;
+  }
+
+  export interface BladeApi {
+    hidden: boolean;
+    disabled: boolean;
+    dispose(): void;
+  }
+
+  export interface InputBindingApi extends BladeApi {
+    on(eventName: "change", handler: (event: TpChangeEvent) => void): this;
+    refresh(): void;
+  }
+
+  export interface ButtonApi extends BladeApi {
+    on(eventName: "click", handler: () => void): this;
+  }
+
+  export class Pane {
+    expanded: boolean;
+    constructor(config?: PaneConfig);
+    addBinding(
+      target: T,
+      key: K,
+      options?: Record
+    ): InputBindingApi;
+    addButton(options: Record): ButtonApi;
+    addFolder(options: Record): Pane;
+    refresh(): void;
+    dispose(): void;
+  }
+
+  export const VERSION: unknown;
+}
+`;
+const editorLoadingLabel = lang === 'zh-CN' ? '正在加载编辑器...' : 'Loading editor...';
+const playgroundActionsLabel = lang === 'zh-CN' ? 'Playground 操作' : 'Playground actions';
+const resizePanelsLabel = lang === 'zh-CN' ? '调整编辑器和预览宽度' : 'Resize editor and preview';
+const expandEditorLabel = lang === 'zh-CN' ? '展开编辑器' : 'Expand editor';
+const configLabel = lang === 'zh-CN' ? '配置' : 'Config';
+const configJson = JSON.stringify({
+  presets: getPlaygroundPresets(lang),
+  labels: t.playground,
+  common: t.common,
+  typeDefinitions: [
+    {
+      path: 'file:///node_modules/@manycore/aholo-viewer/index.d.ts',
+      content: rendererEntryTypes,
+    },
+    {
+      path: 'file:///node_modules/@manycore/aholo-viewer/dist/index.d.ts',
+      content: rendererTypes,
+    },
+    {
+      path: 'file:///src/client/render-runtime.d.ts',
+      content: renderRuntimeTypes,
+    },
+    {
+      path: 'file:///src/client/camera-control.ts',
+      content: cameraControlTypes,
+    },
+    {
+      path: 'file:///node_modules/tweakpane/index.d.ts',
+      content: tweakpaneTypes,
+    },
+  ],
+}).replace(/
+  
+    
+      {editorLoadingLabel}
+      
+        
+          
+          
+        
+        
+      
+    
+
+    
+    
+
+    
+      
+      
+      
+      
+      
+      
+      
+      
+    
+  
+
+  
diff --git a/website/src/components/ViewerShell.astro b/website/src/components/ViewerShell.astro
new file mode 100644
index 0000000..bc610e9
--- /dev/null
+++ b/website/src/components/ViewerShell.astro
@@ -0,0 +1,272 @@
+---
+import { dictionary } from '../i18n/dictionary.js';
+import type { Locale } from '../i18n/locales.js';
+
+interface Props {
+  lang: Locale;
+}
+
+const { lang } = Astro.props;
+const t = dictionary[lang];
+const labels =
+  lang === 'zh-CN'
+    ? {
+        import: '导入',
+        selectFiles: '选择文件',
+        fileFormatHint: 'PLY / SPZ / SPLAT / KSPLAT / LCC / SOG / ESZ / JSON',
+        urlLabel: 'URL',
+        urlPlaceholder: '粘贴 .ply / .spz / .sog / .esz / .json 地址',
+        loadUrl: '加载 URL',
+        loadClipboard: '从剪贴板加载',
+        removeFile: '删除文件',
+        files: '导入文件',
+        emptyFiles: '尚未导入文件',
+        camera: '相机',
+        coordSystem: '坐标系',
+        far: '远裁剪面',
+        useOrbit: '环绕',
+        copyCamera: '复制状态',
+        pasteCamera: '粘贴状态',
+        resetCamera: '重置视角',
+        settings: '渲染参数',
+        preset: '预设',
+        presetCustom: '自定义',
+        presetMaxQuality: '极限效果',
+        presetQualityFirst: '效果优先',
+        presetBalanced: '均衡模式',
+        presetPerformanceFirst: '性能优先',
+        presetExtremePerformance0: '极限性能 0',
+        presetExtremePerformance1: '极限性能 1',
+        presetPackTypeTip: '预设会影响 Pack type，请在导入前选择。',
+        packTypeTip: '导入前生效',
+        statusReady: '',
+        statusLoading: '正在加载',
+        statusError: '加载失败',
+        unsupportedFileType: '不支持的文件类型',
+        statsFps: 'FPS',
+        dropOverlayTitle: '释放文件以导入项目',
+        dropOverlayHint: '支持 .ply / .spz / .sog / .esz / .json 等格式',
+        collapseLeft: '收起左侧设置',
+        expandLeft: '展开左侧设置',
+        collapseRight: '收起渲染参数',
+        expandRight: '展开渲染参数',
+      }
+    : {
+        import: 'Import',
+        selectFiles: 'Choose Files',
+        fileFormatHint: 'PLY / SPZ / SPLAT / KSPLAT / LCC / SOG / ESZ / JSON',
+        urlLabel: 'URL',
+        urlPlaceholder: 'Paste .ply / .spz / .sog / .esz / .json URLs',
+        loadUrl: 'Load URL',
+        loadClipboard: 'Load Clipboard',
+        removeFile: 'Remove File',
+        files: 'Imported Files',
+        emptyFiles: 'No imported files',
+        camera: 'Camera',
+        coordSystem: 'Coordinate System',
+        far: 'Far Plane',
+        useOrbit: 'Orbit',
+        copyCamera: 'Copy State',
+        pasteCamera: 'Paste State',
+        resetCamera: 'Reset View',
+        settings: 'Render Settings',
+        preset: 'Preset',
+        presetCustom: 'Custom',
+        presetMaxQuality: 'Max Quality',
+        presetQualityFirst: 'Quality First',
+        presetBalanced: 'Balanced',
+        presetPerformanceFirst: 'Performance First',
+        presetExtremePerformance0: 'Extreme Performance 0',
+        presetExtremePerformance1: 'Extreme Performance 1',
+        presetPackTypeTip: 'Presets affect Pack type. Choose before import.',
+        packTypeTip: 'Before import',
+        statusReady: '',
+        statusLoading: 'Loading',
+        statusError: 'Load failed',
+        unsupportedFileType: 'Unsupported file type',
+        statsFps: 'FPS',
+        dropOverlayTitle: 'Release files to import',
+        dropOverlayHint: 'Supports .ply / .spz / .sog / .esz / .json and more',
+        collapseLeft: 'Collapse left settings',
+        expandLeft: 'Expand left settings',
+        collapseRight: 'Collapse render settings',
+        expandRight: 'Expand render settings',
+      };
+const configJson = JSON.stringify({ labels }).replace(/
+  (() => {
+    const compact = window.matchMedia('(max-width: 720px)').matches;
+    const readCollapsed = storageKey => {
+      if (compact) {
+        return true;
+      }
+
+      try {
+        const stored = localStorage.getItem(storageKey);
+        if (stored !== null) {
+          return stored === 'true';
+        }
+      } catch {
+        // Keep the responsive default when storage is unavailable.
+      }
+
+      return false;
+    };
+
+    document.documentElement.dataset.viewerLeftCollapsed = String(readCollapsed('aholo:viewer:left-collapsed'));
+    document.documentElement.dataset.viewerRightCollapsed = String(readCollapsed('aholo:viewer:right-collapsed'));
+  })();
+
+
+
+  
+    
+    
+    0
+  
+
+  
+
+  
+
+  
+    
+      
+    
+    
+      
+        
+        {labels.selectFiles}
+        {labels.fileFormatHint}
+      
+      
+        
+        
+          
+          
+        
+      
+    
+
+    
+      
+        {labels.emptyFiles}
+      
+    
+
+    
+      
+        {labels.camera}
+        
+          {labels.useOrbit}
+          
+          
+        
+      
+      
+        
+          {labels.coordSystem}
+          
+        
+        
+          {labels.far}
+          
+        
+      
+      
+        
+        
+        
+      
+    
+  
+
+  
+    
+  
+
+  
+    
+      
+      {labels.dropOverlayTitle}
+      {labels.dropOverlayHint}
+    
+  
+
+  
diff --git a/website/src/components/docs/DocPager.astro b/website/src/components/docs/DocPager.astro
new file mode 100644
index 0000000..b5d355c
--- /dev/null
+++ b/website/src/components/docs/DocPager.astro
@@ -0,0 +1,36 @@
+---
+interface PagerItem {
+  href: string;
+  label: string;
+}
+
+interface Props {
+  previous?: PagerItem;
+  next?: PagerItem;
+}
+
+const { previous, next } = Astro.props;
+---
+
+
+  
+    {
+      previous && (
+        
+          ←
+          {previous.label}
+        
+      )
+    }
+  
+  
+    {
+      next && (
+        
+          {next.label}
+          →
+        
+      )
+    }
+  
+
diff --git a/website/src/components/docs/DocToc.astro b/website/src/components/docs/DocToc.astro
new file mode 100644
index 0000000..7e904cc
--- /dev/null
+++ b/website/src/components/docs/DocToc.astro
@@ -0,0 +1,30 @@
+---
+interface DocTocHeading {
+  depth: number;
+  slug: string;
+  text: string;
+}
+
+interface Props {
+  headings: readonly DocTocHeading[];
+  label: string;
+}
+
+const { headings, label } = Astro.props;
+const items = headings.filter(heading => heading.depth === 2 || heading.depth === 3);
+---
+
+{
+  items.length > 0 && (
+    
+      {label}
+      
+        {items.map(heading => (
+          
+            {heading.text}
+          
+        ))}
+      
+    
+  )
+}
diff --git a/website/src/components/site/Breadcrumbs.astro b/website/src/components/site/Breadcrumbs.astro
new file mode 100644
index 0000000..9be2480
--- /dev/null
+++ b/website/src/components/site/Breadcrumbs.astro
@@ -0,0 +1,21 @@
+---
+interface Props {
+  items: Array<{
+    href: string;
+    label: string;
+  }>;
+}
+
+const { items } = Astro.props;
+---
+
+
+  {
+    items.map((item, index) => (
+      <>
+        {item.label}
+        {index < items.length - 1 && /}
+      
+    ))
+  }
+
diff --git a/website/src/components/site/Header.astro b/website/src/components/site/Header.astro
new file mode 100644
index 0000000..f9c2fe0
--- /dev/null
+++ b/website/src/components/site/Header.astro
@@ -0,0 +1,203 @@
+---
+import LanguageSwitch from './LanguageSwitch.astro';
+import ThemeToggle from './ThemeToggle.astro';
+import { dictionary } from '../../i18n/dictionary.js';
+import { localizedPath } from '../../i18n/routes.js';
+import type { Locale } from '../../i18n/locales.js';
+import { navItems } from '../../utils/navigation.js';
+
+interface Props {
+  lang: Locale;
+  currentPath: string;
+}
+
+const { lang, currentPath } = Astro.props;
+const t = dictionary[lang];
+const githubUrl = 'https://github.com/manycoretech/aholo-viewer';
+const hasDrawerContext = Astro.slots.has('default');
+const drawerLabel = lang === 'zh-CN' ? '移动端导航' : 'Mobile navigation';
+const openMenuLabel = lang === 'zh-CN' ? '打开导航' : 'Open navigation';
+const closeMenuLabel = lang === 'zh-CN' ? '关闭导航' : 'Close navigation';
+const navLinks = navItems.map(item => {
+  const href = localizedPath(lang, item.href);
+  return {
+    href,
+    active: item.href === '/' ? currentPath === href : currentPath.startsWith(href),
+    label: t.nav[item.key],
+  };
+});
+---
+
+
+  
+
+  
+    
+  
+
+  
+    {
+      navLinks.map(item => (
+        
+          {item.label}
+        
+      ))
+    }
+  
+
+  
+    
+    
+    
+      
+    
+  
+
+
+
+  
+  
+    
+      
+        
+      
+      
+    
+    
+      {
+        navLinks.map(item => (
+          <>
+            
+              {item.label}
+            
+            {hasDrawerContext && item.active && (
+              
+                
+              
+            )}
+          
+        ))
+      }
+    
+  
+
+
+
diff --git a/website/src/components/site/LanguageSwitch.astro b/website/src/components/site/LanguageSwitch.astro
new file mode 100644
index 0000000..44b02e4
--- /dev/null
+++ b/website/src/components/site/LanguageSwitch.astro
@@ -0,0 +1,42 @@
+---
+import { localeStorageKey, locales, type Locale } from '../../i18n/locales.js';
+import { swapLocale } from '../../i18n/routes.js';
+
+interface Props {
+  lang: Locale;
+  currentPath: string;
+}
+
+const { lang, currentPath } = Astro.props;
+const target = locales.find(locale => locale.code !== lang) ?? locales[0];
+const targetHref = swapLocale(currentPath, lang, target.code);
+---
+
+
+  {target.shortLabel}
+
+
+
diff --git a/website/src/components/site/Sidebar.astro b/website/src/components/site/Sidebar.astro
new file mode 100644
index 0000000..f138e1c
--- /dev/null
+++ b/website/src/components/site/Sidebar.astro
@@ -0,0 +1,263 @@
+---
+interface SidebarItemInput {
+  href?: string;
+  label: string;
+  description?: string;
+  searchText?: string;
+  items?: SidebarItemInput[];
+}
+
+interface Props {
+  currentPath: string;
+  items: SidebarItemInput[];
+  search?: {
+    label: string;
+    empty: string;
+  };
+}
+
+const { currentPath, items, search } = Astro.props;
+const hasActiveContent = Astro.slots.has('activeContent');
+
+const getSearchText = (item: { label: string; description?: string; searchText?: string }) =>
+  [item.label, item.description, item.searchText].filter(Boolean).join(' ');
+---
+
+
+  {
+    search && (
+      
+        
+          
+          
+        
+        
+          {search.empty}
+        
+      
+    )
+  }
+  
+    {
+      items.map((item, index) =>
+        item.items?.length ? (
+          
+            
+              {item.label}
+            
+            
+              {item.items.map(child => {
+                const active = currentPath === child.href;
+                return (
+                  <>
+                    
+                      {child.label}
+                      {child.description && {child.description}}
+                    
+                    {active && hasActiveContent && (
+                      
+                        
+                      
+                    )}
+                  
+                );
+              })}
+            
+          
+        ) : (
+          <>
+            
+              {item.label}
+              {item.description && {item.description}}
+            
+            {currentPath === item.href && hasActiveContent && (
+              
+                
+              
+            )}
+          
+        ),
+      )
+    }
+  
+
+
+
diff --git a/website/src/components/site/ThemeToggle.astro b/website/src/components/site/ThemeToggle.astro
new file mode 100644
index 0000000..67a77fe
--- /dev/null
+++ b/website/src/components/site/ThemeToggle.astro
@@ -0,0 +1,15 @@
+
+
+
diff --git a/website/src/content.config.ts b/website/src/content.config.ts
new file mode 100644
index 0000000..4d3f717
--- /dev/null
+++ b/website/src/content.config.ts
@@ -0,0 +1,75 @@
+import { defineCollection } from 'astro:content';
+import { glob } from 'astro/loaders';
+import { z } from 'astro/zod';
+
+const localizedText = z.object({
+    'zh-CN': z.string().min(1),
+    'en-US': z.string().min(1),
+});
+
+const renderSessionRendererOptions = z
+    .object({
+        antialiasing: z.boolean().default(false),
+        pixelRatio: z.number().positive().optional(),
+    })
+    .default({
+        antialiasing: false,
+    });
+
+const exampleSurface = z.enum(['examples', 'playground', 'home']);
+const exampleSurfaces = z
+    .array(exampleSurface)
+    .min(1)
+    .refine(surfaces => new Set(surfaces).size === surfaces.length, {
+        message: 'Example surfaces must be unique.',
+    })
+    .or(z.literal('none'))
+    .default(['examples', 'playground']);
+const hexColor = z.string().regex(/^#[\da-f]{6}$/i);
+const exampleCoverImageUrl = z
+    .string()
+    .trim()
+    .min(1)
+    .refine(
+        value => {
+            if (value.startsWith('/')) {
+                return true;
+            }
+
+            try {
+                new URL(value);
+                return true;
+            } catch {
+                return false;
+            }
+        },
+        {
+            message: 'Example coverImageUrl must be an absolute URL or a site-root path.',
+        },
+    );
+
+const exampleSchema = z.object({
+    order: z.number().int().nonnegative(),
+    surfaces: exampleSurfaces,
+    tags: z.array(z.string().min(1)).min(1),
+    accent: hexColor,
+    coverImageUrl: exampleCoverImageUrl,
+    title: localizedText,
+    renderer: renderSessionRendererOptions,
+    showInteractionGuide: z.boolean().default(true),
+});
+
+export type ExampleData = z.infer;
+export type ExampleSurface = z.infer;
+
+const examples = defineCollection({
+    loader: glob({
+        base: './src/content/examples',
+        pattern: '*.json',
+    }),
+    schema: exampleSchema,
+});
+
+export const collections = {
+    examples,
+};
diff --git a/website/src/content/examples/3d-buffer-geometry.json b/website/src/content/examples/3d-buffer-geometry.json
new file mode 100644
index 0000000..a9961ac
--- /dev/null
+++ b/website/src/content/examples/3d-buffer-geometry.json
@@ -0,0 +1,15 @@
+{
+  "order": 6,
+  "tags": ["3d", "mesh", "buffer-geometry", "texture"],
+  "accent": "#34d399",
+  "coverImageUrl": "https://holo-cos.aholo3d.cn/aholo-opensource/page/example-cover/3d-buffer-geometry.2ae2f964.png",
+  "renderer": {
+    "antialiasing": true,
+    "pixelRatio": 1
+  },
+  "showInteractionGuide": false,
+  "title": {
+    "zh-CN": "3D 几何",
+    "en-US": "3D Buffer Geometry"
+  }
+}
diff --git a/website/src/content/examples/3d-buffer-geometry.ts b/website/src/content/examples/3d-buffer-geometry.ts
new file mode 100644
index 0000000..7edf99f
--- /dev/null
+++ b/website/src/content/examples/3d-buffer-geometry.ts
@@ -0,0 +1,85 @@
+import type { RenderRuntime } from '../../client/render-runtime.js';
+import {
+    AmbientLight,
+    BufferAttribute,
+    BufferGeometry,
+    downloadTexture,
+    Mesh,
+    MeshPhongMaterial,
+    PerspectiveCamera,
+    Side,
+    Vector3,
+} from '@manycore/aholo-viewer';
+
+const TEXTURE_BASE_URL = 'https://holo-cos.aholo3d.cn/aholo-opensource/page/texture/';
+const TEXTURE_URLS = [`${TEXTURE_BASE_URL}grasslight-big.e8cc62ea.jpg`, `${TEXTURE_BASE_URL}lavatile.52fa1c03.jpg`];
+
+export default async function runner({ renderer, loading, signal }: RenderRuntime) {
+    const { scene, viewer } = renderer;
+    const camera = viewer.getCamera() as PerspectiveCamera;
+    camera.up.set(0, 0, 1);
+    camera.position.set(10, 10, 10);
+    camera.lookAt(new Vector3(0, 0, 0));
+    scene.add(new AmbientLight(0xffffff, 1));
+
+    loading.show('Loading textures');
+    const textures = await Promise.all(TEXTURE_URLS.map(url => downloadTexture(url)));
+    if (signal.aborted) {
+        throw new DOMException('The 3D buffer geometry sample load was aborted.', 'AbortError');
+    }
+
+    const meshes = textures.map(
+        texture => new Mesh(createGeometry(), new MeshPhongMaterial({ texture, side: Side.DoubleSide })),
+    );
+    scene.add(meshes);
+
+    loading.hide();
+    renderer.frame(({ time }) => {
+        const elapsedSec = time * 0.001;
+        meshes.forEach(mesh => {
+            mesh.rotation.z = elapsedSec / 4;
+        });
+        return true;
+    });
+
+    return () => {
+        scene.removeAllChildren();
+        meshes.forEach(m => m.freeAllGpuResourceOwned());
+    };
+}
+
+const TRIANGLE_COUNT = 4000;
+const FIELD_SIZE = 10;
+const TRIANGLE_SIZE = 0.4;
+const randomOffset = (span: number) => (Math.random() - 0.5) * span;
+function createGeometry() {
+    const positions = new Float32Array(TRIANGLE_COUNT * 9);
+    const normals = new Float32Array(TRIANGLE_COUNT * 9);
+    const uvs = new Float32Array(TRIANGLE_COUNT * 6);
+    for (let i = 0; i < TRIANGLE_COUNT; i++) {
+        const cx = randomOffset(FIELD_SIZE);
+        const cy = randomOffset(FIELD_SIZE);
+        const cz = randomOffset(FIELD_SIZE);
+        for (let j = 0; j < 3; j++) {
+            const x = cx + randomOffset(TRIANGLE_SIZE);
+            const y = cy + randomOffset(TRIANGLE_SIZE);
+            const z = cz + randomOffset(TRIANGLE_SIZE);
+            positions[i * 9 + j * 3 + 0] = x;
+            positions[i * 9 + j * 3 + 1] = y;
+            positions[i * 9 + j * 3 + 2] = z;
+            normals[i * 9 + j * 3 + 0] = x;
+            normals[i * 9 + j * 3 + 1] = y;
+            normals[i * 9 + j * 3 + 2] = z;
+        }
+
+        uvs[i * 6 + 2] = 0.5;
+        uvs[i * 6 + 3] = 1;
+        uvs[i * 6 + 4] = 1;
+    }
+
+    const geometry = new BufferGeometry();
+    geometry.setAttribute('position', new BufferAttribute(positions, 3));
+    geometry.setAttribute('normal', new BufferAttribute(normals, 3));
+    geometry.setAttribute('uv', new BufferAttribute(uvs, 2));
+    return geometry;
+}
diff --git a/website/src/content/examples/3d-point-light.json b/website/src/content/examples/3d-point-light.json
new file mode 100644
index 0000000..8fc3150
--- /dev/null
+++ b/website/src/content/examples/3d-point-light.json
@@ -0,0 +1,15 @@
+{
+  "order": 7,
+  "tags": ["3d", "lighting", "point-light"],
+  "accent": "#fbbf24",
+  "coverImageUrl": "https://holo-cos.aholo3d.cn/aholo-opensource/page/example-cover/3d-point-light.28df11a2.png",
+  "renderer": {
+    "antialiasing": true,
+    "pixelRatio": 1
+  },
+  "showInteractionGuide": false,
+  "title": {
+    "zh-CN": "3D 点光源",
+    "en-US": "3D Point Light"
+  }
+}
diff --git a/website/src/content/examples/3d-point-light.ts b/website/src/content/examples/3d-point-light.ts
new file mode 100644
index 0000000..c8f32a0
--- /dev/null
+++ b/website/src/content/examples/3d-point-light.ts
@@ -0,0 +1,190 @@
+import {
+    BufferAttribute,
+    BufferGeometry,
+    DirectionalLight,
+    downloadTexture,
+    Mesh,
+    MeshBasicMaterial,
+    MeshPhongMaterial,
+    PerspectiveCamera,
+    PointLight,
+    Vector3,
+} from '@manycore/aholo-viewer';
+import type { RenderRuntime } from '../../client/render-runtime.js';
+
+const FLOOR_TEXTURE_URL = 'https://holo-cos.aholo3d.cn/aholo-opensource/page/texture/disturb.76f1cbca.jpg';
+
+export default async function runner({ renderer, control, loading, signal }: RenderRuntime) {
+    const { scene, viewer } = renderer;
+    const camera = viewer.getCamera() as PerspectiveCamera;
+    camera.near = 100;
+    camera.far = 1_000_000;
+    camera.updateProjectionMatrix();
+
+    loading.show('Loading floor texture');
+    const floorTexture = await downloadTexture(FLOOR_TEXTURE_URL);
+    throwIfAborted(signal);
+
+    const directionalLight = new DirectionalLight(0xffffff, 0.2);
+    const floorGeometry = createPlaneGeometry(FLOOR_SIZE);
+    const floorMaterial = new MeshPhongMaterial({
+        specular: 0xffffff,
+        shininess: 500,
+        texture: floorTexture,
+    });
+
+    const floor = new Mesh(floorGeometry, floorMaterial);
+    floor.position.set(0, 0, -2000);
+
+    const bulbGeometry = createSphereGeometry(300);
+    const bulbMaterials = LIGHT_COLORS.map(color => new MeshBasicMaterial({ color }));
+    const pointLights = LIGHT_COLORS.map((color, i) => {
+        const light = new PointLight(color, 2.5, 30000, 1);
+        light.add(new Mesh(bulbGeometry, bulbMaterials[i]!));
+        return light;
+    });
+
+    const geometry = createTorusGeometry(500, 150);
+    const material = new MeshPhongMaterial({ specular: 0xffffff, shininess: 100 });
+    const meshList = Array.from({ length: OBJECT_COUNT }, () => {
+        const mesh = new Mesh(geometry, material);
+        mesh.position.set(randSigned(100000), randSigned(100000), rand(2000, 20000));
+        mesh.rotation.set(rand(0, Math.PI), rand(0, Math.PI), 0);
+        return mesh;
+    });
+
+    const sceneObjects = [directionalLight, floor, ...pointLights, ...meshList];
+    scene.add(sceneObjects);
+
+    camera.up.set(0, 0, 1);
+    camera.position.set(0, 0, 100000);
+    camera.lookAt(new Vector3(20000, 20000, 0));
+    camera.updateMatrixWorld(true);
+    control.setOptions({ enabled: false });
+
+    loading.hide();
+
+    /** Same driver as other previews: frame callback returns whether to render; adapter calls `viewer.render()` once. */
+    renderer.frame(({ time }) => {
+        const elapsedSec = time * 0.001;
+        pointLights.forEach((light, i) => {
+            const phase = (i / pointLights.length) * Math.PI;
+            const radius = Math.sin(elapsedSec * 0.2 + phase) * 80000;
+            light.position.set(Math.cos(phase) * radius, Math.sin(phase) * radius, 0);
+        });
+        return true;
+    });
+
+    renderer.render();
+
+    return () => {
+        scene.removeObjects(sceneObjects);
+        pointLights.flatMap(light => light.removeAllChildren()).forEach(child => child.destroy());
+
+        for (const object of sceneObjects) object.destroy();
+        for (const resource of [
+            floorGeometry,
+            floorMaterial,
+            bulbGeometry,
+            ...bulbMaterials,
+            geometry,
+            material,
+            floorTexture,
+        ]) {
+            resource.destroy();
+        }
+    };
+}
+
+function throwIfAborted(signal: AbortSignal) {
+    if (signal.aborted) {
+        throw new DOMException('The 3D point light sample load was aborted.', 'AbortError');
+    }
+}
+
+const TAU = Math.PI * 2;
+const FLOOR_SIZE = 200000;
+const OBJECT_COUNT = 3000;
+const LIGHT_COLORS = [0xff0040, 0x0040ff, 0x80ff80, 0xffaa00, 0x00ffaa, 0xff1100];
+
+function rand(min: number, max: number) {
+    return min + Math.random() * (max - min);
+}
+
+const randSigned = (limit: number) => rand(-limit, limit);
+
+function createSurfaceGeometry(
+    widthSegments: number,
+    heightSegments: number,
+    sample: (u: number, v: number) => [number, number, number, number, number, number],
+): BufferGeometry {
+    const positions: number[] = [];
+    const normals: number[] = [];
+    const uvs: number[] = [];
+    const indices: number[] = [];
+
+    for (let y = 0; y <= heightSegments; y++) {
+        for (let x = 0; x <= widthSegments; x++) {
+            const u = x / widthSegments;
+            const v = y / heightSegments;
+            const [px, py, pz, nx, ny, nz] = sample(u, v);
+            positions.push(px, py, pz);
+            normals.push(nx, ny, nz);
+            uvs.push(u, 1 - v);
+        }
+    }
+
+    const row = widthSegments + 1;
+    for (let y = 0; y < heightSegments; y++) {
+        for (let x = 0; x < widthSegments; x++) {
+            const a = x + row * y;
+            const b = a + row;
+            indices.push(a, b, a + 1, b, b + 1, a + 1);
+        }
+    }
+
+    const geometry = new BufferGeometry();
+    geometry.setIndex(indices);
+    geometry.setAttribute('position', new BufferAttribute(new Float32Array(positions), 3));
+    geometry.setAttribute('normal', new BufferAttribute(new Float32Array(normals), 3));
+    geometry.setAttribute('uv', new BufferAttribute(new Float32Array(uvs), 2));
+    geometry.computeBoundingSphere();
+    return geometry;
+}
+
+function createPlaneGeometry(size: number) {
+    return createSurfaceGeometry(1, 1, (u, v) => [(u - 0.5) * size, (0.5 - v) * size, 0, 0, 0, 1]);
+}
+
+function createSphereGeometry(radius: number, segments = 18) {
+    return createSurfaceGeometry(segments, segments, (u, v) => {
+        const phi = u * TAU;
+        const theta = v * Math.PI;
+        const sinTheta = Math.sin(theta);
+        const x = -Math.cos(phi) * sinTheta;
+        const y = Math.cos(theta);
+        const z = Math.sin(phi) * sinTheta;
+        return [x * radius, y * radius, z * radius, x, y, z];
+    });
+}
+
+function createTorusGeometry(radius: number, tube: number, segments = 18) {
+    return createSurfaceGeometry(segments, segments, (u, v) => {
+        const phi = u * TAU;
+        const theta = -v * TAU;
+        const cosPhi = Math.cos(phi);
+        const sinPhi = Math.sin(phi);
+        const cosTheta = Math.cos(theta);
+        const sinTheta = Math.sin(theta);
+        const nx = cosTheta * cosPhi;
+        const ny = cosTheta * sinPhi;
+        return [
+            (radius + tube * cosTheta) * cosPhi,
+            (radius + tube * cosTheta) * sinPhi,
+            tube * sinTheta,
+            nx,
+            ny,
+            sinTheta,
+        ];
+    });
+}
diff --git a/website/src/content/examples/home-interaction.json b/website/src/content/examples/home-interaction.json
new file mode 100644
index 0000000..041f45a
--- /dev/null
+++ b/website/src/content/examples/home-interaction.json
@@ -0,0 +1,15 @@
+{
+  "order": 99,
+  "surfaces": ["home"],
+  "tags": ["3dgs", "splatting", "lod", "streaming"],
+  "accent": "#38bdf8",
+  "coverImageUrl": "/home/feature-lod.svg",
+  "renderer": {
+    "antialiasing": false,
+    "pixelRatio": 1
+  },
+  "title": {
+    "zh-CN": "主页交互",
+    "en-US": "Home Interaction"
+  }
+}
diff --git a/website/src/content/examples/home-interaction.ts b/website/src/content/examples/home-interaction.ts
new file mode 100644
index 0000000..718fd73
--- /dev/null
+++ b/website/src/content/examples/home-interaction.ts
@@ -0,0 +1,152 @@
+import { createViewerContext, setViewerConfig, SplatLoader, SplatUtils, ToneMapping } from '@manycore/aholo-viewer';
+import type { RenderRuntime, RuntimeIndexedDBStorage } from '../../client/render-runtime.js';
+
+const HOME_INTERACTION_ENTER_EVENT = 'aholo:home-interaction-enter';
+
+export default async function runner({ renderer, control, loading, indexedDB, signal }: RenderRuntime) {
+    const { scene, viewer } = renderer;
+    setViewerConfig(viewer, {
+        pipeline: {
+            Splatting: {
+                enabled: true,
+                toneMapping: {
+                    enabled: true,
+                    toneMapping: ToneMapping.Neutral,
+                },
+            },
+        },
+    });
+    const camera = viewer.getCamera();
+    camera.up.set(0, -1, 0);
+    camera.position.set(-0.9800918057099783, -1.7506846691679372, 2.292388933466888);
+    camera.rotation.set(0.11785010330530897, -0.030190695395364366, -3.133801078676436);
+    control.setOptions({ enabled: true });
+
+    loading.show('Loading home interaction');
+    const envData = await loadResource(
+        'https://holo-cos.aholo3d.cn/aholo-opensource/gs_file/misc/home-interaction-env.73524ff2.sog',
+        indexedDB,
+    );
+    const env = await SplatUtils.createSplat(envData);
+    scene.add(env);
+    const meta = await loadLodMeta(
+        'https://holo-cos.aholo3d.cn/aholo-opensource/gs_file/huochezhan/chunk-lod/6b077ba2/lod-meta.json',
+        signal,
+    );
+    throwIfAborted(signal);
+
+    const splat = new SplatUtils.LodSplat(
+        meta,
+        {
+            minLevel: meta.levels - 1,
+            maxBudget: 2000000,
+            schedulerParallelCounts: 99999,
+        },
+        createViewerContext(viewer),
+        url => loadResource(url, indexedDB),
+    );
+    scene.add(splat.container);
+
+    splat.tick(viewer.getCamera());
+    splat.start();
+    renderer.render();
+    await splat.onFinishSchedule();
+    if (signal.aborted) {
+        splat.destroy();
+        throwIfAborted(signal);
+    }
+    loading.hide();
+
+    // Resolve the session once the preview is ready. Upgrading to the full-detail
+    // walkthrough continues in the background when the user enters the space.
+    void upgradeOnEnter();
+
+    return () => splat.destroy();
+
+    async function upgradeOnEnter() {
+        try {
+            await waitForHomeInteraction(signal);
+        } catch {
+            return;
+        }
+        if (signal.aborted) {
+            return;
+        }
+
+        splat.setConfig({
+            minLevel: 0,
+            schedulerParallelCounts: 4,
+        });
+        renderer.frame(({ delta }) => {
+            // Outside the immersive mode the camera is frozen: skip the per-frame
+            // control damping and LOD scheduling work entirely.
+            if (!document.documentElement.classList.contains('home-interactive')) {
+                return false;
+            }
+            const updated = control.update(delta);
+            splat.tick(viewer.getCamera());
+            return updated;
+        });
+    }
+}
+
+function waitForHomeInteraction(signal: AbortSignal) {
+    if (document.documentElement.classList.contains('home-interactive')) {
+        return Promise.resolve();
+    }
+    if (signal.aborted) {
+        return Promise.reject(new DOMException('The home interaction load was aborted.', 'AbortError'));
+    }
+
+    return new Promise((resolve, reject) => {
+        const cleanup = () => {
+            document.removeEventListener(HOME_INTERACTION_ENTER_EVENT, handleEnter);
+            signal.removeEventListener('abort', handleAbort);
+        };
+        const handleEnter = () => {
+            cleanup();
+            resolve();
+        };
+        const handleAbort = () => {
+            cleanup();
+            reject(new DOMException('The home interaction load was aborted.', 'AbortError'));
+        };
+
+        document.addEventListener(HOME_INTERACTION_ENTER_EVENT, handleEnter, { once: true });
+        signal.addEventListener('abort', handleAbort, { once: true });
+    });
+}
+
+async function loadLodMeta(url: string, signal: AbortSignal) {
+    const response = await fetch(url, { signal });
+    const content = await response.json();
+    if (!(content.magicCode === 2500660 && content.type === 'lod-splat')) {
+        throw new Error('LOD metadata is not a supported lod-splat manifest.');
+    }
+    return content as SplatUtils.LodMeta;
+}
+
+type ISplatData = ReturnType;
+async function loadResource(url: string, db: RuntimeIndexedDBStorage) {
+    const cached = await db.get(url, { version: 0 });
+    if (cached) {
+        const data = new SplatLoader.CompressedSplatData();
+        data.deserialize(cached);
+        return data;
+    }
+
+    const fileType = SplatLoader.detectSplatFileType(url, new Uint8Array());
+    if (fileType === undefined) {
+        throw new Error(`Unsupported LOD splat resource: ${url}`);
+    }
+
+    const data = await SplatLoader.parseSplatData(fileType, url, SplatLoader.SplatPackType.Compressed);
+    await db.set(url, data.serialize(), { version: 0 });
+    return data;
+}
+
+function throwIfAborted(signal: AbortSignal) {
+    if (signal.aborted) {
+        throw new DOMException('The home LOD stream sample load was aborted.', 'AbortError');
+    }
+}
diff --git a/website/src/content/examples/splatting-basic.json b/website/src/content/examples/splatting-basic.json
new file mode 100644
index 0000000..bef9649
--- /dev/null
+++ b/website/src/content/examples/splatting-basic.json
@@ -0,0 +1,14 @@
+{
+  "order": 0,
+  "tags": ["3dgs", "splatting"],
+  "accent": "#5eead4",
+  "coverImageUrl": "https://holo-cos.aholo3d.cn/aholo-opensource/page/example-cover/splatting-basic.9c5fc85d.png",
+  "renderer": {
+    "antialiasing": false,
+    "pixelRatio": 1
+  },
+  "title": {
+    "zh-CN": "Splatting 基础",
+    "en-US": "Splatting Basic"
+  }
+}
diff --git a/website/src/content/examples/splatting-basic.ts b/website/src/content/examples/splatting-basic.ts
new file mode 100644
index 0000000..3a49f15
--- /dev/null
+++ b/website/src/content/examples/splatting-basic.ts
@@ -0,0 +1,136 @@
+import { type Viewer, setViewerConfig, ToneMapping, SplatLoader, SplatUtils, Vector3 } from '@manycore/aholo-viewer';
+import type { RenderRuntime, RuntimeConfigPanel, RuntimeIndexedDBStorage } from '../../client/render-runtime.js';
+
+export default async function runner({ renderer, control, loading, configPanel, indexedDB, signal }: RenderRuntime) {
+    const { scene, viewer } = renderer;
+    setViewerConfig(viewer, {
+        pipeline: {
+            Splatting: { enabled: true },
+        },
+    });
+    initConfigPanel(viewer, configPanel);
+
+    const camera = viewer.getCamera();
+    camera.up.set(0, -1, 0);
+    camera.position.set(-1.5, -0.5, 0);
+    camera.lookAt(new Vector3(0, 0, 0));
+    control.setOptions({ enabled: true, useOrbit: true });
+
+    loading.show('Loading splat data');
+    const data = await loadSplatData(
+        'https://holo-cos.aholo3d.cn/aholo-opensource/gs_file/bear/bear.3d71a266.sog',
+        indexedDB,
+    );
+    throwIfAborted(signal);
+    const splat = await SplatUtils.createSplat(data);
+    throwIfAborted(signal);
+    scene.add(splat);
+
+    renderer.frame(({ delta }) => control.update(delta));
+
+    renderer.render();
+    loading.hide();
+
+    return () => {
+        scene?.remove(splat);
+        splat?.destroy();
+    };
+}
+
+function throwIfAborted(signal: AbortSignal) {
+    if (signal.aborted) {
+        throw new DOMException('The splatting basic sample load was aborted.', 'AbortError');
+    }
+}
+
+function initConfigPanel(viewer: Viewer, configPanel: RuntimeConfigPanel) {
+    const params = {
+        precalculateEnabled: true,
+        normalizedFalloff: false,
+        preBlurAmount: 0.3,
+        blurAmount: 0,
+        focalAdjustment: 2,
+        detailCullingThreshold: 1,
+        toneMappingEnabled: false,
+        toneMapping: ToneMapping.Neutral,
+        exposure: 1,
+    };
+
+    const applyConfig = () => {
+        setViewerConfig(viewer, {
+            pipeline: {
+                Splatting: {
+                    pack: {
+                        precalculateEnabled: params.precalculateEnabled,
+                    },
+                    raster: {
+                        normalizedFalloff: params.normalizedFalloff,
+                        preBlurAmount: params.preBlurAmount,
+                        blurAmount: params.blurAmount,
+                        focalAdjustment: params.focalAdjustment,
+                        detailCullingThreshold: params.detailCullingThreshold,
+                    },
+                    toneMapping: {
+                        enabled: params.toneMappingEnabled,
+                        toneMapping: params.toneMapping,
+                        exposure: params.exposure,
+                    },
+                },
+            },
+        });
+    };
+
+    applyConfig();
+
+    const pane = configPanel.createPane({ title: 'Splatting' });
+    pane.addBinding(params, 'precalculateEnabled', { label: 'Precalculate SH' }).on('change', applyConfig);
+    pane.addBinding(params, 'normalizedFalloff', { label: 'Normalized falloff' }).on('change', applyConfig);
+    pane.addBinding(params, 'preBlurAmount', { label: 'Pre blur', max: 1, min: 0, step: 0.1 }).on(
+        'change',
+        applyConfig,
+    );
+    pane.addBinding(params, 'blurAmount', { label: 'Blur', max: 1, min: 0, step: 0.1 }).on('change', applyConfig);
+    pane.addBinding(params, 'focalAdjustment', { label: 'Focal adjustment', max: 2, min: 0.5, step: 0.1 }).on(
+        'change',
+        applyConfig,
+    );
+    pane.addBinding(params, 'detailCullingThreshold', { label: 'Detail culling', max: 4, min: 0, step: 1 }).on(
+        'change',
+        applyConfig,
+    );
+
+    const toneMapping = pane.addFolder({ title: 'Tone Mapping', expanded: false });
+    toneMapping.addBinding(params, 'toneMappingEnabled', { label: 'Enabled' }).on('change', applyConfig);
+    toneMapping
+        .addBinding(params, 'toneMapping', {
+            label: 'Curve',
+            options: {
+                Linear: ToneMapping.Linear,
+                Reinhard: ToneMapping.Reinhard,
+                ACES: ToneMapping.ACES,
+                ACESFilmic: ToneMapping.ACESFilmic,
+                Neutral: ToneMapping.Neutral,
+            },
+        })
+        .on('change', applyConfig);
+    toneMapping
+        .addBinding(params, 'exposure', { label: 'Exposure', max: 2, min: 0.1, step: 0.1 })
+        .on('change', applyConfig);
+}
+
+type ISplatData = ReturnType;
+
+const CACHE_KEY = 'splatting-basic:bear';
+const CACHE_VERSION = 0;
+async function loadSplatData(url: string, db: RuntimeIndexedDBStorage) {
+    const cached = await db.get(CACHE_KEY, { version: CACHE_VERSION });
+    if (cached) {
+        const data = new SplatLoader.SuperCompressedSplatData();
+        data.deserialize(cached);
+        return data;
+    }
+
+    const data = await SplatLoader.parseSplatData(SplatLoader.SplatFileType.SOG, url);
+    await db.set(CACHE_KEY, data.serialize(), { version: CACHE_VERSION });
+    return data;
+}
diff --git a/website/src/content/examples/splatting-lod-stream.json b/website/src/content/examples/splatting-lod-stream.json
new file mode 100644
index 0000000..e128212
--- /dev/null
+++ b/website/src/content/examples/splatting-lod-stream.json
@@ -0,0 +1,14 @@
+{
+  "order": 1,
+  "tags": ["3dgs", "splatting", "lod", "streaming"],
+  "accent": "#38bdf8",
+  "coverImageUrl": "https://holo-cos.aholo3d.cn/aholo-opensource/page/example-cover/splatting-lod-stream.6b6d466a.png",
+  "renderer": {
+    "antialiasing": false,
+    "pixelRatio": 1
+  },
+  "title": {
+    "zh-CN": "Splatting LOD 流式加载",
+    "en-US": "Splatting LOD Stream"
+  }
+}
diff --git a/website/src/content/examples/splatting-lod-stream.ts b/website/src/content/examples/splatting-lod-stream.ts
new file mode 100644
index 0000000..3c042a3
--- /dev/null
+++ b/website/src/content/examples/splatting-lod-stream.ts
@@ -0,0 +1,262 @@
+import {
+    createViewerContext,
+    setViewerConfig,
+    SplatLoader,
+    SplatUtils,
+    ToneMapping,
+    type Viewer,
+} from '@manycore/aholo-viewer';
+import type { RenderRuntime, RuntimeConfigPanel, RuntimeIndexedDBStorage } from '../../client/render-runtime.js';
+
+const LodConfig: Omit & {
+    highPrecisionEnabled: boolean;
+    maxBudgetMillions: number;
+} = {
+    minLevel: 0,
+    maxBudget: 6000000,
+    backgroundPenalty: 0.5,
+    outsidePenalty: 0.4,
+    behindPenalty: 0.1,
+    behindTolerance: -0.2,
+    behindDistanceTolerance: 2,
+    hysteresisTicks: 4,
+    schedulerParallelCounts: 4,
+    schedulerExistingTaskLimit: 64,
+    schedulerMinDuration: 160,
+    highPrecisionEnabled: false,
+    maxBudgetMillions: 6,
+};
+
+export default async function runner({ renderer, control, loading, configPanel, indexedDB, signal }: RenderRuntime) {
+    const { scene, viewer } = renderer;
+    setViewerConfig(viewer, {
+        pipeline: {
+            Splatting: {
+                enabled: true,
+                pack: {
+                    precalculateEnabled: false,
+                },
+                toneMapping: {
+                    enabled: true,
+                    toneMapping: ToneMapping.Neutral,
+                },
+            },
+        },
+    });
+    const camera = viewer.getCamera();
+    camera.up.set(0, -1, 0);
+    camera.position.set(-0.9800918057099783, -1.7506846691679372, 2.292388933466888);
+    camera.rotation.set(0.11785010330530897, -0.030190695395364366, -3.133801078676436);
+    control.setOptions({ enabled: true });
+
+    loading.show('Streaming initial LOD');
+    const envData = await loadResource(
+        'https://holo-cos.aholo3d.cn/aholo-opensource/gs_file/misc/home-interaction-env.73524ff2.sog',
+        indexedDB,
+    );
+    const env = await SplatUtils.createSplat(envData);
+    scene.add(env);
+
+    const meta = await loadLodMeta(
+        'https://holo-cos.aholo3d.cn/aholo-opensource/gs_file/huochezhan/chunk-lod/6b077ba2/lod-meta.json',
+        signal,
+    );
+    throwIfAborted(signal);
+
+    const splat = new SplatUtils.LodSplat(
+        meta,
+        {
+            ...LodConfig,
+            minLevel: meta.levels - 1,
+            schedulerParallelCounts: 99999,
+        },
+        createViewerContext(viewer),
+        url => loadResource(url, indexedDB),
+    );
+    scene.add(splat.container);
+
+    splat.tick(camera);
+    splat.start();
+    await splat.onFinishSchedule();
+    if (signal.aborted) {
+        splat.destroy();
+        throwIfAborted(signal);
+    }
+    loading.hide();
+
+    if (signal.aborted) {
+        splat.destroy();
+        throwIfAborted(signal);
+    }
+
+    initConfigPanel(splat, configPanel, viewer);
+
+    renderer.frame(({ delta }) => {
+        const updated = control.update(delta);
+        splat.tick(viewer.getCamera());
+        return updated;
+    });
+
+    return () => splat.destroy();
+}
+
+function initConfigPanel(splat: SplatUtils.LodSplat, configPanel: RuntimeConfigPanel, viewer: Viewer) {
+    const applyConfig = () => {
+        if (LodConfig.highPrecisionEnabled) {
+            setViewerConfig(viewer, {
+                pipeline: {
+                    Splatting: {
+                        pack: {
+                            highPrecisionEnabled: true,
+                            cameraRelativeEnabled: false,
+                        },
+                    },
+                },
+            });
+        } else {
+            setViewerConfig(viewer, {
+                pipeline: {
+                    Splatting: {
+                        pack: {
+                            highPrecisionEnabled: false,
+                            cameraRelativeEnabled: true,
+                        },
+                    },
+                },
+            });
+        }
+        LodConfig.maxBudget = LodConfig.maxBudgetMillions * 1_000_000;
+        splat.setConfig(LodConfig);
+    };
+    applyConfig();
+
+    const panel = configPanel.createPane({ title: 'Splatting LOD Stream' });
+    panel.addBinding(LodConfig, 'highPrecisionEnabled', { label: 'High precision' }).on('change', applyConfig);
+    const budget = panel.addFolder({ title: 'LOD Budget', expanded: true });
+    budget
+        .addBinding(LodConfig, 'minLevel', {
+            label: 'Min level',
+            max: 4,
+            min: 0,
+            step: 1,
+        })
+        .on('change', applyConfig);
+    budget
+        .addBinding(LodConfig, 'maxBudgetMillions', {
+            label: 'Max budget (M)',
+            max: 20,
+            min: 1,
+            step: 0.1,
+        })
+        .on('change', applyConfig);
+
+    const visibility = panel.addFolder({ title: 'Visibility Weights', expanded: false });
+    visibility
+        .addBinding(LodConfig, 'backgroundPenalty', {
+            label: 'Background',
+            max: 1,
+            min: 0,
+            step: 0.05,
+        })
+        .on('change', applyConfig);
+    visibility
+        .addBinding(LodConfig, 'outsidePenalty', {
+            label: 'Outside',
+            max: 1,
+            min: 0,
+            step: 0.05,
+        })
+        .on('change', applyConfig);
+    visibility
+        .addBinding(LodConfig, 'behindPenalty', {
+            label: 'Behind',
+            max: 1,
+            min: 0,
+            step: 0.05,
+        })
+        .on('change', applyConfig);
+    visibility
+        .addBinding(LodConfig, 'behindTolerance', {
+            label: 'Behind dot',
+            max: 0.5,
+            min: -1,
+            step: 0.05,
+        })
+        .on('change', applyConfig);
+    visibility
+        .addBinding(LodConfig, 'behindDistanceTolerance', {
+            label: 'Behind dist',
+            max: 12,
+            min: 0,
+            step: 0.5,
+        })
+        .on('change', applyConfig);
+    visibility
+        .addBinding(LodConfig, 'hysteresisTicks', {
+            label: 'Hysteresis',
+            max: 12,
+            min: 0,
+            step: 1,
+        })
+        .on('change', applyConfig);
+
+    const scheduler = panel.addFolder({ title: 'Streaming Scheduler', expanded: false });
+    scheduler
+        .addBinding(LodConfig, 'schedulerParallelCounts', {
+            label: 'Parallel',
+            max: 16,
+            min: 1,
+            step: 1,
+        })
+        .on('change', applyConfig);
+    scheduler
+        .addBinding(LodConfig, 'schedulerExistingTaskLimit', {
+            label: 'Cached tasks',
+            max: 256,
+            min: 1,
+            step: 1,
+        })
+        .on('change', applyConfig);
+    scheduler
+        .addBinding(LodConfig, 'schedulerMinDuration', {
+            label: 'Min duration',
+            max: 500,
+            min: 0,
+            step: 20,
+        })
+        .on('change', applyConfig);
+}
+
+async function loadLodMeta(url: string, signal: AbortSignal) {
+    const response = await fetch(url, { signal });
+    const content = await response.json();
+    if (!(content.magicCode === 2500660 && content.type === 'lod-splat')) {
+        throw new Error('LOD metadata is not a supported lod-splat manifest.');
+    }
+    return content as SplatUtils.LodMeta;
+}
+
+type ISplatData = ReturnType;
+async function loadResource(url: string, db: RuntimeIndexedDBStorage) {
+    const cached = await db.get(url, { version: 0 });
+    if (cached) {
+        const data = new SplatLoader.CompressedSplatData();
+        data.deserialize(cached);
+        return data;
+    }
+
+    const fileType = SplatLoader.detectSplatFileType(url, new Uint8Array());
+    if (fileType === undefined) {
+        throw new Error(`Unsupported LOD splat resource: ${url}`);
+    }
+
+    const data = await SplatLoader.parseSplatData(fileType, url, SplatLoader.SplatPackType.Compressed);
+    await db.set(url, data.serialize(), { version: 0 });
+    return data;
+}
+
+function throwIfAborted(signal: AbortSignal) {
+    if (signal.aborted) {
+        throw new DOMException('The splatting LOD stream sample load was aborted.', 'AbortError');
+    }
+}
diff --git a/website/src/content/examples/walk-demo.json b/website/src/content/examples/walk-demo.json
new file mode 100644
index 0000000..76409a8
--- /dev/null
+++ b/website/src/content/examples/walk-demo.json
@@ -0,0 +1,15 @@
+{
+  "order": 4,
+  "tags": ["walk", "3dgs", "first-person", "third-person"],
+  "accent": "#0ea5e9",
+  "coverImageUrl": "https://holo-cos.aholo3d.cn/aholo-opensource/page/example-cover/walk-demo.2a5373b0.png",
+  "renderer": {
+    "antialiasing": false,
+    "pixelRatio": 1
+  },
+  "showInteractionGuide": false,
+  "title": {
+    "zh-CN": "Splatting 行走模式",
+    "en-US": "Splatting Walk Mode"
+  }
+}
diff --git a/website/src/content/examples/walk-demo.ts b/website/src/content/examples/walk-demo.ts
new file mode 100644
index 0000000..0b5b59d
--- /dev/null
+++ b/website/src/content/examples/walk-demo.ts
@@ -0,0 +1,2257 @@
+/**
+ * @file Walk demo: splats + collision + ViewerWalkMode.
+ *
+ * Derived from SuperSplat Viewer (MIT) and adapted for Aholo Viewer, voxel collision, and the website runtime.
+ *
+ * Reading order for code display:
+ * 1. Voxel collision data and queries.
+ * 2. Capsule push-out and walk controller.
+ * 3. Character presentation.
+ * 4. Demo scene wiring, presets, and resource loading.
+ *
+ * Scene presets and spawn poses are defined near the bottom of the file.
+ */
+import type { RenderRuntime, RuntimeIndexedDBStorage } from '../../client/render-runtime.js';
+import {
+    AmbientLight,
+    Animation,
+    BackgroundMode,
+    DirectionalLight,
+    createViewerContext,
+    downloadTexture,
+    SplatLoader,
+    GLTFLoader,
+    Object3D,
+    PerspectiveCamera,
+    setViewerConfig,
+    SplatUtils,
+    Vector3,
+    Euler,
+    Box3,
+    Color,
+} from '@manycore/aholo-viewer';
+import type { Scene3D, Viewer } from '@manycore/aholo-viewer';
+
+const AnimationPlugin = Animation.AnimationPlugin;
+const AnimationMixer = Animation.AnimationMixer;
+const Skeleton = Animation.Skeleton;
+
+const { CompressedSplatData, parseSplatData, detectSplatFileType, SplatPackType } = SplatLoader;
+type SerializedCompressedSplatData = Parameters['deserialize']>[0];
+const { createSplat, LodSplat } = SplatUtils;
+const { loadGLTF } = GLTFLoader;
+
+type AnimationClip = Animation.AnimationClip;
+
+// -----------------------------------------------------------------------------
+// Voxel collision data and queries
+// -----------------------------------------------------------------------------
+
+const SOLID_LEAF_MARKER = 0xff000000 >>> 0;
+const PENETRATION_EPSILON = 1e-4;
+const MAX_RESOLVE_ITERATIONS = 4;
+
+/**
+ * Sparse voxel collision field. The walk controller only needs point occupancy, raycast, and capsule push-out.
+ */
+export class VoxelCollision {
+    private gridMinX: number;
+    private gridMinY: number;
+    private gridMinZ: number;
+    private voxelCountX: number;
+    private voxelCountY: number;
+    private voxelCountZ: number;
+    private voxelSize: number;
+    private leafSize: number;
+    private treeDepth: number;
+    private nodes: Uint32Array;
+    private leafData: Uint32Array;
+    private scratchPush: { x: number; y: number; z: number } = { x: 0, y: 0, z: 0 };
+    private contactNormals: { x: number; y: number; z: number }[] = [
+        { x: 0, y: 0, z: 0 },
+        { x: 0, y: 0, z: 0 },
+        { x: 0, y: 0, z: 0 },
+    ];
+
+    constructor(
+        metadata: {
+            gridBounds: { min: number[]; max: number[] };
+            voxelResolution: number;
+            leafSize: number;
+            treeDepth: number;
+        },
+        nodes: Uint32Array,
+        leafData: Uint32Array,
+    ) {
+        this.gridMinX = metadata.gridBounds.min[0];
+        this.gridMinY = metadata.gridBounds.min[1];
+        this.gridMinZ = metadata.gridBounds.min[2];
+        const voxelSize = metadata.voxelResolution;
+        this.voxelCountX = Math.round((metadata.gridBounds.max[0] - metadata.gridBounds.min[0]) / voxelSize);
+        this.voxelCountY = Math.round((metadata.gridBounds.max[1] - metadata.gridBounds.min[1]) / voxelSize);
+        this.voxelCountZ = Math.round((metadata.gridBounds.max[2] - metadata.gridBounds.min[2]) / voxelSize);
+        this.voxelSize = voxelSize;
+        this.leafSize = metadata.leafSize;
+        this.treeDepth = metadata.treeDepth;
+        this.nodes = nodes;
+        this.leafData = leafData;
+    }
+
+    /** Fast point occupancy lookup. */
+    isVoxelSolid(ix: number, iy: number, iz: number): boolean {
+        if (
+            this.nodes.length === 0 ||
+            ix < 0 ||
+            iy < 0 ||
+            iz < 0 ||
+            ix >= this.voxelCountX ||
+            iy >= this.voxelCountY ||
+            iz >= this.voxelCountZ
+        ) {
+            return false;
+        }
+        const blockX = Math.floor(ix / this.leafSize);
+        const blockY = Math.floor(iy / this.leafSize);
+        const blockZ = Math.floor(iz / this.leafSize);
+        let nodeIndex = 0;
+        for (let level = this.treeDepth - 1; level >= 0; level--) {
+            const node = this.nodes[nodeIndex] >>> 0;
+            if (node === SOLID_LEAF_MARKER) {
+                return true;
+            }
+            const childMask = (node >>> 24) & 0xff;
+            if (childMask === 0) {
+                return this.checkLeafByIndex(node, ix, iy, iz);
+            }
+            const bitX = (blockX >>> level) & 1;
+            const bitY = (blockY >>> level) & 1;
+            const bitZ = (blockZ >>> level) & 1;
+            const octant = (bitZ << 2) | (bitY << 1) | bitX;
+            if ((childMask & (1 << octant)) === 0) {
+                return false;
+            }
+            const baseOffset = node & 0x00ffffff;
+            const prefix = (1 << octant) - 1;
+            nodeIndex = baseOffset + popcount(childMask & prefix);
+        }
+        const node = this.nodes[nodeIndex] >>> 0;
+        if (node === SOLID_LEAF_MARKER) {
+            return true;
+        }
+        return this.checkLeafByIndex(node, ix, iy, iz);
+    }
+
+    /** Raycast through voxels for ground snaps and camera blocking checks. */
+    queryRay(
+        ox: number,
+        oy: number,
+        oz: number,
+        dx: number,
+        dy: number,
+        dz: number,
+        maxDist: number,
+    ): { x: number; y: number; z: number } | null {
+        if (this.nodes.length === 0) {
+            return null;
+        }
+        const voxelSize = this.voxelSize;
+        const gMinX = this.gridMinX;
+        const gMinY = this.gridMinY;
+        const gMinZ = this.gridMinZ;
+        const gMaxX = gMinX + this.voxelCountX * voxelSize;
+        const gMaxY = gMinY + this.voxelCountY * voxelSize;
+        const gMaxZ = gMinZ + this.voxelCountZ * voxelSize;
+        const EPS = 1e-12;
+
+        let tNear = 0;
+        let tFar = maxDist;
+        const slab = (o: number, d: number, min: number, max: number) => {
+            if (Math.abs(d) <= EPS) {
+                return o >= min && o < max;
+            }
+            let t1 = (min - o) / d;
+            let t2 = (max - o) / d;
+            if (t1 > t2) {
+                const tmp = t1;
+                t1 = t2;
+                t2 = tmp;
+            }
+            if (t1 > tNear) {
+                tNear = t1;
+            }
+            tFar = Math.min(tFar, t2);
+            return tNear <= tFar;
+        };
+        if (!slab(ox, dx, gMinX, gMaxX) || !slab(oy, dy, gMinY, gMaxY) || !slab(oz, dz, gMinZ, gMaxZ)) {
+            return null;
+        }
+        const entryX = ox + dx * tNear;
+        const entryY = oy + dy * tNear;
+        const entryZ = oz + dz * tNear;
+        let ix = Math.max(0, Math.min(Math.floor((entryX - gMinX) / voxelSize), this.voxelCountX - 1));
+        let iy = Math.max(0, Math.min(Math.floor((entryY - gMinY) / voxelSize), this.voxelCountY - 1));
+        let iz = Math.max(0, Math.min(Math.floor((entryZ - gMinZ) / voxelSize), this.voxelCountZ - 1));
+
+        const stepX = dx > 0 ? 1 : dx < 0 ? -1 : 0;
+        const stepY = dy > 0 ? 1 : dy < 0 ? -1 : 0;
+        const stepZ = dz > 0 ? 1 : dz < 0 ? -1 : 0;
+        const invDx = Math.abs(dx) > EPS ? 1 / dx : 0;
+        const invDy = Math.abs(dy) > EPS ? 1 / dy : 0;
+        const invDz = Math.abs(dz) > EPS ? 1 / dz : 0;
+        let tMaxX = Math.abs(dx) > EPS ? (gMinX + (ix + (dx > 0 ? 1 : 0)) * voxelSize - ox) * invDx : Infinity;
+        let tMaxY = Math.abs(dy) > EPS ? (gMinY + (iy + (dy > 0 ? 1 : 0)) * voxelSize - oy) * invDy : Infinity;
+        let tMaxZ = Math.abs(dz) > EPS ? (gMinZ + (iz + (dz > 0 ? 1 : 0)) * voxelSize - oz) * invDz : Infinity;
+        const tDeltaX = Math.abs(dx) > EPS ? voxelSize * Math.abs(invDx) : Infinity;
+        const tDeltaY = Math.abs(dy) > EPS ? voxelSize * Math.abs(invDy) : Infinity;
+        const tDeltaZ = Math.abs(dz) > EPS ? voxelSize * Math.abs(invDz) : Infinity;
+        let currentT = tNear;
+
+        const maxSteps = this.voxelCountX + this.voxelCountY + this.voxelCountZ;
+        for (let i = 0; i < maxSteps; i++) {
+            if (this.isVoxelSolid(ix, iy, iz)) {
+                return { x: ox + dx * currentT, y: oy + dy * currentT, z: oz + dz * currentT };
+            }
+            if (tMaxX < tMaxY) {
+                if (tMaxX < tMaxZ) {
+                    currentT = tMaxX;
+                    ix += stepX;
+                    tMaxX += tDeltaX;
+                } else {
+                    currentT = tMaxZ;
+                    iz += stepZ;
+                    tMaxZ += tDeltaZ;
+                }
+            } else if (tMaxY < tMaxZ) {
+                currentT = tMaxY;
+                iy += stepY;
+                tMaxY += tDeltaY;
+            } else {
+                currentT = tMaxZ;
+                iz += stepZ;
+                tMaxZ += tDeltaZ;
+            }
+            if (
+                ix < 0 ||
+                iy < 0 ||
+                iz < 0 ||
+                ix >= this.voxelCountX ||
+                iy >= this.voxelCountY ||
+                iz >= this.voxelCountZ ||
+                currentT > maxDist
+            ) {
+                return null;
+            }
+        }
+        return null;
+    }
+
+    /** Resolve a vertical capsule out of solid voxels. */
+    queryCapsule(
+        cx: number,
+        cy: number,
+        cz: number,
+        halfHeight: number,
+        radius: number,
+        out: { x: number; y: number; z: number },
+    ): boolean {
+        return this.resolveIterative(
+            cx,
+            cy,
+            cz,
+            (rx, ry, rz, push) => this.resolveDeepestPenetrationCapsule(rx, ry, rz, halfHeight, radius, push),
+            out,
+        );
+    }
+
+    /** Read one packed leaf bit. */
+    private checkLeafByIndex(node: number, ix: number, iy: number, iz: number) {
+        const leafDataIndex = node & 0x00ffffff;
+        const vx = ix & 3;
+        const vy = iy & 3;
+        const vz = iz & 3;
+        const bitIndex = vz * 16 + vy * 4 + vx;
+        if (bitIndex < 32) {
+            const lo = this.leafData[leafDataIndex * 2] >>> 0;
+            return ((lo >>> bitIndex) & 1) === 1;
+        }
+        const hi = this.leafData[leafDataIndex * 2 + 1] >>> 0;
+        return ((hi >>> (bitIndex - 32)) & 1) === 1;
+    }
+
+    /** Find the strongest push needed to move a capsule out of nearby solid voxels. */
+    private resolveDeepestPenetrationCapsule(
+        cx: number,
+        cy: number,
+        cz: number,
+        halfHeight: number,
+        radius: number,
+        out: { x: number; y: number; z: number },
+    ): boolean {
+        const voxelSize = this.voxelSize;
+        const radiusSq = radius * radius;
+        const segBottomY = cy - halfHeight;
+        const segTopY = cy + halfHeight;
+        const ixMin = Math.floor((cx - radius - this.gridMinX) / voxelSize);
+        const iyMin = Math.floor((segBottomY - radius - this.gridMinY) / voxelSize);
+        const izMin = Math.floor((cz - radius - this.gridMinZ) / voxelSize);
+        const ixMax = Math.floor((cx + radius - this.gridMinX) / voxelSize);
+        const iyMax = Math.floor((segTopY + radius - this.gridMinY) / voxelSize);
+        const izMax = Math.floor((cz + radius - this.gridMinZ) / voxelSize);
+        let bestPushX = 0;
+        let bestPushY = 0;
+        let bestPushZ = 0;
+        let bestPen = PENETRATION_EPSILON;
+        let found = false;
+
+        for (let iz = izMin; iz <= izMax; iz++) {
+            for (let iy = iyMin; iy <= iyMax; iy++) {
+                for (let ix = ixMin; ix <= ixMax; ix++) {
+                    if (!this.isVoxelSolid(ix, iy, iz)) {
+                        continue;
+                    }
+                    const vMinX = this.gridMinX + ix * voxelSize;
+                    const vMinY = this.gridMinY + iy * voxelSize;
+                    const vMinZ = this.gridMinZ + iz * voxelSize;
+                    const vMaxX = vMinX + voxelSize;
+                    const vMaxY = vMinY + voxelSize;
+                    const vMaxZ = vMinZ + voxelSize;
+                    let segY: number;
+                    if (segTopY < vMinY) {
+                        segY = segTopY;
+                    } else if (segBottomY > vMaxY) {
+                        segY = segBottomY;
+                    } else {
+                        segY = Math.max(segBottomY, Math.min(segTopY, (vMinY + vMaxY) * 0.5));
+                    }
+                    const nearX = Math.max(vMinX, Math.min(cx, vMaxX));
+                    const nearY = Math.max(vMinY, Math.min(segY, vMaxY));
+                    const nearZ = Math.max(vMinZ, Math.min(cz, vMaxZ));
+                    const dx = cx - nearX;
+                    const dy = segY - nearY;
+                    const dz = cz - nearZ;
+                    const distSq = dx * dx + dy * dy + dz * dz;
+                    if (distSq >= radiusSq) {
+                        continue;
+                    }
+                    let px = 0;
+                    let py = 0;
+                    let pz = 0;
+                    let penetration: number;
+                    if (distSq > 1e-12) {
+                        const dist = Math.sqrt(distSq);
+                        penetration = radius - dist;
+                        const invDist = 1 / dist;
+                        px = dx * invDist * penetration;
+                        py = dy * invDist * penetration;
+                        pz = dz * invDist * penetration;
+                    } else {
+                        const escapeX = Math.min(cx - vMinX, vMaxX - cx) + radius;
+                        const escapeY = Math.min(segY - vMinY, vMaxY - segY) + radius;
+                        const escapeZ = Math.min(cz - vMinZ, vMaxZ - cz) + radius;
+                        if (escapeX <= escapeY && escapeX <= escapeZ) {
+                            px = cx - vMinX < vMaxX - cx ? -escapeX : escapeX;
+                            penetration = escapeX;
+                        } else if (escapeY <= escapeZ) {
+                            py = segY - vMinY < vMaxY - segY ? -escapeY : escapeY;
+                            penetration = escapeY;
+                        } else {
+                            pz = cz - vMinZ < vMaxZ - cz ? -escapeZ : escapeZ;
+                            penetration = escapeZ;
+                        }
+                    }
+                    if (penetration > bestPen) {
+                        bestPen = penetration;
+                        bestPushX = px;
+                        bestPushY = py;
+                        bestPushZ = pz;
+                        found = true;
+                    }
+                }
+            }
+        }
+        if (found) {
+            out.x = bestPushX;
+            out.y = bestPushY;
+            out.z = bestPushZ;
+        }
+        return found;
+    }
+
+    /** Apply a few push-out passes so corner collisions do not trap the capsule. */
+    private resolveIterative(
+        cx: number,
+        cy: number,
+        cz: number,
+        findPenetration: (x: number, y: number, z: number, out: { x: number; y: number; z: number }) => boolean,
+        out: { x: number; y: number; z: number },
+    ): boolean {
+        let resolvedX = cx;
+        let resolvedY = cy;
+        let resolvedZ = cz;
+        let totalPushX = 0;
+        let totalPushY = 0;
+        let totalPushZ = 0;
+        let hadCollision = false;
+        let numNormals = 0;
+
+        for (let iter = 0; iter < MAX_RESOLVE_ITERATIONS; iter++) {
+            if (!findPenetration(resolvedX, resolvedY, resolvedZ, this.scratchPush)) {
+                break;
+            }
+            hadCollision = true;
+            let px = this.scratchPush.x;
+            let py = this.scratchPush.y;
+            let pz = this.scratchPush.z;
+
+            for (let i = 0; i < numNormals; i++) {
+                const n = this.contactNormals[i];
+                const dot = px * n.x + py * n.y + pz * n.z;
+                if (dot < 0) {
+                    px -= dot * n.x;
+                    py -= dot * n.y;
+                    pz -= dot * n.z;
+                }
+            }
+
+            const len = Math.sqrt(
+                this.scratchPush.x * this.scratchPush.x +
+                    this.scratchPush.y * this.scratchPush.y +
+                    this.scratchPush.z * this.scratchPush.z,
+            );
+            if (len > PENETRATION_EPSILON && numNormals < 3) {
+                const invLen = 1 / len;
+                const n = this.contactNormals[numNormals];
+                n.x = this.scratchPush.x * invLen;
+                n.y = this.scratchPush.y * invLen;
+                n.z = this.scratchPush.z * invLen;
+                numNormals++;
+            }
+
+            resolvedX += px;
+            resolvedY += py;
+            resolvedZ += pz;
+            totalPushX += px;
+            totalPushY += py;
+            totalPushZ += pz;
+        }
+
+        const totalPushSq = totalPushX * totalPushX + totalPushY * totalPushY + totalPushZ * totalPushZ;
+        const hasSignificantPush = hadCollision && totalPushSq > PENETRATION_EPSILON * PENETRATION_EPSILON;
+        if (hasSignificantPush) {
+            out.x = totalPushX;
+            out.y = totalPushY;
+            out.z = totalPushZ;
+        }
+        return hasSignificantPush;
+    }
+}
+
+const popcount = (n: number) => {
+    n >>>= 0;
+    n -= (n >>> 1) & 0x55555555;
+    n = (n & 0x33333333) + ((n >>> 2) & 0x33333333);
+    return (((n + (n >>> 4)) & 0x0f0f0f0f) * 0x01010101) >>> 24;
+};
+
+// -----------------------------------------------------------------------------
+// Capsule collision and walk controller
+// -----------------------------------------------------------------------------
+
+const WALK_SIMULATION_STEP_SECONDS = 1 / 60;
+const MAX_SUBSTEPS = 10;
+const WALK_CAPSULE_HEIGHT = 1.5;
+const WALK_CAPSULE_RADIUS = 0.12;
+const WALK_HOVER_HEIGHT = 0.2;
+const WALK_EYE_HEIGHT = WALK_CAPSULE_HEIGHT - 0.1 - WALK_HOVER_HEIGHT;
+const WALK_GRAVITY = 9.8;
+const THIRD_PERSON_MODEL_SCALE = 0.8;
+
+export interface ViewerWalkCharacterState {
+    position: InstanceType;
+    yaw: number;
+    speed: number;
+    walkSpeed: number;
+    verticalVelocity: number;
+    grounded: boolean;
+}
+
+/** Walk controller: voxel collision in, camera and character state out. */
+export class ViewerWalkMode {
+    private collision: {
+        queryRay: (...args: number[]) => { x: number; y: number; z: number } | null;
+        queryCapsule: (
+            cx: number,
+            cy: number,
+            cz: number,
+            halfHeight: number,
+            radius: number,
+            out: { x: number; y: number; z: number },
+        ) => boolean;
+    } | null = null;
+
+    private enabled = false;
+    private keys: Record = {};
+    private mouseLookDragging = false;
+
+    private yaw = 0;
+    private pitch = 0;
+    private position = new Vector3();
+    private velocity = new Vector3();
+    private grounded = false;
+    private groundYFiltered: number | null = null;
+    private horizontalSpeed = 0;
+
+    private cameraPosition = new Vector3();
+    private cameraRotation = new Euler(0, 0, 0, 'YXZ');
+    private cameraScale = new Vector3(1, 1, 1);
+    private characterPosition = new Vector3();
+    private cameraTarget = new Vector3();
+    private cameraIdealPosition = new Vector3();
+    private cameraCollisionPosition = new Vector3();
+    private cameraRay = new Vector3();
+
+    private accumulator = 0;
+    moveSpeed = 7;
+
+    thirdPersonEnabled = false;
+    private thirdPersonDistance = 3.2;
+    private thirdPersonDistanceTarget = 3.2;
+    private thirdPersonDistanceMin = 0.8;
+    private thirdPersonDistanceMax = 4;
+    private thirdPersonBounceOffset = 0;
+    private thirdPersonBounceVelocity = 0;
+    private thirdPersonTargetHeight = 1.25;
+    private characterYaw = 0;
+    private thirdPersonCollisionDistance = -1;
+    private thirdPersonOcclusionReleaseTimer = 0;
+    thirdPersonCameraPreset: 'indoor' | 'outdoor' = 'indoor';
+
+    constructor(private container: HTMLElement) {
+        document.addEventListener('keydown', this.onKeyDown);
+        document.addEventListener('keyup', this.onKeyUp);
+        document.addEventListener('mousedown', this.onMouseDown);
+        document.addEventListener('mouseup', this.onMouseUp);
+        document.addEventListener('mousemove', this.onMouseMove);
+        document.addEventListener('wheel', this.onWheel, { passive: false });
+        // Prevent "stuck key" drift when keyup is lost (UI panel focus, pointer-lock, tab blur).
+        document.addEventListener('pointerdown', this.onDocumentPointerDown, true);
+        document.addEventListener('focusin', this.onDocumentFocusIn, true);
+        window.addEventListener('blur', this.onWindowBlur);
+        document.addEventListener('visibilitychange', this.onVisibilityChange);
+    }
+
+    /** Attach voxel collision data used by ground checks and capsule push-out. */
+    loadVoxelCollision(
+        metadata: {
+            gridBounds: { min: number[]; max: number[] };
+            voxelResolution: number;
+            leafSize: number;
+            treeDepth: number;
+        },
+        nodes: Uint32Array,
+        leafData: Uint32Array,
+    ) {
+        this.collision = new VoxelCollision(metadata, nodes, leafData);
+    }
+
+    /** Place the walker at a known position and camera angle. */
+    startAtPose(position: InstanceType, yaw: number, pitch: number) {
+        this.position.copy(position);
+        this.velocity.set(0, 0, 0);
+        this.yaw = yaw;
+        this.pitch = Math.max(-Math.PI / 2 + 0.01, Math.min(Math.PI / 2 - 0.01, pitch));
+        this.activateAtCurrentPose();
+    }
+
+    /** Reset runtime state, resolve spawn collision, and snap to the ground if one is below. */
+    private activateAtCurrentPose() {
+        this.enabled = true;
+        this.keys = {};
+        this.accumulator = 0;
+        this.grounded = false;
+        this.horizontalSpeed = 0;
+        this.characterYaw = this.yaw;
+        this.thirdPersonDistanceTarget = this.thirdPersonDistance;
+        this.thirdPersonCollisionDistance = -1;
+        this.thirdPersonOcclusionReleaseTimer = 0;
+        this.groundYFiltered = null;
+        this.resolveSpawnCollision();
+        const gy = this.probeGround(this.position);
+        if (gy !== null) {
+            this.grounded = true;
+            this.velocity.y = 0;
+            this.position.y = gy + WALK_HOVER_HEIGHT + WALK_EYE_HEIGHT;
+            this.groundYFiltered = gy;
+        }
+        if (document.activeElement instanceof HTMLElement) {
+            document.activeElement.blur();
+        }
+    }
+
+    /** Stop walk mode and clear held input. */
+    disable() {
+        this.enabled = false;
+        this.clearInputState();
+    }
+
+    /** Set third-person orbit distance and look height. */
+    setThirdPersonCamera(distance: number, targetHeight: number, minDistance = 0.8, maxDistance = 4) {
+        this.thirdPersonDistanceMin = Math.max(0.2, Math.min(4, minDistance));
+        const maxCap = 1_000_000;
+        this.thirdPersonDistanceMax = Math.max(this.thirdPersonDistanceMin + 0.1, Math.min(maxCap, maxDistance));
+        const clampedDistance = Math.max(this.thirdPersonDistanceMin, Math.min(this.thirdPersonDistanceMax, distance));
+        this.thirdPersonDistance = clampedDistance;
+        this.thirdPersonDistanceTarget = clampedDistance;
+        this.thirdPersonTargetHeight = Math.max(0.4, Math.min(maxCap, targetHeight));
+    }
+    /** Called once per frame; runs fixed physics steps and then updates the camera state. */
+    update(dt: number) {
+        if (!this.enabled) {
+            return;
+        }
+        const dtClamped = Math.min(Math.max(0, dt), 1 / 20);
+        this.accumulator = Math.min(this.accumulator + dtClamped, MAX_SUBSTEPS * WALK_SIMULATION_STEP_SECONDS);
+        while (this.accumulator >= WALK_SIMULATION_STEP_SECONDS) {
+            this.step(WALK_SIMULATION_STEP_SECONDS);
+            this.accumulator -= WALK_SIMULATION_STEP_SECONDS;
+        }
+        this.updateCharacterPosition();
+        if (this.thirdPersonEnabled) {
+            this.updateThirdPersonCamera(dtClamped);
+        } else {
+            this.cameraPosition.set(this.position.x, this.position.y, this.position.z);
+            this.cameraRotation.set(this.pitch, this.yaw, 0, 'YXZ');
+        }
+    }
+
+    /** Current camera transform for the render scene. */
+    getCameraState() {
+        return { position: this.cameraPosition, rotation: this.cameraRotation, scale: this.cameraScale };
+    }
+
+    /** Current avatar state for the third-person model. */
+    getCharacterState(): ViewerWalkCharacterState {
+        return {
+            position: this.characterPosition,
+            yaw: this.characterYaw,
+            speed: this.horizontalSpeed,
+            walkSpeed: this.moveSpeed,
+            verticalVelocity: this.velocity.y,
+            grounded: this.grounded,
+        };
+    }
+
+    /** One fixed physics step: ground probe, gravity, horizontal movement, and voxel push-out. */
+    private step(dt: number) {
+        const rawGroundY = this.probeGround(this.position);
+        const hasGround = rawGroundY !== null;
+
+        if (hasGround && rawGroundY !== null) {
+            if (this.groundYFiltered === null) {
+                this.groundYFiltered = rawGroundY;
+            } else {
+                const a = 1 - Math.exp(-20 * dt);
+                this.groundYFiltered += (rawGroundY - this.groundYFiltered) * a;
+            }
+        } else if (!hasGround) {
+            this.groundYFiltered = null;
+        }
+
+        const groundYStick = hasGround && this.groundYFiltered !== null ? this.groundYFiltered : rawGroundY;
+
+        if (hasGround) {
+            const groundYValue = groundYStick as number;
+            const targetY = groundYValue + WALK_HOVER_HEIGHT + WALK_EYE_HEIGHT;
+            const displacement = this.position.y - targetY;
+            if (displacement > 0.1) {
+                this.velocity.y -= WALK_GRAVITY * dt;
+                const nextY = this.position.y + this.velocity.y * dt;
+                if (nextY <= targetY) {
+                    this.position.y = targetY;
+                    this.velocity.y = 0;
+                }
+                this.grounded = false;
+            } else {
+                const spring = -800 * displacement - 57 * this.velocity.y;
+                this.velocity.y += spring * dt;
+                this.grounded = true;
+            }
+        } else {
+            this.velocity.y -= WALK_GRAVITY * dt;
+            this.grounded = false;
+        }
+
+        const forwardInput = (this.keys.KeyW ? 1 : 0) - (this.keys.KeyS ? 1 : 0);
+        const strafeInput = (this.keys.KeyD ? 1 : 0) - (this.keys.KeyA ? 1 : 0);
+        const move = new Vector3();
+        const hasMoveInput = forwardInput !== 0 || strafeInput !== 0;
+        const forward = new Vector3(-Math.sin(this.yaw), 0, -Math.cos(this.yaw));
+        const right = new Vector3().crossVectors(forward, new Vector3(0, 1, 0));
+        if (forwardInput !== 0) {
+            move.addScaledVector(forward, forwardInput);
+        }
+        if (strafeInput !== 0) {
+            move.addScaledVector(right, strafeInput);
+        }
+        if (hasMoveInput) {
+            const maxSpeed = this.moveSpeed;
+            move.normalize().multiplyScalar(maxSpeed);
+            this.characterYaw = Math.atan2(-move.x, -move.z);
+        } else {
+            move.set(0, 0, 0);
+        }
+        const accel = this.grounded ? 24 : 6;
+        const blend = Math.min(1, accel * dt);
+        this.velocity.x = this.velocity.x + (move.x - this.velocity.x) * blend;
+        this.velocity.z = this.velocity.z + (move.z - this.velocity.z) * blend;
+        const dampFactor = this.grounded ? 0.99 : 0.998;
+        const alpha = this.damp(dampFactor, dt);
+        this.velocity.x = this.lerp(this.velocity.x, 0, alpha * 0.35);
+        this.velocity.z = this.lerp(this.velocity.z, 0, alpha * 0.35);
+        this.horizontalSpeed = Math.hypot(this.velocity.x, this.velocity.z);
+
+        this.position.addScaledVector(this.velocity, dt);
+        this.resolveCollision();
+    }
+
+    /** Build a third-person camera from avatar position, pitch, zoom, and collision. */
+    private updateThirdPersonCamera(dt: number) {
+        this.updateThirdPersonDistance(dt);
+        const cameraScale = THIRD_PERSON_MODEL_SCALE;
+        const meshWorldH = CHARACTER_HEIGHT_METERS * cameraScale;
+        const { pivotY, baseElevation } = this.computeThirdPersonCameraTarget(meshWorldH, cameraScale);
+
+        this.cameraTarget.set(this.position.x, pivotY, this.position.z);
+
+        const elevation = Math.max((-80 * Math.PI) / 180, Math.min((70 * Math.PI) / 180, baseElevation + this.pitch));
+        const activeDistance = Math.max(0.1, (this.thirdPersonDistance + this.thirdPersonBounceOffset) * cameraScale);
+        const horizontalDistance = Math.cos(elevation) * activeDistance;
+        const verticalOffset = Math.sin(elevation) * activeDistance;
+        this.cameraIdealPosition.set(
+            this.cameraTarget.x + Math.sin(this.yaw) * horizontalDistance,
+            this.cameraTarget.y + verticalOffset,
+            this.cameraTarget.z + Math.cos(this.yaw) * horizontalDistance,
+        );
+        this.resolveCameraCollision(dt, activeDistance);
+        this.cameraCollisionPosition.y = Math.max(this.cameraCollisionPosition.y, this.characterPosition.y + 0.12);
+
+        this.cameraPosition.copy(this.cameraCollisionPosition);
+        this.cameraRotation.set(-elevation, this.yaw, 0, 'YXZ');
+    }
+
+    /** Pick the vertical target point for indoor and outdoor third-person views. */
+    private computeThirdPersonCameraTarget(meshWorldHeight: number, cameraScale: number) {
+        if (this.thirdPersonCameraPreset === 'outdoor') {
+            return {
+                pivotY: this.characterPosition.y + meshWorldHeight * 0.92,
+                baseElevation: 0.4,
+            };
+        }
+
+        const pivotY =
+            this.position.y -
+            WALK_EYE_HEIGHT +
+            WALK_HOVER_HEIGHT +
+            this.thirdPersonTargetHeight * cameraScale -
+            0.22 * meshWorldHeight;
+
+        return {
+            pivotY: Math.max(this.characterPosition.y + meshWorldHeight * 0.06, pivotY),
+            baseElevation: 0.35,
+        };
+    }
+
+    /** Smooth zoom changes and the small zoom bounce. */
+    private updateThirdPersonDistance(dt: number) {
+        const alpha = Math.min(1, Math.max(0, 12 * dt));
+        this.thirdPersonDistance = this.lerp(this.thirdPersonDistance, this.thirdPersonDistanceTarget, alpha);
+        const spring = -this.thirdPersonBounceOffset * 70;
+        const damping = -this.thirdPersonBounceVelocity * 12;
+        this.thirdPersonBounceVelocity += (spring + damping) * dt;
+        this.thirdPersonBounceVelocity = Math.max(-6, Math.min(6, this.thirdPersonBounceVelocity));
+        this.thirdPersonBounceOffset += this.thirdPersonBounceVelocity * dt;
+        this.thirdPersonBounceOffset = Math.max(-0.5, Math.min(0.5, this.thirdPersonBounceOffset));
+        if (Math.abs(this.thirdPersonBounceOffset) < 5e-4 && Math.abs(this.thirdPersonBounceVelocity) < 0.005) {
+            this.thirdPersonBounceOffset = 0;
+            this.thirdPersonBounceVelocity = 0;
+        }
+    }
+
+    /** Pull the third-person camera forward when voxels block the view. */
+    private resolveCameraCollision(dt: number, maxDistance: number) {
+        this.cameraRay.subVectors(this.cameraIdealPosition, this.cameraTarget);
+        const distance = this.cameraRay.length();
+        if (distance < 1e-4) {
+            this.cameraCollisionPosition.copy(this.cameraIdealPosition);
+            this.thirdPersonCollisionDistance = distance;
+            return;
+        }
+        this.cameraRay.multiplyScalar(1 / distance);
+        let blockedDistance = maxDistance;
+        let blocked = false;
+        if (this.collision) {
+            const hit = this.collision.queryRay(
+                this.cameraTarget.x,
+                this.cameraTarget.y,
+                this.cameraTarget.z,
+                this.cameraRay.x,
+                this.cameraRay.y,
+                this.cameraRay.z,
+                distance,
+            );
+            if (hit) {
+                blockedDistance = Math.max(0.1, this.cameraTarget.distanceTo(new Vector3(hit.x, hit.y, hit.z)) - 0.18);
+                blocked = true;
+                this.thirdPersonOcclusionReleaseTimer = 0.1;
+            }
+        }
+        if (!blocked && this.thirdPersonOcclusionReleaseTimer > 0) {
+            this.thirdPersonOcclusionReleaseTimer = Math.max(0, this.thirdPersonOcclusionReleaseTimer - dt);
+            blocked = this.thirdPersonOcclusionReleaseTimer > 0;
+        }
+        const desiredDistance = blocked ? blockedDistance : maxDistance;
+        if (this.thirdPersonCollisionDistance < 0) {
+            this.thirdPersonCollisionDistance = desiredDistance;
+        } else {
+            const rate = desiredDistance < this.thirdPersonCollisionDistance ? 14 : 7;
+            const alpha = 1 - Math.exp(-Math.max(0, dt) * rate);
+            this.thirdPersonCollisionDistance = this.lerp(this.thirdPersonCollisionDistance, desiredDistance, alpha);
+        }
+        this.thirdPersonCollisionDistance = Math.max(0.1, Math.min(maxDistance, this.thirdPersonCollisionDistance));
+        this.cameraCollisionPosition
+            .copy(this.cameraTarget)
+            .addScaledVector(this.cameraRay, this.thirdPersonCollisionDistance);
+    }
+
+    /** Place the avatar feet on the current ground height. */
+    private updateCharacterPosition() {
+        const groundY =
+            this.grounded && this.groundYFiltered !== null
+                ? this.groundYFiltered
+                : this.grounded
+                  ? this.probeGround(this.position)
+                  : null;
+        const footY = groundY !== null ? groundY : this.position.y - WALK_HOVER_HEIGHT - WALK_EYE_HEIGHT;
+        this.characterPosition.set(this.position.x, footY, this.position.z);
+    }
+
+    /** Raycast below the capsule and return a stable ground height. */
+    private probeGround(pos: InstanceType): number | null {
+        if (!this.collision) {
+            return null;
+        }
+        const oy = pos.y - WALK_EYE_HEIGHT;
+        const r = WALK_CAPSULE_RADIUS;
+        const samples: Array<[number, number]> = [
+            [0, 0],
+            [-r, 0],
+            [r, 0],
+            [0, r],
+            [0, -r],
+        ];
+        const ys: number[] = [];
+        for (let i = 0; i < samples.length; i++) {
+            const [ox, oz] = samples[i];
+            const hit = this.collision.queryRay(pos.x + ox, oy, pos.z + oz, 0, -1, 0, 1.0);
+            if (!hit) {
+                continue;
+            }
+            ys.push(hit.y);
+        }
+        if (ys.length === 0) {
+            return null;
+        }
+        ys.sort((a, b) => a - b);
+        const mid = Math.floor(ys.length / 2);
+        return ys.length % 2 === 1 ? ys[mid]! : (ys[mid - 1]! + ys[mid]!) * 0.5;
+    }
+
+    /** Push the moving capsule out of solid voxels. */
+    private resolveCollision() {
+        if (!this.collision) {
+            return;
+        }
+        const centerY = this.position.y - WALK_EYE_HEIGHT + WALK_CAPSULE_HEIGHT * 0.5;
+        const half = WALK_CAPSULE_HEIGHT * 0.5 - WALK_CAPSULE_RADIUS;
+        const push = { x: 0, y: 0, z: 0 };
+        if (this.collision.queryCapsule(this.position.x, centerY, this.position.z, half, WALK_CAPSULE_RADIUS, push)) {
+            this.position.x += push.x;
+            this.position.y += push.y;
+            this.position.z += push.z;
+            if (push.y < -PENETRATION_EPSILON && this.velocity.y > 0) {
+                this.velocity.y = 0;
+            }
+            if (!this.grounded && push.y > PENETRATION_EPSILON && this.velocity.y < 0) {
+                this.velocity.y = 0;
+                this.grounded = true;
+            }
+        }
+    }
+
+    /** Lift the start pose until the capsule is outside solid voxels. */
+    private resolveSpawnCollision() {
+        if (!this.collision) {
+            return;
+        }
+        const half = WALK_CAPSULE_HEIGHT * 0.5 - WALK_CAPSULE_RADIUS;
+        const minStep = WALK_CAPSULE_RADIUS;
+        const push = { x: 0, y: 0, z: 0 };
+        for (let i = 0; i < 100; i++) {
+            const center = this.position.y - WALK_EYE_HEIGHT + WALK_CAPSULE_HEIGHT * 0.5;
+            if (
+                !this.collision.queryCapsule(this.position.x, center, this.position.z, half, WALK_CAPSULE_RADIUS, push)
+            ) {
+                break;
+            }
+            this.position.y += Math.max(push.y, minStep);
+        }
+    }
+
+    private damp(damping: number, dt: number) {
+        return 1 - Math.pow(damping, dt * 1000);
+    }
+
+    private lerp(a: number, b: number, t: number) {
+        return a + (b - a) * t;
+    }
+
+    private onKeyDown = (e: KeyboardEvent) => {
+        if (!this.enabled) {
+            return;
+        }
+        this.keys[e.code] = true;
+        if (e.code === 'KeyW' || e.code === 'KeyA' || e.code === 'KeyS' || e.code === 'KeyD') {
+            e.preventDefault();
+        }
+    };
+
+    private onKeyUp = (e: KeyboardEvent) => {
+        if (!this.enabled) {
+            return;
+        }
+        this.keys[e.code] = false;
+    };
+
+    // Clear held keys when the user leaves the walk area or the page loses focus.
+    private onDocumentPointerDown = (e: PointerEvent) => {
+        this.clearInputWhenTargetLeavesContainer(e.target);
+    };
+
+    private onDocumentFocusIn = (e: FocusEvent) => {
+        this.clearInputWhenTargetLeavesContainer(e.target);
+    };
+
+    private clearInputWhenTargetLeavesContainer(target: EventTarget | null) {
+        if (!this.enabled) {
+            return;
+        }
+        if (target instanceof Node && !this.container.contains(target)) {
+            this.clearInputState();
+        }
+    }
+
+    private onWindowBlur = () => {
+        this.clearInputState();
+    };
+
+    private onVisibilityChange = () => {
+        if (document.hidden) {
+            this.clearInputState();
+        }
+    };
+
+    private clearInputState() {
+        this.keys = {};
+        this.mouseLookDragging = false;
+    }
+
+    private onMouseDown = (e: MouseEvent) => {
+        if (!this.enabled) {
+            return;
+        }
+        if (e.target instanceof Node && !this.container.contains(e.target)) {
+            return;
+        }
+        if (e.button === 0) {
+            this.mouseLookDragging = true;
+            e.preventDefault();
+        }
+    };
+
+    private onMouseUp = (e: MouseEvent) => {
+        if (e.button === 0) {
+            this.mouseLookDragging = false;
+        }
+    };
+
+    private onMouseMove = (e: MouseEvent) => {
+        if (!this.enabled) {
+            return;
+        }
+        if (!this.mouseLookDragging || (e.buttons & 1) === 0) {
+            this.mouseLookDragging = false;
+            return;
+        }
+        const sensitivity = 0.002;
+        this.yaw -= e.movementX * sensitivity;
+        this.pitch += (this.thirdPersonEnabled ? 1 : -1) * e.movementY * sensitivity;
+        this.pitch = Math.max(-Math.PI / 2 + 0.01, Math.min(Math.PI / 2 - 0.01, this.pitch));
+    };
+
+    private onWheel = (e: WheelEvent) => {
+        if (!this.enabled || !this.thirdPersonEnabled) {
+            return;
+        }
+        e.preventDefault();
+        let next = this.thirdPersonDistanceTarget + e.deltaY * 0.002;
+        if (next < this.thirdPersonDistanceMin) {
+            this.thirdPersonBounceVelocity += (next - this.thirdPersonDistanceMin) * 0.9;
+            next = this.thirdPersonDistanceMin;
+        } else if (next > this.thirdPersonDistanceMax) {
+            this.thirdPersonBounceVelocity += (next - this.thirdPersonDistanceMax) * 0.9;
+            next = this.thirdPersonDistanceMax;
+        }
+        this.thirdPersonBounceVelocity = Math.max(-6, Math.min(6, this.thirdPersonBounceVelocity));
+        this.thirdPersonDistanceTarget = next;
+    };
+}
+
+// -----------------------------------------------------------------------------
+// Demo assets and character presentation
+// -----------------------------------------------------------------------------
+
+/** Aholo OSS walk assets (`oss-res` -> `node uploader/index.mjs gs:aholo`); indoor `gs_file/room/`, outdoor `gs_file/juguo/`. */
+const AHOLO_OSS_GS_FILE_BASE = 'https://holo-cos.aholo3d.cn/aholo-opensource/gs_file';
+const WALK_INDOOR_URL_PREFIX = `${AHOLO_OSS_GS_FILE_BASE}/room/`;
+const WALK_OUTDOOR_URL_PREFIX = `${AHOLO_OSS_GS_FILE_BASE}/juguo/`;
+
+/** Third-person GLB assets; tune with `scripts/tune-character-glb-to-walk.mjs`. */
+const WALK_CHARACTER_MODEL_URL_MAN = `${AHOLO_OSS_GS_FILE_BASE}/misc/man-final.755ce8ea.glb`;
+const WALK_CHARACTER_MODEL_URL_ROBOT = `${AHOLO_OSS_GS_FILE_BASE}/misc/robot.0765006a.glb`;
+
+/** Normalized third-person GLB height. */
+const CHARACTER_HEIGHT_METERS = 1.75;
+
+const FADE_SECONDS = 0.18;
+/** Idle/walk speed thresholds. */
+const CHARACTER_LOCOMOTION_IDLE_ENTER_SPEED = 0.05;
+const CHARACTER_LOCOMOTION_WALK_ENTER_SPEED = 0.12;
+const CHARACTER_STAIR_FALL_VERTICAL_SPEED = -0.85;
+type CharacterActionName = 'Idle' | 'Walk' | 'Fall';
+
+interface ActionFade {
+    action: InstanceType;
+    from: number;
+    to: number;
+    elapsed: number;
+    duration: number;
+    deactivateOnComplete: boolean;
+}
+
+/** Third-person avatar rendered in the same scene as the splats. */
+export class WalkThirdPersonCharacter {
+    private readonly scene: Scene3D;
+    private readonly viewer: Viewer;
+    private readonly animationPlugin: InstanceType;
+
+    private readonly characterRoot = new Object3D();
+    private readonly lights = new Object3D();
+    private mixer: InstanceType | null = null;
+    private actions: Partial>> = {};
+    private activeAction: InstanceType | null = null;
+    private activeActionName: CharacterActionName | null = null;
+    private locomotionAnim: 'Idle' | 'Walk' = 'Idle';
+    private actionFades: ActionFade[] = [];
+
+    private enabled = false;
+    private loaded = false;
+    private loadError = false;
+    private loadPromise: Promise | undefined;
+    /** Guards async character loading after disposal. */
+    private readonly lifetime = new AbortController();
+
+    private smoothedYaw = 0;
+
+    private tmpPos = new Vector3();
+
+    constructor(
+        scene: Scene3D,
+        viewer: Viewer,
+        private readonly modelUrl: string,
+    ) {
+        this.scene = scene;
+        this.viewer = viewer;
+        this.animationPlugin = new AnimationPlugin();
+        this.animationPlugin.registerToViewer({ viewer } as any);
+
+        this.characterRoot.visible = false;
+        this.characterRoot.scale.setScalar(THIRD_PERSON_MODEL_SCALE);
+        this.lights.visible = false;
+
+        const ambient = new AmbientLight(0xffffff, 0.72);
+        const key = new DirectionalLight(0xffffff, 1.15);
+        key.position.set(0.4, 1.0, 0.35);
+        const fill = new DirectionalLight(0xffffff, 0.35);
+        fill.position.set(-0.7, 0.6, -0.4);
+        this.lights.add(ambient);
+        this.lights.add(key);
+        this.lights.add(fill);
+    }
+
+    /** Show the avatar and start loading it when needed. */
+    setEnabled(enabled: boolean) {
+        this.enabled = enabled;
+        this.characterRoot.visible = enabled && this.loaded && !this.loadError;
+        this.lights.visible = enabled && this.loaded && !this.loadError;
+        if (enabled) {
+            this.ensureLoaded();
+        }
+    }
+
+    /** Add avatar objects to the active scene. */
+    private attachToScene(): void {
+        if (this.lights.parent !== this.scene) {
+            this.scene.add(this.lights);
+        }
+        if (this.characterRoot.parent !== this.scene) {
+            this.scene.add(this.characterRoot);
+        }
+        this.scene.notifySceneChange();
+    }
+
+    /** Match the GLB position, yaw, and animation to walk state. */
+    update(state: ViewerWalkCharacterState, _dt: number) {
+        if (!this.enabled || !this.loaded || this.loadError) {
+            return;
+        }
+        const p = state.position;
+        this.tmpPos.set(p.x, p.y, p.z);
+        this.characterRoot.position.copy(this.tmpPos);
+        this.smoothCharacterYaw(state.yaw, _dt);
+        this.characterRoot.rotation.y = this.smoothedYaw + Math.PI;
+        this.characterRoot.updateMatrixWorld(true);
+
+        if (this.mixer) {
+            this.playAction(this.resolveActionName(state), state);
+            this.updateActionFades(_dt);
+        }
+    }
+
+    /** Start the GLB load once. */
+    private ensureLoaded() {
+        if (this.loaded || this.loadError || this.loadPromise) {
+            return;
+        }
+        this.loadPromise = this.loadCharacter();
+    }
+
+    /** Resolves when the GLB is ready; rejects on load failure or `signal` abort. */
+    waitUntilReady(signal: AbortSignal): Promise {
+        if (this.loaded) {
+            return Promise.resolve();
+        }
+        if (this.loadError) {
+            return Promise.reject(new Error('[walk] Third-person character failed to load.'));
+        }
+        this.ensureLoaded();
+        if (!this.loadPromise) {
+            return Promise.reject(new Error('[walk] Third-person character load did not start.'));
+        }
+        throwIfAborted(signal);
+        return new Promise((resolve, reject) => {
+            const onAbort = () => {
+                reject(new DOMException('Aborted', 'AbortError'));
+            };
+            signal.addEventListener('abort', onAbort, { once: true });
+            this.loadPromise!.then(
+                () => {
+                    signal.removeEventListener('abort', onAbort);
+                    if (this.lifetime.signal.aborted) {
+                        reject(new DOMException('Aborted', 'AbortError'));
+                        return;
+                    }
+                    if (this.loadError || !this.loaded) {
+                        reject(new Error('[walk] Third-person character failed to load.'));
+                        return;
+                    }
+                    resolve();
+                },
+                error => {
+                    signal.removeEventListener('abort', onAbort);
+                    reject(error);
+                },
+            );
+        });
+    }
+
+    /** Load the GLB, bind animation, fit its size, and attach it to the scene. */
+    private async loadCharacter() {
+        const { signal } = this.lifetime;
+        try {
+            const response = await fetch(this.modelUrl, { signal });
+            throwIfAborted(signal);
+            const buffer = await response.arrayBuffer();
+            throwIfAborted(signal);
+            const result = await loadGLTF(buffer, {
+                textureLoader: downloadTexture,
+            });
+            throwIfAborted(signal);
+
+            // GLTF loader typings differ; scene graph objects are runtime-compatible with our Scene3D.
+            const model = result.scene as any;
+            this.characterRoot.removeAllChildren();
+            this.mixer = new AnimationMixer(model);
+            this.animationPlugin.add(this.mixer);
+
+            const boundSkinnedMeshes = new WeakSet
Name	Purpose	Parameter	Type	Required (Default)	Description
Read	Reads multiple Gaussian files and merges them into one `SplatData` object.	inputs	string[]	Y	Input file paths.
		output	string	Y	Resource key to write.
		maxShDegree	number 0..=3	N(3)	Maximum spherical harmonics degree.
Write	Writes a `SplatData` object to disk in the specified format.	input	string	Y	Resource key to read.
		output	string	Y	Output resource path.
		compressLevel	number 0..=9	N(6)	gzip compression level.
		enableMortonSort	boolean	N(true)	Enables Morton sorting.
Modify	Modifies a `SplatData` object.	input	string	Y	Resource key to read.
		output	string	Y	Resource key to write.
		modifyPaths	string[]	N([])	modify JSON file paths. See modify Format.
AutoLod	Generates fused Gaussian output.	input	string	Y	Resource key to read.
		output	string	Y	Resource key to write.
		counts	number	N(Infinity)	Maximum retained count.
		ratio	number 0..=1	N(0.3)	Maximum retained ratio.
AutoChunkLod	Generates chunked fused Gaussian output for use with the LOD scheduler module.	input	string	Y	Resource key to read.
		output	string	Y	Resource key to write.
		type	string	Y	Chunk file type. See Output Formats.
		forceSpzFormatThreshold	number	N(0)	Because low-count sog chunks can compress poorly, chunks below this threshold are forced to spz. A practical starting value is 200000.
		maxChunkCounts	number	N(400000)	Maximum number of Gaussian points per chunk.
		levels	+ + `+Array<{ + precision: number, + scaleBoost: number +}> +` + +	+ N + + `+[ + { precision: 1.0, scaleBoost: 1 }, + { precision: 0.5, scaleBoost: 1 }, + { precision: 0.25, scaleBoost: 1 }, + { precision: 0.05, scaleBoost: 1.01 }, + { precision: 0.01, scaleBoost: 1.02 }, +] +` + +	LOD level precision settings.
Voxel	Generates voxel colliders.	input	string	Y	Resource key to read.
		output	string	Y	Output file path.
		voxelResolution	number	N(0.05)	Voxel size.
		opacityCutoff	number	N(0.1)	Voxel filtering threshold. Higher values cull voxels more aggressively. Increase it when the scene has many floating artifacts.
		backend	+ string + + cpu + gpu + +	N(gpu)	Generation backend. Defaults to gpu; cpu is available but significantly slower. Results can differ slightly between backends.
		box	+ + `+{ + minCorner: [number, number, number], + maxCorner: [number, number, number] +} +` + +	+ N + + `+{ + minCorner: [-100, -100, -100], + maxCorner: [100, 100, 100] +} +` + +	Scene box limit. Outliers can severely affect voxelization performance and produce meaningless output, so this constrains the voxel generation range.
		navCapsule	+ + `+{ + height: number, + radius: number +} +` + +	N(null)	+Both fields are used for navigation simplification. `navCapsule` sets the navigation body height and radius, and `navSeed` sets the navigation start center. + +When enabled, voxels are simplified by the reachable range of the navigation body. This can optimize voxel output, but the feature is still incomplete and may have side effects in some cases, so it is disabled by default.
		navSeed	+ + `+{ + x: number, + y: number, + z: number +} +` + +	N(null)
名称	功能	参数	类型	必须(默认值)	说明
Read	读取多个高斯文件并且合并成一个SplatData对象	inputs	string[]	Y	输入的文件路径
		output	string	Y	写入资源key
		maxShDegree	number 0..=3	N(3)	最大球协阶数
Write	将SplatData对象按指定格式存储到磁盘	input	string	Y	读取资源key
		output	string	Y	写出资源路径
		compressLevel	number 0..=9	N(6)	gzip压缩level
		enableMortonSort	boolean	N(true)	开启莫顿排序
Modify	修改SplatData对象	input	string	Y	读取资源key
		output	string	Y	写入资源key
		modifyPaths	string[]	N([])	modify json 文件路径格式参考modify格式说明
AutoLod	生成融合高斯结果	input	string	Y	读取资源key
		output	string	Y	写入资源key
		counts	number	N(Infinity)	最大保留数量
		ratio	number 0..=1	N(0.3)	最大保留比例
AutoChunkLod	生成分块融合高斯结果，使用需要结合lod调度模块	input	string	Y	读取资源key
		output	string	Y	写入资源key
		type	string	Y	chunk的文件类型，参考输出格式
		forceSpzFormatThreshold	number	N(0)	目前由于数量少的场景下sog的压缩率很差，所以增加了这个参数，低于这个参数的chunk会强制转换成spz格式，建议实际中设置 200000
		maxChunkCounts	number	N(400000)	chunk的最大高斯点数量
		levels	+ + `+Array<{ + precision: number, + scaleBoost: number +}> +` + +	+ N + + `+[ + { precision: 1.0, scaleBoost: 1 }, + { precision: 0.5, scaleBoost: 1 }, + { precision: 0.25, scaleBoost: 1 }, + { precision: 0.05, scaleBoost: 1.01 }, + { precision: 0.01, scaleBoost: 1.02 }, +] +` + +	chunk的最大高斯点数量
Voxel	生成体素碰撞体	input	string	Y	读取资源key
		output	string	Y	输出文件路径
		voxelResolution	number	N(0.05)	体素尺寸
		opacityCutoff	number	N(0.1)	体素筛选阈值，值越高体素越容易被剔除，漂浮物多的方案可以适当提高此值
		backend	+ string + + cpu + gpu + +	N(gpu)	生成方式，默认使用gpu，可选cpu。cpu的耗时会明显高于gpu。两者的结果会有细微差异。
		box	+ + `+{ + minCorner: [number, number, number], + maxCorner: [number, number, number] +} +` + +	+ N + + `+{ + minCorner: [-100, -100, -100], + maxCorner: [100, 100, 100] +} +` + +	场景box限制（离群点对体素化性能影响极大且其输出无意义，所以目前采用最简单的方案限制了体素的生成范围）
		navCapsule	+ + `+{ + height: number, + radius: number +} +` + +	N(null)	+ 两者均服务于导航简化功能。navCapsule用于设置导航体高度和半径，navSeed设置导航起始中心。 + 开启后，会将体素按照导航体可达范围进行简化，能够优化体素（未完善，部分情况下可能存在副作用所以默认不开启） +
		navSeed	+ + `+{ + x: number, + y: number, + z: number +} +` + +	N(null)
${headingHtml}

{group.label}

Aholo Viewer

{card.title}

{feature.title}
