Shimmer Layer

Buttons

About

Work with any of your UI. Pure CSS to add an animated shimmer effect that activates on hover.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Shimmer Layer to your project and fits it to your theme.

Code

How Shimmer Layer is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { ShimmerLayer } from "@/components/ui/shimmer-layer";

export default function Example() {
    return (
        <div className="h-screen w-full flex items-center justify-center gap-10 bg-slate-50">
            {/*button*/}
            <a
                href="#"
                className="group/shimmer overflow-hidden relative
                px-5 py-3 bg-blue-600 text-white rounded-lg text-sm
                border-t-[2px] border-x-[2px] border-b-[4px] border-black/15
                transition-all duration-300 ease-in-out
                hover:shadow-[0_4px_10px_rgba(0,0,0,0.08)] hover:bg-blue-600/90 hover:border-b-[2px]
                "
            >
                HOVER ON ME
                <ShimmerLayer/>
            </a>


            {/*image*/}
            <div
                className="w-56 aspect-square rounded-full group/shimmer relative overflow-hidden ring-1 ring-slate-300">
                <img src={`https://picsum.photos/400/400?random=${Math.random()}`}
                     alt="Image demo"
                     className="object-cover w-full h-full"/>
                <ShimmerLayer skew={-20} duration={1000} width={15}/>
            </div>

        </div>
    );
}