@hazeglow

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

3 components react shadcn-cli MIT

Install this registry

shadcn (npm) npx shadcn@latest add https://hazeglow.dev/r/registry.json

pnpm pnpm dlx shadcn@latest add https://hazeglow.dev/r/registry.json

bun bunx shadcn@latest add https://hazeglow.dev/r/registry.json

fetch registry curl -s https://hazeglow.dev/r/registry.json

3 total

Gradient hero 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 call to action 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 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