Interaction

Click headings or use arrows and Home / End. In the standalone preview, the wheel moves along the rail. Enable the linked reading preview to track real article scrolling and jump to headings on click.

States

Title “On this page”, 8 entries; initial section “Installation”. Installation / ›Prerequisites / ›Installation Steps / ›Configuration / Usage / ›Customizing Content / ››Submenu Content / Features. Indent 14px; row height 32px; type 14px; plane 16px.

Timing

Follow response basis 520 ms, using an analytical critically damped spring that preserves position and velocity. Turning response is capped at 300 ms. Reverse travel must exceed 2px before changing direction to avoid jitter.

Enter and exit

The plane follows a polyline measured from row centers, turning with its tangent. Read path and nodes become solid; the remaining path stays dashed. Reading offset 96px; linked content false; accent #333333; theme light.

Repeated input and interruption

Rapid selection retargets the current position. A clicked heading stays pinned until the next wheel, touch or scroll-key action; the final section remains reachable near the document end. Pause, background and inactive previews freeze movement, turning, demo age and programmatic scrolling. Content edits immediately update the TOC and article headings. Current click, scroll position, focus and observation speed are transient and excluded from JSON.

Reduced motion

Plane and reading position settle instantly; timed demonstrations are disabled. Click, keyboard, real scrolling and node state remain available.

Default configuration

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

{
  "schemaVersion": 2,
  "recipeId": "rail-toc",
  "durationMs": 520,
  "delayMs": 0,
  "easing": [
    0,
    0,
    1,
    1
  ],
  "offsetX": 0,
  "offsetY": 0,
  "scale": 1,
  "loop": false,
  "interruption": "retarget",
  "tracks": [],
  "railToc": {
    "title": "On this page",
    "items": [
      {
        "id": "installation",
        "label": "Installation",
        "depth": 0,
        "body": "Start with a clear path. The contents list keeps every section within reach."
      },
      {
        "id": "prerequisites",
        "label": "Prerequisites",
        "depth": 1,
        "body": "Gather the essentials before you begin. Related sections sit one step inside their parent."
      },
      {
        "id": "installation-steps",
        "label": "Installation Steps",
        "depth": 1,
        "body": "Take one step at a time. Select a heading to jump directly to its place in the article."
      },
      {
        "id": "configuration",
        "label": "Configuration",
        "depth": 1,
        "body": "Choose the spacing and reading position that suit your page."
      },
      {
        "id": "usage",
        "label": "Usage",
        "depth": 0,
        "body": "Read at your own pace. The paper plane follows your progress along the rail."
      },
      {
        "id": "customizing-content",
        "label": "Customizing Content",
        "depth": 1,
        "body": "Give each section a useful name. Short, concrete labels make a long page easier to explore."
      },
      {
        "id": "submenu-content",
        "label": "Submenu Content",
        "depth": 2,
        "body": "Use a deeper level for details that belong together. The rail bends to reflect the hierarchy."
      },
      {
        "id": "features",
        "label": "Features",
        "depth": 0,
        "body": "Return to any section whenever you need it. Scrolling upward turns the plane around."
      }
    ],
    "initialIndex": 0,
    "indent": 14,
    "rowHeight": 32,
    "fontSize": 14,
    "offset": 96,
    "planeSize": 16,
    "accentColor": "#333333",
    "theme": "light",
    "showContent": false
  }
}

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.