Card Shine

October 2026

A dark feature card with a light sweep that crosses it on hover.

Inspired by ibelick

Global Connectivity

Illuminate your online presence with our enhanced global connectivity options.

components/card.tsx

import { Globe } from "lucide-react";

export function Card({}) {
  return (
    <div className="w-80 rounded-3xl border border-neutral-800 bg-neutral-950 p-8 text-white shadow-2xl relative overflow-hidden group">
      <div className="pointer-events-none absolute inset-0 -translate-x-full bg-linear-to-r from-transparent via-white/10 to-transparent transition-transform duration-700 group-hover:translate-x-full -skew-x-12"></div>
      <Globe className="mb-6 size-8 text-neutral-400" strokeWidth={1.5} />
      <h3 className="mb-2 font-medium tracking-tight text-neutral-100">
        Global Connectivity
      </h3>
      <p className="text-sm text-neutral-400">
        Illuminate your online presence with our enhanced global connectivity
        options.
      </p>
    </div>
  );
}

Notes

The shine is a skewed white-to-transparent gradient parked off the left edge (-translate-x-full), then slid across on group-hover.
overflow-hidden on the card clips the gradient, so it only shows while it crosses the card.
pointer-events-none keeps the overlay from stealing hovers or clicks from the content underneath.
Only transform animates, so the browser can run it on the GPU without repainting the card.