Glyph Background

"use client"

import { GlyphBackground } from "@/components/animate-ui/backgrounds/glyph"

const COLORS = {
  text: "",
  white: "#ffffff",
  blue: "#3b9eff",
  violet: "#a78bfa",
  emerald: "#34d399",
  amber: "#fbbf24",
  rose: "#fb7185",
}

export default function GlyphBackgroundDemo({
  glowColor = "",
  shapeColor = "",
  fontSize = 10,
  interactive = true,
}: {
  glowColor?: string
  shapeColor?: string
  fontSize?: number
  interactive?: boolean | string
}) {
  return (
    <GlyphBackground
      className="absolute inset-0 bg-white text-neutral-900 dark:bg-[#121212] dark:text-white"
      glowColor={glowColor || undefined}
      shapeColor={shapeColor || undefined}
      fontSize={Number(fontSize)}
      interactive={interactive === true || interactive === "true"}
    />
  )
}

InstallationCopy Anchor Link

npx shadcn@latest add @animate-ui/backgrounds-glyph

pnpm dlx shadcn@latest add @animate-ui/backgrounds-glyph

yarn dlx shadcn@latest add @animate-ui/backgrounds-glyph

bun x shadcn@latest add @animate-ui/backgrounds-glyph

UsageCopy Anchor Link

import { GlyphBackground } from '@/components/animate-ui/backgrounds/glyph';

export function Hero() {
  return (
    <section className="relative h-[560px] overflow-hidden bg-[#121212]">
      <GlyphBackground className="absolute inset-0 text-white" />
    </section>
  );
}

AnimationCopy Anchor Link

• The background is a grid of random letters and digits in a monospace font, invisible until light falls on them. Now and then a character changes.
• At rest, soft glows made of characters drift slowly across it, about 30px a second towards the bottom left, reshaping as they go. Nothing else moves.
• Moving the cursor wakes the glows up all over the field, and a trail of light follows the cursor. Both settle back within a second of stillness.
• A click sends two waves out of the point, 0.3s apart, the second one dimmer. They spread fast then slower and slower (about 140px in 0.3s, 330px in a second), with a sharp outer edge fading inwards, their outline wavering into a heart or a blob, and fade out within 4s.
• The glows take glowColor and the waves shapeColor; both default to the container's text color.
• Drawn with WebGL, every character cell lit on the GPU, at most twice the device pixel ratio.
• The loop pauses off screen and while the tab is hidden.
• Under reduced motion, the glows hold still and the cursor and clicks don't light anything.

API ReferenceCopy Anchor Link

GlyphBackgroundCopy Anchor Link