Dynamic Spotlight CTA

1"use client";
2 
3import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
4import { MouseEvent, useMemo, useState } from "react";
5 
6type DynamicSpotlightCTAProps = {
7  text?: string;
8  intensity?: number;
9  radius?: number;
10  showBlur?: boolean;
11};
12 
13type Particle = {
14  left: string;
15  top: string;
16  size: number;
17  travel: number;
18  duration: number;
19  delay: number;
20};
21 
22export function DynamicSpotlightCTA({
23  text = "Unlock Your Motion Power",
24  intensity = 0.85,
25  radius = 240,
26  showBlur = true,
27}: DynamicSpotlightCTAProps) {
28  const [mousePosition, setMousePosition] = useState<{
29    x: number;
30    y: number;
31  } | null>(null);
32  const shouldReduceMotion = useReducedMotion();
33 
34  const particles = useMemo<Particle[]>(
35    () =>
36      Array.from({ length: 18 }).map(() => ({
37        left: `${Math.random() * 100}%`,
38        top: `${Math.random() * 100}%`,
39        size: Math.random() * 4 + 2,
40        travel: Math.random() * 72 - 36,
41        duration: Math.random() * 3 + 2,
42        delay: Math.random() * 2,
43      })),
44    []
45  );
46 
47  const handleMouseMove = (event: MouseEvent<HTMLDivElement>) => {
48    if (shouldReduceMotion) return;
49    const rect = event.currentTarget.getBoundingClientRect();
50    const x = event.clientX - rect.left;
51    const y = event.clientY - rect.top;
52    setMousePosition({ x, y });
53  };
54 
55  const handleMouseLeave = () => {
56    setMousePosition(null);
57  };
58 
59  return (
60    <section
61      aria-labelledby="dynamic-spotlight-title"
62      className="relative w-full"
63    >
64      <div
65        onMouseMove={handleMouseMove}
66        onMouseLeave={handleMouseLeave}
67        className="relative h-[22rem] w-full overflow-hidden rounded-3xl border border-border/60 bg-card/80 shadow-[0_35px_120px_-40px_rgba(15,23,42,0.7)] backdrop-blur-xl"
68      >
69        <div aria-hidden className="pointer-events-none absolute inset-0">
70          <motion.div
71            className="absolute -top-28 left-1/2 h-72 w-72 -translate-x-1/2 rounded-full bg-primary/25 blur-[160px]"
72            animate={
73              shouldReduceMotion
74                ? undefined
75                : { opacity: [0.25, 0.55, 0.25], scale: [0.92, 1.08, 0.96] }
76            }
77            transition={
78              shouldReduceMotion
79                ? undefined
80                : { duration: 9, repeat: Infinity, ease: "easeInOut" }
81            }
82          />
83          <motion.div
84// … truncated