Shimmer Effect

1"use client";
2 
3import { motion, useReducedMotion } from "motion/react";
4 
5interface ShimmerEffectProps {
6  width?: string | number;
7  height?: string | number;
8  borderRadius?: string | number;
9  /** Seconds for one sweep. */
10  duration?: number;
11  className?: string;
12}
13 
14/**
15 * A loading placeholder with a sweeping highlight.
16 *
17 * Both colours are derived from `currentColor`, so the placeholder works on a
18 * dark surface as well as a light one. The original hardcoded a black base and
19 * a white sweep, which disappeared entirely in dark mode.
20 */
21export function ShimmerEffect({
22  width = "100%",
23  height = "1rem",
24  borderRadius = "0.375rem",
25  duration = 1.5,
26  className = "",
27}: ShimmerEffectProps) {
28  const prefersReducedMotion = useReducedMotion();
29 
30  return (
31    <div
32      style={{ width, height, borderRadius }}
33      className={`relative overflow-hidden bg-current/10 ${className}`}
34      aria-hidden="true"
35    >
36      {prefersReducedMotion ? null : (
37        <motion.div
38          className="size-full"
39          style={{
40            background:
41              "linear-gradient(90deg, transparent 0%, currentColor 50%, transparent 100%)",
42            opacity: 0.18,
43          }}
44          animate={{ x: ["-100%", "100%"] }}
45          transition={{ repeat: Infinity, duration, ease: "linear" }}
46        />
47      )}
48    </div>
49  );
50}
51 
52export default ShimmerEffect;