Texas from orbit

The site is NASA's Black Marble of Texas at night: a near-black field where the only drawing is light, the brightest point is Austin, the summit's sessions and speakers are the gold points inside it, and zooming from the state to the city to the room is the one navigation gesture.

The story

From 830 kilometres up, the only thing visible of Texas at night is what the grid switched on. That is the audience's own work seen from orbit, and it already looks like the most beautiful energy image there is: no turbines, no panels, no handshakes, just the I-35 corridor, the Permian flares, Houston's refineries and a thousand towns strung along the highways. The mockup uses the real raster (NASA Black Marble, VIIRS 2016 composite, fetched from GIBS as two JPEG crops: the Texas region and an Austin close-up) and samples it into about 52,000 points, so every light on the page is a real light on the ground.

Black Marble's own colour code carries the event: gold is where the night brightened, purple where it dimmed. ETS26 was in San Antonio, so San Antonio carries a small purple light; ETS27 comes to Austin, so Austin is the one gold blaze on the map, made of the programme's 127 points (50 sessions, 77 speakers). It is the only saturated colour in the field and it breathes on a four-second cycle, so the brightest point is true in the pixels and not only in the copy. The first screen is a map annotation: AUSTIN set hairline-wide at 180 px, its second line placed so the gold ETS27 sits exactly on the plumb line that drops to the point, the coordinates printed beside it, the facts in the four corners, and one answer the mind already composed, set in the dark Gulf of Mexico the way a cartouche sits in the sea on an old chart.

