Alert Glassmorphism Animations

A premium alert library for React. Smooth, fluid modals with liquid glass effects and GSAP-powered transitions. Elevate your UI with the transparency it deserves.

GitHub Repo

Try it Yourself

Success Alert

Smooth entrance with liquid easing.

Error Alert

Bounce animation with shake icons.

Toast Notification

Non-blocking with timer progress.

Maximum Blur

Ultra-glass effect with custom colors.

Confirm Dialog

Interactive result handling.

Slide Animation

Smooth directional transitions.

Emerald Premium

Custom background and amber buttons.

High Contrast

Opaque background for maximum readability.

Installation & Usage

Get started with a single command:

npm install glass-alert-animation gsap lottie-react

Quick Start

1. Setup the Provider

Wrap your application with the GlassAlertProvider and import the styles.

import { GlassAlertProvider } from 'glass-alert-animation';
import 'glass-alert-animation/styles';

function App() {
  return (
    <GlassAlertProvider>
      <yourApp />
    </GlassAlertProvider>
  );
}

2. Trigger an Alert

Use the useGlassAlert hook to fire alerts anywhere in your components.

import { useGlassAlert } from 'glass-alert-animation';

function MyComponent() {
  const { fire } = useGlassAlert();

  const handleAlert = async () => {
    const result = await fire({
      title: 'Success!',
      text: 'GlassAlert is working perfectly.',
      icon: 'success',
      glassColor: '#6366f1',
      animation: 'liquid'
    });
    
    if (result.isConfirmed) {
      console.log('User clicked OK');
    }
  };

  return <button onClick={handleAlert}>Show Alert</button>;
}

More Examples

Basic Success Alert

fire({
  title: 'Success!',
  text: 'The operation was completed.',
  icon: 'success',
  animation: 'elastic'
});

Toast Notification

fire({
  title: 'New Message',
  toast: true,
  position: 'top-end',
  timer: 3000,
  timerProgressBar: true
});

Confirm Dialog

const result = await fire({
  title: 'Are you sure?',
  text: 'You cannot undo this!',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Yes, delete it'
});

if (result.isConfirmed) {
  // Logic here
}

Custom Lottie Icon

Pass a URL or an imported JSON object to use your own animations.

fire({
  title: 'Custom Animation',
  lottie: 'https://assets9.lottiefiles.com/packages/lf20_afwjh8re.json',
  lottieLoop: true
});

Features

💎

Premium Aesthetics

Designed for modern tech brands. Luminous borders, frosted glass, and interactive glows.

🚀

GSAP Performance

No clunky CSS transitions. We use GSAP for sub-pixel precision and fluid motion.

✨

Lottie Support

Beautiful, fluid animated icons for every alert type powered by Lottie.

🎨

Customizable

Control blur intensity, colors, backgrounds, and more to match your brand exactly.

🧩

React Ready

Easy-to-use hooks and providers designed specifically for the React ecosystem.

📱

Fully Responsive

Optimized for mobile, tablet, and desktop. Looks stunning on any screen size.

API Reference

Option Type Default
title string ''
icon success | error | warning | info | question undefined
animation elastic | bounce | slide | fade | liquid 'elastic'
glassBlur number (px) 20
toast boolean false
glassColor string '#6366f1'
glassColorSecondary string '#8b5cf6'
confirmButtonColor string '#6366f1'
cancelButtonColor string '#ffffff'
timer number (ms) 0
isOpaque boolean false
lottie string | object undefined
lottieLoop boolean false
useLottieIcons boolean true