Hand Drawn
Sketchy, hand-drawn style landing page with organic, wobbly lines and creative aesthetics.
Main Features of Hand Drawn
How to Use Hand Drawn in Next.js
Installation Guide for Hand Drawn
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
sketchColor | string | #1a1a1a | Color for hand-drawn lines. |
paperColor | string | #ffffff | Background paper color. |
wobbleIntensity | number | 1 | Intensity of wobbly/organic lines (0.5-2). |
enableHandDrawn | boolean | true | Enable hand-drawn sketch effects. |
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 are the borders made?
The component uses localized SVG paths with `wobbleIntensity` variants to simulate the uneven appearance of physical ink or pencil lines drawn on paper.
QCan I change the ink color?
Yes, the `sketchColor` prop allows you to set the primary 'Ink' hue to match your brand's sketching style.
QIs the paper texture real?
Yes, the background includes a subtle paper grain overlay that reinforces the tactile, sketchbook-inspired atmospheric mood.