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…

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