Bring Your Text to Life: Hand-Drawn Scribble Effects in Astro
The Art of Imperfection
In a world of pixel-perfect grids and sans-serif fonts, sometimes you just want to scribble.
Adding hand-drawn elements can make your website feel more human, approachable, and fun. Today, we’re going to build a ScribbleText component in Astro that brings that notebook aesthetic to life.
Meet the Component
Here is what we are building. Hover over them!
Wiggle Wiggle
Hover me!
Pop!
Hover me!
Draw Me
I drew on load
How to Use It
Using the component is super simple. Just import it and pass your text.
|Props Breakdown
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | required | The text to display |
as | tag | span | The HTML tag to render (h1, p, div, etc.) |
color | string | var(--color-text) | The text color |
animation | enum | none | wiggle, pop, draw |
trigger | enum | load | load, hover, scroll |
Scroll Triggered Magic
The best part? You can trigger these animations when the user scrolls them into view. This is perfect for highlighting key points as the reader moves down the page.
Scroll down…
I appear when you see me!
The “Kalam” Font
The secret sauce is the Kalam font from Google Fonts. It has that perfect marker-on-paper feel.
Don’t overdo it! Scribble text works best for headings, emphasis, or small playful elements. If you use it for long paragraphs, it becomes hard to read.
Under the Hood
The component uses a combination of CSS Keyframes for the animations and the IntersectionObserver API for the scroll triggering.
The draw animation is a clever trick using clip-path. We start with the text fully clipped (hidden) and animate the clip-path to reveal it, making it look like it’s being written in real-time.
@keyframes draw {
0% {
clip-path: inset(0 100% 0 0);
}
100% {
clip-path: inset(0 0 0 0);
}
}Now go forth and make your websites a little less serious and a little more you.