Image Mousetrail

An image with a mouse trail effect, where the image responds dynamically to cursor movement, creating a visually engaging interaction.

Open in

✨ Experience Interactive Designs with
Dynamic Mouse Trails

Usage

npx uilayouts add mousetrail

I use data-status atribute to handle active and inactive item and you can add animation using this attribute:

{
  items.map((item, index) => (
    <>
      <img
        key={index}
        className={cn(
          "object-cover  scale-0 opacity:0 data-[status='active']:scale-100  data-[status='active']:opacity-100 transition-transform data-[status='active']:duration-500 duration-300 data-[status='active']:ease-out-expo  absolute   -translate-y-[50%] -translate-x-[50%] ",
          imgClass
        )}
        data-index={index}
        data-status='inactive'
        src={item}
        alt={`image-${index}`}
        ref={refs.current[index]}
      />
    </>
  ));
}

Add the following cubic-bazeir to your tailwind.config.js file:

 transitionTimingFunction: {
  'out-expo': 'cubic-bezier(0.34, 1.56, 0.64, 1)',
 },

you can fade out animation when you don't mousemove:

const activate = (image, x, y) => {
  setTimeout(() => {
    image.dataset.status = 'inactive';
  }, 1000);
};

Props

Prop	Type	Default	Description
items	any[]	-	Array of items to display in the mouse trail effect.
children	ReactNode	undefined	Optional child elements to render inside the component.
className	string	undefined	Optional CSS class for styling the wrapper of the component.
imgClass	string	'w-40 h-48'	CSS class for styling the images in the mouse trail.
distance	number	20	Distance between each image in the mouse trail.
maxNumberOfImages	number	5	Maximum number of images to display in the trail.
fadeAnimation	boolean	false	Whether to apply fade animation to the images.