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:

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