Glass Variant

Modern Glassmorphism Design

The Glass variant features a trendy glassmorphism design with backdrop blur effects, semi-transparent backgrounds, and a modern aesthetic. Perfect for cutting-edge portfolios and contemporary designs.

Live Preview

Installation

Generate the Glass component:

bash
npx devfund@latest glass

This creates components/devfund/GlassPaymentQR.tsx

Basic Usage

tsx
import GlassPaymentQR from '@/components/devfund/GlassPaymentQR';

export default function SupportPage() {
  return (
    <div className="flex items-center justify-center min-h-screen bg-linear-to-brrom-purple-600 to-blue-600">
      <GlassPaymentQR username="yourname" />
    </div>
  );
}

Props

typescript
interface GlassPaymentQRProps {
  username: string;  // Required: The username to fetch payment data for
}

States

Default State

Shows a glass-styled button with frosted effect:

[💛 Support {DisplayName}]  (with backdrop blur)

Loading State

While fetching user data with spinner:

[⏳ Loading...]  (semi-transparent)

Success State

Modal opens with glassmorphism effect showing:

Yellow badge with "Support {username}"
QR code in white container with shadow
UPI ID below
"Scan with any UPI app" instruction

Error State

Error state with red glassmorphism styling:

[⚠️ Error]  (red/30 background)

Best Practices

Use with Gradient Backgrounds

The Glass variant looks best on colorful backgrounds:

tsx
<div className="min-h-screen bg-linear-to-br from-purple-600 via-pink-600 to-blue-600">
  <GlassPaymentQR username="yourname" />
</div>

Use with Solid Colors

Also works on solid backgrounds:

tsx
<div className="min-h-screen bg-gray-900">
  <GlassPaymentQR username="yourname" />
</div>

Customization

Change Blur Intensity

Edit the backdrop blur value:

tsx
// Increase blur effect
className="backdrop-blur-lg"  // from backdrop-blur-md

// Decrease blur effect
className="backdrop-blur-sm"  // from backdrop-blur-md

Change Background Opacity

Modify the semi-transparent backgrounds:

tsx
// More opaque (less transparent)
className="bg-white/40 backdrop-blur-md"  // from bg-white/20

// More transparent
className="bg-white/10 backdrop-blur-md"  // from bg-white/20

Change Button Color Scheme

tsx
// From white/20 to blue/20
className="inline-flex items-center gap-2 bg-blue-400/20 backdrop-blur-md text-white font-semibold px-6 py-3 rounded-2xl shadow-md hover:bg-blue-400/30"

Change Border Style

Edit the modal border:

tsx
// Add more prominent border
className="border-2 border-white/40"  // from border border-white/20

// Remove border
className="border-0"  // from border border-white/20

Advanced Usage

With Hero Section

tsx
import GlassPaymentQR from '@/components/devfund/GlassPaymentQR';

export default function HeroPage() {
  return (
    <section className="relative min-h-screen overflow-hidden">
      {/* Animated gradient background */}
      <div className="absolute inset-0 bg-linear-to-br from-purple-600 via-pink-600 to-blue-600 animate-pulse opacity-90" />
      
      {/* Noise texture overlay */}
      <div className="absolute inset-0 mix-blend-multiply opacity-5 bg-[url('data:image/svg+xml,...')]" />
      
      {/* Content */}
      <div className="relative z-10 flex flex-col items-center justify-center min-h-screen">
        <h1 className="text-5xl font-bold text-white mb-4 text-center">
          Support My Work
        </h1>
        <p className="text-xl text-white/80 mb-12 max-w-md text-center">
          Help me continue building amazing projects
        </p>
        
        <GlassPaymentQR username="yourname" />
      </div>
    </section>
  );
}

With Backdrop Image

tsx
export default function FancySupportPage() {
  return (
    <div
      className="min-h-screen flex items-center justify-center"
      style={{
        backgroundImage: 'url(/support-bg.jpg)',
        backgroundSize: 'cover',
        backgroundPosition: 'center',
      }}
    >
      <GlassPaymentQR username="yourname" />
    </div>
  );
}

Multiple Components

tsx
export default function TeamSupportPage({ team }: { team: string[] }) {
  return (
    <div className="min-h-screen bg-linear-to-br from-slate-900 to-slate-800 py-20">
      <h1 className="text-4xl font-bold text-white text-center mb-16">
        Support Our Team
      </h1>
      
      <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto px-4">
        {team.map((member) => (
          <GlassPaymentQR key={member} username={member} />
        ))}
      </div>
    </div>
  );
}

Accessibility

The Glass variant includes:

✅ ARIA labels for buttons and modals
✅ Keyboard navigation (Escape to close)
✅ Focus management with visible focus rings
✅ Screen reader support
✅ Sufficient color contrast (white text on colored backgrounds)

Performance

The glassmorphism effects are optimized:

🚀 Uses CSS backdrop-filter (GPU accelerated)
🚀 Minimal repaints and reflows
🚀 Smooth 60fps animations on modern devices

Browser Support

✅ Chrome/Edge 76+
✅ Firefox 103+
✅ Safari 13+
✅ Mobile browsers (iOS Safari 13+, Chrome Mobile)

Design Inspiration

The Glass variant is inspired by:

iOS design system (iOS 16 glassmorphism)
macOS Big Sur aesthetic
Modern design trends

Troubleshooting

Blur effect not visible

Ensure:

Browser supports backdrop-filter CSS property
Parent element allows overflow (not overflow: hidden)
Background behind the component is visible

Text not readable on background

The Glass variant uses white text. If your background is light:

tsx
// Edit the text color in the component
className="text-gray-900"  // from text-white

Performance issues on mobile

If experiencing lag:

Reduce the blur intensity: backdrop-blur-sm
Remove or reduce animations
Test on actual mobile device