404 / Not Found Spotlight

1"use client";
2// beui.dev/components/blocks/not-found
3 
4import { useRef } from "react";
5import {
6  motion,
7  useMotionTemplate,
8  useMotionValue,
9  useReducedMotion,
10} from "motion/react";
11import { useHoverCapable } from "@/lib/hooks/use-hover-capable";
12import { cn } from "@/lib/utils";
13import {
14  NOT_FOUND_DEFAULTS,
15  NotFoundActions,
16  NotFoundStage,
17  type NotFoundProps,
18} from "./shared";
19 
20export function NotFoundSpotlight({
21  className,
22  code = NOT_FOUND_DEFAULTS.code,
23  title = NOT_FOUND_DEFAULTS.title,
24  description = NOT_FOUND_DEFAULTS.description,
25  homeHref,
26  homeLabel,
27  browseHref,
28  browseLabel,
29}: NotFoundProps) {
30  const ref = useRef<HTMLDivElement>(null);
31  const reduce = useReducedMotion();
32  const canHover = useHoverCapable();
33  const enabled = !reduce && canHover;
34 
35  const mx = useMotionValue(50);
36  const my = useMotionValue(50);
37  const mask = useMotionTemplate`radial-gradient(220px circle at ${mx}% ${my}%, #000 25%, transparent 72%)`;
38 
39  const onMove = (e: React.MouseEvent<HTMLDivElement>) => {
40    const el = ref.current;
41    if (!el || !enabled) return;
42    const rect = el.getBoundingClientRect();
43    mx.set(((e.clientX - rect.left) / rect.width) * 100);
44    my.set(((e.clientY - rect.top) / rect.height) * 100);
45  };
46 
47  return (
48    <NotFoundStage className={className}>
49      <motion.div
50        ref={ref}
51        onMouseMove={onMove}
52        className="relative isolate flex aspect-[16/9] w-full max-w-xl items-center justify-center overflow-hidden rounded-3xl border border-border bg-neutral-950"
53      >
54        {/* Dim base layer. */}
55        <span
56          aria-hidden
57          className="select-none font-bold leading-none tracking-tighter text-white/10 [font-size:clamp(5rem,16vw,10rem)]"
58        >
59          {code}
60        </span>
61        {/* Bright layer, revealed only under the spotlight. */}
62        <motion.h1
63          aria-label={code}
64          style={enabled ? { WebkitMaskImage: mask, maskImage: mask } : undefined}
65          className={cn(
66            "absolute select-none font-bold leading-none tracking-tighter text-white [font-size:clamp(5rem,16vw,10rem)]",
67            !enabled && "text-white/90",
68          )}
69        >
70          <span aria-hidden>{code}</span>
71        </motion.h1>
72      </motion.div>
73 
74      <div className="flex flex-col items-center gap-2">
75        <p className="text-lg font-semibold text-foreground">{title}</p>
76        <p className="max-w-sm text-sm text-muted-foreground">{description}</p>
77      </div>
78 
79// … truncated