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>
- 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>
The drift clamp saturated after ~2600px, so nothing moved on long
pages. The vertical drift now maps scroll progress (0..1 over the full
document) onto the stalks' overscan, so the parallax runs end to end.
Turn the background into a descent through the forest: god-ray light
shafts and the canopy fade out while a dusk tint, thicker mist, the
terracotta horizon glow and the fireflies fade in as you scroll down.
Fireflies additionally wander organically (independent translate
property composing with their scale pulse), and on hover-capable
devices the bamboo layers tilt subtly toward the cursor. All layers
animate transform/opacity only, rAF-throttled, reduced-motion safe.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The stalks used border-radius:50%, which renders a tall ellipse whose
ends taper to points, and unbounded parallax drift pushed them off the
bottom of the viewport on long pages. Rounded caps + 20% overscan +
a viewport-relative drift clamp keep them full-height while scrolling.
Sweep the remaining off-palette colors into the nature palette:
content-script overlays (slate grays), amber warnings/badges/star
accents (now terracotta) in popup, background badge and website
illustrations, and the support-heart red (now --danger).
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
v3.0.0 "The Greens Update" palette: forest-green oklch color system
(accent green + terracotta secondary) replaces the indigo/slate scheme
across the landing page and the extension popup/options. The blob
background becomes an animated bamboo forest overlay (parallax stalks,
falling leaves, canopy, ground mist, fireflies, light sweep, grain)
with prefers-reduced-motion support. Layout, structure and copy are
unchanged.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The combined section's third feature tile was Privacy, which is already
covered by the hero trust line and the comparison table. Replace it with
Volume Leveling / Audio Compressor, a genuinely differentiating feature not
shown anywhere else on the page. Shorten its description to match the other
tiles (all 15 locales). The three tiles are now: 1-click invites, volume
leveling, universal HTML5 support.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The headline column in the old narrow two-column range (769-1023px) was too
tight to fit the full "Add to X" label plus two more buttons, so GitHub wrapped
to a second row. The hero is now single-column below 1024px (headline gets the
full width, demo stacks under it, matching the demo's own breakpoint) and
two-column at >=1024px where the column is wide enough. GitHub button label
shortened to "GitHub" for extra margin. Verified one row at 769/900/1024/1280
and the mobile stack at 375px.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Remove the confusing, space-hungry "Episode Lobby" card from the mockup
- Give the decorative demo mockup a contrast-safe palette: accent shown as
text uses a lighter indigo, and buttons with white text on a colour get
darker shades, so every walkthrough state meets WCAG AA
- Drop the scroll-reveal fade from the above-the-fold hero demo; the fade
briefly rendered its text at partial opacity, which axe caught as failing
contrast on ~1 in 3 audits
- Mark the demo as decorative for assistive tech (aria-hidden + removed from
tab order); mouse interaction is unchanged
- Darken the footer support pill so white text meets contrast
Desktop Lighthouse: 100/100/100/100 (stable across runs). Mobile: 100
a11y / best-practices / SEO; performance ~87 (throttled LCP, separate work).
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Hero CTAs: the install buttons are compact (just the browser name) so all
three fit one line; JS detects the visitor's browser and expands that one
to the full "Add to X" call to action. Unknown browsers stay compact.
- Hero demo: caption now sits directly under the two windows (absolutely
positioned to the card cascade) instead of far below the tall scene. The
scene keeps a fixed height that already fits the open popup, so the
vertically centered hero never jumps when the popup toggles.
- The background window now also shows a (non-interactive) extension icon,
making it clear both browsers have KoalaSync installed.
- Escape now also closes the demo popup.
- Added a link from the comparison table to the fuller alternatives/guides
hub, localized in all 15 languages.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Outside-click handling was scoped to the demo scene, so clicks elsewhere
on the page left the popup open and it felt unclosable. A document-level
listener now collapses it from anywhere, like a real extension popup,
and the popup header gained an explicit close button next to the version
link (hidden in the static mobile mockup).
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- New hero headline "Turn any video into a watch party" with animated
gradient highlight, sharper subtitle and quiet trust line under the CTAs
- Changelog badge redesigned as the koala's speech bubble (version and
release date baked in at build time, no version.json fetch anymore)
- Light/dark theme toggle in the header (dark default, pre-paint via
lang-init, full light theme across sections)
- Use cases and "Why KoalaSync" merged into one section with the three
strongest feature tiles; question-mark koala moved to the FAQ
- FAQ and self-hosting setup collapsed by default via shared
section-collapse component (hash deep links auto-open them)
- Compat/juggler section more compact
- og:image switched to the 1280x640 repository OpenGraph card (landing
and join page), generated during build
- "watch party" keyword added to meta title/description in all 15 locales
- All em-dashes removed from user-facing copy
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Timo