Hover Glide Cards

1"use client";2
3import { useEffect, useRef } from "react";4import { CalendarDays, FolderOpen, Mail, NotebookPen } from "lucide-react";5
6const apps = [7  { name: "Calendar", detail: "Plan around your week", icon: CalendarDays },8  { name: "Mail", detail: "Triage every inbox", icon: Mail },9  { name: "Notes", detail: "Draft from meetings", icon: NotebookPen },10  { name: "Files", detail: "Find anything shared", icon: FolderOpen },11];12
13export function HoverGlideCards() {14  const hostRef = useRef<HTMLDivElement>(null);15  const layerRef = useRef<HTMLSpanElement>(null);16  const glideRef = useRef<HTMLSpanElement>(null);17
18  useEffect(() => {19    const host = hostRef.current;20    const layer = layerRef.current;21    const glide = glideRef.current;22    if (!host || !layer || !glide) return;23
24    const tiles = Array.from(host.querySelectorAll("[data-glide-card]"));25    const controller = new AbortController();26    const { signal } = controller;27    let active = -1;28    let shown = false;29
30    // The highlight is only seen through the cards' shapes, so crossing a gap it drains out of one card and fills the next.31    const drawMask = () => {32      const bounds = host.getBoundingClientRect();33      const shapes = tiles34        .map((tile) => {35          const rect = tile.getBoundingClientRect();36          const x = rect.left - bounds.left + host.scrollLeft - host.clientLeft;37          const y = rect.top - bounds.top + host.scrollTop - host.clientTop;38          const radius = parseFloat(getComputedStyle(tile).borderTopLeftRadius) || 0;39          return `<rect x="${x}" y="${y}" width="${rect.width}" height="${rect.height}" rx="${radius}"/>`;40        })41        .join("");42      const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${host.scrollWidth}" height="${host.scrollHeight}">${shapes}</svg>`;43      const image = `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;44      layer.style.width = `${host.scrollWidth}px`;45      layer.style.height = `${host.scrollHeight}px`;46      layer.style.setProperty("mask-image", image);47      layer.style.setProperty("-webkit-mask-image", image);48    };49
50    const place = () => {51      const tile = tiles[active];52      if (!tile) return;53      const bounds = host.getBoundingClientRect();54      const rect = tile.getBoundingClientRect();55      const x = rect.left - bounds.left + host.scrollLeft - host.clientLeft;56      const y = rect.top - bounds.top + host.scrollTop - host.clientTop;57      // The first placement fades in where it lands; sliding in from wherever it last was would read as a glitch.58      if (!shown) glide.style.transition = "opacity 180ms ease";59      glide.style.transform = `translate(${x}px, ${y}px)`;60      glide.style.width = `${rect.width}px`;61      glide.style.height = `${rect.height}px`;62      if (!shown) {63        void glide.offsetWidth;64        glide.style.transition = "";65        shown = true;66      }67      glide.dataset.visible = "";68    };69
70    const hide = () => {71      shown = false;72      delete glide.dataset.visible;73    };74
75    for (const type of ["pointerover", "focusin"]) {76      host.addEventListener(77        type,78        (event) => {79          const tile = event.target instanceof Element ? event.target.closest("[data-glide-card]") : null;80          const index = tile ? tiles.indexOf(tile) : -1;81          if (index < 0) return;82          if (!shown || index !== active) drawMask();83          active = index;84          place();85        },86        { signal },87      );88    }89    host.addEventListener("pointerleave", hide, { signal });90    host.addEventListener(91      "focusout",92      (event) => {93        const inside = event.relatedTarget instanceof Node && host.contains(event.relatedTarget);94        if (!inside && !host.matches(":hover")) hide();95      },96      { signal },97    );98
99    // Cards reflow under a resting pointer when the grid resizes, so the cut-outs and the highlight are measured again.100    const reflow = new ResizeObserver(() => {101      if (!shown) return;102      drawMask();103      place();104    });105    reflow.observe(host);106
107    return () => {108      controller.abort();109      reflow.disconnect();110    };111  }, []);112
113  return (114    <div className="relative grid w-full max-w-[312px] grid-cols-2 gap-[8px]" role="group" aria-label="Workspace apps" ref={hostRef}>115      <span className="pointer-events-none absolute left-0 top-0 z-[1] block [mask-repeat:no-repeat] [-webkit-mask-repeat:no-repeat]" ref={layerRef} aria-hidden="true">116        <span className="pointer-events-none absolute left-0 top-0 block h-0 w-0 rounded-[10px] bg-[light-dark(rgba(20,24,30,.055),rgba(255,255,255,.045))] opacity-0 [transition:transform_.3s_cubic-bezier(.32,.72,0,1),width_.3s_cubic-bezier(.32,.72,0,1),height_.3s_cubic-bezier(.32,.72,0,1),opacity_.18s_ease] data-[visible]:opacity-100 motion-reduce:[transition:opacity_.01ms] [@media(hover:none)]:hidden" ref={glideRef} />117      </span>118      {apps.map((app) => (119        <button type="button" className="m-0 flex min-w-0 cursor-pointer flex-col items-start rounded-[10px] border border-[light-dark(#e3e6eb,#24272d)] bg-[light-dark(#ffffff,#121418)] p-[10px] text-left text-[color:light-dark(#14181e,#f2f4f6)] [font:inherit] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#86b6ff]" data-glide-card="" key={app.name}>120          <span className="mb-[9px] grid size-[24px] place-items-center rounded-[7px] bg-[light-dark(#f0f2f5,#1b1e23)] text-[color:light-dark(#69727f,#868d97)]">121            <app.icon size={14} strokeWidth={1.8} aria-hidden="true" />122          </span>123          <span className="max-w-full truncate text-[12px] font-semibold leading-[16px]">{app.name}</span>124          <span className="mt-[2px] max-w-full truncate text-[11px] leading-[14px] text-[color:light-dark(#69727f,#868d97)]">{app.detail}</span>125        </button>126      ))}127    </div>128  );129}