A JavaScript library to progressively highlight any text on a page.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
dist . Jun 2, 2018
examples added type definition Jun 1, 2018
.gitignore initial code Jun 1, 2018
LICENSE initial code Jun 1, 2018
README.md Update README.md Jun 5, 2018
index.d.ts Update index.d.ts Jun 2, 2018
index.js . Jun 2, 2018
package-lock.json initial code Jun 1, 2018
package.json fixed a bug where total char cound was incorrect Jun 2, 2018
rollup.config.js initial code Jun 1, 2018



A JavaScript library to progressively highlight any text on a page.

Great for when you want users to pay attention to some important text.
It can also be used to show progress of a task − Read something while tasks are being completed.

Related buzz words: Tiny (~1kB gzipped), No-dependency

Visit lumin.rocks to see it in action.

Demo gif

Note: This does NOT modify the user selection.


Download the latest from dist folder

or from npm:

npm install --save lumin


Instantiate lumin with a node. All text under that node, including child nodes, will be highlighted. Then call start to start highlighting.

const luminator = lumin(domNode);
luminator.start(5000); // 5000ms to highlight

Or you can manually control the progress

// Set progress to 50%
luminator.progress = 50;

Note: The node being instantiated with has to be a positioned node. i.e. position is not static for this to work. In most cases, position:relative will do the trick.

Full API


Numeric property one can set to indicate the progress of the highlight. The value is in percentage (0 to 100). This is useful when showing a progress of a task, e.g., a file upload.


Start the highlight.

duration is the approximate time in milliseconds the highlighting should take.

returns a Promise which is resolved when the highlight ends. The resolved value is true if the animation ends without interruption; false if stop was called.


Stops highlighting if it's in progress.


Clears the highlighting.


See it live in action on lumin.rocks or view sample code in the Examples folder.


MIT License (c) Preet Shihn