e3d164e9d2
- Add framer-motion page transitions and AnimatePresence support - Add dark mode support across all components - Create reusable UI components (Button, Badge, Card, EmptyState, Input, Toast, Skeleton) - Add CSS custom properties for consistent theming - Add animation variants and utility functions - Improve ChatArea, Sidebar, TriggersPanel with animations Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
63 lines
1.3 KiB
TypeScript
63 lines
1.3 KiB
TypeScript
import { Variants, Transition } from 'framer-motion';
|
|
|
|
// Page transition animations
|
|
export const pageVariants: Variants = {
|
|
initial: { opacity: 0, y: 10 },
|
|
animate: { opacity: 1, y: 0 },
|
|
exit: { opacity: 0, y: -10 },
|
|
};
|
|
|
|
// List item stagger animations
|
|
export const listItemVariants: Variants = {
|
|
hidden: { opacity: 0, x: -10 },
|
|
visible: { opacity: 1, x: 0 },
|
|
};
|
|
|
|
// Container stagger animations
|
|
export const containerVariants: Variants = {
|
|
hidden: { opacity: 0 },
|
|
visible: {
|
|
opacity: 1,
|
|
transition: {
|
|
staggerChildren: 0.05,
|
|
},
|
|
},
|
|
exit: {
|
|
opacity: 0,
|
|
transition: {
|
|
duration: 0.1,
|
|
},
|
|
},
|
|
};
|
|
|
|
// Fade in animations
|
|
export const fadeInVariants: Variants = {
|
|
initial: { opacity: 0 },
|
|
animate: { opacity: 1 },
|
|
exit: { opacity: 0 },
|
|
};
|
|
|
|
// Button tap animation
|
|
export const buttonTap = { scale: 0.98 };
|
|
|
|
// Card hover animation
|
|
export const cardHover = { y: -2, boxShadow: '0 10px 25px -5px rgb(0 0 0 / 0.1)' };
|
|
|
|
// Default transition config
|
|
export const defaultTransition: Transition = {
|
|
duration: 0.2,
|
|
ease: [0.4, 0, 0.2, 1],
|
|
};
|
|
|
|
// Fast transition
|
|
export const fastTransition: Transition = {
|
|
duration: 0.15,
|
|
ease: [0.4, 0, 0.2, 1],
|
|
};
|
|
|
|
// Slow transition
|
|
export const slowTransition: Transition = {
|
|
duration: 0.3,
|
|
ease: [0.4, 0, 0.2, 1],
|
|
};
|