@mumulinya167/ccm-pet-assets 2.0.2 → 2.0.6

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.
Files changed (141) hide show
  1. package/assets/calico/calico-idle-follow.svg +324 -324
  2. package/assets/calico.svg +324 -324
  3. package/assets/clawd/LICENSE +22 -22
  4. package/assets/clawd/clawd-about-hero.svg +202 -202
  5. package/assets/clawd/clawd-collapse-sleep.svg +247 -247
  6. package/assets/clawd/clawd-error.svg +94 -94
  7. package/assets/clawd/clawd-happy.svg +160 -160
  8. package/assets/clawd/clawd-headphones-groove.svg +194 -194
  9. package/assets/clawd/clawd-idle-bubble.svg +180 -180
  10. package/assets/clawd/clawd-idle-collapse.svg +101 -101
  11. package/assets/clawd/clawd-idle-doze.svg +72 -72
  12. package/assets/clawd/clawd-idle-follow.svg +64 -64
  13. package/assets/clawd/clawd-idle-living.svg +195 -195
  14. package/assets/clawd/clawd-idle-look.svg +115 -115
  15. package/assets/clawd/clawd-idle-reading.svg +252 -252
  16. package/assets/clawd/clawd-idle-yawn.svg +158 -158
  17. package/assets/clawd/clawd-mini-alert.svg +129 -129
  18. package/assets/clawd/clawd-mini-crabwalk.svg +76 -76
  19. package/assets/clawd/clawd-mini-enter-sleep.svg +64 -64
  20. package/assets/clawd/clawd-mini-enter.svg +114 -114
  21. package/assets/clawd/clawd-mini-happy.svg +124 -124
  22. package/assets/clawd/clawd-mini-idle.svg +83 -83
  23. package/assets/clawd/clawd-mini-peek.svg +82 -82
  24. package/assets/clawd/clawd-mini-sleep.svg +112 -112
  25. package/assets/clawd/clawd-mini-typing.svg +153 -153
  26. package/assets/clawd/clawd-notification.svg +438 -438
  27. package/assets/clawd/clawd-react-annoyed.svg +167 -167
  28. package/assets/clawd/clawd-react-double-jump.svg +229 -229
  29. package/assets/clawd/clawd-react-double.svg +108 -108
  30. package/assets/clawd/clawd-react-drag.svg +102 -102
  31. package/assets/clawd/clawd-react-left.svg +102 -102
  32. package/assets/clawd/clawd-react-right.svg +102 -102
  33. package/assets/clawd/clawd-sleeping.svg +117 -117
  34. package/assets/clawd/clawd-static-base.svg +20 -20
  35. package/assets/clawd/clawd-wake.svg +277 -277
  36. package/assets/clawd/clawd-working-building.svg +329 -329
  37. package/assets/clawd/clawd-working-carrying.svg +178 -178
  38. package/assets/clawd/clawd-working-debugger.svg +245 -245
  39. package/assets/clawd/clawd-working-juggling.svg +183 -183
  40. package/assets/clawd/clawd-working-sweeping.svg +248 -248
  41. package/assets/clawd/clawd-working-thinking.svg +501 -501
  42. package/assets/clawd/clawd-working-typing-boss.svg +307 -307
  43. package/assets/clawd/clawd-working-typing.svg +273 -273
  44. package/assets/clawd/clawd-working-ultrathink.svg +166 -166
  45. package/assets/clawd/clawd-working-wizard.svg +356 -356
  46. package/assets/clawd.svg +64 -64
  47. package/assets/cloudling/cloudling/cloudling-attention.svg +379 -379
  48. package/assets/cloudling/cloudling/cloudling-building.svg +667 -667
  49. package/assets/cloudling/cloudling/cloudling-carrying.svg +604 -604
  50. package/assets/cloudling/cloudling/cloudling-conducting.svg +616 -616
  51. package/assets/cloudling/cloudling/cloudling-dozing-to-sleeping.svg +578 -578
  52. package/assets/cloudling/cloudling/cloudling-dozing.svg +358 -358
  53. package/assets/cloudling/cloudling/cloudling-error.svg +428 -428
  54. package/assets/cloudling/cloudling/cloudling-idle-reading.svg +658 -658
  55. package/assets/cloudling/cloudling/cloudling-idle-to-dozing.svg +568 -568
  56. package/assets/cloudling/cloudling/cloudling-idle-to-sleeping.svg +811 -811
  57. package/assets/cloudling/cloudling/cloudling-idle.svg +255 -255
  58. package/assets/cloudling/cloudling/cloudling-juggling.svg +648 -648
  59. package/assets/cloudling/cloudling/cloudling-mini-alert.svg +389 -389
  60. package/assets/cloudling/cloudling/cloudling-mini-crabwalk.svg +335 -335
  61. package/assets/cloudling/cloudling/cloudling-mini-enter-roll-in.svg +225 -225
  62. package/assets/cloudling/cloudling/cloudling-mini-enter-sleep.svg +231 -231
  63. package/assets/cloudling/cloudling/cloudling-mini-happy.svg +370 -370
  64. package/assets/cloudling/cloudling/cloudling-mini-idle.svg +279 -279
  65. package/assets/cloudling/cloudling/cloudling-mini-peek.svg +327 -327
  66. package/assets/cloudling/cloudling/cloudling-mini-sleep.svg +260 -260
  67. package/assets/cloudling/cloudling/cloudling-mini-typing.svg +691 -691
  68. package/assets/cloudling/cloudling/cloudling-notification.svg +493 -493
  69. package/assets/cloudling/cloudling/cloudling-react-drag.svg +83 -83
  70. package/assets/cloudling/cloudling/cloudling-sleeping-to-idle.svg +555 -555
  71. package/assets/cloudling/cloudling/cloudling-sleeping.svg +500 -500
  72. package/assets/cloudling/cloudling/cloudling-sweeping.svg +292 -292
  73. package/assets/cloudling/cloudling/cloudling-thinking.svg +719 -719
  74. package/assets/cloudling/cloudling/cloudling-typing.svg +354 -354
  75. package/assets/cloudling/cloudling-attention.svg +379 -379
  76. package/assets/cloudling/cloudling-building.svg +667 -667
  77. package/assets/cloudling/cloudling-carrying.svg +604 -604
  78. package/assets/cloudling/cloudling-conducting.svg +616 -616
  79. package/assets/cloudling/cloudling-dozing-to-sleeping.svg +578 -578
  80. package/assets/cloudling/cloudling-dozing.svg +358 -358
  81. package/assets/cloudling/cloudling-error.svg +428 -428
  82. package/assets/cloudling/cloudling-idle-reading.svg +658 -658
  83. package/assets/cloudling/cloudling-idle-to-dozing.svg +568 -568
  84. package/assets/cloudling/cloudling-idle-to-sleeping.svg +811 -811
  85. package/assets/cloudling/cloudling-idle.svg +255 -255
  86. package/assets/cloudling/cloudling-juggling.svg +648 -648
  87. package/assets/cloudling/cloudling-mini-alert.svg +389 -389
  88. package/assets/cloudling/cloudling-mini-crabwalk.svg +335 -335
  89. package/assets/cloudling/cloudling-mini-enter-roll-in.svg +225 -225
  90. package/assets/cloudling/cloudling-mini-enter-sleep.svg +231 -231
  91. package/assets/cloudling/cloudling-mini-happy.svg +370 -370
  92. package/assets/cloudling/cloudling-mini-idle.svg +279 -279
  93. package/assets/cloudling/cloudling-mini-peek.svg +327 -327
  94. package/assets/cloudling/cloudling-mini-sleep.svg +260 -260
  95. package/assets/cloudling/cloudling-mini-typing.svg +691 -691
  96. package/assets/cloudling/cloudling-notification.svg +493 -493
  97. package/assets/cloudling/cloudling-react-drag.svg +83 -83
  98. package/assets/cloudling/cloudling-sleeping-to-idle.svg +555 -555
  99. package/assets/cloudling/cloudling-sleeping.svg +500 -500
  100. package/assets/cloudling/cloudling-sweeping.svg +292 -292
  101. package/assets/cloudling/cloudling-thinking.svg +719 -719
  102. package/assets/cloudling/cloudling-typing.svg +354 -354
  103. package/assets/cloudling.svg +255 -255
  104. package/assets/ghost-attention.svg +19 -19
  105. package/assets/ghost-carrying.svg +19 -19
  106. package/assets/ghost-collapsing.svg +19 -19
  107. package/assets/ghost-dozing.svg +23 -23
  108. package/assets/ghost-error.svg +19 -19
  109. package/assets/ghost-happy.svg +23 -23
  110. package/assets/ghost-idle.svg +11 -11
  111. package/assets/ghost-juggling.svg +19 -19
  112. package/assets/ghost-notification.svg +19 -19
  113. package/assets/ghost-react-double.svg +23 -23
  114. package/assets/ghost-react-drag.svg +23 -23
  115. package/assets/ghost-react-left.svg +19 -19
  116. package/assets/ghost-react-right.svg +19 -19
  117. package/assets/ghost-sleeping.svg +19 -19
  118. package/assets/ghost-sweeping.svg +19 -19
  119. package/assets/ghost-waking.svg +19 -19
  120. package/assets/ghost-yawning.svg +23 -23
  121. package/assets/ghost.svg +11 -11
  122. package/assets/robot-attention.svg +19 -19
  123. package/assets/robot-carrying.svg +19 -19
  124. package/assets/robot-collapsing.svg +19 -19
  125. package/assets/robot-dozing.svg +23 -23
  126. package/assets/robot-error.svg +19 -19
  127. package/assets/robot-happy.svg +23 -23
  128. package/assets/robot-idle.svg +11 -11
  129. package/assets/robot-juggling.svg +19 -19
  130. package/assets/robot-notification.svg +19 -19
  131. package/assets/robot-react-double.svg +23 -23
  132. package/assets/robot-react-drag.svg +23 -23
  133. package/assets/robot-react-left.svg +19 -19
  134. package/assets/robot-react-right.svg +19 -19
  135. package/assets/robot-sleeping.svg +19 -19
  136. package/assets/robot-sweeping.svg +19 -19
  137. package/assets/robot-waking.svg +19 -19
  138. package/assets/robot-yawning.svg +23 -23
  139. package/assets/robot.svg +11 -11
  140. package/manifest.json +280 -280
  141. package/package.json +1 -1
