AI Glow Input

1"use client";
2 
3import { useTheme } from "@/components/uitripled/theme-provider";
4import { cn } from "@/lib/utils";
5import {
6  motion,
7  useMotionValue,
8  useReducedMotion,
9  useSpring,
10} from "framer-motion";
11import { useEffect, useMemo, useRef, useState } from "react";
12 
13type AIGlowInputProps = {
14  placeholder?: string;
15  onValueChange?: (value: string) => void;
16  glowColor?: string;
17};
18 
19type Particle = {
20  left: string;
21  top: string;
22  delay: number;
23};
24 
25export function AIGlowInput({
26  placeholder = "Ask AI anything…",
27  onValueChange,
28  glowColor,
29}: AIGlowInputProps) {
30  const [value, setValue] = useState("");
31  const [glowIntensity, setGlowIntensity] = useState(0.3);
32  const [isFocused, setIsFocused] = useState(false);
33  const lastTypingTime = useRef(Date.now());
34  const typingSpeed = useMotionValue(0);
35  const glowIntensityMotion = useMotionValue(0.3);
36  const shouldReduceMotion = useReducedMotion();
37  const { resolvedTheme } = useTheme();
38  const isDarkMode = resolvedTheme === "dark";
39 
40  const effectiveGlowColor = useMemo(() => {
41    if (glowColor) {
42      return glowColor;
43    }
44    return isDarkMode ? "#d1d5db" : "#ddd";
45  }, [glowColor, isDarkMode]);
46 
47  const particles = useMemo<Particle[]>(
48    () =>
49      Array.from({ length: 6 }).map(() => ({
50        left: `${Math.random() * 100}%`,
51        top: `${Math.random() * 100}%`,
52        delay: Math.random() * 1.8,
53      })),
54    []
55  );
56 
57  const springIntensity = useSpring(glowIntensityMotion, {
58    stiffness: 420,
59    damping: 32,
60  });
61 
62  useEffect(() => {
63    const unsubscribe = springIntensity.on("change", (latest) => {
64      setGlowIntensity(latest as number);
65    });
66    return () => unsubscribe();
67  }, [springIntensity]);
68 
69  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
70    const newValue = event.target.value;
71    setValue(newValue);
72    onValueChange?.(newValue);
73 
74    const now = Date.now();
75    const timeSinceLastType = now - lastTypingTime.current;
76    lastTypingTime.current = now;
77 
78    const speed = Math.min(1, 1000 / (timeSinceLastType || 1));
79    typingSpeed.set(speed);
80 
81    const baseIntensity = 0.28;
82    const dynamicIntensity = baseIntensity + speed * 0.72;
83    glowIntensityMotion.set(dynamicIntensity);
84 
85    if (timeSinceLastType > 500) {
86      glowIntensityMotion.set(baseIntensity);
87    }
88  };
89 
90  const handleFocus = () => {
91    setIsFocused(true);
92    glowIntensityMotion.set(0.58);
93  };
94 
95  const handleBlur = () => {
96    setIsFocused(false);
97// … truncated