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:
prosolis
2026-06-26 11:08:55 -07:00
parent 9d6698dcc6
commit adc0cdff1c
8 changed files with 91 additions and 16 deletions

View File

@@ -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 {