Shine creates a specular lighting effect that follows the cursor, giving elements a dynamic glossy appearance. Built on SVG filters, it simulates a point light source moving over a surface. Hover any element below to see it in action.
Live Demo
Hover over the cards — the specular highlight follows your cursor.
Primary surface
Secondary tint
Props
| Prop | Type | Default | Description |
|---|---|---|---|
color | string | rgb(var(--primary-500)) | Light color |
radius | number | 300 | Light source height — controls spread |
depth | number | 1 | Gaussian blur depth |
surfaceScale | number | 2 | Surface height for the light filter |
specularConstant | number | 0.75 | Reflection intensity |
specularExponent | number | 120 | Focus of the light source (higher = brighter) |
class | string | — | CSS class forwarded to the wrapper element |
Open in Playground
Adjust all lighting parameters interactively in the Shine playground.