Brutal Glass Sketch
Hybrid design combining neo-brutalism with glassmorphism and sketchy elements.
Main Features of Brutal Glass Sketch
How to Use Brutal Glass Sketch in Next.js
Installation Guide for Brutal Glass Sketch
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
primaryColor | string | #000000 | Primary brutal color (black). |
accentColor | string | #ffff00 | High contrast accent color. |
glassBlur | string | 20px | Blur for glassmorphism effect. |
sketchRoughness | number | 1 | Roughness of sketch elements (0.5-2). |
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
QHow does the 'Hybrid' work?
The component layers `glassBlur` modules over a high-contrast `primaryColor` canvas, using SVG sketch masks to add an organic, hand-drawn feel to the architectural shapes.
QCan I adjust the roughness?
Yes, the `sketchRoughness` prop allows you to control how 'clean' or 'organic' the sketch-lines appear throughout the interface.
QIs it mobile responsive?
The hybrid modules stack into a high-impact vertical grid on mobile, ensuring that the bold lines and glass blurs remains legible and effective.