Utility-based animations for the web.

npm i glazejs
<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="relative inline-block overflow-hidden">
      <span className="inline-block translate-y-full">{w}</span>
      {w < arr.length - 1 ? <span>&nbsp;</span> : ""}

Based on GSAP

Glaze is built on top of GSAP, a powerful animation library that allows you to create complex animations with little code.


Utility inspired

If you know Tailwind, you'll feel right at home with Glaze. It is inspired by its HTML- and utility-first approach.



Glaze supports responsive design out of the box, allowing you to define different animations for different screen sizes.



Full support for timelines, allowing you to sequence multiple animations together, or run them in parallel.


Dot notation

Use dot notation for specifying nested properties in the settings object, granting complete control over the animation.


Library-agnostic syntax

Though Glaze presently supports only GSAP, its syntax lays the groundwork for future integration with other libraries.