rebreak-monorepo/apps/rebreak-native/components/onboarding/ScreenshotPointer.tsx

import { useEffect, useRef } from 'react';
import { Animated, Easing, View } from 'react-native';

/**
 * Animierter Pulse-Marker für Screenshot-Overlays im Onboarding-Pre-Explainer.
 *
 * Positioniert via Prozent-Koordinaten relativ zum Container — so unabhängig
 * von Screen-Größe + iPad-Skalierung. Pulsiert (Outer-Ring) + arrow pointer
 * darunter zeigt klar wo der User tappen muss.
 *
 *   <View style={{ aspectRatio: 9/16, ... }}>
 *     <Image source={...} />
 *     <ScreenshotPointer xPercent={50} yPercent={87} />
 *   </View>
 *
 * `xPercent=50, yPercent=87` ist die typische Position für "Erlauben"/
 * "Fortfahren" am Bottom des iOS-Permission-Dialogs.
 */
export function ScreenshotPointer({
  xPercent,
  yPercent,
  color = '#dc2626',
}: {
  /** Horizontale Position als 0..100 vom Container-Width */
  xPercent: number;
  /** Vertikale Position als 0..100 vom Container-Height */
  yPercent: number;
  /** Pulse-Color. Default rot — fällt auf, signalisiert "wichtig". */
  color?: string;
}) {
  const pulse = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    const loop = Animated.loop(
      Animated.sequence([
        Animated.timing(pulse, {
          toValue: 1,
          duration: 1100,
          useNativeDriver: true,
          easing: Easing.out(Easing.cubic),
        }),
        Animated.timing(pulse, {
          toValue: 0,
          duration: 1100,
          useNativeDriver: true,
          easing: Easing.in(Easing.cubic),
        }),
      ]),
    );
    loop.start();
    return () => loop.stop();
  }, [pulse]);

  const scale = pulse.interpolate({ inputRange: [0, 1], outputRange: [1, 1.45] });
  const opacity = pulse.interpolate({ inputRange: [0, 1], outputRange: [0.95, 0.2] });

  return (
    <View
      pointerEvents="none"
      style={{
        position: 'absolute',
        top: `${yPercent}%`,
        left: `${xPercent}%`,
        // Marker center'n auf der Position
        transform: [{ translateX: -28 }, { translateY: -28 }],
        width: 56,
        height: 56,
      }}
    >
      {/* Outer pulse-ring */}
      <Animated.View
        style={{
          position: 'absolute',
          width: 56,
          height: 56,
          borderRadius: 28,
          borderWidth: 3,
          borderColor: color,
          opacity,
          transform: [{ scale }],
        }}
      />
      {/* Inner solid ring */}
      <View
        style={{
          position: 'absolute',
          width: 56,
          height: 56,
          borderRadius: 28,
          borderWidth: 3,
          borderColor: color,
          backgroundColor: 'transparent',
        }}
      />
    </View>
  );
}