Flip Card

Two-faced card that flips in 3D on a click, a drag or a flick, settling on a spring that carries your release velocity, with an optional cursor tilt, a sheen that follows the pointer and a shadow that narrows as it turns edge on.

Default

Click the card, or drag and flick it to turn it over. Hover to see it lean toward the cursor.

Customize

Axis

Flip On ClickDraggable

Drag Distance0

Tilt

Tilt Max12

Glare

Glare Opacity0.22

Hover Scale1.03

Perspective1100

Stiffness170

Damping20

Width300

Height400

Radius22

Background

Color

Shadow

Shadow Color

Shadow Opacity0.45

Disabled

API Reference

FlipCard

Prop	Type	Default	Description
`flipped`	`boolean`	`undefined`	Controlled state, usable with v-model:flipped: true shows the back. Omit it to let the card manage itself.
`defaultFlipped`	`boolean`	`false`	Start on the back face.
`axis`	`'y' \| 'x'`	`'y'`	y turns the card sideways and drags horizontally. x turns it over the top and drags vertically.
`flipOnClick`	`boolean`	`true`	A press without movement flips the card.
`draggable`	`boolean`	`true`	Drag to turn the card by hand. On release it springs to the nearest face, carrying the flick velocity.
`dragDistance`	`number`	`0`	Pixels of drag for a half turn. 0 uses the card width, or its height on the x axis.
`tilt`	`boolean`	`true`	The card leans toward the cursor on hover.
`tiltMax`	`number`	`12`	Largest tilt angle in degrees.
`glare`	`boolean`	`true`	A soft sheen that follows the cursor.
`glareOpacity`	`number`	`0.22`	Strength of the sheen at its centre.
`hoverScale`	`number`	`1.03`	Lift while hovered or held.
`perspective`	`number`	`1100`	Viewing distance in px. Smaller is more dramatic.
`stiffness`	`number`	`170`	Stiffness of the flip spring.
`damping`	`number`	`20`	Damping of the flip spring. Lower overshoots more.
`width`	`number`	`300`	Card width in px, capped at the parent.
`height`	`number`	`400`	Card height in px.
`radius`	`number`	`22`	Corner radius in px.
`background`	`string`	`'#27272a'`	Surface of both faces.
`color`	`string`	`'#f5f5f5'`	Text colour of both faces.
`shadow`	`boolean`	`true`	A soft shadow beneath the card that narrows as it turns edge on.
`shadowColor`	`string`	`'#000000'`	Shadow colour.
`shadowOpacity`	`number`	`0.45`	Shadow strength.
`disabled`	`boolean`	`false`	Dimmed, flat and inert.
`ariaLabel`	`string`	`'Flip card'`	Accessible name. The face is carried by aria-pressed.

Event	Description
`update:flipped`	A click, drag, flick or key landed on the other face, with the new state.
`flip-change`	Same moment as update:flipped.

Slot	Description
`front`	Content of the front face.
`back`	Content of the back face.

Accessibility

Keyboard shortcuts and ARIA behavior.

Shortcut	Description
`Enter` + `Space`	Flips the card.

The card is a button with aria-pressed, and the hidden face is inert and removed from the accessibility tree.
With prefers-reduced-motion the card crossfades between its faces and ignores drag and tilt.

Dodge Field Folder Float