From 8280d51e7ab718d0b9efacd116f4165c88be1c9f Mon Sep 17 00:00:00 2001 From: David Nguyen Date: Wed, 7 Oct 2026 15:57:13 +0700 Subject: [PATCH 01/12] feat: add local Halloween ghost Lottie asset --- public/lottie/halloween-ghost.json | 91 ++++++++++++++++++++++++++++++ 1 file changed, 91 insertions(+) create mode 100644 public/lottie/halloween-ghost.json diff --git a/public/lottie/halloween-ghost.json b/public/lottie/halloween-ghost.json new file mode 100644 index 0000000000..7161e43fd2 --- /dev/null +++ b/public/lottie/halloween-ghost.json @@ -0,0 +1,91 @@ +{ + "v": "5.12.2", + "fr": 60, + "ip": 0, + "op": 180, + "w": 160, + "h": 160, + "nm": "Arcade Halloween Ghost", + "ddd": 0, + "assets": [], + "layers": [ + { + "ddd": 0, + "ind": 1, + "ty": 4, + "nm": "Ghost", + "sr": 1, + "ks": { + "o": { "a": 0, "k": 100 }, + "r": { + "a": 1, + "k": [ + { "t": 0, "s": [-3], "e": [3], "i": { "x": [0.42], "y": [1] }, "o": { "x": [0.58], "y": [0] } }, + { "t": 90, "s": [3], "e": [-3], "i": { "x": [0.42], "y": [1] }, "o": { "x": [0.58], "y": [0] } }, + { "t": 180, "s": [-3] } + ] + }, + "p": { + "a": 1, + "k": [ + { "t": 0, "s": [80, 86, 0], "e": [80, 70, 0], "i": { "x": [0.42], "y": [1] }, "o": { "x": [0.58], "y": [0] } }, + { "t": 90, "s": [80, 70, 0], "e": [80, 86, 0], "i": { "x": [0.42], "y": [1] }, "o": { "x": [0.58], "y": [0] } }, + { "t": 180, "s": [80, 86, 0] } + ] + }, + "a": { "a": 0, "k": [0, 0, 0] }, + "s": { "a": 0, "k": [100, 100, 100] } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "nm": "Body", + "it": [ + { "ty": "el", "p": { "a": 0, "k": [0, -14] }, "s": { "a": 0, "k": [78, 84] }, "nm": "Head" }, + { "ty": "rc", "p": { "a": 0, "k": [0, 18] }, "s": { "a": 0, "k": [78, 54] }, "r": { "a": 0, "k": 14 }, "nm": "Body block" }, + { "ty": "el", "p": { "a": 0, "k": [-27, 43] }, "s": { "a": 0, "k": [30, 30] }, "nm": "Tail left" }, + { "ty": "el", "p": { "a": 0, "k": [0, 47] }, "s": { "a": 0, "k": [31, 31] }, "nm": "Tail center" }, + { "ty": "el", "p": { "a": 0, "k": [27, 43] }, "s": { "a": 0, "k": [30, 30] }, "nm": "Tail right" }, + { "ty": "fl", "c": { "a": 0, "k": [0.94, 0.94, 1, 1] }, "o": { "a": 0, "k": 100 }, "r": 1, "nm": "Ghost fill" }, + { + "ty": "tr", + "p": { "a": 0, "k": [0, 0] }, + "a": { "a": 0, "k": [0, 0] }, + "s": { "a": 0, "k": [100, 100] }, + "r": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 }, + "sk": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 } + } + ] + }, + { + "ty": "gr", + "nm": "Eyes", + "it": [ + { "ty": "el", "p": { "a": 0, "k": [-14, -17] }, "s": { "a": 0, "k": [9, 13] }, "nm": "Eye left" }, + { "ty": "el", "p": { "a": 0, "k": [14, -17] }, "s": { "a": 0, "k": [9, 13] }, "nm": "Eye right" }, + { "ty": "el", "p": { "a": 0, "k": [0, 4] }, "s": { "a": 0, "k": [8, 11] }, "nm": "Mouth" }, + { "ty": "fl", "c": { "a": 0, "k": [0.13, 0.08, 0.2, 1] }, "o": { "a": 0, "k": 100 }, "r": 1, "nm": "Face fill" }, + { + "ty": "tr", + "p": { "a": 0, "k": [0, 0] }, + "a": { "a": 0, "k": [0, 0] }, + "s": { "a": 0, "k": [100, 100] }, + "r": { "a": 0, "k": 0 }, + "o": { "a": 0, "k": 100 }, + "sk": { "a": 0, "k": 0 }, + "sa": { "a": 0, "k": 0 } + } + ] + } + ], + "ip": 0, + "op": 180, + "st": 0, + "bm": 0 + } + ], + "markers": [] +} \ No newline at end of file From fab4572e4f73e882c872e4e93946dd8c9ca2cc7f Mon Sep 17 00:00:00 2001 From: David Nguyen Date: Wed, 7 Oct 2026 15:57:44 +0700 Subject: [PATCH 02/12] feat: render Halloween ghost with LottieFiles player --- components/seasonal/halloween-season.tsx | 95 +++++++++++++++++++++++- 1 file changed, 93 insertions(+), 2 deletions(-) diff --git a/components/seasonal/halloween-season.tsx b/components/seasonal/halloween-season.tsx index 6acc303fbf..cf99f34cb7 100644 --- a/components/seasonal/halloween-season.tsx +++ b/components/seasonal/halloween-season.tsx @@ -1,6 +1,6 @@ "use client" -import { useEffect, useState } from "react" +import { useEffect, useRef, useState } from "react" const SEASON_STORAGE_KEY = "arcade-seasonal-theme" @@ -15,6 +15,97 @@ function isWidgetPath(pathname: string) { return /^\/(?:[a-z]{2}(?:-[a-z]{2})?\/)?widget\/?$/i.test(pathname) } +const DOTLOTTIE_PLAYER_SCRIPT = + "https://unpkg.com/@dotlottie/player-component@2.7.12/dist/dotlottie-player.mjs" + +type DotLottieElement = HTMLElement & { + play?: () => void + pause?: () => void +} + +function HalloweenGhostLottie() { + const hostRef = useRef(null) + const [ready, setReady] = useState(false) + + useEffect(() => { + let active = true + let player: DotLottieElement | null = null + const motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)") + + const syncPlayback = () => { + if (!player) return + if (document.hidden || motionQuery.matches) { + player.pause?.() + } else { + player.play?.() + } + } + + const mountPlayer = async () => { + try { + if (!window.customElements.get("dotlottie-player")) { + let script = document.querySelector( + 'script[data-arcade-dotlottie="true"]', + ) + + if (!script) { + script = document.createElement("script") + script.type = "module" + script.src = DOTLOTTIE_PLAYER_SCRIPT + script.dataset.arcadeDotlottie = "true" + document.head.appendChild(script) + } + + await Promise.race([ + window.customElements.whenDefined("dotlottie-player"), + new Promise((_, reject) => + window.setTimeout(() => reject(new Error("dotLottie player timeout")), 6000), + ), + ]) + } + + if (!active || !hostRef.current) return + + player = document.createElement("dotlottie-player") as DotLottieElement + player.setAttribute("src", "/lottie/halloween-ghost.json") + player.setAttribute("background", "transparent") + player.setAttribute("speed", "0.8") + player.setAttribute("loop", "") + player.setAttribute("autoplay", "") + player.setAttribute("aria-hidden", "true") + player.className = "halloween-lottie-player" + hostRef.current.replaceChildren(player) + setReady(true) + syncPlayback() + } catch { + // Keep the lightweight CSS/emoji fallback when the runtime is blocked. + } + } + + void mountPlayer() + document.addEventListener("visibilitychange", syncPlayback) + motionQuery.addEventListener("change", syncPlayback) + + return () => { + active = false + document.removeEventListener("visibilitychange", syncPlayback) + motionQuery.removeEventListener("change", syncPlayback) + player?.pause?.() + player?.remove() + } + }, []) + + return ( + + ) +} + export default function HalloweenSeason() { const [enabled, setEnabled] = useState(false) @@ -57,7 +148,7 @@ export default function HalloweenSeason() {
☾ - 👻 + 👻 🦇 🦇 From 48668caa80988695bdd7ef6f445e446e73096b69 Mon Sep 17 00:00:00 2001 From: David Nguyen Date: Wed, 7 Oct 2026 15:57:57 +0700 Subject: [PATCH 03/12] style: place lightweight Halloween Lottie in hero atmosphere --- app/styles/halloween-season.css | 43 ++++++++++++++++++++++++++++++++- 1 file changed, 42 insertions(+), 1 deletion(-) diff --git a/app/styles/halloween-season.css b/app/styles/halloween-season.css index fb0c82dce9..0e3211157a 100644 --- a/app/styles/halloween-season.css +++ b/app/styles/halloween-season.css @@ -193,6 +193,39 @@ html[data-season="halloween"] .arcade-footer { animation-delay: -4.5s; } +.halloween-lottie-ghost { + position: absolute; + top: clamp(170px, 23vh, 250px); + left: clamp(10px, 2.2vw, 34px); + width: clamp(72px, 8vw, 118px); + aspect-ratio: 1; + display: grid; + place-items: center; + opacity: 0.38; + filter: drop-shadow(0 10px 26px rgba(139, 92, 246, 0.22)); +} + +.halloween-lottie-player { + width: 100%; + height: 100%; + display: block; +} + +.halloween-lottie-fallback { + display: grid; + place-items: center; + width: 100%; + height: 100%; + font-size: clamp(1.5rem, 3vw, 2.4rem); + opacity: 0.8; + animation: halloween-ghost-drift 9s ease-in-out infinite; +} + +.halloween-lottie-ghost.is-ready .halloween-lottie-fallback { + display: none; +} + + .halloween-fog { position: absolute; left: -20vw; @@ -481,12 +514,20 @@ html[data-season="halloween"] .tier-help.is-live { font-size: 1.45rem; opacity: 0.4; } + + .halloween-lottie-ghost { + top: 132px; + left: 4px; + width: 58px; + opacity: 0.28; + } } @media (prefers-reduced-motion: reduce) { .halloween-bat, .halloween-ghost, - .halloween-fog { + .halloween-fog, + .halloween-lottie-fallback { animation: none; } From 5caf0c06db867920fd4de1422560cba9af75397e Mon Sep 17 00:00:00 2001 From: David Nguyen Date: Wed, 7 Oct 2026 17:06:48 +0700 Subject: [PATCH 04/12] fix: load Lottie asset correctly in PR previews --- components/seasonal/halloween-season.tsx | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/components/seasonal/halloween-season.tsx b/components/seasonal/halloween-season.tsx index cf99f34cb7..b16450b959 100644 --- a/components/seasonal/halloween-season.tsx +++ b/components/seasonal/halloween-season.tsx @@ -15,10 +15,12 @@ function isWidgetPath(pathname: string) { return /^\/(?:[a-z]{2}(?:-[a-z]{2})?\/)?widget\/?$/i.test(pathname) } -const DOTLOTTIE_PLAYER_SCRIPT = - "https://unpkg.com/@dotlottie/player-component@2.7.12/dist/dotlottie-player.mjs" +const LOTTIE_PLAYER_SCRIPT = + "https://unpkg.com/@lottiefiles/lottie-player@2.0.12/dist/lottie-player.js" -type DotLottieElement = HTMLElement & { +const LOTTIE_ASSET_PATH = `${process.env.NEXT_PUBLIC_BASE_PATH ?? ""}/lottie/halloween-ghost.json` + +type LottiePlayerElement = HTMLElement & { play?: () => void pause?: () => void } @@ -29,7 +31,7 @@ function HalloweenGhostLottie() { useEffect(() => { let active = true - let player: DotLottieElement | null = null + let player: LottiePlayerElement | null = null const motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)") const syncPlayback = () => { @@ -43,21 +45,21 @@ function HalloweenGhostLottie() { const mountPlayer = async () => { try { - if (!window.customElements.get("dotlottie-player")) { + if (!window.customElements.get("lottie-player")) { let script = document.querySelector( - 'script[data-arcade-dotlottie="true"]', + 'script[data-arcade-lottie="true"]', ) if (!script) { script = document.createElement("script") script.type = "module" - script.src = DOTLOTTIE_PLAYER_SCRIPT - script.dataset.arcadeDotlottie = "true" + script.src = LOTTIE_PLAYER_SCRIPT + script.dataset.arcadeLottie = "true" document.head.appendChild(script) } await Promise.race([ - window.customElements.whenDefined("dotlottie-player"), + window.customElements.whenDefined("lottie-player"), new Promise((_, reject) => window.setTimeout(() => reject(new Error("dotLottie player timeout")), 6000), ), @@ -66,8 +68,8 @@ function HalloweenGhostLottie() { if (!active || !hostRef.current) return - player = document.createElement("dotlottie-player") as DotLottieElement - player.setAttribute("src", "/lottie/halloween-ghost.json") + player = document.createElement("lottie-player") as LottiePlayerElement + player.setAttribute("src", LOTTIE_ASSET_PATH) player.setAttribute("background", "transparent") player.setAttribute("speed", "0.8") player.setAttribute("loop", "") From 88f5becaa4c6fb3d4e9015d6b00d052c2feaf62b Mon Sep 17 00:00:00 2001 From: David Nguyen Date: Wed, 7 Oct 2026 17:24:44 +0700 Subject: [PATCH 05/12] fix: replace malformed Halloween ghost Lottie artwork --- public/lottie/halloween-ghost.json | 102 ++++++++++++++++++++++++----- 1 file changed, 85 insertions(+), 17 deletions(-) diff --git a/public/lottie/halloween-ghost.json b/public/lottie/halloween-ghost.json index 7161e43fd2..100c2b0fa7 100644 --- a/public/lottie/halloween-ghost.json +++ b/public/lottie/halloween-ghost.json @@ -20,16 +20,16 @@ "r": { "a": 1, "k": [ - { "t": 0, "s": [-3], "e": [3], "i": { "x": [0.42], "y": [1] }, "o": { "x": [0.58], "y": [0] } }, - { "t": 90, "s": [3], "e": [-3], "i": { "x": [0.42], "y": [1] }, "o": { "x": [0.58], "y": [0] } }, - { "t": 180, "s": [-3] } + { "t": 0, "s": [-2], "e": [2], "i": { "x": [0.42], "y": [1] }, "o": { "x": [0.58], "y": [0] } }, + { "t": 90, "s": [2], "e": [-2], "i": { "x": [0.42], "y": [1] }, "o": { "x": [0.58], "y": [0] } }, + { "t": 180, "s": [-2] } ] }, "p": { "a": 1, "k": [ - { "t": 0, "s": [80, 86, 0], "e": [80, 70, 0], "i": { "x": [0.42], "y": [1] }, "o": { "x": [0.58], "y": [0] } }, - { "t": 90, "s": [80, 70, 0], "e": [80, 86, 0], "i": { "x": [0.42], "y": [1] }, "o": { "x": [0.58], "y": [0] } }, + { "t": 0, "s": [80, 86, 0], "e": [80, 72, 0], "i": { "x": [0.42], "y": [1] }, "o": { "x": [0.58], "y": [0] } }, + { "t": 90, "s": [80, 72, 0], "e": [80, 86, 0], "i": { "x": [0.42], "y": [1] }, "o": { "x": [0.58], "y": [0] } }, { "t": 180, "s": [80, 86, 0] } ] }, @@ -40,14 +40,76 @@ "shapes": [ { "ty": "gr", - "nm": "Body", + "nm": "Ghost silhouette", "it": [ - { "ty": "el", "p": { "a": 0, "k": [0, -14] }, "s": { "a": 0, "k": [78, 84] }, "nm": "Head" }, - { "ty": "rc", "p": { "a": 0, "k": [0, 18] }, "s": { "a": 0, "k": [78, 54] }, "r": { "a": 0, "k": 14 }, "nm": "Body block" }, - { "ty": "el", "p": { "a": 0, "k": [-27, 43] }, "s": { "a": 0, "k": [30, 30] }, "nm": "Tail left" }, - { "ty": "el", "p": { "a": 0, "k": [0, 47] }, "s": { "a": 0, "k": [31, 31] }, "nm": "Tail center" }, - { "ty": "el", "p": { "a": 0, "k": [27, 43] }, "s": { "a": 0, "k": [30, 30] }, "nm": "Tail right" }, - { "ty": "fl", "c": { "a": 0, "k": [0.94, 0.94, 1, 1] }, "o": { "a": 0, "k": 100 }, "r": 1, "nm": "Ghost fill" }, + { + "ty": "sh", + "nm": "Body path", + "ks": { + "a": 0, + "k": { + "i": [ + [0, 0], + [-9, -6], + [-5, -10], + [0, -10], + [0, 0], + [0, 0], + [0, 0], + [0, 0], + [0, 0], + [0, 0], + [0, 10], + [5, -10] + ], + "o": [ + [9, 0], + [8, 6], + [4, 10], + [0, 10], + [0, 0], + [0, 0], + [0, 0], + [0, 0], + [0, 0], + [0, 0], + [0, -10], + [-8, 6] + ], + "v": [ + [0, -43], + [26, -34], + [39, -13], + [39, 27], + [27, 18], + [14, 31], + [0, 18], + [-14, 31], + [-27, 18], + [-39, 27], + [-39, -13], + [-26, -34] + ], + "c": true + } + } + }, + { + "ty": "fl", + "c": { "a": 0, "k": [0.93, 0.91, 1, 1] }, + "o": { "a": 0, "k": 100 }, + "r": 1, + "nm": "Ghost fill" + }, + { + "ty": "st", + "c": { "a": 0, "k": [0.55, 0.36, 0.96, 1] }, + "o": { "a": 0, "k": 46 }, + "w": { "a": 0, "k": 2 }, + "lc": 2, + "lj": 2, + "nm": "Purple outline" + }, { "ty": "tr", "p": { "a": 0, "k": [0, 0] }, @@ -62,12 +124,18 @@ }, { "ty": "gr", - "nm": "Eyes", + "nm": "Face", "it": [ - { "ty": "el", "p": { "a": 0, "k": [-14, -17] }, "s": { "a": 0, "k": [9, 13] }, "nm": "Eye left" }, - { "ty": "el", "p": { "a": 0, "k": [14, -17] }, "s": { "a": 0, "k": [9, 13] }, "nm": "Eye right" }, - { "ty": "el", "p": { "a": 0, "k": [0, 4] }, "s": { "a": 0, "k": [8, 11] }, "nm": "Mouth" }, - { "ty": "fl", "c": { "a": 0, "k": [0.13, 0.08, 0.2, 1] }, "o": { "a": 0, "k": 100 }, "r": 1, "nm": "Face fill" }, + { "ty": "el", "p": { "a": 0, "k": [-13, -13] }, "s": { "a": 0, "k": [8, 12] }, "nm": "Eye left" }, + { "ty": "el", "p": { "a": 0, "k": [13, -13] }, "s": { "a": 0, "k": [8, 12] }, "nm": "Eye right" }, + { "ty": "el", "p": { "a": 0, "k": [0, 7] }, "s": { "a": 0, "k": [7, 9] }, "nm": "Mouth" }, + { + "ty": "fl", + "c": { "a": 0, "k": [0.14, 0.08, 0.22, 1] }, + "o": { "a": 0, "k": 100 }, + "r": 1, + "nm": "Face fill" + }, { "ty": "tr", "p": { "a": 0, "k": [0, 0] }, From 7e254dafb698b855c32d1c53bac7e1f3284e0a53 Mon Sep 17 00:00:00 2001 From: David Nguyen Date: Wed, 7 Oct 2026 17:24:56 +0700 Subject: [PATCH 06/12] style: keep a single consistent Halloween ghost --- components/seasonal/halloween-season.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/components/seasonal/halloween-season.tsx b/components/seasonal/halloween-season.tsx index b16450b959..394d3c839e 100644 --- a/components/seasonal/halloween-season.tsx +++ b/components/seasonal/halloween-season.tsx @@ -151,7 +151,6 @@ export default function HalloweenSeason() {
☾ - 👻 🦇 🦇 🦇 From 47a0ef9526e528990bad280302841bfbcd9f05fe Mon Sep 17 00:00:00 2001 From: David Nguyen Date: Wed, 7 Oct 2026 17:25:00 +0700 Subject: [PATCH 07/12] style: soften Halloween Lottie decoration --- app/styles/halloween-season.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/styles/halloween-season.css b/app/styles/halloween-season.css index 0e3211157a..9a70170ffd 100644 --- a/app/styles/halloween-season.css +++ b/app/styles/halloween-season.css @@ -201,8 +201,8 @@ html[data-season="halloween"] .arcade-footer { aspect-ratio: 1; display: grid; place-items: center; - opacity: 0.38; - filter: drop-shadow(0 10px 26px rgba(139, 92, 246, 0.22)); + opacity: 0.26; + filter: drop-shadow(0 10px 26px rgba(139, 92, 246, 0.18)); } .halloween-lottie-player { @@ -519,7 +519,7 @@ html[data-season="halloween"] .tier-help.is-live { top: 132px; left: 4px; width: 58px; - opacity: 0.28; + opacity: 0.22; } } From cc3129dfc69d09b194c08b0e6c38821711f96e0b Mon Sep 17 00:00:00 2001 From: David Nguyen Date: Wed, 7 Oct 2026 18:51:53 +0700 Subject: [PATCH 08/12] fix: use selected Trick & Treat artwork instead of malformed custom Lottie --- components/seasonal/halloween-season.tsx | 100 +++-------------------- 1 file changed, 12 insertions(+), 88 deletions(-) diff --git a/components/seasonal/halloween-season.tsx b/components/seasonal/halloween-season.tsx index 394d3c839e..782865a210 100644 --- a/components/seasonal/halloween-season.tsx +++ b/components/seasonal/halloween-season.tsx @@ -15,95 +15,19 @@ function isWidgetPath(pathname: string) { return /^\/(?:[a-z]{2}(?:-[a-z]{2})?\/)?widget\/?$/i.test(pathname) } -const LOTTIE_PLAYER_SCRIPT = - "https://unpkg.com/@lottiefiles/lottie-player@2.0.12/dist/lottie-player.js" - -const LOTTIE_ASSET_PATH = `${process.env.NEXT_PUBLIC_BASE_PATH ?? ""}/lottie/halloween-ghost.json` - -type LottiePlayerElement = HTMLElement & { - play?: () => void - pause?: () => void -} - -function HalloweenGhostLottie() { - const hostRef = useRef(null) - const [ready, setReady] = useState(false) - - useEffect(() => { - let active = true - let player: LottiePlayerElement | null = null - const motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)") - - const syncPlayback = () => { - if (!player) return - if (document.hidden || motionQuery.matches) { - player.pause?.() - } else { - player.play?.() - } - } - - const mountPlayer = async () => { - try { - if (!window.customElements.get("lottie-player")) { - let script = document.querySelector( - 'script[data-arcade-lottie="true"]', - ) - - if (!script) { - script = document.createElement("script") - script.type = "module" - script.src = LOTTIE_PLAYER_SCRIPT - script.dataset.arcadeLottie = "true" - document.head.appendChild(script) - } - - await Promise.race([ - window.customElements.whenDefined("lottie-player"), - new Promise((_, reject) => - window.setTimeout(() => reject(new Error("dotLottie player timeout")), 6000), - ), - ]) - } - - if (!active || !hostRef.current) return - - player = document.createElement("lottie-player") as LottiePlayerElement - player.setAttribute("src", LOTTIE_ASSET_PATH) - player.setAttribute("background", "transparent") - player.setAttribute("speed", "0.8") - player.setAttribute("loop", "") - player.setAttribute("autoplay", "") - player.setAttribute("aria-hidden", "true") - player.className = "halloween-lottie-player" - hostRef.current.replaceChildren(player) - setReady(true) - syncPlayback() - } catch { - // Keep the lightweight CSS/emoji fallback when the runtime is blocked. - } - } - - void mountPlayer() - document.addEventListener("visibilitychange", syncPlayback) - motionQuery.addEventListener("change", syncPlayback) - - return () => { - active = false - document.removeEventListener("visibilitychange", syncPlayback) - motionQuery.removeEventListener("change", syncPlayback) - player?.pause?.() - player?.remove() - } - }, []) +const TRICK_TREAT_PREVIEW = + "https://assets-v2.lottiefiles.com/a/8105cc26-8f6a-11ef-bbc4-57c0778cff41/NL40K2th2v.png" +function HalloweenTrickTreatArtwork() { return ( -