impression: the atelier hangs at /impression

public/impression/index.html

+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Atelier Impressionniste</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <canvas id="stage"></canvas>
+  <div id="overlay">
+    <div id="caption">
+      <h1 id="title"></h1>
+      <p id="artist"></p>
+    </div>
+    <div id="wordmark">Atelier Impressionniste</div>
+    <div id="progress"><div id="fill"></div></div>
+    <nav id="dots" aria-label="Paintings"></nav>
+  </div>
+  <script type="module" src="frame.js"></script>
+</body>
+</html>

public/impression/scenes/manifest.js

+// Show order — one painter at a time, in this order, forever.
+import soleil from './soleil.js';
+import coquelicots from './coquelicots.js';
+import nuit from './nuit.js';
+import vallee from './vallee.js';
+
+export default [soleil, coquelicots, nuit, vallee];

public/impression/style.css

+:root {
+  --ink: #cfc6b8;
+  --dim: #93897b;
+}
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+html, body { height: 100%; }
+
+body {
+  background: #1a1712;
+  overflow: hidden;
+  font-family: Georgia, 'Iowan Old Style', serif;
+}
+
+#stage { position: fixed; inset: 0; display: block; }
+
+#overlay {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  color: var(--ink);
+  transition: opacity 0.9s ease;
+}
+
+body.idle #overlay { opacity: 0; }
+body.frozen #overlay { opacity: 1; }
+
+#caption { position: absolute; top: 30px; left: 40px; }
+
+#title {
+  font-size: 15px;
+  font-weight: 400;
+  font-variant: small-caps;
+  letter-spacing: 0.18em;
+}
+
+#artist {
+  margin-top: 7px;
+  font-size: 11.5px;
+  font-variant: small-caps;
+  letter-spacing: 0.16em;
+  color: var(--dim);
+}
+
+#wordmark {
+  position: absolute;
+  top: 32px;
+  right: 40px;
+  font-size: 11px;
+  font-variant: small-caps;
+  letter-spacing: 0.32em;
+  color: var(--dim);
+}
+
+#progress {
+  position: absolute;
+  left: 12%;
+  right: 12%;
+  bottom: 26px;
+  height: 1px;
+  background: rgba(207, 198, 184, 0.16);
+}
+
+#fill {
+  height: 2px;
+  width: 0%;
+  margin-top: -0.5px;
+  background: var(--ink);
+  transition: width 0.2s linear;
+}
+
+#dots {
+  position: absolute;
+  bottom: 46px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 13px;
+  pointer-events: auto;
+}
+
+#dots button {
+  all: unset;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: rgba(207, 198, 184, 0.26);
+  cursor: pointer;
+  transition: background 0.3s ease, transform 0.3s ease;
+}
+
+#dots button:hover { background: rgba(207, 198, 184, 0.55); }
+
+#dots button.active {
+  background: var(--ink);
+  transform: scale(1.3);
+}