Progressive Text Highlighting Effect With Pure JavaScript – lumin

Preview:

Description:

lumin is a small, zero-dependency JavaScript library used to progressively highlight text within a specific container.

How to use it:

Install the lumin library with npm.

# NPM
$ npm install lumin --save

Import the lumin into your document.

import lumin from './index.js';

Initialize the lumin library and specify the container element that contains text to be highlighted.

const myInstance = lumin(document.querySelector('.container'));

Start the progressive text highlighting effect and specify the duration of the animation.

// 5 seconds
myInstance.start(5000)

Stop the progressive text highlighting effect.

myInstance.stop()

Clear the highlighting effect.

myInstance.clear()

Set the progress of the text highlighting effect.

// 0 - 100
myInstance.progress = 50

Customize the text color & background color of the highlighted text.

--lumin-background-color: darkblue;
--lumin-color: white;