0 Fork 0

Files

T

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

2026-10-29 02:31:50 +01:00

10-chart-scroll: Unrolling chart (final report)

Status: done. The spike is built and was checked in headless Chrome at 1440×900. Nothing is committed.

This spike uses mockup 01's reading model, drawn as a portolan sea chart on a vellum roll.

The route. Songs sit as ports on one dashed red route that runs left to right. Each song is 220 units after the last, and every in-story year adds 600 more, so the length of open water stands for elapsed time.
The route curve. The route is a cubic Hermite spline, y = f(x). It curves gently but can never double back.
Time labels. "A year passes" and "two years pass at sea" are written along the water. A nautical scale bar doubles as the time axis, with labels such as "The year Troy falls" and "Year 1 after Troy".
Motif threads. Threads sit beneath the sea, as in 01. A fixed legend on the left has rows aligned to the threads.
The ship. The ship rides the route at the scroll position, so x = first port + span × scroll fraction, and it turns with the route's tangent. At any given scroll position the ship is always in view and sits exactly on a port.
The minimap. A thin minimap at the top shows the land, the route, the saga folds, a viewport frame and the ship marker. Click or drag it to jump.
Unrolling. Rods sit at both edges and cast shadows, and the chart unrolls once from the west on load.

What works

Reading at a glance. In the default view, the titles, the italic story-time labels, the saga names and the year scale can all be read without hunting.
Time as distance. Elapsed time reads as distance sailed. The two-year gap before Storm is a long, empty stretch of open sea with rocks, a compass rose and the storm swirl.
Saying where you are. The ship and the caption ("Moored at Polyphemus. The island of the Cyclopes, in The Cyclops Saga.") answer "where am I?" more clearly than a scrollbar does. The minimap ship marker carries the same answer to the whole-voyage view.
Selecting a motif. Choosing a motif from the legend, or with ?motif=, does the following:
- lights its thread and labels each knot with its part names (for example "Verse 1, Verse 2");
- rings the matching ports;
- thickens the route around each port where it appears;
- tints those ports on the minimap;
- scrolls to the motif's first appearance.
One chart, two uses. The ?overlay=1 view is the same component at scale 0.62, in a frame over a dimmed CSS sea. It shows a "You are here: Survive" tag, and clicking a port opens a popover with "Sail here", which animates the ship along the route.
Input. Dragging, the vertical wheel (it scrolls sideways), the left and right arrow keys (they step from port to port) and Enter (it opens the port) all work.

Overlay text is too small. At 0.62 scale, the overlay's port titles and story times are about 11–12px. They are legible but cramped, so a real in-3D overlay would need labels that don't scale down with the chart, or a shorter crop.
Little of the voyage fits on screen. Only about 4 to 5 ports fit across the viewport at a time. A big story gap, such as the one before Storm, can fill most of the screen with empty sea. That is honest about time, but you see little at once, and the minimap has to do the work of the overview.
The ship's speed isn't constant. The ship moves linearly with scroll, so it seems to "lag" or "lead" the visible centre at the ends of the roll. That makes sense, but it surprises people at first.
The drawer covers part of the chart. The song drawer covers the right third of the chart. The ship stays visible because it moors at the port, but ports to the east are hidden while it's open.
The unroll animation isn't reliable everywhere.
- In headless Chrome it sometimes catches mid-unroll, or it doesn't play at all inside the overlay frame. For that reason the overlay skips the animation.
- Use --virtual-time-budget=4000 for screenshots.
- In a real browser it should behave, but I didn't verify that interactively.
Unverified geography. The geography is decorative, as in 07. The islands are seeded blobs and the coast of Troy is a wave function. That makes it portolan-flavoured, not accurate.

screenshots/10-chart-scroll-default.png: the Troy Saga, with the ship moored at the first port.
screenshots/10-chart-scroll-motif.png: ?motif=warrior.
screenshots/10-chart-scroll-song.png: ?song=polyphemus, with the drawer open.
screenshots/10-chart-scroll-overlay.png: ?overlay=1, with "You are here: Survive".
screenshots/10-chart-scroll-overlay-sail.png: ?overlay=1&song=remember-them, showing the "Sail here" popover. This one is extra.
screenshots/10-chart-scroll-storm.png: ?song=storm, showing the open-sea end and the storm swirl. This one is extra.

src/mockups/10-chart-scroll/chart.ts: the geometry, the route spline and the coastlines.
src/mockups/10-chart-scroll/main.ts: the page.
src/mockups/10-chart-scroll/style.css
index.html is unchanged and keeps the credits footer and the credits.css link.

bun run typecheck passes.
bun test gives 41 passing and 1 failing test. The failure is registry has 7 mockups. It predates this spike: the registry already had 11 entries at HEAD (commit 52feed5 added slots 08–11), and the test lives in a shared file I'm not allowed to touch.
The full build fails, but not because of this spike. The repo-wide bun build currently fails with "Multiple files share the same output path". The cause is that the 09 and 11 style.css stubs minify to identical output, since only their comments differ. To verify this spike, I built from a scratchpad copy where only those stubs were disambiguated. The 10 stylesheet is unique.