Animated Text

import { StyleSheet, ViewStyle } from "react-native";import React, { memo } from "react";import Animated, {  withTiming,  withDelay,  withSpring,  LinearTransition,  Easing,  useAnimatedProps,  useSharedValue,  useAnimatedStyle,} from "react-native-reanimated";import { BlurView, type BlurViewProps } from "expo-blur";import type {  StaggeredTextProps,  AnimationConfig,  CharacterAnimationParams,  CharacterProps,} from "./types";import {  DEFAULT_ANIMATION_CONFIG,  DEFAULT_ENTER_FROM,  DEFAULT_ENTER_TO,  DEFAULT_EXIT_FROM,  DEFAULT_EXIT_TO,} from "./conf";const AnimatedBlurView =  Animated.createAnimatedComponent<BlurViewProps>(BlurView);const Character: React.FC<CharacterProps> = memo<CharacterProps>(  ({    char,    style,    index,    animationConfig,    enterFrom,    enterTo,    exitFrom,    exitTo,  }: CharacterProps): React.ReactNode &    React.JSX.Element &    React.ReactElement => {    const enterDelay = index * animationConfig.characterDelay;    const exitDelay = index * (animationConfig.characterDelay * 0.5);    const maxBlur = animationConfig.maxBlurIntensity ?? 12;    const blurIntensity = useSharedValue<number>(maxBlur);    const enteringAnimation = () => {      "worklet";      const springConfig = animationConfig.spring;      const timingConfig = {        duration: animationConfig.characterEnterDuration,        easing: Easing.out(Easing.ease),      };      blurIntensity.value = maxBlur;      blurIntensity.value = withDelay(        enterDelay,        withTiming(0, {          duration: animationConfig.characterEnterDuration * 0.8,          easing: Easing.out(Easing.ease),        }),      );      return {        initialValues: {          opacity: enterFrom.opacity,          transform: [            { translateY: enterFrom.translateY },            { scale: enterFrom.scale },            { rotate: `${enterFrom.rotate}deg` },          ],        },        animations: {          opacity: withDelay(            enterDelay,            withTiming(enterTo.opacity, timingConfig),          ),          transform: [            {              translateY: withDelay(                enterDelay,                withSpring(enterTo.translateY, springConfig),              ),            },            {              scale: withDelay(                enterDelay,                withSpring(enterTo.scale, springConfig),              ),            },            {              rotate: withDelay(                enterDelay,                withSpring(`${enterTo.rotate}deg`, springConfig),              ),            },          ],        },      };    };    const exitingAnimation = () => {      "worklet";      const timingConfig = {        duration: animationConfig.characterExitDuration,        easing: Easing.in(Easing.ease),      };      blurIntensity.value = withDelay(        exitDelay,        withTiming(maxBlur, {          duration: animationConfig.characterExitDuration * 0.6,          easing: Easing.in(Easing.ease),        }),      );      return {        initialValues: {          opacity: exitFrom.opacity,          transform: [            { translateY: exitFrom.translateY },            { scale: exitFrom.scale },            { rotate: `${exitFrom.rotate}deg` },          ],        },        animations: {          opacity: withDelay(            exitDelay,            withTiming(exitTo.opacity, timingConfig),          ),          transform: [            {              translateY: withDelay(                exitDelay,                withTiming(exitTo.translateY, timingConfig),              ),            },            {              scale: withDelay(                exitDelay,                withTiming(exitTo.scale, timingConfig),              ),            },            {              rotate: withDelay(                exitDelay,                withTiming(`${exitTo.rotate}deg`, timingConfig),              ),            },          ],        },      };    };    const animatedBlurProps = useAnimatedProps<      Pick<BlurViewProps, "intensity">    >(() => ({      intensity: blurIntensity.value,    }));    const animatedBlurStyle = useAnimatedStyle<ViewStyle>(() => ({      opacity: blurIntensity.value > 0.5 ? 1 : 0,    }));    return (      <Animated.View        entering={enteringAnimation}        exiting={exitingAnimation}        layout={LinearTransition.duration(          animationConfig.layoutTransitionDuration,        ).easing(Easing.out(Easing.ease))}        style={styles.characterWrapper}      >        <Animated.Text style={style}>{char}</Animated.Text>        <AnimatedBlurView          style={[StyleSheet.absoluteFillObject, animatedBlurStyle]}          animatedProps={animatedBlurProps}          tint="prominent"          experimentalBlurMethod={"dimezisBlurView"}        />      </Animated.View>    );  },);export const StaggeredText: React.FC<StaggeredTextProps> =  memo<StaggeredTextProps>(    ({      text,      style,      animationConfig,      enterFrom,      enterTo,      exitFrom,      exitTo,    }: StaggeredTextProps): React.ReactNode &      React.JSX.Element &      React.ReactElement => {      const characters = Array.from<string>(text);      const mergedAnimationConfig: AnimationConfig = {        ...DEFAULT_ANIMATION_CONFIG,        ...animationConfig,        spring: {          ...DEFAULT_ANIMATION_CONFIG.spring,          ...animationConfig?.spring,        },      };      const mergedEnterFrom: CharacterAnimationParams = {        ...DEFAULT_ENTER_FROM,        ...enterFrom,      };      const mergedEnterTo: CharacterAnimationParams = {        ...DEFAULT_ENTER_TO,        ...enterTo,      };      const mergedExitFrom: CharacterAnimationParams = {        ...DEFAULT_EXIT_FROM,        ...exitFrom,      };      const mergedExitTo: CharacterAnimationParams = {        ...DEFAULT_EXIT_TO,        ...exitTo,      };      return (        <Animated.View          style={styles.textWrapper}          layout={LinearTransition.duration(            mergedAnimationConfig.layoutTransitionDuration,          ).easing(Easing.out(Easing.ease))}        >          {characters.map<React.JSX.Element | React.ReactNode>(            (char, index) => (              <Character                key={`${char}-${index}`}                char={char}                style={style}                index={index}                totalChars={characters.length}                animationConfig={mergedAnimationConfig}                enterFrom={mergedEnterFrom}                enterTo={mergedEnterTo}                exitFrom={mergedExitFrom}                exitTo={mergedExitTo}              />            ),          )}        </Animated.View>      );    },  );export default memo<StaggeredTextProps>(StaggeredText);const styles = StyleSheet.create({  textWrapper: {    flexDirection: "row",    flexWrap: "wrap",  },  characterWrapper: {    position: "relative",    overflow: "hidden",  },});