Update demo video duration and enhance logo animation

- Updated the demo video duration from 82 seconds to 97 seconds in README.md.
- Adjusted the logo animation timing in record.py to ensure it holds until the dots settle.
- Enhanced the SVG logo animation with new keyframes and clip paths for improved visual effects.
- Updated service worker cache version from v19 to v21 for better asset management.

scripts/demo_video/README.md

@@ -1,6 +1,6 @@
 # Students' feature video
 
-An 82-second vertical (1080×1920) silent walkthrough for Reels/TikTok/WhatsApp status, with Hebrew captions:
+A 97-second vertical (1080×1920) walkthrough for Reels/TikTok/WhatsApp status, with Hebrew captions:
 the path → new words → a spoken answer with a ח mistake, its tip, the retry → a story → streak and beads →
 daily practice → verbs → games (a round of the memory game) → the logo.
 

scripts/demo_video/record.py

@@ -23,6 +23,7 @@ sys.path.insert(0, str(HERE))
 from script import LINES
 
 W, H, DPR, FPS = 432, 768, 2.5, 30          # 9:16 viewport -> 1080x1920 frames
+LOGO_SECONDS = 7.4                          # static/logo-intro.svg's animation, to the dots' last bounce
 
 
 def hold(text, sub):
@@ -208,9 +209,11 @@ async def run(url, takes, voice, out, music_gain, music_file, sound, keep_frames
         await pg.goto(url, wait_until="networkidle")
         await rec.start()
 
-        # 1 · opening: the logo animation
+        # 1 · opening: the logo animation, held until its dots have bounced off the lameds and settled (~7.2s)
+        logo_start = time.monotonic()
         await wait(1200)
         await line("intro"); await spoken(0.5)
+        await asyncio.sleep(max(0.0, logo_start + LOGO_SECONDS - time.monotonic()))
         await tap("#practiceBtn", 700)
         await pg.evaluate("ME_PERMISSIONS=new Set(['practice.use','exercises.use','path.use','games.use','tutor.use'])")
         if await pg.locator("#guideTipClose").is_visible():
@@ -319,9 +322,11 @@ async def run(url, takes, voice, out, music_gain, music_file, sound, keep_frames
         await pg.evaluate("__demo.caption('')")
         await pg.evaluate("""__demo.card(`<img src="/static/logo-intro.svg?v=${Date.now()}" alt="">
             <h2>יאללה, מתחילים!</h2><p>פותחים את האפליקציה<br>ומתרגלים כמה דקות ביום</p>`)""")
+        card_start = time.monotonic()
         await wait(700)
         await line("outro"); await spoken()
-        await wait(2400)
+        await asyncio.sleep(max(0.0, card_start + LOGO_SECONDS - time.monotonic()))
+        await wait(1200)
 
         await rec.stop()
         await wait(500)                          # the last sounds' data

static/service-worker.js

@@ -1,4 +1,4 @@
-const CACHE = "ihki-shell-v19";
+const CACHE = "ihki-shell-v21";
 const SHELL = [
   "/static/manifest.webmanifest",
   "/static/icons/icon-192.png?v=2",