Snowflake

App.tsx

@@ -32,6 +32,7 @@ import useStreamingDeviceProfile from './src/stores/device-profile'
 import { useNetworkStatus } from './src/stores/network'
 import CarPlayNavigation from './src/components/CarPlay/Navigation'
 import { CarPlay } from 'react-native-carplay'
+import Snowflake from './src/components/SnowFlake/snowflake'
 
 LogBox.ignoreAllLogs()
 
@@ -126,6 +127,7 @@ export default function App(): React.JSX.Element {
 	return (
 		<React.StrictMode>
 			<SafeAreaProvider>
+				<Snowflake />
 				<OTAUpdateScreen />
 				<ErrorBoundary reloader={reloader} onRetry={handleRetry}>
 					<PersistQueryClientProvider

src/components/Settings/components/preferences-tab.tsx

@@ -4,6 +4,7 @@ import SettingsListGroup from './settings-list-group'
 import {
 	ThemeSetting,
 	useHideRunTimesSetting,
+	useHideSnowflakesSetting,
 	useReducedHapticsSetting,
 	useSendMetricsSetting,
 	useThemeSetting,
@@ -131,6 +132,7 @@ export default function PreferencesTab(): React.JSX.Element {
 	const [reducedHaptics, setReducedHaptics] = useReducedHapticsSetting()
 	const [themeSetting, setThemeSetting] = useThemeSetting()
 	const [hideRunTimes, setHideRunTimes] = useHideRunTimesSetting()
+	const [hideSnowflakes, setHideSnowflakes] = useHideSnowflakesSetting()
 
 	const left = useSwipeSettingsStore((s) => s.left)
 	const right = useSwipeSettingsStore((s) => s.right)
@@ -160,6 +162,20 @@ export default function PreferencesTab(): React.JSX.Element {
 						</YStack>
 					),
 				},
+				{
+					title: 'Christmas Mode',
+					iconName: hideSnowflakes ? 'weather-snowy-rainy' : 'weather-snowy',
+					iconColor: hideSnowflakes ? '$success' : '$borderColor',
+					subTitle: 'Enable Christmas mode',
+					children: (
+						<SwitchWithLabel
+							checked={hideSnowflakes}
+							onCheckedChange={setHideSnowflakes}
+							size={'$2'}
+							label={hideSnowflakes ? 'Hidden' : 'Visible'}
+						/>
+					),
+				},
 				{
 					title: 'Track Swipe Actions',
 					subTitle: 'Choose actions for left/right swipes',

src/components/SnowFlake/index.tsx

@@ -0,0 +1,69 @@
+import { useMemo } from 'react'
+import { Animated, StyleSheet, useWindowDimensions } from 'react-native'
+import Snowflake from './snowflake'
+import LinearGradient from 'react-native-linear-gradient'
+
+const SNOWFLAKE_COUNT = 50
+
+const SnowFlakeBackground = () => {
+	const { width, height } = useWindowDimensions()
+
+	const snowflakes = Array.from({ length: SNOWFLAKE_COUNT }, (_, index) => ({
+		id: index,
+		x: Math.random() * 100,
+		delay: Math.random() * 5000,
+		duration: 8000 + Math.random() * 7000,
+		opacity: 0.3 + Math.random() * 0.7,
+		size: 12 + Math.random() * 16,
+		fullScreen: index < 10, // Only first 10 snowflakes go full screen
+	}))
+
+	const colors = [
+		'rgba(230,240,255,0.1)',
+		'rgba(220,235,255,0.08)',
+		'rgba(210,230,255,0.06)',
+		'rgba(200,225,255,0.04)',
+	]
+
+	return (
+		<Animated.View style={[styles.snowflakeContainer, { width, height }]} pointerEvents='none'>
+			<LinearGradient
+				colors={colors}
+				style={styles.gradient}
+				start={{ x: 0, y: 0 }}
+				end={{ x: 0, y: 1 }}
+			/>
+			{snowflakes.map((snowflake) => (
+				<Snowflake
+					key={snowflake.id}
+					delay={snowflake.delay}
+					duration={snowflake.duration}
+					opacity={snowflake.opacity}
+					x={snowflake.x}
+					size={snowflake.size}
+					fullScreen={snowflake.fullScreen}
+					screenHeight={height}
+				/>
+			))}
+		</Animated.View>
+	)
+}
+
+const styles = StyleSheet.create({
+	snowflakeContainer: {
+		position: 'absolute',
+		top: 0,
+		left: 0,
+		zIndex: 999,
+		overflow: 'hidden',
+	},
+	gradient: {
+		position: 'absolute',
+		top: 0,
+		left: 0,
+		right: 0,
+		bottom: 0,
+	},
+})
+
+export default SnowFlakeBackground

src/components/SnowFlake/snowflake.tsx

@@ -0,0 +1,122 @@
+import { useEffect } from 'react'
+import { View, TextInputContentSizeChangeEvent, StyleSheet } from 'react-native'
+import Animated, {
+	useAnimatedStyle,
+	useSharedValue,
+	withDelay,
+	Easing,
+	withRepeat,
+	withTiming,
+	interpolate,
+} from 'react-native-reanimated'
+
+interface SnowflakeDefaultProps {
+	delay: number
+	duration: number
+	opacity: number
+	x: number
+	size: number
+	fullScreen?: boolean
+	screenHeight?: number
+}
+
+const Snowflake = ({
+	delay,
+	duration,
+	opacity,
+	x,
+	size,
+	fullScreen = false,
+	screenHeight = 800,
+}: SnowflakeDefaultProps) => {
+	const translateX = useSharedValue(-20)
+	const translateY = useSharedValue(fullScreen ? -50 : 0)
+	const rotate = useSharedValue(0)
+
+	const endY = fullScreen ? screenHeight + 50 : 600
+
+	useEffect(() => {
+		translateY.value = withDelay(
+			delay,
+			withRepeat(withTiming(endY, { duration, easing: Easing.linear }), -1, false),
+		)
+		translateX.value = withDelay(
+			delay,
+			withRepeat(
+				withTiming(20, { duration: duration / 2, easing: Easing.inOut(Easing.sin) }),
+				-1,
+				true,
+			),
+		)
+		rotate.value = withDelay(
+			delay,
+			withRepeat(
+				withTiming(360, { duration: duration * 1.5, easing: Easing.linear }),
+				-1,
+				false,
+			),
+		)
+	}, [delay, duration, endY])
+
+	const animatedStyle = useAnimatedStyle(() => {
+		const opacityRange = fullScreen
+			? [-50, 0, screenHeight - 100, screenHeight + 50]
+			: [-20, 0, 90, 100]
+
+		if (fullScreen) {
+			return {
+				transform: [
+					{ translateY: translateY.value },
+					{ translateX: interpolate(translateX.value, [0, 20], [-10, -10]) },
+					{ rotate: `${rotate.value}deg` },
+				],
+				opacity: interpolate(translateY.value, opacityRange, [0, opacity, opacity, 0]),
+			}
+		}
+
+		return {
+			transform: [
+				{ translateY: `${translateY.value}%` },
+				{ translateX: interpolate(translateX.value, [0, 20], [-10, -10]) },
+				{ rotate: `${rotate.value}deg` },
+			],
+			opacity: interpolate(translateY.value, opacityRange, [0, opacity, opacity, 0]),
+		}
+	})
+
+	return (
+		<Animated.View
+			style={[
+				styles.snowflake,
+				{
+					width: size,
+					height: size,
+					left: `${x}%`,
+					alignItems: 'center',
+					justifyContent: 'center',
+				},
+				animatedStyle,
+			]}
+		>
+			<Animated.Text style={[styles.snowflakeText, { fontSize: size * 0.8 }]}>
+				❄️
+			</Animated.Text>
+		</Animated.View>
+	)
+}
+
+const styles = StyleSheet.create({
+	snowflake: {
+		position: 'absolute',
+		top: 0,
+		zIndex: 1,
+	},
+	snowflakeText: {
+		color: 'white',
+		textShadowColor: 'rgba(255,255,255,0.8)',
+		textShadowRadius: 4,
+		shadowOffset: { width: 0, height: 0 },
+	},
+})
+
+export default Snowflake