@hyperframes/studio 0.6.73 → 0.6.75

package/src/components/editor/SnapToolbar.tsx

@@ -0,0 +1,163 @@
+// fallow-ignore-file unused-file
+import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { MagnetStraight, GridFour } from "@phosphor-icons/react";
+import { readStudioUiPreferences, writeStudioUiPreferences } from "../../utils/studioUiPreferences";
+
+const SNAP_DEFAULTS = {
+  snapEnabled: true,
+  gridVisible: false,
+  gridSpacing: 50,
+  snapToGrid: false,
+};
+
+// fallow-ignore-next-line complexity
+function readSnapPrefs() {
+  const prefs = readStudioUiPreferences();
+  return {
+    snapEnabled: prefs.snapEnabled ?? SNAP_DEFAULTS.snapEnabled,
+    gridVisible: prefs.gridVisible ?? SNAP_DEFAULTS.gridVisible,
+    gridSpacing: prefs.gridSpacing ?? SNAP_DEFAULTS.gridSpacing,
+    snapToGrid: prefs.snapToGrid ?? SNAP_DEFAULTS.snapToGrid,
+  };
+}
+
+interface SnapToolbarProps {
+  onSnapChange?: (prefs: {
+    snapEnabled: boolean;
+    gridVisible: boolean;
+    gridSpacing: number;
+    snapToGrid: boolean;
+  }) => void;
+}
+
+// fallow-ignore-next-line complexity
+export const SnapToolbar = memo(function SnapToolbar({ onSnapChange }: SnapToolbarProps) {
+  const [prefs, setPrefs] = useState(readSnapPrefs);
+  const [gridPopoverOpen, setGridPopoverOpen] = useState(false);
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const gridButtonRef = useRef<HTMLButtonElement>(null);
+
+  const updatePrefs = useCallback(
+    (patch: Partial<typeof prefs>) => {
+      setPrefs((prev) => {
+        const next = { ...prev, ...patch };
+        writeStudioUiPreferences(patch);
+        onSnapChange?.(next);
+        return next;
+      });
+    },
+    [onSnapChange],
+  );
+
+  const toggleSnap = useCallback(() => {
+    updatePrefs({ snapEnabled: !prefs.snapEnabled });
+  }, [prefs.snapEnabled, updatePrefs]);
+
+  const toggleGrid = useCallback(() => {
+    updatePrefs({ gridVisible: !prefs.gridVisible });
+  }, [prefs.gridVisible, updatePrefs]);
+
+  useEffect(() => {
+    // fallow-ignore-next-line complexity
+    const handleKeyDown = (e: KeyboardEvent) => {
+      const t = e.target;
+      if (t instanceof HTMLInputElement || t instanceof HTMLTextAreaElement) return;
+      if (t instanceof HTMLElement && t.isContentEditable) return;
+      if (t instanceof HTMLIFrameElement) return;
+      if (e.key === "s" && !e.metaKey && !e.ctrlKey && !e.altKey) {
+        e.preventDefault();
+        updatePrefs({ snapEnabled: !readSnapPrefs().snapEnabled });
+      }
+      if (e.key === "g" && !e.metaKey && !e.ctrlKey && !e.altKey) {
+        e.preventDefault();
+        updatePrefs({ gridVisible: !readSnapPrefs().gridVisible });
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [updatePrefs]);
+
+  useEffect(() => {
+    if (!gridPopoverOpen) return;
+    const handleClickOutside = (e: MouseEvent) => {
+      const target = e.target as Node;
+      if (popoverRef.current?.contains(target) || gridButtonRef.current?.contains(target)) return;
+      setGridPopoverOpen(false);
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [gridPopoverOpen]);
+
+  return (
+    <div className="absolute top-2 right-2 z-50 flex items-center gap-1">
+      <button
+        type="button"
+        className={`rounded-md p-1.5 transition-colors ${
+          prefs.snapEnabled
+            ? "bg-studio-accent/20 text-studio-accent"
+            : "bg-black/40 text-white/60 hover:bg-black/60 hover:text-white/80"
+        }`}
+        onClick={toggleSnap}
+        title={prefs.snapEnabled ? "Snap enabled (S)" : "Snap disabled (S)"}
+        aria-label="Toggle snap"
+      >
+        <MagnetStraight size={16} weight={prefs.snapEnabled ? "fill" : "regular"} />
+      </button>
+
+      <div className="relative">
+        <button
+          ref={gridButtonRef}
+          type="button"
+          className={`rounded-md p-1.5 transition-colors ${
+            prefs.gridVisible
+              ? "bg-studio-accent/20 text-studio-accent"
+              : "bg-black/40 text-white/60 hover:bg-black/60 hover:text-white/80"
+          }`}
+          onClick={toggleGrid}
+          onContextMenu={(e) => {
+            e.preventDefault();
+            setGridPopoverOpen((v) => !v);
+          }}
+          title={prefs.gridVisible ? "Grid visible (G)" : "Grid hidden (G)"}
+          aria-label="Toggle grid"
+        >
+          <GridFour size={16} weight={prefs.gridVisible ? "fill" : "regular"} />
+        </button>
+
+        {gridPopoverOpen && (
+          <div
+            ref={popoverRef}
+            className="absolute right-0 top-full mt-1 rounded-lg bg-neutral-800 border border-neutral-700 p-3 shadow-xl min-w-[180px]"
+          >
+            <label className="flex items-center justify-between text-xs text-white/80 mb-2">
+              <span>Grid spacing</span>
+              <input
+                type="number"
+                min={10}
+                max={500}
+                step={10}
+                value={prefs.gridSpacing}
+                onChange={(e) => {
+                  const val = Number.parseInt(e.target.value, 10);
+                  if (Number.isFinite(val) && val >= 10 && val <= 500) {
+                    updatePrefs({ gridSpacing: val });
+                  }
+                }}
+                className="w-16 rounded bg-neutral-900 border border-neutral-600 px-1.5 py-0.5 text-xs text-white text-right tabular-nums outline-none focus:border-studio-accent"
+              />
+            </label>
+            <label className="flex items-center gap-2 text-xs text-white/80 cursor-pointer">
+              <input
+                type="checkbox"
+                checked={prefs.snapToGrid}
+                onChange={() => updatePrefs({ snapToGrid: !prefs.snapToGrid })}
+                className="accent-studio-accent"
+              />
+              <span>Snap to grid</span>
+            </label>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});

package/src/components/editor/SpringEaseEditor.tsx

@@ -0,0 +1,256 @@
+import { useState, useRef, useEffect, useCallback } from "react";
+import { generateSpringEaseData, SPRING_PRESETS } from "@hyperframes/core/spring-ease";
+import { LABEL } from "./MotionPanelFields";
+import { RotateCcw } from "../../icons/SystemIcons";
+
+interface SpringParams {
+  mass: number;
+  stiffness: number;
+  damping: number;
+}
+
+const DEFAULT_SPRING: SpringParams = { mass: 1, stiffness: 180, damping: 12 };
+
+const SLIDERS: {
+  key: keyof SpringParams;
+  label: string;
+  min: number;
+  max: number;
+  step: number;
+}[] = [
+  { key: "mass", label: "Mass", min: 0.1, max: 5, step: 0.1 },
+  { key: "stiffness", label: "Stiffness", min: 10, max: 500, step: 10 },
+  { key: "damping", label: "Damping", min: 1, max: 50, step: 1 },
+];
+
+function springValue(mass: number, stiffness: number, damping: number, t: number): number {
+  const w0 = Math.sqrt(stiffness / mass);
+  const zeta = damping / (2 * Math.sqrt(stiffness * mass));
+  if (zeta < 1) {
+    const wd = w0 * Math.sqrt(1 - zeta * zeta);
+    return (
+      1 - Math.exp(-zeta * w0 * t) * (Math.cos(wd * t) + ((zeta * w0) / wd) * Math.sin(wd * t))
+    );
+  }
+  if (zeta === 1) {
+    return 1 - (1 + w0 * t) * Math.exp(-w0 * t);
+  }
+  const s1 = -w0 * (zeta - Math.sqrt(zeta * zeta - 1));
+  const s2 = -w0 * (zeta + Math.sqrt(zeta * zeta - 1));
+  return 1 + (s1 * Math.exp(s2 * t) - s2 * Math.exp(s1 * t)) / (s2 - s1);
+}
+
+function springSimDuration(mass: number, stiffness: number, damping: number): number {
+  const w0 = Math.sqrt(stiffness / mass);
+  const zeta = damping / (2 * Math.sqrt(stiffness * mass));
+  if (zeta < 1) return Math.min(5 / (zeta * w0), 10);
+  const decayRate = zeta * w0 - w0 * Math.sqrt(zeta * zeta - 1);
+  return Math.min(4 / Math.max(decayRate, 0.01), 10);
+}
+
+function buildSpringPath(
+  params: SpringParams,
+  mapFn: (point: { x: number; y: number }) => { x: number; y: number },
+): string {
+  const steps = 64;
+  const simDur = springSimDuration(params.mass, params.stiffness, params.damping);
+  const commands: string[] = [];
+  for (let i = 0; i <= steps; i++) {
+    const t = i / steps;
+    const simT = t * simDur;
+    const y = springValue(params.mass, params.stiffness, params.damping, simT);
+    const mapped = mapFn({ x: t, y });
+    commands.push(`${i === 0 ? "M" : "L"}${mapped.x.toFixed(2)},${mapped.y.toFixed(2)}`);
+  }
+  return commands.join(" ");
+}
+
+export function SpringEaseEditor({
+  onCommit,
+}: {
+  onCommit: (easeId: string, easeData: string) => void;
+}) {
+  const [params, setParams] = useState<SpringParams>(DEFAULT_SPRING);
+  const commitTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const scheduleCommit = useCallback(
+    (next: SpringParams) => {
+      if (commitTimeoutRef.current) clearTimeout(commitTimeoutRef.current);
+      commitTimeoutRef.current = setTimeout(() => {
+        const data = generateSpringEaseData(next.mass, next.stiffness, next.damping);
+        const id = `spring-m${next.mass}-k${next.stiffness}-d${next.damping}`;
+        onCommit(id, data);
+      }, 120);
+    },
+    [onCommit],
+  );
+
+  useEffect(() => {
+    return () => {
+      if (commitTimeoutRef.current) clearTimeout(commitTimeoutRef.current);
+    };
+  }, []);
+
+  const updateParam = (key: keyof SpringParams, value: number) => {
+    const next = { ...params, [key]: value };
+    setParams(next);
+    scheduleCommit(next);
+  };
+
+  const applyPreset = (preset: (typeof SPRING_PRESETS)[number]) => {
+    const next: SpringParams = {
+      mass: preset.mass,
+      stiffness: preset.stiffness,
+      damping: preset.damping,
+    };
+    setParams(next);
+    const data = generateSpringEaseData(next.mass, next.stiffness, next.damping);
+    onCommit(preset.name, data);
+  };
+
+  const reset = () => {
+    setParams(DEFAULT_SPRING);
+    const data = generateSpringEaseData(
+      DEFAULT_SPRING.mass,
+      DEFAULT_SPRING.stiffness,
+      DEFAULT_SPRING.damping,
+    );
+    onCommit("spring-bouncy", data);
+  };
+
+  // SVG layout matching EaseCurveEditor proportions
+  const width = 324;
+  const height = 214;
+  const plot = { left: 46, top: 24, width: 242, height: 146 };
+  const yMin = -0.2;
+  const yMax = 1.3;
+
+  const mapPoint = (point: { x: number; y: number }) => ({
+    x: plot.left + point.x * plot.width,
+    y: plot.top + ((yMax - point.y) / (yMax - yMin)) * plot.height,
+  });
+
+  const curvePath = buildSpringPath(params, mapPoint);
+  const start = mapPoint({ x: 0, y: 0 });
+  const end = mapPoint({ x: 1, y: 1 });
+
+  const activePreset = SPRING_PRESETS.find(
+    (p) =>
+      p.mass === params.mass && p.stiffness === params.stiffness && p.damping === params.damping,
+  );
+
+  return (
+    <div className="overflow-hidden rounded-2xl border border-neutral-800 bg-black/40">
+      <div className="flex items-center justify-between gap-3 border-b border-neutral-800 px-3 py-2">
+        <div>
+          <div className={LABEL}>Spring Ease</div>
+          <div className="mt-1 font-mono text-[10px] text-neutral-500">
+            {activePreset?.label ?? `m${params.mass} k${params.stiffness} d${params.damping}`}
+          </div>
+        </div>
+        <button
+          type="button"
+          onClick={reset}
+          className="inline-flex h-8 items-center justify-center gap-2 rounded-xl border border-neutral-800 bg-neutral-950 px-3 text-[10px] font-semibold uppercase tracking-[0.14em] text-neutral-400 transition-colors hover:border-neutral-700 hover:text-neutral-100"
+        >
+          <RotateCcw size={13} />
+          Reset
+        </button>
+      </div>
+
+      {/* Curve preview */}
+      <svg viewBox={`0 0 ${width} ${height}`} className="block w-full select-none touch-none">
+        <rect x="0" y="0" width={width} height={height} fill="transparent" />
+        {[0, 0.5, 1].map((value) => {
+          const mapped = mapPoint({ x: 0, y: value });
+          return (
+            <g key={value}>
+              <line
+                x1={plot.left}
+                x2={plot.left + plot.width}
+                y1={mapped.y}
+                y2={mapped.y}
+                stroke="rgba(255,255,255,0.12)"
+                strokeDasharray="5 8"
+              />
+              <text
+                x={plot.left - 12}
+                y={mapped.y + 4}
+                textAnchor="end"
+                className="fill-neutral-500 text-[10px] font-semibold"
+              >
+                {value}
+              </text>
+            </g>
+          );
+        })}
+        <line
+          x1={plot.left}
+          x2={plot.left + plot.width}
+          y1={plot.top + plot.height}
+          y2={plot.top + plot.height}
+          stroke="rgba(255,255,255,0.18)"
+        />
+        <line
+          x1={plot.left}
+          x2={plot.left}
+          y1={plot.top}
+          y2={plot.top + plot.height}
+          stroke="rgba(255,255,255,0.18)"
+        />
+        <path d={curvePath} fill="none" stroke="#ffdd57" strokeWidth="4" strokeLinecap="round" />
+        <circle cx={start.x} cy={start.y} r="5" fill="#ffdd57" />
+        <circle cx={end.x} cy={end.y} r="5" fill="#ffdd57" />
+      </svg>
+
+      {/* Presets */}
+      <div className="flex gap-1.5 border-t border-neutral-800 px-3 py-2">
+        {SPRING_PRESETS.map((preset) => {
+          const isActive =
+            preset.mass === params.mass &&
+            preset.stiffness === params.stiffness &&
+            preset.damping === params.damping;
+          return (
+            <button
+              key={preset.name}
+              type="button"
+              onClick={() => applyPreset(preset)}
+              className={`flex-1 rounded-lg px-1.5 py-1.5 text-[10px] font-semibold transition-colors ${
+                isActive
+                  ? "border border-yellow-400/40 bg-yellow-400/10 text-yellow-300"
+                  : "border border-neutral-800 bg-neutral-950 text-neutral-500 hover:border-neutral-700 hover:text-neutral-300"
+              }`}
+            >
+              {preset.label}
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Sliders */}
+      <div className="space-y-3 border-t border-neutral-800 px-3 py-3">
+        {SLIDERS.map((slider) => (
+          <div key={slider.key}>
+            <div className="mb-1 flex items-center justify-between">
+              <span className="text-[10px] font-medium uppercase tracking-[0.14em] text-neutral-500">
+                {slider.label}
+              </span>
+              <span className="min-w-[36px] text-right font-mono text-[10px] text-neutral-400">
+                {params[slider.key]}
+              </span>
+            </div>
+            <input
+              type="range"
+              min={slider.min}
+              max={slider.max}
+              step={slider.step}
+              value={params[slider.key]}
+              onChange={(e) => updateParam(slider.key, Number(e.target.value))}
+              className="h-1 w-full cursor-pointer appearance-none rounded-full bg-neutral-800 accent-yellow-400 [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-yellow-400"
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/editor/domEditOverlayGestures.ts

@@ -6,6 +6,7 @@ import type {
 } from "./manualEdits";
 import type { ManualOffsetDragMember } from "./manualOffsetDrag";
 import type { GroupOverlayItem } from "./domEditOverlayGeometry";
+import type { SnapContext } from "./snapTargetCollection";
 
 export type GestureKind = "drag" | "resize" | "rotate";
 
@@ -36,6 +37,9 @@ export interface GestureState {
   editScaleX: number;
   editScaleY: number;
   manualEditDragToken?: string;
+  snapContext?: SnapContext;
+  lastSnappedDx?: number;
+  lastSnappedDy?: number;
 }
 
 export interface GroupGestureState {
@@ -43,6 +47,9 @@ export interface GroupGestureState {
   startY: number;
   originItems: GroupOverlayItem[];
   members: ManualOffsetDragMember[];
+  snapContext?: SnapContext;
+  lastSnappedDx?: number;
+  lastSnappedDy?: number;
 }
 
 export interface BlockedMoveState {

package/src/components/editor/domEditOverlayStartGesture.ts

@@ -23,6 +23,7 @@ import {
 } from "./domEditOverlayGeometry";
 import { type GestureKind, type GestureState } from "./domEditOverlayGestures";
 import type { UseDomEditOverlayGesturesOptions } from "./useDomEditOverlayGestures";
+import { collectSnapContext, buildExcludeElements } from "./snapTargetCollection";
 
 export function startGroupDrag(
   e: React.PointerEvent<HTMLElement>,
@@ -61,6 +62,20 @@ export function startGroupDrag(
     members.push(result.member);
   }
 
+  const overlayEl = opts.overlayRef.current;
+  const iframe = opts.iframeRef.current;
+  const snapContext =
+    overlayEl && iframe
+      ? collectSnapContext({
+          overlayEl,
+          iframe,
+          excludeElements: buildExcludeElements({
+            iframe,
+            groupSelections: items.map((i) => i.selection),
+          }),
+        })
+      : undefined;
+
   e.preventDefault();
   e.stopPropagation();
   e.currentTarget.setPointerCapture(e.pointerId);
@@ -70,10 +85,12 @@ export function startGroupDrag(
     startY: e.clientY,
     originItems: items,
     members,
+    snapContext,
   };
   return true;
 }
 
+// fallow-ignore-next-line complexity
 export function startGesture(
   kind: GestureKind,
   e: React.PointerEvent<HTMLElement>,
@@ -124,6 +141,16 @@ export function startGesture(
   const overlayBounds = overlayEl?.getBoundingClientRect();
   const centerX = (overlayBounds?.left ?? 0) + rect.left + rect.width / 2;
   const centerY = (overlayBounds?.top ?? 0) + rect.top + rect.height / 2;
+
+  const iframe = opts.iframeRef.current;
+  const snapContext =
+    (kind === "drag" || kind === "resize") && overlayEl && iframe
+      ? collectSnapContext({
+          overlayEl,
+          iframe,
+          excludeElements: buildExcludeElements({ iframe, selection: sel }),
+        })
+      : undefined;
   e.preventDefault();
   e.stopPropagation();
   e.currentTarget.setPointerCapture(e.pointerId);
@@ -150,6 +177,7 @@ export function startGesture(
     editScaleX: rect.editScaleX,
     editScaleY: rect.editScaleY,
     manualEditDragToken,
+    snapContext,
   };
   return true;
 }

package/src/components/editor/gsapAnimationConstants.ts

@@ -27,6 +27,16 @@ export const PROP_LABELS: Record<string, string> = {
   autoAlpha: "Visibility",
   visibility: "Visible",
   scaleX_alias: "Stretch X",
+  filter: "Filter",
+  clipPath: "Clip Path",
+  color: "Color",
+  backgroundColor: "Background",
+  borderColor: "Border Color",
+  borderRadius: "Radius",
+  fontSize: "Font Size",
+  letterSpacing: "Tracking",
+  skewX: "Skew X",
+  skewY: "Skew Y",
 };
 
 export const PROP_UNITS: Record<string, string> = {
@@ -83,6 +93,11 @@ export const EASE_LABELS: Record<string, string> = {
   "expo.out": "Very snappy stop",
   "expo.in": "Very slow start",
   "expo.inOut": "Dramatic ease",
+  "spring-gentle": "Gentle spring",
+  "spring-bouncy": "Bouncy spring",
+  "spring-stiff": "Stiff spring",
+  "spring-wobbly": "Wobbly spring",
+  "spring-heavy": "Heavy spring",
 };
 
 export const EASE_CURVES: Record<string, [number, number, number, number]> = {
@@ -123,6 +138,33 @@ export function parseCustomEaseFromString(ease: string): {
 
 export const PERCENT_PROPS = new Set(["opacity", "autoAlpha"]);
 
+export const PROP_CONSTRAINTS: Record<string, { min?: number; max?: number; step?: number }> = {
+  opacity: { min: 0, max: 1, step: 0.01 },
+  autoAlpha: { min: 0, max: 1, step: 0.01 },
+  scale: { min: -10, max: 10, step: 0.01 },
+  scaleX: { min: -10, max: 10, step: 0.01 },
+  scaleY: { min: -10, max: 10, step: 0.01 },
+  rotation: { step: 1 },
+  skewX: { min: -90, max: 90, step: 1 },
+  skewY: { min: -90, max: 90, step: 1 },
+  width: { min: 0, step: 1 },
+  height: { min: 0, step: 1 },
+  borderRadius: { min: 0, step: 1 },
+  x: { step: 1 },
+  y: { step: 1 },
+  fontSize: { min: 1, step: 1 },
+  letterSpacing: { step: 0.1 },
+};
+
+export function clampPropertyValue(prop: string, value: number): number {
+  const constraint = PROP_CONSTRAINTS[prop];
+  if (!constraint) return value;
+  let clamped = value;
+  if (constraint.min !== undefined) clamped = Math.max(constraint.min, clamped);
+  if (constraint.max !== undefined) clamped = Math.min(constraint.max, clamped);
+  return clamped;
+}
+
 export const ADD_METHODS = ["to", "from", "fromTo", "set"] as const;
 
 export const ADD_METHOD_LABELS: Record<string, string> = {

package/src/components/editor/gsapAnimationHelpers.ts

@@ -14,7 +14,8 @@ export function buildTweenSummary(animation: GsapAnimation): string {
   const props = Object.entries(animation.properties);
   const target = animation.targetSelector;
   const dur = animation.duration ?? 0;
-  const pos = animation.position;
+  const rawPos = animation.position;
+  const pos = typeof rawPos === "number" ? parseFloat(rawPos.toFixed(3)) : rawPos;
   const propDescs = props.map(([p, v]) => {
     const label = (PROP_LABELS[p] ?? p).toLowerCase();
     return `${label} to ${formatPropValue(p, v)}`;

package/src/components/editor/manualEditingAvailability.ts

@@ -68,6 +68,12 @@ export const STUDIO_BLOCKS_PANEL_ENABLED = resolveStudioBooleanEnvFlag(
 export const STUDIO_GSAP_PANEL_ENABLED = resolveStudioBooleanEnvFlag(
   env,
   ["VITE_STUDIO_ENABLE_GSAP_PANEL", "VITE_STUDIO_GSAP_PANEL_ENABLED"],
+  true,
+);
+
+export const STUDIO_KEYFRAMES_ENABLED = resolveStudioBooleanEnvFlag(
+  env,
+  ["VITE_STUDIO_ENABLE_KEYFRAMES", "VITE_STUDIO_KEYFRAMES_ENABLED"],
   false,
 );
 

package/src/components/editor/manualEditsDom.ts

@@ -223,6 +223,7 @@ function isIdentityAfterTranslateStrip(m: DOMMatrix): boolean {
 }
 
 function stripGsapTranslateFromTransform(element: HTMLElement): void {
+  if (element.hasAttribute(STUDIO_MANUAL_EDIT_GESTURE_ATTR)) return;
   const transform = element.style.getPropertyValue("transform");
   if (!transform || transform === "none") return;
   const DOMMatrixCtor = (element.ownerDocument.defaultView as (Window & typeof globalThis) | null)
@@ -233,8 +234,11 @@ function stripGsapTranslateFromTransform(element: HTMLElement): void {
     if (m.m41 === 0 && m.m42 === 0) return;
     const offsetX = readPxCustomProperty(element, STUDIO_OFFSET_X_PROP);
     const offsetY = readPxCustomProperty(element, STUDIO_OFFSET_Y_PROP);
-    m.m41 -= offsetX;
-    m.m42 -= offsetY;
+    const angle = Math.atan2(m.b, m.a);
+    const cos = Math.cos(angle);
+    const sin = Math.sin(angle);
+    m.m41 -= offsetX * cos - offsetY * sin;
+    m.m42 -= offsetX * sin + offsetY * cos;
     if (Math.abs(m.m41) < 0.01 && Math.abs(m.m42) < 0.01 && isIdentityAfterTranslateStrip(m)) {
       element.style.removeProperty("transform");
     } else {
@@ -512,8 +516,58 @@ function reapplyPathOffsets(doc: Document): void {
   }
 }
 
+function gsapAnimatesProperty(el: HTMLElement, ...props: string[]): boolean {
+  const win = el.ownerDocument.defaultView as
+    | (Window & {
+        __timelines?: Record<
+          string,
+          {
+            getChildren?: (
+              deep: boolean,
+            ) => Array<{ targets?: () => Element[]; vars?: Record<string, unknown> }>;
+          }
+        >;
+      })
+    | null;
+  if (!win?.__timelines) return false;
+  const propSet = new Set(props);
+  for (const tl of Object.values(win.__timelines)) {
+    if (!tl?.getChildren) continue;
+    try {
+      for (const child of tl.getChildren(true)) {
+        if (!child.targets || !child.vars) continue;
+        let targetsEl = false;
+        for (const t of child.targets()) {
+          if (t === el || (el.id && t.id === el.id)) {
+            targetsEl = true;
+            break;
+          }
+        }
+        if (!targetsEl) continue;
+        const vars = child.vars;
+        for (const p of propSet) {
+          if (p in vars) return true;
+        }
+        if (vars.keyframes && typeof vars.keyframes === "object") {
+          for (const kfVal of Object.values(vars.keyframes as Record<string, unknown>)) {
+            if (kfVal && typeof kfVal === "object") {
+              for (const p of propSet) {
+                if (p in (kfVal as Record<string, unknown>)) return true;
+              }
+            }
+          }
+        }
+      }
+    } catch {
+      /* */
+    }
+  }
+  return false;
+}
+
 function reapplyBoxSizes(doc: Document): void {
   for (const el of queryStudioElements(doc, STUDIO_BOX_SIZE_ATTR)) {
+    if (gsapAnimatesProperty(el, "width", "height")) continue;
     const w = Number.parseFloat(el.style.getPropertyValue(STUDIO_WIDTH_PROP));
     const h = Number.parseFloat(el.style.getPropertyValue(STUDIO_HEIGHT_PROP));
     if (Number.isFinite(w) && Number.isFinite(h) && w > 0 && h > 0) {