bretton.dev
A community based topic aggregation platform built on atproto
feat(web): add waving animation to mascot on landing page
Split the mascot into separate body and claw images to enable a smooth
waving animation. The claw rotates from the shoulder joint for a natural
wave effect. Also improved mobile layout with better spacing.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
+29
-9
internal/web/templates/landing.html
+29
-9
internal/web/templates/landing.html
···
182
182
183
183
.mascot {
184
184
width: 100px;
185
-
height: 100px;
185
+
height: 87px; /* Maintain aspect ratio of 419x366 */
186
186
position: relative;
187
187
z-index: 1;
188
-
animation: float 4s ease-in-out infinite;
189
188
filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.4));
190
189
}
191
190
192
-
@keyframes float {
193
-
0%, 100% { transform: translateY(0) rotate(-3deg); }
194
-
50% { transform: translateY(-8px) rotate(3deg); }
191
+
.mascot-body {
192
+
width: 100%;
193
+
height: 100%;
194
+
position: absolute;
195
+
top: 0;
196
+
left: 0;
197
+
}
198
+
199
+
.mascot-claw {
200
+
width: 100%;
201
+
height: 100%;
202
+
position: absolute;
203
+
top: -4%;
204
+
left: 27%;
205
+
transform-origin: 35% 75%; /* Pivot at base of claw/shoulder */
206
+
animation: wave 1.5s ease-in-out infinite;
207
+
}
208
+
209
+
@keyframes wave {
210
+
0%, 100% { transform: rotate(0deg); }
211
+
50% { transform: rotate(-25deg); }
195
212
}
196
213
197
214
.logo {
···
424
441
425
442
.mascot-container {
426
443
margin-right: 0;
427
-
margin-bottom: -16px; /* Overlap vertically on mobile */
444
+
margin-bottom: 8px; /* Less overlap with text */
428
445
}
429
446
430
447
.mascot {
431
-
width: 80px;
432
-
height: 80px;
448
+
width: 100px;
449
+
height: 87px; /* Slightly larger on mobile */
433
450
}
434
451
435
452
.mascot-glow {
···
496
513
<div class="brand-lockup">
497
514
<div class="mascot-container">
498
515
<div class="mascot-glow" aria-hidden="true"></div>
499
-
<img src="/static/images/lil_dude.png" alt="Lil Dude - Coves Mascot" class="mascot">
516
+
<div class="mascot" role="img" aria-label="Lil Dude - Coves Mascot waving hello">
517
+
<img src="/static/images/lil_dude_body.png" alt="" class="mascot-body" aria-hidden="true">
518
+
<img src="/static/images/lil_dude_claw.png" alt="" class="mascot-claw" aria-hidden="true">
519
+
</div>
500
520
</div>
501
521
<img src="/static/images/coves_bubble.svg" alt="Coves" class="logo">
502
522
</div>
static/images/lil_dude_body.png
static/images/lil_dude_body.png
This is a binary file and will not be displayed.
static/images/lil_dude_claw.png
static/images/lil_dude_claw.png
This is a binary file and will not be displayed.