Card

Usage

Inertial

inertial makes the card follow the pointer and spring back on leave; inertialMaxOffset caps the travel and inertialRebound sets the bounce.

Loading demo...

Variants

plain drops the border and the hover feedback.

Loading demo...

Backgrounds

background picks the surface material from the same values as BaseSurface's mode; refraction is the default and the recommendation.

Loading demo...

specular gives the card a faint light that follows the pointer in dark themes: a 600px white radial light over the surface (6%, gone by 40%), and where it crosses the border, a tighter 240px glint in the ring the border occupies. The light trails the pointer by exponential smoothing, lights up right under the pointer on the way in, and fades out over 240ms on leave; with reduced motion it jumps straight to the pointer. Light themes and high contrast don't draw it, and a dashed border gets no glint. It follows clickable when absent and is off while disabled. Where each value comes from is in Alpha Noise Masks & Specular Tracking.

Loading demo...

Use clickable only for whole-card navigation or selection; put separate actions on real buttons or links inside the slots.
Tune the look with variant, shadow, size, radius, and padding; override CSS variables only to align slot content or the mask color.
For low-level refraction or filter parameters (displace, distortionScale, redOffset, …), use TxBaseSurface.

API Reference

Props

Prop	Type	Default	Description
variant	`'solid' \| 'dashed' \| 'plain'`	`'solid'`	Border style; `plain` has no border and no hover feedback.
background	`'pure' \| 'mask' \| 'blur' \| 'glass' \| 'refraction' \| 'acrylic' \| 'mica' \| 'flat' \| 'plain'`	`'refraction'`	Surface material, the same values as `TxBaseSurface`'s `mode`.
shadow	`'none' \| 'soft' \| 'medium'`	`'none'`	Shadow strength.
size	`'small' \| 'medium' \| 'large'`	`'medium'`	Padding preset: `10` / `12` / `16` px.
radius	`number`	`18`	Corner radius in px.
padding	`number`	-	Padding in px; overrides `size`.
glassBlur	`boolean`	`true`	Enables blur under `glass` / `refraction`.
glassBlurAmount	`number`	`22`	Blur radius in px under `glass` / `refraction`.
glassOverlay	`boolean`	`true`	Enables the highlight layer under `glass` / `refraction`.
glassOverlayOpacity	`number`	`0.18`	Highlight layer opacity.
maskOpacity	`number`	`0.75`	Surface opacity under `mask`, clamped to `0..1`; `acrylic`'s tint takes 0.8 of it.
fallbackMaskOpacity	`number`	`0.26`	Mask opacity (0–1) when the surface falls back during motion.
surfaceMoving	`boolean`	`false`	External motion flag, merged with inertial motion and forwarded to the surface.
refractionStrength	`number`	`62`	Refraction strength (0–100); drives dispersion and distortion.
refractionProfile	`'soft' \| 'filmic' \| 'cinematic'`	`'filmic'`	Refraction style preset.
refractionTone	`'mist' \| 'balanced' \| 'vivid'`	`'vivid'`	Refraction tone preset; `vivid` avoids a gray cast.
refractionAngle	`number`	`-24`	Main dispersion direction in degrees.
refractionLightFollowMouse	`boolean`	`false`	Makes the highlight anchor follow the pointer.
refractionLightFollowIntensity	`number`	`0.45`	Follow weight (0–1) on dispersion angle and strength.
refractionLightSpring	`boolean`	`true`	Springs the light as it follows the pointer.
refractionLightSpringStiffness	`number`	`0.15`	Light spring stiffness, clamped to `0.01–0.55`.
refractionLightSpringDamping	`number`	`0.6`	Light spring damping, clamped to `0.55–0.99`.
flowLight	`'corners' \| 'rim' \| 'aurora' \| false`	-	The flow light on the surface; absent or `false` is off.
flowLightIntensity	`number`	`1`	Flow light strength, multiplying the theme opacity.
clickable	`boolean`	`false`	Enables hover and press feedback (scales to `0.985`) and emits `click`.
specular	`boolean`	-	A faint light that follows the pointer, with a glint along the border, in dark themes; follows `clickable` when absent and is off while disabled.
loading	`boolean`	`false`	Covers the card with a `TxSpinner` overlay.
loadingSpinnerSize	`number`	-	Spinner size in px; `12` when omitted.
disabled	`boolean`	`false`	Disabled styling; blocks `click` and pointer motion.
inertial	`boolean`	`false`	Follows the pointer and springs back on leave.
inertialMaxOffset	`number`	`22`	Maximum follow offset in px.
inertialRebound	`number`	`0.12`	Rebound factor, clamped to `0..1`; higher is bouncier.

Events

Event	Params	Description
`click`	`(event: MouseEvent)`	Fires on click, Enter, or Space when the card is clickable and not disabled.

Slots

Slot	Props	Description
`default`	-	Body content.
`header`	-	Header above the body.
`footer`	-	Footer below the body.
`cover`	-	Cover before the header and body.

Overview

When clickable, the root gets role="button" and tabindex="0", and Enter / Space fire click; otherwise it is a plain div.
A disabled clickable card sets aria-disabled and leaves the tab order.
Only key presses on the card itself activate it; Enter / Space in slotted controls don't.
The loading overlay is aria-hidden; screen-reader and form-busy announcements are up to the caller.
background is forwarded to TxBaseSurface as the surface mode: mask and acrylic use maskOpacity, and mask, acrylic and mica take --tx-card-fake-background as their base colour; blur and acrylic both blur 30px; glass and refraction use the blur and overlay props; refraction props apply only under refraction.

Technologies

The surface is an aria-hidden TxBaseSurface; inertia is a requestAnimationFrame spring that writes --tx-card-dx / --tx-card-dy and stops once settled.
Source: packages/tuffex/packages/components/src/card/.

查看源码

packages/tuffex/packages/components/src/card/index.ts

Customization

.custom-card {
  /* Base color sampled by mask and refraction fallback surfaces */
  --tx-card-fake-background: color-mix(in srgb, var(--tx-bg-color-overlay, #fff) 92%, transparent);
}

Variable	Written by	Purpose
`--tx-card-radius`	`radius`	Radius of the root. The surface, cover, and loading overlay sit inside the border and take this radius less `--tx-card-border-width`, so their corners stay concentric with the root's.
`--tx-card-border-width`	`variant`	Border width: 1px for `solid` and `dashed`, 0 for `plain`. Do not set it by hand.
`--tx-card-padding`	`padding` or `size`	Padding and the cover's negative margin.
`--tx-card-dx` / `--tx-card-dy`	inertial motion	Root offset; don't set manually.
`--tx-card-fake-background`	caller / theme	Base color of `mask`, `acrylic` and `mica` surfaces and of refraction fallback surfaces.
`--tx-card-light-x` / `--tx-card-light-y`	`specular`	Position of the light, in percent of the card's width and height, written on `.tx-card__specular`; don't set manually.
`--tx-surface-refraction-mask-color`	root inline style	Forwards `--tx-card-fake-background` to `TxBaseSurface`; override that one instead.

To follow an app theme, override global tokens such as --tx-bg-color-overlay, --tx-border-color-light, and --tx-color-primary.

Usage

Basic

Header and Footer

Inertial

Title

Actions

Variants

Backgrounds

Specular light

Empty State

Overlay Panels

Sizes

Padding and Radius

States

Flow light

Best Practices

API Reference

Props

Events

Slots

Overview

Technologies

Customization