Cursor Image Trail

A component that displays a trail of images following the cursor. It animates images based on cursor movement and speed. Use it to create visual effects that respond to user interaction.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/cursor-image-trail

npx layro-cli add @educlopez/cursor-image-trail

npx layro-cli add @educlopez/cursor-image-trail

bunx layro-cli add @educlopez/cursor-image-trail

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import { useReducedMotion } from "motion/react";
import { type ReactNode, useEffect, useRef, useState } from "react";

export interface CursorTrailImage {
  alt: string;
  src: string;
}

export interface CursorImageTrailProps {
  children: ReactNode;
  className?: string;