closer...

src/components/Layout/Header/index.tsx

@@ -182,7 +182,10 @@ export function TitleText({
   )
 }
 
-export function SubtitleText({children}: {children: React.ReactNode}) {
+export function SubtitleText({
+  children,
+  style,
+}: {children: React.ReactNode} & TextStyleProp) {
   const t = useTheme()
   const align = useContext(AlignmentContext)
   return (
@@ -192,6 +195,7 @@ export function SubtitleText({children}: {children: React.ReactNode}) {
         a.leading_snug,
         isIOS && align === 'platform' && a.text_center,
         t.atoms.text_contrast_medium,
+        style,
       ]}
       numberOfLines={2}>
       {children}

src/screens/Profile/Header/GrowableBanner.tsx

@@ -74,34 +74,35 @@ function GrowableBannerInner({
   const isFetching = useIsProfileFetching()
   const animateSpinner = useShouldAnimateSpinner({isFetching, scrollY})
 
-  const animatedStyle = useAnimatedStyle(() => ({
-    transform: [
-      {
-        scale: interpolate(
-          scrollY.get(),
-          [-150, 0],
-          [2, 1],
-          Extrapolation.CLAMP,
-        ),
-      },
-      {
-        translateY: clamp(scrollY.get() - minimumHeaderHeight, 0, headerHeight),
-      },
-    ],
-  }))
+  const animatedStyle = useAnimatedStyle(() => {
+    const scrollYValue = scrollY.get()
+    return {
+      zIndex: scrollYValue > 100 ? 100 : 0,
+      transform: [
+        {
+          scale: interpolate(
+            scrollYValue,
+            [-150, 0],
+            [2, 1],
+            Extrapolation.CLAMP,
+          ),
+        },
+        {
+          translateY: clamp(
+            scrollYValue - minimumHeaderHeight + topInset,
+            0,
+            headerHeight - minimumHeaderHeight,
+          ),
+        },
+      ],
+    }
+  })
 
   const animatedBlurViewProps = useAnimatedProps(() => {
-    console.log(
-      'scrollY',
-      scrollY.get(),
-      'headerHeight',
-      headerHeight,
-      topInset,
-    )
     return {
       intensity: interpolate(
         scrollY.get(),
-        [-300, -65, -15, minimumHeaderHeight - 10, minimumHeaderHeight],
+        [-300, -65, -15, minimumHeaderHeight - 10, minimumHeaderHeight + 30],
         [50, 40, 0, 0, 50],
         {extrapolateLeft: Extrapolation.CLAMP},
       ),

src/screens/Profile/Header/index.tsx

@@ -97,6 +97,7 @@ const MinimalHeader = React.memo(function MinimalHeader({
   profile: AppBskyActorDefs.ProfileViewDetailed
   hideBackButton?: boolean
 }) {
+  const t = useTheme()
   const insets = useSafeAreaInsets()
   const ctx = usePagerHeaderContext()
   const [visible, setVisible] = useState(false)
@@ -163,10 +164,16 @@ const MinimalHeader = React.memo(function MinimalHeader({
       <Header.Outer>
         {!hideBackButton && <Header.BackButton />}
         <Header.Content align="left">
-          <Header.TitleText>
+          <Header.TitleText style={{color: t.palette.white}}>
             {sanitizeDisplayName(profile.displayName || profile.handle)}
           </Header.TitleText>
-          <Header.SubtitleText>
+          <Header.SubtitleText
+            style={{
+              color:
+                t.scheme === 'light'
+                  ? t.palette.contrast_700
+                  : t.palette.contrast_300,
+            }}>
             {sanitizeHandle(profile.handle, '@')}
           </Header.SubtitleText>
         </Header.Content>