diff --git a/public/og-office.png b/public/og-office.png index 4d9611f..cf07c7f 100644 Binary files a/public/og-office.png and b/public/og-office.png differ diff --git a/public/og-tera.png b/public/og-tera.png index 9c47050..70b0e04 100644 Binary files a/public/og-tera.png and b/public/og-tera.png differ diff --git a/scripts/brand-assets/og.html b/scripts/brand-assets/og.html index b104dfb..4aa9098 100644 --- a/scripts/brand-assets/og.html +++ b/scripts/brand-assets/og.html @@ -186,15 +186,22 @@ sub: "A real sun and moon over a board you can fly around, and an office you can step into. Clone it and it works.", host: "tera.", art: "art-tera.png", - // Low, so the far edge of the board — where the terrain stops and the - // sky begins in a hard diagonal — stays out of frame. A card with the - // seam in it reads as a rendering fault rather than as a map. - position: "56% 88%", + // Was "56% 88%", pinned low so the far edge of the board — where the + // terrain stopped and the sky began in a hard diagonal — stayed out of + // frame, because a card with that seam in it read as a rendering fault + // rather than as a map. + // + // There is no seam any more. The sea now runs eighteen board spans and + // ends past the fog's far plane, and the sky is a world-space dome + // rather than a screen-space gradient, so the world dissolves into the + // horizon instead of stopping at a visible edge. The framing is free to + // sit where the picture is best rather than where the defect was not. + position: "56% 62%", }, office: { eyebrow: "Lumbridge Spaces", - headline: "An office you can walk around.", - sub: "Two buildings, real hours, the lights on at night — rendered from a data file anybody can copy.", + headline: "A studio you can walk around.", + sub: "Three buildings, real hours, the lights on at night, the hardware on the desk — rendered from a data file anybody can copy.", host: "office.", art: "art-office.png", position: "62% 46%", diff --git a/scripts/brand-assets/shots.mjs b/scripts/brand-assets/shots.mjs index a73c8e6..2fd4a6c 100644 --- a/scripts/brand-assets/shots.mjs +++ b/scripts/brand-assets/shots.mjs @@ -177,6 +177,7 @@ const SHOTS = [ }, { id: "office-floor", + hide: ["#device-section"], door: "office", chapter: 1, expect: "Studio", @@ -215,6 +216,7 @@ const SHOTS = [ }, { id: "office-commons", + hide: ["#device-section"], door: "office", office: "LA HQ", chapter: 6, @@ -235,6 +237,7 @@ const SHOTS = [ }, { id: "office-hangar", + hide: ["#device-section"], door: "office", office: "Frontier Valley", chapter: 0, @@ -456,7 +459,22 @@ async function shoot(browser, shot, frame) { } await chapter(page, shot.chapter, shot.expect, { click: shot.chapter > 0 }); if (shot.chapter > 0) await page.waitForTimeout(2500); - await hide(page, [...FURNITURE.transient, ...FURNITURE.CLUTTER]); + /* + * `shot.hide` is the per-frame escape hatch, and the studio-hardware card is + * why it exists. + * + * The device section is a `.panel-group` inside a scrolling card, so when the + * panel is taller than the viewport the card scrolls and the last control is + * simply below the fold. That is correct on a screen — a reader scrolls — and + * wrong in a photograph, where the frame edge slices a gain slider in half and + * every viewer who does not know the card scrolls reads it as a broken render. + * + * It is also a question of subject. `office-desks` is a picture *of* the desk + * mic and the machine speaker and wants the card open beside them. The + * courtyard is a picture of a courtyard, and a column of audio controls down + * one side of it is answering a question nobody asked. + */ + await hide(page, [...FURNITURE.transient, ...FURNITURE.CLUTTER, ...(shot.hide ?? [])]); const png = await page.screenshot({ timeout: 120_000, animations: "disabled" }); if (problems.length) { throw new Error(`the page threw while being photographed: ${problems[0]}`); diff --git a/vite.config.ts b/vite.config.ts index c5abaad..ad1e4e1 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -34,16 +34,16 @@ function twoDoors(): Plugin { const MARKER_END = ""; const OFFICE = ` - Spaces — an office you can walk around + Spaces — a studio you can walk around - +