Documentation - Glassmorphism Exp

🚀 Getting Started

Glassmorphism is a UI design trend that features translucent, frosted-glass surfaces with subtle blur effects and pastel color overlays.

Basic Setup

Include the Syne font and GSAP libraries in your HTML head:

<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;700&display=swap" rel="stylesheet">

<!-- GSAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>

CSS Variables

Define your color palette using CSS custom properties:

:root {
  --bg: #1a1a2e;
  --accent: #ff6b9d;
  --secondary: #c49bff;
  --teal: #7dd3c0;
}

✨ Glass Effects

The core of glassmorphism is the backdrop-filter property combined with semi-transparent backgrounds.

Basic Glass Card

.glass-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  backdrop-filter: blur(20px);
}

Note: For best results, ensure there's contrasting content behind your glass elements. The blur effect needs colors to blur!

🎬 Animations with GSAP

GSAP (GreenSock Animation Platform) provides powerful animation capabilities with ScrollTrigger for scroll-based effects.

Scroll Reveal Animation

gsap.registerPlugin(ScrollTrigger);

gsap.from('.element', {
  scrollTrigger: {
    trigger: '.section',
    start: 'top 80%'
  },
  y: 60,
  opacity: 0,
  duration: 0.8,
  ease: 'power3.out'
});

Staggered Animations

gsap.from('.cards', {
  y: 80,
  opacity: 0,
  duration: 0.8,
  stagger: 0.15,  // Delay between each element
  ease: 'power3.out'
});

🎭 3D Card Effects

Create interactive 3D card rotations using CSS transforms and JavaScript mouse tracking.

HTML Structure

<div class="card">
  <!-- Card content -->
</div>

CSS

.card {
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: transform 0.3s;
}

JavaScript

card.addEventListener('mousemove', (e) => {
  const rect = card.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  const rotateX = (y - rect.height / 2) / 10;
  const rotateY = (rect.width / 2 - x) / 10;
  
  card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
});

🌊 Floating Particles

Add ambient floating particles using the Canvas API for a dynamic background effect.

Canvas Setup

const canvas = document.getElementById('particles');
const ctx = canvas.getContext('2d');

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  particles.forEach(p => {
    ctx.beginPath();
    ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
    ctx.fillStyle = `rgba(196, 155, 255, ${p.opacity})`;
    ctx.fill();
  });
  requestAnimationFrame(animate);
}

🎨 Color System

Our glassmorphism design uses a carefully crafted color palette with depth and contrast.

Primary Colors

Background

#1a1a2e

Accent (Pink)

#ff6b9d

Secondary

#c49bff

Teal

#7dd3c0

Usage Examples

→ Accent Pink - Primary CTAs, hover states, highlights
→ Secondary Purple - Secondary elements, gradients
→ Teal - Success states, icons, borders

💡 Best Practices

✓
Performance: Use backdrop-filter sparingly. Heavy blur effects on many elements can impact performance on mobile devices.
✓
Contrast: Always ensure text has sufficient contrast against glass backgrounds. Add text-shadow if needed.
✓
Accessibility: Don't rely solely on color. Use icons, text labels, and proper ARIA attributes.
✓
Animation Duration: Keep animations snappy (0.3s - 0.8s). Longer durations can feel sluggish.
✓
Mobile First: Test glass effects on actual mobile devices. Some browsers have limited support.

Warning: The backdrop-filter property is not supported in all browsers. Always provide fallback styles for unsupported browsers.