Horizon Vision Statement About Block for React

Edit STATIONS at the top of the file: each has a when heading, a bold lead sentence, a detail sentence and a dot class that draws its dot. Keep three: from lg they sit in three columns, and the vision's heading is written for a three-column page. Give the dots as many classes as you like, but keep them hollow or filled in the foreground colour, never the primary one.

A date goes stale and turns a vision into a deadline someone has to defend. A distance from now stays true until someone edits it, and it reads the same for a reader a year from now. The heading is the term for each station, so the outline lists "Now", "In three years" and "In ten years".

The stations are an ordered list, in time order, each an h3 followed by one paragraph. The track, the dots and the lines are decorative and hidden from assistive technology; the order of the list carries the meaning they draw.

Each station draws a short vertical line in its own box, from its dot to the next station's, so the track is continuous without a separate element or any script. The dots and the lines sit at the start edge, so in a right-to-left layout the track moves to the right with the text.

The heading and the horizon fade up once on load. With reduced motion they simply appear. The block has no state and no script, so it can render on the server.

The heading steps down to text-3xl and the three stations stack, each with its dot and heading on one line and its text under it, joined by the vertical line. Nothing scrolls sideways at 320 pixels.