Sketchy 2
Hand-drawn sketchy hero section with organic lines and creative, artistic aesthetics.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| sketchColor | string | #1a1a1a | Color for sketch lines. |
| paperColor | string | #ffffff | Background paper color. |
| roughness | number | 1 | Roughness of sketch lines (0.5-2). |
| enableHandDrawn | boolean | true | Enable hand-drawn sketch effects. |
When to Use
Ideal for creative studios, educational platforms, and Next.js portfolios that want a playful, hand-crafted aesthetic. Use this React component for a 'sketchbook' hero section with rough borders, wavy underlines, and organic line art.
Best Practices
Follow React best practices by pairing this with playful, informal typography. Maintain consistent spacing within your design system by using it on soft cream or paper-textured backgrounds. Optimize for performance by managed the Three.js sketch shaders.
Why This Component Matters
Sketch aesthetics break the digital barrier by adding a human, tactile touch to your hero section. This production-ready UI component helpsคุณ build an interface that feels approachable and experimental, improving user engagement through visual novelty.
FAQ
QHow are the sketch lines made?
It uses a combination of GSAP and Three.js fragment shaders to simulate the look of physical pencil or ink strokes on paper.
QCan I adjust the 'roughness'?
Yes, the `roughness` prop allows you to control how 'clean' or 'scribbled' the lines appear, from precise technical drawings to loose sketches.
QIs the paper texture included?
Yes, the background includes a subtle paper grain effect (`paperColor`) that reinforces the sketchbook theme.
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.