wip

components/Scribble.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { cn } from '@/components/ui';
+
+interface ScribbleProps {
+  variant: 'circle' | 'underline';
+  className?: string;
+  color?: string;
+}
+
+export default function Scribble({ variant, className, color = '#82ed20' }: ScribbleProps) {
+  if (variant === 'circle') {
+    return (
+      <svg 
+        className={cn("absolute pointer-events-none", className)} 
+        role="presentation" 
+        viewBox="0 0 800 350" 
+        preserveAspectRatio="none"
+      >
+        <path 
+          style={{ animationDuration: '1.8s' }} 
+          transform="matrix(0.9791300296783447,0,0,0.9791300296783447,400,179)" 
+          strokeLinejoin="miter" 
+          fillOpacity="0" 
+          pathLength="1" 
+          strokeMiterlimit="4" 
+          stroke={color} 
+          strokeOpacity="1" 
+          strokeWidth="20" 
+          d=" M253,-161 C253,-161 -284.78900146484375,-201.4600067138672 -376,-21 C-469,163 67.62300109863281,174.2100067138672 256,121 C564,34 250.82899475097656,-141.6929931640625 19.10700035095215,-116.93599700927734"
+        />
+      </svg>
+    );
+  }
+
+  if (variant === 'underline') {
+    return (
+      <svg 
+        className={cn("absolute pointer-events-none", className)} 
+        role="presentation" 
+        viewBox="-400 -55 730 60" 
+        preserveAspectRatio="none"
+      >
+        <path 
+          style={{ animationDuration: '1.8s' }} 
+          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"
+        />
+      </svg>
+    );
+  }
+
+  return null;
+}