RippleCursor

import React, { useState, useEffect } from 'react';
import { motion } from 'framer-motion';

interface RippleCursorProps {
  children: React.ReactNode;
}

const RippleCursor: React.FC<RippleCursorProps> = ({ children }) => {
  const [ripple, setRipple] = useState(false);
  const [x, setX] = useState(0);
  const [y, setY] = useState(0);

  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
    setRipple(true);
    setX(e.clientX);
    setY(e.clientY);
    setTimeout(() => {
      setRipple(false);
    }, 1000);
  };

  return (
    <div onClick={handleClick} style={{ position: 'relative', overflow: 'hidden' }}>
      {children}
      {ripple && (
        <motion.div
          initial={{ opacity: 1, scale: 0 }}
          animate={{ opacity: 0, scale: 1 }}
          transition={{ duration: 1 }}
          style={{
            position: 'absolute',
            top: y,
            left: x,
            backgroundColor: '#C9A84C',
            borderRadius: '50%',
            pointerEvents: 'none'
          }}
        />
      )}
    </div>
  );
};

export default RippleCursor;

Component info

Dependencies

About

A customizable React component that creates a ripple effect with gold concentric rings on click. The effect expands and fades out, adding a touch of elegance to any application. Built with React 18 and TypeScript, this component is easy to integrate and use. The RippleCursor component is perfect for adding a unique visual touch to buttons, icons, or any other interactive elements. With its sleek design and smooth animation, it's sure to enhance the user experience. The component uses the #C9A84C gold color and is designed to work seamlessly on dark backgrounds, such as #0A0A0A. Whether you're building a web application or a mobile app, the RippleCursor component is a great choice for adding a bit of flair to your design.