Hazeglow

Overview

Hazeglow is a React library for animated, grainy gradient backgrounds and mesh gradients. A small JSON config goes in and a WebGL2 canvas comes out: a blurred shape or color mesh with film grain, slow motion and optional effects. The hazeglow npm package is about 13 kB gzipped with zero dependencies and works with React 18 or 19, including the Next.js App Router.

Gradients are designed in a free online generator and pasted in as config, or started from presets such as dusk, pearl, ember, horizon, ultraviolet and candy. The shadcn registry adds three ready-made blocks built on the package: a hero, a call to action and a card, all colored by the project's CSS variables.

Features

• Gradient hero: A hero section with an animated, grainy gradient behind the headline.
• Gradient CTA: A call-to-action band with a slow gradient glowing along its bottom edge.
• Gradient card: A card with a live gradient header.
• Theme-aware colors: Config colors can be hex, oklch() or var(--token), so gradients follow light and dark mode.
• Effects: Optional hover pull plus dither, ASCII, halftone, pixel and glass effects.
• Performance and accessibility: Pauses when off screen, shows a still frame for reduced motion, and the canvas is aria-hidden.
• Agent support: An llms.txt, an AGENTS.md and an installable skill (npx skills add hazeglow/hazeglow).

Tech stack

• React 18 or 19
• WebGL2
• hazeglow (npm)

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @hazeglow/component-name