✨ Enhancement Description
Implement a reusable card component featuring an organic, cloud-like background blur. The effect must blur the underlying page background (brick wall) while maintaining text legibility. The background blur should not be a rigid rectangle; instead, it must fade out very softly towards the edges.
🌟 Benefits of the Enhancement
- User Experience: Enhances readability by providing a high-contrast, blurred backdrop for text while maintaining a seamless visual flow. The organic shape feels less intrusive and more integrated into the artwork.
- Project Impact: Provides a flexible, reusable component for "Hero" sections or character descriptions. It leverages modern CSS capabilities like
backdrop-filter and mask-image for high-end visuals without the performance overhead of large transparent PNG assets.
🛠️ Proposed Implementation
- Technical Details:
- Backdrop Blur: Use
backdrop-filter: blur(40px) for the frosted glass effect on the page background. (Refer to the examples in ProjectDescription or the new Header component if necessary)
- Color & Opacity: Base color
#172936 applied with varied alpha channels (e.g., rgba(23, 41, 54, 0.8)).
- Organic Shaping: Implementation of multiple overlapping
radial-gradient layers within a ::before pseudo-element to create a "lumpy" cloud shape.
- Edge Softening: Use of
mask-image: radial-gradient(...) to fade the entire effect to transparent toward the edges.
- Implementation Plan:
- Define the base component structure to accept
image, title, description, and children (for buttons).
- Create the SCSS module utilizing
::before for the blur/color layer and ::after for a deep diffused glow.
- Apply
backdrop-filter with necessary -webkit- prefixes for Safari compatibility.
- Fine-tune the radial mask percentages to ensure the blur disappears completely before hitting the element's bounding box.
- Placement: Add the newly created component to the Main Page in the location specified in the Figma design.
📎 Additional Information
- Responsiveness: The component is designed to be fully responsive. Implementation should faithfully follow the Figma layouts provided for both desktop and mobile, ensuring a polished and adaptive user experience across all devices.
🔗 Links & References:
📷 Preview:
✨ Enhancement Description
Implement a reusable card component featuring an organic, cloud-like background blur. The effect must blur the underlying page background (brick wall) while maintaining text legibility. The background blur should not be a rigid rectangle; instead, it must fade out very softly towards the edges.
🌟 Benefits of the Enhancement
backdrop-filterandmask-imagefor high-end visuals without the performance overhead of large transparent PNG assets.🛠️ Proposed Implementation
backdrop-filter: blur(40px)for the frosted glass effect on the page background. (Refer to the examples in ProjectDescription or the new Header component if necessary)#172936applied with varied alpha channels (e.g.,rgba(23, 41, 54, 0.8)).radial-gradientlayers within a::beforepseudo-element to create a "lumpy" cloud shape.mask-image: radial-gradient(...)to fade the entire effect totransparenttoward the edges.image,title,description, andchildren(for buttons).::beforefor the blur/color layer and::afterfor a deep diffused glow.backdrop-filterwith necessary-webkit-prefixes for Safari compatibility.📎 Additional Information
🔗 Links & References:
📷 Preview:
