Flip Card
3D rotateY flip using CSS preserve-3d and GSAP for precise control.
Component Showcase
Interactive Playground
Adjust sliders and values to preview changes in real-time
width
The width of the flip card.
height
The height of the flip card.
frontTitle
The title shown on the front of the card. Customize this prop for your front text.
frontCategory
Small category text on the front face.
frontHint
Helper action text on the front face.
backTitle
The title shown on the back of the card after flipping.
backHint
Helper action text on the back face.
backEmoji
Emoji icon displayed on the back face.
API Reference (Props)
Component properties and type specifications
| Prop | Type | Default | Description |
|---|---|---|---|
| width | string | number | 260 | The width of the flip card. |
| height | string | number | 180 | The height of the flip card. |
| frontTitle | string | "Flip Card" | The title shown on the front of the card. Customize this prop for your front text. |
| frontCategory | string | "Component / Card" | Small category text on the front face. |
| frontHint | string | "Click to reveal >" | Helper action text on the front face. |
| backTitle | string | "Surprise!" | The title shown on the back of the card after flipping. |
| backHint | string | "Click again to flip back" | Helper action text on the back face. |
| backEmoji | string | "🍉" | Emoji icon displayed on the back face. |