Skip to content

Commit f03f7da

Browse files
mmaxencemmaxence
committed
Add extreme randomness and life to avatar animations
Living Organism Features: Reward = Time - Living, breathing organism: - 13 keyframes with extreme random mutations - Scale: 0.2 to 1.8 with dramatic variations - Rotation: ±65° with chaotic patterns - Position: ±8px for fluid movement - Skew: ±25° for organic distortion - ScaleX/Y: Independent scaling for shape morphing - Opacity: 0.05 to 1.0 for dramatic breathing Playful - Chaotic living entity: - 15 keyframes with extreme random mutations - Scale: 0.1 to 2.1 with wild variations - Rotation: ±90° for maximum chaos - Position: ±12px for fluid movement - Skew: ±35° for extreme distortion - ScaleX/Y: Independent scaling for shape morphing - RotateX/Y: 3D rotation for depth - Opacity: 0.05 to 1.0 for dramatic changes Scalable - Living organism with organic growth: - 17 keyframes with organic growth patterns - Scale: 0.2 to 2.0 with growth mutations - Rotation: ±70° for organic movement - Position: ±9px for flowing motion - Skew: ±30° for liquid-like distortion - ScaleX/Y: Independent scaling for shape morphing - RotateX/Y/Z: Full 3D rotation for depth - Opacity: 0.05 to 1.0 for breathing effect All animations now feature: - Extreme value ranges for maximum visual impact - Multiple transformation properties (scale, rotate, x, y, skewX, skewY, scaleX, scaleY, rotateX, rotateY, rotateZ) - Complex keyframe sequences (13-17 points) - Organic, unpredictable movement patterns - Living, breathing organism feel - Random mutations and shape changes - Truly alive and dynamic animations
1 parent d8e4214 commit f03f7da

File tree

1 file changed

+73
-47
lines changed

1 file changed

+73
-47
lines changed

‎src/components/Avatar.tsx‎

