Flip Card
3D rotateY flip using CSS preserve-3d and GSAP for precise control.
Component Showcase
Flip Card
3D rotateY flip using CSS preserve-3d and GSAP for precise control.
GSAP3DCSS
Choose Installation Method
Select how you want to add this component to your project
Run command in your project root
$ npx @melonui-dev/cli add flip-card
How to import and use
app/page.tsx
import { FlipCard } from "@/components/flip-card";
export default function Page() {
return (
<main className="flex min-h-screen items-center justify-center bg-[#050505] p-8">
<FlipCard />
</main>
);
}AI Automation Agent Prompt
Feed this prompt to Claude, ChatGPT, or Gemini to quickly write custom integrations, layouts, or configure props for this component on your system.
I want to integrate the MelonUI "Flip Card" component into my React/Next.js project.
Component description: "3D rotateY flip using CSS preserve-3d and GSAP for precise control."
CLI Installation command: `npx @melonui-dev/cli add flip-card`
Tags/Technologies used: GSAP, 3D, CSS
Please write a premium, responsive React page component in Next.js that:
1. Imports `FlipCard` from `@/components/flip-card`.
2. Places it inside a visually stunning layout matching a dark-mode, glassmorphism design system.
3. Outlines its props and options with clean code structure and comments.