Text Highlighter
Text Highlighter lays a skewed block behind the words and scales it out from the left edge the first time the phrase is on screen. It is one Motion element with a scaleX, so the swipe costs a single composited transform rather than a paint.
The block is drawn behind the text, not over it: the text keeps its own colour and stays selectable, and the swipe is aria-hidden. Under reduced motion the block is simply already there, so the phrase never sits half-highlighted.
Usage
Build interfaces that move with intent instead of fading in on every scroll.
<template>
<p class="text-2xl font-semibold text-highlighted">
Build interfaces that
<MTextHighlighter text="move with intent" />
instead of fading in on every scroll.
</p>
</template>
Examples
Customize
Customize
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | '' | Text to highlight. The default slot wins when it is filled. |
highlightColor | string | undefined | Colour of the swipe. Left out, the theme's bg-primary/30 is used, which follows your brand colour. |
duration | number | 0.7 | Seconds for the swipe. It runs once, when the phrase first comes into view. |
delay | number | 0.1 | Wait before the swipe starts, in seconds. Useful when several phrases share a line. |
class | string | '' | CSS classes for the wrapper. |
Slots
| Slot | Props | Description |
|---|---|---|
default | - | The phrase to highlight. Anything inline works, including links and <code>. |
UI
This component's theme exposes the slots below. Override any of them per instance with the ui prop, or app-wide under ui.textHighlighter in app.config.ts.
| Prop | Type | Default | Description |
|---|---|---|---|
ui | object | - | Per-slot classes merged over the theme defaults. |
| Slot | Props | Description |
|---|---|---|
root | - | relative inline-block |
highlight | - | pointer-events-none absolute inset-x-[-0.18em] inset-y-[0.06em] origin-left rounded-[0.2em] bg-primary/30 |
text | - | relative z-10 |
Accessibility
The swipe is decorative and aria-hidden, so a screen reader reads the sentence once and hears no extra content. The phrase itself is ordinary text: it can be selected, searched and copied, and the highlight never covers a glyph. Because the animation is a transform that runs once on entry, it cannot trap a reader mid-state — with reduced motion the block is rendered at full width from the first frame.