States

There are 3 chapters: Overview / Process / Details. Initially “Overview”. Narrow layouts use each chapter’s short label.

Interaction

Real scrolling updates chapter lines. Click the full label row to jump to a stable reading position. Tab, Enter, Space and arrow keys are supported; rails accept no input.

Actual reading progress

Each line uses actual chapter anchors and scroll position. The last chapter ends at the scroll container’s bottom. Scrolling back reverses the line; chapters are never permanently marked read. Rails are outside the link row and accept no click, drag or focus.

Timing

A click fades out for 140 ms, commits the scroll position once, then fades in for 230 ms (370 ms total). It skips the intervening scroll journey. The catalog demonstration also moves the actual scroll container; line progress is never simulated by a timer.

Enter and exit

Navigation stays outside the content layer. A single scroll commit skips the intervening chapters. Completion and interruption remove the mask and restore content interaction. The active chapter changes when its reading position is actually reached.

Repeated input and interruption

The latest click replaces the old target without queuing. Wheel, touch, pointer and scrolling keys cancel the transition and restore interaction. Pause and background freeze transition time; resume continues it. Leaving a card clears its demo and restores the configured beginning. Manual reading suppresses automatic replay until re-entry.

Appearance

Theme auto; accent #2447d8. Type 14px desktop / 13px narrow; weight 350; click rows 44px; line 1px. Gap 28px, inset 32px, rail gap 7px, demo section minimum height 480px and top inset 24px.

Reduced motion

Tab focuses chapter links; Enter / Space activates. Left/right arrows and Home / End move link focus. Keyboard navigation transfers focus to the destination heading. Reduced motion jumps immediately and retains scrolling and controls. Navigation stays outside the content transition layer, with no duplicated header, brand area, blocks or dots.

Export and integration

Preview, description, JSON, Motion parameters, offline HTML and the runnable project share one configuration and DOM engine. Supports 1–6 chapters. Selection, scroll, focus and demo time are transient. connect binds a real scroll container or window; resolve maps IDs to sections; target optionally supplies stable reading coordinates for complex scenes. An external surface enables fading; keep navigation outside it. Without a surface, bound navigation jumps directly. Call refresh after layout changes. This entry adds no image or video media exporter.

Default configuration

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

{
  "schemaVersion": 2,
  "recipeId": "chapter-progress-nav",
  "durationMs": 370,
  "delayMs": 0,
  "easing": [
    0,
    0,
    1,
    1
  ],
  "offsetX": 0,
  "offsetY": 0,
  "scale": 1,
  "loop": false,
  "interruption": "retarget",
  "tracks": [],
  "chapterProgressNav": {
    "sections": [
      {
        "id": "overview",
        "label": "Overview",
        "shortLabel": "Start",
        "title": "A clear beginning.",
        "body": "Give each chapter a useful name. This reading surface is a working example: scroll to see the line follow your position, or choose a chapter above to jump directly to its content.",
        "tone": "dark"
      },
      {
        "id": "process",
        "label": "Process",
        "shortLabel": "Build",
        "title": "Move with intention.",
        "body": "The whole label row is clickable. The thin line underneath only reports real reading progress. It moves backward when you scroll upward, and never acts as a scrubber.",
        "tone": "light"
      },
      {
        "id": "details",
        "label": "Details",
        "shortLabel": "Refine",
        "title": "Keep the reader in control.",
        "body": "A new destination replaces the previous one. Wheel, touch and scrolling keys interrupt the transition. Keyboard focus arrives with the content; reduced motion moves there immediately.",
        "tone": "dark"
      }
    ],
    "initialIndex": 0,
    "theme": "auto",
    "accentColor": "#2447d8",
    "fontSize": 14,
    "mobileFontSize": 13,
    "fontWeight": 350,
    "gap": 28,
    "padding": 32,
    "rowHeight": 44,
    "lineWidth": 1,
    "railGap": 7,
    "sectionHeight": 480,
    "readingOffset": 24,
    "fadeOutMs": 140
  }
}

Source code and reuse

Open this effect in the editor to export its current configuration, offline HTML or independently runnable project. These entries include the same authored chapter navigation engine used in the preview. The generic example contains no personal portfolio content, controllers or media.

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. Reuse the standalone module or export the exact current configuration from the editor. TuneShape-authored code is MIT; the full editor is maintained separately.