Main Hero Magic to highlight yourself!

no dependencies, works with animated elements, simple api, typescript, modern, can highlight multiple elements

Demo | Docs | Issues

It uses Size Limit to control size.

Install

npm i @spb-web/box-overlay --save

Example

const boxOverlay = new BoxOverlay()

let currentIndex = 0

const selectors = [
    ['.example-element1'],
    ['.example-element2'],
    ['.example-element3'],
    ['.example-element1', '.example-element2'],
]

setInterval(() => {
    currentIndex+=1
    currentIndex = currentIndex >= selectors.length ? 0 : currentIndex

    boxOverlay.clear()

    selectors[currentIndex].forEach(boxOverlay.add)
}, 3000)

TODO:

• Highlight multiple elements
• Handle moving elements
• Rounded corner
• Use Size Limit
• Add events
• Control mouse events
• Tests
• Animation
• Capture mouse/touch events
• Use clip-path
• Centrating highlighted area
• Optimize scroll