Tailwind UI Pattern Registry for humans and agents

shine sweep hover light reflection polish polished hover effect on buttons light sweep on product cards shine reflection on images hover states need more visual feedback want light sweep without JS animation need polished shiny effect on elements

Shine Sweep

Fetch snippet JSON: curl https://webspire.de/snippets/interactions/shine-sweep.json
Format
Shine sweep Specular pass

Card surface

A light streak travels across the plane on hover.

Stage Background
Customize

Quick Start

<button class="shine-sweep bg-indigo-600 px-4 py-2 text-white rounded-lg">Hover me</button>

Details

Tailwind
v4.x
Browser
baseline-2024
A11y
prefers-reduced-motion
Size
662 bytes · 34 lines
Custom Properties
--shine-color--shine-speed
Classes
.shine-sweep
shine sweep hover light reflection polish

A diagonal light streak that sweeps across the element on hover. Works on any element — buttons, cards, images. The sweep runs once per hover.

Shiny button

<button class="shine-sweep bg-indigo-600 px-6 py-3 text-sm font-semibold text-white rounded-xl hover:bg-indigo-500 transition">
  Get started
</button>