@shaykec/app-agent 1.0.9 → 1.0.11

package/templates/react-native/TrackTemplate/src/animation/useAnimatedList.ts

@@ -1,5 +1,5 @@
-import { useRef, useEffect } from 'react';
-import { Animated } from 'react-native';
+import { useRef, useEffect, useCallback } from 'react';
+import { Animated, Platform, StyleSheet, ViewStyle } from 'react-native';
 import { useMotionPreferences } from './useMotionPreferences';
 
 /**
@@ -39,6 +39,7 @@ export function useStaggeredAppear(index: number) {
 
   return {
     opacity,
+    translateY,
     transform: [{ translateY }],
   };
 }
@@ -78,6 +79,7 @@ export function useSlideIn(delay: number = 0) {
 
   return {
     opacity,
+    translateY,
     transform: [{ translateY }],
   };
 }
@@ -118,3 +120,218 @@ export function useBounceScale(trigger: boolean) {
     transform: [{ scale }],
   };
 }
+
+/**
+ * Hook for scale-down press feedback on tappable elements.
+ * Returns animated style + press handlers to spread on Pressable.
+ */
+export function useScaleOnPress(scaleValue: number = 0.95) {
+  const { shouldSkipAnimation } = useMotionPreferences();
+  const scale = useRef(new Animated.Value(1)).current;
+
+  const onPressIn = useCallback(() => {
+    if (shouldSkipAnimation) return;
+    Animated.spring(scale, {
+      toValue: scaleValue,
+      useNativeDriver: true,
+      speed: 50,
+      bounciness: 4,
+    }).start();
+  }, [shouldSkipAnimation, scale, scaleValue]);
+
+  const onPressOut = useCallback(() => {
+    if (shouldSkipAnimation) return;
+    Animated.spring(scale, {
+      toValue: 1,
+      useNativeDriver: true,
+      speed: 50,
+      bounciness: 4,
+    }).start();
+  }, [shouldSkipAnimation, scale]);
+
+  return {
+    style: { transform: [{ scale }] },
+    onPressIn,
+    onPressOut,
+  };
+}
+
+/**
+ * Hook for slide-from-side + fade-in animation on appear.
+ */
+export function useSlideAndFade(delay: number = 0) {
+  const { shouldAnimate, shouldSkipAnimation } = useMotionPreferences();
+  const opacity = useRef(new Animated.Value(shouldSkipAnimation ? 1 : 0)).current;
+  const translateX = useRef(new Animated.Value(shouldSkipAnimation ? 0 : 20)).current;
+
+  useEffect(() => {
+    if (shouldSkipAnimation) {
+      opacity.setValue(1);
+      translateX.setValue(0);
+      return;
+    }
+
+    const duration = shouldAnimate ? 400 : 200;
+
+    Animated.parallel([
+      Animated.timing(opacity, {
+        toValue: 1,
+        duration,
+        delay,
+        useNativeDriver: true,
+      }),
+      Animated.timing(translateX, {
+        toValue: 0,
+        duration,
+        delay,
+        useNativeDriver: true,
+      }),
+    ]).start();
+  }, [delay, shouldAnimate, shouldSkipAnimation, opacity, translateX]);
+
+  return {
+    opacity,
+    transform: [{ translateX }],
+  };
+}
+
+/**
+ * Card shadow style for cards and elevated surfaces.
+ * Uses platform-specific shadow implementation.
+ */
+export function cardShadowStyle(color: string = '#000000'): ViewStyle {
+  return Platform.select({
+    ios: {
+      shadowColor: color,
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.08,
+      shadowRadius: 8,
+    },
+    android: {
+      elevation: 4,
+    },
+    default: {
+      elevation: 4,
+    },
+  }) as ViewStyle;
+}
+
+/**
+ * Elevated shadow style for FABs and floating elements.
+ */
+export function elevatedShadowStyle(color: string = '#000000'): ViewStyle {
+  return Platform.select({
+    ios: {
+      shadowColor: color,
+      shadowOffset: { width: 0, height: 8 },
+      shadowOpacity: 0.12,
+      shadowRadius: 16,
+    },
+    android: {
+      elevation: 8,
+    },
+    default: {
+      elevation: 8,
+    },
+  }) as ViewStyle;
+}
+
+/**
+ * Hook for shimmer/skeleton loading animation.
+ * Returns an animated opacity style that pulses for loading placeholders.
+ */
+export function useShimmer(durationMs: number = 1500) {
+  const { shouldSkipAnimation } = useMotionPreferences();
+  const opacity = useRef(new Animated.Value(shouldSkipAnimation ? 1 : 0.3)).current;
+
+  useEffect(() => {
+    if (shouldSkipAnimation) {
+      opacity.setValue(1);
+      return;
+    }
+
+    const animation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(opacity, {
+          toValue: 1,
+          duration: durationMs / 2,
+          useNativeDriver: true,
+        }),
+        Animated.timing(opacity, {
+          toValue: 0.3,
+          duration: durationMs / 2,
+          useNativeDriver: true,
+        }),
+      ])
+    );
+    animation.start();
+
+    return () => animation.stop();
+  }, [durationMs, shouldSkipAnimation, opacity]);
+
+  return { opacity };
+}
+
+/**
+ * Hook for repeating pulse scale animation (notifications, live indicators).
+ */
+export function usePulse(intensity: number = 0.05) {
+  const { shouldSkipAnimation } = useMotionPreferences();
+  const scale = useRef(new Animated.Value(1)).current;
+
+  useEffect(() => {
+    if (shouldSkipAnimation) return;
+
+    const animation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(scale, {
+          toValue: 1 + intensity,
+          duration: 1000,
+          useNativeDriver: true,
+        }),
+        Animated.timing(scale, {
+          toValue: 1,
+          duration: 1000,
+          useNativeDriver: true,
+        }),
+      ])
+    );
+    animation.start();
+
+    return () => animation.stop();
+  }, [intensity, shouldSkipAnimation, scale]);
+
+  return { transform: [{ scale }] };
+}
+
+/**
+ * Hook for heart/like bounce effect when toggled active.
+ * Scales up to 1.3x then springs back.
+ */
+export function useHeartBounce(isActive: boolean) {
+  const { shouldSkipAnimation } = useMotionPreferences();
+  const scale = useRef(new Animated.Value(1)).current;
+  const prevActive = useRef(isActive);
+
+  useEffect(() => {
+    if (isActive && !prevActive.current && !shouldSkipAnimation) {
+      Animated.sequence([
+        Animated.spring(scale, {
+          toValue: 1.3,
+          useNativeDriver: true,
+          speed: 50,
+          bounciness: 12,
+        }),
+        Animated.spring(scale, {
+          toValue: 1,
+          useNativeDriver: true,
+          speed: 50,
+          bounciness: 12,
+        }),
+      ]).start();
+    }
+    prevActive.current = isActive;
+  }, [isActive, shouldSkipAnimation, scale]);
+
+  return { transform: [{ scale }] };
+}

