SurfacesGenerated from the public API
MotionSurface
The base surface every spatial effect is layered on, with the depth rung as a prop.
@luc/ui/motionLive preview
The interaction states are the surface's, so a card does not re-implement hover, focus and selection.
Hover, focus and select states all read from the same surface.
<MotionSurface hover selected>
<Text variant="body">A selectable, hoverable surface.</Text>
</MotionSurface>Usage
import { MotionSurface } from "@luc/ui/motion";<MotionSurface hover selected>
<Text variant="body">A selectable, hoverable surface.</Text>
</MotionSurface>API
| Export | Kind | Signature |
|---|---|---|
MotionSurface | 7 documented props | ({ className, children, hover, selected, highlight, spotlight, radius, as, interactive, style, ...props }: MotionSurfaceProps) => import("@types/react").JSX.Element |
MotionSurface props
Type: MotionSurfaceProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
as? | "div" | "li" | "article" | "section" | undefined | — | |
highlight? | boolean | undefined | — | Show a stronger accent on hover/focus (a focal chart panel). |
hover? | boolean | undefined | — | Lift the surface on hover. Off for dense grids where it reads as jitter. |
interactive? | boolean | undefined | — | |
radius? | "md" | "lg" | "xl" | undefined | — | Corner radius. Must match the content's own radius. |
selected? | boolean | undefined | — | Persistent selected treatment (an accent ring + tinted surface). |
spotlight? | boolean | undefined | — | Let the pointer light the surface. The premium card default. |
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