Hero #5

Component Structure

COPY WRAPPER (div): Acts as the primary structural container for the Hero #5 component, organizing its elements without specific styling.

HR5 COMPONENT (section): The core of the hero component, identified by the hr5__component class. This section is styled to center its content within the viewport, achieving a full-screen presentation with a compelling visual appeal.

HR5 BG (MOUSEMOVE) (div): A uniquely interactive background layer for the hero, marked with the hr5__bg class. This element is positioned absolutely behind the main content and is designed to respond to mouse movements, adding an immersive depth to the user's visual experience.

HR5 CONTAINER (container): Holds the content of the hero, ensuring that items like the heading, text, and button are centrally aligned and effectively presented using the hr5__container class.

HR5 HEADING (heading): Presents the main message of the hero, utilizing the hr5__heading class for impactful typography that captures attention.

HR5 TEXT (text-basic): Offers additional information or context, styled with the hr5__text class to complement the headline and maintain user interest.

HR5 BUTTON (button): Encourages user interaction with a clear call-to-action, using the hr5__button class to make it visually distinct and inviting.

Animation Structure

HR5 MOUSE MOVE: This Bricksforge animation creates a responsive and dynamic background effect for Hero #5. When the user moves their mouse over the .hr5__component, the .hr5__bg background layer reacts by shifting its position based on the mouse coordinates, creating a parallax-like effect that adds depth and interactivity to the hero section. The movement is calculated to translate the background up to 300 pixels in any direction from the screen's center, providing a subtle yet engaging visual cue that the user's actions influence the hero's appearance.