chore(brand): re-shoot the cards, and stop describing a building that is gone
The share cards were stale in the two ways that survive a code fix, because both of them end up baked into a picture. **"Two buildings" was wrong in two files.** The words on the card live in `og.html`; the words a crawler reads live in `vite.config.ts`. Fixing either one alone leaves the other saying something else — and there are three packs now, one of which is a courtyard block in Los Angeles that neither file mentioned. Both now say three, name the LA block, and mention the microphone on the desk. Lumbridge HQ also stopped being "a tower floor" some hours ago and is a live/work studio. **The tera card was cropping around a defect that no longer exists.** Its framing was pinned to `56% 88%` with a comment explaining that low was necessary to keep the far edge of the board — where the terrain stopped and the sky began in a hard diagonal — out of shot, because a card with that seam in it read as a rendering fault rather than as a map. The sea now runs eighteen board spans and ends past the fog's far plane, and the sky is a world-space dome, so there is no seam to hide from. `56% 62%` puts the framing where the picture is best instead. Also a per-shot `hide` in `shots.mjs`. The studio-hardware card is a `.panel-group` inside a scrolling card, so when it is taller than the viewport the last control is below the fold — correct on a screen, where a reader scrolls, and wrong in a photograph, where the frame edge cuts a gain slider in half and anyone 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* that hardware and keeps it, while the LA courtyard is a picture of a courtyard and does not want a column of audio controls down one side. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -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%",
|
||||
|
||||
@@ -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]}`);
|
||||
|
||||
Reference in New Issue
Block a user