# Hero #8

### Component Structure

* **COPY WRAPPER (div)**: Serves as the structural foundation, organizing Hero #8's content without specific styling.
* **HR8 COMPONENT (section)**: This is the main canvas of the hero, using the `hr8__component` class for styling, including full viewport height and flexible column direction.
* **HR8 ROWs and MASKs (block)**: Rows and masks within the component, identified by `hr8__row` and `hr8__mask`, create structured sections for content and visual effects.
* **HR8 HEADINGs (heading)**: Multiple headings (`FIRST`, `SECOND`, `THIRD`, `FOURTH`) use the `hr8__heading` class, positioned to draw attention with their content and animation.
* **HR8 SEPARATORs (block)**: Thin lines using `hr8__seperator`, visually dividing the hero's sections, enhancing the design's clarity and organization.
* **HR8 IMAGE (image)**: A background or key visual element, styled with `hr8__image`, sets the tone and atmosphere for the hero.

### Animation Structure

**HR8 - PAGELOAD** outlines the sequence of animations for the hero component upon the page's load:

* **Separators Animation**: Increases the width of `.hr8__seperator` elements to full width, creating a dynamic unveiling effect.
* **Image Fade-in**: Brings the `.hr8__image` from opacity 0 to 1, gently introducing the visual element to the viewers.
* **Masks Scaling**: Applies a transformation to `.hr8__mask`, scaling down in a staggered manner to reveal the hero content artistically.
* **Headings Movement**: Moves `.hr8__heading` elements from below (y: 120%) to their original position, ensuring the text captures attention through motion.


---

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