Extended Module

Presets

Purpose-built compound animations for specific UI contexts — hero sections, success states, toast notifications, drawers, and spotlights. Drop-in, zero-config. Click any card to replay.

gleam-presets.css 5 presets multi-property UI context-aware 
<!-- Drop any preset on its target element -->
<section class="gleam preset-hero">...</section>

<div class="gleam preset-success">✓</div>

<div class="gleam preset-toast-in">Saved!</div>

<aside class="gleam preset-drawer-in">...</aside>

<div class="gleam preset-spotlight">Featured</div>

All Presets — click to replay

Introducing
GLEAM v3
Animations that don't suck
preset-hero
Opacity + rise + blur-in
✓
preset-success
Pop + spin celebration
Changes saved!
Your work has been saved
preset-toast-in
Slide up + drift right
Settings
preset-drawer-in
Slide from right edge
⭐ Featured
Most popular plan
preset-spotlight
Scale + brightness reveal

What Each Preset Animates

preset-hero
  • opacity: 0 → 1
  • translateY: 28px → 0
  • scale: 0.97 → 1
  • filter: blur(6px) → blur(0)
Duration: 800ms · Ease: out-cubic
preset-success
  • opacity: 0 → 1
  • scale: 0.5 → 1.15 → 1
  • rotate: -10deg → 3deg → 0deg
Duration: 500ms · Ease: spring
preset-toast-in
  • opacity: 0 → 1
  • translateY: 16px → 0
  • translateX: 8px → 0
  • scale: 0.95 → 1
Duration: 350ms · Ease: out-expo
preset-drawer-in
  • opacity: 0 → 1
  • translateX: 100% → 0
Duration: 400ms · Ease: out-quart

Practical Patterns

Toast Notification Stack

Inject toast elements dynamically and add preset-toast-in on creation. Remove with an exit animation when dismissed.

function showToast(message, type = 'success') {
  const toast = document.createElement('div');
  toast.className = `gleam preset-toast-in toast toast--${type}`;
  toast.textContent = message;
  document.getElementById('toast-container').appendChild(toast);

  // Dismiss after 3s with exit animation
  setTimeout(() => {
    toast.classList.add('gleam', 'exit-fade-down');
    toast.addEventListener('animationend', () => toast.remove(), { once: true });
  }, 3000);
}

Success State on Form Submit

Replace the submit button or form with a success indicator after the API call resolves. preset-success is tuned for icon-sized elements.

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  await submitData();

  // Swap form for success icon
  form.style.display = 'none';
  successIcon.classList.add('gleam', 'preset-success');
  successIcon.style.display = 'flex';
});

Hero Section Entrance

preset-hero animates opacity, position, scale, and blur simultaneously for a cinematic page-load. Stagger child elements with delay classes for depth.

<section class="hero">
  <p class="gleam preset-hero util-delay-100">Introducing v3</p>
  <h1 class="gleam preset-hero util-delay-200">Build Faster</h1>
  <p class="gleam preset-hero util-delay-300">Tagline copy</p>
  <div class="gleam preset-hero util-delay-500">
    <button>Get Started</button>
  </div>
</section>

Customization

All presets respect the standard GLEAM CSS variables. Override duration and delay inline or via utility classes.

<!-- Faster hero -->
<section class="gleam preset-hero util-duration-500">...</section>

<!-- Delayed drawer (wait for page load) -->
<aside class="gleam preset-drawer-in" style="--delay: 300ms">...</aside>

<!-- Slower success (emphasize celebration) -->
<div class="gleam preset-success util-duration-800">✓</div>