Attention

Core Module

14 repeating attention-seeking animations to draw focus to UI elements. They loop indefinitely by default — use --iteration-count to limit repeats. Click any card to replay.

gleam-attention.css 14 effects loops by default infinite or counted

<!-- Continuous loop (default) -->
<div class="gleam attention-pulse">Always pulsing</div>

<!-- Run once then stop -->
<div class="gleam attention-shake" style="--iteration-count:1">...</div>

<!-- Trigger on event with JS -->
gleam.animate('#badge', 'attention-ping', { iterations: 3 });

Subtle

attention-pulse

Breathing scale

attention-nudge

Gentle horizontal nudge

attention-bob

Slow vertical bob

attention-bob-down

Bob downward variant

Assertive

attention-shake

Rapid horizontal shake

attention-swing

Pendulum swing

attention-tada

Scale + shake combo

attention-heartbeat

Double-pulse like a heart

Elastic

attention-jello

Skew jiggle

attention-wobble

Full rotation wobble

attention-rubber

X/Y elastic stretch

Glow & Visual

attention-flash

Opacity flicker

attention-shimmer

Sliding shine sweep

attention-ping

Ripple ring expand

Real-World Use Cases

Notification badge

Pulsing CTA button

Form validation shake

Invalid email address

// Shake once on form error
gleam.animate('#email-field', 'attention-shake', {
  iterations: 1,
  duration: 400
});

// Ping badge 3 times then stop
gleam.animate('#badge', 'attention-ping', {
  iterations: 3,
  duration: 600
});

CSS Variable Reference

/* Control iteration count */
.my-badge {
  --iteration-count: 3;
  --duration: 800ms;
}

/* Slow it down */
.cta-btn {
  --duration: 2000ms;
  --iteration-count: infinite;
}

/* Or via utility classes */
<div class="gleam attention-pulse
           util-duration-1500">

/* Stop after viewport exit */
<div data-gleam="attention-pulse"
     data-gleam-scroll
     data-gleam-once>