Lava Monster footer
The “A Lava Monster built this.” mark for any site Todd works on. The eye follows your pointer, glances around when you stop, and blinks. With reduced motion turned on it stays still and looks ahead. It links to lavamonster.io.
Themes and sizes
theme="dark" (default)
theme="light"
Use it: one script tag
<script type="module" src="https://lavamonster-footer.pages.dev/v1/lava-monster-footer.js"></script>
<lava-monster-footer theme="dark"></lava-monster-footer>| Attribute | Values | Default |
|---|---|---|
theme | dark (for dark pages), light | dark |
size | sm, md, lg | md |
text | any line | A Lava Monster built this. |
href | any URL | https://lavamonster.io |
iris | red, blue, green, purple | red |
wordmark | off hides the LAVA MONSTER wordmark | shown |
To match a site's own colours, set --lm-ink, --lm-mute or --lm-focus on the element.
Or copy and paste: plain HTML and CSS
Copy /snippet/footer.html into your footer. It works with no JavaScript (the eye is a still SVG). Keep the optional script tag at the end of the snippet to bring the eye to life.
Versions
/v1/ is the current major version. It gets fixes and small additions but never breaking changes, so pin to /v1/. A breaking change ships as /v2/, and /v1/ stays up.