package/templates/react-native/TrackTemplate/src/animation/useMotionPreferences.ts

@@ -1,9 +1,17 @@
 import { useState, useEffect, useCallback, useMemo } from 'react';
 import { AccessibilityInfo } from 'react-native';
-import AsyncStorage from '@react-native-async-storage/async-storage';
 
 const INTENSITY_STORAGE_KEY = '@motion_preferences_intensity';
 
+// Safely load AsyncStorage — the native module may not be available on all
+// simulator runtimes (e.g. iOS 26 beta). Fall back to in-memory storage.
+let _asyncStorage: any = null;
+try {
+  _asyncStorage = require('@react-native-async-storage/async-storage').default;
+} catch (_) {
+  // Native module unavailable — preferences won't persist across restarts.
+}
+
 export type AnimationIntensity = 'full' | 'reduced' | 'off';
 
 export interface UseMotionPreferencesReturn {
@@ -25,12 +33,14 @@ export function useMotionPreferences(): UseMotionPreferencesReturn {
   const [animationIntensity, setIntensityState] = useState<AnimationIntensity>('full');
 
   useEffect(() => {
-    // Load persisted preference
-    AsyncStorage.getItem(INTENSITY_STORAGE_KEY).then((stored: string | null) => {
-      if (stored === 'full' || stored === 'reduced' || stored === 'off') {
-        setIntensityState(stored);
-      }
-    }).catch(() => {});
+    // Load persisted preference (skip if AsyncStorage unavailable)
+    if (_asyncStorage) {
+      _asyncStorage.getItem(INTENSITY_STORAGE_KEY).then((stored: string | null) => {
+        if (stored === 'full' || stored === 'reduced' || stored === 'off') {
+          setIntensityState(stored);
+        }
+      }).catch(() => {});
+    }
 
     // Check system Reduce Motion
     AccessibilityInfo.isReduceMotionEnabled().then((enabled) => {
@@ -51,10 +61,14 @@ export function useMotionPreferences(): UseMotionPreferencesReturn {
 
   const setAnimationIntensity = useCallback(async (intensity: AnimationIntensity) => {
     try {
-      await AsyncStorage.setItem(INTENSITY_STORAGE_KEY, intensity);
+      if (_asyncStorage) {
+        await _asyncStorage.setItem(INTENSITY_STORAGE_KEY, intensity);
+      }
       setIntensityState(intensity);
     } catch (error) {
-      console.error('Failed to save motion preference:', error);
+      // Still update in-memory state even if persistence fails
+      setIntensityState(intensity);
+      console.warn('Failed to save motion preference:', error);
     }
   }, []);
 

package/templates/react-native/TrackTemplate/src/screens/Settings/SettingsScreen.tsx

@@ -46,7 +46,7 @@ const SettingsScreen: React.FC = () => {
               accessibilityRole="button"
               accessibilityLabel="Animations settings"
               style={styles.row}
-              onPress={() => navigation.navigate('MotionPreferences' as any)}>
+              onPress={() => (navigation as any).navigate('MotionPreferences')}>
               <Text style={[styles.rowLabel, {color: colors.primaryText, fontSize: typography.body}]}>
                 Animations
               </Text>

package/templates/shared/ios/AnimatedTransitions/AnimatedTransitionsView.swift

@@ -1,143 +1,283 @@
 import SwiftUI
 
-// MARK: - Card Flip Modifier
-/// Applies a 3D card flip transition using rotation around the Y-axis.
-struct CardFlipModifier: ViewModifier {
-    @Binding var isFlipped: Bool
+// MARK: - Staggered Appear Modifier
+/// Applies a staggered fade-in + slide-up animation to list items.
+struct StaggeredAppearModifier: ViewModifier {
+    let index: Int
     let config: TransitionConfig
+    @State private var isVisible = false
     
     func body(content: Content) -> some View {
-        let angle = AnimatedTransitionsService.shared.cardFlipAngle(isFlipped: isFlipped)
-        let animation = AnimatedTransitionsService.shared.springAnimation(config: config)
-        
         content
-            .rotation3DEffect(
-                .degrees(angle),
-                axis: (x: 0, y: 1, z: 0),
-                perspective: 0.5
+            .opacity(isVisible ? 1 : 0)
+            .offset(y: isVisible ? 0 : 20)
+            .motionAware(animation: .spring(
+                response: config.springResponse,
+                dampingFraction: config.springDamping
+            ).delay(AnimatedTransitionsService.shared.staggerDelay(index: index)))
+            .onAppear {
+                isVisible = true
+            }
+    }
+}
+
+// MARK: - Slide In Modifier
+/// Applies a slide-in-from-bottom animation on appear.
+struct SlideInModifier: ViewModifier {
+    let delay: Double
+    @State private var isVisible = false
+    
+    func body(content: Content) -> some View {
+        content
+            .opacity(isVisible ? 1 : 0)
+            .offset(y: isVisible ? 0 : 30)
+            .motionAware(animation: .spring(response: 0.5, dampingFraction: 0.8).delay(delay))
+            .onAppear {
+                isVisible = true
+            }
+    }
+}
+
+// MARK: - Bounce Scale Modifier
+/// Applies a scale bounce animation on state change (e.g., favorite toggle).
+struct BounceScaleModifier: ViewModifier {
+    let isActive: Bool
+    @State private var scale: CGFloat = 1.0
+    
+    func body(content: Content) -> some View {
+        content
+            .scaleEffect(scale)
+            .motionAware(animation: .spring(response: 0.3, dampingFraction: 0.5))
+            .onChange(of: isActive) { _, _ in
+                scale = 1.3
+                DispatchQueue.main.asyncAfter(deadline: .now() + 0.15) {
+                    scale = 1.0
+                }
+            }
+    }
+}
+
+// MARK: - Scale on Press Modifier
+/// Applies scale-down + spring-back animation when pressed (like a button press).
+struct ScaleOnPressModifier: ViewModifier {
+    @State private var isPressed = false
+    
+    func body(content: Content) -> some View {
+        content
+            .scaleEffect(isPressed ? 0.95 : 1.0)
+            .animation(.spring(response: 0.3, dampingFraction: 0.7), value: isPressed)
+            .simultaneousGesture(
+                DragGesture(minimumDistance: 0)
+                    .onChanged { _ in isPressed = true }
+                    .onEnded { _ in isPressed = false }
             )
-            .motionAware(animation: animation)
-            .accessibilityIdentifier("animated_transitions_card_flip")
+    }
+}
+
+// MARK: - Haptic Feedback Modifier
+/// Triggers haptic feedback on tap.
+struct HapticFeedbackModifier: ViewModifier {
+    let style: UIImpactFeedbackGenerator.FeedbackStyle
+    
+    func body(content: Content) -> some View {
+        content
+            .onTapGesture {
+                UIImpactFeedbackGenerator(style: style).impactOccurred()
+            }
     }
 }
 
 // MARK: - Slide and Fade Modifier
-/// Applies horizontal or vertical slide with opacity fade transition.
+/// Applies a slide-from-side + fade-in animation on appear.
 struct SlideAndFadeModifier: ViewModifier {
-    let isVisible: Bool
-    let direction: SlideDirection
-    let config: TransitionConfig
+    let delay: Double
+    @State private var isVisible = false
     
     func body(content: Content) -> some View {
-        let service = AnimatedTransitionsService.shared
-        let horizontalOffset = service.slideHorizontalOffset(isVisible: isVisible, direction: direction)
-        let verticalOffset = service.slideVerticalOffset(isVisible: isVisible, direction: direction)
-        let opacity = service.fadeOpacity(isVisible: isVisible)
-        let animation = service.springAnimation(config: config)
-        
         content
-            .offset(x: horizontalOffset, y: verticalOffset)
-            .opacity(opacity)
-            .motionAware(animation: animation)
-            .accessibilityIdentifier("animated_transitions_slide_fade_\(direction.rawValue)")
+            .opacity(isVisible ? 1 : 0)
+            .offset(x: isVisible ? 0 : 20)
+            .motionAware(animation: .spring(response: 0.5, dampingFraction: 0.8).delay(delay))
+            .onAppear {
+                isVisible = true
+            }
     }
 }
 
-// MARK: - Zoom Transition Modifier
-/// Applies scale zoom transition with opacity fade.
-struct ZoomTransitionModifier: ViewModifier {
-    let isVisible: Bool
-    let config: TransitionConfig
+// MARK: - Card Shadow Modifier
+/// Applies a subtle colored shadow to cards and elevated surfaces.
+struct CardShadowModifier: ViewModifier {
+    let color: Color
+    let radius: CGFloat
+    let y: CGFloat
     
     func body(content: Content) -> some View {
-        let service = AnimatedTransitionsService.shared
-        let scale = service.zoomScale(isVisible: isVisible)
-        let opacity = service.fadeOpacity(isVisible: isVisible)
-        let animation = service.springAnimation(config: config)
-        
         content
-            .scaleEffect(scale)
-            .opacity(opacity)
-            .motionAware(animation: animation)
-            .accessibilityIdentifier("animated_transitions_zoom")
+            .shadow(color: color.opacity(0.08), radius: radius, x: 0, y: y)
+            .shadow(color: Color.black.opacity(0.04), radius: radius / 2, x: 0, y: y / 2)
     }
 }
 
-// MARK: - Cross Dissolve Modifier
-/// Applies cross-fade transition between two views.
-struct CrossDissolveModifier: ViewModifier {
-    let isShowingFirst: Bool
-    let config: TransitionConfig
+// MARK: - Elevated Shadow Modifier
+/// Applies a deeper shadow for FABs and floating elements.
+struct ElevatedShadowModifier: ViewModifier {
+    let color: Color
     
     func body(content: Content) -> some View {
-        let opacity = AnimatedTransitionsService.shared.fadeOpacity(isVisible: isShowingFirst)
-        let animation = AnimatedTransitionsService.shared.springAnimation(config: config)
-        
         content
-            .opacity(opacity)
-            .motionAware(animation: animation)
-            .accessibilityIdentifier("animated_transitions_cross_dissolve")
+            .shadow(color: color.opacity(0.12), radius: 16, x: 0, y: 8)
+            .shadow(color: Color.black.opacity(0.06), radius: 8, x: 0, y: 4)
     }
 }
 
-// MARK: - Matched Transition View
-/// Wrapper view for matchedGeometryEffect hero transitions.
-struct MatchedTransitionView<Content: View>: View {
-    let id: String
-    let namespace: Namespace.ID
-    let content: Content
+// MARK: - Shimmer Modifier
+/// Applies a shimmer/skeleton-loading gradient overlay for loading states.
+struct ShimmerModifier: ViewModifier {
+    @State private var isAnimating = false
     
-    init(id: String, namespace: Namespace.ID, @ViewBuilder content: () -> Content) {
-        self.id = id
-        self.namespace = namespace
-        self.content = content()
+    func body(content: Content) -> some View {
+        content
+            .overlay(
+                GeometryReader { geometry in
+                    if isAnimating {
+                        LinearGradient(
+                            colors: [
+                                Color.clear,
+                                Color.white.opacity(0.3),
+                                Color.clear
+                            ],
+                            startPoint: .leading,
+                            endPoint: .trailing
+                        )
+                        .offset(x: isAnimating ? geometry.size.width : -geometry.size.width)
+                        .animation(
+                            Animation.linear(duration: 1.5)
+                                .repeatForever(autoreverses: false),
+                            value: isAnimating
+                        )
+                    }
+                }
+            )
+            .clipped()
+            .onAppear {
+                isAnimating = true
+            }
     }
+}
+
+// MARK: - Pulse Modifier
+/// Applies a repeating scale pulse effect (e.g., for notifications, active indicators).
+struct PulseModifier: ViewModifier {
+    let intensity: CGFloat
+    @State private var scale: CGFloat = 1.0
     
-    var body: some View {
+    func body(content: Content) -> some View {
         content
-            .matchedGeometryEffect(id: id, in: namespace)
-            .motionAware()
-            .accessibilityIdentifier("animated_transitions_matched_geometry_\(id)")
+            .scaleEffect(scale)
+            .onAppear {
+                withAnimation(
+                    .easeInOut(duration: 1.0)
+                    .repeatForever(autoreverses: true)
+                ) {
+                    scale = 1.0 + intensity
+                }
+            }
+    }
+}
+
+// MARK: - Heart Bounce Modifier
+/// Applies a scale-up bounce then return when toggled (e.g., favorite/like buttons).
+struct HeartBounceModifier: ViewModifier {
+    let isActive: Bool
+    @State private var scale: CGFloat = 1.0
+    
+    func body(content: Content) -> some View {
+        content
+            .scaleEffect(scale)
+            .motionAware(animation: .spring(response: 0.3, dampingFraction: 0.5))
+            .onChange(of: isActive) { _, newValue in
+                if newValue {
+                    scale = 1.3
+                    DispatchQueue.main.asyncAfter(deadline: .now() + 0.2) {
+                        scale = 1.0
+                    }
+                }
+            }
     }
 }
 
 // MARK: - View Extensions
 
 extension View {
-    /// Applies a card flip transition with 3D rotation around the Y-axis.
+    /// Applies staggered appear animation for list items.
     /// - Parameters:
-    ///   - isFlipped: Binding to control flip state (false = front, true = back)
-    ///   - config: Transition configuration (default: .default)
-    /// - Returns: A view with card flip transition applied
-    func cardFlip(isFlipped: Binding<Bool>, config: TransitionConfig = .default) -> some View {
-        modifier(CardFlipModifier(isFlipped: isFlipped, config: config))
+    ///   - index: The item's position in the list (for stagger delay)
+    ///   - config: Transition configuration (default: .fast)
+    func staggeredAppear(index: Int, config: TransitionConfig = .fast) -> some View {
+        modifier(StaggeredAppearModifier(index: index, config: config))
     }
     
-    /// Applies a slide and fade transition.
-    /// - Parameters:
-    ///   - isVisible: Whether the view should be visible
-    ///   - direction: Slide direction (leading, trailing, top, bottom)
-    ///   - config: Transition configuration (default: .default)
-    /// - Returns: A view with slide and fade transition applied
-    func slideAndFade(isVisible: Bool, direction: SlideDirection, config: TransitionConfig = .default) -> some View {
-        modifier(SlideAndFadeModifier(isVisible: isVisible, direction: direction, config: config))
+    /// Applies slide-in-from-bottom animation on appear.
+    /// - Parameter delay: Delay before animation starts (default: 0)
+    func slideIn(delay: Double = 0) -> some View {
+        modifier(SlideInModifier(delay: delay))
     }
     
-    /// Applies a zoom transition with scale and opacity.
-    /// - Parameters:
-    ///   - isVisible: Whether the view should be visible
-    ///   - config: Transition configuration (default: .default)
-    /// - Returns: A view with zoom transition applied
-    func zoomTransition(isVisible: Bool, config: TransitionConfig = .default) -> some View {
-        modifier(ZoomTransitionModifier(isVisible: isVisible, config: config))
+    /// Applies scale bounce on state change (e.g., favorite toggle).
+    /// - Parameter isActive: The boolean state that triggers the bounce
+    func bounceOnChange(isActive: Bool) -> some View {
+        modifier(BounceScaleModifier(isActive: isActive))
     }
     
-    /// Applies a cross-dissolve transition between two views.
+    /// Applies scale-down press feedback to any tappable element.
+    /// Scales to 0.95 on press with spring return animation.
+    func scaleOnPress() -> some View {
+        modifier(ScaleOnPressModifier())
+    }
+    
+    /// Triggers haptic feedback on tap.
+    /// - Parameter style: Feedback intensity (.light, .medium, .heavy)
+    func hapticFeedback(_ style: UIImpactFeedbackGenerator.FeedbackStyle = .light) -> some View {
+        modifier(HapticFeedbackModifier(style: style))
+    }
+    
+    /// Applies a slide-from-side + fade-in animation on appear.
+    /// - Parameter delay: Delay before animation starts (default: 0)
+    func slideAndFade(delay: Double = 0) -> some View {
+        modifier(SlideAndFadeModifier(delay: delay))
+    }
+    
+    /// Applies subtle colored shadow to cards and elevated surfaces.
+    /// Uses dual-shadow technique: primary-tinted shadow + neutral shadow for depth.
     /// - Parameters:
-    ///   - isShowingFirst: Whether to show the first view (true) or second (false)
-    ///   - config: Transition configuration (default: .default)
-    /// - Returns: A view with cross-dissolve transition applied
-    func crossDissolve(isShowingFirst: Bool, config: TransitionConfig = .default) -> some View {
-        modifier(CrossDissolveModifier(isShowingFirst: isShowingFirst, config: config))
+    ///   - color: Shadow tint color (default: .primary)
+    ///   - radius: Shadow blur radius (default: 8)
+    ///   - y: Vertical offset (default: 4)
+    func cardShadow(color: Color = .primary, radius: CGFloat = 8, y: CGFloat = 4) -> some View {
+        modifier(CardShadowModifier(color: color, radius: radius, y: y))
+    }
+    
+    /// Applies deeper shadow for floating elements (FABs, modals).
+    /// - Parameter color: Shadow tint color (default: .primary)
+    func elevatedShadow(color: Color = .primary) -> some View {
+        modifier(ElevatedShadowModifier(color: color))
+    }
+    
+    /// Applies a shimmer loading overlay (e.g., for skeleton placeholder views).
+    func shimmer() -> some View {
+        modifier(ShimmerModifier())
+    }
+    
+    /// Applies a repeating pulse animation (e.g., for notifications, live indicators).
+    /// - Parameter intensity: Scale increase per pulse (default: 0.05 = 5% bigger)
+    func pulse(intensity: CGFloat = 0.05) -> some View {
+        modifier(PulseModifier(intensity: intensity))
+    }
+    
+    /// Applies a heart/like bounce effect when toggled active.
+    /// Scales up to 1.3x then springs back. Perfect for favorite buttons.
+    /// - Parameter isActive: Boolean that triggers the bounce when it becomes true
+    func heartBounce(isActive: Bool) -> some View {
+        modifier(HeartBounceModifier(isActive: isActive))
     }
 }