explainer.html

<!doctype html>
<html lang="en-AU"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="Arrange information on Aura’s fixed 12 by 24 matrix and animate the transforms into an explainer."><title>Explainer | Aura Matrix Studio</title><link rel="icon" href="assets/aura.png"><link rel="stylesheet" href="styles.css?v=0.4.15"></head><body data-page="story"><a class="skip" href="#main">Skip to workspace</a><header><a class="brand" href="index.html"><img src="assets/aura.png" alt=""><div><strong>AURA</strong><span>Matrix Studio</span></div></a><nav class="main-nav" aria-label="Main navigation"><a href="matrix.html" data-page="matrix">Matrix Programmer</a><a href="inventory.html" data-page="inventory">Tool Inventory</a><a href="explainer.html" data-page="story" aria-current="page">Explainer</a><a href="guide.html" data-page="guide">Guide</a></nav></header><main id="main"><div class="page-title"><div><h1>Explain the transforms</h1><p class="subtle">One sequence for learning, demonstrating and making videos.</p></div><div class="actions"><a href="guide.html#explainer">How to make an explainer</a></div></div><div class="workspace"><section><div class="drawing story-stage"><div class="stage"><canvas id="aura-canvas" role="img" aria-label="Interactive 12 by 24 Aura matrix. Drag to rotate, scroll to zoom, tap a cell to select. The numbered matrix provides keyboard access."></canvas><div class="stage-label"><strong id="stage-address">Red I97</strong><span>12 rows × 24 columns · 288 cells per shell</span></div><div id="shell-rail" class="shell-rail" aria-label="Choose shell"></div><div id="caption" class="caption"></div></div><div id="stage-error" class="error-banner" role="alert"></div><div class="playbar"><div class="play-top"><button id="play" class="primary">Play explainer</button><button id="restart">Restart</button><span id="time-label" class="time-label"></span></div><label for="scrub" class="hint">Scrub through the complete sequence</label><input id="scrub" type="range" min="0" max="36" step="0.05" value="0"></div><div class="secondary-controls"><button data-face="I" aria-pressed="true">I · Inside</button><button data-face="O" aria-pressed="false">O · Outside</button><button id="reset-view" class="quiet">Reset view</button><button id="save-png" class="quiet">Save PNG</button></div></div><section class="panel export-panel"><h2>Make your explainer</h2><div class="actions"><button id="record-video" class="primary">Record video</button><button id="story-json">Download explainer file</button></div><label class="check-label"><input id="include-labels" type="checkbox"><span>Include record titles in the video and PNG exports</span></label><p id="video-hint" class="hint">1280 × 720 WebM video. Captions included. Silent, ready for a voice-over. Keep this tab visible while recording.</p><p class="hint">The explainer file contains the shot sequence, captions and selected address. Your record contents are excluded. <a href="guide.html#blender">Use it in Blender</a>.</p></section></section><aside class="panel"><h2>Your sequence</h2><ol id="shot-list" class="shot-list"></ol><div class="actions"><button id="add-shot">Duplicate shot</button><button id="move-shot-up">Move up</button></div><div class="divider"><h3 id="shot-editor-title">Edit shot 1</h3><form id="shot-form"><div class="field"><label for="shot-preset">Matrix shape</label><select id="shot-preset"></select></div><div class="two-fields"><div class="field"><label for="shot-camera">Camera</label><select id="shot-camera"></select></div><div class="field"><label for="shot-duration">Duration in seconds</label><input id="shot-duration" type="number" min="1" max="120" step="0.5" required></div></div><div class="field"><label for="shot-caption">On-screen explanation</label><textarea id="shot-caption" maxlength="700" required></textarea></div><div class="actions"><button type="submit" class="primary">Save shot</button><button type="button" id="delete-shot">Remove shot</button></div></form></div></aside></div><div class="bottom-bar"><div><p id="record-count"></p><p id="save-status" class="status">Saved on this browser</p></div><div class="actions"><button data-backup>Download backup</button><button data-restore>Restore backup</button><button id="undo" disabled>Undo</button></div></div></main><footer>Luke Nathan Hayes / Aura of Intelligence · <a href="LICENCE.md">Strange But True Public Source Licence</a> · <a href="guide.html#sources">Sources and scope</a></footer><div id="toast" class="toast" role="status" aria-live="polite"></div><input type="file" id="backup-file" accept=".json,application/json" hidden><input type="file" id="csv-file" accept=".csv,text/csv" hidden>
<dialog id="restore-dialog"><h2>Restore a project</h2><p id="restore-summary"></p><div class="actions"><button data-backup>Download current backup</button><button id="restore-confirm" class="primary">Restore backup</button><button data-close="restore-dialog">Cancel</button></div></dialog>
<dialog id="csv-dialog"><h2>Arrange a dataset</h2><p id="csv-summary"></p><pre id="csv-preview" class="csv-preview"></pre><form id="csv-form"><div class="two-fields"><div class="field"><label for="csv-title">Title column</label><select id="csv-title"></select></div><div class="field"><label for="csv-note">Note column</label><select id="csv-note"></select></div></div><div class="two-fields"><div class="field"><label for="csv-shell">Shell for this dataset</label><select id="csv-shell"></select></div><div class="field"><label for="csv-face">Side</label><select id="csv-face"><option value="I">I · Inside</option><option value="O">O · Outside</option></select></div></div><div class="field"><label for="csv-cell">Cell placement</label><select id="csv-cell"></select></div><div class="field"><label for="csv-start">Starting cell, when placing consecutive rows</label><input id="csv-start" type="number" min="1" max="288" value="1" required></div><p class="hint">Consecutive placement wraps to cell 1 after cell 288. A cell can hold many records. The matrix stays 12 × 24. Choosing a cell column uses its explicit numbers instead.</p><p id="csv-error" role="alert"></p><div class="actions"><button class="primary" type="submit">Place dataset</button><button type="button" data-close="csv-dialog">Cancel</button></div></form></dialog><script src="vendor/three.min.js"></script><script type="module" src="app.js?v=0.4.26"></script></body></html>