# v1 · the Lookback's strip on the sky sheet

The Lookback (tlb.betteroff.studio) rebuilt as "ETS through the years": one endless strip of Zpryme's own photographs of past summits, newest first, on the opening's sky-white paper, with the title and the years written in the marker hand. 107 photographs (2014 to 2019 and 2022 to 2024) and five written cards for the years without photographs (2020, 2021, 2025, 2026, 2027), 112 moments in all. Self-contained: `index.html`, `timeline.css`, `timeline.js`, the baked data `moments.js`, the opening's `marker.js`, `brush.js`, `paper.js` and `opening.css` copied unchanged from round 01, and the 720 px copies in `photos-720/`. No build step, no bundler, no library; the only network dependency is Google Fonts (IBM Plex Mono and Kalam).

## What it does

- **The strip.** Every moment is a slot 320 px wide (250 px on a phone) at its photograph's own ratio, centred on one line; four are in view at 1440, one and a half on a phone. Each slot carries its own `translate3d`, wrapped around the loop length, so the strip has no end: after ETS 2014 comes the 2027 card, then 2026, 2025 and the 2024 photographs again. The page opens on the first 2024 photograph; the 2025 and 2026 cards sit one nudge to the left. 2024 is the newest year with photographs, so the strip starts there rather than on a card.
- **The feel.** Input moves a target; one `requestAnimationFrame` loop eases the drawn position toward it with the Lookback's lerp of 0.1 per 60 Hz frame, scaled by frame time (`1 - 0.9^(dt/16.67)`), and no snap. Measured in headless Chrome (`shots/steps/evals.json`, `samp-wheel-like`): a 400 px step is 28 % done at 50 ms, 61 % at 150 ms, 92 % at 400 ms and within a pixel from about 0.8 s, the same curve the teardown measured on the original (time constant about 160 ms). Wheel: 0.5 px per `deltaY` unit (the original: 48 px per notch), `deltaX` honoured, line and page modes normalised. Drag: pointer events with capture, twice the pointer on a mouse and 3.5 times on a finger, the original's multipliers; a press that moves under 10 px is a click. A 220 px synthetic swipe on the phone moved the strip 770 px, as on the Lookback, and the page did not scroll (`scrollY` 0, document height 844).
- **The tilt.** The content of each slot turns by `rotateY(lag × 0.05deg)` under a 1000 px perspective, as in the original, but clamped to 6 degrees (the original reached 71 on a jump). A 600 px drag produced a lag of 186 px and the frame shows the photographs leaning at the clamp (`shots/frame-01-mid-drag.png`). No tilt on phones or under reduced motion.
- **The year.** Written large in the marker hand at the top right, one canvas per year from `Marker.write` at `700 120px Kalam` (the title "ETS through the years" is written the same way and plays as the intro). The year is the one under the centre of the screen, not the one entering at the right edge, so what you read matches what you look at. On a change the old year slides out and the new one rises from below while it is being written (0.65 s roll, 0.6 s of writing); moving back in time it rises from below, moving forward it drops from above. `shots/frame-04-year-rolling.png` catches "202" with the 3 still to come. A visually hidden live region announces the year.
- **The ruler.** A canvas across the foot of the screen, 11 px between ticks, five ticks per moment (three on a phone); the middle tick of each moment is the moment, the first of a year is a major tick with the year under it in mono. The ruler's offset is the strip's position times the same tick step, so the ticks are the photographs, not a second clock that drifts past them (the original's ran 1.45 times ahead). The tick under the centre grows to 50 px and full ink; ticks near the pointer bump as on the original; a click on the ruler brings that place to the centre and a drag scrubs. Under the ruler a mono line gives the year's facts (summit code, theme, dates, count) from the inventory.
- **Cards for the years without photographs.** A paper-toned card the size of a slot: the year and a short line written in the hand when the card first comes into view ("2020 · the virtual summit", "2021 · the virtual summit", "2025 · San Antonio", "2026 · hack the planet", "2027 · free your mind"), a mono line under them (online · September 2020; Boeing Center at Tech Port · photographs not yet shared; Austin · May 3 to 6, 2027). The sequence 2014 to 2027 is complete and says what is missing instead of hiding it.
- **Opening a moment.** A click, a tap, or Enter on a focused photograph grows it into a detail view: the slot's box is measured, a clone is placed in a box fitted to the screen (56 px side margins and room for the caption on a laptop; the full width on a phone), and the clone is animated from the old box to the new one with a transform transition of 0.8 s on an expo-style curve (`cubic-bezier(0.16, 1, 0.3, 1)`). The 720 px copy flies; the 1600 px original is decoded in the background and swapped in when ready (the capture shows `natural` 1600 × 1068 after the open). The caption is the year in the hand, the shoot date when the file carries one, the original file name, and the reason the photograph was chosen, from the manifest. Close (the button, the wash, Escape) flies the clone back into the strip's current box; the strip is frozen while the detail is open and resumes where it was. Left and right arrows or the two buttons step to the previous or next moment with a short crossfade; the strip follows underneath so closing still lands on the right slot. Focus goes to the close button on open and back to the photograph on close.
- **Keyboard.** Left and right snap to the next or previous moment (the stops are the slot pitch, so they wrap with the strip), up and down nudge 120 px, Space moves a screen, Page Down and Page Up jump a year, Home goes to the newest photographs and End to 2014; "keys" in the chrome lists them. Every photograph is a `<button>` with alt text made of the inventory's reason and the year; Tab reaches all 112, and focusing one that is out of view brings it to the left edge (keyboard focus only, so a mouse press does not jump the strip). All of these were exercised in `shots/steps/keys.json` and the results are in `evals.json`.
- **Phone (390 × 844).** 250 px slots, the title and the year side by side at the top, the ruler with year labels, the caption in one line; the body is fixed and `touch-action: none` on the stage, so a finger moves the strip and never the page. The detail view uses the full width.
- **Reduced motion.** The drawn position equals the target every frame (the 400 px step arrives in the first sample), no tilt, no intro rise, the title and the years appear fully written, the detail view appears in place instead of flying, the year swaps instead of rolling.
- **Images.** 107 copies at 720 px on the long edge, JPEG quality 80, 6.8 MB in all (the 1600 px set is 27 MB), each with `width`, `height`, `loading="lazy"` and `decoding="async"`; a paper-toned block holds the slot until the file arrives and the photograph fades in. The 1600 px originals are used only by the detail view.
- **Capture hooks.** `?still=1` skips the intro, `?at=<index>` starts on a moment, `?pos=<px>` sets the position, `?rm=1` forces the reduced-motion path; `window.__tl` exposes the position, the centred moment and `open`, `close`, `jump` for the capture steps in `shots/steps/`.

## From The Lookback: kept, changed, dropped

Kept: the fixed stage that does not scroll; one row of fixed-width photographs at their own heights on a centre line; the target-and-lerp easing with its exact constant; per-slide wrapping for the endless loop; the lag tilt under a 1000 px perspective; the 10 px click threshold and the 2 and 3.5 drag multipliers; the ruler as a quiet index with a growing centre tick and a hover bump; the hover labels (number and date under the photograph); the photograph that flies into its detail and back; the entry in which the photographs in view rise into the row one after another.

Changed, and why: the sheet is the opening's sky paper with its tooth, mottle, vignette and grain instead of flat white with film grain (the look belongs to the site, the mechanics to the Lookback); the wordmark and its rolling digit became the title and the whole year written in the marker hand; the year changes under the centre instead of at the right edge; the ruler's mapping uses one step for drawing and position and is labelled with years; the tilt is clamped; the detail is a view on the same page with a FLIP instead of a route change that moves nodes between pages; the images are sized to the slot; photographs are buttons with alt text, there is a live region, and reduced motion is honoured; the cards fill the years the original would have skipped; slots are 320 px rather than 270 because the ETS frames are nearly all landscape and read thin at the original's width.

Dropped: the "Enter with sound" intro and the scrambled month index, the music player and the tick and click sounds, the menu, the Index and Surf pages, the DatoCMS layer (the data is baked into `moments.js` with the Drive ids kept so every choice can be traced), the video slides, the blend-difference chrome.

## Facts and the 2013 question

The brief asked for a sequence from 2013. Eventbrite and the site's own sample data call ETS27 "the 14th Energy Thought Summit", the Team Drive has one summit folder per year from 2014 to 2027, and the inventory records ETS23 as the tenth anniversary; all three put the first summit in 2014, and the inventory found no 2013 folder or file anywhere. A 2013 card would be an invented year, so the strip runs 2014 to 2027. If a source says otherwise, a card is one entry in `YEARS` in the bake script's table (`moments.js` is regenerated from the manifest). Everything written on the page comes from `_inventory/INVENTORY.md`, `photos/manifest.json` and the site brief: themes, dates, venues, counts, the 14th summit, Austin May 3 to 6, 2027. The 2023 selects carry a wrong camera clock (2000-01-01); those dates are shown as unknown.

## What is not done

- The intro is the minimum (the title writes itself, the photographs rise); there is no entry choice and nothing waits for the visitor.
- Touch was exercised with synthetic pointer events in headless Chrome, not on an iPhone; the 3.5 multiplier and the lack of inertia on release are the original's and may want tuning on a real device. Frame timing comes from in-page samplers, not a GPU recording.
- A fast fling shows paper-toned blocks where lazy images have not arrived yet; a dominant-colour placeholder per photograph (the Lookback's `bgColor`) would be kinder, and AVIF or WebP copies would halve the weight.
- The ruler's year labels crowd where the single-card years sit side by side (2027, 2026, 2025 and 2021, 2020).
- A card opened in the detail view is its face enlarged from the strip's canvases, so the hand lines are a little soft at that size; writing them again at the larger scale is the fix.
- Not built: the place on the site (a route of its own and the mind's "what was ETS like in 2019" hook) and the drawer treatment from `bar-stage-drawers.md`; this version opens the moment in place.
- The missing years need a Zpryme person: most of 2024 (Day 1 and Day 4 selects), all of 2025 and 2026 are not shared with webmaster@ (see `_inventory/INVENTORY.md`). Their cards say so.