Flags
The same pool four ways. They stack.
Use it
One script, then a canvas. Height is the size; a wider canvas gives a beam or a rainbow more room.
<script src="https://cdn.jsdelivr.net/gh/TonkaTuff/lumen@v0.1.0/dist/lumen.min.js"></script>
<canvas class="light" width="300" height="200" data-light-body="pool"></canvas>| attribute | value | what it does |
|---|---|---|
| data-light-body | name | any name above |
| data-light-form | ceiling · search · lens | caustics reflected on a ceiling; searchlights instead of a lighthouse; a lens instead of a prism |
| data-light-scale / -sharp | number | caustics: how fine the web is (1), how thin the lines (1.4) |
| data-light-second / -pale / -reach / -band | number | rainbow: 1 for a second bow; 1 for a moonbow; the bow's size (1); band width as a fraction of the height (0.024) |
| data-light-beams / -period / -width / -n | number | lighthouse: how many beams (1), seconds per turn (6), the beam's half-width in radians (0.12), mist dots at a 64px height (900) |
| data-light-facets / -spin / -throw / -tint | number | mirror ball: facets (420), turns per second (0.35), how far the spots land as a fraction of the width (0.75), 1 for coloured spots |
| data-light-spread / -screen / -rays | number | prism: how wide the fan (1), 1 for a screen catching the bands; lens: how many rays (9) |
| data-light-tempo | number | how fast it all happens (1) |
| data-light-ink / -lite / -ground | 1 | monochrome dots that follow the page theme · half the dots · a dark room behind |
| data-light-glow | 0 | no soft glow, just the dots on a clear canvas |