Flip Card

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.


Hover Trigger

Default mode — entering and leaving each toggle the flipped state. Keep the initial state false for the usual front-on-leave behavior.

Front Side

Hover the card to flip!

Back Side

Success! 🎉


External Control

Set trigger="manual" and bind flipped to control the state from outside the card.

Front Side

Back Side


Internal Control via Snippet Param

Each snippet receives a flip() function as its first parameter — use it to trigger the flip from within the card's content.

Front Side

This card is not interactive.

Back Side

Click the button to flip back.


Follow Effect

The follow prop adds a 3D tilt and brightness shift as the mouse moves over the card.

Front Side

Move your mouse over the card.

Back Side

The card follows your mouse!