File size: 2,660 Bytes
4724c43
2f67ecf
 
 
5e98b5a
2f67ecf
 
 
5e98b5a
2f67ecf
 
 
 
5e98b5a
2f67ecf
ace64e6
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4724c43
 
 
 
ace64e6
4724c43
ace64e6
4724c43
ace64e6
 
4724c43
ace64e6
deb8696
4724c43
ace64e6
 
4724c43
ace64e6
4724c43
ace64e6
4724c43
ace64e6
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
import type { Variants, TargetAndTransition } from 'framer-motion';

export const fadeUp: Variants = {
  hidden: { opacity: 0, y: 24 },
  show:   { opacity: 1, y: 0, transition: { duration: 0.35, ease: [0.25, 1, 0.5, 1] as const } },
};

export const stagger: Variants = {
  show: { transition: { staggerChildren: 0.06 } },
};

export const fadeIn: Variants = {
  hidden: { opacity: 0 },
  show:   { opacity: 1, transition: { duration: 0.25 } },
};

// ─── Entrance reveal ─────────────────────────────────────────────────────────

export const reveal: Variants = {
  hidden: { opacity: 0, y: 32, filter: 'blur(6px)' },
  show: {
    opacity: 1,
    y: 0,
    filter: 'blur(0px)',
    transition: { duration: 0.5, ease: [0.25, 1, 0.5, 1] as const },
  },
};

export const zoomIn: Variants = {
  hidden: { opacity: 0, scale: 0.96 },
  show:   { opacity: 1, scale: 1, transition: { duration: 0.4, ease: [0.25, 1, 0.5, 1] as const } },
};

export const slideInLeft: Variants = {
  hidden: { opacity: 0, x: -28 },
  show:   { opacity: 1, x: 0, transition: { duration: 0.4, ease: [0.25, 1, 0.5, 1] as const } },
};

export const slideInRight: Variants = {
  hidden: { opacity: 0, x: 28 },
  show:   { opacity: 1, x: 0, transition: { duration: 0.4, ease: [0.25, 1, 0.5, 1] as const } },
};

// ─── Hover / microinteraction presets ────────────────────────────────────────
// Springs (critically damped, bounce 0) so hover/press is interruptible and
// velocity-aware β€” per apple-design Β§3–§4. Bounce is reserved for momentum.

export const cardHover: TargetAndTransition = { y: -2, transition: { type: 'spring', bounce: 0, duration: 0.35 } };

export const hoverLift: TargetAndTransition = {
  y: -4,
  transition: { type: 'spring', bounce: 0, duration: 0.35 },
};

export const hoverGlow: TargetAndTransition = {
  y: -3,
  boxShadow: '0 10px 32px rgba(74, 222, 128, 0.14)',
  transition: { type: 'spring', bounce: 0, duration: 0.35 },
};

export const tapScale: TargetAndTransition = { scale: 0.98, transition: { type: 'spring', bounce: 0, duration: 0.25 } };

export const press: TargetAndTransition = {
  scale: 0.97,
  transition: { type: 'spring', bounce: 0, duration: 0.25 },
};

export const microPop: Variants = {
  rest: { scale: 1 },
  hover: { scale: 1.03, transition: { type: 'spring', stiffness: 400, damping: 22 } },
  tap: { scale: 0.96 },
};

export const staggerFast: Variants = {
  show: { transition: { staggerChildren: 0.045 } },
};