Hover Effects

1import { cva } from "class-variance-authority";
2 
3/**
4 * Shared hover effect variants for all Sistine components
5 *
6 * Effects:
7 * - none: No hover effect
8 * - glow: Themed glow shadow (--glass-glow, follows the tint hue) that intensifies on hover
9 * - shimmer: Moving shimmer effect across the component
10 * - ripple: Ripple effect that scales outward on hover
11 * - lift: Subtle lift effect with shadow increase
12 * - scale: Scale up slightly on hover
13 */
14export const hoverEffects = cva("transition duration-300", {
15  variants: {
16    hover: {
17      none: "",
18      glow: "glass-glow hover:glass-glow-lg",
19      shimmer:
20        "relative overflow-hidden before:absolute before:inset-0 before:-translate-x-full before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent hover:before:translate-x-full before:transition-transform before:duration-1000",
21      ripple:
22        "relative overflow-hidden after:absolute after:inset-0 after:scale-0 after:rounded-full after:bg-white/30 after:transition-transform after:duration-500 hover:after:scale-150",
23      lift: "hover:-translate-y-1 hover:shadow-lg",
24      scale: "hover:scale-105",
25    },
26  },
27  defaultVariants: {
28    hover: "none",
29  },
30});
31 
32export type HoverEffect = "none" | "glow" | "shimmer" | "ripple" | "lift" | "scale";