--- /** * TextHighlightIllustration — a short story paragraph where one phrase * looks "selected": a colored highlight sweeps in behind it while a * floating formatting toolbar (bold/italic/underline/strikethrough, a * link action, and an "Ask AI" item with a pulsing dot) pops up above it, * as if a text editor had just registered a selection. * * Both entrances are plain CSS keyframe animations that run once, on * mount: the highlight scales in from the left edge, the toolbar * blur/scale/slides into place a beat later. Zero client JavaScript. */ export interface Props { /** Paragraph text before the highlighted phrase. */ textBefore?: string; /** The phrase that gets the highlight sweep + toolbar. */ highlightText?: string; /** Paragraph text after the highlighted phrase. */ textAfter?: string; /** Highlight sweep color, light scheme. */ highlightColor?: string; /** Highlight sweep color, dark scheme. */ darkHighlightColor?: string; /** Show the floating formatting toolbar above the highlighted phrase. */ toolbar?: boolean; /** Additional classes for the root element. */ class?: string; } const { textBefore = 'Once upon a time, in a small cottage at the edge of a quiet wood, there lived a boy named Alder.', highlightText = 'He kept a hand-drawn map of every trail he had ever walked', textAfter = 'and dreamed of the day he would finally reach the mountain everyone said had no top.', highlightColor = '#bfdbfe', darkHighlightColor = '#172554', toolbar = true, class: className, } = Astro.props; const style = `--thi-highlight: ${highlightColor}; --thi-highlight-dark: ${darkHighlightColor}`; ---

{textBefore}{' '} { toolbar && ( ) } {highlightText} {' '} {textAfter}

Installation

Install dependencies

Add these files

Configuration

Use it