"use client"; import { useId, useRef, useState } from "react"; import { motion, useMotionValue, useMotionTemplate, useSpring, useTransform, useTime, } from "framer-motion"; import { ArrowRight, Mail, User, type LucideIcon } from "lucide-react"; import { cn } from "@/lib/utils"; const EASE = [0.16, 1, 0.3, 1] as const; export function SpotlightInput({ label, type = "text", icon: Icon, className, }: { label: string; type?: string; icon?: LucideIcon; className?: string; }) { const id = useId(); const ref = useRef(null); const mouseX = useMotionValue(0); const mouseY = useMotionValue(0); const [focused, setFocused] = useState(false); const [hovering, setHovering] = useState(false); const [value, setValue] = useState(""); const active = focused || hovering; // Continuous, deterministic clock. Drives the idle motion so the field // reads as alive even when nobody is touching it. const time = useTime(); // A thin light that travels around the border, always. const beamRotate = useTransform(time, (t) => (t / 30) % 360); // The resting spotlight drifts on a slow, seeded path (percent based so it // stays crisp at any width). Rounded before it reaches the DOM. const driftX = useTransform(time, (t) => Math.round(50 + 26 * Math.sin(t / 2600))); const driftY = useTransform(time, (t) => Math.round(50 + 19 * Math.sin(t / 1900 + 1.3)) ); const idleGlow = useMotionTemplate`radial-gradient(150px circle at ${driftX}% ${driftY}%, rgba(124,108,255,0.13), transparent 72%)`; // Cursor-tracked spotlight, spring-smoothed and rounded. const springX = useSpring(mouseX, { stiffness: 170, damping: 24, mass: 0.4 }); const springY = useSpring(mouseY, { stiffness: 170, damping: 24, mass: 0.4 }); const cursorX = useTransform(springX, (v) => Math.round(v)); const cursorY = useTransform(springY, (v) => Math.round(v)); const cursorGlow = useMotionTemplate`radial-gradient(220px circle at ${cursorX}px ${cursorY}px, rgba(124,108,255,0.22), transparent 70%)`; function onMouseMove(e: React.MouseEvent) { const rect = ref.current?.getBoundingClientRect(); if (!rect) return; mouseX.set(e.clientX - rect.left); mouseY.set(e.clientY - rect.top); } const floated = focused || value.length > 0; return (

setHovering(true)} onMouseLeave={() => setHovering(false)} className={cn( "relative overflow-hidden rounded-xl bg-white/[0.06] p-px", className )} > {/* Traveling border light, continuous at rest. */}

{/* Inner panel, sits 1px inside, revealing the beam as a hairline rim. */}

{/* Resting glow: drifts on its own until you engage the field. */} {/* Cursor glow: takes over on hover or focus. */}

{Icon && ( )} {label} setValue(e.target.value)} onFocus={() => setFocused(true)} onBlur={() => setFocused(false)} className="w-full bg-transparent pt-2 text-sm text-white caret-brand-soft outline-none placeholder:text-transparent" />

{/* Focus ring: the whole edge lifts to brand on engagement. */}

); } export default function Demo() { return (

Request early access

No password required. We email you a secure sign-in link.

Continue

Trusted by 2,400 teams. No credit card to start.

); }

Spotlight Input

Request early access