make your website look like you drew it yourself ✏️
npm install scrawl-ui
a complete handmade aesthetic for your website. not just wiggly borders — a full visual language.
SVG displacement filters make any HTML element look hand-drawn. cards, buttons, borders — all slightly imperfect.
a palette of slightly chalky, slightly warm colors. not flat hex codes — actual medium simulation.
stars, hearts, arrows, flowers, lightning — drop them anywhere with a data attribute. scatter them like you mean it.
from "barely there" to "my kid made this" — four levels.
everything you need. zero config. slap a class on it.
plain card
add .sw-card to any div. pair with .sw-shadow for the raised look.
more wobble
.sw-wobble-3 pushes it further — great for accent cards.
tilted
.sw-tilt-r rotates 2°. .sw-tilt-l the other way. great for stickers.
slightly chalky, slightly warm. like real pigment.
add data-sticker="name" anywhere. size and color via data attributes.
here's a full artist profile card — every element is scrawl.
zero build step. drop in two files and you're done.
npm install scrawl-ui // in your JS entry import 'scrawl-ui/scrawl.css' import 'scrawl-ui/scrawl.js'
<link rel="stylesheet" href="scrawl.css"> <script src="scrawl.js" defer></script>
<!-- wobbly card --> <div class="sw-card sw-shadow sw-tilt-r"> hello world </div> <!-- button --> <button class="sw-btn sw-btn-red">click me</button> <!-- sticker anywhere --> <span data-sticker="star" data-color="#f7c948" data-size="2em"></span>
65+ hand-drawn icons. search by vibe —
"social photo",
"money",
"instagram"
— all work.
<!-- link icons.js after scrawl.js --> <script src="icons.js"></script> <!-- basic --> <span data-icon="instagram"></span> <!-- with size, color, wobble --> <span data-icon="dollar" data-size="2.5em" data-color="#4cb878" data-wobble="2"></span> // JS search scrawl.icons.search('social photo') // → ['instagram','camera','image',...]
sticky notes, washi tape, torn edges, spiral binding — the whole thing.
sw-wobble for extra hand-drawn vibes
March 15 — started the new scrawl component kit today. sticky notes, washi tape, torn edges. this is going to be so fun.
also need to remember to water my plants. they're looking a bit sad.