BlobCursor

import { useSpring, useMotionValue, useTransform } from 'framer-motion';
import React from 'react';

const BlobCursor = () => {
  const x = useMotionValue(0);
  const y = useMotionValue(0);
  const springX = useSpring(x, { stiffness: 100, damping: 15 });
  const springY = useSpring(y, { stiffness: 100, damping: 15 });
  const scaleX = useTransform(springX, [0, 100], [0.5, 1.5]);
  const scaleY = useTransform(springY, [0, 100], [0.5, 1.5]);

  const handleMouseMove = (e: React.MouseEvent) => {
    x.set(e.clientX);
    y.set(e.clientY);
  };

  return (
    <div onMouseMove={handleMouseMove} style={{ position: 'relative', width: '100vw', height: '100vh', backgroundColor: '#0A0A0A' }}>
      <svg width={100} height={100} style={{ position: 'absolute', left: springX, top: springY, transform: `scale(${scaleX}, ${scaleY})` }}>
        <path fill='#C9A84C' d='M50,10 C35,30 30,50 50,70 70,50 65,30 50,10' />
      </svg>
    </div>
  );
};

export default BlobCursor;

Component info

Dependencies

About

A React component representing an organic SVG blob shape that follows the mouse with a spring animation. The blob is colored in #C9A84C and is set against a dark background #0A0A0A. Utilizes the useSpring hook for animation. Ideal for enhancing user experience and creating engaging interfaces.