Cursor Follow

Renders a cursor follow effect with a bubble or circle. Follows mouse movement with smooth animation. Use for interactive elements needing visual feedback on hover.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/cursor-follow

npx layro-cli add @educlopez/cursor-follow

npx layro-cli add @educlopez/cursor-follow

bunx layro-cli add @educlopez/cursor-follow

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

Code

Demo

"use client";

import {
  motion,
  useMotionValue,
  useReducedMotion,
  useSpring,
} from "motion/react";
import type React from "react";
import { useEffect, useRef, useState } from "react";

import { useCursorPosition } from "./use-cursor-position";

export interface CursorFollowProps {