1 Acceptance of These Terms of Service

Welcome to this reading example. The document demonstrates how a quiet table of contents can help people move through a long page. The same navigation can be used for a guide, a handbook, or a collection of product notes. Read any section in the order that works for you.

Each heading has a matching entry in the contents. Scroll naturally to keep reading, or choose a heading to move directly to a subject. The small sailing ship marks your current place without covering the words. The route bends gently around the ship as it moves.

THIS IS DEMONSTRATION CONTENT. The paragraphs describe an example interface and do not set the terms for an account, a purchase, or a real service. Replace this copy with the document appropriate to your own product.

2 Access and Use of the Service

The reading surface works with a mouse, a trackpad, touch, or a keyboard. A wheel moves the article while the contents remains in place. Touch the article and swipe vertically to explore it. Focusing the reading area also makes ordinary keyboard scrolling available.

Navigation stays inside this example. Choosing a heading changes the reading position and the highlighted entry. It does not open a new page, submit a form, or change any information outside the document.

  1. Keep the text readable at the size used by the host page.
  2. Give each section a useful heading and a stable position in the contents.
  3. Let a new scroll gesture interrupt an unfinished jump.
  4. Preserve the reader’s place when the example is resized.

3 Privacy Notice.

This demonstration keeps its reading position in memory for the current instance. It does not send the selected heading or the scroll position to a server. Two examples placed on the same page keep separate positions.

The words in this panel are sample reading material. They are separate from the privacy policy of the website that contains the example. Use the host website’s own privacy information when you need to understand its actual practices.

4 Who May Use the Services?

Use the example when you can manage the reading controls, understand the headings, and choose the parts of the document that are useful to you.

5 Conditions of Access and Use

A long document should remain easy to explore without turning its navigation into a second task. The contents gives a steady overview, while the article provides enough space for continuous reading. The moving marker adds a small amount of character to an otherwise simple page.

The following examples describe the behavior of this reading surface. They are interface notes for this local demonstration, and can be adapted to the needs of another document.

  1. Scroll the article to move between sections without changing pages or opening another view.
  2. Choose a contents entry to travel to its matching heading. The current entry becomes darker and makes room for the ship.
  3. Let the ship move along the dashed route. The route bends around the marker instead of passing through its sails.
  4. Reverse the scroll direction at any time. The marker should slow, turn, and continue toward the new position.
  5. Use the keyboard to focus a heading in the contents. Press Enter or Space to activate the focused entry.
  6. Press the arrow keys while a contents entry is focused to move focus to another entry. Home and End reach the first and last items.
  7. Keep the current section visible to assistive technology by using a current-location attribute on its navigation control.
  8. Allow direct wheel, touch, or keyboard input to interrupt a smooth jump so that the document follows the reader’s latest action.
  9. Keep the two endpoint circles and the complete route visible. Changing the marker position should not shift the surrounding layout.
  10. When the reader requests reduced motion, move directly to the chosen heading and update the marker without spring travel.
  11. Use distinct labels for repeated sections. A contents entry should make sense without requiring the reader to inspect nearby paragraphs.
  12. Do not run an idle animation forever. When the marker settles, the example should wait for the next interaction.
  13. Support more than one reading example on a page. Moving one instance must not change the others.
  14. Remove scroll listeners, observers, and pending animation frames when the example is no longer shown.

6 About the Services.

This example combines a document and its contents in one reading surface. The article contains paragraphs, numbered points, and headings of different lengths. Its navigation follows the current section and also lets the reader jump directly to a chosen subject.

  1. Document layout. The contents stays to the left of the article, with a narrow dashed route beside the labels.
  2. Reading position. The active section is selected from the headings that have reached the upper part of the reading area.
  3. Marker movement. A spring carries the ship between labels. The amount and direction of its lean follow its vertical movement.
  4. Interruption. Choosing another heading replaces the current destination using the article’s actual position as the new starting point.
  5. Access is discretionary in this sample document. Its sentences exist to demonstrate line wrapping, paragraph rhythm, and a useful range of section lengths. They do not describe a financial, account, or subscription service.
  6. A reader can stop a jump with a direct scroll gesture. The example then returns to following the visible headings. The route and ship settle beside the new active label rather than continuing toward an outdated destination.

7 Intellectual Property Rights

