Interaction

Scroll the reading panel to update the ring and chapter label. Hover the current chapter pill to open chapters without moving keyboard focus; leaving the pill and expanded menu closes it, while moving within the menu keeps it open. Click a chapter to scroll and close. Touch or keyboard activation still opens the pill and focuses the current chapter. Outside click or Escape closes it; arrows and Home / End move focus; Enter / Space select.

States

Initial preview progress 0%; initially open false. Article title “Attention Is All You Need”; 4 chapters, rendered in this order: 1. “Introduction” (id introduction), body “The 2017 paper introduced the Transformer, a model first tested on machine translation. It replaces recurrent and convolutional layers with attention, allowing more of the training computation to run in parallel.”; 2. “Self-Attention” (id self-attention), body “Each token creates a query, a key and a value. The query is compared with keys to assign attention weights. A weighted combination of values gives that token information from relevant parts of the sequence.”; 3. “Multi-Head Attention” (id multi-head-attention), body “Several attention heads work in parallel, learning different relationships between tokens. Their outputs are combined into one representation. Positional encodings add information about token order, which attention alone does not provide.”; 4. “The Transformer” (id transformer), body “An encoder builds representations of the input. A decoder uses those representations and earlier output tokens to predict the next token. A mask hides future output tokens during training. Both stacks also contain feed-forward layers. The paper demonstrated strong translation results with less sequential computation.”. Edit the article title, chapter labels and body text, and add, remove or reorder chapters. These contents are saved in the configuration.

Timing

Expansion and navigation response basis 500 ms, using an analytical spring that preserves position and velocity. Ring response is capped at 450 ms, layer blending at 240 ms, and label crossfade at 220 ms. Chapter rows enter with a 6% response-time stagger.

Enter and exit

The collapsed pill measures the current chapter label and expands into a rounded menu. Labels and dots fade and move in sequence. Chapter anchor offset 120px; bottom inset 24px; type 14px; accent #222222; theme light. Long labels wrap and trigger remeasurement.

Repeated input and interruption

Rapid navigation retargets the current pose. A clicked chapter remains pinned until the next wheel, touch or scroll-key input. Pause, background and inactive previews freeze motion and programmatic scrolling and resume in place. The toolbar demonstrates one open, jump and return. Live reading position, open state, focus and observation speed are not serialized.

Reduced motion

Ring, expansion and chapter jumps settle instantly; timed demonstrations are disabled. Real scrolling, chapter selection and keyboard interaction remain available.

Default configuration

These values come from the maintained default configuration. Editor drafts and exported changes can differ.

{
  "schemaVersion": 2,
  "recipeId": "scroll-progress",
  "durationMs": 500,
  "delayMs": 0,
  "easing": [
    0,
    0,
    1,
    1
  ],
  "offsetX": 0,
  "offsetY": 0,
  "scale": 1,
  "loop": false,
  "interruption": "retarget",
  "tracks": [],
  "scrollProgress": {
    "title": "Attention Is All You Need",
    "sections": [
      {
        "id": "introduction",
        "label": "Introduction",
        "body": "The 2017 paper introduced the Transformer, a model first tested on machine translation. It replaces recurrent and convolutional layers with attention, allowing more of the training computation to run in parallel."
      },
      {
        "id": "self-attention",
        "label": "Self-Attention",
        "body": "Each token creates a query, a key and a value. The query is compared with keys to assign attention weights. A weighted combination of values gives that token information from relevant parts of the sequence."
      },
      {
        "id": "multi-head-attention",
        "label": "Multi-Head Attention",
        "body": "Several attention heads work in parallel, learning different relationships between tokens. Their outputs are combined into one representation. Positional encodings add information about token order, which attention alone does not provide."
      },
      {
        "id": "transformer",
        "label": "The Transformer",
        "body": "An encoder builds representations of the input. A decoder uses those representations and earlier output tokens to predict the next token. A mask hides future output tokens during training. Both stacks also contain feed-forward layers. The paper demonstrated strong translation results with less sequential computation."
      }
    ],
    "initialProgress": 0,
    "initialOpen": false,
    "offset": 120,
    "bottom": 24,
    "fontSize": 14,
    "accentColor": "#222222",
    "theme": "light"
  }
}

Source code and reuse

The corresponding GitHub example contains the public renderer, default configuration and runnable entry point. Read the interaction notes and preserve the included third-party and font notices when reusing it. The complete website editor is maintained separately.

Using it in your own project

Open the editor to run the actual preview and compare changes. This document does not run a separate imitation. Recheck content, input, focus and layout after integrating an export.

Catalog provenance label: Original implementation. Third-party examples retain their own license and attribution; all current effect renderers are public; the full editor is maintained separately.