Exploding Input

1"use client";
2 
3import React, {
4  useEffect,
5  useRef,
6  useCallback,
7  type ReactNode,
8  type CSSProperties,
9} from "react";
10 
11type HorizontalDirection = "left" | "center" | "right";
12type VerticalDirection = "top" | "center" | "bottom";
13 
14interface ExplodingInputProps {
15  /** Content to render as particles (React nodes) */
16  content?: ReactNode[];
17  /** Number of particles to spawn per input event */
18  count?: number;
19  /** Direction of particle movement */
20  direction?: {
21    horizontal?: HorizontalDirection;
22    vertical?: VerticalDirection;
23  };
24  /** Gravity value from -1 to 1 (negative = upward, positive = downward) */
25  gravity?: number;
26  /** Duration of particle animation in seconds */
27  duration?: number;
28  /** Scale configuration for particles */
29  scale?: {
30    value?: number;
31    randomize?: boolean;
32    randomVariation?: number;
33  };
34  /** Rotation configuration for particles */
35  rotation?: {
36    value?: number;
37    animate?: boolean;
38  };
39  /** Custom styles for the container */
40  style?: CSSProperties;
41  /** Class name for the container */
42  className?: string;
43}
44 
45interface Particle {
46  id: number;
47  x: number;
48  y: number;
49  scale: number;
50  rotate: number;
51  opacity: number;
52  vx: number;
53  vy: number;
54  gravity: number;
55  birthTime: number;
56  lifeMs: number;
57  contentIdx: number;
58  scaleStart: number;
59  scaleEnd: number;
60  rotateStart: number;
61  rotateEnd: number;
62  element: HTMLDivElement;
63  isDead: boolean;
64}
65 
66function mapLinear(
67  value: number,
68  inMin: number,
69  inMax: number,
70  outMin: number,
71  outMax: number
72): number {
73  if (inMax === inMin) return outMin;
74  const t = (value - inMin) / (inMax - inMin);
75  return outMin + t * (outMax - outMin);
76}
77 
78function createPRNG(seed: number): () => number {
79  let s = seed;
80  return function () {
81    s |= 0;
82    s = (s + 1831565813) | 0;
83    let t = Math.imul(s ^ (s >>> 15), 1 | s);
84    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
85    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
86  };
87}
88 
89export function ExplodingInput({
90  content = [],
91  count = 1,
92  direction = { horizontal: "center", vertical: "top" },
93  gravity = 0.7,
94  duration = 3,
95  scale = { value: 1, randomize: false, randomVariation: 0 },
96  rotation = { value: 0, animate: false },
97  style,
98  className,
99}: ExplodingInputProps) {
100  const particleIdCounter = useRef(0);
101  const containerRef = useRef<HTMLDivElement>(null);
102  const particleContainerRef = useRef<HTMLDivElement>(null);
103  const particlesRef = useRef<Particle[]>([]);
104// … truncated