GlareSurface
A diagonal sheen that sweeps a surface on hover.
@luc/ui/motionLive preview
A sheen that reads as reflection across the content; the peak opacity stays in the low teens on purpose.
Drawdown control
Half the risk, the same breadth.
<GlareSurface size={260} opacity={0.11} tone="light" />Other configurations
The same primitive, arranged differently. Each snippet is printed from the props its preview above was rendered with.
A tight, brighter highlight
A small radius reads as a point of light, and only at this size does the brighter opacity stay tasteful.
Drawdown control
Half the risk, the same breadth.
<GlareSurface size={120} opacity={0.2} tone="light" />Accent tone, wide and soft
The widest and faintest setting, carrying the theme accent instead of white.
Drawdown control
Half the risk, the same breadth.
<GlareSurface size={420} opacity={0.08} tone="accent" softness={70} />Usage
import { GlareSurface } from "@luc/ui/motion";<GlareSurface size={260} opacity={0.11} tone="light" />API
| Export | Kind | Signature |
|---|---|---|
GlareSurface | 4 documented props | ({ className, children, size, opacity, tone, softness, ...props }: GlareSurfaceProps) => import("@types/react").JSX.Element |
GlareSurface props
Type: GlareSurfaceProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
opacity? | number | undefined | — | Peak opacity of the highlight. Stay in single digits to low teens. |
size? | number | undefined | — | Radius of the highlight, in px. |
softness? | number | undefined | — | Soft edge as a percentage of `size`. |
tone? | "light" | "accent" | undefined | — | `light` adds a white sheen; `accent` uses the theme accent. |
Accessibility
The accessibility contract is the one the primitive underneath the component already honours — the platform element for a control, or the ARIA pattern the component implements — and the Showcase's own pages are scanned for violations with axe.
What happens on the server, and when hydration changes it.
Family
Surfaces
Panels that respond to a pointer, a scroll or a state change.
Related