page transition, optimize lighting

src/lib/glow.js

@@ -0,0 +1,35 @@
+import * as THREE from 'three';
+
+// Keeps the gradient's bright spot gravitating toward the projection wall as
+// the camera orbits: the wall centre (x = -10 in every scene) is projected into
+// screen space each frame and eased into the CSS gradient position.
+const WALL_CENTRE = new THREE.Vector3( -10, 0, 0 );
+
+export function bindGlow( camera ) {
+    const projected = new THREE.Vector3();
+    let x = 12;
+    let y = 50;
+    let writtenX = null;
+    let writtenY = null;
+
+    return function update() {
+        projected.copy( WALL_CENTRE ).project( camera );
+
+        // when the wall goes behind the camera the projection flips sides;
+        // leave the glow where it last was until the wall swings back
+        if ( projected.z < 1 ) {
+            const targetX = THREE.MathUtils.clamp( ( projected.x + 1 ) * 50, -40, 140 );
+            const targetY = THREE.MathUtils.clamp( ( 1 - projected.y ) * 50, -40, 140 );
+            x += ( targetX - x ) * 0.08;
+            y += ( targetY - y ) * 0.08;
+        }
+
+        // writing the property repaints the whole gradient, so only touch the
+        // DOM while the glow is actually moving
+        if ( writtenX !== null && Math.abs( x - writtenX ) < 0.05 && Math.abs( y - writtenY ) < 0.05 ) return;
+        writtenX = x;
+        writtenY = y;
+        document.body.style.setProperty( '--glow-x', `${x.toFixed( 2 )}%` );
+        document.body.style.setProperty( '--glow-y', `${y.toFixed( 2 )}%` );
+    };
+}