Event Horizon
Cosmic event horizon feature section with depth effects.
Main Features of Event Horizon
How to Use Event Horizon in Next.js
Installation Guide for Event Horizon
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
features | Array<{icon: LucideIcon, title: string, desc: string}> | [] | Array of feature items with icon, title, and description. |
backgroundColor | string | #000000 | Background color (hex, rgb, or hsl). |
cardBgColor | string | rgba(23, 23, 23, 0.5) | Card background color. |
cardBorderColor | string | rgba(255,255,255,0.1) | Card border color. |
iconBgColor | string | rgba(255,255,255,0.05) | Icon background color. |
iconBorderColor | string | rgba(255,255,255,0.1) | Icon border color. |
hoverAccentColor | string | #a855f7 | Hover accent color. |
titleColor | string | #ffffff | Title text color. |
descColor | string | #a3a3a3 | Description text color. |
hoverDescColor | string | rgba(255,255,255,0.8) | Description text color on hover. |
Related Components
When to Use
Ideal for deep-tech brands, space-themed landing pages, and Next.js experiences that want a mysterious, volumetric feel. Use this React component for a cosmic-themed feature section with glowing card borders and depth-distortion effects.
Best Practices
Maintain scalable component architecture by keeping foreground text bright and readable. Follow React best practices by pairing this with dark-themed layouts. Optimize for performance by managed the glow filters for mobile views.
Why This Component Matters in Modern UI Development
Cosmic depth effects create a sense of scale and wonder that attracts user attention. This production-ready component helpsคุณ build an interface that feels atmospheric and advanced, adding semantic authority to your project's digital architecture.
Frequently Asked Questions
QHow does the glow effect work?
The cards use a combination of radial gradients and SVG filters to create a volumetric 'event horizon' glow that intensifies on hover.
QCan I change the accent color?
Yes, the `hoverAccentColor` prop allows you to change the secondary highlight (e.g., from violet to cyan or amber).
QIs the background truly black?
The default is pure black (`#000000`) to maximize the contrast of the glows, but it can be adjusted to any dark hue via the `backgroundColor` prop.