falling-text

1"use client";
2import Matter from "matter-js";
3import { useCallback, useEffect, useRef, useState } from "react";
4 
5export interface FallingTextProps {
6  /** The text content to display and animate */
7  text: string;
8  /** Words to highlight with special styling */
9  highlightWords?: string[];
10  /** When to trigger the falling animation */
11  trigger?: "auto" | "scroll" | "click" | "hover";
12  /** Background color for the physics canvas */
13  backgroundColor?: string;
14  /** Show physics wireframes for debugging */
15  wireframes?: boolean;
16  /** Gravity strength (default: 1) */
17  gravity?: number;
18  /** Mouse interaction stiffness (0-1, default: 0.2) */
19  mouseConstraintStiffness?: number;
20  /** Font size for the text */
21  fontSize?: string;
22  /** Custom className for the container */
23  className?: string;
24  /** Callback when animation starts */
25  onAnimationStart?: () => void;
26  /** Callback when animation ends (all bodies settled) */
27  onAnimationEnd?: () => void;
28  /** Physics properties for word bodies */
29  physicsOptions?: {
30    restitution?: number; // Bounciness (0-1)
31    frictionAir?: number; // Air resistance
32    friction?: number; // Surface friction
33    density?: number; // Mass density
34  };
35  /** Initial velocity range for words */
36  initialVelocity?: {
37    x?: number; // Horizontal velocity range
38    y?: number; // Vertical velocity range
39    angular?: number; // Angular velocity range
40  };
41  /** Custom highlight styles */
42  highlightClassName?: string;
43  /** Word spacing in pixels */
44  wordSpacing?: number;
45  /** Minimum container height */
46  minHeight?: string;
47  /** Enable/disable mouse interactions */
48  enableMouseInteraction?: boolean;
49  /** Reset trigger - increment to reset animation */
50  resetKey?: number;
51}
52 
53const FallingText: React.FC<FallingTextProps> = ({
54  text,
55  highlightWords = [],
56  trigger = "auto",
57  backgroundColor = "transparent",
58  wireframes = false,
59  gravity = 1,
60  mouseConstraintStiffness = 0.2,
61  fontSize = "1rem",
62  className = "",
63  onAnimationStart,
64  onAnimationEnd,
65  physicsOptions = {},
66  initialVelocity = {},
67  highlightClassName = "text-cyan-500 font-bold",
68  wordSpacing = 2,
69  minHeight = "300px",
70  enableMouseInteraction = true,
71  resetKey = 0,
72}) => {
73  const containerRef = useRef<HTMLDivElement | null>(null);
74  const textRef = useRef<HTMLDivElement | null>(null);
75  const canvasContainerRef = useRef<HTMLDivElement | null>(null);
76  const engineRef = useRef<Matter.Engine | null>(null);
77// … truncated