diff --git a/src/scene/ParticleScene.tsx b/src/scene/ParticleScene.tsx index 150222e..b5ad8e1 100644 --- a/src/scene/ParticleScene.tsx +++ b/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 diff --git a/src/scene/shapes.ts b/src/scene/shapes.ts index 5b0cffc..8559f6d 100644 --- a/src/scene/shapes.ts +++ b/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 }