mobile layout

src/scene/ParticleScene.tsx

@@ -62,13 +62,8 @@ export default function ParticleScene({ keyframes, onLabel, onProgress }: Props)
     const resize = () => {
       renderer.setPixelRatio(Math.min(devicePixelRatio, 2))
       renderer.setSize(innerWidth, innerHeight, false)
-      const aspect = innerWidth / innerHeight
-      camera.aspect = aspect; camera.updateProjectionMatrix()
-      // fixed vertical FOV means horizontal FOV shrinks on portrait screens; back the
-      // camera off enough that the widest shape (the "PQ" text sweep, ~8 units half-width)
-      // still fits the frustum instead of getting cropped on narrow viewports
-      const halfV = Math.tan(camera.fov * Math.PI / 360)
-      camera.position.z = 8.2 / (halfV * Math.min(aspect, 1))
+      camera.aspect = innerWidth / innerHeight; camera.updateProjectionMatrix()
+      camera.position.z = innerWidth < 760 ? 26 : 18
     }
 
     // scroll: real fraction for the bar, section-keyed progress for the morph

src/scene/shapes.ts

@@ -72,7 +72,9 @@ function sampleCanvas(n: number, w: number, h: number, draw: (ctx: CanvasRenderi
 }
 /* Shape 3 — the initials */
 export function shapeText(n: number): Float32Array {
-  return sampleCanvas(n,720,360,ctx=>{ ctx.textAlign='center'; ctx.textBaseline='middle'; ctx.font='800 300px Syne, "Helvetica Neue", Arial, sans-serif'; ctx.fillText('PQ',360,194); },0.0215,0.9);
+  // scale kept small enough that the full width still fits the camera frustum on
+  // narrow/portrait viewports, where it's forced face-on to stay readable
+  return sampleCanvas(n,720,360,ctx=>{ ctx.textAlign='center'; ctx.textBaseline='middle'; ctx.font='800 300px Syne, "Helvetica Neue", Arial, sans-serif'; ctx.fillText('PQ',360,194); },0.012,0.9);
 }
 /* Primitive builder for the project dioramas: boxes as edges or solid fill, plus lines */
 type Prim = { t: 'edges' | 'fill'; c: number[]; s: number[]; w: number } | { t: 'line'; a: number[]; b: number[]; w: number }