KQ-1400 · SHEEN/GLASS

Sheen Glass

A glass glare over any card: a soft streak of light with a brighter core and a faint ghost reflection rides with the hand on a spring between flick and drift, turns toward perpendicular to the way the hand is travelling on springs.glide, and flares with pointer speed on springs.flick before sinking back on springs.drift. On leave it keeps going the way the hand went and slides off the edge while it fades on the exit ease, and a 1 px inner rim catches the light nearest the streak. Keyboard focus inside the card brings the light to the focused control; the card's children are untouched and fully interactive.

KQ-1400 · SHEEN/GLASS

Waylight pass

North Basin

WL 0420 · 2026

Season · Trails and huts

glint · 24° · 80 px · strength 0.60

Open it on the Canvas stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/sheen-glass

Props

children: ReactNode; default —; The card under the glass. Untouched and fully interactive.
angle: number; default 24; The streak's resting lean off vertical, degrees.
width: number; default 80; Width of the soft streak, px; the bright core is a fifth of it.
strength: number; default 0.6; Peak brightness of the glint, 0 to 1.
speedBoost: number; default 0.6; How much a fast hand brightens it, 0 to 1.
steer: number; default 0.5; How far the direction of travel turns the streak, 0 (never) to 1 (fully perpendicular).
lag: number; default 0.35; How loosely the glint trails the hand, 0 (tight) to 1 (lazy).
color: string; default "white"; The light's colour.
core: number; default 0.8; Brightness of the core against the soft streak, 0 to 1.
ghost: number; default 0.3; The faint second reflection beside the streak, 0 to 1.
edge: number; default 0.6; How much the inner border catches the light, 0 to 1.
blend: "screen" | "overlay" | "soft-light" | "normal"; default "screen"; How the light mixes with the card.
intro: boolean; default true; One sweep across the first time the card comes into view.
interval: number; default 0; A sweep every so many ms while on screen; 0 never.
sweepKey: string | number; default —; Change it to send a sweep across now.
disabled: boolean; default false; No glint at all.
className: string; default —; Classes for the card box; its radius is the glass's. Other HTML attributes and handlers pass through.

Prop	Type	Default	Description
children	ReactNode	—	The card under the glass. Untouched and fully interactive.
angle	number	24	The streak's resting lean off vertical, degrees.
width	number	80	Width of the soft streak, px; the bright core is a fifth of it.
strength	number	0.6	Peak brightness of the glint, 0 to 1.
speedBoost	number	0.6	How much a fast hand brightens it, 0 to 1.
steer	number	0.5	How far the direction of travel turns the streak, 0 (never) to 1 (fully perpendicular).
lag	number	0.35	How loosely the glint trails the hand, 0 (tight) to 1 (lazy).
color	string	"white"	The light's colour.
core	number	0.8	Brightness of the core against the soft streak, 0 to 1.
ghost	number	0.3	The faint second reflection beside the streak, 0 to 1.
edge	number	0.6	How much the inner border catches the light, 0 to 1.
blend	"screen" \| "overlay" \| "soft-light" \| "normal"	"screen"	How the light mixes with the card.
intro	boolean	true	One sweep across the first time the card comes into view.
interval	number	0	A sweep every so many ms while on screen; 0 never.
sweepKey	string \| number	—	Change it to send a sweep across now.
disabled	boolean	false	No glint at all.
className	string	—	Classes for the card box; its radius is the glass's. Other HTML attributes and handlers pass through.