1. Link Core & Modules

At minimum, you need gleam-core.css. Then, add whichever specific modules you want to use.

<link rel="stylesheet" href="gleam/core.css">
<link rel="stylesheet" href="gleam/entrances.css">

2. Apply the Base Class

Add the .gleam class to any element you want to animate. This initializes the animation engine.

3. Add an Effect

Combine it with an effect class like .entrance-fade-up.

<div class="gleam entrance-fade-up">Animated element</div>

Global Defaults

You can override these in your :root or on a specific element.

:root {
  --duration: 1000ms;
  --delay: 0ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --distance: 20px;
  --scale-start: 0.96;
  --opacity-start: 0;
}

Inline Customization

Override settings directly in your HTML for one-off adjustments.

<div class="gleam entrance-zoom-in" 
     style="--duration: 2s; --scale-start: 0.5;">
  Custom Zoom
</div>