Components

Glowing Stars Card

Card component with animated glowing stars effect and customizable colors.

Glowing Stars Card

The GlowingStarsCard component creates a card with an animated glowing stars effect. It features interactive stars that glow on hover and automatically animate at random intervals.

Usage

✨ Cosmic Dashboard

Interactive starfield visualization

Active

<template>
  <MGlowingStarsCard>
    <template #header>
      <h2 class="font-bold text-2xl text-[#eaeaea]">
        ✨ Cosmic Dashboard
      </h2>
    </template>
    <div class="text-center space-y-3">
      <p class="text-white/80 text-sm">
        Interactive starfield visualization
      </p>
      <UBadge
        color="primary"
        variant="soft"
      >
        Active
      </UBadge>
    </div>
    <template #footer>
      <UButton
        icon="i-heroicons-rocket-launch"
        color="neutral"
        variant="solid"
        class="w-full"
      >
        Launch Experience
      </UButton>
    </template>
  </MGlowingStarsCard>
</template>

Props

starBgClass

string

CSS classes to apply to the glowing stars for custom colors.

object

UI configuration for the underlying UCard component.

Examples

Basic Glowing Stars Card

Premium Features

PRO

Lightning Fast

Optimized performance with instant loading and minimal resource usage

Secure & Private

Enterprise-grade security for your data with end-to-end encryption

Beautiful Effects

Stunning animations and visual experiences that captivate users

Global Access

Access your data from anywhere with our worldwide CDN network

<template>
  <MGlowingStarsCard>
    <template #header>
      <h2 class="font-bold text-xl text-[#eaeaea]">
        Glowing Stars Card
      </h2>
    </template>
    <div class="text-center py-4">
      <p class="text-white/80">
        Card with animated glowing stars
      </p>
    </div>
  </MGlowingStarsCard>
</template>

Custom Star Colors

🌟 Purple Stars

Custom purple star colors

<template>
  <MGlowingStarsCard star-bg-class="bg-purple-400 dark:bg-purple-500 shadow-purple-400/50 dark:shadow-purple-500/50">
    <template #header>
      <h2 class="font-bold text-xl text-[#eaeaea]">
        🌟 Purple Stars
      </h2>
    </template>
    <div class="text-center py-4">
      <p class="text-white/80">
        Custom purple star colors
      </p>
    </div>
  </MGlowingStarsCard>
</template>

Glowing Effect

Interactive glowing effect with customizable colors, blur, and proximity detection.

Image Comparison

Interactive image comparison component with slider controls for before/after visualization.