Doodled Text

Doodled Text is a component for Framer that brings personality and playfulness to your typography by adding hand-drawn doodle effects — either animated or static — to individual words.

Built with flexibility and creative expression in mind, this component lets you highlight up to 7 words with four distinct doodle styles: circle, underline, highlight, and cross-out. Each word can be independently customized with its own doodle type and color, giving you complete creative control over your text emphasis.

The component uses authentic sketch-style SVG filters to create organic, hand-drawn effects that feel natural and spontaneous. Each doodle features subtle texture variations and multiple overlapping strokes to replicate the imperfect charm of real marker drawings. Enable animations to watch doodles elegantly draw themselves in sequence when they enter the viewport, or keep them static for a clean, instant look.

What's Included:

• Four doodle styles (circle, underline, highlight, cross-out)

• Toggle between animated and static modes

• Smooth draw-on animations with viewport detection

• Loop or play-once animation modes

• Adjustable animation duration

• Individual controls for up to 7 words

• Customizable colors for each word

• Adjustable thickness and opacity

• Hand-drawn texture effects

• Sequential word-by-word animation

• Multi-line text support with \n breaks

• Full font customization (size, weight, family)

• Text color control

• Fully responsive design

• Lifetime updates

• Ongoing support