lightbulb

Project shadows under elements based on the position of a light source

Usage no npm install needed!

<script type="module">
  import lightbulb from 'https://cdn.skypack.dev/lightbulb';
</script>

README

Lightbulb

Software License npm

Project shadows under elements based on the position of a light source.

Installation

yarn add lightbulb

Usage

Using a fixed light source

import Lightbulb from 'lightbulb';

Lightbulb.illuminate({
    container: '.lightbulb-container',
    item: '.lightbulb-item',
    spread: 20,
    color: 'rgba(0, 0, 0, .2)',
    inset: false,
    lightbulb: {
        x: 0,
        y: 0,
        distance: 20
    }
});

Using the mouse as a floating light source

import Lightbulb from 'lightbulb';

Lightbulb.float({
    container: '.lightbulb-container',
    item: '.lightbulb-item',
    spread: 20,
    color: 'rgba(0, 0, 0, .2)',
    inset: false,
    lightbulb: {
        distance: 20
    }
});

Example

Build and run the example:

yarn
yarn run build:example
open ./example/index.html

Credits

License

The MIT License (MIT). Please check the LICENSE for more information.