TiltSurface
Depth from pointer position, bounded so text never becomes unreadable.
@luc/ui/motionLive preview
Eight degrees at most: enough to read as depth, not enough to make the text harder to follow.
Drawdown control
Half the risk, the same breadth.
<TiltSurface max={8} perspective={900} glare />Other configurations
The same primitive, arranged differently. Each snippet is printed from the props its preview above was rendered with.
A lean you have to look for
Three degrees on a wide surface: the card acknowledges the pointer without appearing to move.
Drawdown control
Half the risk, the same breadth.
<TiltSurface max={3} perspective={1200} glare={false} />Glass material, twelve degrees
The loudest setting the library ships, and the only one that also changes the material.
Drawdown control
Half the risk, the same breadth.
<TiltSurface max={12} perspective={700} glare glareTone="accent" material="glass" />Usage
import { TiltSurface } from "@luc/ui/motion";<TiltSurface max={8} perspective={900} glare />API
| Export | Kind | Signature |
|---|---|---|
TiltSurface | 7 documented props | ({ className, children, max, perspective, glare, glareTone, preset, disabled, material, ...props }: TiltSurfaceProps) => import("@types/react").JSX.Element |
TiltSurface props
Type: TiltSurfaceProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
disabled? | boolean | undefined | — | |
glare? | boolean | undefined | — | Render a pointer-following sheen across the surface. |
glareTone? | "light" | "accent" | undefined | — | Glare tone. |
material? | "solid" | "glass" | undefined | — | Surface treatment. `solid` leaves the caller's own background alone; `glass` applies the translucent LUC material (thinned `surface-overlay`, hairline, backdrop blur) so a leaning… |
max? | number | undefined | — | Maximum lean, in degrees, at the edge of the surface. |
perspective? | number | undefined | — | `perspective()` distance, in px. Smaller = more dramatic. |
preset? | SpringPresetName | undefined | — |
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