SVG Mask Effect | 内容反色遮罩

"use client"; import * as React from "react"; type MaskState = {  x: number;  y: number;  active: boolean;}; function pointerPosition(event: React.PointerEvent<HTMLElement>) {  const rect = event.currentTarget.getBoundingClientRect();  return {    x: event.clientX - rect.left,    y: event.clientY - rect.top,  };} const contentPoints = ["Same content", "Hover inversion", "No zoom bubble"]; function MaskContent({ variant }: { variant: "base" | "mask" }) {  const isMask = variant === "mask";  const eyebrowClassName = isMask    ? "text-background/70"    : "text-muted-foreground";  const titleClassName = isMask ? "text-background" : "text-foreground";  const bodyClassName = isMask ? "text-background/75" : "text-muted-foreground";  const pointClassName = isMask    ? "border-background/20 bg-background/10 text-background/80"    : "border-border bg-muted/40 text-muted-foreground";   return (    <div className="max-w-md text-center">      <p        className={`text-xs font-medium uppercase tracking-[0.18em] ${eyebrowClassName}`}      >        Inversion mask      </p>      <h3        className={`mt-3 text-2xl font-semibold leading-tight ${titleClassName}`}      >        One content stack rendered twice, aligned for an inverted hover        highlight.      </h3>      <p className={`mt-3 text-sm leading-6 ${bodyClassName}`}>        The mask layer keeps the same words as the base layer. Hover only flips        the color under the pointer instead of tinting the whole panel.      </p>      <div className="mt-5 grid gap-2 sm:grid-cols-3">        {contentPoints.map((point) => (          <span            className={`rounded-md border px-3 py-2 text-xs font-medium ${pointClassName}`}            key={point}          >            {point}          </span>        ))}      </div>    </div>  );} export function SvgMaskReveal() {  const [mask, setMask] = React.useState<MaskState>({    x: 240,    y: 150,    active: false,  });   const highlightRadius = 44;  const maskImage = mask.active    ? `radial-gradient(circle ${highlightRadius}px at ${mask.x}px ${mask.y}px, black 0%, black 56%, transparent 76%)`    : "linear-gradient(transparent, transparent)";  const maskStyle: React.CSSProperties = {    WebkitMaskImage: maskImage,    maskImage,  };   return (    <div className="rounded-card border border-border bg-background p-2 shadow-soft">      <div        className="relative min-h-[360px] overflow-hidden rounded-card border border-border bg-card outline-none focus-visible:ring-2 focus-visible:ring-ring"        aria-label="SVG mask color inversion demo"        onBlur={() => setMask((current) => ({ ...current, active: false }))}        onFocus={() => setMask({ x: 240, y: 170, active: true })}        onPointerEnter={(event) =>          setMask({ ...pointerPosition(event), active: true })        }        onPointerLeave={() =>          setMask((current) => ({ ...current, active: false }))        }        onPointerMove={(event) =>          setMask({ ...pointerPosition(event), active: true })        }        role="group"        tabIndex={0}      >        <div          className="absolute inset-0 flex items-center justify-center p-6"          data-svg-mask-base        >          <MaskContent variant="base" />        </div>        <div          aria-hidden="true"          className={`pointer-events-none absolute inset-0 flex items-center justify-center bg-foreground p-6 text-background transition-opacity duration-200 ${            mask.active ? "opacity-100" : "opacity-0"          }`}          data-svg-mask-layer          style={maskStyle}        >          <MaskContent variant="mask" />        </div>      </div>    </div>  );} export default SvgMaskReveal;