• Stars
    star
    544
  • Rank 81,699 (Top 2 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 6 years ago
  • Updated almost 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

LuminJS

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.

Install

Download the latest from dist folder

or from npm:

npm install --save lumin

Usage

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

progress

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(duration)

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.

stop()

Stops highlighting if it's in progress.

clear()

Clears the highlighting.

Examples

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

License

MIT License (c) Preet Shihn

More Repositories

1

workly

A really simple way to move a function or class to a web worker. 🏋️‍♀️→ 😄
JavaScript
1,881
star
2

legra

LegraJS lets you draw using LEGO like brick shapes
TypeScript
408
star
3

windtalk

Simplest way to communicate with iFrames and other windows
JavaScript
131
star
4

brickception

A fun take on the classic bricks breakout game with popup windows!
TypeScript
119
star
5

rough-paint

Using Houdini CSS Paint API with Rough.js
JavaScript
91
star
6

bezier-points

TypeScript
84
star
7

math-ml

MathML implementation using custom elements
TypeScript
79
star
8

sockly

TypeScript
69
star
9

puppet-canvas

HTML5 Canvas implementation for NodeJS backed by Puppeteer
TypeScript
64
star
10

every-color-picker

Color picker components. Framework independent.
TypeScript
60
star
11

venn

Declarative Venn Diagrams
TypeScript
50
star
12

planar-range

A 2D range component
TypeScript
47
star
13

byproxy

A different way of thinking of web client-server RPC
TypeScript
41
star
14

emoji-slider

A slider control with emojis
JavaScript
41
star
15

points-on-path

Estimate point on a SVG path
TypeScript
38
star
16

base69

Base69 is a binary-to-text encoding scheme inspired by Base64 encoding
JavaScript
37
star
17

rough-draw

Creates a sketchy, hand-drawn version of any image using RoughJS and a WASM version of OpenCV
JavaScript
35
star
18

stippled-image

Custom element to show the stippled version of image
TypeScript
31
star
19

film-strip

TypeScript
25
star
20

proxly

Easiest way to proxy a list of objects/functions in Javascript
JavaScript
24
star
21

path-data-parser

Yet another SVG Path Parser
TypeScript
21
star
22

hachure-fill

Fill a polygon with lines at the specified angle and gap between them
TypeScript
20
star
23

media-pool

A pool of reusable media elements for the web.
TypeScript
16
star
24

alit-element

A simple base class that extends lit-element with some utility functions and adds decorators
TypeScript
12
star
25

csi

https://createsocialimages.com
TypeScript
10
star
26

key-tree

Simple keyed tree data structure 🔑🌲
JavaScript
9
star
27

portcast

Multicasting for Channel Messaging API
TypeScript
8
star
28

genart-tree

Simple generative art
HTML
7
star
29

cielab-dither

Image dithering in the CIELAB color space
TypeScript
7
star
30

flappy-checkbox

TypeScript
6
star
31

sketchy-path

Generate sketchy hand-drawn versions of SVG paths
TypeScript
5
star
32

gpt-search-helper

A browser extension to add ChatGPT results to your search results
TypeScript
4
star
33

ecp-website

Nunjucks
4
star
34

no-script

custom element that will block all child script elements from executing
TypeScript
4
star
35

stipple

Stipple
TypeScript
3
star
36

shihn.ca.apps

Code to accompany blog posts
TypeScript
2
star
37

dag

Basic Directed Acyclic Graph
JavaScript
2
star
38

soso

Sosos Elements
JavaScript
2
star
39

lit-matrix

Matrix math using tagged template literals
TypeScript
2
star
40

virtual-list

Yet another virtual list web component
TypeScript
2
star
41

rough-playground

Silly, tiny, experiments using Rough.js
HTML
2
star
42

recolored-image

Custom element to show image shifted to a different color
TypeScript
2
star
43

undoredo

HTML
1
star
44

byproxy-demo

JavaScript
1
star
45

worker-script

TypeScript
1
star
46

lit-app-utils

TypeScript
1
star
47

roughjs-typescript-example

Sample typescript project using rough.js
HTML
1
star
48

superconductorjs

super conductor js
HTML
1
star
49

navu11

Nunjucks
1
star
50

bannerdemo

HTML
1
star
51

legra-web

Website for LegraJS
HTML
1
star
52

x-link-title-enabler

Browser extension to add link titles back in the view
TypeScript
1
star
53

no-more-script

One script to stop all other scripts
TypeScript
1
star
54

cell-canvas

JavaScript
1
star
55

HeyHue

This is going to be the most ultimatest lib to work with colors
JavaScript
1
star
56

checked-clock

A clock that uses other checked-elements as bits to draw numbers
JavaScript
1
star