---
name: scroll-story
description: "Build a native sticky narrative with readable chapters. Use for sticky, scroll, storytelling."
---

# Sticky scroll story

Build a native sticky narrative with readable chapters.

## Implementation decisions

1. Use position:sticky and adequate parent height; avoid ancestors that break sticky.
2. Map bounded local progress to the scene and keep text in the document.
3. Collapse to linear content on screens too small for pinning.
4. Scope and dispose any library scroll triggers on unmount.

## Working source

Read [components/demos.tsx](../webcraft-shared/source/components/demos.tsx) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions.

## Verify observable behavior

- Sticky content releases at the section end.
- Anchors and browser find reach chapter text.
- Reduced motion preserves the full story.

## Scope

Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative.

Live example: https://webcraft-skill-library.undrgrnd.chatgpt.site/demos/stack

Version 2.0.0 · Original WEBCRAFT content · MIT