Interactive 3D Analytics Dashboard Card

Component Features 3D Perspective Effects: Real-time perspective transformation based on mouse position Subtle rotation and scaling on hover for a tactile feel Advanced Visual Design: Animated background gradients with glass morphism Multiple layers creating depth and dimension Beautiful color schemes for both light and dark modes Interactive Data Visualization: Animated bar chart with spring physics Tooltip values on hover Growth indicators with directional icons State Management: Loading state with elegant animated spinner Error state with retry functionality Smooth transitions between states Responsive and Accessible: Fully responsive design that works on all screen sizes Proper contrast ratios for accessibility Interactive elements with appropriate focus states To use this component, you'll need to install: React Tailwind CSS Framer Motion (npm install framer-motion) This component demonstrates modern UI design principles with attention to micro-interactions, performance, and visual depth that creates a premium user experience.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Interactive 3D Analytics Dashboard Card to your project and fits it to your theme.

import AnalyticsDashboardCard from "@/components/ui/interactive-3d-analytics-dashboard-card";

const settings = {
  title: "Revenue Analytics",
  subtitle: "Monthly Performance",
};

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <div className="h-screen w-screen flex items-center justify-center p-6">
      <AnalyticsDashboardCard title={s.title} subtitle={s.subtitle} />
    </div>
  );
}