Better screen transitions for auth flow (#7803)

src/components/ScreenTransition.tsx

@@ -1,5 +1,6 @@
 import {type StyleProp, type ViewStyle} from 'react-native'
 import Animated, {
+  Easing,
   FadeIn,
   FadeOut,
   SlideInLeft,
@@ -13,17 +14,25 @@ export function ScreenTransition({
   direction,
   style,
   children,
+  enabledWeb,
 }: {
   direction: 'Backward' | 'Forward'
   style?: StyleProp<ViewStyle>
   children: React.ReactNode
+  enabledWeb?: boolean
 }) {
-  const entering = direction === 'Forward' ? SlideInRight : SlideInLeft
+  const entering =
+    direction === 'Forward'
+      ? SlideInRight.easing(Easing.out(Easing.exp))
+      : SlideInLeft.easing(Easing.out(Easing.exp))
+  const webEntering = enabledWeb ? FadeIn.duration(90) : undefined
+  const exiting = FadeOut.duration(90) // Totally vibes based
+  const webExiting = enabledWeb ? FadeOut.duration(90) : undefined
 
   return (
     <Animated.View
-      entering={isWeb ? FadeIn.duration(90) : entering}
+      entering={isWeb ? webEntering : entering}
-      exiting={FadeOut.duration(90)} // Totally vibes based
+      exiting={isWeb ? webExiting : exiting}
       style={style}>
       {children}
     </Animated.View>

src/screens/Login/ScreenTransition.tsx

@@ -1,17 +0,0 @@
-import {type StyleProp, type ViewStyle} from 'react-native'
-import Animated, {FadeInRight, FadeOutLeft} from 'react-native-reanimated'
-import type React from 'react'
-
-export function ScreenTransition({
-  style,
-  children,
-}: {
-  style?: StyleProp<ViewStyle>
-  children: React.ReactNode
-}) {
-  return (
-    <Animated.View style={style} entering={FadeInRight} exiting={FadeOutLeft}>
-      {children}
-    </Animated.View>
-  )
-}

src/screens/Login/ScreenTransition.web.tsx

@@ -1 +0,0 @@
-export {Fragment as ScreenTransition} from 'react'

src/screens/Login/index.tsx

@@ -1,6 +1,6 @@
-import React, {useRef} from 'react'
+import {useEffect, useRef, useState} from 'react'
 import {KeyboardAvoidingView} from 'react-native'
-import {LayoutAnimationConfig} from 'react-native-reanimated'
+import Animated, {FadeIn, LayoutAnimationConfig} from 'react-native-reanimated'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
@@ -15,9 +15,9 @@ import {ForgotPasswordForm} from '#/screens/Login/ForgotPasswordForm'
 import {LoginForm} from '#/screens/Login/LoginForm'
 import {PasswordUpdatedForm} from '#/screens/Login/PasswordUpdatedForm'
 import {SetNewPasswordForm} from '#/screens/Login/SetNewPasswordForm'
-import {atoms as a} from '#/alf'
+import {atoms as a, native} from '#/alf'
+import {ScreenTransition} from '#/components/ScreenTransition'
 import {ChooseAccountForm} from './ChooseAccountForm'
-import {ScreenTransition} from './ScreenTransition'
 
 enum Forms {
   Login,
@@ -27,6 +27,14 @@ enum Forms {
   PasswordUpdated,
 }
 
+const OrderedForms = [
+  Forms.ChooseAccount,
+  Forms.Login,
+  Forms.ForgotPassword,
+  Forms.SetNewPassword,
+  Forms.PasswordUpdated,
+] as const
+
 export const Login = ({onPressBack}: {onPressBack: () => void}) => {
   const {_} = useLingui()
   const failedAttemptCountRef = useRef(0)
@@ -38,20 +46,23 @@ export const Login = ({onPressBack}: {onPressBack: () => void}) => {
     acc => acc.did === requestedAccountSwitchTo,
   )
 
-  const [error, setError] = React.useState<string>('')
+  const [error, setError] = useState('')
-  const [serviceUrl, setServiceUrl] = React.useState<string>(
+  const [serviceUrl, setServiceUrl] = useState(
     requestedAccount?.service || DEFAULT_SERVICE,
   )
-  const [initialHandle, setInitialHandle] = React.useState<string>(
+  const [initialHandle, setInitialHandle] = useState(
     requestedAccount?.handle || '',
   )
-  const [currentForm, setCurrentForm] = React.useState<Forms>(
+  const [currentForm, setCurrentForm] = useState<Forms>(
     requestedAccount
       ? Forms.Login
       : accounts.length
         ? Forms.ChooseAccount
         : Forms.Login,
   )
+  const [screenTransitionDirection, setScreenTransitionDirection] = useState<
+    'Forward' | 'Backward'
+  >('Forward')
 
   const {
     data: serviceDescription,
@@ -64,15 +75,18 @@ export const Login = ({onPressBack}: {onPressBack: () => void}) => {
       setServiceUrl(account.service)
     }
     setInitialHandle(account?.handle || '')
-    setCurrentForm(Forms.Login)
+    gotoForm(Forms.Login)
   }
 
   const gotoForm = (form: Forms) => {
     setError('')
+    const index = OrderedForms.indexOf(currentForm)
+    const nextIndex = OrderedForms.indexOf(form)
+    setScreenTransitionDirection(index < nextIndex ? 'Forward' : 'Backward')
     setCurrentForm(form)
   }
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (serviceError) {
       setError(
         _(
@@ -89,12 +103,13 @@ export const Login = ({onPressBack}: {onPressBack: () => void}) => {
   }, [serviceError, serviceUrl, _])
 
   const onPressForgotPassword = () => {
-    setCurrentForm(Forms.ForgotPassword)
+    gotoForm(Forms.ForgotPassword)
     logEvent('signin:forgotPasswordPressed', {})
   }
 
   const handlePressBack = () => {
     onPressBack()
+    setScreenTransitionDirection('Backward')
     logEvent('signin:backPressed', {
       failedAttemptsCount: failedAttemptCountRef.current,
     })
@@ -106,7 +121,6 @@ export const Login = ({onPressBack}: {onPressBack: () => void}) => {
       timeTakenSeconds: Math.round((Date.now() - startTimeRef.current) / 1000),
       failedAttemptsCount: failedAttemptCountRef.current,
     })
-    setCurrentForm(Forms.Login)
   }
 
   const onAttemptFailed = () => {
@@ -187,16 +201,22 @@ export const Login = ({onPressBack}: {onPressBack: () => void}) => {
   }
 
   return (
-    <KeyboardAvoidingView testID="signIn" behavior="padding" style={a.flex_1}>
+    <Animated.View style={a.flex_1} entering={native(FadeIn.duration(90))}>
-      <LoggedOutLayout
+      <KeyboardAvoidingView testID="signIn" behavior="padding" style={a.flex_1}>
-        leadin=""
+        <LoggedOutLayout
-        title={title}
+          leadin=""
-        description={description}
+          title={title}
-        scrollable>
+          description={description}
-        <LayoutAnimationConfig skipEntering skipExiting>
+          scrollable>
-          <ScreenTransition key={currentForm}>{content}</ScreenTransition>
+          <LayoutAnimationConfig skipEntering>
-        </LayoutAnimationConfig>
+            <ScreenTransition
-      </LoggedOutLayout>
+              key={currentForm}
-    </KeyboardAvoidingView>
+              direction={screenTransitionDirection}>
+              {content}
+            </ScreenTransition>
+          </LayoutAnimationConfig>
+        </LoggedOutLayout>
+      </KeyboardAvoidingView>
+    </Animated.View>
   )
 }

src/screens/Signup/StepCaptcha/index.tsx

@@ -8,7 +8,6 @@ import {nanoid} from 'nanoid/non-secure'
 import {createFullHandle} from '#/lib/strings/handles'
 import {logger} from '#/logger'
 import {isAndroid, isIOS, isNative, isWeb} from '#/platform/detection'
-import {ScreenTransition} from '#/screens/Login/ScreenTransition'
 import {useSignupContext} from '#/screens/Signup/state'
 import {CaptchaWebView} from '#/screens/Signup/StepCaptcha/CaptchaWebView'
 import {atoms as a, useTheme} from '#/alf'
@@ -143,7 +142,7 @@ function StepCaptchaInner({
   }, [dispatch, state.handle])
 
   return (
-    <ScreenTransition>
+    <>
       <View style={[a.gap_lg, a.pt_lg]}>
         <View
           style={[
@@ -171,7 +170,7 @@ function StepCaptchaInner({
         isLoading={state.isLoading}
         onBackPress={onBackPress}
       />
-    </ScreenTransition>
+    </>
   )
 }
 

src/screens/Signup/StepHandle/index.tsx

@@ -19,7 +19,6 @@ import {
   checkHandleAvailability,
   useHandleAvailabilityQuery,
 } from '#/state/queries/handle-availability'
-import {ScreenTransition} from '#/screens/Login/ScreenTransition'
 import {useSignupContext} from '#/screens/Signup/state'
 import {atoms as a, native, useTheme} from '#/alf'
 import * as TextField from '#/components/forms/TextField'
@@ -141,7 +140,7 @@ export function StepHandle() {
     !validCheck.totalLength
 
   return (
-    <ScreenTransition>
+    <>
       <View style={[a.gap_sm, a.pt_lg, a.z_10]}>
         <View>
           <TextField.Root isInvalid={textFieldInvalid}>
@@ -252,7 +251,7 @@ export function StepHandle() {
           onNextPress={onNextPress}
         />
       </Animated.View>
-    </ScreenTransition>
+    </>
   )
 }
 

src/screens/Signup/StepInfo/index.tsx

@@ -7,7 +7,6 @@ import type tldts from 'tldts'
 
 import {isEmailMaybeInvalid} from '#/lib/strings/email'
 import {logger} from '#/logger'
-import {ScreenTransition} from '#/screens/Login/ScreenTransition'
 import {is13, is18, useSignupContext} from '#/screens/Signup/state'
 import {Policies} from '#/screens/Signup/StepInfo/Policies'
 import {atoms as a, native} from '#/alf'
@@ -147,7 +146,7 @@ export function StepInfo({
   }
 
   return (
-    <ScreenTransition>
+    <>
       <View style={[a.gap_md, a.pt_lg]}>
         <FormError error={state.error} />
         <HostingProvider
@@ -292,6 +291,6 @@ export function StepInfo({
         onRetryPress={refetchServer}
         overrideNextText={hasWarnedEmail ? _(msg`It's correct`) : undefined}
       />
-    </ScreenTransition>
+    </>
   )
 }

src/screens/Signup/index.tsx

@@ -23,11 +23,12 @@ import {
 import {StepCaptcha} from '#/screens/Signup/StepCaptcha'
 import {StepHandle} from '#/screens/Signup/StepHandle'
 import {StepInfo} from '#/screens/Signup/StepInfo'
-import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {atoms as a, native, useBreakpoints, useTheme} from '#/alf'
 import {AppLanguageDropdown} from '#/components/AppLanguageDropdown'
 import {Divider} from '#/components/Divider'
 import {LinearGradientBackground} from '#/components/LinearGradientBackground'
 import {InlineLinkText} from '#/components/Link'
+import {ScreenTransition} from '#/components/ScreenTransition'
 import {Text} from '#/components/Typography'
 import {GCP_PROJECT_ID} from '#/env'
 import * as bsky from '#/types/bsky'
@@ -116,109 +117,120 @@ export function Signup({onPressBack}: {onPressBack: () => void}) {
   }, [])
 
   return (
-    <SignupContext.Provider value={{state, dispatch}}>
+    <Animated.View exiting={native(FadeIn.duration(90))} style={a.flex_1}>
-      <LoggedOutLayout
+      <SignupContext.Provider value={{state, dispatch}}>
-        leadin=""
+        <LoggedOutLayout
-        title={_(msg`Create Account`)}
+          leadin=""
-        description={_(msg`We're so excited to have you join us!`)}
+          title={_(msg`Create Account`)}
-        scrollable>
+          description={_(msg`We're so excited to have you join us!`)}
-        <View testID="createAccount" style={a.flex_1}>
+          scrollable>
-          {showStarterPackCard &&
+          <View testID="createAccount" style={a.flex_1}>
-          bsky.dangerousIsType<AppBskyGraphStarterpack.Record>(
+            {showStarterPackCard &&
-            starterPack.record,
+            bsky.dangerousIsType<AppBskyGraphStarterpack.Record>(
-            AppBskyGraphStarterpack.isRecord,
+              starterPack.record,
-          ) ? (
+              AppBskyGraphStarterpack.isRecord,
-            <Animated.View entering={!isFetchedAtMount ? FadeIn : undefined}>
+            ) ? (
-              <LinearGradientBackground
+              <Animated.View entering={!isFetchedAtMount ? FadeIn : undefined}>
-                style={[a.mx_lg, a.p_lg, a.gap_sm, a.rounded_sm]}>
+                <LinearGradientBackground
-                <Text style={[a.font_bold, a.text_xl, {color: 'white'}]}>
+                  style={[a.mx_lg, a.p_lg, a.gap_sm, a.rounded_sm]}>
-                  {starterPack.record.name}
+                  <Text style={[a.font_bold, a.text_xl, {color: 'white'}]}>
-                </Text>
+                    {starterPack.record.name}
-                <Text style={[{color: 'white'}]}>
+                  </Text>
-                  {starterPack.feeds?.length ? (
+                  <Text style={[{color: 'white'}]}>
-                    <Trans>
+                    {starterPack.feeds?.length ? (
-                      You'll follow the suggested users and feeds once you
+                      <Trans>
-                      finish creating your account!
+                        You'll follow the suggested users and feeds once you
-                    </Trans>
+                        finish creating your account!
+                      </Trans>
+                    ) : (
+                      <Trans>
+                        You'll follow the suggested users once you finish
+                        creating your account!
+                      </Trans>
+                    )}
+                  </Text>
+                </LinearGradientBackground>
+              </Animated.View>
+            ) : null}
+            <LayoutAnimationConfig skipEntering>
+              <ScreenTransition
+                key={state.activeStep}
+                direction={state.screenTransitionDirection}>
+                <View
+                  style={[
+                    a.flex_1,
+                    a.px_xl,
+                    a.pt_2xl,
+                    !gtMobile && {paddingBottom: 100},
+                  ]}>
+                  <View style={[a.gap_sm, a.pb_3xl]}>
+                    <Text style={[a.font_bold, t.atoms.text_contrast_medium]}>
+                      <Trans>
+                        Step {state.activeStep + 1} of{' '}
+                        {state.serviceDescription &&
+                        !state.serviceDescription.phoneVerificationRequired
+                          ? '2'
+                          : '3'}
+                      </Trans>
+                    </Text>
+                    <Text style={[a.text_3xl, a.font_bold]}>
+                      {state.activeStep === SignupStep.INFO ? (
+                        <Trans>Your account</Trans>
+                      ) : state.activeStep === SignupStep.HANDLE ? (
+                        <Trans>Choose your username</Trans>
+                      ) : (
+                        <Trans>Complete the challenge</Trans>
+                      )}
+                    </Text>
+                  </View>
+
+                  {state.activeStep === SignupStep.INFO ? (
+                    <StepInfo
+                      onPressBack={onPressBack}
+                      isLoadingStarterPack={
+                        isFetchingStarterPack && !isErrorStarterPack
+                      }
+                      isServerError={isError}
+                      refetchServer={refetch}
+                    />
+                  ) : state.activeStep === SignupStep.HANDLE ? (
+                    <StepHandle />
                   ) : (
-                    <Trans>
+                    <StepCaptcha />
-                      You'll follow the suggested users once you finish creating
-                      your account!
-                    </Trans>
                   )}
-                </Text>
-              </LinearGradientBackground>
-            </Animated.View>
-          ) : null}
-          <View
-            style={[
-              a.flex_1,
-              a.px_xl,
-              a.pt_2xl,
-              !gtMobile && {paddingBottom: 100},
-            ]}>
-            <View style={[a.gap_sm, a.pb_sm]}>
-              <Text
-                style={[a.text_sm, a.font_bold, t.atoms.text_contrast_medium]}>
-                <Trans>
-                  Step {state.activeStep + 1} of{' '}
-                  {state.serviceDescription &&
-                  !state.serviceDescription.phoneVerificationRequired
-                    ? '2'
-                    : '3'}
-                </Trans>
-              </Text>
-              <Text style={[a.text_3xl, a.font_heavy]}>
-                {state.activeStep === SignupStep.INFO ? (
-                  <Trans>Your account</Trans>
-                ) : state.activeStep === SignupStep.HANDLE ? (
-                  <Trans>Choose your username</Trans>
-                ) : (
-                  <Trans>Complete the challenge</Trans>
-                )}
-              </Text>
-            </View>
 
-            <LayoutAnimationConfig skipEntering skipExiting>
+                  <Divider />
-              {state.activeStep === SignupStep.INFO ? (
+
-                <StepInfo
+                  <View
-                  onPressBack={onPressBack}
+                    style={[
-                  isLoadingStarterPack={
+                      a.w_full,
-                    isFetchingStarterPack && !isErrorStarterPack
+                      a.py_lg,
-                  }
+                      a.flex_row,
-                  isServerError={isError}
+                      a.gap_md,
-                  refetchServer={refetch}
+                      a.align_center,
-                />
+                    ]}>
-              ) : state.activeStep === SignupStep.HANDLE ? (
+                    <AppLanguageDropdown />
-                <StepHandle />
+                    <Text
-              ) : (
+                      style={[
-                <StepCaptcha />
+                        a.flex_1,
-              )}
+                        t.atoms.text_contrast_medium,
+                        !gtMobile && a.text_md,
+                      ]}>
+                      <Trans>Having trouble?</Trans>{' '}
+                      <InlineLinkText
+                        label={_(msg`Contact support`)}
+                        to={FEEDBACK_FORM_URL({email: state.email})}
+                        style={[!gtMobile && a.text_md]}>
+                        <Trans>Contact support</Trans>
+                      </InlineLinkText>
+                    </Text>
+                  </View>
+                </View>
+              </ScreenTransition>
             </LayoutAnimationConfig>
-
-            <Divider />
-
-            <View
-              style={[a.w_full, a.py_lg, a.flex_row, a.gap_md, a.align_center]}>
-              <AppLanguageDropdown />
-              <Text
-                style={[
-                  a.flex_1,
-                  t.atoms.text_contrast_medium,
-                  !gtMobile && a.text_md,
-                ]}>
-                <Trans>Having trouble?</Trans>{' '}
-                <InlineLinkText
-                  label={_(msg`Contact support`)}
-                  to={FEEDBACK_FORM_URL({email: state.email})}
-                  style={[!gtMobile && a.text_md]}>
-                  <Trans>Contact support</Trans>
-                </InlineLinkText>
-              </Text>
-            </View>
           </View>
-        </View>
+        </LoggedOutLayout>
-      </LoggedOutLayout>
+      </SignupContext.Provider>
-    </SignupContext.Provider>
+    </Animated.View>
   )
 }

src/screens/Signup/state.ts

@@ -41,6 +41,7 @@ type ErrorField =
 export type SignupState = {
   hasPrev: boolean
   activeStep: SignupStep
+  screenTransitionDirection: 'Forward' | 'Backward'
 
   serviceUrl: string
   serviceDescription?: ServiceDescription
@@ -84,6 +85,7 @@ export type SignupAction =
 export const initialState: SignupState = {
   hasPrev: false,
   activeStep: SignupStep.INFO,
+  screenTransitionDirection: 'Forward',
 
   serviceUrl: DEFAULT_SERVICE,
   serviceDescription: undefined,
@@ -126,7 +128,7 @@ export function reducer(s: SignupState, a: SignupAction): SignupState {
   switch (a.type) {
     case 'prev': {
       if (s.activeStep !== SignupStep.INFO) {
-        LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
+        next.screenTransitionDirection = 'Backward'
         next.activeStep--
         next.error = ''
         next.errorField = undefined
@@ -135,7 +137,7 @@ export function reducer(s: SignupState, a: SignupAction): SignupState {
     }
     case 'next': {
       if (s.activeStep !== SignupStep.CAPTCHA) {
-        LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
+        next.screenTransitionDirection = 'Forward'
         next.activeStep++
         next.error = ''
         next.errorField = undefined

src/screens/StarterPack/Wizard/StepDetails.tsx

@@ -8,7 +8,7 @@ import {useWizardState} from '#/screens/StarterPack/Wizard/State'
 import {atoms as a, useTheme} from '#/alf'
 import * as TextField from '#/components/forms/TextField'
 import {StarterPack} from '#/components/icons/StarterPack'
-import {ScreenTransition} from '#/components/StarterPack/Wizard/ScreenTransition'
+import {ScreenTransition} from '#/components/ScreenTransition'
 import {Text} from '#/components/Typography'
 
 export function StepDetails() {
@@ -23,7 +23,7 @@ export function StepDetails() {
   })
 
   return (
-    <ScreenTransition direction={state.transitionDirection}>
+    <ScreenTransition direction={state.transitionDirection} enabledWeb>
       <View style={[a.px_xl, a.gap_xl, a.mt_4xl]}>
         <View style={[a.gap_md, a.align_center, a.px_md, a.mb_md]}>
           <StarterPack width={90} gradient="sky" />

src/screens/StarterPack/Wizard/StepFeeds.tsx

@@ -17,7 +17,7 @@ import {atoms as a, useTheme} from '#/alf'
 import {SearchInput} from '#/components/forms/SearchInput'
 import {useThrottledValue} from '#/components/hooks/useThrottledValue'
 import {Loader} from '#/components/Loader'
-import {ScreenTransition} from '#/components/StarterPack/Wizard/ScreenTransition'
+import {ScreenTransition} from '#/components/ScreenTransition'
 import {WizardFeedCard} from '#/components/StarterPack/Wizard/WizardListCard'
 import {Text} from '#/components/Typography'
 
@@ -79,7 +79,10 @@ export function StepFeeds({moderationOpts}: {moderationOpts: ModerationOpts}) {
   }
 
   return (
-    <ScreenTransition style={[a.flex_1]} direction={state.transitionDirection}>
+    <ScreenTransition
+      style={[a.flex_1]}
+      direction={state.transitionDirection}
+      enabledWeb>
       <View style={[a.border_b, t.atoms.border_contrast_medium]}>
         <View style={[a.py_sm, a.px_md, {height: 60}]}>
           <SearchInput

src/screens/StarterPack/Wizard/StepProfiles.tsx

@@ -13,7 +13,7 @@ import {useWizardState} from '#/screens/StarterPack/Wizard/State'
 import {atoms as a, useTheme} from '#/alf'
 import {SearchInput} from '#/components/forms/SearchInput'
 import {Loader} from '#/components/Loader'
-import {ScreenTransition} from '#/components/StarterPack/Wizard/ScreenTransition'
+import {ScreenTransition} from '#/components/ScreenTransition'
 import {WizardProfileCard} from '#/components/StarterPack/Wizard/WizardListCard'
 import {Text} from '#/components/Typography'
 import type * as bsky from '#/types/bsky'
@@ -64,7 +64,10 @@ export function StepProfiles({
   }
 
   return (
-    <ScreenTransition style={[a.flex_1]} direction={state.transitionDirection}>
+    <ScreenTransition
+      style={[a.flex_1]}
+      direction={state.transitionDirection}
+      enabledWeb>
       <View style={[a.border_b, t.atoms.border_contrast_medium]}>
         <View style={[a.py_sm, a.px_md, {height: 60}]}>
           <SearchInput

src/view/com/auth/SplashScreen.tsx

@@ -1,16 +1,18 @@
 import {View} from 'react-native'
+import Animated, {FadeIn, FadeOut} from 'react-native-reanimated'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {useHaptics} from '#/lib/haptics'
 import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
+import {CenteredView} from '#/view/com/util/Views'
 import {Logo} from '#/view/icons/Logo'
 import {Logotype} from '#/view/icons/Logotype'
 import {atoms as a, useTheme} from '#/alf'
 import {AppLanguageDropdown} from '#/components/AppLanguageDropdown'
 import {Button, ButtonText} from '#/components/Button'
 import {Text} from '#/components/Typography'
-import {CenteredView} from '../util/Views'
 
 export const SplashScreen = ({
   onPressSignin,
@@ -22,68 +24,87 @@ export const SplashScreen = ({
   const t = useTheme()
   const {_} = useLingui()
 
+  const playHaptic = useHaptics()
   const insets = useSafeAreaInsets()
 
   return (
     <CenteredView style={[a.h_full, a.flex_1]}>
-      <ErrorBoundary>
+      <Animated.View
-        <View style={[{flex: 1}, a.justify_center, a.align_center]}>
+        entering={FadeIn.duration(90)}
-          <Logo width={92} fill="sky" />
+        exiting={FadeOut.duration(90)}
+        style={[a.flex_1]}>
+        <ErrorBoundary>
+          <View style={[a.flex_1, a.justify_center, a.align_center]}>
+            <Logo width={92} fill="sky" />
 
-          <View style={[a.pb_sm, a.pt_5xl]}>
+            <View style={[a.pb_sm, a.pt_5xl]}>
-            <Logotype width={161} fill={t.atoms.text.color} />
+              <Logotype width={161} fill={t.atoms.text.color} />
+            </View>
+
+            <Text
+              style={[
+                a.text_md,
+                a.font_bold,
+                t.atoms.text_contrast_medium,
+                a.text_center,
+              ]}>
+              <Trans>What's up?</Trans>
+            </Text>
           </View>
 
-          <Text style={[a.text_md, a.font_bold, t.atoms.text_contrast_medium]}>
+          <View
-            <Trans>What's up?</Trans>
+            testID="signinOrCreateAccount"
-          </Text>
+            style={[a.px_xl, a.gap_md, a.pb_2xl]}>
-        </View>
+            <Button
-        <View
+              testID="createAccountButton"
-          testID="signinOrCreateAccount"
+              onPress={() => {
-          style={[a.px_xl, a.gap_md, a.pb_2xl]}>
+                onPressCreateAccount()
-          <Button
+                playHaptic('Light')
-            testID="createAccountButton"
+              }}
-            onPress={onPressCreateAccount}
+              label={_(msg`Create new account`)}
-            label={_(msg`Create new account`)}
+              accessibilityHint={_(
-            accessibilityHint={_(
+                msg`Opens flow to create a new Bluesky account`,
-              msg`Opens flow to create a new Bluesky account`,
+              )}
-            )}
+              size="large"
-            size="large"
+              variant="solid"
-            variant="solid"
+              color="primary">
-            color="primary">
+              <ButtonText>
-            <ButtonText>
+                <Trans>Create account</Trans>
-              <Trans>Create account</Trans>
+              </ButtonText>
-            </ButtonText>
+            </Button>
-          </Button>
+            <Button
-          <Button
+              testID="signInButton"
-            testID="signInButton"
+              onPress={() => {
-            onPress={onPressSignin}
+                onPressSignin()
-            label={_(msg`Sign in`)}
+                playHaptic('Light')
-            accessibilityHint={_(
+              }}
-              msg`Opens flow to sign in to your existing Bluesky account`,
+              label={_(msg`Sign in`)}
-            )}
+              accessibilityHint={_(
-            size="large"
+                msg`Opens flow to sign in to your existing Bluesky account`,
-            variant="solid"
+              )}
-            color="secondary">
+              size="large"
-            <ButtonText>
+              variant="solid"
-              <Trans>Sign in</Trans>
+              color="secondary">
-            </ButtonText>
+              <ButtonText>
-          </Button>
+                <Trans>Sign in</Trans>
-        </View>
+              </ButtonText>
-        <View
+            </Button>
-          style={[
-            a.px_lg,
-            a.pt_md,
-            a.pb_2xl,
-            a.justify_center,
-            a.align_center,
-          ]}>
-          <View>
-            <AppLanguageDropdown />
           </View>
-        </View>
+          <View
-        <View style={{height: insets.bottom}} />
+            style={[
-      </ErrorBoundary>
+              a.px_lg,
+              a.pt_md,
+              a.pb_2xl,
+              a.justify_center,
+              a.align_center,
+            ]}>
+            <View>
+              <AppLanguageDropdown />
+            </View>
+          </View>
+          <View style={{height: insets.bottom}} />
+        </ErrorBoundary>
+      </Animated.View>
     </CenteredView>
   )
 }