Scrolling is a descent. The state collapses into the city (every light flies to its place in the Austin metro, paired by rank of distance so the zoom reads as one motion), the city holds under the lineup, gathers into the room (the gold points take the exact positions of the sessions and speakers in the agenda, and the city remains as a thin horizon of light along the bottom edge, the view from the room's window), and the place section returns to the city with its districts labelled. A visitor finds the dates, city and tickets (top right), the theme (top centre), speakers (the lineup and its gazetteer), the agenda (the room), tickets again (bottom right and the tickets section) and the ask-the-mind entry (the open line in the fork) without leaving the first screen for anything but the detail.

The overnight version of this concept is kept unchanged in v1/.

Typography

Two faces, both from Google Fonts as variable files, loaded by <link>, plus one 2.5 KB patch.

Hubot Sans, axes wdth 75–125 and wght 200–900. Display: wdth 125, wght 200, 180 px, line-height 0.86, uppercase (AUSTIN; FREE / YOUR / MIND). Voice: wdth 125, wght 200, 44 px (the fork, the question "Who speaks Tuesday", section lines, the day numerals, the pass names). Reading: wdth 100, wght 400, 16 px / 1.5, measure under 70 characters (theme and place paragraphs). Labels: wdth 125, wght 300, 13 px, tracking 0.14 em, uppercase (facts, HUD, section labels, city labels, the source line, ticket phases, links). The mind's "say" line: wdth 75, wght 300, 16 px, so the answer's caption is the same family on a narrower axis.
Martian Mono, used only for values: coordinates, the clock, the scale bar, session times, the gazetteer's first-slot references, the prices and the footer's one colophon. Captions and links no longer borrow it.
Orbit Zero: Hubot Sans draws its zero with a bar, which read as a theta inside prose ("83θ kilometres", "2θ27"). The page loads a Modified Version of Hubot Sans 2.000 holding only U+0030, with the bar contour and its variation deltas removed (same axes, same advances), inlined as a data URI and placed first in the stack with unicode-range: U+0030. It is renamed because "Hubot" is a Reserved Font Name under the SIL OFL; the copyright and licence records are kept. The barred and dotted zeros remain where they mean something, in Martian Mono.
Hubot Sans has ↑ and ↓ but no →, so the right arrow is its own ↓ turned a quarter: the stroke matches the line it ends.

Four sizes on the page: 13, 16, 44 and 180 px (13.8:1 between label and display). On the phone the display drops to 64 px, the voice to 28 px and reading to 15 px. Text over the map carries a cartographic halo (three stacked black text-shadows) and, under it, a knockout in the field (see motion).

Colour world

Field #0B0C10; land stipple #3E4260 at 16 % (the faint VIIRS land shading, 9,000 points, so the coast reads before any light does).
Lights: warm sodium #F4C98A rising to #FFF6E4 with radiance, added together like a long exposure, so the metro cores whiten exactly where the satellite's do.
Gold #F2C14E: the programme (sessions and speakers), the live signal (the caret, the ticket links, featured names, the TLOY rings) and the Black Marble meaning "brightened since last time". Painted on top with normal blending so it never whitens.
Purple #7B4FA3 (drawn at #8A5CB8): "dimmed since last time", only as data at small scale: the light on San Antonio and a 6 px dot in the footer legend, beside a word set in ink. Never a surface.
Ink #E9E4D8, secondary #918D82 (5.9:1), tertiary #807C72 (4.7:1, raised from 2.9:1 so track labels, footnotes and quiet rows pass AA); hairline rules at 22 % and 10 % of the ink.
The palette goes to the shader as sRGB triples. three.js r180 linearises THREE.Color, and this shader writes straight to the sRGB canvas, so the overnight build drew gold as orange #E28813 and lost the land stipple; the map's gold now matches the type's gold.

No gradients, no blur, no glass, no bloom pass.

Layout grammar

A map you zoom. The first screen is a 100 vh map with the facts on the edges: ETS27 · Energy Thought Summit · 14th edition (top left), Free Your Mind (top centre, tracked), May 3–6, 2027 · Austin, Texas · Tickets from $299 → (top right, so the ticket entry survives a consent strip), Austin, Texas · venue announced soon · the live Austin clock (bottom left), the 200 km scale bar and the motion control (bottom centre), Tickets on sale · from $299 → (bottom right). The right edge carries, vertically, one moderated question other visitors asked on this page. The state view is centred at 98.7° W, 28.95° N so the Gulf opens enough to hold the answer at 16:10. AUSTIN is the only large element and it is a label, not a headline.

The fork sits on one line at the lower left: "Zoom ↓" against the open rule of the composer, both at 44 px on one baseline, the zoom levels (state · city · room, the current one in ink) under the word and the three suggestion verbs under the rule. The cartouche holds answer 01 in the page's own grid: number, the question at 44 px in the visitor's own words ("Who speaks Tuesday", the first suggestion), the say line, four ruled rows (time in mono, title, names), the source and a link into the room. Its position is computed, not fixed: the state raster is projected into an 8 px screen grid of lit and land cells, and the 500 px answer goes where it covers the least of either, right of the fork and below the label, nearest the open sea. At 1440 × 900 that is the water south of Houston.

Below the fold the beat changes every section: the theme sets FREE / YOUR / MIND at 180 px against a 44 px statement and two paragraphs; the lineup is a hairline road with sixteen featured speakers sitting on it as portrait lights of three sizes, every name hung below the road in two tiers (the lower tier on hairline leaders, organisations on one line in the gazetteer's sentence case), and only the two Thought Leaders of the Year, ringed in gold, named above it; then a four-column gazetteer of all 77 (surname, organisation, first slot) in the manner of an atlas index; the room is four columns with a hairline road down each day, every session a gold light with its time, type and track, every speaker a smaller light before their name, moderators' names in grey (the head says so); tickets are two ruled rows with the price in mono; place is the city view with its districts labelled (labels stop 24 px short of the footer rule); the footer is the map's legend (gold and purple as dots beside words), one mono colophon (sample data, snapshot date, counts) and the contacts.

The phone stacks the hero deliberately: facts, the AUSTIN label, the map (points scaled to the smaller map so metros read as lights, not splats), the fork, the composer with its verbs as a tight list, then a compact answer (number, question, say line, two rows, source) that starts on the first screen. The strip becomes a two-column list, the gazetteer folds behind "all 77, A to Z ↓", and the room becomes one day at a time behind four day tabs, so the phone page is about 6,800 px instead of 14,000.

Motion and life

Boot: the lights switch on from Austin outward over 2.2 s (a per-point threshold on distance from Austin), so the state is energised rather than faded in.
Life: each light twinkles ±9 % on its own phase, at 30 fps, paused when the tab is hidden; the programme breathes ±16 % in size on a 4 s cycle while it is the brightest point; the Austin clock ticks; the coordinate chip follows the pointer, printing latitude, longitude and the distance from Austin, and parks beside Austin when the pointer leaves.
The cartographic mask: every text block that sits on the map (the corners, the sub-line, the chip, the edge question, the fork, each part of the cartouche, the theme copy, the lineup and gazetteer, the room heads, the tickets, the place text, the footer) passes its rectangle to the vertex shader, and the base field under it is dimmed and its points shrunk, with a 26 px feather. Under AUSTIN the knockout is per letter and lighter, so Dallas–Fort Worth sits softly inside the N instead of blowing through it. It is the knockout map labels have always had over imagery, not a panel. The rectangles are culled to the viewport on scroll; only the gazetteer's mask also dims the programme, because in the hero and the room the gold is the subject.
Scroll choreography (no library): the camera's centre and scale (log-interpolated) and two morph weights are driven from the scroll position against section offsets. State → city completes as the theme arrives; the city holds at 26 % under the lineup and brightens only once the gazetteer has passed, so the gaps between sections show the city, not black; city → room completes as the room arrives, with the gold points reading their targets from the live DOM positions of the agenda rows (hidden phone days send theirs off-screen); the room gives way to the city again for the place section.
Reduced motion: no twinkle, no breath, instant boot, instant morphs; a "motion on / off" control sits in the chrome (bottom centre and footer).
Without JavaScript the hero shows the real NASA raster as an image, the cartouche sits at its default corner, and every fact, the fork, the gazetteer, all four days and the ticket link remain plain HTML.

Built with three.js 0.180 (the vendor build) as two Points objects and one small shader: the 52,000 base lights with additive blending, the 177 programme points with normal blending on top. No post-processing.

The fork and the mind

The fork is printed as two verbs on one line. "Zoom ↓" is the standard route: the page read in order is literally a descent, and the zoom levels under it (state · city · room) are its stops. "Type" is the open rule beside it: one hairline with a gold caret, the line "ask the light" at 44 px, and three suggestion verbs set under the rule in small caps (who speaks tuesday · what does a pass cost · where is it). The two doors weigh differently, one word against an open line, and now they share a baseline.

The mind is shown by what it does to the material. Typing into the rule dims the baseline lights to 45 % and enlarges and whitens the gold points: the programme comes forward out of the state. An answer is a section in the page's own grid: numbered (01), the question in sentence case as its heading, the say line in the same family on a narrower axis, the components beneath in the page's type (time, title, names), the source as a label, and a link into the room. The first answer is already on the page when you arrive, set in the Gulf where the map is darkest. On the standard route the same rule would ride the bottom edge of every page as the omnipresent assistant, and the edge card ("Asked on this page · do passes include the receptions? · not yet published") rotates one moderated question from other visitors. There is no bubble, no avatar, no orb and no face: the only thing that ever represents the mind is the light rearranging.

What to build next

Compose answers live: the mechanics team's model fills the same numbered section grammar; while it thinks, the lights re-weight (the field reorganising is the thinking state); rows develop through a dither threshold rather than fading. A new answer re-runs the Gulf search for its own size, so it always lands in open water.
Give the points somewhere to go between targets with a GPGPU flow field (synthesis recipe 9) so the state → city → room descent drifts instead of interpolating.
Replace the 500 m VIIRS city with a street-scale Austin (road classes lit from OpenStreetMap, the river and Lake Travis dark) so the city zoom holds up on a 5K display; keep the state view on the real raster, and consider the nightly VNP46A1 product so the page is never the same twice.
Touching a gold light opens the session or the speaker's portrait in place; touching a town prints its name; the room gets per-day zoom levels and real rooms when the venue is announced.
Make the page's single signal colour follow ERCOT's grid-conditions state (green, yellow, orange, red) on the day, as lens 06 suggests, with the gold reserved for the programme.
Accessibility and weight: keyboard focus on the rule and the lights, a text alternative for the map, point budgets per device class (52k desktop, 22k phone, both measured fine), and a fallback for devices without WebGL 2 (the raster image is already in place).
Replace the Orbit Zero patch with an upstream fix if Hubot Sans ever ships a plain-zero alternate (it has no zero or stylistic-set feature today).

Risks

The glowing globe, constellation lines and bloom: avoided by construction (flat orbital view, no lines except the plumb line and the strip's leaders, no post-processing), but the additive cores do whiten in the metros; keep point sizes small and never add a bloom pass to "make it pop".
The mask must stay a knockout: soft, feathered and only behind type. Raised to full strength or given hard edges it becomes the panel the page refuses.
The city view reads dusty at 500 m resolution; the fix is real street geometry (next step 3), not more brightness.
Purple must stay data: one small light on San Antonio and a dot in the footer legend. The moment it becomes a surface or a gradient, the page joins the AI-purple cliché.
The cartouche anchor is computed for each viewport; on short or very wide screens the Gulf can be smaller than the answer, and the search then takes the least-lit water and lets the mask carry the rest.
Hairline Hubot Sans at wght 200 wants a Windows ClearType check at 44 px and 13 px; the labels are set at 300 for that reason.
Orbit Zero is a Modified Version under the SIL OFL 1.1: it must keep a name without "Hubot" and ship with the copyright notice and licence.
Portraits are hotlinked from the ETS site and Whova CDN and the lineup is ETS26 stand-ins, labelled as sample data in the lineup head, the room's head, the cartouche source and the footer colophon; the real ETS27 lineup replaces them without a layout change.
NASA imagery is public domain; the credit line stays in the footer.