@@ -1,501 +1,501 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
2
- <!-- clawd thinking bubble v25 (2026-05-15)
3
-
4
- v25 = v24 + dreamy edge-flow rewrite.
5
- Lu's call: v24 flow pixels read as broken — codex used
6
- step-end (hard on/off) + translate jumps + scattered
7
- positions across different sides, so the eye reads
8
- "buggy detached pixel" not "edge flow".
9
-
10
- Fix: 4 pale-blue 1x1 pixels per bubble, each sitting
11
- exactly 1px outside one flat edge (top / right / bottom
12
- / left of rim). They fade in and out softly via
13
- ease-in-out opacity only (no transform), staggered 6%
14
- apart so adjacent pixels overlap during their fades.
15
- The eye reads this as a single highlight marching
16
- clockwise around the rim — the dreamy / imagining /
17
- thought-cloud signature Lu asked for.
18
-
19
- v24 = v23 + "脚站定不动".
20
- Lu's call: legs jiggling per body-lean reads as restless.
21
- Fix: lift the 4 leg <rect>s out of #clawd-body so they do
22
- NOT inherit body-attend rotate/translate or body-breathe
23
- scale. Torso / arm / eyes still inherit body motion as
24
- before. The leg-*-think keyframes are no longer
25
- referenced (kept defined for diff clarity, no perf cost).
26
-
27
- Side note: torso底部边缘旋转时会与脚顶部出现 0.1-0.2px
28
- 的极小错位 (max body-attend rotate ≈ 2.6deg around y=13
29
- 即脚顶部基线), 桌宠尺寸下肉眼不可见。
30
-
31
- v23 from v22 critique: "not cute / not精致".
32
- Five fixes layered on top of v22 timing:
33
- 1. Bubble tail: chat-style stair removed.
34
- Now a real "thought bubble chain" — main bubble +
35
- two recurring small puffs (1px and 0.5px) trailing
36
- down to clawd's head. This is the manga thought-cloud
37
- signature; clawd looks like he is thinking, not being
38
- messaged.
39
- 2. Eyes react: rect eyes during the thinking hold
40
- switch to ^^ smile eyes for a "got it!" beat
41
- during the third dot reveal, then blink back to rect
42
- before the bubble exits. Uses technique 14
43
- (blink-cover swap from rect to smile).
44
- 3. Inspiration sparkle: a small + pops above the
45
- bubble exactly when the smile happens, technique 8
46
- "double-flash" reused as a single emphatic blink.
47
- 4. Chin-rest arm now visible: same-side arm rotates
48
- ~50deg with a translate so the hand actually reaches
49
- the cheek/chin area, not the previous +22deg micro-tilt.
50
- 5. Bubble tone switched to white (#FFFFFF), with dots
51
- in a slightly deeper Clawd blue (#256891) so they read
52
- clearly inside the bubble.
53
- 6. White bubble gets subtle pale-blue pixels outside the
54
- rim, stepping around the outer contour for a small
55
- pixel-flow feel while keeping the interior clean.
56
-
57
- Timing, 12s loop (three slow dot reveals per side):
58
- 0-3% idle
59
- 3-7% notice left + left bubble arrives
60
- 7-43% left thinking, three slow dot reveals
61
- 43-44% blink (cover swap rect -> smile)
62
- 44-48% "got it" smile + + flash
63
- 48-49% blink (cover swap smile -> rect)
64
- 49-52% left bubble leaves
65
- 52-54% very short neutral reset
66
- 54-58% notice right + right bubble arrives
67
- 58-92% right thinking, three slow dot reveals
68
- 92-93% blink (cover swap rect -> smile)
69
- 93-96% "got it" smile + + flash
70
- 96-97% blink (cover swap smile -> rect)
71
- 97-99% right bubble leaves
72
- 99-100% short loop-end idle
73
- -->
74
-
75
- <defs>
76
- <style>
77
- #ground-shadow {
78
- transform-box: view-box;
79
- transform-origin: 7.5px 15.5px;
80
- animation: shadow-think 12s infinite ease-in-out;
81
- }
82
-
83
- .body-breathe {
84
- transform-box: view-box;
85
- transform-origin: 7.5px 13px;
86
- animation: body-breathe 12s infinite ease-in-out;
87
- }
88
-
89
- .body-attend {
90
- transform-box: view-box;
91
- transform-origin: 7.5px 13px;
92
- animation: body-attend 12s infinite ease-in-out;
93
- }
94
-
95
- .arm-left,
96
- .arm-right,
97
- .leg-left-inner,
98
- .leg-left-outer,
99
- .leg-right-inner,
100
- .leg-right-outer {
101
- transform-box: fill-box;
102
- transform-origin: 50% 0%;
103
- }
104
-
105
- .arm-left {
106
- transform-origin: 100% 0%;
107
- animation: arm-left-think 12s infinite ease-in-out;
108
- }
109
- .arm-right {
110
- transform-origin: 0% 0%;
111
- animation: arm-right-think 12s infinite ease-in-out;
112
- }
113
- .leg-right-inner { animation: leg-right-inner-think 12s infinite ease-in-out; }
114
- .leg-right-outer { animation: leg-right-outer-think 12s infinite ease-in-out; }
115
- .leg-left-inner { animation: leg-left-inner-think 12s infinite ease-in-out; }
116
- .leg-left-outer { animation: leg-left-outer-think 12s infinite ease-in-out; }
117
-
118
- .eyes {
119
- transform-box: view-box;
120
- transform-origin: 7.5px 9px;
121
- animation: eyes-think 12s infinite ease-in-out;
122
- }
123
-
124
- .eyes-rect { animation: eyes-rect-vis 12s infinite step-end; }
125
- .eyes-smile { opacity: 0; animation: eyes-smile-vis 12s infinite step-end; }
126
-
127
- .left-bubble,
128
- .right-bubble {
129
- transform-box: fill-box;
130
- transform-origin: 50% 100%;
131
- opacity: 0;
132
- }
133
- .left-bubble { animation: left-bubble-life 12s infinite ease-in-out; }
134
- .right-bubble { animation: right-bubble-life 12s infinite ease-in-out; }
135
-
136
- .dot { opacity: 0; }
137
- .left-bubble .dot1 { animation: left-dot-1 12s infinite step-end; }
138
- .left-bubble .dot2 { animation: left-dot-2 12s infinite step-end; }
139
- .left-bubble .dot3 { animation: left-dot-3 12s infinite step-end; }
140
- .right-bubble .dot1 { animation: right-dot-1 12s infinite step-end; }
141
- .right-bubble .dot2 { animation: right-dot-2 12s infinite step-end; }
142
- .right-bubble .dot3 { animation: right-dot-3 12s infinite step-end; }
143
-
144
- .bubble-flow {
145
- opacity: 0;
146
- }
147
- .left-bubble .flow1 { animation: left-flow-1 12s infinite ease-in-out; }
148
- .left-bubble .flow2 { animation: left-flow-2 12s infinite ease-in-out; }
149
- .left-bubble .flow3 { animation: left-flow-3 12s infinite ease-in-out; }
150
- .left-bubble .flow4 { animation: left-flow-4 12s infinite ease-in-out; }
151
- .right-bubble .flow1 { animation: right-flow-1 12s infinite ease-in-out; }
152
- .right-bubble .flow2 { animation: right-flow-2 12s infinite ease-in-out; }
153
- .right-bubble .flow3 { animation: right-flow-3 12s infinite ease-in-out; }
154
- .right-bubble .flow4 { animation: right-flow-4 12s infinite ease-in-out; }
155
-
156
- .left-spark,
157
- .right-spark {
158
- transform-box: fill-box;
159
- transform-origin: 50% 50%;
160
- opacity: 0;
161
- }
162
- .left-spark { animation: left-spark-bling 12s infinite ease-out; }
163
- .right-spark { animation: right-spark-bling 12s infinite ease-out; }
164
-
165
- @keyframes shadow-think {
166
- 0%, 3%, 52%, 99%, 100% { opacity: 0.5; transform: translateX(0) scaleX(1); }
167
- 15%, 43% { opacity: 0.4; transform: translateX(-0.28px) scaleX(0.9); }
168
- 70%, 96% { opacity: 0.4; transform: translateX(0.28px) scaleX(0.9); }
169
- }
170
-
171
- @keyframes body-breathe {
172
- 0%, 3%, 52%, 99%, 100% { transform: scale(1, 1) translateY(0); }
173
- 15%, 29%, 43%, 70%, 84%, 96% { transform: scale(1.006, 0.994) translateY(0.08px); }
174
- 22%, 36%, 64%, 78%, 90% { transform: scale(1.014, 0.986) translateY(0.18px); }
175
- 54% { transform: scale(0.996, 1.004) translateY(-0.08px); }
176
- }
177
-
178
- @keyframes body-attend {
179
- 0%, 3%, 52%, 99%, 100% { transform: translate(0, 0) rotate(0deg); }
180
- 7% { transform: translate(-0.3px, 0.08px) rotate(-1.6deg); }
181
- 15% { transform: translate(-0.48px, 0.14px) rotate(-2.6deg); }
182
- 30% { transform: translate(-0.45px, 0.1px) rotate(-2.3deg); }
183
- 42% { transform: translate(-0.4px, 0.08px) rotate(-2.0deg); }
184
- 49% { transform: translate(-0.2px, 0.04px) rotate(-0.8deg); }
185
- 51% { transform: translate(-0.05px, 0) rotate(-0.2deg); }
186
- 54% { transform: translate(0, 0.08px) rotate(0deg); }
187
- 58% { transform: translate(0.3px, 0.08px) rotate(1.6deg); }
188
- 70% { transform: translate(0.48px, 0.14px) rotate(2.6deg); }
189
- 84% { transform: translate(0.45px, 0.1px) rotate(2.3deg); }
190
- 96% { transform: translate(0.32px, 0.06px) rotate(1.4deg); }
191
- 98% { transform: translate(0.05px, 0) rotate(0.2deg); }
192
- }
193
-
194
- /*
195
- v23 chin-rest arm: noticeable lift instead of v22's
196
- invisible +22deg / -1px microtilt. Same-side arm
197
- rotates ~52deg + translate so the hand physically
198
- reaches the cheek line.
199
- */
200
- /*
201
- v23 arm: per Lu's call, restored verbatim from v22.
202
- v22's micro-tilt feels "still" but does not stutter.
203
- The other v23 changes (bubble chain / smile eyes /
204
- sparkle / timing) are kept on top.
205
- */
206
- @keyframes arm-left-think {
207
- 0%, 3%, 52%, 99%, 100% { transform: translate(0, 0) rotate(0deg); }
208
- 7% { transform: translate(0.18px, -0.7px) rotate(14deg); }
209
- 15%, 49% { transform: translate(0.35px, -1.05px) rotate(22deg); }
210
- 30% { transform: translate(0.28px, -0.92px) rotate(26deg); }
211
- 58%, 96% { transform: translate(-0.08px, 0.45px) rotate(0deg); }
212
- 84% { transform: translate(-0.12px, 0.55px) rotate(0deg); }
213
- }
214
- @keyframes arm-right-think {
215
- 0%, 3%, 52%, 99%, 100% { transform: translate(0, 0) rotate(0deg); }
216
- 7%, 49% { transform: translate(0.08px, 0.45px) rotate(0deg); }
217
- 30% { transform: translate(0.12px, 0.55px) rotate(0deg); }
218
- 58% { transform: translate(-0.18px, -0.7px) rotate(-14deg); }
219
- 70%, 96% { transform: translate(-0.35px, -1.05px) rotate(-22deg); }
220
- 84% { transform: translate(-0.28px, -0.92px) rotate(-26deg); }
221
- }
222
-
223
- @keyframes leg-right-inner-think {
224
- 0%, 3%, 39%, 98%, 100% { transform: rotate(0deg) translateY(0); }
225
- 8%, 34% { transform: rotate(7deg) translateY(-0.12px); }
226
- 20% { transform: rotate(9deg) translateY(-0.2px); }
227
- 42%, 94% { transform: rotate(-4deg) translateY(-0.08px); }
228
- 70% { transform: rotate(-5deg) translateY(-0.14px); }
229
- }
230
- @keyframes leg-right-outer-think {
231
- 0%, 3%, 39%, 98%, 100% { transform: rotate(0deg) translateY(0); }
232
- 8%, 34% { transform: rotate(10deg) translateY(-0.18px); }
233
- 20% { transform: rotate(12deg) translateY(-0.26px); }
234
- 42%, 94% { transform: rotate(-5deg) translateY(-0.1px); }
235
- 70% { transform: rotate(-6deg) translateY(-0.16px); }
236
- }
237
- @keyframes leg-left-inner-think {
238
- 0%, 3%, 39%, 98%, 100% { transform: rotate(0deg) translateY(0); }
239
- 8%, 34% { transform: rotate(4deg) translateY(-0.08px); }
240
- 20% { transform: rotate(5deg) translateY(-0.14px); }
241
- 42%, 94% { transform: rotate(-7deg) translateY(-0.12px); }
242
- 70% { transform: rotate(-9deg) translateY(-0.2px); }
243
- }
244
- @keyframes leg-left-outer-think {
245
- 0%, 3%, 39%, 98%, 100% { transform: rotate(0deg) translateY(0); }
246
- 8%, 34% { transform: rotate(5deg) translateY(-0.1px); }
247
- 20% { transform: rotate(6deg) translateY(-0.16px); }
248
- 42%, 94% { transform: rotate(-10deg) translateY(-0.18px); }
249
- 70% { transform: rotate(-12deg) translateY(-0.26px); }
250
- }
251
-
252
- /*
253
- v23 eyes: thinking squint + blink-cover swap to ^^ smile
254
- at 43%/48% (left) and 92%/97% (right).
255
- scaleY(0.85) during thinking = subtle squint.
256
- scaleY(0.12) at swap = full blink that hides the
257
- rect->smile / smile->rect transition.
258
- */
259
- @keyframes eyes-think {
260
- 0%, 3%, 52%, 99%, 100% { transform: translate(0, 0) scaleY(1); }
261
- 5% { transform: translate(-0.3px, -0.5px) scaleY(0.95); }
262
- 9%, 42% { transform: translate(-0.45px, -0.78px) scaleY(0.85); }
263
- 43% { transform: translate(-0.45px, -0.78px) scaleY(0.12); }
264
- 44%, 47% { transform: translate(-0.45px, -0.78px) scaleY(1); }
265
- 48% { transform: translate(-0.45px, -0.78px) scaleY(0.12); }
266
- 50% { transform: translate(-0.15px, -0.25px) scaleY(0.95); }
267
- 54% { transform: translate(0, 0) scaleY(0.18); }
268
- 55% { transform: translate(0.3px, -0.5px) scaleY(0.95); }
269
- 59%, 88% { transform: translate(0.45px, -0.78px) scaleY(0.85); }
270
- 92% { transform: translate(0.45px, -0.78px) scaleY(0.12); }
271
- 93%, 96% { transform: translate(0.45px, -0.78px) scaleY(1); }
272
- 97% { transform: translate(0.45px, -0.78px) scaleY(0.12); }
273
- 98% { transform: translate(0.2px, -0.4px) scaleY(0.95); }
274
- 100% { transform: translate(0, 0) scaleY(1); }
275
- }
276
-
277
- @keyframes eyes-rect-vis {
278
- 0% { opacity: 1; }
279
- 43% { opacity: 0; }
280
- 48% { opacity: 1; }
281
- 92% { opacity: 0; }
282
- 97% { opacity: 1; }
283
- }
284
- @keyframes eyes-smile-vis {
285
- 0% { opacity: 0; }
286
- 43% { opacity: 1; }
287
- 48% { opacity: 0; }
288
- 92% { opacity: 1; }
289
- 97% { opacity: 0; }
290
- }
291
-
292
- @keyframes left-bubble-life {
293
- 0%, 3% { opacity: 0; transform: translate(-0.2px, 0.7px) scale(0.82); }
294
- 5% { opacity: 0.75; transform: translate(-0.1px, 0.25px) scale(0.94); }
295
- 7% { opacity: 1; transform: translate(0, 0) scale(1.04); }
296
- 10%, 43% { opacity: 1; transform: translate(0, 0) scale(1); }
297
- 46% { opacity: 1; transform: translate(0, -0.2px) scale(1.02); }
298
- 48% { opacity: 1; transform: translate(0, -0.18px) scale(1.01); }
299
- 49% { opacity: 1; transform: translate(0, 0) scale(1); }
300
- 52% { opacity: 0; transform: translate(0, 0.65px) scale(0.9); }
301
- 53%, 100% { opacity: 0; transform: translate(0, 0.65px) scale(0.9); }
302
- }
303
-
304
- @keyframes right-bubble-life {
305
- 0%, 53% { opacity: 0; transform: translate(0.2px, 0.7px) scale(0.82); }
306
- 54% { opacity: 0.75; transform: translate(0.1px, 0.25px) scale(0.94); }
307
- 58% { opacity: 1; transform: translate(0, 0) scale(1.04); }
308
- 61%, 92% { opacity: 1; transform: translate(0, 0) scale(1); }
309
- 94% { opacity: 1; transform: translate(0, -0.2px) scale(1.02); }
310
- 96% { opacity: 1; transform: translate(0, -0.18px) scale(1.01); }
311
- 97% { opacity: 1; transform: translate(0, 0) scale(1); }
312
- 99% { opacity: 0; transform: translate(0, 0.65px) scale(0.9); }
313
- 100% { opacity: 0; transform: translate(0, 0.65px) scale(0.9); }
314
- }
315
-
316
- @keyframes left-dot-1 {
317
- 0%, 7.99%, 17.99%, 19.99%, 29.99%, 31.99%, 48.99%, 100% { opacity: 0; }
318
- 8%, 17.98%, 20%, 29.98%, 32%, 48.98% { opacity: 1; }
319
- }
320
- @keyframes left-dot-2 {
321
- 0%, 11.99%, 17.99%, 23.99%, 29.99%, 35.99%, 48.99%, 100% { opacity: 0; }
322
- 12%, 17.98%, 24%, 29.98%, 36%, 48.98% { opacity: 1; }
323
- }
324
- @keyframes left-dot-3 {
325
- 0%, 15.99%, 17.99%, 27.99%, 29.99%, 39.99%, 48.99%, 100% { opacity: 0; }
326
- 16%, 17.98%, 28%, 29.98%, 40%, 48.98% { opacity: 1; }
327
- }
328
- @keyframes right-dot-1 {
329
- 0%, 58.99%, 68.99%, 70.99%, 80.99%, 82.99%, 98.49%, 100% { opacity: 0; }
330
- 59%, 68.98%, 71%, 80.98%, 83%, 98.48% { opacity: 1; }
331
- }
332
- @keyframes right-dot-2 {
333
- 0%, 62.99%, 68.99%, 74.99%, 80.99%, 86.99%, 98.49%, 100% { opacity: 0; }
334
- 63%, 68.98%, 75%, 80.98%, 87%, 98.48% { opacity: 1; }
335
- }
336
- @keyframes right-dot-3 {
337
- 0%, 66.99%, 68.99%, 78.99%, 80.99%, 90.99%, 98.49%, 100% { opacity: 0; }
338
- 67%, 68.98%, 79%, 80.98%, 91%, 98.48% { opacity: 1; }
339
- }
340
-
341
- /*
342
- v25 edge-flow keyframes.
343
- Each pixel: opacity 0 -> 0.7 -> 0 over a 12% window,
344
- with 6% stagger between adjacent pixels so two are
345
- always overlapping mid-fade. Pure opacity, no transform
346
- (v24's translate jumps were the broken-pixel feel).
347
- Window math:
348
- left thinking phase = 10-43%
349
- right thinking phase = 60-92%
350
- flow1 = top rim, flow2 = right rim,
351
- flow3 = bottom rim, flow4 = left rim (clockwise).
352
- */
353
- @keyframes left-flow-1 {
354
- 0%, 10%, 22%, 100% { opacity: 0; }
355
- 14%, 18% { opacity: 0.7; }
356
- }
357
- @keyframes left-flow-2 {
358
- 0%, 16%, 28%, 100% { opacity: 0; }
359
- 20%, 24% { opacity: 0.7; }
360
- }
361
- @keyframes left-flow-3 {
362
- 0%, 22%, 34%, 100% { opacity: 0; }
363
- 26%, 30% { opacity: 0.7; }
364
- }
365
- @keyframes left-flow-4 {
366
- 0%, 28%, 40%, 100% { opacity: 0; }
367
- 32%, 36% { opacity: 0.7; }
368
- }
369
- @keyframes right-flow-1 {
370
- 0%, 62%, 74%, 100% { opacity: 0; }
371
- 66%, 70% { opacity: 0.7; }
372
- }
373
- @keyframes right-flow-2 {
374
- 0%, 68%, 80%, 100% { opacity: 0; }
375
- 72%, 76% { opacity: 0.7; }
376
- }
377
- @keyframes right-flow-3 {
378
- 0%, 74%, 86%, 100% { opacity: 0; }
379
- 78%, 82% { opacity: 0.7; }
380
- }
381
- @keyframes right-flow-4 {
382
- 0%, 80%, 92%, 100% { opacity: 0; }
383
- 84%, 88% { opacity: 0.7; }
384
- }
385
-
386
- /*
387
- v23 sparkle bling: single emphatic flash at "got it"
388
- moment (left 28-32% / right 71-82%).
389
- scale + opacity pulse from technique 8.
390
- */
391
- @keyframes left-spark-bling {
392
- 0%, 43%, 49%, 100% { opacity: 0; transform: scale(0.4); }
393
- 44% { opacity: 0; transform: scale(0.5); }
394
- 45% { opacity: 1; transform: scale(1.35); }
395
- 46.5% { opacity: 1; transform: scale(1); }
396
- 48% { opacity: 0.4; transform: scale(0.7); }
397
- }
398
- @keyframes right-spark-bling {
399
- 0%, 91%, 97%, 100% { opacity: 0; transform: scale(0.4); }
400
- 92% { opacity: 0; transform: scale(0.5); }
401
- 93% { opacity: 1; transform: scale(1.35); }
402
- 94.5% { opacity: 1; transform: scale(1); }
403
- 96% { opacity: 0.4; transform: scale(0.7); }
404
- }
405
- </style>
406
- </defs>
407
-
408
- <rect id="ground-shadow" x="3" y="15" width="9" height="1" fill="#000000" opacity="0.5"/>
409
-
410
- <!--
411
- v24: legs are lifted out of #clawd-body so they do not inherit
412
- body-attend (rotate/translate toward bubble) or body-breathe
413
- (scale). Rendered before #master-group so the torso (which is
414
- inside master-group) draws on top of the leg tops as before.
415
- -->
416
- <g id="legs-static" fill="#DE886D">
417
- <rect id="outer-left-leg" x="3" y="13" width="1" height="2"/>
418
- <rect id="inner-left-leg" x="5" y="13" width="1" height="2"/>
419
- <rect id="inner-right-leg" x="9" y="13" width="1" height="2"/>
420
- <rect id="outer-right-leg" x="11" y="13" width="1" height="2"/>
421
- </g>
422
-
423
- <g id="master-group">
424
- <g class="body-breathe">
425
- <g id="clawd-body" class="body-attend">
426
- <g id="body-color-group" fill="#DE886D">
427
- <rect id="torso" x="2" y="6" width="11" height="7"/>
428
- <rect class="arm-left" id="left-arm" x="0" y="9" width="2" height="2"/>
429
- <rect class="arm-right" id="right-arm" x="13" y="9" width="2" height="2"/>
430
- </g>
431
-
432
- <g class="eyes" id="eyes-color-group">
433
- <g class="eyes-rect" fill="#000000">
434
- <rect id="left-eye" x="4" y="8" width="1" height="2"/>
435
- <rect id="right-eye" x="10" y="8" width="1" height="2"/>
436
- </g>
437
- <g class="eyes-smile" fill="none" stroke="#000000" stroke-width="0.7" stroke-linecap="round" stroke-linejoin="round">
438
- <polyline points="3.5,9 4.5,8 5.5,9"/>
439
- <polyline points="9.5,9 10.5,8 11.5,9"/>
440
- </g>
441
- </g>
442
- </g>
443
- </g>
444
-
445
- <!--
446
- Left thought bubble.
447
- v23: bubble path lifted by 1px (path y -3..4 -> -4..3) so
448
- there is a 3px gap to clawd's head. Old chat-tail
449
- (0,4)(1,4)(1,5) deleted. New chain: 1x1 puff at (1,4) +
450
- 0.5x0.5 puff at (2,5.5) trailing toward clawd's head top
451
- (y=6).
452
- -->
453
- <g class="left-bubble">
454
- <path d="M-1 -4 H6 V-3 H7 V2 H6 V3 H-1 V2 H-2 V-3 H-1 Z" fill="#FFFFFF"/>
455
- <!-- v25 rim-flow pixels: clockwise top -> right -> bottom -> left -->
456
- <rect class="bubble-flow flow1" x="3" y="-5" width="1" height="1" fill="#BFEAFF"/>
457
- <rect class="bubble-flow flow2" x="8" y="0" width="1" height="1" fill="#BFEAFF"/>
458
- <rect class="bubble-flow flow3" x="4" y="4" width="1" height="1" fill="#BFEAFF"/>
459
- <rect class="bubble-flow flow4" x="-3" y="0" width="1" height="1" fill="#BFEAFF"/>
460
- <rect x="1" y="4" width="1" height="1" fill="#FFFFFF"/>
461
- <rect x="2" y="5.5" width="0.5" height="0.5" fill="#FFFFFF"/>
462
- <rect class="dot dot1" x="0" y="-1" width="1" height="1" fill="#256891"/>
463
- <rect class="dot dot2" x="2" y="-1" width="1" height="1" fill="#256891"/>
464
- <rect class="dot dot3" x="4" y="-1" width="1" height="1" fill="#256891"/>
465
- </g>
466
-
467
- <g class="right-bubble">
468
- <path d="M9 -4 H16 V-3 H17 V2 H16 V3 H9 V2 H8 V-3 H9 Z" fill="#FFFFFF"/>
469
- <!-- v25 rim-flow pixels: clockwise top -> right -> bottom -> left -->
470
- <rect class="bubble-flow flow1" x="12" y="-5" width="1" height="1" fill="#BFEAFF"/>
471
- <rect class="bubble-flow flow2" x="18" y="0" width="1" height="1" fill="#BFEAFF"/>
472
- <rect class="bubble-flow flow3" x="15" y="4" width="1" height="1" fill="#BFEAFF"/>
473
- <rect class="bubble-flow flow4" x="7" y="0" width="1" height="1" fill="#BFEAFF"/>
474
- <rect x="13" y="4" width="1" height="1" fill="#FFFFFF"/>
475
- <rect x="12.5" y="5.5" width="0.5" height="0.5" fill="#FFFFFF"/>
476
- <rect class="dot dot1" x="10" y="-1" width="1" height="1" fill="#256891"/>
477
- <rect class="dot dot2" x="12" y="-1" width="1" height="1" fill="#256891"/>
478
- <rect class="dot dot3" x="14" y="-1" width="1" height="1" fill="#256891"/>
479
- </g>
480
-
481
- <!--
482
- v23 inspiration sparkles. Pixel + (5 small rects) above
483
- each bubble, bling at the "got it" moment.
484
- Color #FFE066 (per technique 12 anti-boss-gold rule).
485
- -->
486
- <g class="left-spark">
487
- <rect x="6" y="-7" width="1" height="0.6" fill="#FFE066"/>
488
- <rect x="6" y="-6.4" width="1" height="1" fill="#FFE066"/>
489
- <rect x="6" y="-5.4" width="1" height="0.6" fill="#FFE066"/>
490
- <rect x="5" y="-6.4" width="1" height="1" fill="#FFE066"/>
491
- <rect x="7" y="-6.4" width="1" height="1" fill="#FFE066"/>
492
- </g>
493
- <g class="right-spark">
494
- <rect x="8" y="-7" width="1" height="0.6" fill="#FFE066"/>
495
- <rect x="8" y="-6.4" width="1" height="1" fill="#FFE066"/>
496
- <rect x="8" y="-5.4" width="1" height="0.6" fill="#FFE066"/>
497
- <rect x="7" y="-6.4" width="1" height="1" fill="#FFE066"/>
498
- <rect x="9" y="-6.4" width="1" height="1" fill="#FFE066"/>
499
- </g>
500
- </g>
501
- </svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
2
+ <!-- clawd thinking bubble v25 (2026-05-15)
3
+
4
+ v25 = v24 + dreamy edge-flow rewrite.
5
+ Lu's call: v24 flow pixels read as broken — codex used
6
+ step-end (hard on/off) + translate jumps + scattered
7
+ positions across different sides, so the eye reads
8
+ "buggy detached pixel" not "edge flow".
9
+
10
+ Fix: 4 pale-blue 1x1 pixels per bubble, each sitting
11
+ exactly 1px outside one flat edge (top / right / bottom
12
+ / left of rim). They fade in and out softly via
13
+ ease-in-out opacity only (no transform), staggered 6%
14
+ apart so adjacent pixels overlap during their fades.
15
+ The eye reads this as a single highlight marching
16
+ clockwise around the rim — the dreamy / imagining /
17
+ thought-cloud signature Lu asked for.
18
+
19
+ v24 = v23 + "脚站定不动".
20
+ Lu's call: legs jiggling per body-lean reads as restless.
21
+ Fix: lift the 4 leg <rect>s out of #clawd-body so they do
22
+ NOT inherit body-attend rotate/translate or body-breathe
23
+ scale. Torso / arm / eyes still inherit body motion as
24
+ before. The leg-*-think keyframes are no longer
25
+ referenced (kept defined for diff clarity, no perf cost).
26
+
27
+ Side note: torso底部边缘旋转时会与脚顶部出现 0.1-0.2px
28
+ 的极小错位 (max body-attend rotate ≈ 2.6deg around y=13
29
+ 即脚顶部基线), 桌宠尺寸下肉眼不可见。
30
+
31
+ v23 from v22 critique: "not cute / not精致".
32
+ Five fixes layered on top of v22 timing:
33
+ 1. Bubble tail: chat-style stair removed.
34
+ Now a real "thought bubble chain" — main bubble +
35
+ two recurring small puffs (1px and 0.5px) trailing
36
+ down to clawd's head. This is the manga thought-cloud
37
+ signature; clawd looks like he is thinking, not being
38
+ messaged.
39
+ 2. Eyes react: rect eyes during the thinking hold
40
+ switch to ^^ smile eyes for a "got it!" beat
41
+ during the third dot reveal, then blink back to rect
42
+ before the bubble exits. Uses technique 14
43
+ (blink-cover swap from rect to smile).
44
+ 3. Inspiration sparkle: a small + pops above the
45
+ bubble exactly when the smile happens, technique 8
46
+ "double-flash" reused as a single emphatic blink.
47
+ 4. Chin-rest arm now visible: same-side arm rotates
48
+ ~50deg with a translate so the hand actually reaches
49
+ the cheek/chin area, not the previous +22deg micro-tilt.
50
+ 5. Bubble tone switched to white (#FFFFFF), with dots
51
+ in a slightly deeper Clawd blue (#256891) so they read
52
+ clearly inside the bubble.
53
+ 6. White bubble gets subtle pale-blue pixels outside the
54
+ rim, stepping around the outer contour for a small
55
+ pixel-flow feel while keeping the interior clean.
56
+
57
+ Timing, 12s loop (three slow dot reveals per side):
58
+ 0-3% idle
59
+ 3-7% notice left + left bubble arrives
60
+ 7-43% left thinking, three slow dot reveals
61
+ 43-44% blink (cover swap rect -> smile)
62
+ 44-48% "got it" smile + + flash
63
+ 48-49% blink (cover swap smile -> rect)
64
+ 49-52% left bubble leaves
65
+ 52-54% very short neutral reset
66
+ 54-58% notice right + right bubble arrives
67
+ 58-92% right thinking, three slow dot reveals
68
+ 92-93% blink (cover swap rect -> smile)
69
+ 93-96% "got it" smile + + flash
70
+ 96-97% blink (cover swap smile -> rect)
71
+ 97-99% right bubble leaves
72
+ 99-100% short loop-end idle
73
+ -->
74
+
75
+ <defs>
76
+ <style>
77
+ #ground-shadow {
78
+ transform-box: view-box;
79
+ transform-origin: 7.5px 15.5px;
80
+ animation: shadow-think 12s infinite ease-in-out;
81
+ }
82
+
83
+ .body-breathe {
84
+ transform-box: view-box;
85
+ transform-origin: 7.5px 13px;
86
+ animation: body-breathe 12s infinite ease-in-out;
87
+ }
88
+
89
+ .body-attend {
90
+ transform-box: view-box;
91
+ transform-origin: 7.5px 13px;
92
+ animation: body-attend 12s infinite ease-in-out;
93
+ }
94
+
95
+ .arm-left,
96
+ .arm-right,
97
+ .leg-left-inner,
98
+ .leg-left-outer,
99
+ .leg-right-inner,
100
+ .leg-right-outer {
101
+ transform-box: fill-box;
102
+ transform-origin: 50% 0%;
103
+ }
104
+
105
+ .arm-left {
106
+ transform-origin: 100% 0%;
107
+ animation: arm-left-think 12s infinite ease-in-out;
108
+ }
109
+ .arm-right {
110
+ transform-origin: 0% 0%;
111
+ animation: arm-right-think 12s infinite ease-in-out;
112
+ }
113
+ .leg-right-inner { animation: leg-right-inner-think 12s infinite ease-in-out; }
114
+ .leg-right-outer { animation: leg-right-outer-think 12s infinite ease-in-out; }
115
+ .leg-left-inner { animation: leg-left-inner-think 12s infinite ease-in-out; }
116
+ .leg-left-outer { animation: leg-left-outer-think 12s infinite ease-in-out; }
117
+
118
+ .eyes {
119
+ transform-box: view-box;
120
+ transform-origin: 7.5px 9px;
121
+ animation: eyes-think 12s infinite ease-in-out;
122
+ }
123
+
124
+ .eyes-rect { animation: eyes-rect-vis 12s infinite step-end; }
125
+ .eyes-smile { opacity: 0; animation: eyes-smile-vis 12s infinite step-end; }
126
+
127
+ .left-bubble,
128
+ .right-bubble {
129
+ transform-box: fill-box;
130
+ transform-origin: 50% 100%;
131
+ opacity: 0;
132
+ }
133
+ .left-bubble { animation: left-bubble-life 12s infinite ease-in-out; }
134
+ .right-bubble { animation: right-bubble-life 12s infinite ease-in-out; }
135
+
136
+ .dot { opacity: 0; }
137
+ .left-bubble .dot1 { animation: left-dot-1 12s infinite step-end; }
138
+ .left-bubble .dot2 { animation: left-dot-2 12s infinite step-end; }
139
+ .left-bubble .dot3 { animation: left-dot-3 12s infinite step-end; }
140
+ .right-bubble .dot1 { animation: right-dot-1 12s infinite step-end; }
141
+ .right-bubble .dot2 { animation: right-dot-2 12s infinite step-end; }
142
+ .right-bubble .dot3 { animation: right-dot-3 12s infinite step-end; }
143
+
144
+ .bubble-flow {
145
+ opacity: 0;
146
+ }
147
+ .left-bubble .flow1 { animation: left-flow-1 12s infinite ease-in-out; }
148
+ .left-bubble .flow2 { animation: left-flow-2 12s infinite ease-in-out; }
149
+ .left-bubble .flow3 { animation: left-flow-3 12s infinite ease-in-out; }
150
+ .left-bubble .flow4 { animation: left-flow-4 12s infinite ease-in-out; }
151
+ .right-bubble .flow1 { animation: right-flow-1 12s infinite ease-in-out; }
152
+ .right-bubble .flow2 { animation: right-flow-2 12s infinite ease-in-out; }
153
+ .right-bubble .flow3 { animation: right-flow-3 12s infinite ease-in-out; }
154
+ .right-bubble .flow4 { animation: right-flow-4 12s infinite ease-in-out; }
155
+
156
+ .left-spark,
157
+ .right-spark {
158
+ transform-box: fill-box;
159
+ transform-origin: 50% 50%;
160
+ opacity: 0;
161
+ }
162
+ .left-spark { animation: left-spark-bling 12s infinite ease-out; }
163
+ .right-spark { animation: right-spark-bling 12s infinite ease-out; }
164
+
165
+ @keyframes shadow-think {
166
+ 0%, 3%, 52%, 99%, 100% { opacity: 0.5; transform: translateX(0) scaleX(1); }
167
+ 15%, 43% { opacity: 0.4; transform: translateX(-0.28px) scaleX(0.9); }
168
+ 70%, 96% { opacity: 0.4; transform: translateX(0.28px) scaleX(0.9); }
169
+ }
170
+
171
+ @keyframes body-breathe {
172
+ 0%, 3%, 52%, 99%, 100% { transform: scale(1, 1) translateY(0); }
173
+ 15%, 29%, 43%, 70%, 84%, 96% { transform: scale(1.006, 0.994) translateY(0.08px); }
174
+ 22%, 36%, 64%, 78%, 90% { transform: scale(1.014, 0.986) translateY(0.18px); }
175
+ 54% { transform: scale(0.996, 1.004) translateY(-0.08px); }
176
+ }
177
+
178
+ @keyframes body-attend {
179
+ 0%, 3%, 52%, 99%, 100% { transform: translate(0, 0) rotate(0deg); }
180
+ 7% { transform: translate(-0.3px, 0.08px) rotate(-1.6deg); }
181
+ 15% { transform: translate(-0.48px, 0.14px) rotate(-2.6deg); }
182
+ 30% { transform: translate(-0.45px, 0.1px) rotate(-2.3deg); }
183
+ 42% { transform: translate(-0.4px, 0.08px) rotate(-2.0deg); }
184
+ 49% { transform: translate(-0.2px, 0.04px) rotate(-0.8deg); }
185
+ 51% { transform: translate(-0.05px, 0) rotate(-0.2deg); }
186
+ 54% { transform: translate(0, 0.08px) rotate(0deg); }
187
+ 58% { transform: translate(0.3px, 0.08px) rotate(1.6deg); }
188
+ 70% { transform: translate(0.48px, 0.14px) rotate(2.6deg); }
189
+ 84% { transform: translate(0.45px, 0.1px) rotate(2.3deg); }
190
+ 96% { transform: translate(0.32px, 0.06px) rotate(1.4deg); }
191
+ 98% { transform: translate(0.05px, 0) rotate(0.2deg); }
192
+ }
193
+
194
+ /*
195
+ v23 chin-rest arm: noticeable lift instead of v22's
196
+ invisible +22deg / -1px microtilt. Same-side arm
197
+ rotates ~52deg + translate so the hand physically
198
+ reaches the cheek line.
199
+ */
200
+ /*
201
+ v23 arm: per Lu's call, restored verbatim from v22.
202
+ v22's micro-tilt feels "still" but does not stutter.
203
+ The other v23 changes (bubble chain / smile eyes /
204
+ sparkle / timing) are kept on top.
205
+ */
206
+ @keyframes arm-left-think {
207
+ 0%, 3%, 52%, 99%, 100% { transform: translate(0, 0) rotate(0deg); }
208
+ 7% { transform: translate(0.18px, -0.7px) rotate(14deg); }
209
+ 15%, 49% { transform: translate(0.35px, -1.05px) rotate(22deg); }
210
+ 30% { transform: translate(0.28px, -0.92px) rotate(26deg); }
211
+ 58%, 96% { transform: translate(-0.08px, 0.45px) rotate(0deg); }
212
+ 84% { transform: translate(-0.12px, 0.55px) rotate(0deg); }
213
+ }
214
+ @keyframes arm-right-think {
215
+ 0%, 3%, 52%, 99%, 100% { transform: translate(0, 0) rotate(0deg); }
216
+ 7%, 49% { transform: translate(0.08px, 0.45px) rotate(0deg); }
217
+ 30% { transform: translate(0.12px, 0.55px) rotate(0deg); }
218
+ 58% { transform: translate(-0.18px, -0.7px) rotate(-14deg); }
219
+ 70%, 96% { transform: translate(-0.35px, -1.05px) rotate(-22deg); }
220
+ 84% { transform: translate(-0.28px, -0.92px) rotate(-26deg); }
221
+ }
222
+
223
+ @keyframes leg-right-inner-think {
224
+ 0%, 3%, 39%, 98%, 100% { transform: rotate(0deg) translateY(0); }
225
+ 8%, 34% { transform: rotate(7deg) translateY(-0.12px); }
226
+ 20% { transform: rotate(9deg) translateY(-0.2px); }
227
+ 42%, 94% { transform: rotate(-4deg) translateY(-0.08px); }
228
+ 70% { transform: rotate(-5deg) translateY(-0.14px); }
229
+ }
230
+ @keyframes leg-right-outer-think {
231
+ 0%, 3%, 39%, 98%, 100% { transform: rotate(0deg) translateY(0); }
232
+ 8%, 34% { transform: rotate(10deg) translateY(-0.18px); }
233
+ 20% { transform: rotate(12deg) translateY(-0.26px); }
234
+ 42%, 94% { transform: rotate(-5deg) translateY(-0.1px); }
235
+ 70% { transform: rotate(-6deg) translateY(-0.16px); }
236
+ }
237
+ @keyframes leg-left-inner-think {
238
+ 0%, 3%, 39%, 98%, 100% { transform: rotate(0deg) translateY(0); }
239
+ 8%, 34% { transform: rotate(4deg) translateY(-0.08px); }
240
+ 20% { transform: rotate(5deg) translateY(-0.14px); }
241
+ 42%, 94% { transform: rotate(-7deg) translateY(-0.12px); }
242
+ 70% { transform: rotate(-9deg) translateY(-0.2px); }
243
+ }
244
+ @keyframes leg-left-outer-think {
245
+ 0%, 3%, 39%, 98%, 100% { transform: rotate(0deg) translateY(0); }
246
+ 8%, 34% { transform: rotate(5deg) translateY(-0.1px); }
247
+ 20% { transform: rotate(6deg) translateY(-0.16px); }
248
+ 42%, 94% { transform: rotate(-10deg) translateY(-0.18px); }
249
+ 70% { transform: rotate(-12deg) translateY(-0.26px); }
250
+ }
251
+
252
+ /*
253
+ v23 eyes: thinking squint + blink-cover swap to ^^ smile
254
+ at 43%/48% (left) and 92%/97% (right).
255
+ scaleY(0.85) during thinking = subtle squint.
256
+ scaleY(0.12) at swap = full blink that hides the
257
+ rect->smile / smile->rect transition.
258
+ */
259
+ @keyframes eyes-think {
260
+ 0%, 3%, 52%, 99%, 100% { transform: translate(0, 0) scaleY(1); }
261
+ 5% { transform: translate(-0.3px, -0.5px) scaleY(0.95); }
262
+ 9%, 42% { transform: translate(-0.45px, -0.78px) scaleY(0.85); }
263
+ 43% { transform: translate(-0.45px, -0.78px) scaleY(0.12); }
264
+ 44%, 47% { transform: translate(-0.45px, -0.78px) scaleY(1); }
265
+ 48% { transform: translate(-0.45px, -0.78px) scaleY(0.12); }
266
+ 50% { transform: translate(-0.15px, -0.25px) scaleY(0.95); }
267
+ 54% { transform: translate(0, 0) scaleY(0.18); }
268
+ 55% { transform: translate(0.3px, -0.5px) scaleY(0.95); }
269
+ 59%, 88% { transform: translate(0.45px, -0.78px) scaleY(0.85); }
270
+ 92% { transform: translate(0.45px, -0.78px) scaleY(0.12); }
271
+ 93%, 96% { transform: translate(0.45px, -0.78px) scaleY(1); }
272
+ 97% { transform: translate(0.45px, -0.78px) scaleY(0.12); }
273
+ 98% { transform: translate(0.2px, -0.4px) scaleY(0.95); }
274
+ 100% { transform: translate(0, 0) scaleY(1); }
275
+ }
276
+
277
+ @keyframes eyes-rect-vis {
278
+ 0% { opacity: 1; }
279
+ 43% { opacity: 0; }
280
+ 48% { opacity: 1; }
281
+ 92% { opacity: 0; }
282
+ 97% { opacity: 1; }
283
+ }
284
+ @keyframes eyes-smile-vis {
285
+ 0% { opacity: 0; }
286
+ 43% { opacity: 1; }
287
+ 48% { opacity: 0; }
288
+ 92% { opacity: 1; }
289
+ 97% { opacity: 0; }
290
+ }
291
+
292
+ @keyframes left-bubble-life {
293
+ 0%, 3% { opacity: 0; transform: translate(-0.2px, 0.7px) scale(0.82); }
294
+ 5% { opacity: 0.75; transform: translate(-0.1px, 0.25px) scale(0.94); }
295
+ 7% { opacity: 1; transform: translate(0, 0) scale(1.04); }
296
+ 10%, 43% { opacity: 1; transform: translate(0, 0) scale(1); }
297
+ 46% { opacity: 1; transform: translate(0, -0.2px) scale(1.02); }
298
+ 48% { opacity: 1; transform: translate(0, -0.18px) scale(1.01); }
299
+ 49% { opacity: 1; transform: translate(0, 0) scale(1); }
300
+ 52% { opacity: 0; transform: translate(0, 0.65px) scale(0.9); }
301
+ 53%, 100% { opacity: 0; transform: translate(0, 0.65px) scale(0.9); }
302
+ }
303
+
304
+ @keyframes right-bubble-life {
305
+ 0%, 53% { opacity: 0; transform: translate(0.2px, 0.7px) scale(0.82); }
306
+ 54% { opacity: 0.75; transform: translate(0.1px, 0.25px) scale(0.94); }
307
+ 58% { opacity: 1; transform: translate(0, 0) scale(1.04); }
308
+ 61%, 92% { opacity: 1; transform: translate(0, 0) scale(1); }
309
+ 94% { opacity: 1; transform: translate(0, -0.2px) scale(1.02); }
310
+ 96% { opacity: 1; transform: translate(0, -0.18px) scale(1.01); }
311
+ 97% { opacity: 1; transform: translate(0, 0) scale(1); }
312
+ 99% { opacity: 0; transform: translate(0, 0.65px) scale(0.9); }
313
+ 100% { opacity: 0; transform: translate(0, 0.65px) scale(0.9); }
314
+ }
315
+
316
+ @keyframes left-dot-1 {
317
+ 0%, 7.99%, 17.99%, 19.99%, 29.99%, 31.99%, 48.99%, 100% { opacity: 0; }
318
+ 8%, 17.98%, 20%, 29.98%, 32%, 48.98% { opacity: 1; }
319
+ }
320
+ @keyframes left-dot-2 {
321
+ 0%, 11.99%, 17.99%, 23.99%, 29.99%, 35.99%, 48.99%, 100% { opacity: 0; }
322
+ 12%, 17.98%, 24%, 29.98%, 36%, 48.98% { opacity: 1; }
323
+ }
324
+ @keyframes left-dot-3 {
325
+ 0%, 15.99%, 17.99%, 27.99%, 29.99%, 39.99%, 48.99%, 100% { opacity: 0; }
326
+ 16%, 17.98%, 28%, 29.98%, 40%, 48.98% { opacity: 1; }
327
+ }
328
+ @keyframes right-dot-1 {
329
+ 0%, 58.99%, 68.99%, 70.99%, 80.99%, 82.99%, 98.49%, 100% { opacity: 0; }
330
+ 59%, 68.98%, 71%, 80.98%, 83%, 98.48% { opacity: 1; }
331
+ }
332
+ @keyframes right-dot-2 {
333
+ 0%, 62.99%, 68.99%, 74.99%, 80.99%, 86.99%, 98.49%, 100% { opacity: 0; }
334
+ 63%, 68.98%, 75%, 80.98%, 87%, 98.48% { opacity: 1; }
335
+ }
336
+ @keyframes right-dot-3 {
337
+ 0%, 66.99%, 68.99%, 78.99%, 80.99%, 90.99%, 98.49%, 100% { opacity: 0; }
338
+ 67%, 68.98%, 79%, 80.98%, 91%, 98.48% { opacity: 1; }
339
+ }
340
+
341
+ /*
342
+ v25 edge-flow keyframes.
343
+ Each pixel: opacity 0 -> 0.7 -> 0 over a 12% window,
344
+ with 6% stagger between adjacent pixels so two are
345
+ always overlapping mid-fade. Pure opacity, no transform
346
+ (v24's translate jumps were the broken-pixel feel).
347
+ Window math:
348
+ left thinking phase = 10-43%
349
+ right thinking phase = 60-92%
350
+ flow1 = top rim, flow2 = right rim,
351
+ flow3 = bottom rim, flow4 = left rim (clockwise).
352
+ */
353
+ @keyframes left-flow-1 {
354
+ 0%, 10%, 22%, 100% { opacity: 0; }
355
+ 14%, 18% { opacity: 0.7; }
356
+ }
357
+ @keyframes left-flow-2 {
358
+ 0%, 16%, 28%, 100% { opacity: 0; }
359
+ 20%, 24% { opacity: 0.7; }
360
+ }
361
+ @keyframes left-flow-3 {
362
+ 0%, 22%, 34%, 100% { opacity: 0; }
363
+ 26%, 30% { opacity: 0.7; }
364
+ }
365
+ @keyframes left-flow-4 {
366
+ 0%, 28%, 40%, 100% { opacity: 0; }
367
+ 32%, 36% { opacity: 0.7; }
368
+ }
369
+ @keyframes right-flow-1 {
370
+ 0%, 62%, 74%, 100% { opacity: 0; }
371
+ 66%, 70% { opacity: 0.7; }
372
+ }
373
+ @keyframes right-flow-2 {
374
+ 0%, 68%, 80%, 100% { opacity: 0; }
375
+ 72%, 76% { opacity: 0.7; }
376
+ }
377
+ @keyframes right-flow-3 {
378
+ 0%, 74%, 86%, 100% { opacity: 0; }
379
+ 78%, 82% { opacity: 0.7; }
380
+ }
381
+ @keyframes right-flow-4 {
382
+ 0%, 80%, 92%, 100% { opacity: 0; }
383
+ 84%, 88% { opacity: 0.7; }
384
+ }
385
+
386
+ /*
387
+ v23 sparkle bling: single emphatic flash at "got it"
388
+ moment (left 28-32% / right 71-82%).
389
+ scale + opacity pulse from technique 8.
390
+ */
391
+ @keyframes left-spark-bling {
392
+ 0%, 43%, 49%, 100% { opacity: 0; transform: scale(0.4); }
393
+ 44% { opacity: 0; transform: scale(0.5); }
394
+ 45% { opacity: 1; transform: scale(1.35); }
395
+ 46.5% { opacity: 1; transform: scale(1); }
396
+ 48% { opacity: 0.4; transform: scale(0.7); }
397
+ }
398
+ @keyframes right-spark-bling {
399
+ 0%, 91%, 97%, 100% { opacity: 0; transform: scale(0.4); }
400
+ 92% { opacity: 0; transform: scale(0.5); }
401
+ 93% { opacity: 1; transform: scale(1.35); }
402
+ 94.5% { opacity: 1; transform: scale(1); }
403
+ 96% { opacity: 0.4; transform: scale(0.7); }
404
+ }
405
+ </style>
406
+ </defs>
407
+
408
+ <rect id="ground-shadow" x="3" y="15" width="9" height="1" fill="#000000" opacity="0.5"/>
409
+
410
+ <!--
411
+ v24: legs are lifted out of #clawd-body so they do not inherit
412
+ body-attend (rotate/translate toward bubble) or body-breathe
413
+ (scale). Rendered before #master-group so the torso (which is
414
+ inside master-group) draws on top of the leg tops as before.
415
+ -->
416
+ <g id="legs-static" fill="#DE886D">
417
+ <rect id="outer-left-leg" x="3" y="13" width="1" height="2"/>
418
+ <rect id="inner-left-leg" x="5" y="13" width="1" height="2"/>
419
+ <rect id="inner-right-leg" x="9" y="13" width="1" height="2"/>
420
+ <rect id="outer-right-leg" x="11" y="13" width="1" height="2"/>
421
+ </g>
422
+
423
+ <g id="master-group">
424
+ <g class="body-breathe">
425
+ <g id="clawd-body" class="body-attend">
426
+ <g id="body-color-group" fill="#DE886D">
427
+ <rect id="torso" x="2" y="6" width="11" height="7"/>
428
+ <rect class="arm-left" id="left-arm" x="0" y="9" width="2" height="2"/>
429
+ <rect class="arm-right" id="right-arm" x="13" y="9" width="2" height="2"/>
430
+ </g>
431
+
432
+ <g class="eyes" id="eyes-color-group">
433
+ <g class="eyes-rect" fill="#000000">
434
+ <rect id="left-eye" x="4" y="8" width="1" height="2"/>
435
+ <rect id="right-eye" x="10" y="8" width="1" height="2"/>
436
+ </g>
437
+ <g class="eyes-smile" fill="none" stroke="#000000" stroke-width="0.7" stroke-linecap="round" stroke-linejoin="round">
438
+ <polyline points="3.5,9 4.5,8 5.5,9"/>
439
+ <polyline points="9.5,9 10.5,8 11.5,9"/>
440
+ </g>
441
+ </g>
442
+ </g>
443
+ </g>
444
+
445
+ <!--
446
+ Left thought bubble.
447
+ v23: bubble path lifted by 1px (path y -3..4 -> -4..3) so
448
+ there is a 3px gap to clawd's head. Old chat-tail
449
+ (0,4)(1,4)(1,5) deleted. New chain: 1x1 puff at (1,4) +
450
+ 0.5x0.5 puff at (2,5.5) trailing toward clawd's head top
451
+ (y=6).
452
+ -->
453
+ <g class="left-bubble">
454
+ <path d="M-1 -4 H6 V-3 H7 V2 H6 V3 H-1 V2 H-2 V-3 H-1 Z" fill="#FFFFFF"/>
455
+ <!-- v25 rim-flow pixels: clockwise top -> right -> bottom -> left -->
456
+ <rect class="bubble-flow flow1" x="3" y="-5" width="1" height="1" fill="#BFEAFF"/>
457
+ <rect class="bubble-flow flow2" x="8" y="0" width="1" height="1" fill="#BFEAFF"/>
458
+ <rect class="bubble-flow flow3" x="4" y="4" width="1" height="1" fill="#BFEAFF"/>
459
+ <rect class="bubble-flow flow4" x="-3" y="0" width="1" height="1" fill="#BFEAFF"/>
460
+ <rect x="1" y="4" width="1" height="1" fill="#FFFFFF"/>
461
+ <rect x="2" y="5.5" width="0.5" height="0.5" fill="#FFFFFF"/>
462
+ <rect class="dot dot1" x="0" y="-1" width="1" height="1" fill="#256891"/>
463
+ <rect class="dot dot2" x="2" y="-1" width="1" height="1" fill="#256891"/>
464
+ <rect class="dot dot3" x="4" y="-1" width="1" height="1" fill="#256891"/>
465
+ </g>
466
+
467
+ <g class="right-bubble">
468
+ <path d="M9 -4 H16 V-3 H17 V2 H16 V3 H9 V2 H8 V-3 H9 Z" fill="#FFFFFF"/>
469
+ <!-- v25 rim-flow pixels: clockwise top -> right -> bottom -> left -->
470
+ <rect class="bubble-flow flow1" x="12" y="-5" width="1" height="1" fill="#BFEAFF"/>
471
+ <rect class="bubble-flow flow2" x="18" y="0" width="1" height="1" fill="#BFEAFF"/>
472
+ <rect class="bubble-flow flow3" x="15" y="4" width="1" height="1" fill="#BFEAFF"/>
473
+ <rect class="bubble-flow flow4" x="7" y="0" width="1" height="1" fill="#BFEAFF"/>
474
+ <rect x="13" y="4" width="1" height="1" fill="#FFFFFF"/>
475
+ <rect x="12.5" y="5.5" width="0.5" height="0.5" fill="#FFFFFF"/>
476
+ <rect class="dot dot1" x="10" y="-1" width="1" height="1" fill="#256891"/>
477
+ <rect class="dot dot2" x="12" y="-1" width="1" height="1" fill="#256891"/>
478
+ <rect class="dot dot3" x="14" y="-1" width="1" height="1" fill="#256891"/>
479
+ </g>
480
+
481
+ <!--
482
+ v23 inspiration sparkles. Pixel + (5 small rects) above
483
+ each bubble, bling at the "got it" moment.
484
+ Color #FFE066 (per technique 12 anti-boss-gold rule).
485
+ -->
486
+ <g class="left-spark">
487
+ <rect x="6" y="-7" width="1" height="0.6" fill="#FFE066"/>
488
+ <rect x="6" y="-6.4" width="1" height="1" fill="#FFE066"/>
489
+ <rect x="6" y="-5.4" width="1" height="0.6" fill="#FFE066"/>
490
+ <rect x="5" y="-6.4" width="1" height="1" fill="#FFE066"/>
491
+ <rect x="7" y="-6.4" width="1" height="1" fill="#FFE066"/>
492
+ </g>
493
+ <g class="right-spark">
494
+ <rect x="8" y="-7" width="1" height="0.6" fill="#FFE066"/>
495
+ <rect x="8" y="-6.4" width="1" height="1" fill="#FFE066"/>
496
+ <rect x="8" y="-5.4" width="1" height="0.6" fill="#FFE066"/>
497
+ <rect x="7" y="-6.4" width="1" height="1" fill="#FFE066"/>
498
+ <rect x="9" y="-6.4" width="1" height="1" fill="#FFE066"/>
499
+ </g>
500
+ </g>
501
+ </svg>