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.