The Sketchbook
Hand-drawn sketchbook portfolio with artistic and creative aesthetics.
Main Features of The Sketchbook
How to Use The Sketchbook in Next.js
Installation Guide for The Sketchbook
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
sketchColor | string | #2d3436 | Color for sketch lines and drawings. |
paperColor | string | #fefefe | Background paper color (off-white/cream). |
sketchRoughness | number | 1 | Roughness of sketch 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 `roughness` variants to simulate the uneven appearance of physical 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 (e.g., blue ink, charcoal, or pencil gray).
QIs the paper texture real?
Yes, the `paperColor` prop is used in combination with a subtle overlay grain to simulate high-fidelity sketchbook paper.