Ombro.js

npm

Create beautiful, dynamic shadows using JavaScript.

"Ombro" is a noun meaning "shadow" in Esperanto.

Installation

NPM:

npm install ombro

Using it in a script tag (IIFE), where the ombro namespace is available globally:

<script type="text/javascript" src="https://unpkg.com/ombro/dist/iife/index.js"></script>

Importing as an ES module:

<script type="module">
import { Ombro } from "https://unpkg.com/ombro/dist/esm/index.js"
...
</script>

Usage

import { Ombro, Color } from "ombro"

// Create an Ombro instance and attach it to the DOM element you'd like to shine
const element = document.getElementById("element")
const ombro = new Ombro(element, {
    // Optionally set configuration options
    shadowColor: new Color(0, 0, 0)
})

// Set the light position to mouse pointer coordinates
window.addEventListener("mousemove", function(event) {
    ombro.setLightPosition(event.x, event.y)    // set coordinates of light position
    ombro.draw()    // redraw shadows on change
}, false)

Preview:

https://user-images.githubusercontent.com/31634638/172718758-cb4dca4a-b268-4338-8686-137c33963212.mp4

See more usage examples in examples/ folder. Live demos: cursor.html, light-grid.html.

API Reference

The full API documentation is available here.

Contributing

Please open a new issue if you discover a bug or want to discuss a feature. If you have a bug fix ready, you are welcome to open a pull request.

Credits

Based on the unmaintained library shine.js, ported to TypeScript and added new features.

License

MIT Licensed.