This example is deliberately longer than one viewport. It shows keyboard ownership after activating the link above, stable Beat placement, free scroll adoption, and quiet Player chrome without turning the document into a slide deck.
A short paragraph should land near the reading playhead without making the page jump more than necessary.
This longer paragraph wraps across several lines so the Beat Guide has a real content frame to follow. The guide should sit outside the readable lane, move smoothly from the short paragraph, and leave enough space that it never looks like punctuation attached to the sentence.
A blockquote keeps its authored leading rule inside the guide. The guide follows the quote as one thought without covering its decoration.
- First-level list markers stay visible.
- The guide aligns outside the marker lane.
- A longer list item wraps so its full height is represented.
- Nested material keeps its indentation.
- Moving between nested items should not jolt the viewport.
- The final item returns to the parent lane.
The first stop establishes the table. Later stops should highlight one body row at a time while the header remains visible context.
| Phase | Reader question | Expected behavior |
|---|---|---|
| Enter | Where am I? | Table frame is active |
| Step | What changed? | One body row is highlighted |
| Scroll | Can I look around? | Free scrolling stays native |
| Settle | Where do I resume? | Play adopts the visible row |
An ordinary fence is one Beat. It should remain fully readable and reveal any horizontal overflow inside the code surface rather than shifting the page.
export function readingPosition(beatTop: number, viewportHeight: number) {
const playhead = viewportHeight * 0.42
return Math.max(0, beatTop - playhead)
}
This Beat is intentionally tall. A tall Beat should align near the top instead of centering its midpoint and hiding the opening lines. The reader can then scroll naturally through it, and Play should wait until that free scrolling settles before adopting a different Block. The surrounding spotlight relaxes while the page is in motion so dimmed content never fights the reader. When the scroll settles, Play updates once and does not snap the page back. This is also where the compact controls need to stay out of the final lines on both desktop and mobile. Enough copy follows to make the geometry meaningful without turning the fixture into filler: Focus mode is a document reader first, so selection, links, native scrolling, and normal responsive layout remain available even while Play supplies cadence and orientation.
The active Beat can offer an ordinary slide-deck continuation. The action should be reachable from the quiet chrome and preserve active Play settings when it stays inside this PathMX site.
Escape stops Play and leaves this Block in view. Starting again from here should select the nearest Beat instead of returning to the beginning.