Chroma Card

3D tilt card with a hue-shifting holographic sheen and chromatic fringing.

motionhover3D

Holo pass

Tilt me — the sheen shifts hue with the pointer.

#0042Rare

Customize

Sheen strength0.55

Hue travel220°

How far the sheen hue shifts across the card.

RGB shift5px

Specular glare

Tilt10°

Hover scale1.03

Settle duration0.5s

Corner radius20px

Drop glow

Glow color

Prop	Type	Default	Description
`tilt`	`number`	`10`	Max tilt toward the pointer, in degrees.
`scale`	`number`	`1.03`	Scale applied while hovered.
`rgbShift`	`number`	`5`	Chromatic red/cyan fringe offset on hover, in pixels.
`sheen`	`number`	`0.55`	Holographic sheen strength (0–1).
`hueRange`	`number`	`220`	How far the sheen hue travels with the pointer, in degrees.
`radius`	`number`	`20`	Corner radius in pixels.
`glare`	`boolean`	`true`	Pointer-tracking specular highlight.
`glow`	`boolean`	`true`	Soft colored drop glow beneath the card while hovered.
`glowColor`	`string`	`"var(--brand)"`	Glow color (any CSS color).
`duration`	`number`	`0.5`	Settle transition on pointer enter/leave, in seconds.
`children`*	`ReactNode`	`—`	Card content.