https://github.com/arafatamim/ombro

Create beautiful, dynamic shadows in JavaScript
https://github.com/arafatamim/ombro

dom javascript shadows shinejs typescript

Last synced: 24 days ago
JSON representation

Create beautiful, dynamic shadows in JavaScript

• Host: GitHub
• URL: https://github.com/arafatamim/ombro
• Owner: arafatamim
• License: mit
• Created: 2021-10-19T06:36:42.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-07-20T17:28:37.000Z (over 2 years ago)
• Last Synced: 2025-01-10T18:33:22.432Z (25 days ago)
• Topics: dom, javascript, shadows, shinejs, typescript
• Language: TypeScript
• Homepage: https://arafatamim.github.io/ombro/
• Size: 189 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Ombro.js

[![npm](https://img.shields.io/npm/v/ombro?color=%23CC3534&logo=npm)](https://www.npmjs.com/package/ombro)

![npm](https://img.shields.io/npm/dm/ombro)

Create beautiful, dynamic shadows using JavaScript.

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

[![https://nodei.co/npm/ombro.png?downloads=true&downloadRank=true&stars=true](https://nodei.co/npm/ombro.png?downloads=true&downloadRank=true&stars=true)](https://www.npmjs.com/package/ombro)

## Installation

NPM:

```sh

npm install ombro

```

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

```html

```

Importing as an ES module:

```html

import { Ombro } from "https://unpkg.com/ombro/dist/esm/index.js"

...

```

## Usage

```js

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/](https://github.com/arafatamim/ombro/tree/main/examples) folder.

**Live demos:** [cursor.html](https://arafatamim.github.io/ombro/examples/cursor.html), [light-grid.html](https://arafatamim.github.io/ombro/examples/light-grid.html).

## API Reference

The full API documentation is available [here](https://arafatamim.github.io/ombro).

## 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](https://github.com/bigspaceship/shine.js), ported to TypeScript and added new features.

## License

MIT Licensed.

© 2021 Tamim Arafat.