Sticky Header Shrink

A header hides when scrolling down and reappears when scrolling up.

Add a "Hide on Scroll Header" (also called headroom or an auto-hide navbar) to [where].
The header should slide up out of view when the reader scrolls down and slide back in on any scroll up: quick and smooth, reacting to direction rather than distance.
Always show it at the very top of the page, ignore tiny scroll jitters, and keep it visible while something inside it has keyboard focus.

An element stays locked in place during a scroll range while other content or animation progresses.

Add a "Pinning" scroll effect (also called a pinned section or sticky section) to [where].
One panel should stay locked in place while the content beside it scrolls past, switching to match the step being read, and it should let go when the section ends.
Prefer native sticky positioning over hijacking the scroll, and make sure every step still reads well without the pinned panel on small screens.

Large text lines slide horizontally as the page is scrolled vertically.

Add a "Text Marquee on Scroll" (also called a scroll text marquee or scroll velocity text) to [where].
Large lines of text should slide sideways as the page scrolls down, with alternate rows moving in opposite directions, and slide back when scrolling up.
Tie the movement to the scroll position, keep the long lines from causing a horizontal scrollbar, and keep them still for users who prefer reduced motion.

An element or scene scales up or down as the user scrolls.

Add a "Zoom on Scroll" effect (also called scroll zoom or scale on scroll) to [where].
While the section is held in view, the element should grow smoothly from a small card until it fills the whole view, in step with the scroll, and shrink back when scrolling up.
Scale it without pushing the layout around it, and show it at its final size without the zoom for users who prefer reduced motion.