---
name: "@hazeglow"
slug: "hazeglow"
description: "Animated, grainy gradient blocks for React: a hero, a call to action and a card, themed by your CSS variables. WebGL2, zero dependencies."
category: "Animated components"
tags: ["3d", "accessibility", "animation", "backgrounds", "blocks", "buttons", "cards", "marketing", "theming"]
framework: "react"
license: "MIT"
author: "hazeglow"
website: "https://hazeglow.dev"
github: "https://github.com/hazeglow/hazeglow"
registry: "https://hazeglow.dev/r/registry.json"
pro: false
pro_url: null
github_stars: 1
component_count: 3
generated_at: "2026-10-13T06:38:00.276Z"
---

# @hazeglow

Animated, grainy gradient blocks for React: a hero, a call to action and a card, themed by your CSS variables. WebGL2, zero dependencies.

## Links

- Website: https://hazeglow.dev
- GitHub: https://github.com/hazeglow/hazeglow
- Registry JSON: https://hazeglow.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/hazeglow
- This file: https://sh4dcn.vercel.app/md/hazeglow.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://hazeglow.dev/r/registry.json
pnpm dlx shadcn@latest add https://hazeglow.dev/r/registry.json
bunx shadcn@latest add https://hazeglow.dev/r/registry.json
# clone the source repo
git clone https://github.com/hazeglow/hazeglow.git
# fetch the raw registry index
curl -s https://hazeglow.dev/r/registry.json
```

## Components (3)

| name | type | description | install |
| --- | --- | --- | --- |
| gradient-hero | registry:block | A hero section with an animated, grainy gradient behind the headline, colored by your theme. | `npx shadcn@latest add https://hazeglow.dev/r/gradient-hero.json` |
| gradient-cta | registry:block | A call-to-action band with a slow gradient glowing along its bottom edge, below centered text. | `npx shadcn@latest add https://hazeglow.dev/r/gradient-cta.json` |
| gradient-card | registry:block | A card with a live gradient header that takes its colors from your theme. | `npx shadcn@latest add https://hazeglow.dev/r/gradient-card.json` |

## For AI agents

```text
You are adding components from @hazeglow to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/hazeglow.md) for the component list.
2. Fetch the machine-readable index: https://hazeglow.dev/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: hazeglow).
```