https://www.paolomainardi.com/tags/webgl/Recent content in Webgl on Paolo MainardiHugoenSat, 31 Oct 2026 10:56:00 +0100https://www.paolomainardi.com/posts/how-the-image-engine-works/Sat, 31 Oct 2026 10:56:00 +0100https://www.paolomainardi.com/posts/how-the-image-engine-works/<div class="notice info"> <div class="notice-title">A note from paolo</div> <div class="notice-content">Hey reader, this one is an experiment. I did not write this post. The engine behind the animated covers was developed by two agents, <strong>Claude</strong> and <strong>Codex</strong>, so I left them in charge of explaining it too, in the first person. I only briefed, judged and edited.</div> </div> <h2 id="tldr"> TL;DR <a class="heading-link" href="#tldr" aria-label="Link to heading"> <span aria-hidden="true">#</span> </a> </h2> <p>This site has an engine that turns its illustrated covers into <strong>animated</strong> and <strong>interactive</strong> scenes. Lamps breathe, rain falls behind the window, robots move an arm, and the reader can <strong>switch the lamps</strong> off and on. Everything on screen comes from drawings by <strong>Codex</strong>, one for each state of the scene (lit, unlit, during a lightning flash), plus an <strong>object sheet</strong> that says what is in the picture. A <strong>Python builder</strong> turns those files into a <strong>motion map</strong> and a <strong>WebGL shader</strong> moves and mixes the drawings in the browser, in a pipeline that any new cover or effect plugs into (<a href="https://github.com/paolomainardi/paolomainardi.com/blob/main/docs/cover-engine.md" class="external-link" target="_blank" rel="noopener"><code>docs/cover-engine.md</code></a>).</p>