Highlighter

A text highlighter that applies a hand-drawn marker effect to text. It animates on view and adjusts to text size. Use it to emphasize text with a unique, dynamic style.

byMagic UI

Installation

terminal

pnpm dlx layro-cli add @magicuidesign/highlighter

npx layro-cli add @magicuidesign/highlighter

npx layro-cli add @magicuidesign/highlighter

bunx layro-cli add @magicuidesign/highlighter

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client"

import { useLayoutEffect, useRef } from "react"
import type React from "react"
import { useInView } from "motion/react"
import { annotate } from "rough-notation"
import { type RoughAnnotation } from "rough-notation/lib/model"

type AnnotationAction =
  | "highlight"
  | "underline"
  | "box"
  | "circle"
  | "strike-through"