🎴 Interactive Cards
Інтерактивні картки з 3D ефектами, розкриттям та морфінгом.
🔄 FlipCard
3D flip картка з front і back контентом. Horizontal або vertical flip.
Hover - Horizontal
Click - Vertical
Profile Card
Props:
trigger: 'hover' | 'click'direction: 'horizontal' | 'vertical'front: ReactNode- Front contentback: ReactNode- Back content
🎁 RevealCard
Картка з прихованим контентом що розкривається з preview.
Hover Reveal
Secret Recipe
🍪
Cookies
Hover to see recipe
Ingredients:
- • 2 cups flour
- • 1 cup sugar
- • 1/2 cup butter
- • 2 eggs
Click Reveal
Surprise Box
🎁
Gift Box
Click to open
🎉✨🎈
Congratulations!
You won a prize!
Info Card
Features
📋
Features
See details
- ✅ Responsive
- ✅ TypeScript
- ✅ Accessible
- ✅ Customizable
Props:
title: string- Card titletrigger: 'hover' | 'click'preview: ReactNode- Preview contentcontent: ReactNode- Hidden content
🎭 MorphCard
Картка-карусель що змінює контент та колір. AutoPlay режим.
Auto Play (3s)
☀️
Day Mode
Day Mode
Manual Control
UI Design
Modern interfaces
Props:
autoPlay?: boolean- Auto play modeinterval?: number- Auto play interval (ms)states: Array<{color: string, content: ReactNode}>
Usage Examples
FlipCard
<FlipCard
trigger="hover"
direction="horizontal"
front={<div>Front content</div>}
back={<div>Back content</div>}
/>RevealCard
<RevealCard
title="Secret"
trigger="hover"
preview={<div>Preview content</div>}
content={<div>Hidden content</div>}
/>MorphCard
<MorphCard
autoPlay
interval={3000}
states={[
{ color: '#fef08a', content: <div>State 1</div> },
{ color: '#a5f3fc', content: <div>State 2</div> },
{ color: '#fda4af', content: <div>State 3</div> },
]}
/>