feat(skills): add marker-highlight skill for animated text highlighting (#190)

## Summary

- **New skill:** **`marker-highlight`** — integrates [MarkerHighlight.js](https://github.com/Robincodes-Sandbox/marker-highlight) into HyperFrames compositions. Canvas-based animated text highlighting with 5 drawing modes: marker pen, circle, burst, scribble, and sketchout.
- **Studio fix:** added missing `captionSync` to useEffect dependency array (oxlint exhaustive-deps)
- **Studio fix:** `loadOverrides` now checks `res.ok` before parsing, preventing 404 console noise on projects without captions

## Skill details

The skill documents the non-obvious GSAP integration pattern discovered during development:

1. **One highlighter per container** — the library clears ALL `.highlight` divs from the shared parent on init, so multiple instances on sibling marks conflict
2. **`data-color`** **\+** **`data-original-bgcolor`** — prevents the CSS background-color flash that occurs when the library reads and clears the mark's background
3. **Canvas pre-draw + clear + reanimate** — `animate: false` pre-draws statically, canvases are hidden, then cleared and shown with `reanimateMark()` at trigger time for clean animated reveals
4. **`onReverseComplete`** **for rewind** — hides highlight divs when the timeline seeks backward past the trigger point

## Test plan

- [ ] `npx hyperframes lint` passes on test-composition
- [ ] Studio preview shows marker highlight on "something" at 1s, circle on "love" at 2.2s
- [ ] Rewind past trigger points hides highlights
- [ ] No 404 console errors for caption-overrides.json on non-caption projects



[Screen Recording 2026-04-02 at 1.56.30 AM.mov <span class="graphite__hidden">(uploaded via Graphite)</span> <img class="graphite__hidden" src="https://app.graphite.com/user-attachments/thumbnails/53b03f4e-538e-477a-b738-7a033b99a84e.mov" />](https://app.graphite.com/user-attachments/video/53b03f4e-538e-477a-b738-7a033b99a84e.mov)



🤖 Generated with [Claude Code](https://claude.com/claude-code)

packages/studio/src/captions/components/CaptionPropertyPanel.tsx

@@ -1,6 +1,7 @@
-import { memo, useCallback } from "react";
+import { memo, useCallback, useState } from "react";
 import { useCaptionStore } from "../store";
 import type { CaptionStyle } from "../types";
+import { CaptionAnimationPanel } from "./CaptionAnimationPanel";
 import { Section, Row, inputCls } from "./shared";
 
 // ---------------------------------------------------------------------------
@@ -20,6 +21,8 @@ export const CaptionPropertyPanel = memo(function CaptionPropertyPanel({
   const updateSelectedStyle = useCaptionStore((s) => s.updateSelectedStyle);
   const updateGroupStyle = useCaptionStore((s) => s.updateGroupStyle);
 
+  const [activeTab, setActiveTab] = useState<"style" | "animation">("style");
+
   // Resolve effective style for the first selected segment
   const firstSegmentId = selectedSegmentIds.size > 0 ? [...selectedSegmentIds][0] : undefined;
   const firstSegment = model?.segments.get(firstSegmentId ?? "");
@@ -184,54 +187,89 @@ export const CaptionPropertyPanel = memo(function CaptionPropertyPanel({
     <div className="flex flex-col h-full min-h-0">
       {/* Header */}
       <div className="px-3 py-2 border-b border-neutral-800 flex-shrink-0">
-        <span className="text-2xs text-neutral-500">{countLabel}</span>
+        <div className="flex items-center justify-between mb-1.5">
+          <span className="text-2xs text-neutral-500">{countLabel}</span>
+        </div>
+        {/* Tab switcher */}
+        <div className="flex gap-1">
+          <button
+            type="button"
+            onClick={() => setActiveTab("style")}
+            className={[
+              "flex-1 py-0.5 rounded text-2xs font-medium transition-colors",
+              activeTab === "style"
+                ? "bg-studio-accent/20 text-studio-accent border border-studio-accent/50"
+                : "text-neutral-500 border border-neutral-800 hover:text-neutral-300 hover:border-neutral-600",
+            ].join(" ")}
+          >
+            Style
+          </button>
+          <button
+            type="button"
+            onClick={() => setActiveTab("animation")}
+            className={[
+              "flex-1 py-0.5 rounded text-2xs font-medium transition-colors",
+              activeTab === "animation"
+                ? "bg-studio-accent/20 text-studio-accent border border-studio-accent/50"
+                : "text-neutral-500 border border-neutral-800 hover:text-neutral-300 hover:border-neutral-600",
+            ].join(" ")}
+          >
+            Animation
+          </button>
+        </div>
       </div>
 
-      <div className="flex-1 overflow-y-auto px-3 py-2">
-        <Section label="Position">
-          <Row label="X">
-            <input
-              type="number"
-              value={x}
-              onChange={(e) => handleStyleChange({ x: Number(e.target.value) })}
-              className={inputCls}
-            />
-          </Row>
-          <Row label="Y">
-            <input
-              type="number"
-              value={y}
-              onChange={(e) => handleStyleChange({ y: Number(e.target.value) })}
-              className={inputCls}
-            />
-          </Row>
-        </Section>
+      {/* Animation tab */}
+      {activeTab === "animation" && <CaptionAnimationPanel />}
 
-        <Section label="Transform">
-          <Row label="Scale">
-            <input
-              type="number"
-              value={scaleX}
-              step={0.1}
-              onChange={(e) =>
-                handleStyleChange({
-                  scaleX: Number(e.target.value),
-                  scaleY: Number(e.target.value),
-                })
-              }
-              className={inputCls}
-            />
-          </Row>
-          <Row label="Rotation">
-            <input
-              type="number"
-              value={rotation}
-              onChange={(e) => handleStyleChange({ rotation: Number(e.target.value) })}
-              className={inputCls}
-            />
-          </Row>
-        </Section>
-      </div>
+      {/* Style tab — Transform only */}
+      {activeTab === "style" && (
+        <div className="flex-1 overflow-y-auto px-3 py-2">
+          <Section label="Position">
+            <Row label="X">
+              <input
+                type="number"
+                value={x}
+                onChange={(e) => handleStyleChange({ x: Number(e.target.value) })}
+                className={inputCls}
+              />
+            </Row>
+            <Row label="Y">
+              <input
+                type="number"
+                value={y}
+                onChange={(e) => handleStyleChange({ y: Number(e.target.value) })}
+                className={inputCls}
+              />
+            </Row>
+          </Section>
+
+          <Section label="Transform">
+            <Row label="Scale">
+              <input
+                type="number"
+                value={scaleX}
+                step={0.1}
+                onChange={(e) =>
+                  handleStyleChange({
+                    scaleX: Number(e.target.value),
+                    scaleY: Number(e.target.value),
+                  })
+                }
+                className={inputCls}
+              />
+            </Row>
+            <Row label="Rotation">
+              <input
+                type="number"
+                value={rotation}
+                onChange={(e) => handleStyleChange({ rotation: Number(e.target.value) })}
+                className={inputCls}
+              />
+            </Row>
+          </Section>
+        </div>
+      )}
     </div>
   );
 });

packages/studio/src/captions/hooks/useCaptionSync.ts

@@ -115,6 +115,7 @@ export function useCaptionSync(projectId: string | null) {
       const res = await fetch(
         `/api/projects/${pid}/files/${encodeURIComponent("caption-overrides.json")}`,
       );
+      if (!res.ok) return;
       const data = await res.json();
       if (!data.content) return;