Feedback round (calmer, less "template/AI"):
- Dial back animated background motion globally (sway/leaf-drift halved,
fewer falling leaves, gentler godrays/fireflies/light-sweep).
- Fire leaf confetti on click of real controls only (was pointerdown
everywhere, which showered mobile users on every scroll).
- Remove hover lift/scale from non-interactive cards, screenshots and
mascots so they no longer read as clickable.
- Fix mobile nav menu colours in the light theme (was a hard-coded dark
panel with low-contrast links).
- Calm how-it-works steps 1-2 (no button pulse/shine/cursor bob); step 3
keeps its lively sync animation. Remove the now-static "copied" toast
from step 1 since it only made sense mid-animation.
UX audit follow-ups:
- Unify vertical rhythm with one section-padding scale; vertically centre
the hero so space is balanced instead of pooling under the CTAs.
- Split the mixed "Why KoalaSync?" grid into use-case scenarios and a
labelled "Features" subsection, and move the #features nav anchor there.
- Demote the hero GitHub CTA to a quiet text link (Chrome > Firefox >
GitHub hierarchy); scale down oversized section mascots and give them a
shared soft shadow.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- thin out bamboo/leaf/firefly decor in tiers (<=1440 / <=1024 / <=768px)
so nothing moves behind the text column and copy stays readable
- center the single-column hero below 1024px (text, koala, CTAs, trust
line) and let the odd CTA button span the full grid row
- remove the periodic wind gusts; keep the constant gentle bamboo sway
- reword the German demo CTA to "Live-Demo ansehen"
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- Flag font: ship a committed fontTools subset (43 KB, -45%) of
TwemojiCountryFlags.woff2 with only the 15 flags the site uses, under a
content-hashed name with a preload on every flag-bearing page. The build
validates the subset against a manifest and fails when a new flag
appears without regenerating (npm run subset-flags). JS subsetters
(subset-font/harfbuzzjs) were rejected: their wasm builds silently drop
the COLR/CPAL color tables, rendering all flags invisible.
- Responsive mascots: legal/join/404 pages served 434-500px sources for
175-180px slots; the build now emits 180w/360w variants (AVIF 1x: ~7 KB
vs ~22 KB) and the pages use srcset. Small logo spots (14-42px) now use
the existing 64/128px variants instead of the 256px file.
- injectAvifPictures copies the img sizes attribute onto the AVIF
<source>; without it Chrome mis-selects w-descriptor candidates and can
drop the image entirely.
- AVIF conversion is cached by content hash (.avif-cache.json); the old
mtime check never hit because copyDirSync refreshes mtimes, so every
verify re-encoded all 26 files.
- HTML output is minified (comments + indentation, <pre> preserved,
newlines kept for inline-script safety): index.html 121 KB -> 93 KB.
- unicode-range trimmed to U+1F1E6-1F1FF; tag-sequence flags fall through
to the system emoji font.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Strip every bird from the demo mockups: both hero video tabs and both
step-3 player scenes lose the background flock (.film-birds) and the
foreground flapping bird (.film-hero-bird), plus all related CSS in
styles/demo.css and the dead style.legacy.css.
Language selector: the <select> was 30px narrower than its pill, so in
appearance:base-select the click/focus highlight covered only the inner
~110px ("half the box"). Move the padding from the container onto the
control so it fills the pill edge-to-edge; mirror the fix in the mobile
legal.css override.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Timo