Skip to content

fix: use selected Trick & Treat Halloween artwork #95

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
hoangsvit wants to merge 12 commits into from
Closed

fix: use selected Trick & Treat Halloween artwork #95

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
8280d51
feat: add local Halloween ghost Lottie asset
hoangsvit Oct 7, 2026
fab4572
feat: render Halloween ghost with LottieFiles player
hoangsvit Oct 7, 2026
48668ca
style: place lightweight Halloween Lottie in hero atmosphere
hoangsvit Oct 7, 2026
5caf0c0
fix: load Lottie asset correctly in PR previews
hoangsvit Oct 7, 2026
88f5bec
fix: replace malformed Halloween ghost Lottie artwork
hoangsvit Oct 7, 2026
7e254da
style: keep a single consistent Halloween ghost
hoangsvit Oct 7, 2026
47a0ef9
style: soften Halloween Lottie decoration
hoangsvit Oct 7, 2026
cc3129d
fix: use selected Trick & Treat artwork instead of malformed custom L…
hoangsvit Oct 7, 2026
570bcf8
style: render the selected Trick & Treat artwork cleanly
hoangsvit Oct 7, 2026
31bac1d
chore: remove malformed custom Halloween Lottie asset
hoangsvit Oct 7, 2026
8cf53ee
chore: remove unused Lottie player hook
hoangsvit Oct 7, 2026
fa51d8d
fix: preserve dark-mode-only Halloween moon in PR preview
hoangsvit Oct 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 34 additions & 0 deletions app/styles/halloween-season.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,6 +193,27 @@ 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.26;
filter: drop-shadow(0 10px 26px rgba(139, 92, 246, 0.18));
}

.halloween-trick-treat-art {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
filter: drop-shadow(0 10px 22px rgba(255, 138, 31, 0.16));
}


.halloween-fog {
position: absolute;
left: -20vw;
Expand Down Expand Up @@ -481,6 +502,13 @@ 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.22;
}
}

@media (prefers-reduced-motion: reduce) {
Expand All @@ -505,3 +533,9 @@ html[data-season="halloween"] .tier-help.is-live {
opacity: 0.38;
}
}


/* Keep the crescent moon as a dark-mode Halloween accent only. */
html.light[data-season="halloween"] .halloween-moon {
display: none;
}
20 changes: 18 additions & 2 deletions components/seasonal/halloween-season.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,23 @@ function isWidgetPath(pathname: string) {
return /^\/(?:[a-z]{2}(?:-[a-z]{2})?\/)?widget\/?$/i.test(pathname)
}

const TRICK_TREAT_PREVIEW =
"https://assets-v2.lottiefiles.com/a/8105cc26-8f6a-11ef-bbc4-57c0778cff41/NL40K2th2v.png"

function HalloweenTrickTreatArtwork() {
return (
<div className="halloween-lottie-ghost" aria-hidden="true">
<img
className="halloween-trick-treat-art"
src={TRICK_TREAT_PREVIEW}
alt=""
loading="lazy"
decoding="async"
/>
</div>
)
}

export default function HalloweenSeason() {
const [enabled, setEnabled] = useState(false)

Expand Down Expand Up @@ -57,8 +74,7 @@ export default function HalloweenSeason() {
<div className="halloween-fog halloween-fog-one" />
<div className="halloween-fog halloween-fog-two" />
<span className="halloween-moon"><span>☾</span></span>
<span className="halloween-ghost halloween-ghost-left">👻</span>
<span className="halloween-ghost halloween-ghost-right">👻</span>
<HalloweenTrickTreatArtwork />
<span className="halloween-bat halloween-bat-one">🦇</span>
<span className="halloween-bat halloween-bat-two">🦇</span>
<span className="halloween-bat halloween-bat-three">🦇</span>
Expand Down