Add butterfly/parrot/wiggle-dog companions; scale mascot + tips
- Three new Lottie companions: Wiggle Dog (摇尾狗), Butterfly (蝴蝶), Parrot (鹦鹉). Parrot is mirrored via a new `flip` flag on Companion, threaded through LottiePlayer (scaleX(-1)) since the asset faces left. - Mascot size now scales with the viewport: --petal-companion-size clamp(10rem, 17vw, 20rem); art, emoji fallback, and the sleep "z" all derive from it. - Larger, more legible tip bubble (1.4rem zh / 1.15rem en, wider bubble). - Bubbles linger longer for a bilingual ESL read: baseline 9s→14s, cheer 6s→9s, per-char 45→55ms, cap 20s→32s. Claude-Session: https://claude.ai/code/session_016Yr6jELuRc7hyzYLccQKZd
This commit is contained in:
@@ -319,9 +319,17 @@ button, a, input {
|
||||
The cozy corner mascot. Gently bobs while awake, settles and sways slowly
|
||||
while napping; its speech bubble pops in; little zzz drift up when asleep. */
|
||||
.petal-companion {
|
||||
/* Mascot size scales with the viewport width: ~original on a laptop, up to
|
||||
~2× on a large desktop. Tune the middle (vw) term to taste. */
|
||||
--petal-companion-size: clamp(10rem, 17vw, 20rem);
|
||||
animation: petal-bob 3.2s ease-in-out infinite;
|
||||
transition: transform 200ms ease;
|
||||
}
|
||||
/* The Lottie art sits inside the round badge with a little breathing room. */
|
||||
.petal-companion-art {
|
||||
width: 88%;
|
||||
height: 88%;
|
||||
}
|
||||
.petal-companion:hover {
|
||||
transform: translateY(-2px) scale(1.04);
|
||||
}
|
||||
@@ -347,10 +355,10 @@ button, a, input {
|
||||
}
|
||||
|
||||
.petal-zzz {
|
||||
top: 6px;
|
||||
right: 14px;
|
||||
top: calc(var(--petal-companion-size) * 0.04);
|
||||
right: calc(var(--petal-companion-size) * 0.1);
|
||||
font-weight: 800;
|
||||
font-size: 1.1rem;
|
||||
font-size: calc(var(--petal-companion-size) * 0.12);
|
||||
animation: petal-zzz 2.4s ease-in-out infinite;
|
||||
}
|
||||
@keyframes petal-zzz {
|
||||
|
||||
Reference in New Issue
Block a user