diff --git a/README.md b/README.md
index 83ac32e50f..13ccf9f28e 100644
--- a/README.md
+++ b/README.md
@@ -241,7 +241,12 @@ for features added since the latest npm release.
 
 ## Showcases
 
-[![Illustrations of the DX-Ball sound-pan, Notion clipboard-bridge, and TH04 bullet-ring showcases](docs/assets/rea-showcases.png)](https://rea.tools/showcase/)
+<a href="https://rea.tools/showcase/">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="docs/assets/rea-showcases-dark.svg" />
+    <img alt="Illustrations of the DX-Ball sound-pan, Notion clipboard-bridge, and TH04 bullet-ring showcases" src="docs/assets/rea-showcases.svg" />
+  </picture>
+</a>
 
 ### DX-Ball: reconstruct a sound-pan calculation
 
diff --git a/docs/assets/rea-showcases-dark.svg b/docs/assets/rea-showcases-dark.svg
new file mode 100644
index 0000000000..0af56cc08a
--- /dev/null
+++ b/docs/assets/rea-showcases-dark.svg
@@ -0,0 +1,118 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="960" height="263" viewBox="0 0 960 263" role="img" aria-labelledby="title desc">
+  <title id="title">REA showcases</title>
+  <desc id="desc">Three illustrations. A brick-breaker screen with a speaker on each side stands for the DX-Ball sound-pan showcase. A browser window joined by a wire to a clipboard stands for the Notion clipboard-bridge showcase. A ring of 24 dots with one orange dot around a dark centre stands for the TH04 bullet-ring showcase.</desc>
+  <rect width="960" height="263" fill="#11111b"/>
+  <rect x="43" y="16.5" width="262" height="235.5" fill="#181825"/>
+  <rect x="354" y="14.5" width="258" height="237.5" fill="#181825"/>
+  <rect x="664" y="16.5" width="260" height="235.5" fill="#181825"/>
+  <g id="dx-ball">
+    <rect x="108.5" y="54" width="140" height="160" fill="#000000" fill-opacity="0.45"/>
+    <rect x="106.85" y="52.1" width="136" height="157" fill="#181825" stroke="#cdd6f4" stroke-width="3.7"/>
+    <rect x="110.9" y="55.9" width="128.2" height="149.6" fill="none" stroke="#6c7086" stroke-width="2.2"/>
+    <rect x="112.6" y="58.5" width="28.4" height="14.3" fill="#000000" fill-opacity="0.45"/>
+    <rect x="145.6" y="58.5" width="28.4" height="14.3" fill="#000000" fill-opacity="0.45"/>
+    <rect x="178.6" y="58.5" width="28.4" height="14.3" fill="#000000" fill-opacity="0.45"/>
+    <rect x="211.6" y="58.5" width="28.4" height="14.3" fill="#000000" fill-opacity="0.45"/>
+    <rect x="112.6" y="77.39999999999999" width="28.4" height="14.3" fill="#000000" fill-opacity="0.45"/>
+    <rect x="145.6" y="77.39999999999999" width="28.4" height="14.3" fill="#000000" fill-opacity="0.45"/>
+    <rect x="178.6" y="77.39999999999999" width="28.4" height="14.3" fill="#000000" fill-opacity="0.45"/>
+    <rect x="211.6" y="77.39999999999999" width="28.4" height="14.3" fill="#000000" fill-opacity="0.45"/>
+    <rect x="111.8" y="57.900000000000006" width="26.2" height="11.9" fill="#45475a" stroke="#cdd6f4" stroke-width="2.4"/>
+    <rect x="144.79999999999998" y="57.900000000000006" width="26.2" height="11.9" fill="#45475a" stroke="#cdd6f4" stroke-width="2.4"/>
+    <rect x="177.79999999999998" y="57.900000000000006" width="26.2" height="11.9" fill="#45475a" stroke="#cdd6f4" stroke-width="2.4"/>
+    <rect x="210.79999999999998" y="57.900000000000006" width="26.2" height="11.9" fill="#45475a" stroke="#cdd6f4" stroke-width="2.4"/>
+    <rect x="111.8" y="75.0" width="26.2" height="11.9" fill="#45475a" stroke="#cdd6f4" stroke-width="2.4"/>
+    <rect x="144.79999999999998" y="75.0" width="26.2" height="11.9" fill="#45475a" stroke="#cdd6f4" stroke-width="2.4"/>
+    <rect x="177.79999999999998" y="75.0" width="26.2" height="11.9" fill="#45475a" stroke="#cdd6f4" stroke-width="2.4"/>
+    <rect x="210.79999999999998" y="75.0" width="26.2" height="11.9" fill="#45475a" stroke="#cdd6f4" stroke-width="2.4"/>
+    <ellipse cx="173.4" cy="157.2" rx="8.4" ry="8.2" fill="#000000" fill-opacity="0.45"/>
+    <ellipse cx="171.9" cy="154.5" rx="7.3" ry="7.2" fill="#585b70" stroke="#cdd6f4" stroke-width="2"/>
+    <rect x="165.5" y="149.5" width="3.2" height="2.6" fill="#a6adc8"/>
+    <rect x="145.5" y="195.2" width="57.6" height="12.4" fill="#585b70" stroke="#cdd6f4" stroke-width="2.2"/>
+    <rect x="144.5" y="204" width="59.3" height="6.5" fill="#cdd6f4"/>
+    <g transform="translate(0 0)">
+      <path d="M61.5 117.5H69.6L78 108.5V141.2L69.6 132.8H61.5Z" fill="#585b70" stroke="#cdd6f4" stroke-width="2.3" stroke-linejoin="miter"/>
+      <path d="M78.1 106V143" stroke="#cdd6f4" stroke-width="3.4" fill="none"/>
+      <g fill="none" stroke="#89b4fa" stroke-width="2.2" stroke-linecap="butt" stroke-dasharray="2.6 1.4">
+        <path d="M84.8 118.2Q87.6 125 84.8 131.8"/>
+        <path d="M90.2 112.4Q94.5 125 90.2 137.6"/>
+        <path d="M95.8 108.2Q101.5 125 95.8 141.8"/>
+      </g>
+    </g>
+    <g transform="translate(190 0)">
+      <path d="M61.5 117.5H69.6L78 108.5V141.2L69.6 132.8H61.5Z" fill="#585b70" stroke="#cdd6f4" stroke-width="2.3" stroke-linejoin="miter"/>
+      <path d="M78.1 106V143" stroke="#cdd6f4" stroke-width="3.4" fill="none"/>
+      <g fill="none" stroke="#89b4fa" stroke-width="2.2" stroke-linecap="butt" stroke-dasharray="2.6 1.4">
+        <path d="M84.8 118.2Q87.6 125 84.8 131.8"/>
+        <path d="M90.2 112.4Q94.5 125 90.2 137.6"/>
+        <path d="M95.8 108.2Q101.5 125 95.8 141.8"/>
+      </g>
+    </g>
+  </g>
+  <g id="clipboard-bridge">
+    <rect x="390.3" y="83.6" width="100.6" height="82.6" fill="#000000" fill-opacity="0.45"/>
+    <rect x="387.7" y="81.2" width="97.8" height="79.7" fill="#181825" stroke="#cdd6f4" stroke-width="2.9"/>
+    <rect x="389.2" y="82.7" width="94.9" height="13" fill="#45475a"/>
+    <path d="M387.7 97H485.5" stroke="#cdd6f4" stroke-width="3.1"/>
+    <rect x="394.7" y="86.6" width="4.6" height="5" fill="#fab387"/>
+    <rect x="402.7" y="86.6" width="4.6" height="5" fill="#f9e2af"/>
+    <rect x="410.8" y="86.6" width="4.6" height="5" fill="#a6adc8"/>
+    <rect x="398" y="107.4" width="10.6" height="9.4" fill="#7f849c"/>
+    <rect x="412.4" y="107.9" width="16.8" height="6" fill="#7f849c"/>
+    <rect x="434" y="107.9" width="42.4" height="6.2" fill="#7f849c"/>
+    <rect x="412.2" y="117.3" width="64" height="2.6" fill="#6c7086"/>
+    <rect x="412.2" y="124.9" width="55.3" height="3.6" fill="#6c7086"/>
+    <rect x="412.2" y="133.2" width="50.3" height="3.8" fill="#6c7086"/>
+    <rect x="412.2" y="142" width="13.2" height="3.4" fill="#6c7086"/>
+    <rect x="430" y="142" width="14.4" height="3.4" fill="#6c7086"/>
+    <rect x="449" y="142" width="27.6" height="3.2" fill="#313244"/>
+    <rect x="412.2" y="150" width="12.6" height="2.9" fill="#6c7086"/>
+    <path d="M455.2 162V187H476M497 187H508.2V163.2H523" fill="none" stroke="#89b4fa" stroke-width="3" stroke-linejoin="miter"/>
+    <rect x="477.5" y="178.3" width="23" height="21" fill="#000000" fill-opacity="0.45"/>
+    <path d="M484.7 173.2V177" stroke="#cdd6f4" stroke-width="2.2"/>
+    <rect x="476.4" y="177.5" width="20.2" height="18.1" fill="#585b70" stroke="#cdd6f4" stroke-width="2.2"/>
+    <rect x="481.4" y="178.6" width="4.6" height="16" fill="#313244"/>
+    <rect x="477.2" y="191" width="4.6" height="4.4" fill="#f9e2af"/>
+    <rect x="481.6" y="183.8" width="3.4" height="3" fill="#fab387"/>
+    <rect x="525.4" y="114.6" width="60.6" height="75" fill="#000000" fill-opacity="0.45"/>
+    <rect x="524.7" y="112.5" width="56.4" height="69.4" fill="#45475a" stroke="#cdd6f4" stroke-width="3"/>
+    <rect x="531.6" y="118.6" width="42.3" height="53.4" fill="#1e1e2e"/>
+    <rect x="531.6" y="172" width="42.3" height="8.4" fill="#45475a"/>
+    <path d="M531.6 175.8H575" stroke="#cdd6f4" stroke-width="1.8" stroke-opacity="0.8"/>
+    <path d="M547.4 103.3H556.6V106.2H559.6V109.2H564.9V120.3H540.1V109.2H545V106.2H547.4Z" fill="#585b70" stroke="#cdd6f4" stroke-width="2" stroke-linejoin="miter"/>
+    <rect x="549.4" y="108.4" width="2.8" height="1.9" fill="#181825"/>
+    <rect x="536.6" y="131.8" width="32.3" height="3.4" fill="#7f849c"/>
+    <rect x="536.6" y="138.8" width="32.3" height="3.4" fill="#7f849c"/>
+    <rect x="536.6" y="145.8" width="32.3" height="3.4" fill="#7f849c"/>
+    <rect x="536.6" y="152.8" width="26.8" height="3.4" fill="#7f849c"/>
+    <rect x="536.6" y="159.8" width="14.6" height="3.4" fill="#7f849c"/>
+  </g>
+  <g id="bullet-ring">
+    <circle cx="783" cy="74.5" r="3.8" fill="#89b4fa"/>
+    <circle cx="798" cy="72" r="3.8" fill="#89b4fa"/>
+    <circle cx="812.5" cy="74.5" r="3.8" fill="#89b4fa"/>
+    <circle cx="769.5" cy="81" r="3.8" fill="#89b4fa"/>
+    <circle cx="826.5" cy="81" r="3.8" fill="#89b4fa"/>
+    <circle cx="756.5" cy="90" r="3.8" fill="#89b4fa"/>
+    <circle cx="839" cy="90" r="3.8" fill="#89b4fa"/>
+    <circle cx="746.5" cy="103" r="3.8" fill="#89b4fa"/>
+    <circle cx="849" cy="103" r="3.8" fill="#89b4fa"/>
+    <circle cx="740.5" cy="117" r="3.8" fill="#89b4fa"/>
+    <circle cx="854.5" cy="117" r="3.8" fill="#89b4fa"/>
+    <circle cx="738" cy="134" r="3.8" fill="#89b4fa"/>
+    <circle cx="856.5" cy="133.5" r="3.8" fill="#89b4fa"/>
+    <circle cx="741" cy="149" r="3.8" fill="#89b4fa"/>
+    <circle cx="854" cy="149" r="3.8" fill="#89b4fa"/>
+    <circle cx="747.5" cy="163" r="3.8" fill="#89b4fa"/>
+    <circle cx="848" cy="163" r="3.8" fill="#89b4fa"/>
+    <circle cx="757.5" cy="175" r="3.8" fill="#89b4fa"/>
+    <circle cx="770" cy="184" r="3.8" fill="#89b4fa"/>
+    <circle cx="826.5" cy="184" r="3.8" fill="#89b4fa"/>
+    <circle cx="838.5" cy="175" r="3.8" fill="#89b4fa"/>
+    <circle cx="784" cy="191" r="3.8" fill="#89b4fa"/>
+    <circle cx="798" cy="192.5" r="3.8" fill="#89b4fa"/>
+    <circle cx="812" cy="190.5" r="3.8" fill="#89b4fa"/>
+    <circle cx="833.5" cy="109" r="4.1" fill="#fab387"/>
+    <circle cx="797.4" cy="133" r="10.9" fill="#cdd6f4"/>
+  </g>
+</svg>
diff --git a/docs/assets/rea-showcases.png b/docs/assets/rea-showcases.png
deleted file mode 100644
index b637ebb074..0000000000
Binary files a/docs/assets/rea-showcases.png and /dev/null differ
diff --git a/docs/assets/rea-showcases.svg b/docs/assets/rea-showcases.svg
new file mode 100644
index 0000000000..0413cbb212
--- /dev/null
+++ b/docs/assets/rea-showcases.svg
@@ -0,0 +1,118 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="960" height="263" viewBox="0 0 960 263" role="img" aria-labelledby="title desc">
+  <title id="title">REA showcases</title>
+  <desc id="desc">Three illustrations. A brick-breaker screen with a speaker on each side stands for the DX-Ball sound-pan showcase. A browser window joined by a wire to a clipboard stands for the Notion clipboard-bridge showcase. A ring of 24 dots with one orange dot around a dark centre stands for the TH04 bullet-ring showcase.</desc>
+  <rect width="960" height="263" fill="#fafbfb"/>
+  <rect x="43" y="16.5" width="262" height="235.5" fill="#f4f6f5"/>
+  <rect x="354" y="14.5" width="258" height="237.5" fill="#f4f6f5"/>
+  <rect x="664" y="16.5" width="260" height="235.5" fill="#f4f6f5"/>
+  <g id="dx-ball">
+    <rect x="108.5" y="54" width="140" height="160" fill="#000000" fill-opacity="0.27"/>
+    <rect x="106.85" y="52.1" width="136" height="157" fill="#f4f6f5" stroke="#191a1d" stroke-width="3.7"/>
+    <rect x="110.9" y="55.9" width="128.2" height="149.6" fill="none" stroke="#a5a6a9" stroke-width="2.2"/>
+    <rect x="112.6" y="58.5" width="28.4" height="14.3" fill="#000000" fill-opacity="0.27"/>
+    <rect x="145.6" y="58.5" width="28.4" height="14.3" fill="#000000" fill-opacity="0.27"/>
+    <rect x="178.6" y="58.5" width="28.4" height="14.3" fill="#000000" fill-opacity="0.27"/>
+    <rect x="211.6" y="58.5" width="28.4" height="14.3" fill="#000000" fill-opacity="0.27"/>
+    <rect x="112.6" y="77.39999999999999" width="28.4" height="14.3" fill="#000000" fill-opacity="0.27"/>
+    <rect x="145.6" y="77.39999999999999" width="28.4" height="14.3" fill="#000000" fill-opacity="0.27"/>
+    <rect x="178.6" y="77.39999999999999" width="28.4" height="14.3" fill="#000000" fill-opacity="0.27"/>
+    <rect x="211.6" y="77.39999999999999" width="28.4" height="14.3" fill="#000000" fill-opacity="0.27"/>
+    <rect x="111.8" y="57.900000000000006" width="26.2" height="11.9" fill="#5a636d" stroke="#191a1d" stroke-width="2.4"/>
+    <rect x="144.79999999999998" y="57.900000000000006" width="26.2" height="11.9" fill="#5a636d" stroke="#191a1d" stroke-width="2.4"/>
+    <rect x="177.79999999999998" y="57.900000000000006" width="26.2" height="11.9" fill="#5a636d" stroke="#191a1d" stroke-width="2.4"/>
+    <rect x="210.79999999999998" y="57.900000000000006" width="26.2" height="11.9" fill="#5a636d" stroke="#191a1d" stroke-width="2.4"/>
+    <rect x="111.8" y="75.0" width="26.2" height="11.9" fill="#5a636d" stroke="#191a1d" stroke-width="2.4"/>
+    <rect x="144.79999999999998" y="75.0" width="26.2" height="11.9" fill="#5a636d" stroke="#191a1d" stroke-width="2.4"/>
+    <rect x="177.79999999999998" y="75.0" width="26.2" height="11.9" fill="#5a636d" stroke="#191a1d" stroke-width="2.4"/>
+    <rect x="210.79999999999998" y="75.0" width="26.2" height="11.9" fill="#5a636d" stroke="#191a1d" stroke-width="2.4"/>
+    <ellipse cx="173.4" cy="157.2" rx="8.4" ry="8.2" fill="#000000" fill-opacity="0.27"/>
+    <ellipse cx="171.9" cy="154.5" rx="7.3" ry="7.2" fill="#4d5863" stroke="#191a1d" stroke-width="2"/>
+    <rect x="165.5" y="149.5" width="3.2" height="2.6" fill="#aeb1b4"/>
+    <rect x="145.5" y="195.2" width="57.6" height="12.4" fill="#525c65" stroke="#191a1d" stroke-width="2.2"/>
+    <rect x="144.5" y="204" width="59.3" height="6.5" fill="#191a1d"/>
+    <g transform="translate(0 0)">
+      <path d="M61.5 117.5H69.6L78 108.5V141.2L69.6 132.8H61.5Z" fill="#56616b" stroke="#191a1d" stroke-width="2.3" stroke-linejoin="miter"/>
+      <path d="M78.1 106V143" stroke="#191a1d" stroke-width="3.4" fill="none"/>
+      <g fill="none" stroke="#274b77" stroke-width="2.2" stroke-linecap="butt" stroke-dasharray="2.6 1.4">
+        <path d="M84.8 118.2Q87.6 125 84.8 131.8"/>
+        <path d="M90.2 112.4Q94.5 125 90.2 137.6"/>
+        <path d="M95.8 108.2Q101.5 125 95.8 141.8"/>
+      </g>
+    </g>
+    <g transform="translate(190 0)">
+      <path d="M61.5 117.5H69.6L78 108.5V141.2L69.6 132.8H61.5Z" fill="#56616b" stroke="#191a1d" stroke-width="2.3" stroke-linejoin="miter"/>
+      <path d="M78.1 106V143" stroke="#191a1d" stroke-width="3.4" fill="none"/>
+      <g fill="none" stroke="#274b77" stroke-width="2.2" stroke-linecap="butt" stroke-dasharray="2.6 1.4">
+        <path d="M84.8 118.2Q87.6 125 84.8 131.8"/>
+        <path d="M90.2 112.4Q94.5 125 90.2 137.6"/>
+        <path d="M95.8 108.2Q101.5 125 95.8 141.8"/>
+      </g>
+    </g>
+  </g>
+  <g id="clipboard-bridge">
+    <rect x="390.3" y="83.6" width="100.6" height="82.6" fill="#000000" fill-opacity="0.27"/>
+    <rect x="387.7" y="81.2" width="97.8" height="79.7" fill="#f4f6f5" stroke="#191a1d" stroke-width="2.9"/>
+    <rect x="389.2" y="82.7" width="94.9" height="13" fill="#5a636d"/>
+    <path d="M387.7 97H485.5" stroke="#191a1d" stroke-width="3.1"/>
+    <rect x="394.7" y="86.6" width="4.6" height="5" fill="#c3693b"/>
+    <rect x="402.7" y="86.6" width="4.6" height="5" fill="#be9a53"/>
+    <rect x="410.8" y="86.6" width="4.6" height="5" fill="#b3b3b4"/>
+    <rect x="398" y="107.4" width="10.6" height="9.4" fill="#666671"/>
+    <rect x="412.4" y="107.9" width="16.8" height="6" fill="#666c74"/>
+    <rect x="434" y="107.9" width="42.4" height="6.2" fill="#666c74"/>
+    <rect x="412.2" y="117.3" width="64" height="2.6" fill="#7a7c82"/>
+    <rect x="412.2" y="124.9" width="55.3" height="3.6" fill="#7a7c82"/>
+    <rect x="412.2" y="133.2" width="50.3" height="3.8" fill="#6d7279"/>
+    <rect x="412.2" y="142" width="13.2" height="3.4" fill="#6d7279"/>
+    <rect x="430" y="142" width="14.4" height="3.4" fill="#6d7279"/>
+    <rect x="449" y="142" width="27.6" height="3.2" fill="#e8e8e8"/>
+    <rect x="412.2" y="150" width="12.6" height="2.9" fill="#6d7279"/>
+    <path d="M455.2 162V187H476M497 187H508.2V163.2H523" fill="none" stroke="#274b77" stroke-width="3" stroke-linejoin="miter"/>
+    <rect x="477.5" y="178.3" width="23" height="21" fill="#000000" fill-opacity="0.27"/>
+    <path d="M484.7 173.2V177" stroke="#191a1d" stroke-width="2.2"/>
+    <rect x="476.4" y="177.5" width="20.2" height="18.1" fill="#525c65" stroke="#191a1d" stroke-width="2.2"/>
+    <rect x="481.4" y="178.6" width="4.6" height="16" fill="#323435"/>
+    <rect x="477.2" y="191" width="4.6" height="4.4" fill="#be9a53"/>
+    <rect x="481.6" y="183.8" width="3.4" height="3" fill="#c3693b"/>
+    <rect x="525.4" y="114.6" width="60.6" height="75" fill="#000000" fill-opacity="0.27"/>
+    <rect x="524.7" y="112.5" width="56.4" height="69.4" fill="#545e69" stroke="#191a1d" stroke-width="3"/>
+    <rect x="531.6" y="118.6" width="42.3" height="53.4" fill="#ededec"/>
+    <rect x="531.6" y="172" width="42.3" height="8.4" fill="#545e69"/>
+    <path d="M531.6 175.8H575" stroke="#191a1d" stroke-width="1.8" stroke-opacity="0.8"/>
+    <path d="M547.4 103.3H556.6V106.2H559.6V109.2H564.9V120.3H540.1V109.2H545V106.2H547.4Z" fill="#545e69" stroke="#191a1d" stroke-width="2" stroke-linejoin="miter"/>
+    <rect x="549.4" y="108.4" width="2.8" height="1.9" fill="#f4f6f5"/>
+    <rect x="536.6" y="131.8" width="32.3" height="3.4" fill="#706f74"/>
+    <rect x="536.6" y="138.8" width="32.3" height="3.4" fill="#706f74"/>
+    <rect x="536.6" y="145.8" width="32.3" height="3.4" fill="#706f74"/>
+    <rect x="536.6" y="152.8" width="26.8" height="3.4" fill="#706f74"/>
+    <rect x="536.6" y="159.8" width="14.6" height="3.4" fill="#706f74"/>
+  </g>
+  <g id="bullet-ring">
+    <circle cx="783" cy="74.5" r="3.8" fill="#274b77"/>
+    <circle cx="798" cy="72" r="3.8" fill="#274b77"/>
+    <circle cx="812.5" cy="74.5" r="3.8" fill="#274b77"/>
+    <circle cx="769.5" cy="81" r="3.8" fill="#274b77"/>
+    <circle cx="826.5" cy="81" r="3.8" fill="#274b77"/>
+    <circle cx="756.5" cy="90" r="3.8" fill="#274b77"/>
+    <circle cx="839" cy="90" r="3.8" fill="#274b77"/>
+    <circle cx="746.5" cy="103" r="3.8" fill="#274b77"/>
+    <circle cx="849" cy="103" r="3.8" fill="#274b77"/>
+    <circle cx="740.5" cy="117" r="3.8" fill="#274b77"/>
+    <circle cx="854.5" cy="117" r="3.8" fill="#274b77"/>
+    <circle cx="738" cy="134" r="3.8" fill="#274b77"/>
+    <circle cx="856.5" cy="133.5" r="3.8" fill="#274b77"/>
+    <circle cx="741" cy="149" r="3.8" fill="#274b77"/>
+    <circle cx="854" cy="149" r="3.8" fill="#274b77"/>
+    <circle cx="747.5" cy="163" r="3.8" fill="#274b77"/>
+    <circle cx="848" cy="163" r="3.8" fill="#274b77"/>
+    <circle cx="757.5" cy="175" r="3.8" fill="#274b77"/>
+    <circle cx="770" cy="184" r="3.8" fill="#274b77"/>
+    <circle cx="826.5" cy="184" r="3.8" fill="#274b77"/>
+    <circle cx="838.5" cy="175" r="3.8" fill="#274b77"/>
+    <circle cx="784" cy="191" r="3.8" fill="#274b77"/>
+    <circle cx="798" cy="192.5" r="3.8" fill="#274b77"/>
+    <circle cx="812" cy="190.5" r="3.8" fill="#274b77"/>
+    <circle cx="833.5" cy="109" r="4.1" fill="#c3693b"/>
+    <circle cx="797.4" cy="133" r="10.9" fill="#1c222a"/>
+  </g>
+</svg>
diff --git a/docs/readme/README_ar.md b/docs/readme/README_ar.md
index 3c8b9b343f..0b686fa96c 100644
--- a/docs/readme/README_ar.md
+++ b/docs/readme/README_ar.md
@@ -195,7 +195,12 @@ npx rea-agents@latest setup
 
 ## دراسات الحالة
 
-[![رسوم توضيحية لأمثلة توزيع الصوت في DX-Ball وجسر الحافظة في Notion وحلقة الطلقات في TH04](../assets/rea-showcases.png)](https://rea.tools/ar/showcase/)
+<a href="https://rea.tools/ar/showcase/">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="../assets/rea-showcases-dark.svg" />
+    <img alt="رسوم توضيحية لأمثلة توزيع الصوت في DX-Ball وجسر الحافظة في Notion وحلقة الطلقات في TH04" src="../assets/rea-showcases.svg" />
+  </picture>
+</a>
 
 ### DX-Ball: إعادة بناء حساب توزيع الصوت بين القناتين
 
diff --git a/docs/readme/README_de.md b/docs/readme/README_de.md
index 28247a6523..13f510f5cf 100644
--- a/docs/readme/README_de.md
+++ b/docs/readme/README_de.md
@@ -195,7 +195,12 @@ Native Formate und unterstützte Hostsysteme unterscheiden sich je nach Provider
 
 ## Fallstudien
 
-[![Illustrationen der Fallstudien zu DX-Balls Klangbalance, Notions Zwischenablage-Brücke und TH04s Geschossring](../assets/rea-showcases.png)](https://rea.tools/de/showcase/)
+<a href="https://rea.tools/de/showcase/">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="../assets/rea-showcases-dark.svg" />
+    <img alt="Illustrationen der Fallstudien zu DX-Balls Klangbalance, Notions Zwischenablage-Brücke und TH04s Geschossring" src="../assets/rea-showcases.svg" />
+  </picture>
+</a>
 
 ### DX-Ball: Eine Stereo-Panning-Berechnung rekonstruieren
 
diff --git a/docs/readme/README_el.md b/docs/readme/README_el.md
index bf2d075949..5fa717d055 100644
--- a/docs/readme/README_el.md
+++ b/docs/readme/README_el.md
@@ -199,7 +199,12 @@ npx rea-agents@latest setup
 
 ## Μελέτες περίπτωσης
 
-[![Εικονογραφήσεις των μελετών περίπτωσης για τη στερεοφωνική τοποθέτηση ήχου στο DX-Ball, τη γέφυρα προχείρου του Notion και τον δακτύλιο βλημάτων του TH04](../assets/rea-showcases.png)](https://rea.tools/showcase/)
+<a href="https://rea.tools/showcase/">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="../assets/rea-showcases-dark.svg" />
+    <img alt="Εικονογραφήσεις των μελετών περίπτωσης για τη στερεοφωνική τοποθέτηση ήχου στο DX-Ball, τη γέφυρα προχείρου του Notion και τον δακτύλιο βλημάτων του TH04" src="../assets/rea-showcases.svg" />
+  </picture>
+</a>
 
 ### DX-Ball: ανακατασκευή υπολογισμού στερεοφωνικής τοποθέτησης ήχου
 
diff --git a/docs/readme/README_es.md b/docs/readme/README_es.md
index 3f7c4b7902..9e56d60ac2 100644
--- a/docs/readme/README_es.md
+++ b/docs/readme/README_es.md
@@ -195,7 +195,12 @@ Los formatos nativos y los sistemas anfitriones compatibles varían según el pr
 
 ## Casos prácticos
 
-[![Ilustraciones de los casos de panoramización de sonido de DX-Ball, el puente del portapapeles de Notion y el anillo de proyectiles de TH04](../assets/rea-showcases.png)](https://rea.tools/es/showcase/)
+<a href="https://rea.tools/es/showcase/">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="../assets/rea-showcases-dark.svg" />
+    <img alt="Ilustraciones de los casos de panoramización de sonido de DX-Ball, el puente del portapapeles de Notion y el anillo de proyectiles de TH04" src="../assets/rea-showcases.svg" />
+  </picture>
+</a>
 
 ### DX-Ball: reconstruir un cálculo de panoramización de sonido
 
diff --git a/docs/readme/README_fa.md b/docs/readme/README_fa.md
index 6c2b05d2d2..51c3a11184 100644
--- a/docs/readme/README_fa.md
+++ b/docs/readme/README_fa.md
@@ -187,7 +187,12 @@ REA به Node.js 22.x (>=22.23.4)، 24.x (>=24.22.1) یا 26+ (>=26.12.1)، به
 
 ## نمونه‌های عملی
 
-[![تصویرهایی از نمونه‌های پنینگ صدای DX-Ball، پل کلیپ‌بورد Notion و حلقهٔ گلوله‌های TH04](../assets/rea-showcases.png)](https://rea.tools/fa/showcase/)
+<a href="https://rea.tools/fa/showcase/">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="../assets/rea-showcases-dark.svg" />
+    <img alt="تصویرهایی از نمونه‌های پنینگ صدای DX-Ball، پل کلیپ‌بورد Notion و حلقهٔ گلوله‌های TH04" src="../assets/rea-showcases.svg" />
+  </picture>
+</a>
 
 ### DX-Ball: بازسازی محاسبهٔ موقعیت استریوی صدا
 
diff --git a/docs/readme/README_fr.md b/docs/readme/README_fr.md
index 3506925a64..a5d7d46a1b 100644
--- a/docs/readme/README_fr.md
+++ b/docs/readme/README_fr.md
@@ -192,7 +192,12 @@ Les formats natifs et les hôtes pris en charge varient selon le fournisseur. Co
 
 ## Études de cas
 
-[![Illustrations des études sur la spatialisation sonore de DX-Ball, le pont du presse-papiers de Notion et le cercle de projectiles de TH04](../assets/rea-showcases.png)](https://rea.tools/fr/showcase/)
+<a href="https://rea.tools/fr/showcase/">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="../assets/rea-showcases-dark.svg" />
+    <img alt="Illustrations des études sur la spatialisation sonore de DX-Ball, le pont du presse-papiers de Notion et le cercle de projectiles de TH04" src="../assets/rea-showcases.svg" />
+  </picture>
+</a>
 
 ### DX-Ball : reconstruire un calcul de panoramique sonore
 
diff --git a/docs/readme/README_id.md b/docs/readme/README_id.md
index 82ebc95a58..808a5ae616 100644
--- a/docs/readme/README_id.md
+++ b/docs/readme/README_id.md
@@ -203,7 +203,12 @@ Periksa [ketersediaan rilis](../installation.md#released-package-and-main) untuk
 
 ## Contoh Penggunaan
 
-[![Ilustrasi contoh penggunaan DX-Ball sound-pan, Notion clipboard-bridge, dan TH04 bullet-ring](../assets/rea-showcases.png)](https://rea.tools/id/showcase/)
+<a href="https://rea.tools/id/showcase/">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="../assets/rea-showcases-dark.svg" />
+    <img alt="Ilustrasi contoh penggunaan DX-Ball sound-pan, Notion clipboard-bridge, dan TH04 bullet-ring" src="../assets/rea-showcases.svg" />
+  </picture>
+</a>
 
 ### DX-Ball: merekonstruksi perhitungan sound-pan
 
diff --git a/docs/readme/README_it.md b/docs/readme/README_it.md
index c1ae551fc3..cde6e8d7f1 100644
--- a/docs/readme/README_it.md
+++ b/docs/readme/README_it.md
@@ -192,7 +192,12 @@ I formati nativi e il supporto host variano in base al provider. Vedi la [config
 
 ## Showcase
 
-[![Illustrazioni degli showcase del sound-pan di DX-Ball, del clipboard-bridge di Notion e dell'anello di proiettili di TH04](../assets/rea-showcases.png)](https://rea.tools/it/showcase/)
+<a href="https://rea.tools/it/showcase/">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="../assets/rea-showcases-dark.svg" />
+    <img alt="Illustrazioni degli showcase del sound-pan di DX-Ball, del clipboard-bridge di Notion e dell'anello di proiettili di TH04" src="../assets/rea-showcases.svg" />
+  </picture>
+</a>
 
 ### DX-Ball: ricostruisci un calcolo sound-pan
 
diff --git a/docs/readme/README_ja.md b/docs/readme/README_ja.md
index fa4cffa405..1d31db25b9 100644
--- a/docs/readme/README_ja.md
+++ b/docs/readme/README_ja.md
@@ -195,7 +195,12 @@ REA には Node.js 22.x（>=22.23.4）、24.x（>=24.22.1）、または 26+ (>=
 
 ## 事例
 
-[![DX-Ball の音声パン、Notion のクリップボードブリッジ、TH04 の弾幕リングの事例を表すイラスト](../assets/rea-showcases.png)](https://rea.tools/ja/showcase/)
+<a href="https://rea.tools/ja/showcase/">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="../assets/rea-showcases-dark.svg" />
+    <img alt="DX-Ball の音声パン、Notion のクリップボードブリッジ、TH04 の弾幕リングの事例を表すイラスト" src="../assets/rea-showcases.svg" />
+  </picture>
+</a>
 
 ### DX-Ball：音声のパン計算を再構築する
 
diff --git a/docs/readme/README_ko.md b/docs/readme/README_ko.md
index d6971d8bc1..638fc6add9 100644
--- a/docs/readme/README_ko.md
+++ b/docs/readme/README_ko.md
@@ -195,7 +195,12 @@ REA에는 Node.js 22.x(>=22.23.4), 24.x(>=24.22.1) 또는 26+ (>=26.12.1)와 npm
 
 ## 사례
 
-[![DX-Ball 사운드 패닝, Notion 클립보드 브리지, TH04 탄환 고리 사례를 보여 주는 그림](../assets/rea-showcases.png)](https://rea.tools/ko/showcase/)
+<a href="https://rea.tools/ko/showcase/">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="../assets/rea-showcases-dark.svg" />
+    <img alt="DX-Ball 사운드 패닝, Notion 클립보드 브리지, TH04 탄환 고리 사례를 보여 주는 그림" src="../assets/rea-showcases.svg" />
+  </picture>
+</a>
 
 ### DX-Ball: 사운드 패닝 계산 재구현
 
diff --git a/docs/readme/README_ml.md b/docs/readme/README_ml.md
index 7ceb4c216a..8abd927804 100644
--- a/docs/readme/README_ml.md
+++ b/docs/readme/README_ml.md
@@ -199,7 +199,12 @@ Provider തിരഞ്ഞെടുക്കാൻ [CLI guide](../cli.md#choose
 
 ## ഉദാഹരണങ്ങൾ
 
-[![DX-Ball sound-pan, Notion clipboard-bridge, TH04 bullet-ring എന്നിവയുടെ ചിത്രീകരണങ്ങൾ](../assets/rea-showcases.png)](https://rea.tools/showcase/)
+<a href="https://rea.tools/showcase/">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="../assets/rea-showcases-dark.svg" />
+    <img alt="DX-Ball sound-pan, Notion clipboard-bridge, TH04 bullet-ring എന്നിവയുടെ ചിത്രീകരണങ്ങൾ" src="../assets/rea-showcases.svg" />
+  </picture>
+</a>
 
 ### DX-Ball: sound-pan കണക്കുകൂട്ടൽ പുനർനിർമ്മിക്കുക
 
diff --git a/docs/readme/README_pl.md b/docs/readme/README_pl.md
index 89d1afdf90..f0de869c65 100644
--- a/docs/readme/README_pl.md
+++ b/docs/readme/README_pl.md
@@ -195,7 +195,12 @@ Obsługiwane formaty natywne i platformy zależą od dostawcy analizy. Zobacz [k
 
 ## Przykłady zastosowań
 
-[![Ilustracje studiów przypadku panoramowania dźwięku w DX-Ball, mostka schowka w Notion i pierścienia pocisków w TH04](../assets/rea-showcases.png)](https://rea.tools/pl/showcase/)
+<a href="https://rea.tools/pl/showcase/">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="../assets/rea-showcases-dark.svg" />
+    <img alt="Ilustracje studiów przypadku panoramowania dźwięku w DX-Ball, mostka schowka w Notion i pierścienia pocisków w TH04" src="../assets/rea-showcases.svg" />
+  </picture>
+</a>
 
 ### DX-Ball: odtworzenie obliczania panoramy dźwięku
 
diff --git a/docs/readme/README_pt-BR.md b/docs/readme/README_pt-BR.md
index 953a5df4dd..f1b1a6847d 100644
--- a/docs/readme/README_pt-BR.md
+++ b/docs/readme/README_pt-BR.md
@@ -195,7 +195,12 @@ Os formatos nativos e os sistemas anfitriões compatíveis variam por provedor.
 
 ## Casos de uso
 
-[![Ilustrações dos estudos de panoramização de áudio do DX-Ball, da ponte da área de transferência do Notion e do anel de projéteis do TH04](../assets/rea-showcases.png)](https://rea.tools/pt-BR/showcase/)
+<a href="https://rea.tools/pt-BR/showcase/">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="../assets/rea-showcases-dark.svg" />
+    <img alt="Ilustrações dos estudos de panoramização de áudio do DX-Ball, da ponte da área de transferência do Notion e do anel de projéteis do TH04" src="../assets/rea-showcases.svg" />
+  </picture>
+</a>
 
 ### DX-Ball: reconstruir um cálculo de panorâmica de áudio
 
diff --git a/docs/readme/README_ru.md b/docs/readme/README_ru.md
index 2964e857b8..a84f158a91 100644
--- a/docs/readme/README_ru.md
+++ b/docs/readme/README_ru.md
@@ -195,7 +195,12 @@ REA требует Node.js 22.x (>=22.23.4), 24.x (>=24.22.1) или 26+ (>=26.1
 
 ## Примеры
 
-[![Иллюстрации примеров панорамирования звука в DX-Ball, моста буфера обмена Notion и кольца пуль в TH04](../assets/rea-showcases.png)](https://rea.tools/ru/showcase/)
+<a href="https://rea.tools/ru/showcase/">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="../assets/rea-showcases-dark.svg" />
+    <img alt="Иллюстрации примеров панорамирования звука в DX-Ball, моста буфера обмена Notion и кольца пуль в TH04" src="../assets/rea-showcases.svg" />
+  </picture>
+</a>
 
 ### DX-Ball: восстановление расчёта звуковой панорамы
 
diff --git a/docs/readme/README_th.md b/docs/readme/README_th.md
index 54dd9f6eea..e3b12949aa 100644
--- a/docs/readme/README_th.md
+++ b/docs/readme/README_th.md
@@ -195,7 +195,12 @@ REA ต้องใช้ Node.js 22.x (>=22.23.4), 24.x (>=24.22.1) หรื
 
 ## ตัวอย่างการใช้งาน
 
-[![ภาพประกอบกรณีศึกษาการแพนเสียงใน DX-Ball บริดจ์คลิปบอร์ดของ Notion และวงแหวนกระสุนใน TH04](../assets/rea-showcases.png)](https://rea.tools/th/showcase/)
+<a href="https://rea.tools/th/showcase/">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="../assets/rea-showcases-dark.svg" />
+    <img alt="ภาพประกอบกรณีศึกษาการแพนเสียงใน DX-Ball บริดจ์คลิปบอร์ดของ Notion และวงแหวนกระสุนใน TH04" src="../assets/rea-showcases.svg" />
+  </picture>
+</a>
 
 ### DX-Ball: สร้างการคำนวณแพนเสียงขึ้นใหม่
 
diff --git a/docs/readme/README_tr.md b/docs/readme/README_tr.md
index 92db41c37e..8a8a447bf5 100644
--- a/docs/readme/README_tr.md
+++ b/docs/readme/README_tr.md
@@ -191,7 +191,12 @@ Yerel makine kodu içeren ikili dosya biçimleri ve ana bilgisayar desteği sağ
 
 ## Örnek çalışmalar
 
-[![DX-Ball ses kaydırma, Notion pano köprüsü ve TH04 mermi halkası örneklerinin çizimleri](../assets/rea-showcases.png)](https://rea.tools/tr/showcase/)
+<a href="https://rea.tools/tr/showcase/">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="../assets/rea-showcases-dark.svg" />
+    <img alt="DX-Ball ses kaydırma, Notion pano köprüsü ve TH04 mermi halkası örneklerinin çizimleri" src="../assets/rea-showcases.svg" />
+  </picture>
+</a>
 
 ### DX-Ball: Sesin stereo konumlandırma hesabını yeniden oluşturma
 
diff --git a/docs/readme/README_uk.md b/docs/readme/README_uk.md
index 535a8cc851..0703767054 100644
--- a/docs/readme/README_uk.md
+++ b/docs/readme/README_uk.md
@@ -195,7 +195,12 @@ REA потребує Node.js 22.x (>=22.23.4), 24.x (>=24.22.1) або 26+ (>=26
 
 ## Приклади
 
-[![Ілюстрації прикладів панорамування звуку в DX-Ball, мосту буфера обміну Notion та кільця куль у TH04](../assets/rea-showcases.png)](https://rea.tools/uk/showcase/)
+<a href="https://rea.tools/uk/showcase/">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="../assets/rea-showcases-dark.svg" />
+    <img alt="Ілюстрації прикладів панорамування звуку в DX-Ball, мосту буфера обміну Notion та кільця куль у TH04" src="../assets/rea-showcases.svg" />
+  </picture>
+</a>
 
 ### DX-Ball: відновлення розрахунку звукової панорами
 
diff --git a/docs/readme/README_ur-Latn.md b/docs/readme/README_ur-Latn.md
index 1a45580e89..00573989b8 100644
--- a/docs/readme/README_ur-Latn.md
+++ b/docs/readme/README_ur-Latn.md
@@ -245,7 +245,12 @@ Latest npm release ke baad add hone wale features ki
 
 ## Amli misaalein
 
-[![DX-Ball sound-pan, Notion clipboard-bridge aur TH04 bullet-ring case studies ki tasveerein](../assets/rea-showcases.png)](https://rea.tools/showcase/)
+<a href="https://rea.tools/showcase/">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="../assets/rea-showcases-dark.svg" />
+    <img alt="DX-Ball sound-pan, Notion clipboard-bridge aur TH04 bullet-ring case studies ki tasveerein" src="../assets/rea-showcases.svg" />
+  </picture>
+</a>
 
 ### DX-Ball: sound-pan calculation dobara banayein
 
diff --git a/docs/readme/README_vi.md b/docs/readme/README_vi.md
index 386cba5014..283e3db3da 100644
--- a/docs/readme/README_vi.md
+++ b/docs/readme/README_vi.md
@@ -195,7 +195,12 @@ Với tệp nhị phân lớn, tăng hạn khởi động bằng `REA_GHIDRA_STA
 
 ## Các nghiên cứu điển hình
 
-[![Minh họa các ví dụ về cân bằng âm thanh DX-Ball, cầu nối bảng nhớ tạm Notion và vòng đạn TH04](../assets/rea-showcases.png)](https://rea.tools/vi/showcase/)
+<a href="https://rea.tools/vi/showcase/">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="../assets/rea-showcases-dark.svg" />
+    <img alt="Minh họa các ví dụ về cân bằng âm thanh DX-Ball, cầu nối bảng nhớ tạm Notion và vòng đạn TH04" src="../assets/rea-showcases.svg" />
+  </picture>
+</a>
 
 ### DX-Ball: tái tạo phép tính phân bố âm thanh trái phải
 
diff --git a/docs/readme/README_zh-TW.md b/docs/readme/README_zh-TW.md
index 1f27d4a6e7..2b3984e399 100644
--- a/docs/readme/README_zh-TW.md
+++ b/docs/readme/README_zh-TW.md
@@ -193,7 +193,12 @@ REA 需要 Node.js 22.x（>=22.23.4）、24.x（>=24.22.1）或 26+ (>=26.12.1)
 
 ## 案例
 
-[![DX-Ball 聲音平移、Notion 剪貼簿橋接與 TH04 彈幕環案例的插圖](../assets/rea-showcases.png)](https://rea.tools/zh-TW/showcase/)
+<a href="https://rea.tools/zh-TW/showcase/">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="../assets/rea-showcases-dark.svg" />
+    <img alt="DX-Ball 聲音平移、Notion 剪貼簿橋接與 TH04 彈幕環案例的插圖" src="../assets/rea-showcases.svg" />
+  </picture>
+</a>
 
 ### DX-Ball：重建聲像計算
 
diff --git a/docs/readme/README_zh.md b/docs/readme/README_zh.md
index a61fb9f408..6209778852 100644
--- a/docs/readme/README_zh.md
+++ b/docs/readme/README_zh.md
@@ -193,7 +193,12 @@ REA 需要 Node.js 22.x（>=22.23.4）、24.x（>=24.22.1）或 26+ (>=26.12.1)
 
 ## 案例
 
-[![DX-Ball 声音平移、Notion 剪贴板桥接与 TH04 弹幕环案例的插图](../assets/rea-showcases.png)](https://rea.tools/zh-CN/showcase/)
+<a href="https://rea.tools/zh-CN/showcase/">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="../assets/rea-showcases-dark.svg" />
+    <img alt="DX-Ball 声音平移、Notion 剪贴板桥接与 TH04 弹幕环案例的插图" src="../assets/rea-showcases.svg" />
+  </picture>
+</a>
 
 ### DX-Ball：重建声像计算
 
diff --git a/website/figures.md b/website/figures.md
index 13d6e64d06..8021f816d3 100644
--- a/website/figures.md
+++ b/website/figures.md
@@ -57,6 +57,14 @@ The card and `public/assets/favicon.svg` each carry a dark
 browser tab strip. CairoSVG ignores it, so the PNG that link previews fetch
 stays light.
 
+## README showcases
+
+`docs/assets/rea-showcases.svg` and `docs/assets/rea-showcases-dark.svg` redraw
+the three showcase illustrations as flat SVG, one file per colour scheme. Every
+README edition picks one with a `<picture>` element and a
+`prefers-color-scheme: dark` source, as the star-history chart does. Keep the
+two files the same shape when you change one.
+
 ## Beginner homepage and dinosaur reconstruction
 
 The manual/agent comparison and Calculator percentage controls are semantic