Utility-based animations for the web

npm i glazejs

yarn add glazejs

pnpm add glazejs

bun add glazejs

Go to docs

<h1 data-animate="@lg:[&>span>span]:to:y-0|stagger-0.025">
  {"Utility-based animations for the web"
    .split(" ")
    .map((w, i, arr) => (
      <span className="inline-block overflow-hidden">
        <span className="inline-block translate-y-full">
          {w}
        </span>
        {i < arr.length - 1 ? " " : ""}
      </span>
    ))}
</h1>

GSAP Powered

Built on top of GSAP for production-grade animation control.

Utility Syntax

Author animations in HTML with concise, composable tokens.

Responsive by Default

Define responsive animation variants with breakpoint modifiers.

Timeline Ready

Sequence or parallelize motion with timeline utilities.

Dot Notation

Target nested GSAP properties with a readable dot syntax.

Composable

Layer presets and overrides without fighting configs. Mix and match animation tokens to build complex sequences.

Lightweight

Tiny runtime footprint with minimal overhead. No bloat, just the animation logic you need.

Extensible

Designed to support additional animation backends over time.

Ready to get started?

Check out the documentation to learn more.

Go to docs