Text effects

Hand-drawn text marker

Wraps a span of text with a hand-drawn marker annotation, such as a highlight wash, underline, circle, or box, that draws itself on with a slightly imperfect sketched stroke.

Ship changes your team can actually trust.

Every deploy gets a rollback plan before it ships.

Using Hand-drawn text marker

Wraps a span of text with a hand-drawn marker annotation, such as a highlight wash, underline, circle, or box, that draws itself on with a slightly imperfect sketched stroke.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: action, color, animateOnView, strokeWidth

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The code, framework versions and installation commands are available in the workbench above.

Connect your agent

Nearby

2827Highlight focus swapText effectsWords in a sentence take turns being sharp while the rest blur, with a glowing corner-bracket frame sliding over to box in whichever word is in focus.

1995Marker highlightText effectsA phrase with a marker band that wipes in behind it from left to right when the line first comes into view, leaving the words sitting on a colour block.

2818Pointer scramble textText effectsMoving the pointer across a paragraph scrambles the nearby characters into symbols that settle back to the real letters as the cursor moves away.

2410Reading highlight copyText effectsA paragraph that lights up word by word as you scroll it, leaving read words bright and unread words dim so scroll position doubles as a reading position.

2237Sparkling highlight textText effectsBold display text with a handful of tiny four-pointed stars popping in and out at random spots across the letters, each one growing, spinning briefly, then vanishing to be replaced somewhere else.

2260Twinkle highlight textText effectsBold highlighted text with small four-pointed sparkle stars that continuously pop in and out at random positions around and over the letters.