# glaze writes GSAP animations as HTML utility classes

> glaze is a utility first animation framework for the web that sits on top of GSAP, letting you declare an animation in a data-animate attribute as a set of composable tokens rather than a JavaScript timeline. It suits a team that wants declarative motion without hand written GSAP code, and it inherits GSAP's licence terms.

**inline0/glaze** — The utility-based animation framework for the web.

- Repository: https://github.com/inline0/glaze
- Website: https://glaze.dev
- Stars: 692 · Forks: 9
- Language: TypeScript
- License: NOASSERTION
- Published: 2026-10-21 · Updated: 2026-10-21 · Language: en
- Canonical page: https://hysenlabs.com/projects/inline0-glaze

## The animation lives in a data attribute

glaze is described as a utility based animation framework for the web, and the subtitle is precise about what that means, utility first animations for GSAP with a Tailwind style syntax. The project composes declarative animations with a tiny, readable API that feels like writing utilities. The example shows the whole idea in a single element. You give a div a data-animate attribute whose value is a pipe separated list of tokens, and the class attribute does the ordinary styling while data-animate describes the motion:

```html
<div
  class="h-20 w-20 rounded-xl bg-amber-500"
  data-animate="from:opacity-0|y-50|duration-1|ease-power2.inOut"
></div>
```

The tokens read as a sentence about the animation. from:opacity-0 and y-50 describe the starting state, duration-1 sets the length, and ease-power2.inOut names the easing. The pipe is the separator because the values contain characters that would otherwise be ambiguous. This is a genuinely different authoring model from writing a GSAP timeline, and the argument for it is that the animation becomes part of the template rather than a script that has to find the element later.

## It is GSAP underneath, not a replacement

The feature list leads with GSAP Powered, built on top of GSAP for production grade animation control, and the setup makes that concrete. You install both packages:

```bash
bun add glazejs gsap
```

and then you pass the GSAP instance into glaze at startup, with the library configuration giving the core module the gsap import:

```js
import gsap from "gsap";
import glaze from "glazejs";

glaze({
  lib: {
    gsap: {
      core: gsap,
    },
  },
});
```

So glaze is a layer that maps tokens onto GSAP calls, not a competing animation engine, and the practical consequence is that anything glaze cannot express is still reachable through GSAP directly. The other features build on the same idea. Dot notation targets nested GSAP properties with a readable syntax, and responsive by default means you define responsive animation variants with breakpoint modifiers. Timeline ready means you can sequence or parallelise motion with timeline utilities. Lightweight is listed as a small runtime footprint with minimal overhead, which is the claim to check if runtime size matters to you, since the dependency on GSAP is the larger part of any bundle.

## A monorepo with one published package

The repository is structured as a monorepo, and the root package.json makes the shape clear. The package is named glaze-monorepo, it is private, and the workspaces field points at packages/*. The root scripts all delegate into the core package, with dev running bun run --cwd packages/core dev, build doing the same for build, and test doing the same for test. Linting and formatting go through biome, with separate lint, format, check and typecheck scripts, and the typecheck runs tsc with noEmit against packages/core/tsconfig.json. The package manager is pinned to bun 1.2.22 and there is a bun.lock at the root. The published package is glazejs, which is what the install command pulls and what the import statement in the example uses, and the version on npm is tracked separately from the monorepo version. There is an AGENTS.md and a CLAUDE.md in the tree, a CHANGELOG.md, a docs/ directory for the full documentation, and a scripts/ directory alongside the packages.

## The licence question is the one to read twice

The README has a section for the GSAP licence and it is not decorative. Glaze relies on GSAP, and you are told to review the GSAP Standard License before shipping. The project's own licence is MIT, but the MIT grant covers the glaze code, not the animation engine underneath it, and a wrapper that makes a proprietary dependency easy to use does not change what that dependency permits. The practical question for a team is whether the use you have in mind falls inside the GSAP standard licence, and the answer depends on facts the repository does not state, such as whether the site is commercial and whether the animation is a significant part of the product. Read the linked GSAP terms rather than assuming, since the project itself points you there.

## Where the token vocabulary becomes a constraint

Any utility first system trades expressiveness for consistency, and glaze is no exception. The token set covers the common cases, which is the from prefix, positional offsets, durations, easing and the responsive and timeline modifiers, but the vocabulary is finite and a project with unusual motion requirements will hit its edge. The way out is the layering, since GSAP is right there and the same elements are addressable. The other thing to consider is the interaction with rendering, because putting an animation in a data attribute means the animation is discovered by scanning markup, and the timing of that discovery relative to hydration or to server rendered content is the kind of detail that decides whether an animation plays on first paint. The README does not discuss that, so the documentation site is where you would look. The versions tell their own story, with 2.0.0 and 2.0.1 both published on 2024-06-05 and 1.2.0 in April 2024, and the last push on 2026-10-14, so the code is being worked on while the published releases have been stable for a while.

## Conclusion

Adopt glaze when your team wants animations declared in markup rather than in JavaScript, and when the Tailwind style syntax already feels familiar to the people writing the templates. Do not adopt it if you need GSAP features outside the token vocabulary, since glaze is a layer over GSAP rather than a replacement for it. Verify first that GSAP's standard licence covers your use, which the README explicitly asks you to check, that the animation properties you need are expressible as tokens, and how the responsive breakpoint modifiers behave with server rendered markup.

## FAQ

### How do I add an animation with glaze?

Install glazejs and gsap, then pass the GSAP instance into glaze with a lib configuration holding the core module, and put the tokens in a data-animate attribute on the element, for example data-animate="from:opacity-0|y-50|duration-1|ease-power2.inOut", with the pipe separating the tokens.

### Does glaze replace GSAP?

No. Glaze is built on top of GSAP for production grade animation control, and you install both packages and supply the GSAP import to glaze. The features are utility syntax, responsive variants with breakpoint modifiers, timeline utilities, dot notation for nested GSAP properties and a small runtime footprint.

### What licence applies to using glaze in a product?

Glaze itself is MIT licensed, but the README has a separate section on the GSAP licence and says to review the GSAP Standard License before shipping, since glaze relies on GSAP. A permissive wrapper licence does not grant rights in the dependency underneath it.

### How is the glaze repository organised?

It is a Bun monorepo whose root package is named glaze-monorepo, marked private, with workspaces at packages/*. The root dev, build and test scripts delegate into packages/core, linting and formatting go through biome, and typecheck runs tsc with noEmit against packages/core/tsconfig.json. The published package is glazejs.

## Sources

- [inline0/glaze on GitHub](https://github.com/inline0/glaze)
- [Issues](https://github.com/inline0/glaze/issues)
- [Project website](https://glaze.dev)
- [README](https://github.com/inline0/glaze/blob/main/README.md)
- [Releases](https://github.com/inline0/glaze/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/inline0-glaze