Cyber Holograph
Cyber holographic pricing section with neon effects.
Main Features of Cyber Holograph
How to Use Cyber Holograph in Next.js
Installation Guide for Cyber Holograph
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
title | string | System Access | Section title text. |
plans | Array<{name: string, price: number, currency?: string}> | [] | Array of pricing plans with name, price, and optional currency. |
features | string[] | [] | Array of feature strings to display. |
backgroundColor | string | #000000 | Background color (hex, rgb, or hsl). |
gridColor | string | rgba(0,255,136,0.03) | Grid pattern color. |
titleGradientFrom | string | #00ff88 | Title gradient start color. |
titleGradientTo | string | #00ffff | Title gradient end color. |
cardGradientFrom | string | #00ff88 | Card gradient start color. |
cardGradientTo | string | #00ffff | Card gradient end color. |
cardBgColor | string | rgba(23, 23, 23, 0.9) | Card background color. |
cardBorderColor | string | #414868 | Card border color. |
planNameColor | string | #00ff88 | Plan name text color. |
priceColor | string | #ffffff | Price text color. |
priceCurrencyColor | string | #00ffff | Price currency text color. |
featureTextColor | string | rgba(0,255,136,0.8) | Feature text color. |
featurePrefixColor | string | #00ffff | Feature prefix color. |
buttonBgColor | string | rgba(0,255,136,0.1) | Button background color. |
buttonBorderColor | string | #00ff88 | Button border color. |
buttonTextColor | string | #00ff88 | Button text color. |
buttonHoverBgColor | string | #00ff88 | Button hover background color. |
buttonHoverTextColor | string | #000000 | Button hover text color. |
buttonOverlayColor | string | rgba(0,255,136,0.2) | Button overlay color on hover. |
buttonText | string | ACCESS | Button text. |
Related Components
When to Use
Perfect for deep-tech brands, developer tools, and Next.js experiences that want a futuristic, 'hacker' aesthetic. Use this React component for a cyber-themed pricing section with holographic grid patterns and neon glowing borders.
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
Cyber aesthetics create a sense of scale and technical depth that attracts early adopters. 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 grid work?
The background uses a radial-masked repetition pattern to create a subtle 3D 'holographic' grid floor effect.
QCan I change the neon colors?
Yes, the `titleGradient`, `cardGradient`, and `planNameColor` props allow you to switch from neon green to cyberpunk pink or electric blue.
QIs the 'ACCESS' button animated?
The button features a futuristic scanning overlay and a glow shift on hover to reinforce the technical theme.