Utilities

Extended Module

Timing control classes in 100ms increments from 100ms to 5000ms. Set --duration, --delay, and easing on any animation via HTML classes.

gleam-utils.css 100ms–5000ms duration + delay + ease

<!-- Duration via class -->
<div class="gleam entrance-fade-up util-duration-700"></div>

<!-- Delay via class -->
<div class="gleam entrance-fade-up util-duration-500 util-delay-300"></div>

<!-- Easing -->
<div class="gleam entrance-pop-in util-ease-spring util-duration-600"></div>

<!-- Or inline (equivalent) -->
<div class="gleam entrance-rise" style="--duration:800ms;--delay:200ms"></div>

Duration

            util-duration-100
            util-duration-200
            util-duration-300
            util-duration-400
            util-duration-500
            util-duration-600
            util-duration-700
            util-duration-800
            util-duration-1000
            util-duration-1500
            util-duration-2000
            …to 5000
          

Delay

            util-delay-100
            util-delay-200
            util-delay-300
            util-delay-400
            util-delay-500
            util-delay-600
            util-delay-700
            util-delay-800
            util-delay-1000
            util-delay-1500
            util-delay-2000
            …to 5000
          

Easing

util-ease-out
smooth landing
util-ease-in
accelerating
util-ease-spring
bouncy overshoot
util-ease-bounce
elastic finish
util-ease-snap
fast snap in
util-ease-linear
constant speed

Manual Stagger with Delay Classes

<div class="gleam entrance-fade-up util-duration-500 util-delay-100"></div>
<div class="gleam entrance-fade-up util-duration-500 util-delay-200"></div>
<div class="gleam entrance-fade-up util-duration-500 util-delay-300"></div>

<!-- Or use JS stagger for dynamic sets -->
gleam.stagger('.cards', 'fade-up', { interval: 100 });