Aurora Text

A beautiful glowing text animation with color shifting gradient effects inspired by Northern Lights.

Preview

Experience the Vibe UI

Installation

pnpm dlx vibe-ui-kit@latest add aurora-text

Global Configuration (CSS Styles)

Ensure the following CSS keyframes and animations are configured in your global theme file:

@theme {
  --animate-aurora: aurora 8s ease-in-out infinite alternate;

  @keyframes aurora {
    0% {
      background-position: 0% 50%;
      transform: rotate(-5deg) scale(0.9);
    }
    25% {
      background-position: 50% 100%;
      transform: rotate(5deg) scale(1.1);
    }
    50% {
      background-position: 100% 50%;
      transform: rotate(-3deg) scale(0.95);
    }
    75% {
      background-position: 50% 0%;
      transform: rotate(3deg) scale(1.05);
    }
    100% {
      background-position: 0% 50%;
      transform: rotate(-5deg) scale(0.9);
    }
  }
}

Variations

Custom Speed and Gradients

Configure custom shifting gradients and animation speed rate using colors and speed props.

Custom Glow Energy

Usage

import { AuroraText } from "@/components/ui/aurora-text"

<AuroraText>Aurora Glow</AuroraText>

Props

Prop	Type	Default	Description
`children`	`ReactNode`	`""`	Text content to apply animated aurora gradient glow
`colors`	`string[]`	`["#FF0080", "#7928CA", "#0070F3", "#38bdf8"]`	Color palette hex values for aurora gradient animation
`speed`	`number`	`1`	Speed multiplier of northern light gradient shifts
`className`	`string?`	`""`	Additional classes for the container

This AuroraText component applies a shimmering northern lights gradient animation to text background fill.

Contributors

Jenish Sabhadiya