Scene demo // Story
Scroll-driven narrative with progressive disclosure.
Story scenes tie reveals to scroll position instead of timeouts, using pinning sections and typography rhythm for immersive long-form reads.
Scroll-driven
Pinned sections
Progressive
Act I // Scroll
Tie reveals to scroll ranges, not timeouts.
Story scenes use vl-timeline="view" so content appears as
the reader scrolls into range — no intersection observer JavaScript required.
<section vl-effect="fade-up"
vl-timeline="view"
vl-range="entry 0% cover 50%">
<!-- content reveals as reader scrolls into range -->
</section>
No intersection observer required — vl-timeline="view" maps to a native CSS animation-timeline: view() declaration.
Act II // Persistence
Keep nav and progress visible where appropriate.
Long story scenes benefit from persistent navigation rails and scroll progress indicators so readers always know their position in the narrative.
persistent rail
<nav class="showcase-cinema-rail">
<a href="#story-scroll">Act I</a>
<a href="#story-persist">Act II</a>
</nav>
Guideline
Orientation beats decoration.
A visible rail gives readers a progress map; decorative chrome can wait.
Act III // Reference
Align with scroll-driven reveal documentation.
The Library’s scroll-driven reveal showcase defines exact range values, easing curves, and fallback behaviour. Story scenes should match these specs.
Scroll range
Easing curves
Fallback behaviour
Act IV // Applied story
Scroll, persistence and reference: immersive long-form storytelling.
Tie reveals to scroll position, keep navigation visible, and align to the Library’s scroll-driven reveal specs.