🐛 Fix fairydust canvas dimensions + disable fluid pointer events + update documentation

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/fluid-cursor.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: 'Fluid 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 fluid effect, visually tracking cursor movement in real time.',
 };
 
 <ComponentCodePreview name='fluid-cursor' />

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' />

content/components/magnetic-cursor.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: 'Magnetic 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 magnetic effect, attracting elements to the cursor',
 };
 
 <ComponentCodePreview name='magnetic-cursor' />

content/components/multi-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 dynamic multi cursor effect, visually tracking cursor movement in real time.',
 };
 
 <ComponentCodePreview name='multi-cursor' />

content/components/neon-cursor.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: 'Neon 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 enhances the cursor with a glowing neon ring, a subtle shadow, and an additional circular layer, creating a dynamic and immersive lighting effect in real time.',
 };
 
 <ComponentCodePreview name='neon-cursor' />

content/components/rainbow-cursor.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: 'rainbow 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 rainbow effect, visually tracking cursor movement in real time.',
 };
 
 <ComponentCodePreview name='rainbow-cursor' />

content/components/ripple-cursor.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: 'Neon 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 ripple effect, visually tracking cursor movement in real time.',
 };
 
 <ComponentCodePreview name='ripple-cursor' />

content/components/scaling-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 dynamically scales the cursor's size when hovering over specific elements, creating a responsive and engaging visual effect.",
 };
 
 <ComponentCodePreview name='scaling-cursor' />

content/components/snowflake-cursor.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: 'Snowflake 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 snowflake effect, visually tracking cursor movement in real time.',
 };
 
 <ComponentCodePreview name='snowflake-cursor' />

content/components/spotlight-cursor.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: 'Spotlight 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 spotlight effect, visually tracking cursor movement in real time.',
 };
 
 <ComponentCodePreview name='spotlight-cursor' />

content/components/springy-cursor.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: 'Springy 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 generates a trail of emoji particles following the cursor with a spring-like motion, creating a smooth and dynamic elastic effect in real time.',
 };
 
 <ComponentCodePreview name='springy-cursor' />

content/components/textflag-cursor.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: 'Textflag 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 attaches a waving text effect to the cursor, making the text ripple and flow like a flag as it moves in real time.',
 };
 
 <ComponentCodePreview name='textflag-cursor' />

content/components/texticon-cursor.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: 'Text Icons Effect',
   description:
-    'An interactive React component that adds a dynamic bubble effect, visually tracking cursor movement in real time.',
+    'An interactive React component that enhances the cursor with dynamic text and icons, adapting in real time based on the hovered element to provide contextual feedback.',
 };
 
 <ComponentCodePreview name='texticon-cursor' />

content/components/trail-cursor.mdx

@@ -1,7 +1,7 @@
 export const metadata = {
   title: 'Trail 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 generates a trail of cursors following the main cursor, creating a dynamic and visually engaging ghosting effect in real time.',
 };
 
 <ComponentCodePreview name='trail-cursor' />

registry/components/cursor/common/fluid-cursor.tsx

@@ -9,7 +9,7 @@ const FluidCursor = () => {
   }, []);
 
   return (
-    <div className='fixed top-0 left-0 z-2'>
+    <div className='fixed top-0 left-0 z-2 pointer-events-none'>
       <canvas id='fluid' className='w-screen h-screen' />
     </div>
   );

registry/components/cursor/fairydust/FairyDustCursor.tsx

@@ -43,26 +43,40 @@ 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: typeof window !== 'undefined' ? (element ? element.clientWidth : window.innerWidth) : 0,
+    height: typeof window !== 'undefined' ? (element ? element.clientHeight : window.innerHeight) : 0,
+  });
 
   useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const updateCanvasSize = () => {
+      const newWidth = element ? element.clientWidth : window.innerWidth;
+      const newHeight = element ? element.clientHeight : window.innerHeight;
+      setCanvasSize({ width: newWidth, height: newHeight });
+    };
+
+    updateCanvasSize();
+    window.addEventListener('resize', updateCanvasSize);
+
+    return () => {
+      window.removeEventListener('resize', updateCanvasSize);
+    };
+  }, [element]);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
     const canvas = canvasRef.current;
     if (!canvas) return;
 
     const targetElement = element || document.body;
     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;
@@ -170,7 +184,6 @@ export const FairyDustCursor: React.FC<FairyDustCursorProps> = ({
     animate();
 
     return () => {
-      window.removeEventListener('resize', updateCanvasSize);
       targetElement.removeEventListener('mousemove', handleMouseMove);
       targetElement.removeEventListener('touchmove', handleTouchMove);
       cancelAnimationFrame(animationFrameId);
@@ -184,6 +197,7 @@ export const FairyDustCursor: React.FC<FairyDustCursorProps> = ({
     gravity,
     fadeSpeed,
     initialVelocity,
+    canvasSize,
   ]);
 
   return (