Cards #1

Component Structure

The "Cards #1" component consists of several key elements, each serving a specific purpose within the overall design. Here is a breakdown of these elements:

• CD1 COMPONENT (Section): This is the top-level section that acts as a container for the entire "Cards #1" component. It is designed with a CSS class cd1__component which applies a black background, a minimum height of 100vh, and centers its content.

• CD1 CONTAINER (Container): Directly inside the CD1 COMPONENT, this container acts as an immediate parent to the grid layout. It utilizes the cd1__container class.

• CD1 GRID (Block): This element is responsible for the grid structure of the component, housing the individual card elements. It uses the cd1__grid class to set up a 4-column grid layout on desktop, which adjusts to 2 columns on tablet portrait mode and a single column on mobile portrait. It ensures content is laid out in a row direction with a gap of 20px between grid items.

• CD1 CARD (Div): These div elements serve as individual cards within the grid. Each card is styled with cd1__card, applying a dark background, relative positioning, hidden overflow, and a higher z-index for stacking context. This class also incorporates a hover effect for the card's inner content and applies a radial gradient mask for a subtle visual effect.

• CD1 CARD INNER (Div): Inside each CD1 CARD, this div acts as a container for the card's content, including headings and text. The cd1__card-inner class applies flex layout properties, typography color, padding, and a custom backdrop filter for a blur effect upon hover, enhancing the visual interaction.

• CD1 HEADING (Heading) & CD1 TEXT (Text-Basic): These elements represent the textual content of each card, differentiated by their respective CSS classes cd1__card-heading for headings and cd1__card-text for text content. Specific styling details for these classes are not provided in the JSON code.

• CD1 BLOB & CD1 FAKEBLOB (Div): These decorative elements use cd1__blob and cd1__fakeblob classes to create visual interest and depth within each card. CD1 BLOB is styled with a semi-transparent purple background and a significant blur effect, positioned absolutely within the card. CD1 FAKEBLOB, while also absolutely positioned, is designed to be invisible and likely serves as a placeholder or structural element without visible styling.

Animation Structure

1. CD1 - MOUSEMOVE CARDS:

   • Event Trigger: Mouse movement over the .cd1__component class elements.

   • Target: Applies to all .cd1__card elements within the component.

   • Action: Dynamically adjusts the position of .cd1__blob elements (decorative blobs) within each card based on the mouse cursor's position, creating a subtle, responsive movement effect. This is achieved through GSAP animation properties, specifically adjusting the x and y positioning of the blob to follow the cursor within the bounds of the card, enhancing the user interaction experience.

2. CD1 - MOUSENTER GRID:

   • Event Trigger: Mouse entering the area of the .cd1__grid class element.

   • Target: Targets all .cd1__card elements within the grid.

   • Action: Increases the opacity of .cd1__blob elements to 1 over a duration of 0.1 seconds, making the decorative blobs visible when the user hovers over the grid area. This creates an engaging visual cue that attracts the user's attention to the cards.

3. CD1 - MOUSELEAVE GRID:

   • Event Trigger: Mouse leaving the area of the .cd1__grid class element.

   • Target: Affects all .cd1__card elements within the grid.

   • Action: Sets the opacity of .cd1__blob elements back to 0 over a duration of 0.1 seconds, effectively hiding the blobs when the user moves the cursor away from the grid area. This interaction neatly concludes the hover effect by returning the visual state of the cards to their initial appearance.