update component description

Author: Stefano Vavassori

content/components/3d-cursor.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: '3d Cursor Effect',
   description:
-    'An interactive React component that adds a dynamic bubble effect, visually tracking cursor movement in real time.',
+    'An interactive React component that adds a 3d effect to the cursor.',
 };
 
 <ComponentCodePreview name='3d-cursor' />

content/components/arrow-cursor.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: 'Arrow Cursor Effect',
   description:
-    'An interactive React component that adds a dynamic bubble effect, visually tracking cursor movement in real time.',
+    "An interactive React component that draws a dynamic arrow inside a circle, pointing up or down based on the cursor's vertical movement, providing a visual response to the user's cursor direction.",
 };
 
 <ComponentCodePreview name='arrow-cursor' />

content/components/blob-cursor.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: 'Blob Cursor Effect',
   description:
-    'An interactive React component that adds a dynamic bubble effect, visually tracking cursor movement in real time.',
+    'An interactive React component that adds a dynamic blob effect, visually tracking and interacting with cursor movements in real time.',
 };
 
 <ComponentCodePreview name='blob-cursor' />

content/components/canvas-cursor.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: 'Canvas Cursor Effect',
   description:
-    'An interactive React component that adds a dynamic bubble effect, visually tracking cursor movement in real time.',
+    'An interactive React component that creates dynamic trailing lines following the cursor, generating smooth and fluid motion trails that react in real time to cursor movement.',
 };
 
 <ComponentCodePreview name='canvas-cursor' />

content/components/character-cursor.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: 'Character Cursor Effect',
   description:
-    'An interactive React component that adds a dynamic bubble effect, visually tracking cursor movement in real time.',
+    'A React component that tracks cursor movement and creates characters that radiate outward, generating a dynamic and expanding effect.',
 };
 
 <ComponentCodePreview name='character-cursor' />

content/components/clickeffect-cursor.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: 'Click Cursor Effect',
   description:
-    'An interactive React component that adds a dynamic bubble effect, visually tracking cursor movement in real time.',
+    'A React component that dynamically follows the cursor with a circle and responds to clicks with visual effects.',
 };
 
 <ComponentCodePreview name='clickeffect-cursor' />

content/components/fairydust-cursor.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: 'Fairy Dust Cursor Effect',
   description:
-    'An interactive React component that adds a dynamic bubble effect, visually tracking cursor movement in real time.',
+    'An interactive React component that creates a magical fairy dust effect, generating a trail of sparkling emoji particles that follow the cursor in real time. ✨',
 };
 
 <ComponentCodePreview name='fairydust-cursor' />
@@ -10,7 +10,7 @@ export const metadata = {
 
 ```tsx
 'use client';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 
 interface FairyDustCursorProps {
   colors?: string[];
@@ -54,7 +54,27 @@ export const FairyDustCursor: React.FC<FairyDustCursorProps> = ({
   const particlesRef = useRef<Particle[]>([]);
   const cursorRef = useRef({ x: 0, y: 0 });
   const lastPosRef = useRef({ x: 0, y: 0 });
-  const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0 });
+  const [canvasSize, setCanvasSize] = useState({
+    width: element ? element.clientWidth : window.innerWidth,
+    height: element ? element.clientHeight : window.innerHeight,
+  });
+
+  useLayoutEffect(() => {
+    const updateCanvasSize = () => {
+      const newWidth = element ? element.clientWidth : window.innerWidth;
+      const newHeight = element ? element.clientHeight : window.innerHeight;
+  
+      console.log('vavva updateCanvasSize', newWidth, newHeight);
+      setCanvasSize({ width: newWidth, height: newHeight });
+    };
+  
+    updateCanvasSize();
+    window.addEventListener('resize', updateCanvasSize);
+  
+    return () => {
+      window.removeEventListener('resize', updateCanvasSize);
+    };
+  },[element])
 
   useEffect(() => {
     const canvas = canvasRef.current;
@@ -64,16 +84,8 @@ export const FairyDustCursor: React.FC<FairyDustCursorProps> = ({
     const context = canvas.getContext('2d');
     if (!context) return;
 
-    const updateCanvasSize = () => {
-      const newWidth = element ? targetElement.clientWidth : window.innerWidth;
-      const newHeight = element
-        ? targetElement.clientHeight
-        : window.innerHeight;
-      setCanvasSize({ width: newWidth, height: newHeight });
-    };
-
-    updateCanvasSize();
-    window.addEventListener('resize', updateCanvasSize);
+    canvas.width = canvasSize.width;
+    canvas.height = canvasSize.height;
 
     // Animation frame setup
     let animationFrameId: number;
@@ -181,7 +193,6 @@ export const FairyDustCursor: React.FC<FairyDustCursorProps> = ({
     animate();
 
     return () => {
-      window.removeEventListener('resize', updateCanvasSize);
       targetElement.removeEventListener('mousemove', handleMouseMove);
       targetElement.removeEventListener('touchmove', handleTouchMove);
       cancelAnimationFrame(animationFrameId);
@@ -195,6 +206,7 @@ export const FairyDustCursor: React.FC<FairyDustCursorProps> = ({
     gravity,
     fadeSpeed,
     initialVelocity,
+    canvasSize,
   ]);
 
   return (

content/components/follow-cursor.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: 'Follow Cursor Effect',
   description:
-    'An interactive React component that adds a dynamic bubble effect, visually tracking cursor movement in real time.',
+    'An interactive React component that tracks the cursor with a small gray circle, creating a smooth following effect.',
 };
 
 <ComponentCodePreview name='follow-cursor' />

content/components/glitch-cursor.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: 'Glitch Cursor Effect',
   description:
-    'An interactive React component that adds a dynamic bubble effect, visually tracking cursor movement in real time.',
+    'An interactive React component that applies a glitch effect to elements when the cursor hovers over them, creating a distorted, digital disruption effect in real time.',
 };
 
 <ComponentCodePreview name='glitch-cursor' />

content/components/gradient-cursor.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: 'Gradient Cursor Effect',
   description:
-    'An interactive React component that adds a dynamic bubble effect, visually tracking cursor movement in real time.',
+    'An interactive React component that adds a dynamic gradient effect, visually tracking cursor movement in real time.',
 };
 
 <ComponentCodePreview name='gradient-cursor' />