ProPlanCard with animated sparkles

ProPlanCard.tsx

import React from 'react';
import { View, Text, StyleSheet, Pressable, Dimensions } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import Animated, { 
  useAnimatedStyle, 
  withSpring, 
  withRepeat, 
  withSequence,
  useSharedValue 
} from 'react-native-reanimated';
import { SparkleAnimation } from './SparkleAnimation';

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

export function ProPlanCard() {
  const scale = useSharedValue(1);
  const sparklePositions = [
    { top: '10%', left: '10%' },
    { top: '20%', right: '15%' },
    { bottom: '20%', left: '20%' },
    { bottom: '30%', right: '25%' },
  ];

  React.useEffect(() => {
    scale.value = withRepeat(
      withSequence(
        withSpring(1.02),
        withSpring(1)
      ),
      -1,
      true
    );
  }, []);

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ scale: scale.value }],
  }));

  return (
    <Pressable>
      <Animated.View style={[styles.container, animatedStyle]}>
        <LinearGradient
          colors={['#4F46E5', '#7C3AED', '#9333EA']}
          start={{ x: 0, y: 0 }}
          end={{ x: 1, y: 1 }}
          style={styles.gradient}
        >
          {sparklePositions.map((position, index) => (
            <View key={index} style={[styles.sparkleWrapper, position]}>
              <SparkleAnimation />
            </View>
          ))}
          
          <View style={styles.content}>
            <Text style={styles.title}>Upgrade to Pro</Text>
            <Text style={styles.price}>$9.99<Text style={styles.period}>/month</Text></Text>
          </View>
        </LinearGradient>
      </Animated.View>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  container: {
    marginHorizontal: 16,
    marginBottom: 20,
    borderRadius: 16,
    elevation: 5,
    shadowColor: '#4F46E5',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.3,
    shadowRadius: 8,
  },
  gradient: {
    borderRadius: 16,
    overflow: 'hidden',
  },
  content: {
    padding: 16,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  sparkleWrapper: {
    position: 'absolute',
    zIndex: 1,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#fff',
  },
  price: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#fff',
  },
  period: {
    fontSize: 14,
    fontWeight: 'normal',
  },
});

SparkleAnimation.tsx

import React from 'react';
import { StyleSheet } from 'react-native';
import Animated, { 
  useAnimatedStyle, 
  withRepeat, 
  withTiming, 
  withDelay,
  withSequence,
  useSharedValue, 
  useAnimatedProps
} from 'react-native-reanimated';
import { Path, Svg } from 'react-native-svg';

const AnimatedPath = Animated.createAnimatedComponent(Path);

export function SparkleAnimation() {
  const opacity = useSharedValue(0);
  const scale = useSharedValue(0.3);

  React.useEffect(() => {
    opacity.value = withRepeat(
      withSequence(
        withDelay(Math.random() * 1000,
          withTiming(1, { duration: 400 })
        ),
        withTiming(0, { duration: 400 })
      ),
      -1,
      true
    );

    scale.value = withRepeat(
      withSequence(
        withTiming(1, { duration: 400 }),
        withTiming(0.3, { duration: 400 })
      ),
      -1,
      true
    );
  }, []);

  const animatedStyle = useAnimatedStyle(() => ({
    opacity: opacity.value,
    transform: [{ scale: scale.value }],
  }));

  const animatedProps = useAnimatedProps(() => ({
    opacity: opacity.value,
  }));

  return (
    <Animated.View style={[styles.sparkle, animatedStyle]}>
      <Svg width="20" height="20" viewBox="0 0 20 20">
        <AnimatedPath
          animatedProps={animatedProps}
          d="M10 0L12.5 7.5L20 10L12.5 12.5L10 20L7.5 12.5L0 10L7.5 7.5L10 0Z"
          fill="#FFD700"
        />
      </Svg>
    </Animated.View>
  );
}

const styles = StyleSheet.create({
  sparkle: {
    position: 'absolute',
    width: 20,
    height: 20,
  },
});

Amazing

I have no words. Its just awesome and inspiring me to keep coding and this is one of my favorite feature. Is this code generated by AI?

I have no words. Its just awesome and inspiring me to keep coding and this is one of my favorite feature. Is this code generated by AI?

Yes the code was generated by AI, I made some changes after that