# Hero #10

### Component Structure

* **COPY WRAPPER (div)**: Serves as the base structure for Hero #10, encapsulating all elements.
* **HR10 COMPONENT (section)**: The main visual area of Hero #10, identified by `hr10__component`, designed to fill the viewport height and center content.
* **HR10 HEADLINE WRAPPER (div)**: Contains headline elements, using `hr10__headline` for styling, positioned centrally with flex display.
  * **HR10 HEADLINE 1 (text-basic)**: The first part of the hero's message, marked by `hr10__headline-1`.
  * **HR10 HEADLINE 2 (text-basic)**: Continues the hero's message, styled with `hr10__headline-2`.
* **HR10 IMAGE WRAPPER (div)**: An artistic backdrop for the hero, `hr10__img-wrapper`, featuring a unique image that enhances the component's visual impact.
  * **HR10 IMAGE (image)**: A central image, `hr10__img`, that plays a key role in the hero's design.

### Animation Structure

**HR10 - Scroll** outlines the animations triggered by user scroll:

* **Headlines Movement**: Both `.hr10__headline-1` and `.hr10__headline-2` are animated to move horizontally off-screen, creating a dynamic effect that emphasizes the scrolling interaction.
* **Image Animation**: The `.hr10__img-wrapper` undergoes changes in clip-path value and rotation, scaling up for a dramatic reveal and rotation correction as the user scrolls through the component.