Highlight
A marker stroke that draws itself across the text.
import
import { Highlight } from '@joshicodes/cock';Marker
Size isn't everything. It's what you do with it that counts.
Behaviour
- Survives a line break, because the stroke is a background rather than a box.
- Skips straight to the final state when the visitor has reduced motion turned on.
API
Read out of the component sources at build time, so it matches the version you installed.
Every component also takes class, merged
through tailwind-merge so your utility wins.
Props of Highlight
| Prop | Type | Default |
|---|---|---|
variant A broad marker stroke behind the text, or a line under it. | 'marker' | 'underline' | 'marker' |
color Any CSS colour. Defaults to a translucent accent. | string | — |
duration | number | 800 |
delay | number | 0 |
trigger Draw once the text is on screen, or straight away. | 'visible' | 'mount' | 'visible' |
class | string | — |
Snippets of Highlight
| Snippet | Type | Default |
|---|---|---|
children required | Snippet | — |