# Hero #9

### Component Structure

* **COPY WRAPPER (div)**: Provides a structural foundation for Hero #9.
* **HR9 COMPONENT (section)**: The main section of the hero, characterized by `hr9__component`, organizing the layout and visual hierarchy of the content.
* **HR9 CONTAINER (container)**: Central container, `hr9__container`, houses the hero's headline and descriptive text.
  * **HR9 HEADING (heading)**: Displays the main message of the hero with `hr9__heading`.
  * **HR9 TEXT (text-basic)**: Offers additional detail or context with `hr9__text`.
* **HR9 GALLERY SPACER and WRAPPER (block/section)**: Constructs a space for the gallery `hr9__gallery-spacer` and `hr9__gallery-wrapper`, setting up the interactive image gallery.
* **HR9 GALLERY (div)**: Comprises multiple sections, including overlay `hr9__gallery-overlay`, gallery images `hr9__gallery-img`, and inner gallery layout `hr9__gallery-inner`, which organizes the images into a coherent visual narrative.

### Animation Structure

**HR9 - Scroll**:

* Engages the gallery overlay `.hr9__gallery-overlay` to become fully visible with clip-path adjustments as the user scrolls.
* Moves gallery sections `.hr9__gallery-left` and `.hr9__gallery-right` off-screen to emphasize the central images.

**HR9 - Pageload**:

* Animates elements within `.hr9__container` and `.hr9__gallery-inner`, gradually introducing them with vertical movement and opacity changes to draw attention to each piece of content.


---

# Agent Instructions: 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:

```
GET https://bricksmotion.gitbook.io/bricksmotion-components/components/heroes/hero-9.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.