fix: wink is now a real CSS animation, no longer sticks (v0.1.3)
The v0.1.1 wink was rendered as a static SVG (left eye drawn as a closed curve). Once the 5% random gate picked the wink tone, the left eye stayed closed until the next page render — if the dashboard sat idle, Buddy was stuck mid-wink indefinitely. David's report: "the eye does not unblink." v0.1.2's lower probability (30% → 5%) reduced how often you'd see the stuck state, but didn't fix the underlying issue. This release makes the wink a real transient animation: - sprite.php no longer swaps the left eye for a closed path when tone is wink — both eyes are always open circles in the SVG - buddy.css adds @keyframes buddyWink that briefly closes the left eye (scaleY 0.1) for ~250ms every 2.5s, applied only when the parent has the .buddy-sprite--wink class - right eye keeps its normal 5s blink — the asymmetry is what makes it read as a wink rather than a synchronised blink - mouth/cheeks/label still differ for wink tone (those are valid static state changes); only the eye behaviour moved to animation Net effect: when the 5% chance fires, Buddy now actually winks (closes, opens, closes, opens) instead of freezing one-eye-shut.
This commit is contained in:
@@ -24,6 +24,17 @@
|
||||
animation-duration: 7s; /* sadder Buddy blinks slower */
|
||||
}
|
||||
|
||||
/* Cheeky wink: when the mood-label picks the 'wink' tone, the LEFT eye
|
||||
runs a faster, more dramatic keyframe that closes for ~250ms every
|
||||
2.5s. The right eye keeps its normal 5s blink — that asymmetry is
|
||||
what makes it read as a wink rather than a synchronised blink.
|
||||
v0.1.3 fix: previously the wink was a static SVG render (left eye
|
||||
drawn as a closed curve), which got stuck on the page until the next
|
||||
render. Now it's a real transient animation, so Buddy unblinks. */
|
||||
.buddy-sprite--wink .buddy-sprite__eye--left {
|
||||
animation: buddyWink 2.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes buddyBob {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-4px); }
|
||||
@@ -32,6 +43,10 @@
|
||||
0%, 92%, 100% { transform: scaleY(1); }
|
||||
94%, 98% { transform: scaleY(0.1); }
|
||||
}
|
||||
@keyframes buddyWink {
|
||||
0%, 80%, 100% { transform: scaleY(1); } /* eye open most of the cycle */
|
||||
85%, 95% { transform: scaleY(0.1); } /* closes briefly = the wink */
|
||||
}
|
||||
|
||||
/* ── Dashboard widget ───────────────────────────────────────────── */
|
||||
|
||||
|
||||
Reference in New Issue
Block a user