fix: unblock music video ci checks

Author: WaterrrForever

registry/examples/warm-grain/compositions/graphics.html

@@ -51,9 +51,8 @@
         height: 500px;
         background-color: #3b5e3a;
         border-radius: 50%;
-        left: 1400px;
-        top: 540px;
-        transform: translate(-50%, -50%);
+        left: 1150px;
+        top: 290px;
       }
 
       [data-composition-id="graphics"] .stat-content {
@@ -77,9 +76,8 @@
         height: 220px;
         background-color: #cc8832;
         border-radius: 110px;
-        left: 960px;
-        top: 200px;
-        transform: translate(-50%, -50%);
+        left: 710px;
+        top: 90px;
       }
 
       /* Moment 3: Terracotta Rounded Rect */
@@ -88,9 +86,8 @@
         height: 180px;
         background-color: #c45d3e;
         border-radius: 40px;
-        left: 400px;
-        top: 540px;
-        transform: translate(-50%, -50%);
+        left: 85px;
+        top: 450px;
         padding: 0 40px;
         justify-content: center;
         gap: 30px;

registry/examples/warm-grain/compositions/intro.html

@@ -26,7 +26,6 @@ <h1 class="title">Hyperframes</h1>
         box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
         text-align: left;
         opacity: 0;
-        transform: translateX(-100%); /* Start off-screen left */
       }
 
       [data-composition-id="intro"] .title {
@@ -53,11 +52,15 @@ <h1 class="title">Hyperframes</h1>
         const tl = gsap.timeline({ paused: true });
 
         // Animation: Speaker card slides in from the left
-        tl.to(
+        tl.fromTo(
           '[data-composition-id="intro"] .title-card',
+          {
+            opacity: 0,
+            xPercent: -120,
+          },
           {
             opacity: 1,
-            x: 0,
+            xPercent: 0,
             duration: 0.8,
             ease: "power2.out",
           },
@@ -68,7 +71,7 @@ <h1 class="title">Hyperframes</h1>
         tl.to(
           '[data-composition-id="intro"] .title-card',
           {
-            x: "-120%",
+            xPercent: -120,
             opacity: 0,
             duration: 0.6,
             ease: "power2.in",

skills/music-to-video/SKILL.md

@@ -48,6 +48,12 @@ Goal: Produce the one canonical timing analysis the whole video is built on.
 
 `analyze-beatgrid.py` is the **only** beat analyzer — never re-measure beats with another tool or by ear. It reads the track once and writes `audiomap.json`: energy phases (level / density / feel), onsets + `onset_rate`, rolls, silences, `hard_stops`, `key_moments`, phrases, tempo / grid, and `audio.duration_sec`. It's deterministic — the same file always gives the same map. Most fields are reliable on any music; `bpm` and `beats_sec` are reliable only when the music is genuinely rhythmic, and judging that is the call you make at Step 2.
 
+Prerequisites: Python 3 with `librosa`, `numpy`, and `soundfile` available. If import fails, install them into the active Python environment before running the analyzer:
+
+```bash
+python3 -m pip install librosa numpy soundfile
+```
+
 ```bash
 python3 <SKILL_DIR>/scripts/analyze-beatgrid.py "$PROJECT_DIR/assets/bgm.mp3" \
   -o "$PROJECT_DIR/audiomap.json" --print
@@ -185,7 +191,7 @@ music-to-video/
   references/   frame-skeleton.md · planning.md · storyboard-format.md
                 template-catalog.md · motion-primitive-catalog.md · montage.md
                 templates/<id>/          { index.html (+ assets/ · program.json) }  ← L1 catalog impls
-                motion-primitives/<id>/  { index.html } (+ shared assets/gsap.min.js) ← L0 catalog impls
+                motion-primitives/<id>/  { index.html } (+ ../assets/gsap.min.js shared by recipes) ← L0 catalog impls
   scripts/      analyze-beatgrid.py · assemble-index.mjs · validate-plan.mjs · stage-assets.mjs · lib/storyboard.mjs
   sub-agents/   frame-worker.md   ← the one subagent (one per frame)
 ```