Cursor Follow
カーソルフォロー
Dots that chase the pointer, each one slacker than the last so the trail strings out behind it rather than piling up in one place. The direct variant drops the springs and pins every dot to the pointer exactly. Coordinates are read relative to the container, so it works anywhere on the page. Built with Framer Motion useSpring↗↗ and Tailwind CSS.
Move the pointer
Installation
Install the following dependencies:1
npm install framer-motionCopy and paste the following code into a new component file:2
"use client"
import { motion, useMotionValue, useSpring, type MotionValue } from "framer-motion"
import { useEffect, useRef } from "react"
type CursorFollowProps = {
variant?: "spring" | "direct",
size?: number,
trail?: number,
height?: number,
How to use it3
"use client"
import { CursorFollow } from "@/components/ui/cursor-follow"
export default function Page() {
return <CursorFollow variant="spring" trail={3} size={24} />
}
Props
CursorFollow
| Name | Default | Description |
|---|---|---|
| variant | "spring" | "spring" | "direct" Whether the dots trail on springs or track the pointer exactly |
| size | 24 | number Diameter of the leading dot in pixels |
| trail | 3 | number How many dots make up the trail |
| height | 280 | number Height of the tracked area in pixels |
| dark | false | boolean Render the dark palette |