Two-sided card with a 3D flip animation. Define the front and back snippets — each receives a flip() function for internal control.
Flipping can be driven by hover, click, or externally via bind:flipped.
Default mode — entering and leaving each toggle the flipped state. Keep the initial state false for the usual front-on-leave behavior.
Hover the card to flip!
Success! 🎉
Set trigger="manual" and bind flipped to control the state from outside the card.
Each snippet receives a flip() function as its first parameter — use it to trigger the flip from within the card's content.
This card is not interactive.
Click the button to flip back.
The follow prop adds a 3D tilt and brightness shift as the mouse moves over the card.
Move your mouse over the card.
The card follows your mouse!