Tilted Card

Animations

3D tilting card effect that follows mouse movement.

Import

import { PixelTiltedCard } from "@/components/ui/pixel/animations/pixel-tilted-card"

Usage

This effect is not optimized for mobile. Check on desktop.
Tilted card image

Component Source

Copy and paste the following code into your project at /src/components/ui/pixel/animations/pixel-tilted-card.tsx

"use client";

import * as React from "react";
import TiltedCard from "@/components/TiltedCard";

export function PixelTiltedCard(props: any) {
  return (
    <div className="pixel-animation-wrapper">
      <TiltedCard {...props} />
    </div>
  );
}

export default PixelTiltedCard;

Accessibility

This component is built with accessibility in mind, including proper ARIA attributes, keyboard navigation, and focus management.