diff --git a/content/components/3d-cursor.mdx b/content/components/3d-cursor.mdx index b77112b..9adf03b 100644 --- a/content/components/3d-cursor.mdx +++ b/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.', }; diff --git a/content/components/arrow-cursor.mdx b/content/components/arrow-cursor.mdx index f7e0fe4..b6dbda4 100644 --- a/content/components/arrow-cursor.mdx +++ b/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.", }; diff --git a/content/components/blob-cursor.mdx b/content/components/blob-cursor.mdx index 089a441..19298d1 100644 --- a/content/components/blob-cursor.mdx +++ b/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.', }; diff --git a/content/components/canvas-cursor.mdx b/content/components/canvas-cursor.mdx index 7f56f55..ad6faf9 100644 --- a/content/components/canvas-cursor.mdx +++ b/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.', }; diff --git a/content/components/character-cursor.mdx b/content/components/character-cursor.mdx index 0dbcc2a..0ac52f9 100644 --- a/content/components/character-cursor.mdx +++ b/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.', }; diff --git a/content/components/clickeffect-cursor.mdx b/content/components/clickeffect-cursor.mdx index 04ec735..6e0fa3c 100644 --- a/content/components/clickeffect-cursor.mdx +++ b/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.', }; diff --git a/content/components/fairydust-cursor.mdx b/content/components/fairydust-cursor.mdx index e3f40e3..2dc0039 100644 --- a/content/components/fairydust-cursor.mdx +++ b/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. ✨', }; @@ -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 = ({ const particlesRef = useRef([]); 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 = ({ 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 = ({ 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 = ({ gravity, fadeSpeed, initialVelocity, + canvasSize, ]); return ( diff --git a/content/components/fluid-cursor.mdx b/content/components/fluid-cursor.mdx index 0775081..b3d061d 100644 --- a/content/components/fluid-cursor.mdx +++ b/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.', }; diff --git a/content/components/follow-cursor.mdx b/content/components/follow-cursor.mdx index 8f669a6..3fb5669 100644 --- a/content/components/follow-cursor.mdx +++ b/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.', }; diff --git a/content/components/glitch-cursor.mdx b/content/components/glitch-cursor.mdx index 5ba86d6..7202bf0 100644 --- a/content/components/glitch-cursor.mdx +++ b/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.', }; diff --git a/content/components/gradient-cursor.mdx b/content/components/gradient-cursor.mdx index 427d42e..5043a36 100644 --- a/content/components/gradient-cursor.mdx +++ b/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.', }; diff --git a/content/components/magnetic-cursor.mdx b/content/components/magnetic-cursor.mdx index 35ad32c..0aba514 100644 --- a/content/components/magnetic-cursor.mdx +++ b/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', }; diff --git a/content/components/multi-cursor.mdx b/content/components/multi-cursor.mdx index cd9d372..6676296 100644 --- a/content/components/multi-cursor.mdx +++ b/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.', }; diff --git a/content/components/neon-cursor.mdx b/content/components/neon-cursor.mdx index e98707e..42f77ee 100644 --- a/content/components/neon-cursor.mdx +++ b/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.', }; diff --git a/content/components/rainbow-cursor.mdx b/content/components/rainbow-cursor.mdx index f34da08..62adf4c 100644 --- a/content/components/rainbow-cursor.mdx +++ b/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.', }; diff --git a/content/components/ripple-cursor.mdx b/content/components/ripple-cursor.mdx index 8e3ddb0..e5eac35 100644 --- a/content/components/ripple-cursor.mdx +++ b/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.', }; diff --git a/content/components/scaling-cursor.mdx b/content/components/scaling-cursor.mdx index 442bb3e..962a3ec 100644 --- a/content/components/scaling-cursor.mdx +++ b/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.", }; diff --git a/content/components/snowflake-cursor.mdx b/content/components/snowflake-cursor.mdx index fe26e82..81c3394 100644 --- a/content/components/snowflake-cursor.mdx +++ b/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.', }; diff --git a/content/components/spotlight-cursor.mdx b/content/components/spotlight-cursor.mdx index d522fab..ac8bd7f 100644 --- a/content/components/spotlight-cursor.mdx +++ b/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.', }; diff --git a/content/components/springy-cursor.mdx b/content/components/springy-cursor.mdx index 04ad24c..f2fda0f 100644 --- a/content/components/springy-cursor.mdx +++ b/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.', }; diff --git a/content/components/textflag-cursor.mdx b/content/components/textflag-cursor.mdx index 48548ad..6c7fb98 100644 --- a/content/components/textflag-cursor.mdx +++ b/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.', }; diff --git a/content/components/texticon-cursor.mdx b/content/components/texticon-cursor.mdx index 8067e7f..6073f29 100644 --- a/content/components/texticon-cursor.mdx +++ b/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.', }; diff --git a/content/components/trail-cursor.mdx b/content/components/trail-cursor.mdx index fe72bc8..5806edf 100644 --- a/content/components/trail-cursor.mdx +++ b/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.', }; diff --git a/registry/components/cursor/common/fluid-cursor.tsx b/registry/components/cursor/common/fluid-cursor.tsx index dc73fa6..6c1beec 100644 --- a/registry/components/cursor/common/fluid-cursor.tsx +++ b/registry/components/cursor/common/fluid-cursor.tsx @@ -9,7 +9,7 @@ const FluidCursor = () => { }, []); return ( -
+
); diff --git a/registry/components/cursor/fairydust/FairyDustCursor.tsx b/registry/components/cursor/fairydust/FairyDustCursor.tsx index a0f009b..3e693cc 100644 --- a/registry/components/cursor/fairydust/FairyDustCursor.tsx +++ b/registry/components/cursor/fairydust/FairyDustCursor.tsx @@ -43,9 +43,31 @@ export const FairyDustCursor: React.FC = ({ const particlesRef = useRef([]); 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; @@ -53,16 +75,8 @@ export const FairyDustCursor: React.FC = ({ 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 = ({ 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 = ({ gravity, fadeSpeed, initialVelocity, + canvasSize, ]); return (