Feedback & Interaction · What a tap feels like
Glare sheen高光扫过
- material
- responsive
- restrained
On entry a slanted band of light sweeps across while a small patch under the pointer lifts. No layout, no colour change — just a surface that reflects, which turns a card into a thing with thickness.
When to use it
For cards that already have material and want to say “this is a surface”: product cards, member cards, image tiles. Avoid it on text-heavy cards, where a band of light interrupts reading, and do not let it loop — one sweep answers the pointer arriving, and a permanent sweep is decoration. Keep the band narrow and slanted: a straight, full-width band reads as loading.
Parameters
78px slanted band · 760ms sweep cubic-bezier(0.3, 0, 0.2, 1) · skewX −16° · 150px pointer spot, 150ms follow
Recipe
Glare sheen → 760ms cubic-bezier(0.3, 0, 0.2, 1)Glare sheen → 78px slanted band · 760ms sweep cubic-bezier(0.3, 0, 0.2, 1) · skewX −16° · 150px pointer spot, 150ms follow
One sentence for your AI
Build a glare sheen: overlay a 78px-wide band of light slanted 16 degrees across the card (a linear gradient that is transparent at both ends and 62% white in the middle) and sweep it from left to right the moment the pointer enters, over 760ms with a little easing at each end. Add a second, 150px radial spot centred on the pointer, fading in and out with a 150ms first-order follow and tracking the pointer’s position live. Both layers need pointer-events: none, and the card needs overflow: hidden so the light stays inside it. While the pointer is away, sweep on its own every 2.2 seconds as a hint that this is worth hovering.