FancyUI
Saved GitHub Get started
Card — physical flip — preview

Card — physical flip

FancyUI FANCYUI

A card that turns like an object: a highlight crosses the face mid-flip.

#physical#hover

Open docs

Use in FancyUI

Type
Interaction
Interaction
Hover
Style
Physical
Code availability
Open source

Why it works

A glare layer is keyed to the rotation angle, so a highlight sweeps the face as it turns — that is what sells the thickness. The side the pointer enters from sets the direction of the turn.

When to use it

Two-sided content where the back is a bonus: specs behind a product, an answer behind a question.

Things to watch

Hover mode hides the back from touch and keyboard users; use `trigger="click"` (an `aria-pressed` button) when the back carries content. The hidden face is inert. Reduced motion drops the turn.

Implementation clues

  • preserve-3d
  • backface-visibility
  • glare layer keyed to the angle
  • enter side sets direction