commit 2fc7d10cc9d7968eea51165fc9bf937ea0c34b87 Author: Aaron Axvig Date: Sun Aug 2 22:05:47 2026 -0500 Create April Fools Live Laugh Love module diff --git a/MMM-LiveLaughLove.css b/MMM-LiveLaughLove.css new file mode 100644 index 0000000..e977e46 --- /dev/null +++ b/MMM-LiveLaughLove.css @@ -0,0 +1,151 @@ +.MMM-LiveLaughLove .lll-overlay { + --lll-ink: rgba(238, 238, 238, 0.88); + position: fixed; + inset: 0; + overflow: hidden; + background: + radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.035), transparent 32%), + #000; + color: var(--lll-ink); + text-align: center; +} + +.MMM-LiveLaughLove .lll-hidden { + display: none; +} + +.MMM-LiveLaughLove .lll-wall-texture { + position: absolute; + inset: 0; + opacity: 0.12; + background-image: + repeating-linear-gradient(2deg, transparent 0 7px, rgba(255, 255, 255, 0.04) 8px), + repeating-linear-gradient(91deg, transparent 0 19px, rgba(255, 255, 255, 0.03) 20px); +} + +.MMM-LiveLaughLove .lll-words { + position: absolute; + top: 46%; + left: 50%; + width: 94vw; + transform: translate(-50%, -50%) rotate(-2deg); + font-family: "URW Chancery L", "Brush Script MT", "Segoe Script", cursive; + font-size: clamp(5rem, 12vw, 14rem); + font-weight: 700; + line-height: 0.9; + letter-spacing: -0.055em; + text-shadow: 0 0 1px rgba(255, 255, 255, 0.35); +} + +.MMM-LiveLaughLove .lll-words span { + display: inline-block; +} + +.MMM-LiveLaughLove .lll-live { + transform: rotate(-4deg) translateY(-0.08em); +} + +.MMM-LiveLaughLove .lll-laugh { + transform: rotate(2deg) scale(1.08); +} + +.MMM-LiveLaughLove .lll-love { + transform: rotate(-2deg) translateY(0.05em); +} + +.MMM-LiveLaughLove .lll-separator { + margin: 0 0.08em; + font-family: Georgia, serif; + font-size: 0.42em; + vertical-align: 0.28em; +} + +.MMM-LiveLaughLove .lll-ornament { + position: absolute; + left: 50%; + display: flex; + align-items: center; + justify-content: center; + gap: 0.08em; + transform: translateX(-50%); + font-family: Georgia, serif; + font-size: clamp(5rem, 9vw, 10rem); + line-height: 1; + opacity: 0.62; +} + +.MMM-LiveLaughLove .lll-ornament-top { + top: 16%; +} + +.MMM-LiveLaughLove .lll-ornament-bottom { + bottom: 13%; + font-size: clamp(6rem, 11vw, 12rem); +} + +.MMM-LiveLaughLove .lll-wing { + display: inline-block; +} + +.MMM-LiveLaughLove .lll-wing-left { + transform: rotate(18deg) scaleX(-1); +} + +.MMM-LiveLaughLove .lll-wing-right { + transform: rotate(-18deg); +} + +.MMM-LiveLaughLove .lll-heart { + display: inline-block; + font-size: 0.72em; + transform: translateY(-0.08em); +} + +.MMM-LiveLaughLove .lll-accent { + position: absolute; + font-family: Georgia, serif; + line-height: 1; + opacity: 0.4; +} + +.MMM-LiveLaughLove .lll-accent-one { + top: 31%; + left: 8%; + font-size: clamp(2.8rem, 5vw, 5.5rem); + transform: rotate(-28deg); +} + +.MMM-LiveLaughLove .lll-accent-two { + top: 34%; + right: 7%; + font-size: clamp(2rem, 3.5vw, 4rem); + transform: rotate(34deg); +} + +.MMM-LiveLaughLove .lll-accent-three { + bottom: 29%; + right: 9%; + font-size: clamp(3rem, 5.5vw, 6rem); + transform: rotate(22deg) scaleX(-1); +} + +.MMM-LiveLaughLove .lll-accent-four { + bottom: 32%; + left: 7%; + font-size: clamp(2.2rem, 4vw, 4.5rem); + transform: rotate(-36deg) scaleX(-1); +} + +.MMM-LiveLaughLove .lll-accent-five { + top: 10%; + right: 18%; + font-size: clamp(1.8rem, 3vw, 3.5rem); + transform: rotate(14deg); +} + +.MMM-LiveLaughLove .lll-accent-six { + bottom: 8%; + left: 18%; + font-size: clamp(1.6rem, 2.8vw, 3rem); + transform: rotate(-12deg); +} diff --git a/MMM-LiveLaughLove.js b/MMM-LiveLaughLove.js new file mode 100644 index 0000000..fcb9506 --- /dev/null +++ b/MMM-LiveLaughLove.js @@ -0,0 +1,71 @@ +Module.register("MMM-LiveLaughLove", { + defaults: { + preview: false, + updateInterval: 60 * 60 * 1000 + }, + + start() { + this.scheduleUpdate(); + }, + + isAprilFoolsDay(date = new Date()) { + return date.getMonth() === 3 && date.getDate() === 1; + }, + + shouldDisplay() { + return this.config.preview || this.isAprilFoolsDay(); + }, + + getStyles() { + return ["MMM-LiveLaughLove.css"]; + }, + + getDom() { + const wrapper = document.createElement("div"); + wrapper.className = "lll-overlay"; + + if (!this.shouldDisplay()) { + wrapper.classList.add("lll-hidden"); + return wrapper; + } + + wrapper.innerHTML = ` +
+ +
+ Live + · + Laugh + · + Love +
+ + + + + + + + `; + + return wrapper; + }, + + scheduleUpdate() { + this.updateDom(0); + this.updateTimer = setInterval(() => this.updateDom(1000), this.config.updateInterval); + }, + + suspend() { + clearInterval(this.updateTimer); + }, + + resume() { + clearInterval(this.updateTimer); + this.scheduleUpdate(); + } +}); diff --git a/README.md b/README.md new file mode 100644 index 0000000..45e82c2 --- /dev/null +++ b/README.md @@ -0,0 +1,17 @@ +# MMM-LiveLaughLove + +An April Fools' Day background for MagicMirror that parodies the ubiquitous +“Live, Laugh, Love” vinyl wall cling. + +```js +{ + module: "MMM-LiveLaughLove", + position: "fullscreen_below", + config: { + preview: false + } +} +``` + +The module displays automatically on April 1 in the mirror's local timezone. +Set `preview: true` while developing to display it on any date.