Marker Text Outline

Marker Text Outline is a Framer component that highlights specific words with animated, hand-drawn marker-style outlines. It brings a natural, expressive feel to text by simulating marker strokes that draw in smoothly around selected words.

You can choose from multiple highlight styles including underline, wiggle underline, strikethrough, and circle. The component is fully responsive and easy to customize, with controls for marker color, opacity, stroke width, and typography.

Key Features

• Animated marker-style text outlines

• Highlight specific words or phrases

• Multiple styles including underline, wiggle, strike, and circle

• Customizable marker color, opacity, and stroke width

• Smooth draw-in animation

• Responsive by default

Use Cases

• Hero headlines and callouts

• Marketing and landing pages

• Educational and content-focused layouts

• Creative portfolios

• Emphasis on key messaging

Best Practices / Tips

• Highlight only important words for clarity

• Use softer colors for a natural marker look

• Match stroke width to font size for balance

What’s Included

• One Marker Text Outline component

• Multiple marker highlight styles

• Typography and animation controls

Who It’s For

• Framer designers and builders

• Founders and marketers

• Creative agencies and studios

• No-code creators adding expressive text emphasis