Dev Design LibraryAnimated Text Highlight Components
Dev Design Library indexes 21 Animated text highlight components from 15 open-source UI libraries, with the most coming from Animations (Svelte), Aceternity UI, UI Lab, Velora UI and Sona UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. These are the text highlight components tagged as animated: motion on hover, on scroll or on load, usually built with CSS transitions or Framer Motion. Text highlight components belong to the Text group.
HighlighterMagic UI · ReactA text highlighter that mimics the effect of a human-drawn marker stroke.
Highlighted TextSpell UI · ReactText with sliding background highlight animation using mix-blend-mode.
Animated Text 08 - Marker HighlightShadcn Space · ReactMarker Highlight animation component using motion
Text Highlight WavePixel Perfect · ReactA highlight colour washes across a headline character by character, lifting each glyph out of a dimmed rest state as…
Annotated TextOpenSourceUI · React
Underline DrawKinetics · HTML/CSSScale-transform underline, draws left to right on hover
Annotated TextComponentry · ReactHand-drawn marks — circles, highlights, underlines, cross-outs — sketched around inline text.
Fancy Text HighlighterAnimations (Svelte) · Svelte
AI Overview HighlightNotra · ReactA mark that sweeps in Google's blue highlight.
Text HighlightSona UI · React
Directional UnderlineUI Lab · ReactThe underline comes in from the side your cursor entered and leaves toward the side it left.
Pointer HighlightVelora UI · ReactDraws an outline around a phrase on scroll, then glides a pointer icon to its corner.
Doodle CalloutSpaceUI · ReactA hand-drawn arrow that draws itself next to a handwritten label, replaying on a loop.
Metallic ShimmerD2Studio UI · ReactBrushed-metal text: a bright band travels across the glyphs like a reflection, not a glow. Wraps any inline content…
CoverAceternity UI · React
Fancy Underline To BackgroundAnimations (Svelte) · Svelte
Testimonial HighlightUI Lab · ReactSwipes a highlighter across the line that sold the customer, one line at a time.
Text HighlighterVelora UI · ReactMarker-pen sweep that draws in when the phrase scrolls into view.
Hero HighlightAceternity UI · React
Spell Highlighted TextAnimations (Svelte) · Svelte
Pointer HighlightAceternity UI · React