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.
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>
);
}