Merge pull request #471 from sei-protocol/new-year

add new year celebration

Author: alexander-sei

package.json

@@ -33,6 +33,7 @@
 		"nextra": "^4.6.1",
 		"nextra-theme-docs": "^4.6.1",
 		"react": "^19.2.3",
+		"react-confetti": "^6.4.0",
 		"react-dom": "^19.2.3",
 		"react-snowfall": "^2.4.0",
 		"sonner": "^2.0.7",

src/components/Confetti/Confetti.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import React from 'react';
+import ReactConfetti from 'react-confetti';
+
+export const Confetti = () => {
+	// We need window size for react-confetti to work properly full screen
+	// If react-use is not available we might need a custom hook or just 100vw/100vh
+	// Let's check if react-use is installed, otherwise fallback to CSS approach or basic hook
+
+	const [dimensions, setDimensions] = React.useState({ width: 0, height: 0 });
+
+	React.useEffect(() => {
+		const updateDimensions = () => {
+			setDimensions({
+				width: window.innerWidth,
+				height: window.innerHeight
+			});
+		};
+
+		// Initial set
+		updateDimensions();
+
+		window.addEventListener('resize', updateDimensions);
+		return () => window.removeEventListener('resize', updateDimensions);
+	}, []);
+
+	return (
+		<div className='fixed inset-0 w-screen h-screen z-0 pointer-events-none'>
+			<ReactConfetti width={dimensions.width} height={dimensions.height} numberOfPieces={50} recycle={true} />
+		</div>
+	);
+};

src/components/Logo/Logo.tsx

@@ -1,4 +1,4 @@
-import { ENABLE_CHRISTMAS_THEME } from '../../constants/featureFlags';
+import { ENABLE_CHRISTMAS_THEME, ENABLE_NEW_YEAR_THEME } from '../../constants/featureFlags';
 
 export function Logo() {
 	return (
@@ -29,6 +29,15 @@ export function Logo() {
 					<rect x='18' y='-4' width='36' height='8' rx='4' fill='white' />
 				</g>
 			)}
+			{/* New Year Hat */}
+			{ENABLE_NEW_YEAR_THEME && (
+				<g transform='translate(15 5) rotate(-30) scale(1.2) translate(-36 0)'>
+					<path d='M25 5 L 55 5 L 40 -35 Z' fill='#FFD700' />
+					<circle cx='40' cy='-35' r='4' fill='#FF4500' />
+					<circle cx='35' cy='-15' r='3' fill='#4169E1' />
+					<circle cx='45' cy='-5' r='3' fill='#32CD32' />
+				</g>
+			)}
 		</svg>
 	);
 }
@@ -50,6 +59,15 @@ export function LogoMobile() {
 					<rect x='18' y='-4' width='36' height='8' rx='4' fill='white' />
 				</g>
 			)}
+			{/* New Year Hat */}
+			{ENABLE_NEW_YEAR_THEME && (
+				<g transform='translate(15 5) rotate(-30) scale(1.2) translate(-36 0)'>
+					<path d='M25 5 L 55 5 L 40 -35 Z' fill='#FFD700' />
+					<circle cx='40' cy='-35' r='4' fill='#FF4500' />
+					<circle cx='35' cy='-15' r='3' fill='#4169E1' />
+					<circle cx='45' cy='-5' r='3' fill='#32CD32' />
+				</g>
+			)}
 		</svg>
 	);
 }

src/components/Snowflakes/Snowflakes.tsx

@@ -1,19 +1,18 @@
 'use client';
 
-import React from 'react';
 import Snowfall from 'react-snowfall';
 
 export const Snowflakes = () => {
 	return (
-		<Snowfall
-			style={{
-				position: 'fixed',
-				width: '100vw',
-				height: '100vh',
-				zIndex: 50,
-				pointerEvents: 'none'
-			}}
-			snowflakeCount={200}
-		/>
+		<div className='fixed inset-0 w-screen h-screen z-40 pointer-events-none'>
+			<Snowfall
+				style={{
+					position: 'absolute',
+					width: '100%',
+					height: '100%'
+				}}
+				snowflakeCount={150}
+			/>
+		</div>
 	);
 };

src/constants/featureFlags.ts

@@ -1 +1,2 @@
 export const ENABLE_CHRISTMAS_THEME = true;
