Core Module

Ambient

24 looping atmospheric effects that give elements life and presence. Unlike attention effects, ambient animations are designed to be subtle and run indefinitely without distracting the user.

gleam-ambient.css 24 effects infinite loops hero elements 
<!-- All ambient effects loop by default -->
<div class="gleam ambient-float">Always floating</div>

<!-- Tune speed and distance -->
.hero-icon {
  --duration: 4s;
  --distance: 12px;
}

<!-- Combine with entrance -->
<div class="gleam entrance-fade-up ambient-float">...</div>

Motion

ambient-float
Gentle vertical bob
ambient-drift
Lateral drift + rotate
ambient-sway
Pendulum sway
ambient-orbit
Circular orbit path

Scale & Breathe

ambient-breathe
Scale + opacity breath
ambient-pulse-soft
Very gentle scale pulse
ambient-wiggle-soft
Micro wiggle

Glow & Filter

ambient-glow
Pulsing glow ring
ambient-hue-rotate
Full spectrum cycle
ambient-flicker
Candlelight flicker
ambient-vibrate
Rapid micro-vibration

Atmospheric 3D

ambient-tilt-slow
Slow 3D tilt wave

Hero Element Examples

🚀
float + glow
⭐
💎
hue-rotate
🌊
tilt-slow
<!-- Hero icon: enters, then floats with glow -->
<div class="gleam entrance-rise ambient-float ambient-glow"
     style="--gradient-from:#a78bfa; --duration:3s; --distance:10px">
  🚀
</div>

<!-- Slow subtle card breathing in a grid -->
<div class="gleam entrance-fade-up ambient-breathe util-duration-500">
  Feature card
</div>

CSS Variable Reference

/* Speed */
.hero-icon {
  --duration: 4s;     /* default: 2s */
  --distance: 12px;  /* float height */
}

/* Or utilities */
<div class="gleam ambient-float
           util-duration-3000">
/* Glow color (uses gradient-from) */
.glowing-icon {
  --gradient-from: #f472b6;
}

/* Orbit radius */
.orbiting-dot {
  --distance: 50px;
}