Skip to content

Commit 39ae613

Browse files
mmaxencemmaxence
committed
Add extreme morphing and randomness to avatar animations
Extreme Morphing & Randomness Features: Reward = Time: - 9 keyframes with complex transformations - Scale: 0.7 to 1.3 with dramatic variations - Rotation: ±25° with random-like patterns - Position: x/y translation for morphing effect - Opacity: 0.4 to 1.0 for depth changes - Duration: 3.2s vs 2.7s for organic feel Playful: - 11 keyframes for maximum chaos - Scale: 0.3 to 1.7 with extreme variations - Rotation: ±50° for wild spinning - Skew: ±12° for distortion effects - Position: ±5px for fluid movement - Opacity: 0.2 to 1.0 for dramatic changes - Duration: 1.8s vs 1.5s for rapid morphing Scalable: - 11 keyframes with fluid transformations - Scale: 0.4 to 1.6 with growth patterns - Rotation: ±40° for organic movement - Skew: ±15° for liquid-like distortion - Position: ±4px for flowing motion - Opacity: 0.3 to 1.0 for breathing effect - Duration: 3.5s vs 2.8s for slow morphing All animations now feature: - Multiple transformation properties (scale, rotate, x, y, skewX, skewY) - Irregular timing with custom 'times' arrays - Dramatic value ranges for maximum visual impact - Complex keyframe sequences (9-11 points) - Organic, unpredictable movement patterns
1 parent 6ad9962 commit 39ae613

File tree

1 file changed

+56
-32
lines changed

1 file changed

+56
-32
lines changed

‎src/components/Avatar.tsx‎

