> 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.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://bricksmotion.gitbook.io/bricksmotion-components/components/scroll-scenes/scroll-scene-3.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.