Glassmorphism Advanced

Agent Workflow (MANDATORY)

Before implementation, use TeamCreate to spawn 3 agents:

• fuse-ai-pilot:explore-codebase - Check existing glass patterns

• fuse-ai-pilot:research-expert - Latest backdrop-filter support

After: Run fuse-ai-pilot:sniper for validation.

Overview

Feature Description

Blur Levels sm, md, xl, 3xl

Opacity Layers Multiple glass layers for depth

Colored Glass Tinted with CSS variables

Borders Subtle white/20 borders

Critical Rules

• backdrop-blur required - No flat backgrounds

• Semi-transparent bg - Use bg-white/10, bg-black/40

• Subtle borders - border-white/20

• Shadow for depth - shadow-xl shadow-primary/10

• Dark mode variant - Always define both

Quick Reference

Base Glassmorphism

className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl"

With Colored Shadow

className="bg-white/10 backdrop-blur-xl border border-white/20 shadow-xl shadow-primary/10"

Blur Levels

Level Class Use Case

Subtle backdrop-blur-sm

Overlays on clean backgrounds

Medium backdrop-blur-md

Cards, modals

Strong backdrop-blur-xl

Primary surfaces

Maximum backdrop-blur-3xl

Hero sections

Layered Glass Stack

<div className="relative"> {/* Background layer - most blur */} <div className="absolute inset-0 bg-white/5 backdrop-blur-3xl rounded-3xl" />

{/* Middle layer */} <div className="absolute inset-2 bg-white/10 backdrop-blur-xl rounded-2xl" />

{/* Content layer - least blur */} <div className="relative bg-white/20 backdrop-blur-md rounded-xl p-6"> {children} </div> </div>

Dark Mode

/* Light mode */ className="bg-white/80 backdrop-blur-xl"

/* Dark mode */ className="dark:bg-black/40 dark:backdrop-blur-xl"

Validation Checklist

[ ] backdrop-blur-* present [ ] Semi-transparent background (bg-*/opacity) [ ] Subtle border (border-white/20) [ ] Works on gradient backgrounds [ ] Dark mode variant defined

Best Practices

DO

• Use multiple blur layers for depth

• Add colored shadows for vibrancy

• Define dark mode variants

• Use CSS variables for glass-bg

DON'T

• Use flat backgrounds

• Hard borders (use /20 opacity)

• Skip shadow effects

• Forget dark mode