Aurora Text

A beautiful aurora text effect

Ship beautifulbeautiful

Edit on GitHub

Copy code

Show code

<script setup lang='ts'>
import AuroraText from './AuroraText.vue';
</script>

<template>
    <h1 class="text-4xl font-bold tracking-tighter md:text-5xl lg:text-7xl">
        Ship <AuroraText>beautiful</AuroraText>
    </h1>
</template>

Installation

Copy and paste the following code into your project:

AuroraText.vue

<script setup lang='ts'>
interface AuroraTextProps {
    className?: string;
    colors?: string[];
    speed?: number;
}
const props = withDefaults(defineProps<AuroraTextProps>(), {
    colors: () => (["#FF0080", "#7928CA", "#0070F3", "#38bdf8"]),
    speed: 1,
});
const gradientStyle = {
    backgroundImage: `linear-gradient(135deg, ${props.colors.join(", ")}, ${props.colors[0]
        })`,
    WebkitBackgroundClip: "text",
    WebkitTextFillColor: "transparent",
    animationDuration: `${10 / props.speed}s`,
};
</script>

<template>
    <span :class="`relative inline-block ${props.className}`">
        <span class="sr-only">
            <slot />
        </span>
        <span class="relative animate-aurora bg-[length:200%_auto] bg-clip-text text-transparent" :style="gradientStyle"
            aria-hidden="true">
            <slot />
        </span>
    </span>
</template>

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      animation: {
        "aurora": 'aurora 8s ease-in-out infinite alternate',
      },
      keyframes: {
        'aurora': {
          '0%': {
            backgroundPosition: '0% 50%',
            transform: 'rotate(-5deg) scale(0.9)',
          },
          '25%': {
            backgroundPosition: '50% 100%',
            transform: 'rotate(5deg) scale(1.1)',
          },
          '50%': {
            backgroundPosition: '100% 50%',
            transform: 'rotate(-3deg) scale(0.95)',
          },
          '75%': {
            backgroundPosition: '50% 0%',
            transform: 'rotate(3deg) scale(1.05)',
          },
          '100%': {
            backgroundPosition: '0% 50%',
            transform: 'rotate(-5deg) scale(0.9)',
          },
        },
      },
    },
  },
}

Props

Prop	Type	Description	Default
className	string	The class for the component.	-
colors	string[]	Array of colors used for the aurora effect	["#FF0080", "#7928CA", "#0070F3", "#38bdf8"]
speed	number	Animation speed multiplier (1 is default, 2 is twice as fast)	1