diff --git a/src/view/com/home/HomeHeaderLayout.web.tsx b/src/view/com/home/HomeHeaderLayout.web.tsx
index 38ccd8bec3..9bfa82cd22 100644
--- a/src/view/com/home/HomeHeaderLayout.web.tsx
+++ b/src/view/com/home/HomeHeaderLayout.web.tsx
@@ -1,6 +1,15 @@
import React from 'react'
import {StyleSheet, View} from 'react-native'
-import Animated from 'react-native-reanimated'
+import Animated, {
+ useAnimatedStyle,
+ useReducedMotion,
+ useSharedValue,
+ withDelay,
+ withRepeat,
+ withSequence,
+ withSpring,
+ withTiming,
+} from 'react-native-reanimated'
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
@@ -40,6 +49,43 @@ function HomeHeaderLayoutDesktopAndTablet({
const {hasSession} = useSession()
const {_} = useLingui()
+ // TEMPORARY - REMOVE AFTER MILLY
+ // This will just cause the icon to shake a bit when the user first opens the app, drawing attention to the celebration
+ // 🎉
+ const rotate = useSharedValue(0)
+ const reducedMotion = useReducedMotion()
+
+ // Run this a single time on app mount.
+ React.useEffect(() => {
+ if (reducedMotion) return
+
+ // Waits 1500ms, then rotates 10 degrees with a spring animation. Repeats once.
+ rotate.value = withDelay(
+ 1000,
+ withRepeat(
+ withSequence(
+ withTiming(10, {duration: 100}),
+ withSpring(0, {
+ mass: 1,
+ damping: 1,
+ stiffness: 200,
+ overshootClamping: false,
+ }),
+ ),
+ 2,
+ false,
+ ),
+ )
+ }, [rotate, reducedMotion])
+
+ const animatedStyle = useAnimatedStyle(() => ({
+ transform: [
+ {
+ rotateZ: `${rotate.value}deg`,
+ },
+ ],
+ }))
+
return (
<>
{hasSession && (
@@ -56,7 +102,7 @@ function HomeHeaderLayoutDesktopAndTablet({
t.atoms.border_contrast_low,
styles.bar,
]}>
-
{ctx => (
@@ -77,7 +124,7 @@ function HomeHeaderLayoutDesktopAndTablet({
)}
{/* */}
-
+