Glyph Background

<script setup lang="ts">
import GlyphBackground from '@/components/animate-ui/backgrounds/glyph/GlyphBackground.vue'

withDefaults(
  defineProps<{
    glowColor?: string
    shapeColor?: string
    fontSize?: number | string
    interactive?: boolean | string
  }>(),
  { glowColor: '', shapeColor: '', fontSize: 10, interactive: true },
)
</script>

<template>
  <GlyphBackground
    class="absolute inset-0 bg-white text-neutral-900 dark:bg-[#121212] dark:text-white"
    :glow-color="glowColor || undefined"
    :shape-color="shapeColor || undefined"
    :font-size="Number(fontSize)"
    :interactive="interactive === true || interactive === 'true'"
  />
</template>

InstallationCopy Anchor Link

npx shadcn-vue@latest add https://animate-ui.com/r/vue/backgrounds-glyph.json

pnpm dlx shadcn-vue@latest add https://animate-ui.com/r/vue/backgrounds-glyph.json

yarn dlx shadcn-vue@latest add https://animate-ui.com/r/vue/backgrounds-glyph.json

bun x shadcn-vue@latest add https://animate-ui.com/r/vue/backgrounds-glyph.json

UsageCopy Anchor Link

<script setup lang="ts">
import GlyphBackground from '@/components/animate-ui/backgrounds/glyph/GlyphBackground.vue';
</script>

<template>
  <section class="relative h-[560px] overflow-hidden bg-[#121212]">
    <GlyphBackground class="absolute inset-0 text-white" />
  </section>
</template>

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 glow-color and the waves shape-color; 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