From dddcfc6888175e1964b45a763a42ced66dae4782 Mon Sep 17 00:00:00 2001
From: K-Adam <kecskes.adam@outlook.com>
Date: Wed, 4 Nov 2026 06:32:32 +0100
Subject: [PATCH 1/3] Generate thumbnails

---
 .github/workflows/release.yml                 | 10 ++-
 examples/demos.eta                            |  2 +-
 examples/index.html                           |  1 +
 examples/public/favicon.svg                   |  2 +
 examples/standalone/billboard.html            |  1 +
 examples/standalone/canvas.html               |  1 +
 examples/standalone/cube.html                 |  1 +
 examples/standalone/filters.html              |  1 +
 examples/standalone/fire.html                 |  1 +
 examples/standalone/point_light.html          |  1 +
 examples/standalone/shading.html              |  1 +
 examples/standalone/specular.html             |  1 +
 examples/threejs/fps.html                     |  1 +
 examples/threejs/geometry_cube.html           |  1 +
 examples/threejs/geometry_earth.html          |  1 +
 examples/threejs/interactive_cubes_tween.html |  1 +
 examples/threejs/loader_obj.html              |  1 +
 examples/threejs/periodictable.html           |  1 +
 examples/threejs/physics_rope.html            |  1 +
 examples/threejs/sprites.html                 |  1 +
 examples/thumbnails.mjs                       | 80 +++++++++++++++++++
 21 files changed, 107 insertions(+), 4 deletions(-)
 create mode 100644 examples/public/favicon.svg
 create mode 100644 examples/thumbnails.mjs

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 3be6029..984e09f 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -10,6 +10,7 @@ jobs:
     permissions:
       contents: write
       id-token: write
+      pages: read
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
@@ -27,9 +28,6 @@ jobs:
       - run: npx playwright install --with-deps chromium
       - run: npm test
       - run: npm run build
-      - uses: actions/upload-pages-artifact@v3
-        with:
-          path: examples/dist
       - run: |
           for p in c3r c3r-three; do
             v=$(node -p "require('./packages/$p/package.json').version")
