Lightbulb

Project natural 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

• Sebastian De Deyne
• All Contributors

License

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