A component example should distinguish its own implementation from the design that inspired it. A source link can help readers identify the designer, while the interactive demonstration explains how the local implementation behaves.

  1. Reading content. These paragraphs are independent sample copy written for this example. They provide a realistic amount of text for scrolling without reproducing another website’s complete document.
  2. Illustration. The ship is drawn with inline vector paths. Its hull, rigging, masts, and sails remain sharp when the reading surface is scaled.
  3. Page labels. The headings make up the visible contents. Each one has a corresponding article section and can be reached through the same local navigation.
  4. Customization. Replace the words and vector drawing when applying the component to a different product. Preserve the relationship between the active heading, the marker, and the article position.

8 Third-Party Services

The reading demonstration does not need an external service to animate its marker. Its styles, vector drawing, and interaction code travel together with the component. The host application only needs to mount the example into an available element.

If an application adds external links, keep their purpose clear and preserve normal browser behavior. A link to another page should remain distinct from a control that only changes the reading position inside this article.

9 Termination.

Closing the example ends its current interaction. Any pending navigation and marker travel are cancelled, and the component releases the listeners and observers it created. A newly mounted instance begins with its own independent reading state.

Removing an example must not remove content or controls owned by the page around it. The reading surface stays inside the element chosen by the host application.

10 Indemnification

This heading is included to provide another position along a long document. The sample text is a layout fixture: its length gives the scroll interaction enough room to demonstrate changes in direction, interrupted jumps, and steady reading.

Keep the distinction between a visual example and a real document clear when adapting the component. Use your own reviewed text for any page that describes actual responsibilities or obligations.

11 Warranty Disclaimers

THIS IS AN INTERFACE DEMONSTRATION. THE TEXT IS SAMPLE COPY FOR A READING SURFACE, WITH PARAGRAPH LENGTHS CHOSEN TO SHOW SCROLLING AND NAVIGATION. IT DOES NOT CREATE A WARRANTY OR DESCRIBE AN ACTUAL PRODUCT AGREEMENT.

A reader should be able to move through the document without losing the current place. The contents keeps a consistent position while the article moves. The ship follows the active section with a short settling motion rather than stopping abruptly at every change.

When applying this interaction to a real page, test both quick navigation and slow continuous scrolling. Long headings should wrap naturally, selected labels should stay readable, and the marker should remain beside the route rather than crossing through the text.

12 Limitation of Liability

THE PURPOSE OF THIS SECTION IS TO SHOW A LONG UPPERCASE TEXT BLOCK IN THE ARTICLE. ITS WORDS DESCRIBE A COMPONENT EXAMPLE AND ARE NOT A LIMITATION THAT APPLIES TO A REAL ACCOUNT, PURCHASE, OR SERVICE. REPLACE THE SAMPLE WITH THE DOCUMENT REQUIRED BY YOUR OWN APPLICATION.

A long paragraph should still align with the surrounding text and keep a comfortable line height. Moving to another section must not change the size of the article or the width of the contents. Layout remains stable while the ship, active label, and reading position change.

IF THE HOST APPLICATION CHANGES THE AVAILABLE SPACE, THE EXAMPLE RECOMPUTES ITS MEASUREMENTS. THE READER CAN THEN CONTINUE FROM THE CURRENT SECTION USING THE SAME INPUTS.

13 Governing Law and Forum Choice.

These are local demonstration paragraphs for a scrolling document. They do not select a jurisdiction or a forum. The heading provides a longer wrapped label in the contents, showing how the marker aligns with entries that span more than one line.

14 Dispute Resolution by Binding Arbitration

This section supplies a second long heading and a numbered list. It helps demonstrate a jump between distant parts of the article while keeping the surrounding navigation stationary.

  1. Local navigation. Choosing this entry moves the article to the matching heading, updates the current-location state, and sends the ship toward the center of the wrapped label.
  2. Interruptions. A second selection begins from the actual reading position. It does not finish the old jump before responding to the new one.
  3. Keyboard access. Focus remains on the navigation control that was activated. Arrow keys move among entries, and Enter or Space starts a jump.
  4. Reduced motion. The article and marker update directly when reduced motion is requested. All headings remain reachable and the selected entry is still clearly identified.

15 General

The example keeps one active heading and one moving marker. Its small number of visual parts makes the relationship between reading position and navigation easy to follow. The same interaction can accompany many kinds of long-form content.

Change the section labels and paragraphs together so that the contents remains an accurate map of the article.

16 Contact.

You have reached the last section of the local reading example. Choose another heading to travel back through the article, or scroll upward at your own pace. The ship will turn and follow the next active position.

This sample does not send a message or collect contact information. Use the host website’s own contact controls when you want to reach its owner.