@@ -38,6 +36,12 @@ jobs:
       - run: gh release create "$GITHUB_REF_NAME" packages/c3r/dist/*.js packages/c3r-three/dist/*.js --generate-notes
         env:
           GH_TOKEN: ${{ github.token }}
+      - id: pages
+        uses: actions/configure-pages@v5
+      - run: node examples/thumbnails.mjs "${{ steps.pages.outputs.base_url }}"
+      - uses: actions/upload-pages-artifact@v3
+        with:
+          path: examples/dist
 
   deploy:
     needs: build
diff --git a/examples/demos.eta b/examples/demos.eta
index 834f89f..ee0428c 100644
--- a/examples/demos.eta
+++ b/examples/demos.eta
@@ -5,7 +5,7 @@
 <meta name="viewport" content="<%= it.viewport ?? "width=device-width,initial-scale=1" %>">
 <meta http-equiv="Content-Security-Policy" content="script-src 'none'">
 <title><%= it.title %></title>
-<link rel="icon" href="data:,">
+<link rel="icon" href="../../favicon.svg">
 <link rel="stylesheet" href="style.css">
 <style><%~ it.css %></style>
 </head>
diff --git a/examples/index.html b/examples/index.html
index ef00011..50547e9 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>CSS 3D examples</title>
+    <link rel="icon" href="/favicon.svg" />
     <style>
       @import "@picocss/pico/css/pico.classless.min.css";
 
diff --git a/examples/public/favicon.svg b/examples/public/favicon.svg
new file mode 100644
index 0000000..b2e3940
--- /dev/null
+++ b/examples/public/favicon.svg
@@ -0,0 +1,2 @@
+<!-- CSS3 logo by Rudloff, CC BY 3.0 https://creativecommons.org/licenses/by/3.0/ from https://commons.wikimedia.org/wiki/File:CSS3_logo_and_wordmark.svg -->
+<svg viewBox="0 0 538.584 538.584" xmlns="http://www.w3.org/2000/svg"><path d="M405.5 467.454L269.29 504.13l-136.212-36.676-31.432-340.525h335.29L405.5 467.454z" fill="#2062af"/><path d="M269.289 154.511v320.367l.308.084 110.229-29.682 25.443-290.769h-135.98z" fill="#3c9cd7"/><path d="M191.985 76.899V56.631h29.571V34.453h-51.749v62.684h51.749V76.899h-29.571zm82.766-20.268h20.674V34.453h-51.754v22.178c6.924 6.924 10.535 10.238 20.549 20.252-5.854 0-20.549.021-20.549.02v20.234h51.754V76.899l-20.674-20.268zm73.352 0h20.673V34.453H317.02v22.178c6.924 6.924 10.537 10.238 20.551 20.252-5.852 0-20.551.021-20.551.02v20.234h51.757V76.899l-20.674-20.268z"/><path d="M269.168 239.656l-97.49 40.602 3.233 40.199 94.257-40.301 100.265-42.868 4.157-41.122-104.422 43.49z" fill="#ffffff"/><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="-825.508" y1="1338.301" x2="-825.508" y2="1419.102" gradientTransform="matrix(1 0 0 -1 1045.93 1658.759)"><stop offset=".387" stop-color="#d1d3d4" stop-opacity="0"/><stop offset="1" stop-color="#d1d3d4"/></linearGradient><path d="M171.677 280.258l3.233 40.199 94.257-40.301v-40.5l-97.49 40.602z" fill="url(#a)"/><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="-724.552" y1="1378.602" x2="-724.552" y2="1462.591" gradientTransform="matrix(1 0 0 -1 1045.93 1658.759)"><stop offset=".387" stop-color="#d1d3d4" stop-opacity="0"/><stop offset="1" stop-color="#d1d3d4"/></linearGradient><path d="M373.59 196.167l-104.422 43.489v40.5l100.265-42.868 4.157-41.121z" fill="url(#b)"/><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="-874.103" y1="1302.263" x2="-680.039" y2="1302.263" gradientTransform="matrix(1 0 0 -1 1045.93 1658.759)"><stop offset="0" stop-color="#e8e7e5"/><stop offset="1" stop-color="#ffffff"/></linearGradient><path d="M171.827 280.258l3.234 40.199 144.625.461-3.235 53.598-47.59 13.398-45.748-11.551-2.772-33.268h-42.508l5.545 64.225 85.945 25.412 85.479-24.951 11.09-127.523H171.827z" fill="url(#c)"/><path d="M269.168 280.258h-97.49l3.233 40.199 94.257.301v-40.5zm0 107.528l-.462.129-45.742-11.551-2.772-33.268h-42.507l5.544 64.225 85.939 25.412v-44.947z" opacity=".05"/><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="-883.032" y1="1442.031" x2="-672.341" y2="1442.031" gradientTransform="matrix(1 0 0 -1 1045.93 1658.759)"><stop offset="0" stop-color="#e8e7e5"/><stop offset="1" stop-color="#ffffff"/></linearGradient><path d="M162.898 196.167H373.59l-4.157 41.122H167.98l-5.082-41.122z" fill="url(#d)"/><path d="M269.168 196.167h-106.27l5.082 41.122h101.188v-41.122z" opacity=".05"/></svg>
\ No newline at end of file
diff --git a/examples/standalone/billboard.html b/examples/standalone/billboard.html
index 81ad404..273c6fb 100644
--- a/examples/standalone/billboard.html
+++ b/examples/standalone/billboard.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>c3r - Billboards</title>
+    <link rel="icon" href="/favicon.svg" />
     <style>
       body {
         margin: 0;
diff --git a/examples/standalone/canvas.html b/examples/standalone/canvas.html
index c1d11c6..70b8a56 100644
--- a/examples/standalone/canvas.html
+++ b/examples/standalone/canvas.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>c3r - Drawable canvas cube</title>
+    <link rel="icon" href="/favicon.svg" />
     <style>
       body {
         margin: 0;
diff --git a/examples/standalone/cube.html b/examples/standalone/cube.html
index b157d73..eee573d 100644
--- a/examples/standalone/cube.html
+++ b/examples/standalone/cube.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>c3r - Spinning box</title>
+    <link rel="icon" href="/favicon.svg" />
     <style>
       body {
         margin: 0;
diff --git a/examples/standalone/filters.html b/examples/standalone/filters.html
index c61406c..45cbb88 100644
--- a/examples/standalone/filters.html
+++ b/examples/standalone/filters.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>c3r - Filter effects</title>
+    <link rel="icon" href="/favicon.svg" />
     <style>
       body {
         margin: 0;
diff --git a/examples/standalone/fire.html b/examples/standalone/fire.html
index f0fd980..9e0a14e 100644
--- a/examples/standalone/fire.html
+++ b/examples/standalone/fire.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>c3r - Fire</title>
+    <link rel="icon" href="/favicon.svg" />
     <style>
       body {
         margin: 0;
diff --git a/examples/standalone/point_light.html b/examples/standalone/point_light.html
index d5dc45a..ad07e61 100644
--- a/examples/standalone/point_light.html
+++ b/examples/standalone/point_light.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>c3r - Point light</title>
+    <link rel="icon" href="/favicon.svg" />
     <style>
       body {
         margin: 0;
diff --git a/examples/standalone/shading.html b/examples/standalone/shading.html
index e460a13..5f07564 100644
--- a/examples/standalone/shading.html
+++ b/examples/standalone/shading.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>c3r - Shading</title>
+    <link rel="icon" href="/favicon.svg" />
     <style>
       body {
         margin: 0;
diff --git a/examples/standalone/specular.html b/examples/standalone/specular.html
index 5998409..aecb93f 100644
--- a/examples/standalone/specular.html
+++ b/examples/standalone/specular.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>c3r - Specular map</title>
+    <link rel="icon" href="/favicon.svg" />
     <style>
       body {
         margin: 0;
diff --git a/examples/threejs/fps.html b/examples/threejs/fps.html
index 7a5a597..c7ab3b1 100644
--- a/examples/threejs/fps.html
+++ b/examples/threejs/fps.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>c3r - FPS</title>
+    <link rel="icon" href="/favicon.svg" />
     <style>
       body {
         margin: 0;
diff --git a/examples/threejs/geometry_cube.html b/examples/threejs/geometry_cube.html
index a87b127..0c6e8e8 100644
--- a/examples/threejs/geometry_cube.html
+++ b/examples/threejs/geometry_cube.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>c3r - Cube geometry</title>
+    <link rel="icon" href="/favicon.svg" />
     <style>
       body {
         margin: 0;
diff --git a/examples/threejs/geometry_earth.html b/examples/threejs/geometry_earth.html
index dc158f7..b2cdf5f 100644
--- a/examples/threejs/geometry_earth.html
+++ b/examples/threejs/geometry_earth.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>c3r - Earth</title>
+    <link rel="icon" href="/favicon.svg" />
     <style>
       body {
         margin: 0;
diff --git a/examples/threejs/interactive_cubes_tween.html b/examples/threejs/interactive_cubes_tween.html
index dfd9ea2..557292a 100644
--- a/examples/threejs/interactive_cubes_tween.html
+++ b/examples/threejs/interactive_cubes_tween.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>c3r - Interactive cubes</title>
+    <link rel="icon" href="/favicon.svg" />
     <style>
       body {
         margin: 0;
diff --git a/examples/threejs/loader_obj.html b/examples/threejs/loader_obj.html
index c20f50b..8011441 100644
--- a/examples/threejs/loader_obj.html
+++ b/examples/threejs/loader_obj.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>c3r - OBJ loader</title>
+    <link rel="icon" href="/favicon.svg" />
     <style>
       body {
         margin: 0;
diff --git a/examples/threejs/periodictable.html b/examples/threejs/periodictable.html
index 8aa8b97..352e817 100644
--- a/examples/threejs/periodictable.html
+++ b/examples/threejs/periodictable.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>c3r - Periodic table</title>
+    <link rel="icon" href="/favicon.svg" />
     <style>
       body {
         margin: 0;
diff --git a/examples/threejs/physics_rope.html b/examples/threejs/physics_rope.html
index 7eeecd4..33e25d0 100644
--- a/examples/threejs/physics_rope.html
+++ b/examples/threejs/physics_rope.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>c3r - Physics rope</title>
+    <link rel="icon" href="/favicon.svg" />
     <style>
       body {
         margin: 0;
diff --git a/examples/threejs/sprites.html b/examples/threejs/sprites.html
index 99d3955..42fabb0 100644
--- a/examples/threejs/sprites.html
+++ b/examples/threejs/sprites.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>c3r - Sprites</title>
+    <link rel="icon" href="/favicon.svg" />
     <style>
       body {
         margin: 0;
diff --git a/examples/thumbnails.mjs b/examples/thumbnails.mjs
new file mode 100644
index 0000000..de49352
--- /dev/null
+++ b/examples/thumbnails.mjs
@@ -0,0 +1,80 @@
+// Screenshots each built example and adds link preview tags, after `npm run build`:
+// node examples/thumbnails.mjs https://k-adam.github.io/CSS3D-Renderer
+import { readFileSync, writeFileSync } from "node:fs";
+import { join, resolve } from "node:path";
+import { chromium } from "playwright";
+import { preview } from "vite";
+
+// Absolute, as crawlers don't resolve relative URLs. The slash keeps the last path segment
+const site = new URL(process.argv[2].replace(/\/?$/, "/"));
+const DIST = resolve(import.meta.dirname, "dist");
+// 1.91:1, the ratio every major platform crops previews to
+const [WIDTH, HEIGHT] = [1200, 630];
+const DESCRIPTION =
+  "Textured 3D scenes from plain DOM elements and CSS transforms.";
+
+const read = (page) => readFileSync(join(DIST, page), "utf8");
+const pages = [...read("index.html").matchAll(/href="([^":]+\.html)"/g)].map(
+  (m) => m[1],
+);
+const imageOf = (page) =>
+  `thumbnails/${page.replaceAll("/", "-")}`.replace(/\.html$/, ".jpg");
+
+const server = await preview({
+  configFile: false,
+  root: import.meta.dirname,
+  logLevel: "error",
+});
+const browser = await chromium.launch();
+try {
+  const tab = await browser.newPage({
+    viewport: { width: WIDTH, height: HEIGHT },
+  });
+  for (const page of pages) {
+    await tab.goto(new URL(page, server.resolvedUrls.local[0]).href, {
+      waitUntil: "networkidle",
+    });
+    // Lets entry animations and tweens move away from their first frame
+    await tab.waitForTimeout(1000);
+    // Under 300 KB, which WhatsApp needs
+    await tab.screenshot({
+      path: join(DIST, imageOf(page)),
+      type: "jpeg",
+      quality: 80,
+    });
+  }
+} finally {
+  await browser.close();
+  await server.close();
+}
+
+const tag = (attr, key, value) =>
+  `<meta ${attr}="${key}" content="${value.replace(/"/g, "&quot;")}">`;
+// A screenshot of the link list would show nothing 3D
+for (const [page, image] of [
+  ...pages.map((p) => [p, imageOf(p)]),
+  ["index.html", imageOf("demos/moon/index.html")],
+]) {
+  const html = read(page);
+  const title = /<title>([^<]*)<\/title>/.exec(html)[1].trim();
+  const tags = [
+    tag("property", "og:type", "website"),
+    tag("property", "og:site_name", "CSS 3D Renderer"),
+    tag("property", "og:title", title),
+    tag("property", "og:description", DESCRIPTION),
+    tag(
+      "property",
+      "og:url",
+      new URL(page.replace(/index\.html$/, ""), site).href,
+    ),
+    tag("property", "og:image", new URL(image, site).href),
+    tag("property", "og:image:width", `${WIDTH}`),
+    tag("property", "og:image:height", `${HEIGHT}`),
+    tag("property", "og:image:alt", `Screenshot of ${title}`),
+    tag("name", "twitter:card", "summary_large_image"),
+  ];
+  writeFileSync(
+    join(DIST, page),
+    html.replace("</head>", `${tags.join("\n")}\n</head>`),
+  );
+}

From 0a5a946f8ffac53cd12cee54e56072976b851d8f Mon Sep 17 00:00:00 2001
From: K-Adam <kecskes.adam@outlook.com>
Date: Wed, 4 Nov 2026 21:03:12 +0100
Subject: [PATCH 2/3] Point lights and shadows in c3r-three

---
 examples/threejs/physics_rope.html          |  48 ++++-
 packages/c3r-three/README.md                |   6 +-
 packages/c3r-three/src/C3RRenderer.ts       | 199 +++++++++++++++++---
 packages/c3r-three/test/C3RRenderer.test.ts | 153 ++++++++++++++-
 packages/c3r/README.md                      |   2 +-
 packages/c3r/src/C3R.ts                     |   2 +-
 packages/c3r/src/dom/Group.ts               |  11 +-
 packages/c3r/src/dom/Shadows.ts             | 148 ++++++++++++---
 packages/c3r/test/c3r.test.ts               |  34 ++++
 9 files changed, 530 insertions(+), 73 deletions(-)

diff --git a/examples/threejs/physics_rope.html b/examples/threejs/physics_rope.html
index 33e25d0..ff1b45b 100644
--- a/examples/threejs/physics_rope.html
+++ b/examples/threejs/physics_rope.html
@@ -66,6 +66,7 @@
       import { C3RRenderer } from "c3r-three";
       import { OrbitControls } from "three/addons/controls/OrbitControls.js";
       import Stats from "three/addons/libs/stats.module.js";
+      import { GUI } from "three/addons/libs/lil-gui.module.min.js";
 
       // - Global variables -
 
@@ -89,6 +90,7 @@
       let ropeSoftBody;
       const ropeSegments = [];
       const transformAux1 = new Ammo.btTransform();
+      const ropeAux0 = new THREE.Vector3();
       const ropeAux1 = new THREE.Vector3();
 
       let armMovement = 0;
@@ -137,6 +139,7 @@
 
         const light = new THREE.DirectionalLight(0xffffff, 3);
         light.position.set(-10, 10, 5);
+        light.castShadow = true;
         scene.add(light);
 
         document.body.appendChild(renderer.domElement);
@@ -144,6 +147,23 @@
         stats = new Stats();
         document.body.appendChild(stats.dom);
 
+        const params = { shading: true, shadows: false, soft: false };
+        const gui = new GUI();
+        const apply = () => {
+          renderer.shading = params.shading;
+          renderer.shadows =
+            params.shadows && (params.soft ? { blur: 0.1 } : true);
+          shadows.enable(params.shading);
+          soft.enable(params.shading && params.shadows);
+        };
+        gui.add(params, "shading").onChange(apply);
+        const shadows = gui.add(params, "shadows").onChange(apply);
+        const soft = gui
+          .add(params, "soft")
+          .name("soft shadows")
+          .onChange(apply);
+        apply();
+
         window.addEventListener("resize", onWindowResize);
       }
 
@@ -208,6 +228,8 @@
         quat.set(0, 0, 0, 1);
         createRigidBody(ball, ballShape, ballMass, pos, quat);
         ball.userData.physicsBody.setFriction(0.5);
+        // Held by the rope, which doesn't wake it
+        ball.userData.physicsBody.setActivationState(4);
 
         // Wall
         const brickMass = 0.5;
@@ -272,6 +294,8 @@
         const ropeMaterial = new THREE.MeshBasicMaterial({ color: 0x000000 });
         for (let i = 0; i < ropeNumSegments; i++) {
           const segment = new THREE.Mesh(ropeGeometry, ropeMaterial);
+          segment.castShadow = true;
+          segment.receiveShadow = true;
           scene.add(segment);
           ropeSegments.push(segment);
         }
@@ -333,6 +357,8 @@
           quat,
           baseMaterial,
         );
+        // Its motor doesn't wake it
+        arm.userData.physicsBody.setActivationState(4);
 
         // Glue the rope extremes to the ball and the arm
         const influence = 1;
@@ -417,15 +443,12 @@
         const body = new Ammo.btRigidBody(rbInfo);
 
         threeObject.userData.physicsBody = body;
+        threeObject.castShadow = true;
+        threeObject.receiveShadow = true;
 
         scene.add(threeObject);
 
-        if (mass > 0) {
-          rigidBodies.push(threeObject);
-
-          // Disable deactivation
-          body.setActivationState(4);
-        }
+        if (mass > 0) rigidBodies.push(threeObject);
 
         physicsWorld.addRigidBody(body);
       }
@@ -498,10 +521,19 @@
         for (let i = 0; i < ropeSegments.length; i++) {
           const a = nodes.at(i).get_m_x();
           const b = nodes.at(i + 1).get_m_x();
+          ropeAux0.set(a.x(), a.y(), a.z());
           ropeAux1.set(b.x(), b.y(), b.z());
 
           const segment = ropeSegments[i];
-          segment.position.set(a.x(), a.y(), a.z());
+          // A jitter too small to see would still recast shadows
+          const end = (segment.userData.end ??= new THREE.Vector3(Infinity));
+          if (
+            segment.position.distanceTo(ropeAux0) < 1e-3 &&
+            end.distanceTo(ropeAux1) < 1e-3
+          )
+            continue;
+          end.copy(ropeAux1);
+          segment.position.copy(ropeAux0);
           segment.scale.z = segment.position.distanceTo(ropeAux1);
           segment.lookAt(ropeAux1);
         }
@@ -517,7 +549,7 @@
             const q = transformAux1.getRotation();
             const next = [p.x(), p.y(), p.z(), q.x(), q.y(), q.z(), q.w()];
             const current = [...objThree.position, ...objThree.quaternion];
-            // Bodies never sleep here, and a jitter too small to see still restyles
+            // The ball and arm never sleep, and a jitter too small to see still restyles
             if (current.some((v, k) => Math.abs(v - next[k]) > 1e-3)) {
               objThree.position.fromArray(next);
               objThree.quaternion.fromArray(next, 3);
diff --git a/packages/c3r-three/README.md b/packages/c3r-three/README.md
index 8b8794e..1474376 100644
--- a/packages/c3r-three/README.md
+++ b/packages/c3r-three/README.md
@@ -26,7 +26,11 @@ Until `setSize()` the scenes fill the window and follow it, like a C3R `Containe
 
 Perspective and orthographic cameras are supported, including `zoom`. Material `color`, `map` (image or canvas, with `repeat` and `offset`, its alpha always; a `color` tints it with `Filter.tint`), `opacity` (when `transparent`) and `side` (`BackSide` shows both sides) are applied, and a material's style is removed on its `dispose()`. `renderer.dispose()` removes every rendered scene, and `renderer.toHTML()` (async) exports them.
 
-`new C3RRenderer({ shading: true })` shades Lambert, Phong and Standard materials by the scene's visible `AmbientLight`s and first `DirectionalLight`, in grayscale: smooth from the geometry's normals, or flat with `flatShading`. `MeshBasicMaterial` stays unlit. `specular: true` adds Phong materials' highlights, without `specularMap`, and each camera turn then restyles every polygon with one. Shadows are left out.
+`new C3RRenderer({ shading: true })` shades Lambert, Phong and Standard materials by the scene's visible `AmbientLight`s and first `DirectionalLight` or `PointLight`, in grayscale: smooth from the geometry's normals, or flat with `flatShading`. A point light falls off with the squared distance, as with the default `decay` and `distance`. `MeshBasicMaterial` stays unlit. `specular: true` adds Phong materials' highlights, without `specularMap`, and each camera turn then restyles every polygon with one.
+
+`shadows: true` casts the light's shadows when it has `castShadow`, from meshes with `castShadow` onto meshes with `receiveShadow`. A caster is the bounding sphere of a `SphereGeometry`, a cylinder for an upright `CylinderGeometry`, and the bounding box of any other geometry. A shadow takes the light's share of the brightness at the receiving mesh's center, leaving the ambient. `shadows: { blur }` softens them by `blur` in scene units, at a cost in paint time. They are cast again in a frame where a mesh, a light or the scene's structure changed, not when only the camera moved.
+
+`shading`, `specular` and `shadows` are also properties of the renderer, which apply at the next `render()`.
 
 Not supported yet: `ImageBitmap` maps such as GLTFLoader's, `flipY: false`, and map `rotation` and `center`.
 
diff --git a/packages/c3r-three/src/C3RRenderer.ts b/packages/c3r-three/src/C3RRenderer.ts
index f17f6d7..2fa8e7d 100644
--- a/packages/c3r-three/src/C3RRenderer.ts
+++ b/packages/c3r-three/src/C3RRenderer.ts
@@ -1,6 +1,7 @@
 import {
   AmbientLight,
   ClampToEdgeWrapping,
+  CylinderGeometry,
   DirectionalLight,
   FrontSide,
   InterleavedBufferAttribute,
@@ -11,7 +12,9 @@ import {
   MeshStandardMaterial,
   OrthographicCamera,
   PerspectiveCamera,
+  PointLight,
   Quaternion,
+  SphereGeometry,
   SRGBColorSpace,
   Sprite,
   Vector3,
@@ -47,6 +50,16 @@ interface Range {
 interface MeshState {
   key: unknown[];
   groups: { node: C3R.Group; polygons: C3R.Polygon[] }[];
+  fitted?: C3R.ShadowCaster | null;
+  caster: C3R.ShadowCaster | null;
+  receiver?: C3R.Material;
+}
+
+interface ShadowLight {
+  ambient: number;
+  level: number;
+  position: NonNullable<C3R.Lights["point"]>["position"] | null;
+  blur: number;
 }
 
 interface MaterialState {
@@ -81,7 +94,10 @@ const shadingOf = (material: Material): C3R.Shading | null =>
 const luminance = ({ r, g, b }: Color) => 0.2126 * r + 0.7152 * g + 0.0722 * b;
 
 // Divided by π like three.js' diffuse, so a scene is as bright as under WebGL
-const lightLevel = ({ color, intensity }: AmbientLight | DirectionalLight) =>
+const lightLevel = ({
+  color,
+  intensity,
+}: AmbientLight | DirectionalLight | PointLight) =>
   (intensity * luminance(color)) / Math.PI;
 
 // three.js' BRDF_BlinnPhong without Fresnel, relative to the level above
@@ -92,18 +108,54 @@ const specularOf = (material: Material): C3R.Specular | null => {
   return intensity > 0 && shininess > 0 ? { intensity, shininess } : null;
 };
 
+const casterOf = (geometry: BufferGeometry): C3R.ShadowCaster | null => {
+  if (geometry instanceof SphereGeometry) {
+    geometry.computeBoundingSphere();
+    const { center, radius } = geometry.boundingSphere!;
+    return radius > 0
+      ? { shape: "sphere", radius, center: center.toArray() }
+      : null;
+  }
+  geometry.computeBoundingBox();
+  const box = geometry.boundingBox!;
+  if (box.isEmpty()) return null;
+  const center = box.getCenter(new Vector3()).toArray();
+  const size = box.getSize(new Vector3()).toArray();
+  if (geometry instanceof CylinderGeometry) {
+    const { radiusTop, radiusBottom, height } = geometry.parameters;
+    const radius = Math.max(radiusTop, radiusBottom);
+    // Rotated vertices leave the parameters along y
+    if (radius > 0 && height > 0 && Math.abs(size[1] - height) <= 1e-6 * height)
+      return { shape: "cylinder", radius, height, center };
+  }
+  const largest = Math.max(...size);
+  if (!(largest > 0)) return null;
+  // A plane casts too, a box can't be flat
+  const [x, y, z] = size.map((n) => Math.max(n, largest * 1e-3));
+  return { shape: "box", size: [x, y, z], center };
+};
+
 export interface C3RRendererOptions {
   shading?: boolean;
   // Needs shading
   specular?: boolean;
+  // Needs shading, blur in scene units softens them
+  shadows?: boolean | { readonly blur: number };
 }
 
 export class C3RRenderer {
   readonly domElement: HTMLDivElement = document.createElement("div");
 
-  #shading: boolean;
-  #specular: boolean;
+  shading: boolean;
+  specular: boolean;
+  shadows: boolean | { readonly blur: number };
+
+  #shadowLight: ShadowLight | null = null;
+  // Whether this render moved anything a shadow follows
+  #changed = false;
   #lights = new WeakMap<C3R.Container, string>();
+  // Those last rendered with shadows, cast once more when they turn off
+  #casting = new WeakSet<C3R.Container>();
   #width = 0;
   #height = 0;
   #containers = new Map<Scene, C3R.Container>(); // multiple scenes can overlap
@@ -112,9 +164,14 @@ export class C3RRenderer {
   #materials = new WeakMap<Material, MaterialState>();
   #poses = new WeakMap<C3R.Group | C3R.Camera, number[]>();
 
-  constructor({ shading = false, specular = false }: C3RRendererOptions = {}) {
-    this.#shading = shading;
-    this.#specular = shading && specular;
+  constructor({
+    shading = false,
+    specular = false,
+    shadows = false,
+  }: C3RRendererOptions = {}) {
+    this.shading = shading;
+    this.specular = specular;
+    this.shadows = shadows;
   }
 
   getSize(): { width: number; height: number } {
@@ -155,34 +212,61 @@ export class C3RRenderer {
     if (camera.parent === null && camera.matrixWorldAutoUpdate)
       camera.updateMatrixWorld();
 
+    this.#changed = false;
     this.#syncCamera(container, camera);
-    if (this.#shading) this.#syncLights(scene, container);
+    if (this.shading) this.#syncLights(scene, container);
+    else this.#shadowLight = null;
     this.#syncObject(scene, container.root, camera);
-    void container.bake();
+    const casting = this.shading && !!this.shadows;
+    void container.bake({
+      shadows: this.#changed && (casting || this.#casting.has(container)),
+    });
+    if (casting) this.#casting.add(container);
+    else this.#casting.delete(container);
   }
 
   #syncLights(scene: Scene, container: C3R.Container): void {
     let ambient = 0;
+    let light: DirectionalLight | PointLight | undefined;
     let directional: C3R.Lights["directional"];
+    let point: C3R.Lights["point"];
     scene.traverseVisible((object) => {
       if (object instanceof AmbientLight) ambient += lightLevel(object);
-      if (!(object instanceof DirectionalLight) || directional) return;
+      if (light) return;
+      if (!(object instanceof DirectionalLight || object instanceof PointLight))
+        return;
       const intensity = lightLevel(object);
       if (intensity <= 0) return;
+      _position.setFromMatrixPosition(object.matrixWorld);
+      if (object instanceof PointLight) {
+        point = { position: _position.toArray(), intensity };
+        light = object;
+        return;
+      }
       _direction
         .setFromMatrixPosition(object.target.matrixWorld)
-        .sub(_position.setFromMatrixPosition(object.matrixWorld));
-      if (_direction.lengthSq())
-        directional = { direction: _direction.toArray(), intensity };
+        .sub(_position);
+      if (!_direction.lengthSq()) return;
+      directional = { direction: _direction.toArray(), intensity };
+      light = object;
     });
-    const lights = {
-      ambient: { intensity: Math.max(0, ambient) },
-      directional,
-    };
-    const key = JSON.stringify(lights);
+    ambient = Math.max(0, ambient);
+    const lights = { ambient: { intensity: ambient }, directional, point };
+    const { shadows } = this;
+    this.#shadowLight =
+      shadows && light?.castShadow
+        ? {
+            ambient,
+            level: (point ?? directional)!.intensity,
+            position: point?.position ?? null,
+            blur: shadows === true ? 0 : shadows.blur,
+          }
+        : null;
+    const key = JSON.stringify([lights, !!this.#shadowLight]);
     if (this.#lights.get(container) === key) return;
     this.#lights.set(container, key);
     container.lights = lights;
+    this.#changed = true;
   }
 
   async toHTML(): Promise<string> {
@@ -221,10 +305,31 @@ export class C3RRenderer {
     this.#setPose(container.camera, camera.matrixWorld.elements);
   }
 
+  // The light's share of the brightness at the mesh's center, which a shadow takes
+  #shadowOpacity(mesh: Mesh): number {
+    const { ambient, level, position } = this.#shadowLight!;
+    let light = level;
+    if (position) {
+      const { geometry } = mesh;
+      if (!geometry.boundingSphere) geometry.computeBoundingSphere();
+      _position
+        .copy(geometry.boundingSphere!.center)
+        .applyMatrix4(mesh.matrixWorld);
+      light /= Math.max(
+        _position.distanceToSquared(_direction.fromArray(position)),
+        1e-12,
+      );
+    }
+    return light / (ambient + light);
+  }
+
   #syncObject(object: Object3D, node: C3R.Group, camera: Camera): void {
     const { style } = node.domElement;
     const display = object.visible ? "" : "none";
-    if (style.display !== display) style.display = display;
+    if (style.display !== display) {
+      style.display = display;
+      this.#changed = true;
+    }
     if (!object.visible) return;
 
     const isSprite = object instanceof Sprite || object instanceof CSS3DSprite;
@@ -232,7 +337,8 @@ export class C3RRenderer {
       ? this.#spriteMatrix(object, node, camera)
       : object.matrix.elements;
 
-    this.#setPose(node, matrix);
+    // A sprite turns with the camera, which shadows don't follow
+    if (this.#setPose(node, matrix) && !isSprite) this.#changed = true;
 
     this.#syncChildren(object, node, camera);
 
@@ -248,11 +354,12 @@ export class C3RRenderer {
   }
 
   // Most nodes hold still, a new Transform each frame is the slow part
-  #setPose(target: C3R.Group | C3R.Camera, elements: number[]): void {
+  #setPose(target: C3R.Group | C3R.Camera, elements: number[]): boolean {
     const last = this.#poses.get(target);
-    if (last?.every((v, i) => v === elements[i])) return;
+    if (last?.every((v, i) => v === elements[i])) return false;
     target.transform = C3R.Transform.matrix(elements);
     this.#poses.set(target, [...elements]);
+    return true;
   }
 
   #spriteMatrix(object: Object3D, node: C3R.Group, camera: Camera): number[] {
@@ -284,12 +391,15 @@ export class C3RRenderer {
       if (!childNode) {
         childNode = createNode(child);
         node.addChild(childNode);
+        this.#changed = true;
       }
       current.set(child, childNode);
     }
 
     for (const [child, childNode] of previous) {
-      if (!current.has(child)) node.removeChild(childNode);
+      if (current.has(child)) continue;
+      node.removeChild(childNode);
+      this.#changed = true;
     }
 
     this.#children.set(node, current);
@@ -304,7 +414,7 @@ export class C3RRenderer {
     const { index, attributes, drawRange } = geometry;
     const { position, uv } = attributes;
     if (!position) return;
-    const normal = this.#shading ? attributes.normal : undefined;
+    const normal = this.shading ? attributes.normal : undefined;
 
     const total = index ? index.count : position.count;
 
@@ -355,9 +465,45 @@ export class C3RRenderer {
         const options = maps[i] ? {} : { getDomSize: flatDomSize };
         return { node, polygons: node.addFaces(builder.faces(i), options) };
       });
-      state = { key, groups };
+      // The node keeps its caster until it's replaced
+      state = { key, groups, caster: state?.caster ?? null };
       state.groups.forEach((g) => node.addChild(g.node));
       this.#meshes.set(node, state);
+      this.#changed = true;
+    }
+
+    if (this.#shadowLight && mesh.castShadow && state.fitted === undefined)
+      state.fitted = casterOf(geometry);
+    const caster =
+      this.#shadowLight &&
+      mesh.castShadow &&
+      state.fitted &&
+      !(
+        this.#shadowLight.position &&
+        // The core can't cast from there, three.js lights the scene anyway
+        C3R.holdsLight(state.fitted, node, this.#shadowLight.position)
+      )
+        ? state.fitted
+        : null;
+    if (state.caster !== caster) {
+      node.shadowCaster = state.caster = caster;
+      this.#changed = true;
+    }
+
+    const shadows =
+      this.#shadowLight && mesh.receiveShadow
+        ? { opacity: this.#shadowOpacity(mesh), blur: this.#shadowLight.blur }
+        : null;
+    if (
+      state.receiver?.shadows?.opacity !== shadows?.opacity ||
+      state.receiver?.shadows?.blur !== shadows?.blur
+    ) {
+      state.receiver ??= new C3R.Material();
+      state.receiver.shadows = shadows;
+      const material = shadows && state.receiver;
+      for (const { polygons } of state.groups)
+        for (const polygon of polygons) polygon.material = material;
+      this.#changed = true;
     }
 
     ranges.forEach((r, i) => {
@@ -410,8 +556,9 @@ export class C3RRenderer {
 
     const target = state.material;
     node.material = target;
-    target.shading = this.#shading ? shadingOf(material) : null;
-    target.specular = this.#specular ? specularOf(material) : null;
+    target.shading = this.shading ? shadingOf(material) : null;
+    target.specular =
+      this.shading && this.specular ? specularOf(material) : null;
 
     const { map } = material;
     const image: unknown = map?.image;
diff --git a/packages/c3r-three/test/C3RRenderer.test.ts b/packages/c3r-three/test/C3RRenderer.test.ts
index 3dece6d..631eeb5 100644
--- a/packages/c3r-three/test/C3RRenderer.test.ts
+++ b/packages/c3r-three/test/C3RRenderer.test.ts
@@ -1,8 +1,9 @@
-import { expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 import { mat4 } from "gl-matrix";
 import {
   AmbientLight,
   BoxGeometry,
+  CylinderGeometry,
   DirectionalLight,
   DoubleSide,
   Group,
@@ -12,13 +13,15 @@ import {
   MeshStandardMaterial,
   OrthographicCamera,
   PerspectiveCamera,
+  PointLight,
   Scene,
+  SphereGeometry,
   Sprite,
   SpriteMaterial,
   Texture,
   Vector3,
 } from "three";
-import { cssText, styleHTML } from "c3r";
+import { Container, cssText, styleHTML } from "c3r";
 import { C3RRenderer, CSS3DObject } from "../src/C3RRenderer.js";
 
 const materialRule = (element: Element) => {
@@ -465,3 +468,149 @@ it("leaves out lights that give no light", () => {
   expect(style.getPropertyValue("--c3r-light-ambient")).toBe("0");
   expect(Number(style.getPropertyValue("--c3r-light-y"))).toBeCloseTo(1, 5);
 });
+
+it("maps the first point light", () => {
+  const scene = new Scene();
+  const point = new PointLight(0xffffff, 20);
+  point.position.set(1, 2, 3);
+  const group = new Group();
+  group.position.set(10, 0, 0);
+  group.add(point);
+  const directional = new DirectionalLight(0xffffff, 2);
+  scene.add(group, directional);
+  scene.updateMatrixWorld();
+  const renderer = new C3RRenderer({ shading: true });
+  renderer.render(scene, new PerspectiveCamera());
+  const { style } = renderer.domElement.firstElementChild as HTMLElement;
+  const value = (name: string) =>
+    Number(style.getPropertyValue(`--c3r-light-${name}`));
+  expect([value("point-x"), value("point-y"), value("point-z")]).toEqual([
+    11, 2, 3,
+  ]);
+  expect(value("intensity")).toBeCloseTo(20 / Math.PI, 5);
+});
+
+describe("shadows", () => {
+  // A ball over a lit floor, its top face at y = 0
+  const setup = () => {
+    const scene = new Scene();
+    scene.add(new AmbientLight(0xffffff, 1));
+    const light = new DirectionalLight(0xffffff, 3);
+    light.position.set(0, 10, 0);
+    light.castShadow = true;
+    const floor = new Mesh(
+      new BoxGeometry(20, 1, 20).translate(0, -0.5, 0),
+      new MeshPhongMaterial(),
+    );
+    floor.receiveShadow = true;
+    const ball = new Mesh(new SphereGeometry(1), new MeshPhongMaterial());
+    ball.position.set(0, 3, 0);
+    ball.castShadow = true;
+    scene.add(light, floor, ball);
+    scene.updateMatrixWorld();
+    const renderer = new C3RRenderer({ shading: true, shadows: true });
+    const camera = new PerspectiveCamera();
+    const render = () => {
+      scene.updateMatrixWorld();
+      renderer.render(scene, camera);
+    };
+    const layer = () =>
+      renderer.domElement.querySelector<HTMLElement>(".c3r-shadow");
+    return { light, ball, renderer, render, layer };
+  };
+  const points = (layer: HTMLElement) =>
+    layer.querySelector<HTMLElement>("div")!.style.clipPath.split(",").length;
+
+  it("casts from a light that casts, while shading and shadows are on", () => {
+    const { light, renderer, render, layer } = setup();
+    light.castShadow = false;
+    render();
+    expect(layer()).toBeNull();
+    light.castShadow = true;
+    render();
+    // The directional light's share over the ambient
+    expect(Number(layer()!.style.opacity)).toBeCloseTo(3 / 4, 5);
+    expect(layer()!.style.filter).toBe("");
+    renderer.shadows = { blur: 1 };
+    render();
+    expect(layer()!.style.filter).toMatch(/^blur\(/);
+    renderer.shadows = false;
+    render();
+    expect(layer()).toBeNull();
+    renderer.shadows = true;
+    renderer.shading = false;
+    render();
+    expect(layer()).toBeNull();
+  });
+
+  it("fits a sphere to a sphere and a box to other geometry", () => {
+    const { ball, render, layer } = setup();
+    render();
+    expect(points(layer()!)).toBeGreaterThan(8);
+    ball.geometry = new BoxGeometry(2, 2, 2);
+    render();
+    expect(points(layer()!)).toBe(4);
+    // Flat ones fall back to a box
+    for (const flat of [
+      [1, 1, 0],
+      [0, 0, 1],
+    ]) {
+      ball.geometry = new CylinderGeometry(...flat);
+      expect(render).not.toThrow();
+    }
+  });
+
+  it("casts from the geometry's center", () => {
+    const moved = setup();
+    moved.ball.position.set(2, 3, 0);
+    moved.render();
+    const offset = setup();
+    offset.ball.geometry = new SphereGeometry(1).translate(2, 0, 0);
+    offset.render();
+    expect(offset.layer()!.innerHTML).toBe(moved.layer()!.innerHTML);
+  });
+
+  it("skips a caster around the point light", () => {
+    const { light, ball, render } = setup();
+    light.visible = false;
+    const point = new PointLight(0xffffff, 50);
+    point.castShadow = true;
+    ball.add(point);
+    expect(render).not.toThrow();
+    // On the surface, where rounding decides
+    for (let i = 1; i <= 20; i++) {
+      ball.rotation.set(i, 2 * i, 3 * i);
+      ball.scale.set(1 + i / 7, 1 + i / 11, 1 + i / 13);
+      const height = 0.5 + i / 17;
+      ball.geometry =
+        i % 2
+          ? new BoxGeometry(1.3, height, 0.7)
+          : new CylinderGeometry(0.6, 0.6, height);
+      point.position.set(0, height / 2, 0);
+      expect(render).not.toThrow();
+    }
+  });
+
+  it("drops the caster of a mesh rebuilt without one", () => {
+    const { ball, render, layer } = setup();
+    render();
+    ball.castShadow = false;
+    ball.geometry.attributes.position.needsUpdate = true;
+    render();
+    expect(layer()).toBeNull();
+  });
+
+  it("casts again only once something moved", () => {
+    const bake = vi.spyOn(Container.prototype, "bake");
+    const { ball, render } = setup();
+    const cast = () => bake.mock.lastCall![0]?.shadows;
+    render();
+    expect(cast()).toBe(true);
+    render();
+    expect(cast()).toBe(false);
+    ball.position.x = 1;
+    render();
+    expect(cast()).toBe(true);
+    bake.mockRestore();
+  });
+});
diff --git a/packages/c3r/README.md b/packages/c3r/README.md
index e8399d1..f8584ab 100644
--- a/packages/c3r/README.md
+++ b/packages/c3r/README.md
@@ -91,7 +91,7 @@ A shaded material's `specular = { intensity, shininess, map? }` adds a white Bli
 
 `group.lightGain`, a number or a `CssValue` that can read `Group.time`, multiplies the point light below the group. Run the `clock` on that group, on the root each frame restyles the scene.
 
-A group's `shadowCaster` blocks the point or directional light from polygons whose material has `shadows = { opacity, blur }`, `blur` in scene units. It is `{ shape: "sphere", radius }`, `{ shape: "cylinder", radius, height }` along the group's y axis, or `{ shape: "box", size: [x, y, z] }`, centred on the group's origin. `bake({ shadows: true })` projects it as a black layer, which darkens the ambient light too, and other bakes keep the shadows as cast. A shadow that moves is keyframed on the timeline of the tweens that move the light, the casters and that polygon, or follows a single hover transition. Casting throws when it can't follow them: tweens on several timelines, a tween that doesn't loop from the start, a loop each group plays on its own hover, loops that share no period within 8 of their cycles, an easing other than linear, a keyword or `cubic-bezier()`, a light inside a caster and a caster under a `Billboard`. A polygon under a `Billboard` takes no shadow, and a caster never darkens its own group nor a polygon it is behind. A page parsed in parts can start its animations apart, so hold them with `animation-play-state: paused` until it ends.
+A group's `shadowCaster` blocks the point or directional light from polygons whose material has `shadows = { opacity, blur }`, `blur` in scene units. It is `{ shape: "sphere", radius }`, `{ shape: "cylinder", radius, height }` along the group's y axis, or `{ shape: "box", size: [x, y, z] }`, centred on the group's origin or an optional `center` in its space. `bake({ shadows: true })` projects it as a black layer, which darkens the ambient light too, and other bakes keep the shadows as cast. A shadow that moves is keyframed on the timeline of the tweens that move the light, the casters and that polygon, or follows a single hover transition. Casting throws when it can't follow them: tweens on several timelines, a tween that doesn't loop from the start, a loop each group plays on its own hover, loops that share no period within 8 of their cycles, an easing other than linear, a keyword or `cubic-bezier()`, a light inside a caster, which `holdsLight(caster, group, position)` tells for a point light and a group at rest, and a caster under a `Billboard`. A polygon under a `Billboard` takes no shadow, and a caster never darkens its own group nor a polygon it is behind. A page parsed in parts can start its animations apart, so hold them with `animation-play-state: paused` until it ends.
 
 A `Billboard` undoes every rotation above it and its own, so turn a child group to spin it. A scale that isn't uniform, a shear, or a mirror in a tween skews it.
 
diff --git a/packages/c3r/src/C3R.ts b/packages/c3r/src/C3R.ts
index 5efaf79..32fa783 100644
--- a/packages/c3r/src/C3R.ts
+++ b/packages/c3r/src/C3R.ts
@@ -19,7 +19,7 @@ export { type BakeOptions, Container, type Lights } from "./dom/Container.js";
 export { Polygon, type PolygonOptions } from "./dom/Polygon.js";
 export { ElementObject } from "./dom/ElementObject.js";
 export { Billboard } from "./dom/Billboard.js";
-export type { ShadowCaster } from "./dom/Shadows.js";
+export { holdsLight, type ShadowCaster } from "./dom/Shadows.js";
 export {
   ParticleSystem,
   type ParticleSystemOptions,
diff --git a/packages/c3r/src/dom/Group.ts b/packages/c3r/src/dom/Group.ts
index 6364b71..8ec6068 100644
--- a/packages/c3r/src/dom/Group.ts
+++ b/packages/c3r/src/dom/Group.ts
@@ -132,13 +132,14 @@ export class Group extends Object3D {
           : caster.shape === "sphere"
             ? [caster.radius]
             : [NaN];
+    const center = caster.center && vector(caster.center);
     if (!sizes.every((n) => n > 0 && Number.isFinite(n)))
       throw new RangeError(`Invalid shadow caster ${JSON.stringify(caster)}`);
-    this.#shadowCaster = Object.freeze(
-      caster.shape === "box"
-        ? { shape: "box", size: Object.freeze(sizes) }
-        : { ...caster },
-    );
+    this.#shadowCaster = Object.freeze({
+      ...caster,
+      ...(caster.shape === "box" && { size: Object.freeze(sizes) }),
+      ...(center && { center: Object.freeze(center) }),
+    } as ShadowCaster);
   }
 
   get children(): readonly Object3D[] {
diff --git a/packages/c3r/src/dom/Shadows.ts b/packages/c3r/src/dom/Shadows.ts
index 0b67c2b..1aaacff 100644
--- a/packages/c3r/src/dom/Shadows.ts
+++ b/packages/c3r/src/dom/Shadows.ts
@@ -31,15 +31,16 @@ import { Group } from "./Group.js";
 import { matrixOf, type Object3D, parents } from "./Object3D.js";
 import type { Polygon } from "./Polygon.js";
 
-// Centred on the group's origin, a cylinder along its y axis
-export type ShadowCaster =
+// Centred on center in the group's space, a cylinder along its y axis
+export type ShadowCaster = { readonly center?: ReadonlyVec3 } & (
   | { readonly shape: "sphere"; readonly radius: number }
   | {
       readonly shape: "cylinder";
       readonly radius: number;
       readonly height: number;
     }
-  | { readonly shape: "box"; readonly size: ReadonlyVec3 };
+  | { readonly shape: "box"; readonly size: ReadonlyVec3 }
+);
 
 export type ShadowLight =
   | {
@@ -130,25 +131,54 @@ const across = (d: vec3): [vec3, vec3] => {
   return [a, vec3.cross(vec3.create(), d, a)];
 };
 
+const placed = (caster: ShadowCaster, group: ReadonlyMat4): ReadonlyMat4 =>
+  caster.center ? mat4.translate(mat4.create(), group, caster.center) : group;
+
+const sphereRadius = (radius: number, m: ReadonlyMat4) =>
+  radius *
+  Math.cbrt(Math.abs(mat3.determinant(mat3.fromMat4(mat3.create(), m))));
+
+function holds(caster: ShadowCaster, m: ReadonlyMat4, at: ReadonlyVec3) {
+  if (caster.shape === "sphere") {
+    const center = vec3.transformMat4(vec3.create(), [0, 0, 0], m);
+    const d = vec3.length(vec3.sub(vec3.create(), center, at));
+    return d <= sphereRadius(caster.radius, m);
+  }
+  const l = vec3.transformMat4(
+    vec3.create(),
+    at,
+    mat4.invert(mat4.create(), m) ?? mat4.create(),
+  );
+  return caster.shape === "box"
+    ? Array.from(caster.size).every((n, i) => Math.abs(l[i]) < n / 2)
+    : Math.hypot(l[0], l[2]) < caster.radius &&
+        Math.abs(l[1]) < caster.height / 2;
+}
+
+// Whether a point light there is inside the caster on the group at rest, which
+// casting throws for. It computes like casting does, so they agree on the surface
+export const holdsLight = (
+  caster: ShadowCaster,
+  group: Group,
+  position: ReadonlyVec3,
+): boolean =>
+  holds(
+    caster,
+    placed(caster, worldAt(chainOf(group), STATIC.pose, 0)),
+    vec3.clone(position),
+  );
+
 function casterPoints(
   caster: ShadowCaster,
-  m: ReadonlyMat4,
+  group: ReadonlyMat4,
   source: Source,
 ): vec3[] {
+  const m = placed(caster, group);
   // A directional light is infinitely far, so no caster contains it
-  const local = () =>
-    "at" in source
-      ? vec3.transformMat4(
-          vec3.create(),
-          source.at,
-          mat4.invert(mat4.create(), m) ?? mat4.create(),
-        )
-      : vec3.fromValues(Infinity, Infinity, Infinity);
-  const inside = new RangeError("The light is inside a shadow caster");
+  if ("at" in source && holds(caster, m, source.at))
+    throw new RangeError("The light is inside a shadow caster");
   if (caster.shape === "box") {
     const half = Array.from(caster.size, (n) => n / 2);
-    const l = local();
-    if (half.every((n, i) => Math.abs(l[i]) < n)) throw inside;
     const corners = Array.from(
       { length: 8 },
       (_, i) => half.map((n, k) => (i & (1 << k) ? n : -n)) as vec3,
@@ -157,24 +187,18 @@ function casterPoints(
   }
   if (caster.shape === "cylinder") {
     const { radius, height } = caster;
-    const l = local();
-    if (Math.hypot(l[0], l[2]) < radius && Math.abs(l[1]) < height / 2)
-      throw inside;
     const cap = (y: number) =>
       ring(vec3.fromValues(0, y, 0), [1, 0, 0], [0, 0, 1], radius);
     return transformed([...cap(-height / 2), ...cap(height / 2)], m);
   }
   const center = vec3.transformMat4(vec3.create(), [0, 0, 0], m);
-  const radius =
-    caster.radius *
-    Math.cbrt(Math.abs(mat3.determinant(mat3.fromMat4(mat3.create(), m))));
+  const radius = sphereRadius(caster.radius, m);
   if ("along" in source) {
     const [a, b] = across(source.along);
     return ring(center, a, b, radius);
   }
   const away = vec3.sub(vec3.create(), center, source.at);
   const d = vec3.length(away);
-  if (d <= radius) throw inside;
   vec3.scale(away, away, 1 / d);
   const [a, b] = across(away);
   const outline = vec3.scaleAndAdd(
@@ -251,12 +275,50 @@ function clipped(shape: Point[], [x0, y0]: Point, [x1, y1]: Point): Point[] {
   }, shape);
 }
 
+type Sphere = { center: vec3; radius: number };
+
+const boundOf = (points: readonly vec3[]): Sphere => {
+  const min = vec3.clone(points[0]);
+  const max = vec3.clone(points[0]);
+  for (const p of points) {
+    vec3.min(min, min, p);
+    vec3.max(max, max, p);
+  }
+  const center = vec3.lerp(vec3.create(), min, max, 0.5);
+  const radius = Math.max(...points.map((p) => vec3.distance(p, center)));
+  return { center, radius };
+};
+
+// Whether the receiver's bounds meet the shadow volume of the caster's, a cheap cull
+function reaches(source: Source, caster: Sphere, receiver: Sphere): boolean {
+  const { radius } = caster;
+  if (!("at" in source)) {
+    const v = vec3.sub(vec3.create(), receiver.center, caster.center);
+    const t = vec3.dot(v, source.along);
+    const off = vec3.length(vec3.scaleAndAdd(v, v, source.along, -t));
+    return t + receiver.radius >= -radius && off <= radius + receiver.radius;
+  }
+  const axis = vec3.sub(vec3.create(), caster.center, source.at);
+  const distance = vec3.length(axis);
+  if (distance <= radius) return true;
+  vec3.scale(axis, axis, 1 / distance);
+  const v = vec3.sub(vec3.create(), receiver.center, source.at);
+  const t = vec3.dot(v, axis);
+  if (t + receiver.radius < distance - radius) return false;
+  const off = vec3.length(vec3.scaleAndAdd(v, v, axis, -t));
+  const sin = radius / distance;
+  const cos = Math.sqrt(1 - sin * sin);
+  return off * cos <= Math.max(t, 0) * sin + receiver.radius;
+}
+
 // On the polygon's element in pixels, null where the polygon gets no shadow
 function shadowOn(
   polygon: ReadonlyMat4,
   source: Source,
   points: vec3[],
   box: [Point, Point],
+  inner: [Point, Point],
+  blur: number,
 ): Point[] | null {
   const origin = vec3.fromValues(polygon[12], polygon[13], polygon[14]);
   const ex = vec3.fromValues(polygon[0], polygon[1], polygon[2]);
@@ -298,7 +360,15 @@ function shadowOn(
   });
   // Corners that fly off near the light's height would blend badly, and only
   // the part over the polygon shows
-  const shape = clipped(hull(onPlane), ...box);
+  const outline = hull(onPlane);
+  // A caster touching the polygon from the side only darkens its own footprint,
+  // which a blur would spread over the polygon
+  if (
+    Math.max(...lit.map(height)) <= blur &&
+    clipped(outline, ...inner).length < 3
+  )
+    return null;
+  const shape = clipped(outline, ...box);
   return shape.length >= 3 ? shape : null;
 }
 
@@ -549,7 +619,8 @@ export function castShadows(
         ),
       ),
     );
-    return { driver, lightAt, points };
+    const bounds = points.map((list) => list.map(boundOf));
+    return { driver, lightAt, points, bounds };
   };
   const sampled = (tweens: Tween[]) => {
     const key = tweens.map((t) => t.className).join();
@@ -557,7 +628,7 @@ export function castShadows(
     return cache.get(key)!;
   };
   receivers.forEach(({ polygon, shadows }, r) => {
-    const { driver, lightAt, points } = sampled([
+    const { driver, lightAt, points, bounds } = sampled([
       ...new Set([...shared, ...tweensIn(receiverChains[r])]),
     ]);
     const { pose, positions } = driver;
@@ -565,9 +636,8 @@ export function castShadows(
     const [width, height] = ["--c3r-width", "--c3r-height"].map((name) =>
       parseFloat(polygon.domElement.style.getPropertyValue(name)),
     );
-    const blurPx =
-      (shadows!.blur ?? 0) /
-      Math.hypot(worlds[0][0], worlds[0][1], worlds[0][2]);
+    const blur = shadows!.blur ?? 0;
+    const blurPx = blur / Math.hypot(worlds[0][0], worlds[0][1], worlds[0][2]);
     const pad = Math.ceil(blurPx * 3);
     // Out past where the blur reaches in
     const margin = 2 * pad + 1;
@@ -575,11 +645,31 @@ export function castShadows(
       [-margin, -margin],
       [width + margin, height + margin],
     ];
+    const inset = Math.min(1, width / 2, height / 2);
+    const inner: [Point, Point] = [
+      [inset, inset],
+      [width - inset, height - inset],
+    ];
+    const corners = [
+      box[0],
+      [box[1][0], box[0][1]],
+      box[1],
+      [box[0][0], box[1][1]],
+    ];
+    const reach = worlds.map((m) =>
+      boundOf(
+        corners.map(([x, y]) =>
+          vec3.transformMat4(vec3.create(), [x, y, 0], m),
+        ),
+      ),
+    );
     const layers = casters.flatMap((caster, c) => {
       // A convex caster can only darken its own faces wrongly
       if (receiverChains[r].includes(caster)) return [];
       const shapes = positions.map((_, i) =>
-        shadowOn(worlds[i], lightAt[i], points[c][i], box),
+        reaches(lightAt[i], bounds[c][i], reach[i])
+          ? shadowOn(worlds[i], lightAt[i], points[c][i], box, inner, blur)
+          : null,
       );
       // One that never reaches the polygon would only cost paint time
       if (!shapes.some(Boolean)) return [];
diff --git a/packages/c3r/test/c3r.test.ts b/packages/c3r/test/c3r.test.ts
index 6d04379..a8ccea3 100644
--- a/packages/c3r/test/c3r.test.ts
+++ b/packages/c3r/test/c3r.test.ts
@@ -1501,6 +1501,40 @@ describe("shadows", () => {
     }
   });
 
+  it("casts a caster from its center", async () => {
+    const { container, floor } = scene(
+      { shape: "box", size: [10, 10, 10], center: [0, 25, 0] },
+      [0, 25, 0],
+    );
+    await container.bake(cast);
+    for (const p of corners(floor, layerOf(floor).style.clipPath)) {
+      expect(Math.abs(p[0])).toBeCloseTo((5 * 100) / 45, 1);
+      expect(Math.abs(p[2])).toBeCloseTo((5 * 100) / 45, 1);
+    }
+  });
+
+  it("gives no shadow to a polygon a caster only touches from the side", async () => {
+    // Its top in the floor's plane, along its edge
+    const { container, floor } = scene(
+      { shape: "box", size: [10, 10, 10] },
+      [105, -5, 0],
+    );
+    floor.material!.shadows = { opacity: 0.5, blur: 2 };
+    await container.bake(cast);
+    expect(floor.domElement.querySelector(".c3r-shadow")).toBeNull();
+  });
+
+  it("keeps a blurred shadow that ends just past a polygon", async () => {
+    const { container, floor } = scene(
+      { shape: "box", size: [10, 10, 10] },
+      [106, 50, 0],
+    );
+    container.lights = { directional: { direction: [0, -1, 0], intensity: 1 } };
+    floor.material!.shadows = { opacity: 0.5, blur: 2 };
+    await container.bake(cast);
+    expect(floor.domElement.querySelector(".c3r-shadow")).not.toBeNull();
+  });
+
   it("keeps shadows as cast until a bake casts them again", async () => {
     const { container, floor, group } = scene(
       { shape: "box", size: [10, 10, 10] },

From 8f92825cd36f452dba67f7cc481426e37d7e58a6 Mon Sep 17 00:00:00 2001
From: K-Adam <kecskes.adam@outlook.com>
Date: Wed, 4 Nov 2026 21:11:47 +0100
Subject: [PATCH 3/3] Bump version

---
 package-lock.json               | 6 +++---
 packages/c3r-three/package.json | 4 ++--
 packages/c3r/README.md          | 2 +-
 packages/c3r/package.json       | 2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a55f617..5e91220 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2080,7 +2080,7 @@
       }
     },
     "packages/c3r": {
-      "version": "0.5.0",
+      "version": "0.6.0",
       "license": "MIT",
       "dependencies": {
         "gl-matrix": "^3.4.4"
@@ -2091,10 +2091,10 @@
       }
     },
     "packages/c3r-three": {
-      "version": "0.5.0",
+      "version": "0.6.0",
       "license": "MIT",
       "dependencies": {
-        "c3r": "^0.5.0"
+        "c3r": "^0.6.0"
       },
       "devDependencies": {
         "@types/three": "^0.186.0",
diff --git a/packages/c3r-three/package.json b/packages/c3r-three/package.json
index 8060645..5ad1131 100644
--- a/packages/c3r-three/package.json
+++ b/packages/c3r-three/package.json
@@ -1,6 +1,6 @@
 {
   "name": "c3r-three",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "three.js CSS3DRenderer built on C3R, with geometry and texture support",
   "keywords": [
     "three",
@@ -34,7 +34,7 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "c3r": "^0.5.0"
+    "c3r": "^0.6.0"
   },
   "peerDependencies": {
     "@types/three": ">=0.160.0",
diff --git a/packages/c3r/README.md b/packages/c3r/README.md
index f8584ab..dfd2906 100644
--- a/packages/c3r/README.md
+++ b/packages/c3r/README.md
@@ -17,7 +17,7 @@ import { Container, Polygon } from "c3r";
 Or with a script tag, using [GitHub Releases](https://github.com/K-Adam/CSS3D-Renderer/releases) or a CDN:
 
 ```html
-<script src="https://unpkg.com/c3r@0.5/dist/c3r.min.js"></script>
+<script src="https://unpkg.com/c3r@0.6/dist/c3r.min.js"></script>
 ```
 
 It bundles gl-matrix and exposes a `C3R` global.
diff --git a/packages/c3r/package.json b/packages/c3r/package.json
index ec532f4..cd5ff7e 100644
--- a/packages/c3r/package.json
+++ b/packages/c3r/package.json
@@ -1,6 +1,6 @@
 {
   "name": "c3r",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "CSS 3D Renderer",
   "keywords": [
     "typescript",