Brutal Sketch
Neo-brutalist landing page with hand-drawn sketchy elements and bold design.
Main Features of Brutal Sketch
How to Use Brutal Sketch in Next.js
Installation Guide for Brutal Sketch
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
primaryColor | string | #000000 | Primary brutal color (black). |
accentColor | string | #ff006e | Bold accent color. |
sketchColor | string | #1a1a1a | Color for sketch lines. |
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 were the lines made?
The component uses localized CSS filters and SVG masks (`sketchColor`, `sketchRoughness`) to simulate the uneven appearance of physical charcoal or pencil strokes.
QCan I change the neon pink?
Yes, the `accentColor` prop (default #ff006e) allows you to set the primary 'Pop' color for the entire sketchy interface.
QIs it good for portfolios?
Absolutely, 'Brutal Sketch' is specifically designed to showcase creative work where a unique, hand-crafted atmosphere is paramount.