Glow Card

Glow Card offers four pointer-aware glow treatments in one React component: a slow liquid gradient, a sharp laser edge, a wide cosmic bloom, and a digital flicker. Each variant tracks the cursor position and feeds it into the effect. Built with React and Tailwind CSS. Useful for pricing tiers, feature grids, and dashboard hero cards where you want visual hierarchy without heavy shadows.

Installation

Examples

Pokemon Glow Card

PreviewCode

Psychic

Deoxys

An alien virus that fell to earth on a meteor underwent a DNA mutation to become this Pokémon.

Generation 3

Dark

Darkrai

It chases people and Pokémon from its territory by causing them to experience deep, nightmarish slumbers.

Generation 4

GhostPsychic

Lunala

Said to live in another world, this Pokémon devours light, drawing the moonless dark veil of night over the brightness of day.

Generation 7

Water

Suicune

This Pokémon races across the land. It is said that north winds will somehow blow whenever it appears.

Generation 2

Psychic

Deoxys

An alien virus that fell to earth on a meteor underwent a DNA mutation to become this Pokémon.

Generation 3

Dark

Darkrai

It chases people and Pokémon from its territory by causing them to experience deep, nightmarish slumbers.

Generation 4

GhostPsychic

Lunala

Said to live in another world, this Pokémon devours light, drawing the moonless dark veil of night over the brightness of day.

Generation 7

Water

Suicune

This Pokémon races across the land. It is said that north winds will somehow blow whenever it appears.

Generation 2

Usage

import { GlowCard } from "@/components/ui/glow-card";

export default function BasicExample() {
  return (
    <GlowCard
      liquidColor="#3b8000"
      className="w-full max-w-md p-6 rounded-xl shadow-lg"
    >
      <h3 className="text-xl font-bold mb-4">Liquid Card</h3>
      <p>This card is having the default liquid effect.</p>
    </GlowCard>
  );
}

Props

Glow Card