Ocean Depths

import React from 'react';
import { View, StyleSheet, Dimensions } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import Animated, {
  useAnimatedStyle,
  withRepeat,
  withTiming,
} from 'react-native-reanimated';

const { width, height } = Dimensions.get('window');

export const OceanDepths = () => {
  const animatedStyle = useAnimatedStyle(() => ({
    opacity: withRepeat(withTiming(0.8, { duration: 3000 }), -1, true),
  }));

  return (
    <View style={styles.container}>
      <LinearGradient
        colors={['#667eea', '#764ba2']}
        style={StyleSheet.absoluteFill}
      />
      <Animated.View style={[styles.overlay, animatedStyle]} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, width, height },
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(255,255,255,0.05)',
  },
});