")`,
backgroundRepeat: 'no-repeat',
opacity: 0.7,
}}
/>
{/* Falling purple/orange particles */}
{!reduced &&
particles.map((_, i) => {
const isOrange = i % 3 === 0;
const size = 4 + (i % 3) * 2;
const left = (i * 4597 + 137) % 100;
const duration = 8 + (i % 7) * 1.5;
const delay = (i * 0.45) % 7;
return (
);
})}
);
}
function ChristmasOverlay({ reduced }: { reduced: boolean }) {
const flakes = Array.from({ length: 28 });
return (
<>
{!reduced &&
flakes.map((_, i) => {
const size = 3 + (i % 4) * 2;
const left = (i * 3571 + 251) % 100;
const duration = 10 + (i % 8) * 2;
const delay = (i * 0.55) % 10;
const drift = ((i % 5) - 2) * 12;
return (
);
})}
);
}
// Replaced flashing burst rays with gentle falling confetti
function NewYearOverlay({ reduced }: { reduced: boolean }) {
const confetti = Array.from({ length: 24 });
const colors = ['#ffd700', '#ff4466', '#00d4ff', '#aa44ff', '#ff8800', '#ffffff'];
return (
<>
{/* Gentle falling confetti */}
{!reduced &&
confetti.map((_, i) => {
const c = colors[i % colors.length];
const left = (i * 4597 + 137) % 100;
const size = 3 + (i % 3) * 2;
const duration = 8 + (i % 7) * 1.5;
const delay = (i * 0.4) % 8;
return (
);
})}
{/* Slow gold shimmer */}
);
}
function AutumnOverlay({ reduced }: { reduced: boolean }) {
const leaves = Array.from({ length: 18 });
const colors = [
'rgba(220,80,20,0.75)',
'rgba(200,120,0,0.7)',
'rgba(180,50,10,0.7)',
'rgba(230,150,0,0.65)',
'rgba(160,80,0,0.6)',
];
return (
<>
{!reduced &&
leaves.map((_, i) => {
const left = (i * 5381 + 179) % 100;
const duration = 12 + (i % 6) * 2;
const delay = (i * 0.65) % 12;
const size = 10 + (i % 4) * 4;
const col = colors[i % colors.length];
return (
);
})}
);
}
// Replaced aggressive glitch with playful confetti rain
function AprilFoolsOverlay({ reduced }: { reduced: boolean }) {
const particles = Array.from({ length: 20 });
const symbols = ['?', '!', '¿', '‽', '?', '!'];
const colors = [
'rgba(255,80,80,0.55)',
'rgba(255,200,0,0.55)',
'rgba(80,200,80,0.55)',
'rgba(80,80,255,0.55)',
'rgba(200,80,200,0.55)',
'rgba(80,200,200,0.55)',
];
return (
<>
{/* Subtle rainbow stripe along top edge */}
{/* Gentle falling punctuation symbols */}
{!reduced &&
particles.map((_, i) => {
const left = (i * 5381 + 179) % 100;
const duration = 11 + (i % 5) * 2.5;
const delay = (i * 0.55) % 10;
const col = colors[i % colors.length];
const sym = symbols[i % symbols.length];
const size = 12 + (i % 3) * 5;
return (
{sym}
);
})}
);
}
// Reduced to 4 lanterns, subtler tint and shimmer
function LunarNewYearOverlay({ reduced }: { reduced: boolean }) {
const lanterns = Array.from({ length: 4 }); // was 9
return (
<>
{/* Very subtle red silk tint */}
{/* Slow gold shimmer */}
{/* 4 floating lanterns */}
{lanterns.map((_, i) => {
const left = 10 + ((i * 4603 + 311) % 75);
const top = 10 + ((i * 2311 + 97) % 50);
const duration = 3.5 + (i % 4) * 0.7;
const delay = i * 0.9;
return (
);
})}
);
}
function ValentinesOverlay({ reduced }: { reduced: boolean }) {
const hearts = Array.from({ length: 18 });
const colors = [
'rgba(255,100,140,0.8)',
'rgba(255,150,180,0.65)',
'rgba(220,70,110,0.7)',
'rgba(255,180,200,0.55)',
];
return (
<>
{!reduced &&
hearts.map((_, i) => {
const left = 3 + ((i * 6271 + 443) % 94);
const duration = 9 + (i % 6) * 1.8;
const delay = (i * 0.6) % 9;
const size = 14 + (i % 4) * 5;
const col = colors[i % colors.length];
return (
♥
);
})}
);
}
function StPatricksOverlay({ reduced }: { reduced: boolean }) {
const clovers = Array.from({ length: 18 });
return (
<>
{!reduced &&
clovers.map((_, i) => {
const left = (i * 4129 + 223) % 100;
const duration = 14 + (i % 6) * 2;
const delay = (i * 0.7) % 12;
const size = 14 + (i % 3) * 6;
return (
☘
);
})}
);
}
function EarthDayOverlay({ reduced }: { reduced: boolean }) {
const leaves = Array.from({ length: 16 });
const leafEmoji = ['🌿', '🍃', '🌱', '🍀'];
return (
<>
{!reduced &&
leaves.map((_, i) => {
const left = 3 + ((i * 5023 + 317) % 92);
const duration = 13 + (i % 5) * 2;
const delay = (i * 0.75) % 11;
const size = 14 + (i % 3) * 5;
return (
{leafEmoji[i % leafEmoji.length]}
);
})}
);
}
function DeepSpaceOverlay({ reduced }: { reduced: boolean }) {
const stars = Array.from({ length: 24 });
return (
<>
{!reduced &&
stars.map((_, i) => {
const angle = (i / stars.length) * 360;
const duration = 2.5 + (i % 5) * 0.4;
const delay = (i * 0.18) % 2.5;
const period = 3 + (i % 4) * 0.5;
const size = 1 + (i % 3);
const starColors = [
'rgba(200,180,255,0.9)',
'rgba(150,200,255,0.8)',
'rgba(255,255,255,0.7)',
];
return (
);
})}
);
}
function ArcadeOverlay({ reduced }: { reduced: boolean }) {
return (
<>
{(['0,0', '0,auto', 'auto,0', 'auto,auto'] as const).map((corner, i) => {
const [t, b] = corner.split(',');
return (
{['[■]', '[■]', '[■]', '[■]'][i]}
);
})}
— INSERT COIN —
);
}
// ─── Overlay content map (shared between SeasonalOverlay and SeasonalPreview) ──
function buildOverlayContent(theme: SeasonTheme, reduced: boolean): React.ReactNode {
switch (theme) {
case 'halloween':
return
;
case 'christmas':
return
;
case 'newyear':
return
;
case 'autumn':
return
;
case 'aprilfools':
return
;
case 'lunar':
return
;
case 'valentines':
return
;
case 'stpatricks':
return
;
case 'earthday':
return
;
case 'deepspace':
return
;
case 'arcade':
return
;
default:
return null;
}
}
// ─── Full-screen overlay (fixed position, used in App) ────────────────────────
function SeasonalOverlay({ theme, reduced }: { theme: SeasonTheme; reduced: boolean }) {
return (
{buildOverlayContent(theme, reduced)}
);
}
// ─── Preview overlay (absolute position, contained in a card) ─────────────────
/**
* Renders the ambient (reduced-motion) version of a seasonal overlay inside
* a parent container. The parent must have `position: relative; overflow: hidden`.
*/
export function SeasonalPreview({ theme }: { theme: SeasonTheme }) {
return (
{buildOverlayContent(theme, true)}
);
}
// ─── Main exported component ──────────────────────────────────────────────────
export function SeasonalEffect() {
const settings = useAtomValue(settingsAtom);
const reduced =
typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const theme = useMemo
(() => {
const override = settings.seasonalThemeOverride ?? 'auto';
if (override === 'off') return null;
if (override === 'auto') return getActiveSeason(new Date());
return override as SeasonTheme;
}, [settings.seasonalThemeOverride]);
if (!theme) return null;
return ;
}