Spotlight Logo

1"use client"
2 
3import { useEffect, useId, useRef } from "react"
4import type { Transition } from "motion/react"
5import {
6  motion,
7  useInView,
8  useMotionValue,
9  useReducedMotion,
10  useSpring,
11  useTransform,
12} from "motion/react"
13 
14import { metalClickSound } from "@/lib/soundcn/metal-click"
15import { useSound } from "@/hooks/soundcn/use-sound"
16 
17const transition: Transition = {
18  type: "spring",
19  mass: 0.5,
20  damping: 18,
21  stiffness: 200,
22}
23 
24/**
25 * An SVG mark whose outline is traced by a gradient highlight that follows the
26 * cursor, paired with a springy press effect and a tactile click sound.
27 *
28 * Swap the SVG paths below for your own artwork. The interaction is driven by:
29 * - a `radialGradient` whose center springs toward the pointer (the spotlight),
30 *   reused as a second stroke layered over the base outline.
31 * - `whileTap="pressed"` morphing the path `d` values between two states.
32 *
33 * The demo mark was designed by ncdai on Figma with the
34 * [Fast Isometric Plugin](https://www.figma.com/community/plugin/1249759048471403961).
35 * Inspired by tailwindcss.com.
36 */
37export function SpotlightLogo() {
38  const id = useId()
39  const ids = {
40    facePattern: `spotlight-logo-face-pattern-${id}`,
41    faceFill: `spotlight-logo-face-fill-${id}`,
42    stroke: `spotlight-logo-stroke-${id}`,
43    radialGradient: `spotlight-logo-radial-gradient-${id}`,
44  }
45 
46  const ref = useRef<SVGSVGElement>(null)
47 
48  const [play] = useSound(metalClickSound)
49 
50  const shouldReduceMotion = useReducedMotion()
51  const isInView = useInView(ref, { margin: "80px" })
52 
53  const mouseX = useMotionValue(0.5)
54  const mouseY = useMotionValue(0.5)
55 
56  const cx = useSpring(useTransform(mouseX, [0, 1], [0, 556]), {
57    stiffness: 300,
58    damping: 30,
59    mass: 0.1,
60  })
61 
62  const cy = useSpring(useTransform(mouseY, [0, 1], [0, 354]), {
63    stiffness: 300,
64    damping: 30,
65    mass: 0.1,
66  })
67 
68  useEffect(() => {
69    if (shouldReduceMotion || !isInView) {
70      return
71    }
72 
73    if (window.matchMedia("(hover: none)").matches) {
74      return
75    }
76 
77    const handleMouseMove = (e: MouseEvent) => {
78      mouseX.set(e.clientX / window.innerWidth)
79      mouseY.set(e.clientY / window.innerHeight)
80    }
81 
82    window.addEventListener("mousemove", handleMouseMove)
83 
84    return () => {
85      window.removeEventListener("mousemove", handleMouseMove)
86    }
87  }, [shouldReduceMotion, isInView, mouseX, mouseY])
88 
89  return (
90    <motion.svg
91      ref={ref}
92// … truncated