Brutal Sketch
Neo-brutalist landing page with hand-drawn sketchy elements and bold design.
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). |
When to Use
Ideal for creative labs, experimental art projects, and Next.js portfolios that want an organic 'Brutal Sketch' aesthetic. Use this full-page template for a hand-crafted experience with bold black lines, pink pop accents, and rough sketch textures.
Best Practices
Follow React best practices by pairing this with informal typography. Maintain scalable component architecture by keeping branding consistent. Optimize for performance by managed the rough border renders.
Why This Component Matters
Sketchy neo-brutalism breaks the digital barrier by adding a human, tactile touch to your interface. This production-ready UI template helpsคุณ build a brand identity that feels approachable and experimental, improving user affinity through visual novelty.
FAQ
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.
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.