FlipHover

Component 129

About

A card component that performs a 3D flip animation on hover, rotating 180 degrees * around the Y-axis while translating upward.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds FlipHover to your project and fits it to your theme.

Code

How FlipHover is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import FlipHover from "@/components/ui/flip-hover";

export default function DemoOne() {
  return (
    <div className='p-10 flex h-screen justify-center items-center'>
      <FlipHover
      imageUrl='https://cdn.21st.dev/assets/mirror/f6/f6c87dd07b72bb6a5b82237908aff634aae327b257e7e3d91c1e3a70bdacce66.jpg'
       />
    </div>
  )
}