> For the complete documentation index, see [llms.txt](https://bricksmotion.gitbook.io/bricksmotion-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bricksmotion.gitbook.io/bricksmotion-components/components/scroll-scenes/scroll-scene-3.md).

# Scroll Scene #3

### Component Structure

* **SC3 COMPONENT (.sc3\_\_component - section)**: Acts as the primary container, ensuring content alignment from the start with hidden overflow. It's crafted to support extended scrolling with a minimum height of 500vh.
* **SC3 HEADING WRAPPER (.sc3\_\_heading-wrapper - div)**: This flex container spreads across more than 400vw in width, housing the headline in the center of a viewport that's 100svh tall.
* **SC3 HEADING (.sc3\_\_heading - heading)**: Emphasizes the main headline in a large font size (15vw), making it uppercase for impact. It is absolutely positioned to remain at the forefront of other content.
* **SC3 IMAGE HOLDER (.sc3\_\_image-holder - div)**: Aligns images in a column, centering them across the viewport and ensuring they stretch appropriately in different orientations.
* **SC3 IMAGE WRAPPER (.sc3\_\_image-wrapper - block)**: Centers and vertically distributes images within the viewport, providing a structured visual narrative.
* **SC3 IMAGE (.sc3\_\_image - image)**: Individual images are set to cover their allocated space, with their max-width adjusted responsively to maintain consistency across viewing modes.

### Animation Structure

* **SC3 - Scroll**: Animates the .sc3\_\_heading-wrapper and .sc3\_\_image-holder, moving the former horizontally and the latter vertically off-screen, alongside transitioning the background color to black. This creates a layered visual effect as the user scrolls.
* **SC3 - SCROLL SPEED**: Implements a custom JavaScript function to adjust the .sc3\_\_heading's skew based on scroll speed dynamically. This nuanced animation enhances the scroll experience by adding an interactive element that reacts to user input, all while ensuring smooth performance.