wip

components/Scribble.tsx

@@ -1,4 +1,7 @@
+'use client';
+
 import React from 'react';
+import { motion, Variants } from 'framer-motion';
 import { cn } from '@/components/ui';
 
 interface ScribbleProps {
@@ -8,6 +11,18 @@ interface ScribbleProps {
 }
 
 export default function Scribble({ variant, className, color = '#82ed20' }: ScribbleProps) {
+  const pathVariants: Variants = {
+    hidden: { pathLength: 0, opacity: 0 },
+    visible: {
+      pathLength: 1,
+      opacity: 1,
+      transition: {
+        duration: 1.8,
+        ease: "easeInOut",
+      }
+    }
+  };
+
   if (variant === 'circle') {
     return (
       <svg 
@@ -16,12 +31,14 @@ export default function Scribble({ variant, className, color = '#82ed20' }: Scri
         viewBox="0 0 800 350" 
         preserveAspectRatio="none"
       >
-        <path 
-          style={{ animationDuration: '1.8s' }} 
+        <motion.path 
+          variants={pathVariants}
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true }}
           transform="matrix(0.9791300296783447,0,0,0.9791300296783447,400,179)" 
           strokeLinejoin="miter" 
           fillOpacity="0" 
-          pathLength="1" 
           strokeMiterlimit="4" 
           stroke={color} 
           strokeOpacity="1" 
@@ -40,11 +57,13 @@ export default function Scribble({ variant, className, color = '#82ed20' }: Scri
         viewBox="-400 -55 730 60" 
         preserveAspectRatio="none"
       >
-        <path 
-          style={{ animationDuration: '1.8s' }} 
+        <motion.path 
+          variants={pathVariants}
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true }}
           d="m -383.25 -6 c 55.25 -22 130.75 -33.5 293.25 -38 c 54.5 -0.5 195 -2.5 401 15" 
           stroke={color} 
-          pathLength="1" 
           strokeWidth="20" 
           fill="none"
         />

package-lock.json

@@ -16,6 +16,7 @@
         "cheerio": "^1.1.2",
         "clsx": "^2.1.1",
         "dotenv": "^17.2.3",
+        "framer-motion": "^12.27.1",
         "gray-matter": "^4.0.3",
         "i18next": "^25.7.3",
         "jsdom": "^27.4.0",
@@ -8547,6 +8548,33 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "12.27.1",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.27.1.tgz",
+      "integrity": "sha512-cEAqO69kcZt3gL0TGua8WTgRQfv4J57nqt1zxHtLKwYhAwA0x9kDS/JbMa1hJbwkGY74AGJKvZ9pX/IqWZtZWQ==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.27.1",
+        "motion-utils": "^12.24.10",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -11436,6 +11464,21 @@
       "integrity": "sha512-EGWKgxALGMgzvxYF1UyGTy0HXX/2vHLkw6+NvDKW2jypWbHpjQuj4UMcqQWXHERJhVGKikolT06G3bcKe4fi7w==",
       "license": "MIT"
     },
+    "node_modules/motion-dom": {
+      "version": "12.27.1",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.27.1.tgz",
+      "integrity": "sha512-V/53DA2nBqKl9O2PMJleSUb/G0dsMMeZplZwgIQf5+X0bxIu7Q1cTv6DrjvTTGYRm3+7Y5wMlRZ1wT61boU/bQ==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.24.10"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.24.10",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.24.10.tgz",
+      "integrity": "sha512-x5TFgkCIP4pPsRLpKoI86jv/q8t8FQOiM/0E8QKBzfMozWHfkKap2gA1hOki+B5g3IsBNpxbUnfOum1+dgvYww==",
+      "license": "MIT"
+    },
     "node_modules/mri": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",

package.json

@@ -8,6 +8,7 @@
     "cheerio": "^1.1.2",
     "clsx": "^2.1.1",
     "dotenv": "^17.2.3",
+    "framer-motion": "^12.27.1",
     "gray-matter": "^4.0.3",
     "i18next": "^25.7.3",
     "jsdom": "^27.4.0",