Brutalist
Neo-brutalist frame video player with high contrast.
Main Features of Brutalist
How to Use Brutalist in Next.js
Installation Guide for Brutalist
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
video | string | http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4 | Video source URL. |
backgroundColor | string | #ffffff | Background color (hex, rgb, or hsl). |
borderColor | string | #000000 | Border color (hex, rgb, or hsl). |
buttonColor | string | #000000 | Button background color (hex, rgb, or hsl). |
labelText | string | VIDEO | Label text displayed above video. |
playText | string | PLAY | Play button text. |
pauseText | string | PAUSE | Pause button text. |
Related Components
When to Use
Ideal for edgy streetwear brands, experimental art portfolios, and Next.js applications that want an energetic 'Brutalist' aesthetic. Use this video player to showcase project collections with a high-intensity, industrial 'Raw' vibe.
Best Practices
Maintain consistent spacing within your design system by using it for aggressive brand storytelling. Follow React best practices by pairing it with bold, technical typography. Optimize for performance by managed the border intensity.
Why This Component Matters in Modern UI Development
Bold brutalist aesthetics communicate power, mystery, and structural honesty. This production-ready UI template helpsคุณ build an interface that feels authoritative and solid, breaking the 'standard' web layout rules.
Frequently Asked Questions
QWhy 'Brutalist'?
The component features thick borders, high-contrast black/white paths, and sharp shadows to simulate the raw structural honesty of the brutalist architectural movement.
QCan I adjust colors?
Yes, both the primary 'backgroundColor' and the specific 'buttonColor' are fully configurable, allowing you to create 'Cyber' or 'Industrial' pop effects.
QIs it mobile responsive?
The heavy borders and typographic scales adapt dynamically for mobile, Ensuring the bold narrative remains impactful and structural on small screens.