Progressive Text Highlighting Effect With Pure JavaScript – lumin

Category: Javascript , Recommended , Text | June 12, 2018
Author: pshihn
Views Total: 952 views
Official Page: Go to website
Last Update: June 12, 2018
License: MIT


Progressive Text Highlighting Effect With Pure JavaScript – lumin


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 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

Stop the progressive text highlighting effect.


Clear the highlighting effect.


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;

You Might Be Interested In:

Leave a Reply