diff --git a/src/components/Heart.tsx b/src/components/Heart.tsx
index 9c17e6e..9f65d77 100644
--- a/src/components/Heart.tsx
+++ b/src/components/Heart.tsx
@@ -1,6 +1,7 @@
-import React, { memo } from 'react';
-import { Group, Path } from '@shopify/react-native-skia';
+import React, { memo, useCallback, useEffect } from 'react';
+import { Group, Path, runSpring, useValue } from '@shopify/react-native-skia';
 import { palette } from '../constants/theming';
+import { screenHeight } from '../constants/dimensions';
 
 interface HeartProps {
   x: number;
@@ -8,6 +9,20 @@ interface HeartProps {
 }
 
 function Heart({ x, y }: HeartProps) {
+  const opacity = useValue(1);
+
+  const changeOpacity = useCallback(
+    () =>
+      runSpring(opacity, 0, {
+        mass: screenHeight / 3,
+      }),
+    [opacity]
+  );
+
+  useEffect(() => {
+    changeOpacity();
+  }, [changeOpacity]);
+
   return (
     <Group transform={[{ translateY: y }]}>
       <Group transform={[{ translateX: x }]}>
@@ -15,6 +30,7 @@ function Heart({ x, y }: HeartProps) {
           <Path
             path="m263.42 235.15c-66.24 0-120 53.76-120 120 0 134.76 135.93 170.09 228.56 303.31 87.574-132.4 228.56-172.86 228.56-303.31 0-66.24-53.76-120-120-120-48.048 0-89.402 28.37-108.56 69.188-19.161-40.817-60.514-69.188-108.56-69.188z"
             color={palette.red}
+            opacity={opacity}
           />
         </Group>
       </Group>
diff --git a/src/components/Star.tsx b/src/components/Star.tsx
index 25b698b..bf609d5 100644
--- a/src/components/Star.tsx
+++ b/src/components/Star.tsx
@@ -1,6 +1,7 @@
-import React, { memo } from 'react';
-import { Group, Path } from '@shopify/react-native-skia';
+import React, { memo, useCallback, useEffect } from 'react';
+import { Group, Path, runSpring, useValue } from '@shopify/react-native-skia';
 import { palette } from '../constants/theming';
+import { screenHeight } from '../constants/dimensions';
 
 interface StarProps {
   x: number;
@@ -8,6 +9,20 @@ interface StarProps {
 }
 
 function Star({ x, y }: StarProps) {
+  const opacity = useValue(1);
+
+  const changeOpacity = useCallback(
+    () =>
+      runSpring(opacity, 0, {
+        mass: screenHeight / 3,
+      }),
+    [opacity]
+  );
+
+  useEffect(() => {
+    changeOpacity();
+  }, [changeOpacity]);
+
   return (
     <Group transform={[{ translateY: y }]}>
       <Group transform={[{ translateX: x }]}>
@@ -15,6 +30,7 @@ function Star({ x, y }: StarProps) {
           <Path
             path="M 128 0 L 168 80 L 256 93 L 192 155 L 207 244 L 128 202 L 49 244 L 64 155 L 0 93 L 88 80 L 128 0 Z"
             color={palette.yellow}
+            opacity={opacity}
           />
         </Group>
       </Group>