@dotcraft/avatar 0.6.3 → 0.6.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +201 -201
- package/README.md +46 -43
- package/dist/accessories.css +14 -14
- package/dist/avatar.css +62 -62
- package/dist/composer/ComposerMascot.d.ts +1 -1
- package/dist/composer/ComposerMascot.d.ts.map +1 -1
- package/dist/composer/ComposerMascot.js +33 -107
- package/dist/composer/ComposerMascot.js.map +1 -1
- package/dist/composer/MascotIdleStage.d.ts +11 -0
- package/dist/composer/MascotIdleStage.d.ts.map +1 -0
- package/dist/composer/MascotIdleStage.js +9 -0
- package/dist/composer/MascotIdleStage.js.map +1 -0
- package/dist/composer/constants.d.ts +12 -1
- package/dist/composer/constants.d.ts.map +1 -1
- package/dist/composer/constants.js +9 -4
- package/dist/composer/constants.js.map +1 -1
- package/dist/composer/styles/energy.css +99 -99
- package/dist/composer/styles/expressions.css +20 -20
- package/dist/composer/styles/feedback.css +188 -188
- package/dist/composer/styles/focus.css +72 -72
- package/dist/composer/styles/foundation.css +301 -287
- package/dist/composer/styles/idle.css +449 -438
- package/dist/composer/styles/overdrive.css +264 -264
- package/dist/composer/styles/props.css +21 -21
- package/dist/composer/types.d.ts +1 -0
- package/dist/composer/types.d.ts.map +1 -1
- package/dist/composer/useComposerAvatarBehavior.d.ts +1 -0
- package/dist/composer/useComposerAvatarBehavior.d.ts.map +1 -1
- package/dist/composer/useComposerAvatarBehavior.js +2 -2
- package/dist/composer/useComposerAvatarBehavior.js.map +1 -1
- package/dist/composer/useMascotActiveIdle.d.ts +33 -0
- package/dist/composer/useMascotActiveIdle.d.ts.map +1 -0
- package/dist/composer/useMascotActiveIdle.js +128 -0
- package/dist/composer/useMascotActiveIdle.js.map +1 -0
- package/dist/react.d.ts +5 -0
- package/dist/react.d.ts.map +1 -1
- package/dist/react.js +4 -0
- package/dist/react.js.map +1 -1
- package/dist/rig.css +265 -265
- package/dist/styles.css +13 -13
- package/package.json +56 -55
- package/src/AnimatedDecoration.tsx +43 -0
- package/src/AppearanceRig.tsx +15 -0
- package/src/Avatar.tsx +85 -0
- package/src/DecorationShapes.tsx +8 -0
- package/src/Decorations.tsx +31 -0
- package/src/Faces.tsx +37 -0
- package/src/HatDecorations.tsx +75 -0
- package/src/HeldDecorations.tsx +48 -0
- package/src/MascotRig.tsx +191 -0
- package/src/ObjectDecorations.tsx +55 -0
- package/src/accessories.css +14 -0
- package/src/appearanceModel.ts +65 -0
- package/src/avatar.css +62 -0
- package/src/characters.ts +5 -0
- package/src/composer/ComposerMascot.tsx +445 -0
- package/src/composer/ComposerMascotShadow.tsx +5 -0
- package/src/composer/MascotIdleStage.tsx +23 -0
- package/src/composer/constants.ts +89 -0
- package/src/composer/mascotHandoff.ts +19 -0
- package/src/composer/styles/energy.css +99 -0
- package/src/composer/styles/expressions.css +20 -0
- package/src/composer/styles/feedback.css +188 -0
- package/src/composer/styles/focus.css +72 -0
- package/src/composer/styles/foundation.css +301 -0
- package/src/composer/styles/idle.css +449 -0
- package/src/composer/styles/overdrive.css +264 -0
- package/src/composer/styles/props.css +21 -0
- package/src/composer/types.ts +32 -0
- package/src/composer/useComposerAvatarBehavior.ts +98 -0
- package/src/composer/useComposerMotion.ts +15 -0
- package/src/composer/useComposerProfile.ts +50 -0
- package/src/composer/useMascotActiveIdle.ts +170 -0
- package/src/decorationCatalog.ts +45 -0
- package/src/decorationMotion.ts +68 -0
- package/src/environment.ts +46 -0
- package/src/index.ts +5 -0
- package/src/palette.ts +52 -0
- package/src/react.ts +11 -0
- package/src/rig.css +265 -0
- package/src/styles.css +13 -0
- package/src/useEventReplay.ts +13 -0
- package/src/useGesture.ts +51 -0
|
@@ -1,264 +1,264 @@
|
|
|
1
|
-
[data-mascot-context='max'] .composer-mascot-motion {
|
|
2
|
-
--mascot-max-edge: oklch(from var(--mascot-energy-accent)
|
|
3
|
-
clamp(0.28, calc(l + 0.065), 0.96) clamp(0, calc(c * 0.96), 0.3) calc(h + 4));
|
|
4
|
-
--mascot-max-shift: oklch(from var(--mascot-energy-accent)
|
|
5
|
-
clamp(0.28, calc(l + 0.1), 0.96) clamp(0, calc(c * 0.92), 0.3) calc(h + 40));
|
|
6
|
-
--mascot-max-bright: oklch(from var(--mascot-energy-accent)
|
|
7
|
-
clamp(0.28, calc(l + 0.18), 0.96) clamp(0, calc(c * 0.68), 0.3) calc(h + 18));
|
|
8
|
-
--mascot-max-edge-bold: rgb(from var(--mascot-max-edge) r g b / 1);
|
|
9
|
-
--mascot-max-edge-faint: rgb(from var(--mascot-max-edge) r g b / 0.24);
|
|
10
|
-
--mascot-max-shift-bold: rgb(from var(--mascot-max-shift) r g b / 1);
|
|
11
|
-
--mascot-max-shift-medium: rgb(from var(--mascot-max-shift) r g b / 0.88);
|
|
12
|
-
--mascot-max-shift-soft: rgb(from var(--mascot-max-shift) r g b / 0.44);
|
|
13
|
-
--mascot-max-bright-medium: rgb(from var(--mascot-max-bright) r g b / 0.88);
|
|
14
|
-
--mascot-max-blur-hair: 1.4px;
|
|
15
|
-
--mascot-max-blur-edge: 2.4px;
|
|
16
|
-
--mascot-max-blur-glow: 6.8px;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
.composer-mascot-motion::after {
|
|
20
|
-
content: '';
|
|
21
|
-
position: absolute;
|
|
22
|
-
top: 50%;
|
|
23
|
-
left: 50%;
|
|
24
|
-
z-index: 3;
|
|
25
|
-
width: 104px;
|
|
26
|
-
height: 90px;
|
|
27
|
-
border-radius: 48%;
|
|
28
|
-
opacity: 0;
|
|
29
|
-
pointer-events: none;
|
|
30
|
-
transform: translate(-50%, -50%);
|
|
31
|
-
transform-origin: center;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
[data-mascot-context='max'] .composer-mascot-motion::after {
|
|
35
|
-
background:
|
|
36
|
-
radial-gradient(circle, var(--mascot-max-bright) 0 0.55px, transparent 1.1px) 13% 42% / 3px 3px no-repeat,
|
|
37
|
-
radial-gradient(circle, var(--mascot-max-edge) 0 0.45px, transparent 1px) 27% 74% / 3px 3px no-repeat,
|
|
38
|
-
radial-gradient(circle, var(--mascot-max-shift) 0 0.5px, transparent 1.05px) 42% 18% / 3px 3px no-repeat,
|
|
39
|
-
radial-gradient(circle, var(--mascot-max-bright) 0 0.45px, transparent 1px) 68% 80% / 3px 3px no-repeat,
|
|
40
|
-
radial-gradient(circle, var(--mascot-max-edge) 0 0.55px, transparent 1.1px) 82% 28% / 3px 3px no-repeat,
|
|
41
|
-
radial-gradient(circle, var(--mascot-max-shift) 0 0.4px, transparent 0.95px) 91% 62% / 3px 3px no-repeat;
|
|
42
|
-
filter: drop-shadow(0 0 1.6px color-mix(in srgb, var(--mascot-max-edge) 32%, transparent));
|
|
43
|
-
opacity: 0.18;
|
|
44
|
-
animation: composer-mascot-max-micrograin 6.2s ease-in-out infinite;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
@keyframes composer-mascot-max-overdrive-edge {
|
|
48
|
-
0%, 100% {
|
|
49
|
-
filter:
|
|
50
|
-
drop-shadow(-0.6px 0 var(--mascot-max-blur-hair) var(--mascot-max-edge-bold))
|
|
51
|
-
drop-shadow(0.7px 0 var(--mascot-max-blur-edge) var(--mascot-max-shift-medium))
|
|
52
|
-
drop-shadow(0 0 var(--mascot-max-blur-glow) var(--mascot-max-edge-faint));
|
|
53
|
-
}
|
|
54
|
-
46% {
|
|
55
|
-
filter:
|
|
56
|
-
drop-shadow(0.2px -0.75px var(--mascot-max-blur-hair) var(--mascot-max-shift-bold))
|
|
57
|
-
drop-shadow(-0.2px 0.8px var(--mascot-max-blur-edge) var(--mascot-max-bright-medium))
|
|
58
|
-
drop-shadow(0 0 var(--mascot-max-blur-glow) var(--mascot-max-shift-soft));
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
@keyframes composer-mascot-max-coat-dark {
|
|
63
|
-
0%, 34%, 100% { stop-color: var(--mascot-body-dark); }
|
|
64
|
-
14% {
|
|
65
|
-
stop-color: oklch(from var(--mascot-body-dark)
|
|
66
|
-
clamp(0.28, calc(l + 0.09), 0.96) clamp(0, calc(c * 0.9), 0.3) calc(h + 14));
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
@keyframes composer-mascot-max-coat-mid {
|
|
71
|
-
0%, 24%, 68%, 100% { stop-color: var(--mascot-body-mid); }
|
|
72
|
-
44% {
|
|
73
|
-
stop-color: oklch(from var(--mascot-body-mid)
|
|
74
|
-
clamp(0.28, calc(l + 0.14), 0.96) clamp(0, calc(c * 0.76), 0.3) calc(h + 31));
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
@keyframes composer-mascot-max-coat-light {
|
|
79
|
-
0%, 50%, 94%, 100% { stop-color: var(--mascot-body-light); }
|
|
80
|
-
72% {
|
|
81
|
-
stop-color: oklch(from var(--mascot-body-light)
|
|
82
|
-
clamp(0.28, calc(l + 0.15), 0.96) clamp(0, calc(c * 0.58), 0.3) calc(h + 41));
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
@keyframes composer-mascot-max-coat-mark-dark {
|
|
87
|
-
0%, 44%, 100% { stop-color: var(--mascot-mark-dark); }
|
|
88
|
-
20% {
|
|
89
|
-
stop-color: oklch(from var(--mascot-mark-dark)
|
|
90
|
-
clamp(0.28, calc(l + 0.1), 0.96) clamp(0, calc(c * 0.82), 0.3) calc(h + 18));
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
@keyframes composer-mascot-max-coat-mark-light {
|
|
95
|
-
0%, 40%, 88%, 100% { stop-color: var(--mascot-mark-energy); }
|
|
96
|
-
64% {
|
|
97
|
-
stop-color: oklch(from var(--mascot-mark-energy)
|
|
98
|
-
clamp(0.28, calc(l + 0.15), 0.96) clamp(0, calc(c * 0.6), 0.3) calc(h + 38));
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
@keyframes composer-mascot-max-micrograin {
|
|
103
|
-
0%, 100% { opacity: 0.08; transform: translate(-51%, -49%) scale(0.98); }
|
|
104
|
-
38% { opacity: 0.28; transform: translate(-49%, -52%) scale(1.02); }
|
|
105
|
-
68% { opacity: 0.13; transform: translate(-48%, -54%) scale(1.04); }
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
[data-mascot-profile-transition='active'] .composer-mascot-character-stage {
|
|
109
|
-
transform-origin: 50% 52%;
|
|
110
|
-
animation: composer-mascot-profile-character 1.24s linear both;
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
[data-mascot-profile-transition='active'] .composer-mascot-motion::before {
|
|
114
|
-
content: '';
|
|
115
|
-
position: absolute;
|
|
116
|
-
top: 52%;
|
|
117
|
-
left: 50%;
|
|
118
|
-
z-index: 1;
|
|
119
|
-
width: 64px;
|
|
120
|
-
height: 64px;
|
|
121
|
-
box-sizing: border-box;
|
|
122
|
-
border: 1px solid transparent;
|
|
123
|
-
border-radius: 50%;
|
|
124
|
-
background: radial-gradient(
|
|
125
|
-
circle,
|
|
126
|
-
#010106 0 34%,
|
|
127
|
-
#05050c 38%,
|
|
128
|
-
rgba(232, 236, 255, 0.78) 42%,
|
|
129
|
-
rgba(135, 145, 180, 0.18) 48%,
|
|
130
|
-
transparent 66%
|
|
131
|
-
);
|
|
132
|
-
opacity: 0;
|
|
133
|
-
pointer-events: none;
|
|
134
|
-
transform: translate(-50%, -50%) scale(0.16);
|
|
135
|
-
transform-origin: center;
|
|
136
|
-
animation:
|
|
137
|
-
composer-mascot-profile-hole 1.24s linear both,
|
|
138
|
-
composer-mascot-profile-rim 1.24s linear both;
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
[data-mascot-profile-transition='active'] .composer-mascot-motion::after {
|
|
142
|
-
top: 52%;
|
|
143
|
-
left: 50%;
|
|
144
|
-
z-index: 1;
|
|
145
|
-
width: 86px;
|
|
146
|
-
height: 86px;
|
|
147
|
-
border-radius: 50%;
|
|
148
|
-
color: var(--mascot-profile-from-accent);
|
|
149
|
-
background:
|
|
150
|
-
radial-gradient(circle, currentColor 0 0.9px, transparent 1.55px) 50% 2% / 4px 4px no-repeat,
|
|
151
|
-
radial-gradient(circle, currentColor 0 0.76px, transparent 1.4px) 78% 12% / 4px 4px no-repeat,
|
|
152
|
-
radial-gradient(circle, rgba(255, 255, 255, 0.88) 0 0.65px, transparent 1.3px) 96% 42% / 4px 4px no-repeat,
|
|
153
|
-
radial-gradient(circle, currentColor 0 0.82px, transparent 1.48px) 88% 76% / 4px 4px no-repeat,
|
|
154
|
-
radial-gradient(circle, currentColor 0 0.9px, transparent 1.55px) 55% 98% / 4px 4px no-repeat,
|
|
155
|
-
radial-gradient(circle, rgba(255, 255, 255, 0.8) 0 0.65px, transparent 1.3px) 19% 86% / 4px 4px no-repeat,
|
|
156
|
-
radial-gradient(circle, currentColor 0 0.76px, transparent 1.4px) 3% 55% / 4px 4px no-repeat,
|
|
157
|
-
radial-gradient(circle, currentColor 0 0.82px, transparent 1.48px) 14% 20% / 4px 4px no-repeat;
|
|
158
|
-
filter: drop-shadow(0 0 3px currentColor);
|
|
159
|
-
opacity: 0;
|
|
160
|
-
animation:
|
|
161
|
-
composer-mascot-profile-particles 1.24s linear both,
|
|
162
|
-
composer-mascot-profile-particle-color 1.24s linear both;
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
[data-composer-root]:has([data-mascot-profile-transition='active']) .composer-mascot-contact-shadow {
|
|
166
|
-
animation: composer-mascot-profile-contact-shadow 1.24s linear both;
|
|
167
|
-
}
|
|
168
|
-
|
|
169
|
-
@keyframes composer-mascot-profile-character {
|
|
170
|
-
0%, 100% {
|
|
171
|
-
opacity: 1;
|
|
172
|
-
transform: translateY(0) rotate(0) scale(1);
|
|
173
|
-
filter: none;
|
|
174
|
-
}
|
|
175
|
-
18% {
|
|
176
|
-
opacity: 1;
|
|
177
|
-
transform: translateY(0) rotate(0) scale(1.015, 0.99);
|
|
178
|
-
filter: saturate(1.03);
|
|
179
|
-
}
|
|
180
|
-
34% {
|
|
181
|
-
opacity: 0.96;
|
|
182
|
-
transform: translateY(0) rotate(1.2deg) scale(0.76, 0.8);
|
|
183
|
-
filter: brightness(0.96) saturate(1.08);
|
|
184
|
-
}
|
|
185
|
-
46% {
|
|
186
|
-
opacity: 0.14;
|
|
187
|
-
transform: translateY(0) rotate(-4deg) scale(0.13);
|
|
188
|
-
filter: brightness(0.72) saturate(1.18) blur(0.7px);
|
|
189
|
-
}
|
|
190
|
-
48%, 52% {
|
|
191
|
-
opacity: 0;
|
|
192
|
-
transform: translateY(0) rotate(-6deg) scale(0.02);
|
|
193
|
-
filter: brightness(0.58) saturate(1.2) blur(1px);
|
|
194
|
-
}
|
|
195
|
-
64% {
|
|
196
|
-
opacity: 0.95;
|
|
197
|
-
transform: translateY(0) rotate(1.8deg) scale(1.1, 0.92);
|
|
198
|
-
filter: brightness(1.12);
|
|
199
|
-
}
|
|
200
|
-
76% {
|
|
201
|
-
opacity: 1;
|
|
202
|
-
transform: translateY(0) rotate(-0.8deg) scale(0.97, 1.035);
|
|
203
|
-
filter: none;
|
|
204
|
-
}
|
|
205
|
-
89% {
|
|
206
|
-
opacity: 1;
|
|
207
|
-
transform: translateY(0) rotate(0.3deg) scale(1.01, 0.995);
|
|
208
|
-
filter: none;
|
|
209
|
-
}
|
|
210
|
-
}
|
|
211
|
-
|
|
212
|
-
@keyframes composer-mascot-profile-hole {
|
|
213
|
-
0%, 12%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.16); }
|
|
214
|
-
30% { opacity: 0.72; transform: translate(-50%, -50%) scale(0.72); }
|
|
215
|
-
46%, 54% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
|
|
216
|
-
72% { opacity: 0.54; transform: translate(-50%, -50%) scale(0.66); }
|
|
217
|
-
88% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
|
|
218
|
-
}
|
|
219
|
-
|
|
220
|
-
@keyframes composer-mascot-profile-particles {
|
|
221
|
-
0%, 14%, 100% { opacity: 0; transform: translate(-50%, -50%) rotate(0) scale(1); }
|
|
222
|
-
20% { opacity: 0.45; transform: translate(-50%, -50%) rotate(8deg) scale(1); }
|
|
223
|
-
34% { opacity: 0.92; transform: translate(-50%, -50%) rotate(38deg) scale(0.72); }
|
|
224
|
-
48% { opacity: 0.12; transform: translate(-50%, -50%) rotate(86deg) scale(0.16); }
|
|
225
|
-
49.5% { opacity: 0; transform: translate(-50%, -50%) rotate(96deg) scale(0.08); }
|
|
226
|
-
50.5% { opacity: 0; transform: translate(-50%, -50%) rotate(104deg) scale(1); }
|
|
227
|
-
64% { opacity: 0.82; transform: translate(-50%, -50%) rotate(146deg) scale(0.7); }
|
|
228
|
-
82% { opacity: 0.08; transform: translate(-50%, -50%) rotate(206deg) scale(0.14); }
|
|
229
|
-
86% { opacity: 0; transform: translate(-50%, -50%) rotate(218deg) scale(0.08); }
|
|
230
|
-
}
|
|
231
|
-
|
|
232
|
-
@keyframes composer-mascot-profile-particle-color {
|
|
233
|
-
0%, 42% { color: var(--mascot-profile-from-accent); }
|
|
234
|
-
49.5%, 50.5% { color: rgba(240, 244, 255, 0.96); }
|
|
235
|
-
58%, 100% { color: var(--mascot-profile-to-accent); }
|
|
236
|
-
}
|
|
237
|
-
|
|
238
|
-
@keyframes composer-mascot-profile-rim {
|
|
239
|
-
0%, 16% {
|
|
240
|
-
border-color: color-mix(in srgb, var(--mascot-profile-from-accent) 72%, transparent);
|
|
241
|
-
box-shadow: 0 0 12px color-mix(in srgb, var(--mascot-profile-from-accent) 42%, transparent);
|
|
242
|
-
}
|
|
243
|
-
34% {
|
|
244
|
-
border-color: color-mix(in srgb, var(--mascot-profile-from-accent) 84%, white);
|
|
245
|
-
box-shadow: 0 0 15px color-mix(in srgb, var(--mascot-profile-from-accent) 48%, transparent);
|
|
246
|
-
}
|
|
247
|
-
50% {
|
|
248
|
-
border-color: rgba(246, 248, 255, 0.92);
|
|
249
|
-
box-shadow: 0 0 17px rgba(220, 226, 255, 0.46);
|
|
250
|
-
}
|
|
251
|
-
66% {
|
|
252
|
-
border-color: color-mix(in srgb, var(--mascot-profile-to-accent) 84%, white);
|
|
253
|
-
box-shadow: 0 0 15px color-mix(in srgb, var(--mascot-profile-to-accent) 48%, transparent);
|
|
254
|
-
}
|
|
255
|
-
84%, 100% {
|
|
256
|
-
border-color: color-mix(in srgb, var(--mascot-profile-to-accent) 72%, transparent);
|
|
257
|
-
box-shadow: 0 0 12px color-mix(in srgb, var(--mascot-profile-to-accent) 36%, transparent);
|
|
258
|
-
}
|
|
259
|
-
}
|
|
260
|
-
|
|
261
|
-
@keyframes composer-mascot-profile-contact-shadow {
|
|
262
|
-
0%, 100% { opacity: 1; transform: translateX(50%) scaleX(1); }
|
|
263
|
-
46%, 54% { opacity: 0; transform: translateX(50%) scaleX(0.25); }
|
|
264
|
-
}
|
|
1
|
+
[data-mascot-context='max'] .composer-mascot-motion {
|
|
2
|
+
--mascot-max-edge: oklch(from var(--mascot-energy-accent)
|
|
3
|
+
clamp(0.28, calc(l + 0.065), 0.96) clamp(0, calc(c * 0.96), 0.3) calc(h + 4));
|
|
4
|
+
--mascot-max-shift: oklch(from var(--mascot-energy-accent)
|
|
5
|
+
clamp(0.28, calc(l + 0.1), 0.96) clamp(0, calc(c * 0.92), 0.3) calc(h + 40));
|
|
6
|
+
--mascot-max-bright: oklch(from var(--mascot-energy-accent)
|
|
7
|
+
clamp(0.28, calc(l + 0.18), 0.96) clamp(0, calc(c * 0.68), 0.3) calc(h + 18));
|
|
8
|
+
--mascot-max-edge-bold: rgb(from var(--mascot-max-edge) r g b / 1);
|
|
9
|
+
--mascot-max-edge-faint: rgb(from var(--mascot-max-edge) r g b / 0.24);
|
|
10
|
+
--mascot-max-shift-bold: rgb(from var(--mascot-max-shift) r g b / 1);
|
|
11
|
+
--mascot-max-shift-medium: rgb(from var(--mascot-max-shift) r g b / 0.88);
|
|
12
|
+
--mascot-max-shift-soft: rgb(from var(--mascot-max-shift) r g b / 0.44);
|
|
13
|
+
--mascot-max-bright-medium: rgb(from var(--mascot-max-bright) r g b / 0.88);
|
|
14
|
+
--mascot-max-blur-hair: 1.4px;
|
|
15
|
+
--mascot-max-blur-edge: 2.4px;
|
|
16
|
+
--mascot-max-blur-glow: 6.8px;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.composer-mascot-motion::after {
|
|
20
|
+
content: '';
|
|
21
|
+
position: absolute;
|
|
22
|
+
top: 50%;
|
|
23
|
+
left: 50%;
|
|
24
|
+
z-index: 3;
|
|
25
|
+
width: 104px;
|
|
26
|
+
height: 90px;
|
|
27
|
+
border-radius: 48%;
|
|
28
|
+
opacity: 0;
|
|
29
|
+
pointer-events: none;
|
|
30
|
+
transform: translate(-50%, -50%);
|
|
31
|
+
transform-origin: center;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
[data-mascot-context='max'] .composer-mascot-motion::after {
|
|
35
|
+
background:
|
|
36
|
+
radial-gradient(circle, var(--mascot-max-bright) 0 0.55px, transparent 1.1px) 13% 42% / 3px 3px no-repeat,
|
|
37
|
+
radial-gradient(circle, var(--mascot-max-edge) 0 0.45px, transparent 1px) 27% 74% / 3px 3px no-repeat,
|
|
38
|
+
radial-gradient(circle, var(--mascot-max-shift) 0 0.5px, transparent 1.05px) 42% 18% / 3px 3px no-repeat,
|
|
39
|
+
radial-gradient(circle, var(--mascot-max-bright) 0 0.45px, transparent 1px) 68% 80% / 3px 3px no-repeat,
|
|
40
|
+
radial-gradient(circle, var(--mascot-max-edge) 0 0.55px, transparent 1.1px) 82% 28% / 3px 3px no-repeat,
|
|
41
|
+
radial-gradient(circle, var(--mascot-max-shift) 0 0.4px, transparent 0.95px) 91% 62% / 3px 3px no-repeat;
|
|
42
|
+
filter: drop-shadow(0 0 1.6px color-mix(in srgb, var(--mascot-max-edge) 32%, transparent));
|
|
43
|
+
opacity: 0.18;
|
|
44
|
+
animation: composer-mascot-max-micrograin 6.2s ease-in-out infinite;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
@keyframes composer-mascot-max-overdrive-edge {
|
|
48
|
+
0%, 100% {
|
|
49
|
+
filter:
|
|
50
|
+
drop-shadow(-0.6px 0 var(--mascot-max-blur-hair) var(--mascot-max-edge-bold))
|
|
51
|
+
drop-shadow(0.7px 0 var(--mascot-max-blur-edge) var(--mascot-max-shift-medium))
|
|
52
|
+
drop-shadow(0 0 var(--mascot-max-blur-glow) var(--mascot-max-edge-faint));
|
|
53
|
+
}
|
|
54
|
+
46% {
|
|
55
|
+
filter:
|
|
56
|
+
drop-shadow(0.2px -0.75px var(--mascot-max-blur-hair) var(--mascot-max-shift-bold))
|
|
57
|
+
drop-shadow(-0.2px 0.8px var(--mascot-max-blur-edge) var(--mascot-max-bright-medium))
|
|
58
|
+
drop-shadow(0 0 var(--mascot-max-blur-glow) var(--mascot-max-shift-soft));
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
@keyframes composer-mascot-max-coat-dark {
|
|
63
|
+
0%, 34%, 100% { stop-color: var(--mascot-body-dark); }
|
|
64
|
+
14% {
|
|
65
|
+
stop-color: oklch(from var(--mascot-body-dark)
|
|
66
|
+
clamp(0.28, calc(l + 0.09), 0.96) clamp(0, calc(c * 0.9), 0.3) calc(h + 14));
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
@keyframes composer-mascot-max-coat-mid {
|
|
71
|
+
0%, 24%, 68%, 100% { stop-color: var(--mascot-body-mid); }
|
|
72
|
+
44% {
|
|
73
|
+
stop-color: oklch(from var(--mascot-body-mid)
|
|
74
|
+
clamp(0.28, calc(l + 0.14), 0.96) clamp(0, calc(c * 0.76), 0.3) calc(h + 31));
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
@keyframes composer-mascot-max-coat-light {
|
|
79
|
+
0%, 50%, 94%, 100% { stop-color: var(--mascot-body-light); }
|
|
80
|
+
72% {
|
|
81
|
+
stop-color: oklch(from var(--mascot-body-light)
|
|
82
|
+
clamp(0.28, calc(l + 0.15), 0.96) clamp(0, calc(c * 0.58), 0.3) calc(h + 41));
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
@keyframes composer-mascot-max-coat-mark-dark {
|
|
87
|
+
0%, 44%, 100% { stop-color: var(--mascot-mark-dark); }
|
|
88
|
+
20% {
|
|
89
|
+
stop-color: oklch(from var(--mascot-mark-dark)
|
|
90
|
+
clamp(0.28, calc(l + 0.1), 0.96) clamp(0, calc(c * 0.82), 0.3) calc(h + 18));
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
@keyframes composer-mascot-max-coat-mark-light {
|
|
95
|
+
0%, 40%, 88%, 100% { stop-color: var(--mascot-mark-energy); }
|
|
96
|
+
64% {
|
|
97
|
+
stop-color: oklch(from var(--mascot-mark-energy)
|
|
98
|
+
clamp(0.28, calc(l + 0.15), 0.96) clamp(0, calc(c * 0.6), 0.3) calc(h + 38));
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
@keyframes composer-mascot-max-micrograin {
|
|
103
|
+
0%, 100% { opacity: 0.08; transform: translate(-51%, -49%) scale(0.98); }
|
|
104
|
+
38% { opacity: 0.28; transform: translate(-49%, -52%) scale(1.02); }
|
|
105
|
+
68% { opacity: 0.13; transform: translate(-48%, -54%) scale(1.04); }
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
[data-mascot-profile-transition='active'] .composer-mascot-character-stage {
|
|
109
|
+
transform-origin: 50% 52%;
|
|
110
|
+
animation: composer-mascot-profile-character 1.24s linear both;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
[data-mascot-profile-transition='active'] .composer-mascot-motion::before {
|
|
114
|
+
content: '';
|
|
115
|
+
position: absolute;
|
|
116
|
+
top: 52%;
|
|
117
|
+
left: 50%;
|
|
118
|
+
z-index: 1;
|
|
119
|
+
width: 64px;
|
|
120
|
+
height: 64px;
|
|
121
|
+
box-sizing: border-box;
|
|
122
|
+
border: 1px solid transparent;
|
|
123
|
+
border-radius: 50%;
|
|
124
|
+
background: radial-gradient(
|
|
125
|
+
circle,
|
|
126
|
+
#010106 0 34%,
|
|
127
|
+
#05050c 38%,
|
|
128
|
+
rgba(232, 236, 255, 0.78) 42%,
|
|
129
|
+
rgba(135, 145, 180, 0.18) 48%,
|
|
130
|
+
transparent 66%
|
|
131
|
+
);
|
|
132
|
+
opacity: 0;
|
|
133
|
+
pointer-events: none;
|
|
134
|
+
transform: translate(-50%, -50%) scale(0.16);
|
|
135
|
+
transform-origin: center;
|
|
136
|
+
animation:
|
|
137
|
+
composer-mascot-profile-hole 1.24s linear both,
|
|
138
|
+
composer-mascot-profile-rim 1.24s linear both;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
[data-mascot-profile-transition='active'] .composer-mascot-motion::after {
|
|
142
|
+
top: 52%;
|
|
143
|
+
left: 50%;
|
|
144
|
+
z-index: 1;
|
|
145
|
+
width: 86px;
|
|
146
|
+
height: 86px;
|
|
147
|
+
border-radius: 50%;
|
|
148
|
+
color: var(--mascot-profile-from-accent);
|
|
149
|
+
background:
|
|
150
|
+
radial-gradient(circle, currentColor 0 0.9px, transparent 1.55px) 50% 2% / 4px 4px no-repeat,
|
|
151
|
+
radial-gradient(circle, currentColor 0 0.76px, transparent 1.4px) 78% 12% / 4px 4px no-repeat,
|
|
152
|
+
radial-gradient(circle, rgba(255, 255, 255, 0.88) 0 0.65px, transparent 1.3px) 96% 42% / 4px 4px no-repeat,
|
|
153
|
+
radial-gradient(circle, currentColor 0 0.82px, transparent 1.48px) 88% 76% / 4px 4px no-repeat,
|
|
154
|
+
radial-gradient(circle, currentColor 0 0.9px, transparent 1.55px) 55% 98% / 4px 4px no-repeat,
|
|
155
|
+
radial-gradient(circle, rgba(255, 255, 255, 0.8) 0 0.65px, transparent 1.3px) 19% 86% / 4px 4px no-repeat,
|
|
156
|
+
radial-gradient(circle, currentColor 0 0.76px, transparent 1.4px) 3% 55% / 4px 4px no-repeat,
|
|
157
|
+
radial-gradient(circle, currentColor 0 0.82px, transparent 1.48px) 14% 20% / 4px 4px no-repeat;
|
|
158
|
+
filter: drop-shadow(0 0 3px currentColor);
|
|
159
|
+
opacity: 0;
|
|
160
|
+
animation:
|
|
161
|
+
composer-mascot-profile-particles 1.24s linear both,
|
|
162
|
+
composer-mascot-profile-particle-color 1.24s linear both;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
[data-composer-root]:has([data-mascot-profile-transition='active']) .composer-mascot-contact-shadow {
|
|
166
|
+
animation: composer-mascot-profile-contact-shadow 1.24s linear both;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
@keyframes composer-mascot-profile-character {
|
|
170
|
+
0%, 100% {
|
|
171
|
+
opacity: 1;
|
|
172
|
+
transform: translateY(0) rotate(0) scale(1);
|
|
173
|
+
filter: none;
|
|
174
|
+
}
|
|
175
|
+
18% {
|
|
176
|
+
opacity: 1;
|
|
177
|
+
transform: translateY(0) rotate(0) scale(1.015, 0.99);
|
|
178
|
+
filter: saturate(1.03);
|
|
179
|
+
}
|
|
180
|
+
34% {
|
|
181
|
+
opacity: 0.96;
|
|
182
|
+
transform: translateY(0) rotate(1.2deg) scale(0.76, 0.8);
|
|
183
|
+
filter: brightness(0.96) saturate(1.08);
|
|
184
|
+
}
|
|
185
|
+
46% {
|
|
186
|
+
opacity: 0.14;
|
|
187
|
+
transform: translateY(0) rotate(-4deg) scale(0.13);
|
|
188
|
+
filter: brightness(0.72) saturate(1.18) blur(0.7px);
|
|
189
|
+
}
|
|
190
|
+
48%, 52% {
|
|
191
|
+
opacity: 0;
|
|
192
|
+
transform: translateY(0) rotate(-6deg) scale(0.02);
|
|
193
|
+
filter: brightness(0.58) saturate(1.2) blur(1px);
|
|
194
|
+
}
|
|
195
|
+
64% {
|
|
196
|
+
opacity: 0.95;
|
|
197
|
+
transform: translateY(0) rotate(1.8deg) scale(1.1, 0.92);
|
|
198
|
+
filter: brightness(1.12);
|
|
199
|
+
}
|
|
200
|
+
76% {
|
|
201
|
+
opacity: 1;
|
|
202
|
+
transform: translateY(0) rotate(-0.8deg) scale(0.97, 1.035);
|
|
203
|
+
filter: none;
|
|
204
|
+
}
|
|
205
|
+
89% {
|
|
206
|
+
opacity: 1;
|
|
207
|
+
transform: translateY(0) rotate(0.3deg) scale(1.01, 0.995);
|
|
208
|
+
filter: none;
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
@keyframes composer-mascot-profile-hole {
|
|
213
|
+
0%, 12%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.16); }
|
|
214
|
+
30% { opacity: 0.72; transform: translate(-50%, -50%) scale(0.72); }
|
|
215
|
+
46%, 54% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
|
|
216
|
+
72% { opacity: 0.54; transform: translate(-50%, -50%) scale(0.66); }
|
|
217
|
+
88% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
@keyframes composer-mascot-profile-particles {
|
|
221
|
+
0%, 14%, 100% { opacity: 0; transform: translate(-50%, -50%) rotate(0) scale(1); }
|
|
222
|
+
20% { opacity: 0.45; transform: translate(-50%, -50%) rotate(8deg) scale(1); }
|
|
223
|
+
34% { opacity: 0.92; transform: translate(-50%, -50%) rotate(38deg) scale(0.72); }
|
|
224
|
+
48% { opacity: 0.12; transform: translate(-50%, -50%) rotate(86deg) scale(0.16); }
|
|
225
|
+
49.5% { opacity: 0; transform: translate(-50%, -50%) rotate(96deg) scale(0.08); }
|
|
226
|
+
50.5% { opacity: 0; transform: translate(-50%, -50%) rotate(104deg) scale(1); }
|
|
227
|
+
64% { opacity: 0.82; transform: translate(-50%, -50%) rotate(146deg) scale(0.7); }
|
|
228
|
+
82% { opacity: 0.08; transform: translate(-50%, -50%) rotate(206deg) scale(0.14); }
|
|
229
|
+
86% { opacity: 0; transform: translate(-50%, -50%) rotate(218deg) scale(0.08); }
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
@keyframes composer-mascot-profile-particle-color {
|
|
233
|
+
0%, 42% { color: var(--mascot-profile-from-accent); }
|
|
234
|
+
49.5%, 50.5% { color: rgba(240, 244, 255, 0.96); }
|
|
235
|
+
58%, 100% { color: var(--mascot-profile-to-accent); }
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
@keyframes composer-mascot-profile-rim {
|
|
239
|
+
0%, 16% {
|
|
240
|
+
border-color: color-mix(in srgb, var(--mascot-profile-from-accent) 72%, transparent);
|
|
241
|
+
box-shadow: 0 0 12px color-mix(in srgb, var(--mascot-profile-from-accent) 42%, transparent);
|
|
242
|
+
}
|
|
243
|
+
34% {
|
|
244
|
+
border-color: color-mix(in srgb, var(--mascot-profile-from-accent) 84%, white);
|
|
245
|
+
box-shadow: 0 0 15px color-mix(in srgb, var(--mascot-profile-from-accent) 48%, transparent);
|
|
246
|
+
}
|
|
247
|
+
50% {
|
|
248
|
+
border-color: rgba(246, 248, 255, 0.92);
|
|
249
|
+
box-shadow: 0 0 17px rgba(220, 226, 255, 0.46);
|
|
250
|
+
}
|
|
251
|
+
66% {
|
|
252
|
+
border-color: color-mix(in srgb, var(--mascot-profile-to-accent) 84%, white);
|
|
253
|
+
box-shadow: 0 0 15px color-mix(in srgb, var(--mascot-profile-to-accent) 48%, transparent);
|
|
254
|
+
}
|
|
255
|
+
84%, 100% {
|
|
256
|
+
border-color: color-mix(in srgb, var(--mascot-profile-to-accent) 72%, transparent);
|
|
257
|
+
box-shadow: 0 0 12px color-mix(in srgb, var(--mascot-profile-to-accent) 36%, transparent);
|
|
258
|
+
}
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
@keyframes composer-mascot-profile-contact-shadow {
|
|
262
|
+
0%, 100% { opacity: 1; transform: translateX(50%) scaleX(1); }
|
|
263
|
+
46%, 54% { opacity: 0; transform: translateX(50%) scaleX(0.25); }
|
|
264
|
+
}
|
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
@keyframes composer-mascot-land {
|
|
2
|
-
0%, 100% { transform: translateY(0) scale(1, 1); }
|
|
3
|
-
35% { transform: translateY(2px) scale(1.12, 0.86); }
|
|
4
|
-
70% { transform: translateY(-2px) scale(0.97, 1.03); }
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
.composer-mascot-land {
|
|
8
|
-
animation: composer-mascot-land 380ms ease-out;
|
|
9
|
-
transform-origin: bottom center;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
@media (prefers-reduced-motion: reduce) {
|
|
13
|
-
.composer-mascot-motion,
|
|
14
|
-
.composer-mascot-motion * {
|
|
15
|
-
animation: none !important;
|
|
16
|
-
transition: none !important;
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
[data-composer-mascot-motion='off'],
|
|
21
|
-
[data-composer-mascot-motion='off'] * { animation: none !important; transition: none !important; }
|
|
1
|
+
@keyframes composer-mascot-land {
|
|
2
|
+
0%, 100% { transform: translateY(0) scale(1, 1); }
|
|
3
|
+
35% { transform: translateY(2px) scale(1.12, 0.86); }
|
|
4
|
+
70% { transform: translateY(-2px) scale(0.97, 1.03); }
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.composer-mascot-land {
|
|
8
|
+
animation: composer-mascot-land 380ms ease-out;
|
|
9
|
+
transform-origin: bottom center;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
@media (prefers-reduced-motion: reduce) {
|
|
13
|
+
.composer-mascot-motion,
|
|
14
|
+
.composer-mascot-motion * {
|
|
15
|
+
animation: none !important;
|
|
16
|
+
transition: none !important;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
[data-composer-mascot-motion='off'],
|
|
21
|
+
[data-composer-mascot-motion='off'] * { animation: none !important; transition: none !important; }
|
package/dist/composer/types.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/composer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,OAAO,CAAA;AACzE,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAA;AACzD,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,OAAO,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAA;IACrG,UAAU,EAAE,gBAAgB,CAAA;IAC5B,KAAK,EAAE,WAAW,CAAA;IAClB,cAAc,EAAE,MAAM,CAAA;IACtB,eAAe,EAAE,KAAK,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,WAAW,CAAA;IAChE,KAAK,EAAE,UAAU,GAAG,MAAM,CAAA;IAC1B,UAAU,EAAE,OAAO,CAAA;IACnB,aAAa,EAAE,OAAO,CAAA;CACvB;AACD,MAAM,WAAW,mBAAmB;IAClC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,QAAQ,GAAG,IAAI,GAAG,KAAK,CAAA;IAChC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,WAAW,CAAC,EAAE;QAAE,UAAU,CAAC,EAAE,gBAAgB,CAAC;QAAC,KAAK,CAAC,EAAE,WAAW,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,SAAS,CAAA;KAAE,CAAA;IACvG,eAAe,CAAC,EAAE,qBAAqB,CAAC,iBAAiB,CAAC,CAAA;IAC1D,KAAK,CAAC,EAAE,qBAAqB,CAAC,OAAO,CAAC,CAAA;IACtC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,qBAAqB,KAAK,SAAS,CAAA;IACrF,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,KAAK,EAAE,MAAM,IAAI,KAAK,SAAS,CAAA;IACjF,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAA;CACpD"}
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/composer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,OAAO,CAAA;AACzE,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAA;AACzD,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,OAAO,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAA;IACrG,UAAU,EAAE,gBAAgB,CAAA;IAC5B,KAAK,EAAE,WAAW,CAAA;IAClB,cAAc,EAAE,MAAM,CAAA;IACtB,eAAe,EAAE,KAAK,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,WAAW,CAAA;IAChE,KAAK,EAAE,UAAU,GAAG,MAAM,CAAA;IAC1B,UAAU,EAAE,OAAO,CAAA;IACnB,aAAa,EAAE,OAAO,CAAA;CACvB;AACD,MAAM,WAAW,mBAAmB;IAClC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,QAAQ,GAAG,IAAI,GAAG,KAAK,CAAA;IAChC,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IACxB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,WAAW,CAAC,EAAE;QAAE,UAAU,CAAC,EAAE,gBAAgB,CAAC;QAAC,KAAK,CAAC,EAAE,WAAW,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,SAAS,CAAA;KAAE,CAAA;IACvG,eAAe,CAAC,EAAE,qBAAqB,CAAC,iBAAiB,CAAC,CAAA;IAC1D,KAAK,CAAC,EAAE,qBAAqB,CAAC,OAAO,CAAC,CAAA;IACtC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,qBAAqB,KAAK,SAAS,CAAA;IACrF,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,KAAK,EAAE,MAAM,IAAI,KAAK,SAAS,CAAA;IACjF,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAA;CACpD"}
|
|
@@ -11,6 +11,7 @@ interface ComposerAvatarBehaviorOptions {
|
|
|
11
11
|
activeIdle: boolean;
|
|
12
12
|
bounceSignal: number;
|
|
13
13
|
reducedMotion: boolean;
|
|
14
|
+
directionalGestures?: boolean;
|
|
14
15
|
}
|
|
15
16
|
export declare function useComposerAvatarBehavior(options: ComposerAvatarBehaviorOptions): {
|
|
16
17
|
pose: AvatarPose;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useComposerAvatarBehavior.d.ts","sourceRoot":"","sources":["../../src/composer/useComposerAvatarBehavior.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAC7C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAElD,MAAM,MAAM,qBAAqB,GAAG,OAAO,GAAG,WAAW,GAAG,YAAY,GAAG,aAAa,CAAA;AAExF,UAAU,6BAA6B;IACrC,YAAY,EAAE,UAAU,CAAA;IACxB,cAAc,EAAE,gBAAgB,CAAA;IAChC,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,OAAO,CAAA;IACjB,MAAM,EAAE,OAAO,CAAA;IACf,UAAU,EAAE,OAAO,CAAA;IACnB,YAAY,EAAE,MAAM,CAAA;IACpB,aAAa,EAAE,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"useComposerAvatarBehavior.d.ts","sourceRoot":"","sources":["../../src/composer/useComposerAvatarBehavior.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAC7C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAElD,MAAM,MAAM,qBAAqB,GAAG,OAAO,GAAG,WAAW,GAAG,YAAY,GAAG,aAAa,CAAA;AAExF,UAAU,6BAA6B;IACrC,YAAY,EAAE,UAAU,CAAA;IACxB,cAAc,EAAE,gBAAgB,CAAA;IAChC,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,OAAO,CAAA;IACjB,MAAM,EAAE,OAAO,CAAA;IACf,UAAU,EAAE,OAAO,CAAA;IACnB,YAAY,EAAE,MAAM,CAAA;IACpB,aAAa,EAAE,OAAO,CAAA;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAA;CAC9B;AAED,wBAAgB,yBAAyB,CAAC,OAAO,EAAE,6BAA6B,GAAG;IACjF,IAAI,EAAE,UAAU,CAAA;IAChB,UAAU,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,OAAO,GAAG,SAAS,CAAA;IAC/D,OAAO,EAAE,qBAAqB,GAAG,SAAS,CAAA;IAC1C,eAAe,EAAE,MAAM,CAAA;IACvB,YAAY,EAAE,MAAM,IAAI,CAAA;IACxB,eAAe,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;CAC5C,CAuEA"}
|
|
@@ -36,7 +36,7 @@ export function useComposerAvatarBehavior(options) {
|
|
|
36
36
|
: value < 0.86
|
|
37
37
|
? 'antenna-bob'
|
|
38
38
|
: undefined;
|
|
39
|
-
if (next) {
|
|
39
|
+
if (next && (options.directionalGestures !== false || (next !== 'look-left' && next !== 'look-right'))) {
|
|
40
40
|
setGesture(next);
|
|
41
41
|
setGestureSequence((sequence) => sequence + 1);
|
|
42
42
|
}
|
|
@@ -46,7 +46,7 @@ export function useComposerAvatarBehavior(options) {
|
|
|
46
46
|
};
|
|
47
47
|
schedule();
|
|
48
48
|
return () => { window.clearTimeout(timer); };
|
|
49
|
-
}, [options.sleeping, options.activeIdle, options.reducedMotion, options.baseExpression]);
|
|
49
|
+
}, [options.sleeping, options.activeIdle, options.reducedMotion, options.baseExpression, options.directionalGestures]);
|
|
50
50
|
const clearGesture = useCallback(() => setGesture(undefined), []);
|
|
51
51
|
const completeGesture = useCallback((sequence) => {
|
|
52
52
|
setGesture((current) => sequence === gestureSequence ? undefined : current);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useComposerAvatarBehavior.js","sourceRoot":"","sources":["../../src/composer/useComposerAvatarBehavior.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"useComposerAvatarBehavior.js","sourceRoot":"","sources":["../../src/composer/useComposerAvatarBehavior.ts"],"names":[],"mappings":"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"}
|