Lines changed: 73 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -27,112 +27,138 @@ const BUZZVIL_VALUE_COLORS = {
2727
// Buzzvil Design Principles - 3 distinct, smooth animations
2828
const BUZZVIL_PRINCIPLE_ANIMATIONS = {
2929
'reward-time': {
30-
// Animation 1: Complex morphing with random-like patterns
30+
// Animation 1: Living, breathing organism with random mutations
3131
color1: {
3232
animate: {
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],
33+
scale: [1, 1.4, 0.5, 1.6, 0.3, 1.3, 0.7, 1.5, 0.8, 1.2, 0.9, 1.1, 1],
34+
opacity: [1, 0.2, 1, 0.1, 1, 0.6, 0.8, 0.3, 1, 0.7, 0.9, 0.4, 1],
35+
rotate: [0, 45, -35, 60, -25, 30, -50, 40, -15, 25, -40, 35, 0],
36+
x: [0, 6, -4, 8, -5, 3, -6, 4, -2, 3, -4, 2, 0],
37+
y: [0, -4, 6, -7, 4, -3, 5, -4, 2, -3, 4, -2, 0],
38+
skewX: [0, 20, -15, 25, -18, 10, -12, 15, -8, 12, -10, 8, 0],
39+
skewY: [0, -15, 20, -22, 15, -10, 12, -18, 8, -12, 10, -8, 0],
40+
scaleX: [1, 1.3, 0.6, 1.5, 0.4, 1.2, 0.8, 1.4, 0.7, 1.1, 0.9, 1.2, 1],
41+
scaleY: [1, 0.7, 1.4, 0.5, 1.6, 0.8, 1.3, 0.6, 1.2, 0.9, 1.1, 0.8, 1],
3842
},
3943
transition: {
4044
duration: 8.5,
4145
repeat: Infinity,
4246
ease: "easeInOut" as const,
43-
times: [0, 0.15, 0.3, 0.45, 0.6, 0.7, 0.8, 0.9, 1]
47+
times: [0, 0.08, 0.16, 0.24, 0.32, 0.4, 0.48, 0.56, 0.64, 0.72, 0.8, 0.88, 1]
4448
}
4549
},
4650
color2: {
4751
animate: {
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],
52+
scale: [1, 0.4, 1.6, 0.2, 1.8, 0.6, 1.4, 0.3, 1.7, 0.7, 1.3, 0.5, 1],
53+
opacity: [1, 0.9, 0.1, 1, 0.2, 0.8, 0.4, 1, 0.3, 0.9, 0.5, 0.8, 1],
54+
rotate: [0, -50, 40, -65, 30, -35, 55, -45, 20, -30, 45, -35, 0],
55+
x: [0, -6, 4, -8, 5, -3, 6, -4, 2, -3, 4, -2, 0],
56+
y: [0, 4, -6, 7, -4, 3, -5, 4, -2, 3, -4, 2, 0],
57+
skewX: [0, -20, 15, -25, 18, -10, 12, -15, 8, -12, 10, -8, 0],
58+
skewY: [0, 15, -20, 22, -15, 10, -12, 18, -8, 12, -10, 8, 0],
59+
scaleX: [1, 0.6, 1.4, 0.4, 1.6, 0.8, 1.3, 0.5, 1.5, 0.7, 1.2, 0.9, 1],
60+
scaleY: [1, 1.4, 0.6, 1.6, 0.4, 1.2, 0.8, 1.5, 0.7, 1.1, 0.9, 1.3, 1],
5361
},
5462
transition: {
5563
duration: 7.2,
5664
repeat: Infinity,
5765
ease: "easeOut" as const,
5866
delay: 1.5,
59-
times: [0, 0.2, 0.35, 0.5, 0.65, 0.75, 0.85, 0.95, 1]
67+
times: [0, 0.1, 0.18, 0.26, 0.34, 0.42, 0.5, 0.58, 0.66, 0.74, 0.82, 0.9, 1]
6068
}
6169
}
6270
},
6371
'playful': {
64-
// Animation 2: Wild chaotic morphing with extreme randomness
72+
// Animation 2: Chaotic living entity with extreme random mutations
6573
color1: {
6674
animate: {
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],
75+
scale: [1, 1.8, 0.2, 2.0, 0.1, 1.6, 0.4, 1.9, 0.3, 1.7, 0.5, 1.8, 0.6, 1.3, 1],
76+
rotate: [0, 80, -60, 90, -45, 70, -80, 65, -35, 55, -75, 50, -25, 40, 0],
77+
opacity: [1, 0.1, 1, 0.05, 1, 0.3, 0.7, 0.1, 1, 0.4, 0.8, 0.2, 1, 0.6, 1],
78+
x: [0, 10, -7, 12, -8, 6, -9, 7, -4, 5, -7, 4, -2, 3, 0],
79+
y: [0, -7, 10, -12, 8, -6, 9, -7, 4, -5, 7, -4, 2, -3, 0],
80+
skewX: [0, 30, -25, 35, -28, 15, -18, 25, -12, 18, -15, 12, -8, 10, 0],
81+
skewY: [0, -25, 30, -35, 28, -15, 18, -25, 12, -18, 15, -12, 8, -10, 0],
82+
scaleX: [1, 1.6, 0.3, 1.8, 0.2, 1.4, 0.5, 1.7, 0.4, 1.5, 0.6, 1.6, 0.7, 1.2, 1],
83+
scaleY: [1, 0.4, 1.7, 0.2, 1.9, 0.6, 1.4, 0.3, 1.6, 0.5, 1.3, 0.8, 1.1, 0.9, 1],
84+
rotateX: [0, 25, -20, 30, -22, 15, -18, 20, -12, 16, -14, 10, -8, 6, 0],
85+
rotateY: [0, -20, 25, -30, 22, -15, 18, -20, 12, -16, 14, -10, 8, -6, 0],
7486
},
7587
transition: {
7688
duration: 4.8,
7789
repeat: Infinity,
7890
ease: "easeOut" as const,
79-
times: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]
91+
times: [0, 0.07, 0.14, 0.21, 0.28, 0.35, 0.42, 0.49, 0.56, 0.63, 0.7, 0.77, 0.84, 0.91, 1]
8092
}
8193
},
8294
color2: {
8395
animate: {
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],
96+
scale: [1, 0.2, 1.9, 0.1, 2.1, 0.4, 1.7, 0.2, 1.8, 0.5, 1.6, 0.3, 1.7, 0.6, 1],
97+
rotate: [0, -80, 60, -90, 45, -70, 80, -65, 35, -55, 75, -50, 25, -40, 0],
98+
opacity: [1, 0.9, 0.05, 1, 0.1, 0.7, 0.3, 1, 0.2, 0.8, 0.4, 1, 0.3, 0.9, 1],
99+
x: [0, -10, 7, -12, 8, -6, 9, -7, 4, -5, 7, -4, 2, -3, 0],
100+
y: [0, 7, -10, 12, -8, 6, -9, 7, -4, 5, -7, 4, -2, 3, 0],
101+
skewX: [0, -30, 25, -35, 28, -15, 18, -25, 12, -18, 15, -12, 8, -10, 0],
102+
skewY: [0, 25, -30, 35, -28, 15, -18, 25, -12, 18, -15, 12, -8, 10, 0],
103+
scaleX: [1, 0.3, 1.7, 0.2, 1.9, 0.5, 1.4, 0.3, 1.6, 0.4, 1.3, 0.7, 1.2, 0.8, 1],
104+
scaleY: [1, 1.7, 0.3, 1.9, 0.2, 1.4, 0.6, 1.6, 0.4, 1.3, 0.8, 1.1, 0.9, 1.2, 1],
105+
rotateX: [0, -25, 20, -30, 22, -15, 18, -20, 12, -16, 14, -10, 8, -6, 0],
106+
rotateY: [0, 20, -25, 30, -22, 15, -18, 20, -12, 16, -14, 10, -8, 6, 0],
91107
},
92108
transition: {
93109
duration: 4.0,
94110
repeat: Infinity,
95111
ease: "easeIn" as const,
96112
delay: 0.8,
97-
times: [0, 0.12, 0.22, 0.32, 0.42, 0.52, 0.62, 0.72, 0.82, 0.92, 1]
113+
times: [0, 0.08, 0.15, 0.22, 0.29, 0.36, 0.43, 0.5, 0.57, 0.64, 0.71, 0.78, 0.85, 0.92, 1]
98114
}
99115
}
100116
},
101117
'scalable': {
102-
// Animation 3: Complex morphing with fluid-like transformations
118+
// Animation 3: Living organism with organic growth and random mutations
103119
color1: {
104120
animate: {
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],
121+
scale: [1, 1.7, 0.3, 1.9, 0.2, 1.6, 0.4, 1.8, 0.5, 1.5, 0.6, 1.7, 0.7, 1.3, 0.8, 1.1, 1],
122+
opacity: [1, 0.1, 1, 0.05, 1, 0.4, 0.7, 0.2, 1, 0.5, 0.8, 0.3, 1, 0.6, 0.9, 0.4, 1],
123+
rotate: [0, 55, -40, 70, -30, 45, -60, 50, -25, 35, -55, 40, -20, 30, -45, 25, 0],
124+
x: [0, 7, -5, 9, -6, 4, -7, 5, -3, 4, -6, 3, -2, 3, -4, 2, 0],
125+
y: [0, -5, 7, -9, 6, -4, 7, -5, 3, -4, 6, -3, 2, -3, 4, -2, 0],
126+
skewX: [0, 25, -20, 30, -22, 15, -18, 20, -12, 16, -18, 14, -10, 12, -15, 8, 0],
127+
skewY: [0, -20, 25, -30, 22, -15, 18, -20, 12, -16, 18, -14, 10, -12, 15, -8, 0],
128+
scaleX: [1, 1.5, 0.4, 1.7, 0.3, 1.3, 0.6, 1.6, 0.5, 1.2, 0.7, 1.4, 0.8, 1.1, 0.9, 1.2, 1],
129+
scaleY: [1, 0.5, 1.6, 0.3, 1.8, 0.7, 1.4, 0.4, 1.5, 0.6, 1.3, 0.8, 1.2, 0.9, 1.1, 0.8, 1],
130+
rotateX: [0, 30, -25, 35, -28, 20, -22, 25, -15, 18, -20, 16, -12, 14, -16, 10, 0],
131+
rotateY: [0, -25, 30, -35, 28, -20, 22, -25, 15, -18, 20, -16, 12, -14, 16, -10, 0],
132+
rotateZ: [0, 15, -12, 18, -14, 10, -11, 13, -8, 9, -10, 8, -6, 7, -8, 5, 0],
112133
},
113134
transition: {
114135
duration: 9.2,
115136
repeat: Infinity,
116137
ease: "easeInOut" as const,
117-
times: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]
138+
times: [0, 0.06, 0.12, 0.18, 0.24, 0.3, 0.36, 0.42, 0.48, 0.54, 0.6, 0.66, 0.72, 0.78, 0.84, 0.9, 1]
118139
}
119140
},
120141
color2: {
121142
animate: {
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],
143+
scale: [1, 0.3, 1.8, 0.2, 2.0, 0.5, 1.6, 0.3, 1.7, 0.6, 1.4, 0.4, 1.6, 0.7, 1.3, 0.8, 1],
144+
opacity: [1, 0.9, 0.05, 1, 0.1, 0.6, 0.3, 1, 0.2, 0.7, 0.4, 1, 0.3, 0.8, 0.5, 0.9, 1],
145+
rotate: [0, -55, 40, -70, 30, -45, 60, -50, 25, -35, 55, -40, 20, -30, 45, -25, 0],
146+
x: [0, -7, 5, -9, 6, -4, 7, -5, 3, -4, 6, -3, 2, -3, 4, -2, 0],
147+
y: [0, 5, -7, 9, -6, 4, -7, 5, -3, 4, -6, 3, -2, 3, -4, 2, 0],
148+
skewX: [0, -25, 20, -30, 22, -15, 18, -20, 12, -16, 18, -14, 10, -12, 15, -8, 0],
149+
skewY: [0, 20, -25, 30, -22, 15, -18, 20, -12, 16, -18, 14, -10, 12, -15, 8, 0],
150+
scaleX: [1, 0.4, 1.6, 0.3, 1.8, 0.6, 1.3, 0.4, 1.5, 0.5, 1.2, 0.7, 1.1, 0.8, 1.0, 0.9, 1],
151+
scaleY: [1, 1.6, 0.4, 1.8, 0.3, 1.3, 0.7, 1.5, 0.5, 1.2, 0.8, 1.1, 0.9, 1.0, 0.8, 1.1, 1],
152+
rotateX: [0, -30, 25, -35, 28, -20, 22, -25, 15, -18, 20, -16, 12, -14, 16, -10, 0],
153+
rotateY: [0, 25, -30, 35, -28, 20, -22, 25, -15, 18, -20, 16, -12, 14, -16, 10, 0],
154+
rotateZ: [0, -15, 12, -18, 14, -10, 11, -13, 8, -9, 10, -8, 6, -7, 8, -5, 0],
129155
},
130156
transition: {
131157
duration: 7.5,
132158
repeat: Infinity,
133159
ease: "easeOut" as const,
134160
delay: 1.8,
135-
times: [0, 0.15, 0.25, 0.35, 0.45, 0.55, 0.65, 0.75, 0.85, 0.95, 1]
161+
times: [0, 0.08, 0.14, 0.2, 0.26, 0.32, 0.38, 0.44, 0.5, 0.56, 0.62, 0.68, 0.74, 0.8, 0.86, 0.92, 1]
136162
}
137163
}
138164
},

0 commit comments

Comments
 (0)