Exhibit animation tweaks, copy tweaks

src/index.css

@@ -72,8 +72,7 @@
   --c-jump-1: var(--c-active);
   --c-jump-2: #2d9cdb88;
   --c-over-0: #0009;
-  --c-over-1: #0001;
-  --c-over-3: #0004;
+  --c-over-1: #0004;
   --c-art-fill: #e6e6e6;
   --s-font-m: 1rem;
   --s-font-s: 0.6rem;
@@ -145,18 +144,20 @@ html {
 }
 
 nav {
-  animation: 9e2ms ease-in 1 18e2ms backwards opacity-0-1;
-  will-change: opacity;
+  animation: 9e2ms ease-in 1 18e2ms backwards opacity-0-1,
+    9e2ms ease-in 1 18e2ms backwards text-contrast-0-1;
+  will-change: color, background-color;
 }
 
 header,
 article {
-  animation: 9e2ms ease-in 1 9e2ms backwards opacity-0-1;
-  will-change: opacity;
+  animation: 9e2ms ease-in 1 9e2ms backwards opacity-0-1,
+    9e2ms ease-in 1 18e2ms backwards text-contrast-0-1;
+  will-change: color, background-color;
 }
 
 .exhibit-demo {
-  animation: 9e2ms ease-in 1 2e3ms backwards opacity-0-1;
+  animation: 9e2ms ease-in 1 3e3ms backwards opacity-0-1;
   will-change: opacity;
 }
 
@@ -450,7 +451,7 @@ figcaption {
   text-align: center;
   cursor: auto;
   color: var(--c-text);
-  background: var(--c-lo-0);
+  background: var(--c-over-0);
   /* backdrop-filter: invert(1) blur(3px) saturate(0.5); */
   /* backdrop-filter: invert(0.8); */
   /* transition: transform 3e2ms ease-out,
@@ -1137,6 +1138,10 @@ cite {
 
     &:active { cursor: grabbing; }
   }
+
+  .exhibit-play & { opacity: 1; }
+
+  .exhibit-stop & { opacity: 0; }
 }
 
 .exhibit-label {
@@ -1156,7 +1161,7 @@ cite {
   max-height: calc(2*var(--s-icon-xs));
   clip-path: circle(var(--s-icon-xs));
   color: #0000;
-  background: var(--c-over-3);
+  background: var(--c-over-1);
   transition: max-width 0ms linear 9e2ms,
     max-height 0ms linear 9e2ms,
     clip-path 9e2ms ease-out,

src/index.html

@@ -223,7 +223,9 @@
 
           Observing this fluid motion elicits a meditation on our own subjective sensations (bodily, thought, emotional) – each dynamic, interconnected, chaotic processes.
 
-          <small>*The bust's face can match your own, using a hyper-realistic 3D facial scan via [`Gaussian Splatting`](https://repo-sam.inria.fr/fungraph/3d-gaussian-splatting/){target="_blank"} technology.*</small>
+          <small>*Meditation can't be truly be known conceptually or discursively, only by **direct participatory experience**, here enabled by **interactive digital media** – real-time visuals, motion, and sound.*</small>
+
+          <small>*The bust's face matches yours, using a hyper-realistic 3D facial scan via [`Gaussian Splatting`](https://repo-sam.inria.fr/fungraph/3d-gaussian-splatting/){target="_blank"} technology.*</small>
         </section>
         <section class="exhibit-info"
           data-exhibit-camera="PerspectiveCamera3" md>
@@ -241,7 +243,7 @@
           <br/>
           <small>*[`AI Hand-Tracking`{.info title="Artificial Intelligence Hand-Tracking uses AI to follow the form and motion of a person's hand"}](https://mediapipe-studio.webapps.google.com/demo/face_landmarker){target="_blank"} lets you slice the visuals along your palm's surface.*</small>
 
-          <small>*[***Peer into the Flow***](https://www.olta.art/project/0x6d24ce4c32e556313b431fb156edf2060680a998){target="_blank"} explores interactions via [`AI Head-Tracking`{.info title="Artificial Intelligence Head-Tracking uses AI to follow the form and motion of a person's head"}](https://mediapipe-studio.webapps.google.com/demo/face_landmarker){target="_blank"} to intuitively mirror your viewpoint – in an [`NFT`{.info title="Non-Fungible Token, a cryptocurrency asset"} series of interactive sketches](https://youtu.be/XagjH3bkQ0s){target="_blank"} supporting and prototyping parts of ***Locus***, with editions now [offered as a reward to backers](#reward-peer).*</small>
+          <small>*[***Peer into the Flow***](https://www.olta.art/project/0x6d24ce4c32e556313b431fb156edf2060680a998){target="_blank"} explores interactions via [`AI Head-Tracking`{.info title="Artificial Intelligence Head-Tracking uses AI to follow the form and motion of a person's head"}](https://mediapipe-studio.webapps.google.com/demo/face_landmarker){target="_blank"} to intuitively mirror your viewpoint – in an [`NFT`{.info title="Non-Fungible Token, a cryptocurrency asset"} series of interactive sketches](https://youtu.be/XagjH3bkQ0s){target="_blank"} supporting and prototyping parts of ***Locus***, our crowdfunder supporters are [rewarded with random editions](#reward-peer).*</small>
         </section>
         <section class="exhibit-info"
           data-exhibit-camera="PerspectiveCamera2" md>

src/index.js

@@ -336,6 +336,18 @@ let exhibitInteract = false;
 const exhibitEase = 5e-2;
 let exhibit2DRenderer;
 
+function exhibitPlay() {
+  exhibitPlayer.play();
+  $exhibit.classList.add('exhibit-play');
+  $exhibit.classList.remove('exhibit-stop');
+}
+
+function exhibitStop() {
+  exhibitPlayer.stop();
+  $exhibit.classList.add('exhibit-stop');
+  $exhibit.classList.remove('exhibit-play');
+}
+
 function exhibitResize() {
   let w = innerWidth;
   let h = innerHeight;
@@ -350,10 +362,10 @@ function exhibitScroll() {
   const wasOn = exhibitOn;
 
   if(!(exhibitOn = inView(false, $exhibit.getBoundingClientRect()))) {
-    return wasOn && exhibitPlayer.stop();
+    return wasOn && exhibitStop();
   }
 
-  !wasOn && exhibitPlayer.play();
+  !wasOn && exhibitPlay();
 
   const vy = innerHeight*0.5;
   const [u, d] = exhibitCameraPair;