Grids & Layouts
Cyber Bento
Cyberpunk-inspired bento feature grid with glitch effects.
featurebentocyberglitch
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
features | Array<{title: string, desc: string, icon?: React.ReactNode, img?: string}> | [{title: 'Global Edge', desc: 'Latency is a choice. We chose zero.', icon: Activity}, ...] | Array of feature items with title, description, optional icon, and optional image. |
backgroundColor | string | #0a0a0a | Background color (hex, rgb, or hsl). |
mainCardTitle | string | Neural Engine | Main card title text. |
mainCardStatus | string | ACTIVE | Main card status text. |
mainCardSubtitle | string | Processing matrix loaded. | Main card subtitle text. |
analyticsValue | string | 99.9% | Analytics card value display. |
analyticsLabel | string | Uptime | Analytics card label text. |
networkValue | string | 240ms | Network card value display. |
networkLabel | string | Latency | Network card label text. |
latencyValue | string | 12ms | Latency value display. |
regionsValue | string | 42 | Regions count display. |
throughputValue | string | 2.4TB/s | Throughput value display. |
deployText | string | Deploy | Deploy button text. |