Cosmic Effect
Stars, nebula gas, and cosmic dust particles.
Glitch Effect
Corrupted digital effects with scan lines.
Liquid Effect
Smooth liquid effects with click ripples.
Laser Effect
High-precision crosshair laser.
Installation
Examples
Pokemon Glow Card
Deoxys
An alien virus that fell to earth on a meteor underwent a DNA mutation to become this Pokémon.
Darkrai
It chases people and Pokémon from its territory by causing them to experience deep, nightmarish slumbers.
Lunala
Said to live in another world, this Pokémon devours light, drawing the moonless dark veil of night over the brightness of day.
Suicune
This Pokémon races across the land. It is said that north winds will somehow blow whenever it appears.
Deoxys
An alien virus that fell to earth on a meteor underwent a DNA mutation to become this Pokémon.
Darkrai
It chases people and Pokémon from its territory by causing them to experience deep, nightmarish slumbers.
Lunala
Said to live in another world, this Pokémon devours light, drawing the moonless dark veil of night over the brightness of day.
Suicune
This Pokémon races across the land. It is said that north winds will somehow blow whenever it appears.
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
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | undefined | The content to display inside the card. |
className | string | undefined | Additional CSS classes to apply. |
variant | string | "liquid" | Animation variant: "liquid", "laser", "cosmic", or "glitch". |
intensity | number | 0.8 | The intensity of the effect (0-1). |
liquidColor | string | "#3b82f6" | The color of the liquid effect (hex format). |
laserColor | string | "#ff0000" | The color of the laser effect (hex format). |
glitchColor1 | string | "#ff0064" | The primary color for glitch effect (hex format). |
glitchColor2 | string | "#00ff64" | The secondary color for glitch effect (hex format). |
disabled | boolean | false | Whether to disable the interactive effects. |
allowCustomBackground | boolean | false | Whether to allow custom background color. |