fix: changed the heart animation to a pulsating one, fixed the lock s…

…vg size and also moved not only the body of the lock to the bottom, changed the heart-crack animation (not soo sure I got it tho) and other changes as requested.
pqoqubbw · Teea-dev · Jan 3, 2025 · Jan 3, 2025 · Jan 3, 2025 · Jan 3, 2025
commit bc2da2ac43c51d229a5b034883486d82f5ed8cd6
diff --git a/icons/heart-crack.tsx b/icons/heart-crack.tsx
@@ -1,23 +1,40 @@
 'use client';
-
+import React from 'react';
 import type { Variants } from 'motion/react';
-import { motion, useAnimation } from 'motion/react';
+import { motion, useAnimation } from 'framer-motion';
 
-const pathVariants: Variants = {
+const leftHalfVariants: Variants = {
   normal: {
-    pathLength: 1,
+    rotate: 0,
+    x: 0,
     opacity: 1,
   },
   animate: {
-    pathLength: [0, 1],
-    opacity: [0, 1],
+    rotate: -3,
+    x: -2,
+    opacity: 1,
     transition: {
       duration: 0.9,
-      ease: 'easeInOut',
+      ease: [0.4, 0, 0.2, 1],
+    },
+  },
+};
+const rightHalfVariants: Variants = {
+  normal: {
+    rotate: 0,
+    x: 0,
+    opacity: 1,
+  },
+  animate: {
+    rotate:3,
+    x: 2,
+    opacity: 1,
+    transition: {
+      duration: 0.9,
+      ease: [0.4, 0, 0.2, 1],
     },
   },
 };
-
 const HeartCrackIcon = () => {
   const controls = useAnimation();
 
@@ -26,33 +43,29 @@ const HeartCrackIcon = () => {
       className="cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center"
       onMouseEnter={() => controls.start('animate')}
       onMouseLeave={() => controls.start('normal')}
-      style={{ display: 'inline-block' }}
     >
-      <svg
+      <motion.svg
         xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
+        width="28"
+        height="28"
         viewBox="0 0 24 24"
         fill="none"
         stroke="currentColor"
         strokeWidth="2"
         strokeLinecap="round"
         strokeLinejoin="round"
+        initial="normal"
+        animate={controls}
       >
         <motion.path
-          d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"
-          initial="normal"
-          animate={controls}
-          variants={pathVariants}
+          d="M12 5C10.5 3.5 9.26 3 7.5 3A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7 L11 13 L13 11 L10 8 L12 5"
+          variants={leftHalfVariants}
         />
-
         <motion.path
-          d="m12 13-1-1 2-2-3-3 2-2"
-          initial="normal"
-          animate={controls}
-          variants={pathVariants}
+          d="M12 5c1.5-1.5 2.74-2 4.5-2A5.5 5.5 0 0 1 22 8.5c0 2.3-1.5 4.05-3 5.5l-7 7 L13 13 L11 11 L14 8 L12 5"
+          variants={rightHalfVariants}
         />
-      </svg>
+      </motion.svg>
     </div>
   );
 };

diff --git a/icons/heart.tsx b/icons/heart.tsx
@@ -1,18 +1,22 @@
-'use client ';
+'use client';
 import type { Variants } from 'motion/react';
 import { motion, useAnimation } from 'motion/react';
 
-const pathVariants: Variants = {
+const pulseVariants: Variants = {
   normal: {
-    pathLength: 1,
+    scale: 1,
     opacity: 1,
+    transition: {
+      duration: 0.2,
+    },
   },
   animate: {
-    pathLength: [0, 1],
-    opacity: [0, 1],
+    scale: [1, 1.2, 1],
+    opacity: [1, 0.8, 1],
     transition: {
       duration: 0.9,
       ease: 'easeInOut',
+      repeat: Infinity,
     },
   },
 };
@@ -25,26 +29,23 @@ const HeartIcon = () => {
       className="cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center"
       onMouseEnter={() => controls.start('animate')}
       onMouseLeave={() => controls.start('normal')}
-      style={{ display: 'inline-block' }}
     >
-      <svg
+      <motion.svg
         xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
+        width="28"
+        height="28"
         viewBox="0 0 24 24"
         fill="none"
         stroke="currentColor"
         strokeWidth="2"
         strokeLinecap="round"
         strokeLinejoin="round"
+        initial="normal"
+        animate={controls}
+        variants={pulseVariants}
       >
-        <motion.path
-          d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"
-          initial="normal"
-          animate={controls}
-          variants={pathVariants}
-        />
-      </svg>
+        <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" />
+      </motion.svg>
     </div>
   );
 };

diff --git a/icons/lock.tsx b/icons/lock.tsx
@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import type { Variants } from 'motion/react';
 import { motion, useAnimation } from 'motion/react';
@@ -42,15 +43,15 @@ const LockIcon = () => {
 
   return (
     <div
-      className="cursor-pointer select-none p-2 rounded-md flex items-center justify-center"
+      className="cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center"
       onMouseEnter={() => controls.start('animate')}
       onMouseLeave={() => controls.start('normal')}
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
+        width="28"
+        height="28"
+        viewBox="0 0 32 32"
         fill="none"
         stroke="currentColor"
         strokeWidth="2"
@@ -60,16 +61,17 @@ const LockIcon = () => {
         <motion.rect
           width="18"
           height="11"
-          x="3"
-          y="11"
+          x="7"
+          y="15"
           rx="2"
           ry="2"
           initial="normal"
           animate={controls}
           variants={bodyVariants}
         />
+
         <motion.path
-          d="M7 11V7a5 5 0 0 1 10 0v4"
+          d="M10 15V9a6 6 0 0 1 12 0v6"
           initial="normal"
           animate={controls}
           variants={pathVariants}