📑 Handwritten Highlights ✍️ ✨

Beautiful & animated text highlighter for your React/Next.js project. Enhance your typography with colorful, animated highlights that resemble a real handwritten work.

Requirements

This library works with React 17+ and NextJS.
Tested and working on Next 15.4

Installation

npm install handwritten-highlights

First, wrap your app with the provider

  import { HighlightProvider } from "handwritten-highlights";
  ...

  <HighlightProvider>
    <App />
  </HighlightProvider>

Then apply the Highlights

import { HighlightMarker, HighlightUnderline } from "handwritten-highlights";
...
function YourComponent() {
  
  return (
    <>
      ...
      <p>
        <HighlightMarker>Lorem ipsum</HighlightMarker>, dolor
        sit amet consectetur adipisicing elit. Commodi eos temporibus,
        adipisci facilis qui cumque, reiciendis saepe mollitia ratione
        optio officia illum earum fugiat fugit distinctio! Repellat,
        porro adipisci magni accusantium nemo fugiat minus libero eos
        quis, numquam excepturi molestias error consequatur tempore?
        Corrupti at eum nemo, rem nulla facilis!
      </p>
    </>
  )
}

What styles are available?

Currently there are 2 available styles:

• Marker style
• Underline style

You can use them respectively as follows:

import { HighlightMarker } from "handwritten-highlights"

<HighlightMarker>...some text...</HighlightMarker>

import { HighlightUnderline } from "handwritten-highlights"

<HighlightUnderline>...some text...</HighlightUnderline>

Configure the highlight the way you prefer

By default no animation is displayed but they are easy to enable and configure

<HighlightMarker
  animationEffect="ease-out"
  animationOffset={500}
  animationDuration={600}
  highlightColor="hsla(288, 60%, 50%, 0.30)"
>
  ...
</HighlightMarker>

animationEffect

"ease" | "ease-in" | "ease-out" | "ease-in-out"

"None" is set by default. If you specify an animation, to make it effective, other parameters are required which are:

animationOffset:{number}  // 0 by default. Expressed in milliseconds

animationDuration:{number}  // 0 by default. Expressed in milliseconds

You can also change the color for each effect

highlightColor:{CSS Color string} // Only rgb() , rgba() , hsla(), hex are supported

There are some effect variants available

highlightVariant: {string} // 1, 2, random

Currently there are only 2 for both Marker and Underline.
If set to "random", every time the page is reloaded, the effect variant to use changes.

... More effect variants coming soon!

License

See the LICENSE file.