+export const ENABLE_NEW_YEAR_THEME = false;

src/providers/DocsProviders.tsx

@@ -4,13 +4,14 @@ import { Layout, Navbar } from 'nextra-theme-docs';
 import dynamic from 'next/dynamic';
 import { AskAIAssistant } from '../components/AskAIAssistant/AskAIAssistant';
 import { Logo, LogoMobile } from '../components/Logo';
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { Footer } from '../components/Footer/Footer';
 import { Theme } from '@radix-ui/themes';
 import { ThemeSwitch } from 'nextra-theme-docs';
 import { usePathname } from 'next/navigation';
 import { Snowflakes } from '../components/Snowflakes/Snowflakes';
-import { ENABLE_CHRISTMAS_THEME } from '../constants/featureFlags';
+import { Confetti } from '../components/Confetti/Confetti';
+import { ENABLE_CHRISTMAS_THEME, ENABLE_NEW_YEAR_THEME } from '../constants/featureFlags';
 
 // Defer Nextra Search until user clicks the trigger (client-only wrapper)
 const SearchDynamic = dynamic(() => import('../components/NextraSearch/NextraSearch'), { ssr: false, loading: () => <div /> });
@@ -58,7 +59,6 @@ export default function DocsProviders({ children, pageMap }) {
 			<Navbar
 				logo={<Logo />}
 				logoLink='/'
-				/* Remove excessive horizontal padding on small/medium screens; restore on large */
 				className='flex items-center justify-between w-full dark:bg-neutral-900 bg-neutral-100 px-2 lg:px-4'
 				children={
 					<div className='flex items-center justify-between gap-4'>
@@ -88,8 +88,9 @@ export default function DocsProviders({ children, pageMap }) {
 				{isMobile && <ConditionalNavbar />}
 				<Theme accentColor='red' grayColor='gray' scaling='100%'>
 					{ENABLE_CHRISTMAS_THEME && <Snowflakes />}
+					{ENABLE_NEW_YEAR_THEME && <Confetti />}
 					{!isMobile && <ConditionalNavbar />}
-					{children}
+					<div className='relative z-10'>{children}</div>
 				</Theme>
 			</Layout>
 		</>

yarn.lock

@@ -7698,6 +7698,13 @@ react-compiler-runtime@^19.1.0-rc.2:
   resolved "https://registry.yarnpkg.com/react-compiler-runtime/-/react-compiler-runtime-19.1.0-rc.1-rc-af1b7da-20250421.tgz#996cf954a27b7f73ade1710e44f4303fa84e80e2"
   integrity sha512-Til/juI+Zfq+eYpGYn9lFxqW5RyJDs3ThOxmg0757aMrPpfx/Zb0SnGMVJhF3vw+bEQjJiD+xPFD3+kE0WbyeA==
 
+react-confetti@^6.4.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/react-confetti/-/react-confetti-6.4.0.tgz#e9416b5b3c8baf6f0bb1c5a8e1e3c89babd2c837"
+  integrity sha512-5MdGUcqxrTU26I2EU7ltkWPwxvucQTuqMm8dUz72z2YMqTD6s9vMcDUysk7n9jnC+lXuCPeJJ7Knf98VEYE9Rg==
+  dependencies:
+    tween-functions "^1.2.0"
+
 react-dom@^19.2.3:
   version "19.2.3"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-19.2.3.tgz#f0b61d7e5c4a86773889fcc1853af3ed5f215b17"
@@ -8689,6 +8696,11 @@ tsx@^4.19.3:
   optionalDependencies:
     fsevents "~2.3.3"
 
+tween-functions@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/tween-functions/-/tween-functions-1.2.0.tgz#1ae3a50e7c60bb3def774eac707acbca73bbc3ff"
+  integrity sha512-PZBtLYcCLtEcjL14Fzb1gSxPBeL7nWvGhO5ZFPGqziCcr8uvHp0NDmdjBchp6KHL+tExcg0m3NISmKxhU394dA==
+
 [email protected]:
   version "0.3.4"
   resolved "https://registry.yarnpkg.com/twoslash-protocol/-/twoslash-protocol-0.3.4.tgz#276ccd73dbbc99e19d8df7214b28c01a04d2294a"