Lines changed: 56 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -27,88 +27,112 @@ const BUZZVIL_VALUE_COLORS = {
2727
// Buzzvil Design Principles - 3 distinct, smooth animations
2828
const BUZZVIL_PRINCIPLE_ANIMATIONS = {
2929
'reward-time': {
30-
// Animation 1: Organic breathing pattern with varied timing
30+
// Animation 1: Complex morphing with random-like patterns
3131
color1: {
3232
animate: {
33-
scale: [1, 1.15, 0.95, 1.08, 1],
34-
opacity: [1, 0.8, 1, 0.9, 1],
33+
scale: [1, 1.2, 0.8, 1.3, 0.7, 1.15, 0.9, 1.1, 1],
34+
opacity: [1, 0.6, 1, 0.4, 1, 0.8, 0.9, 0.7, 1],
35+
rotate: [0, 12, -8, 20, -15, 10, -5, 18, 0],
36+
x: [0, 2, -1, 3, -2, 1, -1, 2, 0],
37+
y: [0, -1, 2, -2, 1, -1, 2, -1, 0],
3538
},
3639
transition: {
37-
duration: 2.3,
40+
duration: 3.2,
3841
repeat: Infinity,
3942
ease: "easeInOut" as const,
40-
times: [0, 0.3, 0.6, 0.8, 1]
43+
times: [0, 0.15, 0.3, 0.45, 0.6, 0.7, 0.8, 0.9, 1]
4144
}
4245
},
4346
color2: {
4447
animate: {
45-
scale: [1, 0.85, 1.1, 0.9, 1],
46-
opacity: [1, 0.9, 0.7, 1, 0.8],
48+
scale: [1, 0.7, 1.25, 0.6, 1.4, 0.8, 1.2, 0.9, 1],
49+
opacity: [1, 0.8, 0.3, 1, 0.5, 0.9, 0.6, 0.8, 1],
50+
rotate: [0, -18, 15, -25, 12, -8, 22, -12, 0],
51+
x: [0, -2, 1, -3, 2, -1, 1, -2, 0],
52+
y: [0, 1, -2, 2, -1, 1, -2, 1, 0],
4753
},
4854
transition: {
49-
duration: 1.9,
55+
duration: 2.7,
5056
repeat: Infinity,
5157
ease: "easeOut" as const,
52-
delay: 0.4,
53-
times: [0, 0.25, 0.55, 0.75, 1]
58+
delay: 0.6,
59+
times: [0, 0.2, 0.35, 0.5, 0.65, 0.75, 0.85, 0.95, 1]
5460
}
5561
}
5662
},
5763
'playful': {
58-
// Animation 2: Chaotic playful dance with unpredictable patterns
64+
// Animation 2: Wild chaotic morphing with extreme randomness
5965
color1: {
6066
animate: {
61-
scale: [1, 1.2, 0.8, 1.3, 0.9, 1.1, 1],
62-
rotate: [0, 15, -10, 25, -5, 20, 0],
63-
opacity: [1, 0.6, 1, 0.7, 0.9, 0.8, 1],
67+
scale: [1, 1.4, 0.6, 1.6, 0.4, 1.3, 0.7, 1.5, 0.8, 1.2, 1],
68+
rotate: [0, 35, -25, 45, -30, 20, -40, 30, -15, 25, 0],
69+
opacity: [1, 0.3, 1, 0.2, 1, 0.6, 0.8, 0.4, 1, 0.7, 1],
70+
x: [0, 4, -3, 5, -4, 2, -2, 3, -1, 2, 0],
71+
y: [0, -3, 4, -5, 3, -2, 2, -3, 1, -2, 0],
72+
skewX: [0, 8, -6, 12, -8, 4, -4, 6, -2, 4, 0],
73+
skewY: [0, -6, 8, -10, 6, -3, 3, -5, 2, -3, 0],
6474
},
6575
transition: {
66-
duration: 1.2,
76+
duration: 1.8,
6777
repeat: Infinity,
6878
ease: "easeOut" as const,
69-
times: [0, 0.2, 0.4, 0.6, 0.8, 0.9, 1]
79+
times: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]
7080
}
7181
},
7282
color2: {
7383
animate: {
74-
scale: [1, 0.9, 1.25, 0.75, 1.15, 0.85, 1],
75-
rotate: [0, -20, 12, -18, 8, -15, 0],
76-
opacity: [1, 0.8, 0.5, 1, 0.6, 0.9, 1],
84+
scale: [1, 0.5, 1.5, 0.3, 1.7, 0.6, 1.4, 0.4, 1.6, 0.8, 1],
85+
rotate: [0, -40, 30, -50, 35, -25, 45, -35, 20, -30, 0],
86+
opacity: [1, 0.7, 0.2, 1, 0.3, 0.8, 0.5, 1, 0.4, 0.9, 1],
87+
x: [0, -4, 3, -5, 4, -2, 2, -3, 1, -2, 0],
88+
y: [0, 3, -4, 5, -3, 2, -2, 3, -1, 2, 0],
89+
skewX: [0, -8, 6, -12, 8, -4, 4, -6, 2, -4, 0],
90+
skewY: [0, 6, -8, 10, -6, 3, -3, 5, -2, 3, 0],
7791
},
7892
transition: {
79-
duration: 1.1,
93+
duration: 1.5,
8094
repeat: Infinity,
8195
ease: "easeIn" as const,
82-
delay: 0.2,
83-
times: [0, 0.15, 0.35, 0.55, 0.75, 0.85, 1]
96+
delay: 0.3,
97+
times: [0, 0.12, 0.22, 0.32, 0.42, 0.52, 0.62, 0.72, 0.82, 0.92, 1]
8498
}
8599
}
86100
},
87101
'scalable': {
88-
// Animation 3: Organic growth pattern with natural variations
102+
// Animation 3: Complex morphing with fluid-like transformations
89103
color1: {
90104
animate: {
91-
scale: [1, 1.12, 0.96, 1.18, 0.94, 1.08, 1],
92-
opacity: [1, 0.85, 1, 0.75, 1, 0.9, 1],
105+
scale: [1, 1.3, 0.7, 1.5, 0.5, 1.4, 0.8, 1.2, 0.9, 1.1, 1],
106+
opacity: [1, 0.4, 1, 0.3, 1, 0.6, 0.8, 0.5, 1, 0.7, 1],
107+
rotate: [0, 25, -20, 35, -25, 15, -30, 20, -10, 15, 0],
108+
x: [0, 3, -2, 4, -3, 1, -2, 2, -1, 1, 0],
109+
y: [0, -2, 3, -4, 2, -1, 2, -2, 1, -1, 0],
110+
skewX: [0, 10, -8, 15, -10, 5, -5, 8, -3, 5, 0],
111+
skewY: [0, -8, 10, -12, 8, -4, 4, -6, 2, -4, 0],
93112
},
94113
transition: {
95-
duration: 2.8,
114+
duration: 3.5,
96115
repeat: Infinity,
97116
ease: "easeInOut" as const,
98-
times: [0, 0.2, 0.4, 0.6, 0.8, 0.9, 1]
117+
times: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]
99118
}
100119
},
101120
color2: {
102121
animate: {
103-
scale: [1, 0.88, 1.14, 0.92, 1.16, 0.86, 1],
104-
opacity: [1, 0.9, 0.7, 1, 0.8, 0.95, 1],
122+
scale: [1, 0.6, 1.4, 0.4, 1.6, 0.7, 1.3, 0.5, 1.5, 0.8, 1],
123+
opacity: [1, 0.8, 0.3, 1, 0.4, 0.9, 0.6, 1, 0.5, 0.8, 1],
124+
rotate: [0, -30, 25, -40, 30, -20, 35, -25, 15, -20, 0],
125+
x: [0, -3, 2, -4, 3, -1, 2, -2, 1, -1, 0],
126+
y: [0, 2, -3, 4, -2, 1, -2, 2, -1, 1, 0],
127+
skewX: [0, -10, 8, -15, 10, -5, 5, -8, 3, -5, 0],
128+
skewY: [0, 8, -10, 12, -8, 4, -4, 6, -2, 4, 0],
105129
},
106130
transition: {
107-
duration: 2.1,
131+
duration: 2.8,
108132
repeat: Infinity,
109133
ease: "easeOut" as const,
110-
delay: 0.5,
111-
times: [0, 0.18, 0.38, 0.58, 0.78, 0.88, 1]
134+
delay: 0.7,
135+
times: [0, 0.15, 0.25, 0.35, 0.45, 0.55, 0.65, 0.75, 0.85, 0.95, 1]
112136
}
113137
}
114138
},

0 commit comments

Comments
 (0)