Black Box
Minimalist dark portfolio with mysterious black box design elements.
Main Features of Black Box
How to Use Black Box in Next.js
Installation Guide for Black Box
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
accentColor | string | #ffffff | Accent color for highlights and borders (typically white or light color). |
glowColor | string | #3b82f6 | Glow effect color for interactive elements. |
enableGlow | boolean | true | Enable glow effects on hover and focus. |
borderWidth | string | 2px | Border width for black box elements. |
Related Components
Cartoonish
Playful cartoon-style hero section with fun animations and vibrant colors.
Draggable
Interactive hero section with draggable elements and smooth physics-based interactions.
Glass Operating System
Glassmorphism hero section with frosted glass effects and modern OS-inspired design.
When to Use
Best Practices
Why This Component Matters in Modern UI Development
Frequently Asked Questions
QWhy is it called 'Black Box'?
The design system is built around 'perfect cubes' and deep shadows, giving the interface a sense of physical weight and structural mystery.
QCan I adjust the glow?
Yes, the `glowColor` and `enableGlow` props allow you to add subtle interactive aura around your primary containers and buttons.
QIs it mobile responsive?
The 'Box' modules are designed as a vertical stack on mobile, ensuring the sharp borders and deep shadows remain impactful on smaller screens.