Tilt Effect

Cards 36

About

Here is Tilt Effect component

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

Code

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

Usage.tsx

import Image from "next/image";

import { TiltEffect } from "@/components/ui/tilt-effect";
import { Card, CardContent } from "@/components/ui/card";

export default function TiltEffectExample() {
  return (
    <TiltEffect>
      <Card className="overflow-hidden pt-0 md:w-[280px]">
        <Image
          src="https://cdn.21st.dev/assets/localized/5aba418e7e3bfa36a2d1f5808dff35fad665a91c6f8c37b9c6863d4c09b215e6.jpg"
          alt=""
          width={200}
          height={200}
          className="aspect-square size-full w-full object-cover transition-all duration-200 ease-linear"
          unoptimized
        />
        <CardContent>
          <div className="text-xl">Red Hat</div>
          <div className="text-muted-foreground text-sm">Best Sellers</div>
        </CardContent>
      </Card>
    </TiltEffect>
  );
}