---
title: Document Play Prototype
---

<x-player-app />

# Document Play

Play turns an ordinary document into focused reading or a slide presentation
without changing its built output.

[@link.play Play this document](./play.demo.md)

The runtime infers this heading and each paragraph as a Beat. Use the floating
control to start, then the arrow keys or controls to move through the route.

---

## Native scrolling stays native

- Scroll normally in Focus mode.
- Presentation mode uses browser-native Block snapping.
- Scrolling temporarily lifts the spotlight.
- When scrolling settles, Play adopts the visible Beat without scrolling back.

---

## Focus can be quiet or strong

The Low, Medium, and High control changes how much surrounding content fades.
Low leaves the document visible and marks only the active Beat; High removes
nearly everything except the current thought.

---

## Links become Play actions

<p data-pmx-beat="actions">
  The active Beat can offer an ordinary
  <a href="./play-lecture.demo.md">lecture example</a> as a large touch target.
</p>

The first action also responds to Enter, while number keys activate actions by
their displayed position.

---

## Authored choreography stays small

The default route works without annotations. Authors can name important Beats
for direct links or constrain one region to an explicit sequence.

<div data-pmx-beats="explicit">
  <p>This setup remains visible but is not a stop.</p>
  <p data-pmx-beat="choreographed-reveal">
    This paragraph is an explicitly choreographed Beat.
  </p>
  <p data-pmx-beat="final-thought">
    Components can add the same markers at runtime and react to
    <code>player:beat-enter</code> without handing their state to Play.
  </p>
</div>