cursor-driven-particle-typography

1"use client";
2 
3import { cn } from "@workspace/ui/lib/utils";
4import React, { useEffect, useRef } from "react";
5 
6export interface CursorDrivenParticleTypographyProps {
7    /** Additional CSS classes */
8    className?: string;
9    /** The text to render */
10    text: string;
11    /** Font size in pixels */
12    fontSize?: number;
13    /** Font family */
14    fontFamily?: string;
15    /** Size of each particle */
16    particleSize?: number;
17    /** Density of particles (lower number = more particles, minimum 1) */
18    particleDensity?: number;
19    /** How strongly the cursor pushes particles away */
20    dispersionStrength?: number;
21    /** Speed at which particles return to origin */
22    returnSpeed?: number;
23    /** Custom color for particles. Overrides inherited text color if set. */
24    color?: string;
25}
26 
27class Particle {
28    x: number;
29    y: number;
30    originX: number;
31    originY: number;
32    vx: number;
33    vy: number;
34    size: number;
35    color: string;
36    dispersion: number;
37    returnSpd: number;
38 
39    constructor(
40        x: number,
41        y: number,
42        size: number,
43        color: string,
44        dispersion: number,
45        returnSpd: number
46    ) {
47        this.x = x + (Math.random() - 0.5) * 10; // start with slight randomness
48        this.y = y + (Math.random() - 0.5) * 10;
49        this.originX = x;
50        this.originY = y;
51        this.vx = (Math.random() - 0.5) * 5;
52        this.vy = (Math.random() - 0.5) * 5;
53        this.size = size;
54        this.color = color;
55        this.dispersion = dispersion;
56        this.returnSpd = returnSpd;
57    }
58 
59    update(mouseX: number, mouseY: number) {
60        const dx = mouseX - this.x;
61        const dy = mouseY - this.y;
62        const distance = Math.sqrt(dx * dx + dy * dy);
63 
64        // Physics interaction with mouse
65        const interactionRadius = 120; // 120px interaction radius
66 
67        if (distance < interactionRadius && mouseX !== -1000 && mouseY !== -1000) {
68            const forceDirectionX = dx / distance;
69            const forceDirectionY = dy / distance;
70 
71            const force = (interactionRadius - distance) / interactionRadius;
72 
73            // Calculate repulsion
74            const repulsionX = forceDirectionX * force * this.dispersion;
75            const repulsionY = forceDirectionY * force * this.dispersion;
76 
77            this.vx -= repulsionX;
78            this.vy -= repulsionY;
79        }
80 
81        // Return to origin (spring physics)
82// … truncated