@hyperframes/studio 0.6.90 → 0.6.92

package/src/player/components/PlayheadIndicator.tsx

@@ -0,0 +1,43 @@
+// fallow-ignore-file dead-code
+/**
+ * Shared playhead visual used by TimelineCanvas (real playhead) and
+ * TimelineEditorNotice (animated illustration).
+ */
+interface PlayheadIndicatorProps {
+  /** CSS color, defaults to the HF accent variable */
+  color?: string;
+  /** Glow shadow color, defaults to translucent accent */
+  glowColor?: string;
+}
+
+export function PlayheadIndicator({
+  color = "var(--hf-accent, #3CE6AC)",
+  glowColor = "rgba(60,230,172,0.5)",
+}: PlayheadIndicatorProps) {
+  return (
+    <>
+      <div
+        className="absolute top-0 bottom-0"
+        style={{
+          left: "50%",
+          width: 2,
+          marginLeft: -1,
+          background: color,
+          boxShadow: `0 0 8px ${glowColor}`,
+        }}
+      />
+      <div className="absolute" style={{ left: "50%", top: 0, transform: "translateX(-50%)" }}>
+        <div
+          style={{
+            width: 0,
+            height: 0,
+            borderLeft: "6px solid transparent",
+            borderRight: "6px solid transparent",
+            borderTop: `8px solid ${color}`,
+            filter: "drop-shadow(0 1px 3px rgba(0,0,0,0.6))",
+          }}
+        />
+      </div>
+    </>
+  );
+}

package/src/player/components/Timeline.tsx

