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