MorphCursor

import React from 'react';
import { motion } from 'framer-motion';

interface MorphCursorProps {
  children: React.ReactNode;
}

const MorphCursor: React.FC<MorphCursorProps> = ({ children }) => {
  const [cursorType, setCursorType] = React.useState('default');

  const handleMouseMove = (e: React.MouseEvent) => {
    if (e.target instanceof HTMLTextAreaElement || e.target instanceof HTMLInputElement) {
      setCursorType('text');
    } else if (e.target instanceof HTMLAnchorElement) {
      setCursorType('link');
    } else {
      setCursorType('default');
    }
  };

  return (
    <motion.div
      className="cursor-container"
      onMouseMove={handleMouseMove}
    >
      {children}
      <motion.div
        className="cursor"
        animate={{
          scale: cursorType === 'link' ? 1.5 : 1,
          NECursor: cursorType === 'text' ? 'text' : 'pointer',
        }}
      />
    </motion.div>
  );
};

export default MorphCursor;

Component info

Dependencies

About

A React component that morphs the cursor shape based on the context. By default, it displays a circle, changes to an I-beam when hovering over text, and scales up when hovering over links. This component is designed to work seamlessly on dark backgrounds, such as #0A0A0A, and is built using TypeScript for robustness. With its adaptive nature, it enhances user experience by providing visual cues about the type of element being interacted with. The MorphCursor component is versatile, efficient, and easy to integrate into existing projects, making it a valuable asset for developers looking to add a touch of interactivity to their applications.