Create April Fools Live Laugh Love module

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);
+}

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 = `
+			<div class="lll-wall-texture"></div>
+			<div class="lll-ornament lll-ornament-top" aria-hidden="true">
+				<span class="lll-wing lll-wing-left">❧</span><span class="lll-heart">♡</span><span class="lll-wing lll-wing-right">❧</span>
+			</div>
+			<div class="lll-words" aria-label="Live, Laugh, Love">
+				<span class="lll-live">Live</span>
+				<span class="lll-separator">·</span>
+				<span class="lll-laugh">Laugh</span>
+				<span class="lll-separator">·</span>
+				<span class="lll-love">Love</span>
+			</div>
+			<div class="lll-ornament lll-ornament-bottom" aria-hidden="true">
+				<span class="lll-wing lll-wing-left">❧</span><span class="lll-heart">♡</span><span class="lll-wing lll-wing-right">❧</span>
+			</div>
+			<div class="lll-accent lll-accent-one" aria-hidden="true">❦</div>
+			<div class="lll-accent lll-accent-two" aria-hidden="true">❧</div>
+			<div class="lll-accent lll-accent-three" aria-hidden="true">❦</div>
+			<div class="lll-accent lll-accent-four" aria-hidden="true">❧</div>
+			<div class="lll-accent lll-accent-five" aria-hidden="true">♡</div>
+			<div class="lll-accent lll-accent-six" aria-hidden="true">♡</div>
+		`;
+
+		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();
+	}
+});

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.