letter-cursor-trail

Physics-based cursor typography trail for React and Next.js.

Installation

npm install letter-cursor-trail

Usage

"use client";

import { LetterCursorTrail } from "letter-cursor-trail";

export default function Page() {
  return (
    <>
      <LetterCursorTrail />

      <main>
        Your content
      </main>
    </>
  );
}

Customization

<LetterCursorTrail
  textColor="#111111"
  backgroundColor="#f4ead6"
  maxParticles={260}
  idleIntensity={1}
/>

Props

| Prop | Type | Default | |-------------------|----------|----------| | textColor | string | #111111 | | backgroundColor | string | transparent | | maxParticles | number | 260 | | idleIntensity | number | 1 | | characters | string | A-Z a-z 0-9 | | zIndex | number | 999 |

Features

• Velocity-based typography trail
• Paper-like interaction style
• Idle clustering physics
• Lightweight canvas renderer
• React + Next.js compatible