Sketch
Hand-drawn sketchy landing page with organic lines and artistic aesthetics.
Main Features of Sketch
How to Use Sketch in Next.js
Installation Guide for Sketch
Props
Customize the component with these 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. |
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 to simulate the uneven appearance of physical charcoal or pencil strokes drawn on paper.
QCan I adjust the roughness?
Yes, the `roughness` prop (0.5-2) allows you to control how 'clean' or 'organic' the sketch-lines appear throughout the page.
QIs the paper texture adjustable?
The `paperColor` prop (default white) allows you to set the background tone, while the grain intensity remains optimized for a high-fidelity sketchbook look.