@@ -2,12 +2,12 @@ import { useRef, useMemo, useCallback, useState, useEffect, memo, type ReactNode
 import { usePlayerStore, type TimelineElement } from "../store/playerStore";
 import { useMountEffect } from "../../hooks/useMountEffect";
 import { EditPopover } from "./EditModal";
-import { type BlockedTimelineEditIntent } from "./timelineEditing";
 import { defaultTimelineTheme, type TimelineTheme } from "./timelineTheme";
 import { useTimelineRangeSelection } from "./useTimelineRangeSelection";
 import { useTimelinePlayhead } from "./useTimelinePlayhead";
 import { type TrackVisualStyle, getTrackStyle } from "./timelineIcons";
 import { getTimelinePixelsPerSecond } from "./timelineZoom";
+import { useTimelineZoom } from "./useTimelineZoom";
 import { useTimelineAssetDrop } from "./timelineDragDrop";
 import { TimelineEmptyState } from "./TimelineEmptyState";
 import { TimelineCanvas } from "./TimelineCanvas";
@@ -23,6 +23,7 @@ import {
   getTimelineCanvasHeight,
   shouldShowTimelineShortcutHint,
 } from "./timelineLayout";
+import type { TimelineEditCallbacks, TimelineDropCallbacks } from "./timelineCallbacks";
 
 // Re-export pure utilities so existing imports from "./Timeline" still resolve.
 export {
@@ -39,7 +40,7 @@ export {
   getDefaultDroppedTrack,
 } from "./timelineLayout";
 
-interface TimelineProps {
+interface TimelineProps extends TimelineEditCallbacks, TimelineDropCallbacks {
   onSeek?: (time: number) => void;
   onDrillDown?: (element: TimelineElement) => void;
   renderClipContent?: (
@@ -47,35 +48,8 @@ interface TimelineProps {
     style: { clip: string; label: string },
   ) => ReactNode;
   renderClipOverlay?: (element: TimelineElement) => ReactNode;
-  onFileDrop?: (
-    files: File[],
-    placement?: { start: number; track: number },
-  ) => Promise<void> | void;
-  onAssetDrop?: (
-    assetPath: string,
-    placement: { start: number; track: number },
-  ) => Promise<void> | void;
-  onBlockDrop?: (
-    blockName: string,
-    placement: { start: number; track: number },
-  ) => Promise<void> | void;
   onDeleteElement?: (element: TimelineElement) => Promise<void> | void;
-  onMoveElement?: (
-    element: TimelineElement,
-    updates: Pick<TimelineElement, "start" | "track">,
-  ) => Promise<void> | void;
-  onResizeElement?: (
-    element: TimelineElement,
-    updates: Pick<TimelineElement, "start" | "duration" | "playbackStart">,
-  ) => Promise<void> | void;
-  onBlockedEditAttempt?: (element: TimelineElement, intent: BlockedTimelineEditIntent) => void;
-  onSplitElement?: (element: TimelineElement, splitTime: number) => Promise<void> | void;
   onSelectElement?: (element: TimelineElement | null) => void;
-  onDeleteKeyframe?: (elementId: string, percentage: number) => void;
-  onDeleteAllKeyframes?: (elementId: string) => void;
-  onChangeKeyframeEase?: (elementId: string, percentage: number, ease: string) => void;
-  onMoveKeyframe?: (element: TimelineElement, oldPct: number, newPct: number) => void;
-  onToggleKeyframeAtPlayhead?: (element: TimelineElement) => void;
   theme?: Partial<TimelineTheme>;
 }
 
@@ -92,6 +66,8 @@ export const Timeline = memo(function Timeline({
   onResizeElement,
   onBlockedEditAttempt,
   onSplitElement,
+  onRazorSplit,
+  onRazorSplitAll,
   onSelectElement,
   onDeleteKeyframe,
   onDeleteAllKeyframes,
@@ -107,17 +83,16 @@ export const Timeline = memo(function Timeline({
   const selectedElementId = usePlayerStore((s) => s.selectedElementId);
   const setSelectedElementId = usePlayerStore((s) => s.setSelectedElementId);
   const currentTime = usePlayerStore((s) => s.currentTime);
-  const zoomMode = usePlayerStore((s) => s.zoomMode);
-  const manualZoomPercent = usePlayerStore((s) => s.manualZoomPercent);
-  const setZoomMode = usePlayerStore((s) => s.setZoomMode);
-  const setManualZoomPercent = usePlayerStore((s) => s.setManualZoomPercent);
+  const { zoomMode, manualZoomPercent, setZoomMode, setManualZoomPercent } = useTimelineZoom();
 
   const playheadRef = useRef<HTMLDivElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const scrollRef = useRef<HTMLDivElement>(null);
+  const activeTool = usePlayerStore((s) => s.activeTool);
   const [hoveredClip, setHoveredClip] = useState<string | null>(null);
   const isDragging = useRef(false);
   const [shiftHeld, setShiftHeld] = useState(false);
+  const [razorGuideX, setRazorGuideX] = useState<number | null>(null);
 
   useMountEffect(() => {
     const down = (e: KeyboardEvent) => e.key === "Shift" && setShiftHeld(true);
@@ -388,7 +363,14 @@ export const Timeline = memo(function Timeline({
     <div
       ref={setContainerRef}
       aria-label="Timeline"
-      className={`relative border-t select-none h-full overflow-hidden ${shiftHeld ? "cursor-crosshair" : "cursor-default"}`}
+      className={`relative border-t select-none h-full overflow-hidden ${activeTool === "razor" ? "cursor-crosshair" : shiftHeld ? "cursor-crosshair" : "cursor-default"}`}
+      onMouseMove={(e) => {
+        if (activeTool === "razor" && scrollRef.current) {
+          const rect = scrollRef.current.getBoundingClientRect();
+          setRazorGuideX(e.clientX - rect.left + scrollRef.current.scrollLeft);
+        }
+      }}
+      onMouseLeave={() => setRazorGuideX(null)}
       style={{
         touchAction: "pan-x pan-y",
         background: theme.shellBackground,
@@ -402,7 +384,16 @@ export const Timeline = memo(function Timeline({
         onDragOver={handleAssetDragOver}
         onDragLeave={() => setIsDragOver(false)}
         onDrop={handleAssetDrop}
-        onPointerDown={handlePointerDown}
+        onPointerDown={(e) => {
+          if (activeTool === "razor" && e.shiftKey && e.button === 0 && scrollRef.current) {
+            const rect = scrollRef.current.getBoundingClientRect();
+            const x = e.clientX - rect.left + scrollRef.current.scrollLeft - GUTTER;
+            const splitTime = Math.max(0, x / pps);
+            onRazorSplitAll?.(splitTime);
+            return;
+          }
+          handlePointerDown(e);
+        }}
         onPointerMove={handlePointerMove}
         onPointerUp={handlePointerUp}
         onLostPointerCapture={handlePointerUp}
@@ -457,6 +448,9 @@ export const Timeline = memo(function Timeline({
             onSelectElement?.(el);
             const absTime = el.start + (pct / 100) * el.duration;
             onSeek?.(absTime);
+            const kfData = keyframeCache?.get(elKey);
+            const kf = kfData?.keyframes.find((k) => Math.abs(k.percentage - pct) < 0.5);
+            usePlayerStore.getState().setActiveKeyframePct(kf?.tweenPercentage ?? null);
           }}
           onShiftClickKeyframe={(elId, pct) => {
             toggleSelectedKeyframe(`${elId}:${pct}`);
@@ -473,12 +467,13 @@ export const Timeline = memo(function Timeline({
               onSeek?.(absTime);
             }
             const kfData = keyframeCache.get(elId);
-            const kf = kfData?.keyframes.find((k) => k.percentage === pct);
+            const kf = kfData?.keyframes.find((k) => Math.abs(k.percentage - pct) < 0.2);
             setKfContextMenu({
-              x: e.clientX,
-              y: e.clientY,
+              x: e.clientX + 4,
+              y: e.clientY + 2,
               elementId: elId,
               percentage: pct,
+              tweenPercentage: kf?.tweenPercentage,
               currentEase: kf?.ease ?? kfData?.ease,
             });
           }}
@@ -488,7 +483,19 @@ export const Timeline = memo(function Timeline({
             onSelectElement?.(el);
             setClipContextMenu({ x: e.clientX, y: e.clientY, element: el });
           }}
+          onRazorSplit={onRazorSplit}
+          onRazorSplitAll={onRazorSplitAll}
         />
+        {activeTool === "razor" && razorGuideX !== null && (
+          <div
+            className="absolute top-0 bottom-0 pointer-events-none z-10"
+            style={{
+              left: razorGuideX,
+              width: 1,
+              background: "rgba(239,68,68,0.7)",
+            }}
+          />
+        )}
       </div>
 
       {showShortcutHint && !showPopover && !rangeSelection && (

package/src/player/components/TimelineCanvas.tsx

@@ -2,6 +2,7 @@ import { memo, type ReactNode } from "react";
 import { TimelineClip } from "./TimelineClip";
 import { TimelineClipDiamonds } from "./TimelineClipDiamonds";
 import { TimelineRuler } from "./TimelineRuler";
+import { PlayheadIndicator } from "./PlayheadIndicator";
 import {
   getTimelineEditCapabilities,
   resolveBlockedTimelineEditIntent,
@@ -17,6 +18,7 @@ import {
 import type { DraggedClipState, ResizingClipState, BlockedClipState } from "./useTimelineClipDrag";
 import type { TrackVisualStyle } from "./timelineIcons";
 import { STUDIO_KEYFRAMES_ENABLED } from "../../components/editor/manualEditingAvailability";
+import { SPLIT_BOUNDARY_EPSILON_S } from "../../utils/timelineElementSplit";
 
 function ClipLabel({ element, color }: { element: TimelineElement; color: string }) {
   const lint = usePlayerStore((s) => s.lintFindingsByElement.get(element.key ?? element.id));
@@ -91,6 +93,8 @@ interface TimelineCanvasProps {
   onContextMenuKeyframe?: (e: React.MouseEvent, elementId: string, percentage: number) => void;
   onContextMenuClip?: (e: React.MouseEvent, element: TimelineElement) => void;
   onToggleKeyframeAtPlayhead?: (element: TimelineElement) => void;
+  onRazorSplit?: (element: TimelineElement, splitTime: number) => void;
+  onRazorSplitAll?: (splitTime: number) => void;
 }
 
 export const TimelineCanvas = memo(function TimelineCanvas({
@@ -141,6 +145,8 @@ export const TimelineCanvas = memo(function TimelineCanvas({
   onContextMenuKeyframe,
   onContextMenuClip,
   onToggleKeyframeAtPlayhead: _onToggleKeyframeAtPlayhead,
+  onRazorSplit,
+  onRazorSplitAll,
 }: TimelineCanvasProps) {
   const draggedElement = draggedClip?.element ?? null;
   const activeDraggedElement =
@@ -305,6 +311,7 @@ export const TimelineCanvas = memo(function TimelineCanvas({
                     }}
                     onPointerDown={(e) => {
                       if (e.button !== 0) return;
+                      if (usePlayerStore.getState().activeTool === "razor") return;
                       if (e.shiftKey) {
                         shiftClickClipRef.current = {
                           element: el,
@@ -358,6 +365,27 @@ export const TimelineCanvas = memo(function TimelineCanvas({
                     onClick={(e) => {
                       e.stopPropagation();
                       if (suppressClickRef.current) return;
+                      const { activeTool } = usePlayerStore.getState();
+                      if (activeTool === "razor" && onRazorSplit) {
+                        const clipRect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+                        const clickOffsetX = e.clientX - clipRect.left;
+                        const splitTime = previewElement.start + clickOffsetX / pps;
+                        const clampedTime = Math.max(
+                          previewElement.start + SPLIT_BOUNDARY_EPSILON_S,
+                          Math.min(
+                            previewElement.start +
+                              previewElement.duration -
+                              SPLIT_BOUNDARY_EPSILON_S,
+                            splitTime,
+                          ),
+                        );
+                        if (e.shiftKey && onRazorSplitAll) {
+                          onRazorSplitAll(clampedTime);
+                        } else {
+                          onRazorSplit(el, clampedTime);
+                        }
+                        return;
+                      }
                       const nextElement = isSelected ? null : el;
                       setSelectedElementId(nextElement ? elementKey : null);
                       onSelectElement?.(nextElement);
@@ -457,28 +485,7 @@ export const TimelineCanvas = memo(function TimelineCanvas({
         className="absolute top-0 bottom-0 pointer-events-none"
         style={{ left: `${GUTTER}px`, zIndex: 100 }}
       >
-        <div
-          className="absolute top-0 bottom-0"
-          style={{
-            left: "50%",
-            width: 2,
-            marginLeft: -1,
-            background: "var(--hf-accent, #3CE6AC)",
-            boxShadow: "0 0 8px rgba(60,230,172,0.5)",
-          }}
-        />
-        <div className="absolute" style={{ left: "50%", top: 0, transform: "translateX(-50%)" }}>
-          <div
-            style={{
-              width: 0,
-              height: 0,
-              borderLeft: "6px solid transparent",
-              borderRight: "6px solid transparent",
-              borderTop: "8px solid var(--hf-accent, #3CE6AC)",
-              filter: "drop-shadow(0 1px 3px rgba(0,0,0,0.6))",
-            }}
-          />
-        </div>
+        <PlayheadIndicator />
       </div>
     </div>
   );

package/src/player/components/TimelineClipDiamonds.tsx

@@ -123,7 +123,8 @@ export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({
         const kfKey = `${elementId}:${kf.percentage}`;
         const isKfSelected = selectedKeyframes.has(kfKey);
         const atPlayhead = isSelected && Math.abs(kf.percentage - currentPercentage) < 0.5;
-        const color = isKfSelected || atPlayhead ? accentColor : "#a3a3a3";
+        const isHighlighted = isKfSelected || atPlayhead;
+        const color = isHighlighted ? accentColor : "#a3a3a3";
         return (
           <button
             key={`${i}-${kf.percentage}`}
@@ -135,6 +136,7 @@ export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({
               transform: "translateY(-50%)",
               width: diamondSize,
               height: diamondSize,
+              zIndex: isHighlighted ? 2 : 1,
               pointerEvents: "auto",
               background: "none",
               border: "none",

package/src/player/components/timelineCallbacks.ts

@@ -0,0 +1,44 @@
+// fallow-ignore-file code-duplication
+// fallow-ignore-file dead-code
+import type { TimelineElement } from "../store/playerStore";
+import type { BlockedTimelineEditIntent } from "./timelineEditing";
+
+/**
+ * Shared callback signatures for timeline editing operations.
+ * Used by NLELayout, Timeline, and any component that passes through
+ * the standard set of timeline mutation handlers.
+ */
+export interface TimelineDropCallbacks {
+  onFileDrop?: (
+    files: File[],
+    placement?: { start: number; track: number },
+  ) => Promise<void> | void;
+  onAssetDrop?: (
+    assetPath: string,
+    placement: { start: number; track: number },
+  ) => Promise<void> | void;
+  onBlockDrop?: (
+    blockName: string,
+    placement: { start: number; track: number },
+  ) => Promise<void> | void;
+}
+
+export interface TimelineEditCallbacks {
+  onMoveElement?: (
+    element: TimelineElement,
+    updates: Pick<TimelineElement, "start" | "track">,
+  ) => Promise<void> | void;
+  onResizeElement?: (
+    element: TimelineElement,
+    updates: Pick<TimelineElement, "start" | "duration" | "playbackStart">,
+  ) => Promise<void> | void;
+  onBlockedEditAttempt?: (element: TimelineElement, intent: BlockedTimelineEditIntent) => void;
+  onSplitElement?: (element: TimelineElement, splitTime: number) => Promise<void> | void;
+  onRazorSplit?: (element: TimelineElement, splitTime: number) => Promise<void> | void;
+  onRazorSplitAll?: (splitTime: number) => Promise<void> | void;
+  onDeleteKeyframe?: (elementId: string, percentage: number) => void;
+  onDeleteAllKeyframes?: (elementId: string) => void;
+  onChangeKeyframeEase?: (elementId: string, percentage: number, ease: string) => void;
+  onMoveKeyframe?: (element: TimelineElement, oldPct: number, newPct: number) => void;
+  onToggleKeyframeAtPlayhead?: (element: TimelineElement) => void;
+}

package/src/player/components/timelineDragDrop.ts

@@ -1,25 +1,13 @@
-// fallow-ignore-file clone-families
 import { useCallback, useState, type RefObject } from "react";
 import { TIMELINE_ASSET_MIME, TIMELINE_BLOCK_MIME } from "../../utils/timelineAssetDrop";
 import { TRACK_H, resolveTimelineAssetDrop } from "./timelineLayout";
+import type { TimelineDropCallbacks } from "./timelineCallbacks";
 
-interface UseTimelineAssetDropOptions {
+interface UseTimelineAssetDropOptions extends TimelineDropCallbacks {
   scrollRef: RefObject<HTMLDivElement | null>;
   ppsRef: RefObject<number>;
   durationRef: RefObject<number>;
   trackOrderRef: RefObject<number[]>;
-  onFileDrop?: (
-    files: File[],
-    placement?: { start: number; track: number },
-  ) => Promise<void> | void;
-  onAssetDrop?: (
-    assetPath: string,
-    placement: { start: number; track: number },
-  ) => Promise<void> | void;
-  onBlockDrop?: (
-    blockName: string,
-    placement: { start: number; track: number },
-  ) => Promise<void> | void;
 }
 
 export function useTimelineAssetDrop({

package/src/player/components/useTimelineZoom.ts

@@ -0,0 +1,18 @@
+// fallow-ignore-file dead-code
+import { usePlayerStore, type ZoomMode } from "../store/playerStore";
+
+export interface TimelineZoomState {
+  zoomMode: ZoomMode;
+  manualZoomPercent: number;
+  setZoomMode: (mode: ZoomMode) => void;
+  setManualZoomPercent: (percent: number) => void;
+}
+
+/** Shared zoom-related store selectors used by Timeline and TimelineToolbar. */
+export function useTimelineZoom(): TimelineZoomState {
+  const zoomMode = usePlayerStore((s) => s.zoomMode);
+  const manualZoomPercent = usePlayerStore((s) => s.manualZoomPercent);
+  const setZoomMode = usePlayerStore((s) => s.setZoomMode);
+  const setManualZoomPercent = usePlayerStore((s) => s.setManualZoomPercent);
+  return { zoomMode, manualZoomPercent, setZoomMode, setManualZoomPercent };
+}

package/src/player/store/playerStore.ts

@@ -6,6 +6,10 @@ export interface KeyframeCacheEntry {
   format: string;
   keyframes: Array<{
     percentage: number;
+    /** Original tween-relative percentage (server mutations need this, not the clip-relative `percentage`). */
+    tweenPercentage?: number;
+    /** Which property group the source tween belongs to (position, scale, rotation, visual, etc.). */
+    propertyGroup?: string;
     properties: Record<string, number | string>;
     ease?: string;
   }>;
@@ -45,6 +49,7 @@ export interface TimelineElement {
 }
 
 export type ZoomMode = "fit" | "manual";
+type TimelineTool = "select" | "razor";
 
 interface PlayerState {
   isPlaying: boolean;
@@ -65,11 +70,19 @@ interface PlayerState {
   /** Work-area out-point (seconds). When set, loop ends here and E jumps here. */
   outPoint: number | null;
 
+  activeTool: TimelineTool;
+  setActiveTool: (tool: TimelineTool) => void;
+
   /** Set of selected keyframe keys in format `${elementId}:${percentage}`. */
   selectedKeyframes: Set<string>;
   toggleSelectedKeyframe: (key: string) => void;
   clearSelectedKeyframes: () => void;
 
+  /** Tween-relative percentage of the last-clicked keyframe diamond. Operations
+   *  (drag, resize, rotate) target this instead of recomputing from playhead. */
+  activeKeyframePct: number | null;
+  setActiveKeyframePct: (pct: number | null) => void;
+
   /** Multi-select: additional selected elements beyond selectedElementId. */
   selectedElementIds: Set<string>;
   toggleSelectedElementId: (id: string) => void;
@@ -153,6 +166,9 @@ export const usePlayerStore = create<PlayerState>((set) => ({
   inPoint: null,
   outPoint: null,
 
+  activeTool: "select",
+  setActiveTool: (tool) => set({ activeTool: tool }),
+
   selectedKeyframes: new Set(),
   toggleSelectedKeyframe: (key) =>
     set((s) => {
@@ -163,6 +179,9 @@ export const usePlayerStore = create<PlayerState>((set) => ({
     }),
   clearSelectedKeyframes: () => set({ selectedKeyframes: new Set() }),
 
+  activeKeyframePct: null,
+  setActiveKeyframePct: (pct) => set({ activeKeyframePct: pct }),
+
   keyframeClipboard: null,
   setKeyframeClipboard: (data) => set({ keyframeClipboard: data }),
 
@@ -262,6 +281,7 @@ export const usePlayerStore = create<PlayerState>((set) => ({
       selectedElementId: null,
       inPoint: null,
       outPoint: null,
+      activeTool: "select",
       selectedKeyframes: new Set(),
       selectedElementIds: new Set(),
       expandedTimelineElements: new Set(),

package/src/utils/globalTimeCompiler.test.ts

@@ -103,8 +103,8 @@ describe("resolveTweenDuration", () => {
     expect(resolveTweenDuration(makeAnim({ duration: 2 }))).toBe(2);
   });
 
-  test("missing duration defaults to 1", () => {
-    expect(resolveTweenDuration(makeAnim({ duration: undefined }))).toBe(1);
+  test("missing duration defaults to GSAP default (0.5)", () => {
+    expect(resolveTweenDuration(makeAnim({ duration: undefined }))).toBe(0.5);
   });
 });
 

package/src/utils/globalTimeCompiler.ts

@@ -27,6 +27,7 @@ export function isTimeWithinTween(
 }
 
 export function resolveTweenStart(animation: GsapAnimation): number | null {
+  if (animation.resolvedStart != null) return animation.resolvedStart;
   if (typeof animation.position === "number") return animation.position;
   const parsed = Number.parseFloat(animation.position as string);
   if (!Number.isNaN(parsed)) return parsed;
@@ -34,7 +35,7 @@ export function resolveTweenStart(animation: GsapAnimation): number | null {
 }
 
 export function resolveTweenDuration(animation: GsapAnimation): number {
-  return animation.duration ?? 1;
+  return animation.duration ?? 0.5;
 }
 
 export function findTweenAtTime(

package/src/utils/gsapSoftReload.test.ts

@@ -28,10 +28,26 @@ function buildMockIframe(overrides: Record<string, unknown> = {}) {
     ...overrides,
   };
 
+  // Intercept appendChild: when a <script> is appended, simulate execution by
+  // repopulating __timelines (mimicking what the real GSAP script would do).
+  const realAppendChild = container.appendChild.bind(container);
+  container.appendChild = <T extends Node>(node: T): T => {
+    const result = realAppendChild(node);
+    if (node instanceof HTMLScriptElement && node.textContent?.includes("gsap.timeline")) {
+      // Simulate the script populating __timelines
+      const cw = contentWindow as { __timelines?: Record<string, unknown> };
+      if (cw.__timelines) {
+        cw.__timelines.root = { kill: vi.fn(), pause: vi.fn() };
+      }
+    }
+    return result;
+  };
+
   const contentDocument = {
     querySelectorAll: (sel: string) => (sel === "script:not([src])" ? [scriptEl] : []),
     createElement: (tag: string) => document.createElement(tag),
     body: container,
+    head: document.createElement("div"),
   };
 
   return {

package/src/utils/gsapSoftReload.ts

@@ -7,6 +7,8 @@ type IframeWindow = Window & {
   gsap?: {
     timeline?: (...args: unknown[]) => unknown;
     registerPlugin?: (...plugins: unknown[]) => unknown;
+    set?: (targets: Element | Element[], vars: Record<string, unknown>) => void;
+    globalTimeline?: { getChildren?: (deep: boolean) => Array<{ kill?: () => void }> };
   };
   MotionPathPlugin?: unknown;
 };
@@ -29,6 +31,14 @@ function findGsapScriptElements(doc: Document): HTMLScriptElement[] {
   return results;
 }
 
+/** Check that the new script repopulated __timelines with at least one entry. */
+function verifyTimelinesPopulated(win: IframeWindow): boolean {
+  const tlKeys = win.__timelines
+    ? Object.keys(win.__timelines).filter((k) => k !== "__proxied")
+    : [];
+  return tlKeys.length > 0;
+}
+
 /**
  * Replace the GSAP script in the live iframe without reloading. This preserves
  * the WebGL context and shader transition cache.
@@ -56,24 +66,30 @@ export function applySoftReload(iframe: HTMLIFrameElement | null, scriptText: st
 
   const currentTime = win.__player?.getTime?.() ?? 0;
 
+  // Track whether the MotionPath async path was taken. When it is, the script
+  // executes inside pluginScript.onload — after applySoftReload has already
+  // returned. We optimistically return true because the script WILL execute
+  // once the plugin loads; the alternative (returning false) would trigger a
+  // full iframe reload that destroys the very WebGL context we're preserving.
+  let deferredToAsync = false;
+
   const doReload = () => {
     const timelines = win.__timelines;
+    const allTargets: Element[] = [];
+
     if (timelines) {
       for (const key of Object.keys(timelines)) {
+        if (key === "__proxied") continue;
         try {
           const tl = timelines[key] as {
             kill?: () => void;
             getChildren?: (deep: boolean) => Array<{ targets?: () => Element[] }>;
           };
-          const allTargets: Element[] = [];
           if (tl?.getChildren) {
             try {
               for (const child of tl.getChildren(true)) {
                 if (typeof child.targets === "function") {
-                  for (const t of child.targets()) {
-                    allTargets.push(t);
-                    delete (t as unknown as Record<string, unknown>)._gsap;
-                  }
+                  for (const t of child.targets()) allTargets.push(t);
                 }
               }
             } catch {}
@@ -84,6 +100,23 @@ export function applySoftReload(iframe: HTMLIFrameElement | null, scriptText: st
       }
     }
 
+    // Kill bare gsap.to/from tweens not registered on __timelines
+    if (win.gsap?.globalTimeline?.getChildren) {
+      try {
+        for (const child of win.gsap.globalTimeline.getChildren(false)) {
+          child.kill?.();
+        }
+      } catch {}
+    }
+
+    // Clear residual inline transforms left by killed tweens so from() tweens
+    // don't read stale end values from the DOM on re-execution
+    if (allTargets.length > 0 && win.gsap?.set) {
+      try {
+        win.gsap.set(allTargets, { clearProps: "all" });
+      } catch {}
+    }
+
     oldScriptEl.remove();
 
     const executeScript = () => {
@@ -98,10 +131,9 @@ export function applySoftReload(iframe: HTMLIFrameElement | null, scriptText: st
       win.__hfStudioManualEditsApply?.();
     };
 
-    // Load MotionPathPlugin on demand if the script uses motionPath.
-    // Uses the same CDN as composition templates (GSAP_CDN in constants.ts).
     const needsMotionPath = /motionPath\s*[:{]/.test(scriptText);
     if (needsMotionPath && !win.MotionPathPlugin && win.gsap) {
+      deferredToAsync = true;
       const pluginScript = doc.createElement("script");
       pluginScript.src = "https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/MotionPathPlugin.min.js";
       pluginScript.onload = () => executeScript();
@@ -119,7 +151,10 @@ export function applySoftReload(iframe: HTMLIFrameElement | null, scriptText: st
     } else {
       doReload();
     }
-    return true;
+    // When MotionPath needs async loading, the script hasn't executed yet —
+    // skip the __timelines check and return true optimistically.
+    if (deferredToAsync) return true;
+    return verifyTimelinesPopulated(win);
   } catch {
     return false;
   }