vod frog, frog with the vods
fix fly sprite animation: pixel-based positioning, steps(5) for 5 frames
+6
-5
+6
-5
src/lib/FlySpawner.svelte
+6
-5
src/lib/FlySpawner.svelte
···
164
164
will-change: left, top, transform;
165
165
}
166
166
167
-
/* Sprite sheet: 5 frames, each 210x150, total 1050x150 */
167
+
/* Sprite sheet: 5 frames, each 42px at display size (210px total width).
168
+
steps(5) shows frames at: 0, -42, -84, -126, -168px */
168
169
.fly-sprite {
169
170
width: 100%;
170
171
height: 100%;
171
172
background: url('/fly-sprite.png') 0 0 no-repeat;
172
-
background-size: 500% 100%; /* 5 frames wide */
173
-
animation: flap 0.4s steps(5) infinite;
173
+
background-size: 210px 30px;
174
+
animation: flap 0.5s steps(5) infinite;
174
175
}
175
176
176
177
@keyframes flap {
177
-
from { background-position: 0% 0; }
178
-
to { background-position: 100% 0; }
178
+
from { background-position: 0 0; }
179
+
to { background-position: -210px 0; }
179
180
}
180
181
181
182
.splat-img {