The duck curve
One 24-hour net-load curve, drawn as the Hill Country horizon in a single ink stroke, is the whole site: scrolling is the day's hours, the sky follows the sun across them, the programme is laid in the land under the ridge at its real clock time, and the mind is the sun.
The story
The grid's own data already looks like a landscape. ERCOT's net load for October 13, 2026 (generation minus wind and solar, in 15-minute means, read from the public Grid and Market Conditions dashboard) has a night plateau, a morning shoulder at 07:00, a solar belly down to 27.7 GW at 10:15, a ramp through the afternoon and a peak of 54.8 GW at 19:00. Drawn with no axes, no gridlines and no legend it is a horizon, and that horizon is the site.
The page opens before sunrise and the light comes up with the sun. The first screen is then a poster at dawn: a pale sky over a land a few steps darker, the ridge in one black stroke across the full width, and a large orange sun half risen behind the hill at 06:47 (Austin's sunrise on May 3, 2027). "Free your mind" is set in a hairline serif in the sky, starting where the sun starts. The facts live in the corners: ETS27 · Energy Thought Summit · May 3–6, 2027 · Austin, Texas at top left, Tickets · from $320.89 at top right, venue announced soon · 14th edition and #LoveYourEnergy at the foot. Five words hang under the ridge at the hour they belong to, each with its time above it: theme at 08:15, lineup at 12:20, agenda at 14:30, tickets at 19:00, place at 20:09. That is the navigation, and it is also the day. Nothing on the first screen is chart furniture: there is no hour row, no drop line and no readout until the visitor scrolls.
Scrolling walks the sun across the day and the sky with it. The stage compresses into a horizon band that stays as the site's chrome: sky above the ridge, land below it, and the land runs on into the page, so every section is literally laid under the horizon. A readout appears beside the sun with the hour, the net load in gigawatts and the grid's gloss (sunrise, the belly, the ramp, the peak, sunset, night). Each section is placed where the sun is: the theme at registration, the composed answer on Tuesday morning, the lineup in the solar belly, the agenda climbing the ramp in a warming light, tickets in the sodium haze at the peak, Austin at a brown sunset with the type turned to stone, and the colophon at midnight, where the sun has set behind the land. The page is never the same twice once the curve is loaded live: the horizon is tomorrow's weather for this industry.
Typography
- Display: Newsreader, weight 200, optical size pinned at 72, 150 px at 1440 (clamp 84 px to 10.4 vw), leading 0.92, tracking −0.018 em. Used for the theme, the editorial section headings ("Space to think", "Seventy-seven minds", "Four days, by the hour", "Tickets", "Austin") and the two ticket prices, set in whole dollars.
- The visitor's voice: a composed answer's heading ("Who's speaking Tuesday morning?") is the same size in Newsreader italic, weight 300, so a question the visitor asked never reads as one the editor wrote. The mind's say line is the same italic at body size, optical size 20.
- Reading: Newsreader, weight 400, optical size 16, 17 px, leading 1.5. Session titles, speaker names at weight 500, body copy. The one action sentence, "Buy on Eventbrite →", is Newsreader at 24 px.
- Labels: Martian Mono, width 100, weight 400, 11.5 px, tracking +0.06 em. Hour marks, corners, the composer, the contents words, session times and types, footnotes and the state line. Emphasis within labels is Martian Mono at width 112.5, weight 800.
- Separators stay with the word before them, so a wrapped line never starts with a dot; names are never broken across lines.
- On the phone the display falls to 60 px and the labels stay at 11.5 px.
Colour world
- The colour world is the day. The sky follows the sun through flat keyframes, interpolated in OKLab with no gradient on the page: night
#15171Ato 05:00, dawn#CBC6BCat sunrise, limestone#EEE9DDfrom 09:00 to 16:00, sodium haze#EBC9A4from 18:30 to 19:54, sunset#4A3328at 20:09, night#15171Aat 24:00. The haze is held through the tickets section so the prices and the link to buy never sit on a mid-tone; the dusk falls between tickets and place. - The land is the same hue 0.06 darker in OKLab lightness: the ground under the ridge, which hides the sun before sunrise and after sunset, and the page surface laid in it. At noon the page is a stone limestone, not an ivory.
- Ink
#17130Ffor the stroke, the type and the portraits, at .7 for secondary labels (AA at 11.5 px) and .22 for hairline rules. When the land's lightness falls below 0.56 the ink, labels and rules turn to limestone, which is the balanced point for contrast on either side of the flip. - Sodium orange
#E8782Afor the sun, the sun's hairline through the crowd and the stairs, the session in progress under the sun, the composer's caret and its rule in focus, and hover states. Nothing else is coloured. - Portraits are printed in ink on the stone (grayscale, contrast 1.3, multiply) until the sun reaches their hour, when they return to colour. Speakers without a portrait are filled discs, ink at 15 % on the land, or sodium at 45 % when lit; never empty rings.
Layout grammar
- The stage is a fixed element that is the full viewport at the top and compresses to a 36 vh band over the first 50 vh of scroll (CSS scroll-driven animation, no JavaScript needed for the compression). Everything inside is positioned in percentages so the horizon flattens as it shrinks.
- The band is the chrome: the facts in the top corners, the stroke with sky above and land below, the five contents words hanging under the ridge (their times fold away in the band; two words within ninety minutes of each other step down a line, so place hangs under tickets), the composer rule at bottom left and "Free your mind" at bottom right. There is no nav bar.
- Content sits in a two-column grid: a 200 px label column (the hour span and the section name in mono) and a content column with the display heading and a 64 ch body. Section rules are hairlines.
- The two hour-aligned materials bleed to the full width so their x axis is the band's x axis, and the sun's hairline crosses both behind the type. The crowd is every speaker as a 48 px disc at the hour they first take the stage, packed into piles. The four day stairs place each session at its start time, stepping down one line per session, so a day reads as a slope. Titles wrap to two balanced lines and are never truncated; from 14:30 on, a session hangs to the left of its time stamp, right-aligned and ending at its mark, so the afternoon reads leftward instead of running off the page. Every row carries a knockout in the land colour so the hairline passes behind the letters.
- Under the crowd, the lineup index is a three-column list: each name bound on one line, then title and organisation in mono, with a hanging indent.
- The answer is a numbered section in the same grid: "01", the question in the visitor's italic, the say line, the sessions as rows with their people in three fixed columns aligned at the top, and a mono footnote with the source.
- Tickets at the peak are two prices in whole dollars at display size ($321 and $908), two audiences, two phases, "Buy on Eventbrite →" directly under the prices, and a footnote with the exact fee-inclusive prices ($320.89, $907.78, then $374.25 and $1,227.91).
- On the phone the day stands up: the first screen is the same curve rotated to run top to bottom down the left half, with the theme stacked on the right, the five words in a column beside the curve at their hours, and the composer with all three suggestions under it. The standing curve keeps its height while the stage shrinks, so the rising edge crops it rather than squashing it; past 32 vh of scroll the stage cuts to a 124 px band: the corners, the lying curve with sky and land, the five words under it and the ask rule at its foot. The content takes the full width. The stairs become a time-and-title list, the crowd a packed grid of discs, and the index two columns of name and organisation, the first twelve, then "all 77 minds" (a disclosure that works without JavaScript).
Motion and life
- Entry: the page opens at 06:06 before the light; over 2.6 s the sky comes up to dawn while the stroke draws itself from 00:00 to 24:00, the sun rises out of the land at 1.05 s, the three words of the theme lift in at 150 ms intervals, then the contents, the composer and the fork fade in. The resting state at 4.5 s is the poster above.
- Scroll: the sun follows the curve through the day on a piecewise map from section offsets to hours, climbing off the ridge after sunrise and setting behind the land after sunset; the sky, the land and the ink change with the hour; the readout fades in after the first scroll and re-letters the hour, the gigawatts and the gloss; the session in progress under the sun on each day turns orange; the portraits within half an hour of the sun come into colour; the stage compresses and the theme fades. The hairline through the crowd and the stairs moves with the sun. At 24:00 the sun has set below the land.
- The composer's caret blinks in sun orange; the ask verbs underline on hover; a stair line and a crowd disc turn orange on hover. No other motion.
- Reduced motion skips the entry (the stroke drawn, the sun risen, the words settled, the light at dawn) and keeps the band, which is position rather than motion for its own sake. The "motion on" control in the footer stops the sun following scroll.
The fork and the mind
- The fork is printed as two verbs with different weights. "scroll · the day in order, 08:15 → 21:00" is the standard route: the page read top to bottom is the programme in time. "ask" is the mind: a hairline rule with a sun-orange caret and three suggestion verbs along it (who speaks tuesday · what does a pass cost · where is it), no box, no pill, no send button; the rule turns orange when it has focus, because the mind is the sun.
- Asking moves the sun. A question is routed to the hour that answers it, the page scrolls there, and the sun arrives with it: Tuesday's speakers at 09:00, a pass at the 19:00 peak, Austin at sunset. The material the mind acts on is the horizon, the light and what sits beneath them.
- One answer is already composed: "01 · Who's speaking Tuesday morning?", with the say line, the four Tuesday-morning sessions, their ten people lit in colour while every other portrait on the page stays ink, and the source footnote. The footer carries "02 · ask" as the next section, which is the visitor's to write.
- The assistant lives in the chrome: the same rule in the band on every scroll position, on the desktop and on the phone, and again at the foot of the page.
- The lab-notebook state line in the footer: snapshot 2026-10-13 · 77 speakers · 50 sessions · sample data · curve ERCOT 2026-10-13 · belly and peak figures.
What to build next
- Load the curve live from ERCOT (or Grid Status) through a small server-side proxy with a daily cache, falling back to the baked snapshot in
data/. Add the grid-conditions state as a one-word gloss when it is not normal; the sky could then take the grid's condition colour at the peak. - Make the composer real: route the question to the mind, let it pick the hour and the components, and insert the answer as the next numbered section at the right place in the day, with the sun moving to it. Keep older answers as sections.
- Give the stairs and the crowd their hover and tap states: a session line opens its card in place; a disc opens the speaker with the sessions they are in.
- The standard route's deeper pages (a session, a speaker, the venue once announced) inherit the band and the grid; the sun and the sky then show the session's hour.
- Serve the portraits from a resizing image service: the Whova originals run up to 2271 px square for a 48 px disc.
- Real ETS27 content as it is announced; the sample-data markers come off one by one as the state line changes.
build/build_duck.pyregeneratesindex.htmlfrom the sample data, the snapshot,build/duck.cssandbuild/duck.js; it is a convenience for the mockup, not a build step the page needs.
Risks
- A dashboard: the seed's risk line. Held by drawing no axes, gridlines or legend, keeping the first screen free of any readout or drop line, setting the hours as type, putting the facts in the corners, making the sun a disc that the land can hide, and giving the ridge a sky and a land so it reads as a horizon in the first second. The crowd and the stairs are the places it could slip back into a chart; they are kept to one ink and one stroke, and the hairline that crosses them is the sun's, passing behind the type.
- The claude.ai register (ivory, serif, orange): broken by the light. Only the late morning and early afternoon are limestone, and even then the page sits on the darker land; dawn is grey, the peak is sodium, sunset is brown and the end is night.
- The stairs leave the night empty on the left of every row; this is the honest shape of the day, but a visitor might read it as wasted space. The day headers hold that side.
- Nineteen speakers have no portrait; filled discs keep the crowd a mass, but they are visible. Real portraits will fill them.
- The band costs a third of the viewport on desktop. It is the idea, but a longer session page would want a shallower band.
- A full-page capture shows the whole page at dawn, because the light is set by the scroll position; the gallery's scrolled shots carry the rest of the day.
- With JavaScript off the sun stays at sunrise and the phone shows the desktop path squeezed into the vertical box, with the five words still in a column at their hours; everything remains readable and linked.