Glowing Shadows

A premium, modular React component from the React Bytes collection. Built with React and TypeScript.

Installation

npm install @reactbytes/glow-card

Usage

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

export default function Example() {
  return (
    <GlowCard />
  );
}

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | title | string | Glow Card | Text label displayed inside the card. | | uppercase | boolean | false | Whether to force content text to uppercase. | | animationSpeed | number | 4 | Duration of the orbital glow animation in seconds. | | glowBlur | number | 6 | Blur intensity factor for the shadow glow. | | glowOpacity | number | 1 | Transparency of the bloom effect (0.0 to 1.0). | | glowScale | number | 1.5 | Size multiplier for the bloom on hover. | | borderRadius | string | 2rem | CSS border-radius value for the card. | | borderWidth | number | 3 | Thickness of the gradient border in pixels. | | baseColor | color | hsl(260deg 100% 3%) | Background color of the card body. |

Presets

This component includes the following design presets:

• Cosmic (Default) (default)
• Nuclear (Fast) (nuclear)
• Cyber (Sharp) (cyber)
• Soft (Ghost) (soft)
• Ethereal (Lush) (ethereal)

Credits & Inspiration

Project Author

• ChandruMIT-o - Creator & Lead Designer

Inspiration

• LukyVj - Original Design

For interactive playgrounds, customizable controls, and code copy-pasting, visit the full showcase page at React Bytes - Glowing Shadows.