Brutalism
Bold neo-brutalist landing page with high contrast and geometric shapes.
Main Features of Brutalism
How to Use Brutalism in Next.js
Installation Guide for Brutalism
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
primaryColor | string | #121212 | Primary dark color. |
accentColor | string | #ccff00 | High contrast accent color (lime). |
secondaryColor | string | #a855f7 | Secondary accent color (purple). |
shadowOffset | string | 8px | Offset for brutalist shadow effects. |
borderWidth | string | 4px | Border width for geometric 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
QWhat is the GSAP dependency?
This template uses GSAP and Lenis for ultra-smooth layout transitions and performance-optimized geometric animations across the entire page.
QCan I change the lime accent?
Yes, the `accentColor` prop sets the primary highlight tone for all buttons and geometric focal points in the brutalist layout.
QIs it mobile responsive?
The brutalist modules stack into a high-impact vertical grid on mobile, ensuring that the bold lines and shadows remains legible and effective.