Lamp Heading

1"use client";
2import { useRef, useEffect, useState, useCallback, useMemo } from "react";
3import { motion } from "motion/react";
4import { cn } from "@/lib/utils";
5 
6interface Particle {
7  id: number;
8  x: number;
9  y: number;
10  size: number;
11  opacity: number;
12  baseOpacity: number;
13  phase: number;
14  phaseMultiplier: number;
15  speedMultiplier: number;
16}
17 
18interface LampHeadingProps {
19  text: string;
20  className?: string;
21  gradientColors?: {
22    from: string;
23    via?: string;
24    to: string;
25  };
26  lineHeight?: number;
27  lampHeight?: number;
28  glowIntensity?: number;
29  glowSize?: number;
30  animationSpeed?: number;
31  direction?: "above" | "below";
32  showParticles?: boolean;
33  showLightRays?: boolean;
34  interactive?: boolean;
35  textSize?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
36  pulseEffect?: boolean;
37  particleCount?: number;
38}
39 
40const TEXT_SIZE_CLASSES = {
41  sm: "text-sm",
42  md: "text-base",
43  lg: "text-lg",
44  xl: "text-xl",
45  "2xl": "text-2xl",
46  "3xl": "text-3xl",
47  "4xl": "text-4xl",
48} as const;
49 
50const TEXT_SIZE_OFFSETS = {
51  sm: 32,
52  md: 36,
53  lg: 40,
54  xl: 40,
55  "2xl": 44,
56  "3xl": 48,
57  "4xl": 52,
58} as const;
59 
60export const LampHeading = ({
61  text,
62  className,
63  gradientColors = { from: "#FF33C7", via: "#CD35FF", to: "#4533F7" },
64  lineHeight = 4,
65  lampHeight = 80,
66  glowIntensity = 1.0,
67  glowSize = 30,
68  animationSpeed = 4,
69  direction = "below",
70  showParticles = true,
71  showLightRays = false,
72  interactive = true,
73  textSize = "4xl",
74  pulseEffect = true,
75  particleCount = 8,
76}: LampHeadingProps) => {
77  const containerRef = useRef<HTMLDivElement>(null);
78  const [particles, setParticles] = useState<Particle[]>([]);
79  const [isHovered, setIsHovered] = useState(false);
80  const animationFrameRef = useRef<number | null>(null);
81  const lastUpdateRef = useRef<number>(0);
82  const gradientString = useMemo(
83    () =>
84      gradientColors.via
85        ? `linear-gradient(90deg, ${gradientColors.from}, ${gradientColors.via}, ${gradientColors.to})`
86        : `linear-gradient(90deg, ${gradientColors.from}, ${gradientColors.to})`,
87    [gradientColors],
88  );
89 
90  const isBelow = direction === "below";
91 
92  const generateParticles = useCallback(() => {
93    if (!showParticles) return [];
94 
95    return Array.from({ length: particleCount }, (_, i) => {
96      const baseOpacity = Math.random() * 0.25 + 0.35;
97      return {
98        id: i,
99        x: Math.random() * 100,
100        y: Math.random() * 100,
101        size: Math.random() * 1.2 + 0.6,
102// … truncated