<?xml version="1.0" encoding="utf-8"?><?xml-stylesheet type="text/xsl" href="rss.xsl"?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/">
    <channel>
        <title>scenography Blog</title>
        <link>https://scenography.codeberg.page/blog</link>
        <description>scenography Blog</description>
        <lastBuildDate>Tue, 16 Jun 2026 00:00:00 GMT</lastBuildDate>
        <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
        <generator>https://github.com/jpmonette/feed</generator>
        <language>en</language>
        <item>
            <title><![CDATA[scenography is alive — galleries as data]]></title>
            <link>https://scenography.codeberg.page/blog/hello-scenography</link>
            <guid>https://scenography.codeberg.page/blog/hello-scenography</guid>
            <pubDate>Tue, 16 Jun 2026 00:00:00 GMT</pubDate>
            <description><![CDATA[scenography started from a simple itch: building virtual galleries like]]></description>
            <content:encoded><![CDATA[<p>scenography started from a simple itch: building virtual galleries like
<a href="https://jllizaur.art/" target="_blank" rel="noopener noreferrer" class="">jllizaur.art</a> meant hand-wiring three.js every time. Walls,
artworks, camera, controls — all tangled together, impossible to reuse, and
impossible to store anywhere but in code.</p>
<p>So scenography splits the problem in two.</p>
<!-- -->
<h2 class="anchor anchorTargetStickyNavbar_h1iN" id="data-vs-runtime">Data vs. runtime<a href="https://scenography.codeberg.page/blog/hello-scenography#data-vs-runtime" class="hash-link" aria-label="Direct link to Data vs. runtime" title="Direct link to Data vs. runtime" translate="no">​</a></h2>
<p>The whole library rests on one rule: a gallery is <strong>data</strong>, and behavior is
<strong>code</strong>, and the two never mix.</p>
<ul>
<li class="">A scene definition is plain, JSON-serializable data — walls, artworks, a camera.
No three.js, no closures. It is what an editor produces and a database stores.</li>
<li class="">The engine is the runtime that materializes that data with three.js and runs it.</li>
</ul>
<div class="language-ts codeBlockContainer_elj5 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_b4Mt"><pre tabindex="0" class="prism-code language-ts codeBlock_tiPB thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_EYfd"><div class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> defineScene </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'@scenography/core'</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> scene </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">defineScene</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">  walls</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> id</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'room'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> path</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token punctuation" style="color:#393A34">[</span><span class="token number" style="color:#36acaa">300</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">-</span><span class="token number" style="color:#36acaa">300</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token operator" style="color:#393A34">-</span><span class="token number" style="color:#36acaa">300</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">-</span><span class="token number" style="color:#36acaa">300</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token operator" style="color:#393A34">-</span><span class="token number" style="color:#36acaa">300</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">300</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> edges</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> segment</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">0</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> name</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'north'</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">  artworks</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> id</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'lucho'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> location</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> type</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'wall'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> edge</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'north'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> position</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'50%'</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> src</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'/lucho.jpg'</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> size</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token number" style="color:#36acaa">120</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">160</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain">  camera</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> start</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> position</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token number" style="color:#36acaa">0</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">170</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">0</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></div><div class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></div></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_h1iN" id="where-we-are-now">Where we are now<a href="https://scenography.codeberg.page/blog/hello-scenography#where-we-are-now" class="hash-link" aria-label="Direct link to Where we are now" title="Direct link to Where we are now" translate="no">​</a></h2>
<p>scenography is in <strong>alpha</strong> (<code>0.x</code>). The core is working end to end: you can
describe a space, render it with a free-roaming camera, hang artworks on named
wall edges, layer a DOM overlay over the canvas, and edit the scene on the fly —
the engine reconciles changes by <code>id</code>, so you can add a wing or drop one while you
walk through it.</p>
<p>The packages today: <code>core</code> (the language), <code>engine</code> (the three.js runtime),
<code>props</code> (set dressing), <code>overlay</code> (the HUD), and <code>react</code> (bindings).</p>
<h2 class="anchor anchorTargetStickyNavbar_h1iN" id="whats-next">What's next<a href="https://scenography.codeberg.page/blog/hello-scenography#whats-next" class="hash-link" aria-label="Direct link to What's next" title="Direct link to What's next" translate="no">​</a></h2>
<p>Walls will gain chamfered and rounded corners and inside/outside offset; floors,
ceilings, and textures are coming; and camera tours and zones will arrive as
<strong>data</strong>, with the motion and triggers wired by <code>id</code> in the engine. See the
<a class="" href="https://scenography.codeberg.page/roadmap">roadmap</a> for the full picture.</p>
<p>The API will keep changing while we're on <code>0.x</code> — that's the point of alpha. If
you try it, <a href="https://codeberg.org/scenography/scenography/issues" target="_blank" rel="noopener noreferrer" class="">open an issue</a>.</p>]]></content:encoded>
            <category>Announcement</category>
            <category>Alpha</category>
        </item>
    </channel>
</rss>