Display

Highlight

A marker-pen highlight for a phrase, with an optional animated sweep that renders its final state under reduced motion.

<script>
  import { Highlight } from "@codeatlasdev/ui";
</script>

<h1>Ship <Highlight animated>faster</Highlight>.</h1>

Highlight renders a native <mark> painted as a marker stroke across the lower half of the line. With animated the marker sweeps in once on mount with --ca-ease-out-expo. Under prefers-reduced-motion: reduce, or --ca-motion-scale: 0, there is no animation and the marker is drawn complete. The color is --ca-highlight-color (a brand tint by default); under forced colors it uses the system Mark color. It wraps across lines without breaking.

<script lang="ts">
	import { Highlight } from "@codeatlasdev/ui";
</script>

<p class="line">
	Ship <Highlight animated>editorial pages</Highlight> without a line of local CSS, and keep <Highlight>static marks</Highlight> where motion would distract.
</p>

<style>
	.line {
		margin: 0;
		font-size: var(--ca-font-size-h4);
		line-height: var(--ca-line-height-snug);
	}
</style>