Polish demo film, bamboo forest, popup a11y, and step-1 toast

- Demo mockup video: drifting clouds, shooting star, moon craters, bird
  flock, valley mist band, floating lantern instead of bouncing ball,
  stronger cinematic vignette
- Player controls: play/pause glyph, duration, buffered range, volume,
  HD badge, fullscreen icon
- Bamboo background: two faint centre trunks, segment rings on far
  stalks, wider near stalks with extra leaf, smaller blurred layers
  (240% -> 200%) and reduced blur radii for cheaper compositing
- Step-1 illustration: invite toast floats fully below the popup card
- Extension popup: label/for associations for all settings controls
- Demo video select: drop invalid inline SVG inside <option>

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
KoalaDev
2026-07-11 10:10:37 +02:00
parent 04df35bbe6
commit 8175f82f0b
5 changed files with 298 additions and 58 deletions
+6 -6
View File
@@ -820,16 +820,16 @@ document.addEventListener('DOMContentLoaded', () => {
const midOffset = (t * -24) % 160;
const foreOffset = (t * -48) % 160;
// Bouncing ball logic (bounce Y is computed as parabolic arc)
const bouncePeriod = 0.8;
const bounceProgress = (t % bouncePeriod) / bouncePeriod;
const bounceHeight = 16;
const bounceY = 4 * bounceProgress * (1 - bounceProgress) * -bounceHeight;
// Floating lantern: slow vertical bob + softer horizontal sway on
// detuned periods, so the drift never repeats exactly in sync
const bounceY = Math.sin((t % 5.2) / 5.2 * Math.PI * 2) * 3.5;
const lanternX = Math.cos((t % 8.6) / 8.6 * Math.PI * 2) * 4;
tab.root.style.setProperty('--scroll-back', backOffset.toFixed(2) + 'px');
tab.root.style.setProperty('--scroll-mid', midOffset.toFixed(2) + 'px');
tab.root.style.setProperty('--scroll-fore', foreOffset.toFixed(2) + 'px');
tab.root.style.setProperty('--bounce-y', bounceY.toFixed(2) + 'px');
tab.root.style.setProperty('--lantern-x', lanternX.toFixed(2) + 'px');
};
const updateSyncUI = () => {