docs(skills): align Lottie guidance with runtime adapter (#1141)

skills/hyperframes/references/techniques.md

@@ -181,40 +181,25 @@ The slide distance DECAYS per word (80→12px) — mimics a camera settling.
 Vector animations that play inside a composition. Use for logos, character animations, icons.
 
 ```html
-<!-- The web-component package is `@lottiefiles/dotlottie-wc` (the SDK
+<div id="anim" class="lottie"></div>
-     `@lottiefiles/dotlottie-web` does NOT expose a custom element).
+<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>
-     The element tag is <dotlottie-wc>. -->
-<script
-  src="https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-wc/dist/dotlottie-wc.js"
-  type="module"
-></script>
-<dotlottie-wc
-  class="lottie"
-  src="capture/assets/lottie/animation-0.json"
-  autoplay
-  loop
-  speed="1.5"
-  style="width:500px;height:500px;"
->
-</dotlottie-wc>
 <script>
-  gsap.set(".lottie", { scale: 0.3, opacity: 0 });
+  window.__hfLottie = window.__hfLottie || [];
-  tl.to(".lottie", { scale: 1, opacity: 1, duration: 0.35, ease: "back.out(1.6)" }, 0.2);
+
+  const anim = lottie.loadAnimation({
+    container: document.getElementById("anim"),
+    renderer: "svg",
+    loop: false,
+    autoplay: false,
+    path: "capture/assets/lottie/animation-0.json",
+  });
+  window.__hfLottie.push(anim);
+
+  gsap.set("#anim", { scale: 0.3, opacity: 0 });
+  tl.to("#anim", { scale: 1, opacity: 1, duration: 0.35, ease: "back.out(1.6)" }, 0.2);
 </script>
 ```
 
-Or use lottie-web for more control:
-
-```javascript
-var anim = lottie.loadAnimation({
-  container: document.getElementById("anim"),
-  renderer: "svg",
-  loop: false,
-  autoplay: false,
-  path: "capture/assets/lottie/animation-0.json",
-});
-```
-
 ---
 
 ## 6. Video Compositing

skills/remotion-to-hyperframes/references/api-map.md

@@ -79,11 +79,11 @@ See [transitions.md](transitions.md).
 
 See [lottie.md](lottie.md).
 
-| Remotion                        | HyperFrames                                                                                               |
+| Remotion                        | HyperFrames                                                                                                       |
-| ------------------------------- | --------------------------------------------------------------------------------------------------------- |
+| ------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
-| `<Lottie animationData={data}>` | `<div id="lottie-N">` + `<script>lottie.loadAnimation(...).then(a => window.__hfLottie.push(a))</script>` |
+| `<Lottie animationData={data}>` | `<div id="lottie-N">` + `<script>const anim = lottie.loadAnimation({...}); window.__hfLottie.push(anim)</script>` |
-| `loop` / `playbackRate` props   | translate to `loop` / lottie playback options; HF adapter seeks via `goToAndStop`                         |
+| `loop` / `playbackRate` props   | translate only after checking player seek behavior; HF adapter seeks absolute time via `goToAndStop`              |
-| `@remotion/lottie` runtime      | `lottie-web` from CDN — drop the React wrapper                                                            |
+| `@remotion/lottie` runtime      | `lottie-web` from CDN — drop the React wrapper                                                                    |
 
 ## Fonts
 

skills/remotion-to-hyperframes/references/lottie.md

@@ -105,10 +105,12 @@ for the full supported feature list.
 ## Loop behavior
 
 Remotion's `loop={true}` plays the animation continuously. Translate to
-the lottie-web `loop: true` setting AND rely on the adapter's natural
+the player option only after checking the generated frames. The HF
-seek behavior (it'll seek modulo the animation's duration). For
+adapter seeks absolute composition time; it does not add modulo looping
-non-default playback rates, set `playbackRate` in `loadAnimation` and HF
+or playback-rate scaling on top of the player. For exact repeating
-will respect it during seek.
+cycles or non-default playback rates, bake the timing into the Lottie
+asset or author an explicit timeline around the Lottie layer and verify
+the rendered output.
 
 ## Performance note