diff --git a/packages/core/package.json b/packages/core/package.json
index 263c5b551d..300f6eab14 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -239,6 +239,12 @@
       "import": "./src/parsers/springEase.ts",
       "types": "./src/parsers/springEase.ts"
     },
+    "./wiggle-ease": {
+      "bun": "./src/runtime/wiggleEase.ts",
+      "node": "./dist/runtime/wiggleEase.js",
+      "import": "./src/runtime/wiggleEase.ts",
+      "types": "./src/runtime/wiggleEase.ts"
+    },
     "./fonts/aliases": {
       "bun": "./src/fonts/aliases.ts",
       "node": "./dist/fonts/aliases.js",
@@ -413,6 +419,10 @@
         "import": "./dist/parsers/springEase.js",
         "types": "./dist/parsers/springEase.d.ts"
       },
+      "./wiggle-ease": {
+        "import": "./dist/runtime/wiggleEase.js",
+        "types": "./dist/runtime/wiggleEase.d.ts"
+      },
       "./fonts/aliases": {
         "import": "./dist/fonts/aliases.js",
         "types": "./dist/fonts/aliases.d.ts"
diff --git a/packages/core/src/figma/motionEase.test.ts b/packages/core/src/figma/motionEase.test.ts
index 0ca0d75eae..727984a34c 100644
--- a/packages/core/src/figma/motionEase.test.ts
+++ b/packages/core/src/figma/motionEase.test.ts
@@ -19,7 +19,7 @@ describe("mapEase", () => {
       ease: "power2.inOut",
     });
     expect(mapEase("backOut")).toEqual({ kind: "named", ease: "back.out" });
-    expect(mapEase("HOLD")).toEqual({ kind: "named", ease: "steps(1)" });
+    expect(mapEase("HOLD")).toEqual({ kind: "named", ease: "hold" });
   });
   it("falls back to none for unknown named eases", () => {
     expect(mapEase("wobble")).toEqual({ kind: "named", ease: "none" });
diff --git a/packages/core/src/figma/motionEase.ts b/packages/core/src/figma/motionEase.ts
index 5f52d6d1bd..1079487a16 100644
--- a/packages/core/src/figma/motionEase.ts
+++ b/packages/core/src/figma/motionEase.ts
@@ -28,7 +28,7 @@ const NAMED_EASE: Record<string, string> = {
   elasticinout: "elastic.inOut",
   anticipate: "back.in",
   spring: "elastic.out",
-  hold: "steps(1)",
+  hold: "hold",
 };
 
 function isBezier4(ease: unknown[]): ease is [number, number, number, number] {
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 5c39d474fe..94efee91a7 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -95,7 +95,6 @@ export {
   keyframesToGsapAnimations,
   gsapAnimationsToKeyframes,
 } from "@hyperframes/parsers";
-
 export type { ParsedHtml, CompositionMetadata } from "@hyperframes/parsers";
 
 export {
diff --git a/packages/core/src/parsers/springEase.test.ts b/packages/core/src/parsers/springEase.test.ts
new file mode 100644
index 0000000000..909f74425f
--- /dev/null
+++ b/packages/core/src/parsers/springEase.test.ts
@@ -0,0 +1,29 @@
+import { describe, expect, it } from "vitest";
+import { evaluateSpringEase, parseSpringBounce } from "./springEase";
+
+describe("single-parameter spring ease", () => {
+  it("parses and clamps the bounce parameter", () => {
+    expect(parseSpringBounce("spring(0.5)")).toBe(0.5);
+    expect(parseSpringBounce(" spring(2) ")).toBe(1);
+    expect(parseSpringBounce("spring(-1)")).toBe(0);
+    expect(parseSpringBounce("spring(nope)")).toBeNull();
+  });
+
+  it("starts at zero, overshoots, and settles exactly at one", () => {
+    const samples = Array.from({ length: 101 }, (_, index) => evaluateSpringEase(index / 100, 0.5));
+    expect(samples[0]).toBe(0);
+    expect(samples.at(-1)).toBe(1);
+    expect(Math.max(...samples)).toBeGreaterThan(1);
+  });
+
+  it("is deterministic and makes higher bounce values more oscillatory", () => {
+    const progress = Array.from({ length: 41 }, (_, index) => index / 40);
+    expect(progress.map((value) => evaluateSpringEase(value, 0.75))).toEqual(
+      progress.map((value) => evaluateSpringEase(value, 0.75)),
+    );
+
+    const lowBounce = progress.map((value) => evaluateSpringEase(value, 0.25));
+    const highBounce = progress.map((value) => evaluateSpringEase(value, 0.75));
+    expect(Math.max(...highBounce)).toBeGreaterThan(Math.max(...lowBounce));
+  });
+});
diff --git a/packages/core/src/parsers/springEase.ts b/packages/core/src/parsers/springEase.ts
index b7ae233b85..137d3a3ec7 100644
--- a/packages/core/src/parsers/springEase.ts
+++ b/packages/core/src/parsers/springEase.ts
@@ -1,2 +1,30 @@
-/** @deprecated Import from @hyperframes/parsers/spring-ease */
+// Preserve the legacy symbols (SpringPreset, SPRING_PRESETS, generateSpringEaseData)
+// on the still-published ./spring-ease subpath. Dropping them is a breaking change
+// for external importers; the canonical source stays @hyperframes/parsers/spring-ease.
 export * from "@hyperframes/parsers/spring-ease";
+
+const SPRING_TOKEN = /^\s*spring\(\s*([+-]?(?:\d+(?:\.\d*)?|\.\d+))\s*\)\s*$/;
+
+function clampBounce(bounce: number): number {
+  return Math.max(0, Math.min(1, bounce));
+}
+
+/** Parse Studio's single-parameter spring token into a normalized bounce value. */
+export function parseSpringBounce(ease: string): number | null {
+  const match = SPRING_TOKEN.exec(ease);
+  if (!match) return null;
+  const bounce = Number(match[1]);
+  return Number.isFinite(bounce) ? clampBounce(bounce) : null;
+}
+
+/** Evaluate Studio's deterministic, endpoint-normalized damped-cosine spring. */
+export function evaluateSpringEase(progress: number, bounce: number): number {
+  if (progress <= 0) return 0;
+  if (progress >= 1) return 1;
+
+  const normalizedBounce = clampBounce(bounce);
+  const decay = 12 - normalizedBounce * 6;
+  const angularFrequency = Math.PI * 2 * (1 + normalizedBounce * 1.5);
+  const endpoint = 1 - Math.exp(-decay) * Math.cos(angularFrequency);
+  return (1 - Math.exp(-decay * progress) * Math.cos(angularFrequency * progress)) / endpoint;
+}
diff --git a/packages/core/src/runtime/customEase.test.ts b/packages/core/src/runtime/customEase.test.ts
new file mode 100644
index 0000000000..705d32502d
--- /dev/null
+++ b/packages/core/src/runtime/customEase.test.ts
@@ -0,0 +1,67 @@
+import { describe, expect, it, vi } from "vitest";
+import { installStudioCustomEase } from "./customEase";
+
+describe("installStudioCustomEase", () => {
+  it("resolves wiggle while preserving hold, spring, custom, and named eases", () => {
+    const namedEase = (progress: number) => progress * progress;
+    const originalParseEase = vi.fn(() => namedEase);
+    const gsap = { parseEase: originalParseEase };
+
+    expect(installStudioCustomEase(gsap)).toBe(true);
+
+    const wiggleEase = gsap.parseEase("wiggle(6,easeInOut)");
+    expect(wiggleEase).toBeTypeOf("function");
+    const samples = Array.from({ length: 401 }, (_, index) => wiggleEase(index / 400));
+    expect(samples[0]).toBe(0);
+    expect(samples.at(-1)).toBe(1);
+    expect(samples).toEqual(Array.from({ length: 401 }, (_, index) => wiggleEase(index / 400)));
+    const directions = samples
+      .slice(1)
+      .map((value, index) => Math.sign(value - samples[index]!))
+      .filter((direction) => direction !== 0);
+    expect(
+      directions.filter((direction, index) => index > 0 && direction !== directions[index - 1])
+        .length,
+    ).toBeGreaterThanOrEqual(8);
+
+    expect(gsap.parseEase("hold")(0.5)).toBe(0);
+    expect(gsap.parseEase("spring(0.5)")(0)).toBe(0);
+    expect(gsap.parseEase("custom(M0,0 C0.25,0.1 0.25,1 1,1)")(1)).toBe(1);
+    expect(gsap.parseEase("power2.out")).toBe(namedEase);
+    expect(originalParseEase).toHaveBeenCalledTimes(1);
+  });
+
+  it("registers custom eases in GSAP's internal ease map for keyframe-segment resolution", () => {
+    // GSAP resolves keyframe SEGMENT eases via its internal _parseEase/_easeMap,
+    // not the public parseEase — so the eases must be registered there too, else
+    // a custom ease inside `keyframes:{...}` resolves to undefined and throws
+    // "_ease is not a function" on first render.
+    const easeMap = new Map<string, ((progress: number) => number) & { config?: unknown }>();
+    const gsap = {
+      parseEase: vi.fn((ease: unknown) => (typeof ease === "function" ? ease : null)),
+      registerEase: (name: string, ease: (progress: number) => number) => easeMap.set(name, ease),
+    };
+
+    expect(installStudioCustomEase(gsap)).toBe(true);
+
+    // Bare hold registers directly and holds at 0 until the end.
+    expect(easeMap.get("hold")?.(0.5)).toBe(0);
+    expect(easeMap.get("hold")?.(1)).toBe(1);
+
+    // GSAP calls a configurable ease's `.config` with the parenthesized params
+    // comma-split (custom's bezier path splits into several parts). The config
+    // must rejoin them and resolve a real ease.
+    const springConfig = easeMap.get("spring")?.config as (
+      ...p: unknown[]
+    ) => (n: number) => number;
+    expect(springConfig(0.5)(0)).toBe(0);
+
+    const customConfig = easeMap.get("custom")?.config as (
+      ...p: unknown[]
+    ) => (n: number) => number;
+    // "custom(M0,0 C0.25,0.1 0.25,1 1,1)" → params split on "," by GSAP:
+    const customEase = customConfig("M0", "0 C0.25", "0.1 0.25", "1 1", 1);
+    expect(customEase(0)).toBe(0);
+    expect(customEase(1)).toBe(1);
+  });
+});
diff --git a/packages/core/src/runtime/customEase.ts b/packages/core/src/runtime/customEase.ts
new file mode 100644
index 0000000000..25ae0816ff
--- /dev/null
+++ b/packages/core/src/runtime/customEase.ts
@@ -0,0 +1,131 @@
+import { evaluateSpringEase, parseSpringBounce } from "../parsers/springEase";
+import { resolveWiggleEase } from "./wiggleEase";
+
+type RuntimeEase = (progress: number) => number;
+
+type ConfigurableEase = RuntimeEase & { config?: (...params: unknown[]) => RuntimeEase };
+
+type GsapEaseApi = {
+  parseEase?: (ease: string | RuntimeEase, ...args: unknown[]) => RuntimeEase | null;
+  registerEase?: (name: string, ease: RuntimeEase) => void;
+};
+
+const BISECTION_STEPS = 24;
+const HOLD_EASE: RuntimeEase = (progress) => (progress >= 1 ? 1 : 0);
+const NUMBER_SOURCE = String.raw`([+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?)`;
+const CUSTOM_CUBIC_PATH = new RegExp(
+  String.raw`^\s*M\s*0\s*,\s*0\s+C\s*${NUMBER_SOURCE}\s*,\s*${NUMBER_SOURCE}\s+${NUMBER_SOURCE}\s*,\s*${NUMBER_SOURCE}\s+1\s*,\s*1\s*$`,
+  "i",
+);
+
+function cubicCoordinate(t: number, point1: number, point2: number): number {
+  const inverse = 1 - t;
+  return 3 * inverse * inverse * t * point1 + 3 * inverse * t * t * point2 + t * t * t;
+}
+
+function evaluateCubicBezier(
+  progress: number,
+  x1: number,
+  y1: number,
+  x2: number,
+  y2: number,
+): number {
+  if (progress <= 0) return 0;
+  if (progress >= 1) return 1;
+
+  let low = 0;
+  let high = 1;
+  for (let step = 0; step < BISECTION_STEPS; step += 1) {
+    const t = (low + high) / 2;
+    if (cubicCoordinate(t, x1, x2) < progress) low = t;
+    else high = t;
+  }
+  return cubicCoordinate((low + high) / 2, y1, y2);
+}
+
+function createCubicBezierEase(path: string): RuntimeEase | null {
+  const match = CUSTOM_CUBIC_PATH.exec(path);
+  if (!match) return null;
+  const x1 = Number(match[1]);
+  const y1 = Number(match[2]);
+  const x2 = Number(match[3]);
+  const y2 = Number(match[4]);
+  if (Math.min(x1, x2) < 0 || Math.max(x1, x2) > 1) return null;
+  return (progress) => evaluateCubicBezier(progress, x1, y1, x2, y2);
+}
+
+function resolveSpringEase(
+  ease: string,
+  springEaseCache: Map<number, RuntimeEase>,
+): RuntimeEase | null {
+  if (!ease.startsWith("spring(")) return null;
+  const bounce = parseSpringBounce(ease);
+  if (bounce === null) return null;
+  const cached = springEaseCache.get(bounce);
+  if (cached) return cached;
+  const springEase: RuntimeEase = (progress) => evaluateSpringEase(progress, bounce);
+  springEaseCache.set(bounce, springEase);
+  return springEase;
+}
+
+function resolveCustomEase(
+  ease: string,
+  customEaseCache: Map<string, RuntimeEase>,
+): RuntimeEase | null {
+  if (!ease.startsWith("custom(") || !ease.endsWith(")")) return null;
+  const path = ease.slice(7, -1);
+  const cached = customEaseCache.get(path);
+  if (cached) return cached;
+  const customEase = createCubicBezierEase(path);
+  if (customEase) customEaseCache.set(path, customEase);
+  return customEase;
+}
+
+export function installStudioCustomEase(gsap: GsapEaseApi): boolean {
+  const originalParseEase = gsap.parseEase;
+  if (!originalParseEase) return false;
+
+  const customEaseCache = new Map<string, RuntimeEase>();
+  const springEaseCache = new Map<number, RuntimeEase>();
+
+  // Single source of truth for "hyperframes ease string -> function". Both the
+  // public parseEase override and the internal registerEase configs below route
+  // through this, so the resolution rules live in exactly one place.
+  const resolveHyperframesEase = (ease: string | RuntimeEase): RuntimeEase | null => {
+    if (typeof ease !== "string") return null;
+    if (ease === "hold") return HOLD_EASE;
+    return (
+      resolveWiggleEase(ease) ??
+      resolveSpringEase(ease, springEaseCache) ??
+      resolveCustomEase(ease, customEaseCache)
+    );
+  };
+
+  // Public parseEase: direct callers (studio ease UI, adapters) resolve
+  // synchronously; anything else falls through to GSAP's own parser.
+  gsap.parseEase = function parseHyperframesEase(ease, ...args) {
+    return resolveHyperframesEase(ease) ?? originalParseEase.call(this, ease, ...args);
+  };
+
+  // GSAP resolves a keyframe SEGMENT's ease through its INTERNAL _parseEase /
+  // _easeMap, never the public parseEase above — so a custom ease used inside
+  // `keyframes:{...}` resolves to undefined and throws "_ease is not a function"
+  // on the first render. Register the eases in the internal map too. GSAP calls
+  // a configurable ease's `.config(...params)` with the parenthesized string
+  // comma-split, so `params.join(",")` losslessly reconstructs the original
+  // (including custom() bezier paths, whose commas survive the round-trip).
+  const registerEase = gsap.registerEase;
+  if (typeof registerEase === "function") {
+    registerEase("hold", HOLD_EASE);
+    const registerConfigurable = (name: string): void => {
+      const base: ConfigurableEase = (progress) => progress;
+      base.config = (...params) =>
+        resolveHyperframesEase(`${name}(${params.join(",")})`) ?? ((progress) => progress);
+      registerEase(name, base);
+    };
+    registerConfigurable("spring");
+    registerConfigurable("wiggle");
+    registerConfigurable("custom");
+  }
+  return true;
+}
diff --git a/packages/core/src/runtime/init.test.ts b/packages/core/src/runtime/init.test.ts
index c83fa4d30b..99e235b985 100644
--- a/packages/core/src/runtime/init.test.ts
+++ b/packages/core/src/runtime/init.test.ts
@@ -114,11 +114,184 @@ describe("initSandboxRuntimeModular", () => {
     delete (window as { __HF_EXPORT_RENDER_SEEK_CONFIG?: unknown }).__HF_EXPORT_RENDER_SEEK_CONFIG;
     delete window.__hfTimelinesBuilding;
     delete (window as { THREE?: unknown }).THREE;
+    delete (window as { __hfAutoNoopRegistered?: boolean }).__hfAutoNoopRegistered;
+    delete (window as { __hfCustomEaseRegistered?: boolean }).__hfCustomEaseRegistered;
+    delete window.gsap;
     vi.restoreAllMocks();
     window.requestAnimationFrame = originalRequestAnimationFrame;
     window.cancelAnimationFrame = originalCancelAnimationFrame;
   });
 
+  it("resolves Studio hold as a deterministic step at the segment end", () => {
+    const defaultEase = (progress: number) => progress;
+    const originalParseEase = vi.fn(() => defaultEase);
+    window.gsap = {
+      timeline: () => createMockTimeline(1),
+      parseEase: originalParseEase,
+      registerPlugin: vi.fn(),
+    };
+
+    const root = document.createElement("div");
+    root.setAttribute("data-composition-id", "main");
+    root.setAttribute("data-root", "true");
+    root.setAttribute("data-start", "0");
+    root.setAttribute("data-duration", "1");
+    root.setAttribute("data-width", "1920");
+    root.setAttribute("data-height", "1080");
+    document.body.appendChild(root);
+    window.__timelines = { main: createMockTimeline(1) };
+
+    initSandboxRuntimeModular();
+
+    const first = window.gsap.parseEase?.("hold");
+    const second = window.gsap.parseEase?.("hold");
+    expect(first).toBeTypeOf("function");
+    expect(second).toBe(first);
+    if (typeof first !== "function") return;
+
+    expect([0, 0.25, 0.5, 0.99].map(first)).toEqual([0, 0, 0, 0]);
+    expect(first(1)).toBe(1);
+    expect(first(1.01)).toBe(1);
+    expect(originalParseEase).not.toHaveBeenCalledWith("hold");
+  });
+
+  it("repairs a keyframes tween's inner-timeline ease baked to undefined before custom-ease registration", () => {
+    // The composition inline script builds keyframes tweens BEFORE this runtime
+    // registers the custom eases, so a `{keyframes, ease:"hold"}` tween's inner
+    // timeline `_ease` bakes to undefined (GSAP resolves it once at build via the
+    // internal ease map). GSAP then throws "_ease is not a function" on the first
+    // render. The runtime must re-resolve that inner ease after registration.
+    window.gsap = {
+      timeline: () => createMockTimeline(20),
+      parseEase: vi.fn(() => (progress: number) => progress),
+      registerPlugin: vi.fn(),
+      registerEase: vi.fn(),
+    } as unknown as typeof window.gsap;
+
+    const innerTimeline: { _ease?: unknown } = { _ease: undefined };
+    const keyframesTween = {
+      vars: { ease: "hold", keyframes: { "0%": { x: 0 }, "100%": { x: 50 } } },
+      timeline: innerTimeline,
+      _ease: (progress: number) => progress,
+      targets: () => [document.createElement("div")],
+    };
+    const main = createMockTimeline(20);
+    main.getChildren = () => [keyframesTween as unknown as RuntimeTimelineLike];
+
+    const root = document.createElement("div");
+    root.setAttribute("data-composition-id", "main");
+    root.setAttribute("data-root", "true");
+    root.setAttribute("data-start", "0");
+    root.setAttribute("data-duration", "20");
+    root.setAttribute("data-width", "1920");
+    root.setAttribute("data-height", "1080");
+    document.body.appendChild(root);
+    window.__timelines = { main };
+
+    expect(innerTimeline._ease).toBeUndefined();
+    initSandboxRuntimeModular();
+    // Bind re-resolves the inner ease to a real function (the installed hold ease),
+    // so a subsequent render can call `timeline._ease(...)` without throwing.
+    expect(innerTimeline._ease).toBeTypeOf("function");
+  });
+
+  it("resolves Studio custom cubic-bezier eases on the composition GSAP instance", () => {
+    const defaultEase = (progress: number) => 1 - (1 - progress) ** 2;
+    const originalParseEase = vi.fn(() => defaultEase);
+    window.gsap = {
+      timeline: () => createMockTimeline(1),
+      parseEase: originalParseEase,
+      registerPlugin: vi.fn(),
+    };
+
+    const root = document.createElement("div");
+    root.setAttribute("data-composition-id", "main");
+    root.setAttribute("data-root", "true");
+    root.setAttribute("data-start", "0");
+    root.setAttribute("data-duration", "1");
+    root.setAttribute("data-width", "1920");
+    root.setAttribute("data-height", "1080");
+    document.body.appendChild(root);
+    window.__timelines = { main: createMockTimeline(1) };
+
+    initSandboxRuntimeModular();
+
+    const custom = "custom(M0,0 C0.42,0 0.58,1 1,1)";
+    const first = window.gsap.parseEase?.(custom);
+    const second = window.gsap.parseEase?.(custom);
+    expect(first).toBeTypeOf("function");
+    expect(second).toBe(first);
+    if (typeof first !== "function" || typeof second !== "function") return;
+
+    const progressSamples = [0, 0.25, 0.5, 0.75, 1];
+    expect(progressSamples.map(first)).toEqual(progressSamples.map(second));
+    expect(first(0.25)).toBeCloseTo(0.1292, 4);
+    expect(first(0.5)).toBeCloseTo(0.5, 6);
+    expect(first(0.5)).not.toBeCloseTo(defaultEase(0.5), 6);
+    expect(first(0.75)).toBeCloseTo(0.8708, 4);
+    expect(originalParseEase).not.toHaveBeenCalledWith(custom);
+
+    expect(window.gsap.parseEase?.("power1.out")).toBe(defaultEase);
+    expect(originalParseEase).toHaveBeenCalledWith("power1.out");
+    expect(window.gsap.parseEase?.("custom(not-a-path)")).toBe(defaultEase);
+    expect(originalParseEase).toHaveBeenCalledWith("custom(not-a-path)");
+
+    const installedParseEase = window.gsap.parseEase;
+    initSandboxRuntimeModular();
+    expect(window.gsap.parseEase).toBe(installedParseEase);
+
+    delete (window as { __hfCustomEaseRegistered?: boolean }).__hfCustomEaseRegistered;
+    window.gsap = {
+      timeline: () => createMockTimeline(1),
+      parseEase: vi.fn(() => defaultEase),
+      registerPlugin: vi.fn(),
+    };
+    initSandboxRuntimeModular();
+    const freshResolution = window.gsap.parseEase?.(custom);
+    expect(freshResolution).toBeTypeOf("function");
+    if (typeof freshResolution === "function") {
+      expect(progressSamples.map(freshResolution)).toEqual(progressSamples.map(first));
+    }
+  });
+
+  it("resolves Studio spring eases as deterministic oscillations that settle exactly", () => {
+    const defaultEase = (progress: number) => progress;
+    const originalParseEase = vi.fn(() => defaultEase);
+    window.gsap = {
+      timeline: () => createMockTimeline(1),
+      parseEase: originalParseEase,
+      registerPlugin: vi.fn(),
+    };
+
+    const root = document.createElement("div");
+    root.setAttribute("data-composition-id", "main");
+    root.setAttribute("data-root", "true");
+    root.setAttribute("data-start", "0");
+    root.setAttribute("data-duration", "1");
+    root.setAttribute("data-width", "1920");
+    root.setAttribute("data-height", "1080");
+    document.body.appendChild(root);
+    window.__timelines = { main: createMockTimeline(1) };
+
+    initSandboxRuntimeModular();
+
+    const first = window.gsap.parseEase?.("spring(0.5)");
+    const second = window.gsap.parseEase?.("spring(0.5)");
+    expect(first).toBeTypeOf("function");
+    expect(second).toBe(first);
+    if (typeof first !== "function" || typeof second !== "function") return;
+
+    const samples = Array.from({ length: 101 }, (_, index) => first(index / 100));
+    expect(first(0)).toBe(0);
+    expect(first(1)).toBe(1);
+    expect(Math.max(...samples)).toBeGreaterThan(1);
+    expect(samples).toEqual(Array.from({ length: 101 }, (_, index) => second(index / 100)));
+    expect(originalParseEase).not.toHaveBeenCalledWith("spring(0.5)");
+
+    expect(window.gsap.parseEase?.("power1.out")).toBe(defaultEase);
+    expect(originalParseEase).toHaveBeenCalledWith("power1.out");
+  });
+
   it("keeps authored composition hosts visible when the live child timeline is shorter", () => {
     const root = document.createElement("div");
     root.setAttribute("data-composition-id", "main");
diff --git a/packages/core/src/runtime/init.ts b/packages/core/src/runtime/init.ts
index c6f6060124..da4e18c7e2 100644
--- a/packages/core/src/runtime/init.ts
+++ b/packages/core/src/runtime/init.ts
@@ -49,6 +49,7 @@ import type {
 import type { PlayerAPI } from "../core.types";
 import { swallow } from "./diagnostics";
 import { shouldAttemptPeriodicTimelineBind } from "./timelineRebindPolicy";
+import { installStudioCustomEase } from "./customEase";
 
 const AUTHORED_DURATION_ATTR = "data-hf-authored-duration";
 const AUTHORED_END_ATTR = "data-hf-authored-end";
@@ -173,7 +174,18 @@ export function initSandboxRuntimeModular(): void {
       // a stray warning is preferable to a broken runtime
     }
   };
+  const ensureStudioCustomEase = (): void => {
+    const g = window.gsap;
+    const w = window as Window & { __hfCustomEaseRegistered?: boolean };
+    if (!g || w.__hfCustomEaseRegistered) return;
+    try {
+      if (installStudioCustomEase(g)) w.__hfCustomEaseRegistered = true;
+    } catch {
+      // falling back to GSAP's default ease is preferable to a broken runtime
+    }
+  };
   ensureAutoMarkerNoop();
+  ensureStudioCustomEase();
   // Normalize html/body so browser defaults (8px margin, white background) never
   // bleed into renders as white bars. Runs in both preview and render contexts,
   // eliminating the preview/render parity gap that existed when only the React
@@ -1204,8 +1216,44 @@ export function initSandboxRuntimeModular(): void {
   // (setTimeout(0)). Scripts using requestAnimationFrame or longer delays may
   // not be discovered.
   let childrenBound = false;
+  // A GSAP keyframes tween (`{ keyframes: {...}, ease }`) builds an INNER timeline
+  // whose own `_ease` GSAP resolves ONCE, at build time, via the internal
+  // `_parseEase(vars.ease)` (gsap-core: `tl._ease = _parseEase(keyframes.ease ||
+  // vars.ease || "none")`). On render it calls that inner `timeline._ease(...)`.
+  // The composition's inline `<script>` runs and builds these tweens BEFORE this
+  // runtime finishes registering the custom eases (hold/spring/wiggle/custom) in
+  // GSAP's internal ease map — so for a custom container ease the inner `_ease`
+  // bakes to `undefined`, and the first render throws "_ease is not a function"
+  // (a masked cross-origin Script error). Registering the eases afterward can't
+  // retro-fix that already-baked value, so re-resolve every keyframes tween's
+  // inner `_ease` here, once the eases are registered.
+  const repairKeyframeInnerEase = (tlLike: unknown): void => {
+    const g = (window as unknown as { gsap?: { parseEase?: (e: unknown) => unknown } }).gsap;
+    const tl = tlLike as { getChildren?: (a: boolean, b: boolean, c: boolean) => unknown[] } | null;
+    if (!tl || typeof tl.getChildren !== "function" || !g || typeof g.parseEase !== "function")
+      return;
+    for (const child of tl.getChildren(true, true, true)) {
+      const k = child as {
+        timeline?: { _ease?: unknown };
+        vars?: { ease?: unknown; keyframes?: unknown };
+      };
+      const inner = k.timeline;
+      if (!inner || !("_ease" in inner) || typeof inner._ease === "function") continue;
+      const kf = k.vars?.keyframes;
+      const kfEase = kf && !Array.isArray(kf) ? (kf as { ease?: unknown }).ease : undefined;
+      const resolved = g.parseEase(kfEase ?? k.vars?.ease ?? "none");
+      if (typeof resolved === "function") inner._ease = resolved;
+    }
+  };
   // fallow-ignore-next-line complexity
   const bindRootTimelineIfAvailable = (): boolean => {
+    // Custom eases (hold/spring/wiggle/custom) must be registered in GSAP's
+    // internal ease map BEFORE this function's prime render (progress/totalTime
+    // below), or a keyframe segment using one resolves to a non-function ease
+    // and GSAP throws "_ease is not a function" at render. The one-shot call in
+    // init runs early, but if GSAP wasn't ready then (load-order race) it's a
+    // no-op with no retry — so re-assert here, at the render site. Idempotent.
+    ensureStudioCustomEase();
     if (!externalCompositionsReady) return false;
     const currentTimeline = state.capturedTimeline;
     const currentDuration = getTimelineDurationSeconds(currentTimeline);
@@ -1226,6 +1274,8 @@ export function initSandboxRuntimeModular(): void {
     if (typeof state.capturedTimeline.timeScale === "function") {
       state.capturedTimeline.timeScale(state.playbackRate);
     }
+    // Repair keyframe inner-timeline eases before any prime render (see helper above).
+    repairKeyframeInnerEase(state.capturedTimeline);
     const boundDuration = getSafeTimelineDurationSeconds(state.capturedTimeline, 0);
     if (boundDuration <= 0) {
       // No resolvable duration (e.g. a set()-only timeline, or one whose
@@ -2316,118 +2366,6 @@ export function initSandboxRuntimeModular(): void {
       document.querySelector("[data-composition-id]")?.getAttribute("data-composition-id") ?? null,
   });
 
-  state.controlBridgeHandler = installRuntimeControlBridge({
-    onPlay: () => {
-      player.play();
-      emitAnalyticsEvent("composition_played", { time: player.getTime() });
-    },
-    onPause: () => {
-      player.pause();
-      emitAnalyticsEvent("composition_paused", { time: player.getTime() });
-    },
-    onStopMedia: () => {
-      webAudio.stopAll();
-      const mediaEls = document.querySelectorAll("video, audio");
-      for (const el of mediaEls) {
-        if (el instanceof HTMLMediaElement && !el.paused) el.pause();
-      }
-    },
-    onSeek: (timeSeconds, _seekMode) => {
-      player.seek(timeSeconds);
-      emitAnalyticsEvent("composition_seeked", { time: timeSeconds });
-    },
-    onSetMuted: (muted) => {
-      state.bridgeMuted = muted;
-      const effective = muted || state.mediaOutputMuted;
-      webAudio.setMuted(effective);
-      const mediaEls = document.querySelectorAll("video, audio");
-      for (const el of mediaEls) {
-        if (!(el instanceof HTMLMediaElement)) continue;
-        el.muted = effective || el.defaultMuted;
-      }
-    },
-    onSetVolume: (volume) => {
-      state.bridgeVolume = volume;
-      webAudio.setVolume(volume);
-      const mediaEls = document.querySelectorAll("video, audio");
-      for (const el of mediaEls) {
-        if (!(el instanceof HTMLMediaElement)) continue;
-        const parsed = parseFloat(el.dataset.volume ?? "");
-        const clipVolume = Number.isFinite(parsed) ? parsed : 1;
-        el.volume = clipVolume * volume;
-      }
-    },
-    onSetMediaOutputMuted: (muted) => {
-      state.mediaOutputMuted = muted;
-      const effective = muted || state.bridgeMuted;
-      webAudio.setMuted(effective);
-      const mediaEls = document.querySelectorAll("video, audio");
-      for (const el of mediaEls) {
-        if (!(el instanceof HTMLMediaElement)) continue;
-        el.muted = effective || el.defaultMuted;
-      }
-    },
-    onSetNativeMediaSyncDisabled: (disabled) => {
-      if (state.nativeMediaSyncDisabled === disabled) return;
-      state.nativeMediaSyncDisabled = disabled;
-      state.mediaForceSyncNextTick = true;
-      if (disabled) {
-        webAudio.stopAll();
-        clock.detachAudioSource();
-      } else {
-        syncMediaForCurrentState();
-      }
-    },
-    onSetWebAudioMediaDisabled: (disabled) => {
-      if (state.webAudioMediaDisabled === disabled) return;
-      state.webAudioMediaDisabled = disabled;
-      state.mediaForceSyncNextTick = true;
-      if (disabled) {
-        webAudio.stopAll();
-        clock.detachAudioSource();
-        syncMediaForCurrentState();
-      } else {
-        syncMediaForCurrentState();
-      }
-    },
-    onSetPlaybackRate: (rate) => {
-      applyPlaybackRate(rate);
-      if (state.transportClock) state.transportClock.setRate(state.playbackRate);
-      applyWebAudioRate();
-    },
-    onSetRootDuration: growRootDurationLive,
-    onSetColorGrading: (target, grading) => {
-      colorGrading.setGrading(target, grading);
-    },
-    onSetColorGradingCompare: (target, compare) => {
-      colorGrading.setCompare(target, compare);
-    },
-    onTick: () => {
-      if (state.tornDown || !clock.isPlaying()) return;
-      const t = clock.now();
-      state.currentTime = t;
-      seekTimelineAndAdapters(t);
-      if (clock.reachedEnd()) {
-        webAudio.stopAll();
-        clock.detachAudioSource();
-        clock.pause();
-        state.isPlaying = false;
-        const dur = clock.getDuration();
-        if (Number.isFinite(dur)) {
-          clock.seek(dur);
-          state.currentTime = dur;
-          seekTimelineAndAdapters(dur);
-        }
-        runAdapters("pause");
-        syncMediaForCurrentState();
-        postState(true);
-      }
-    },
-    onEnablePickMode: () => picker.enablePickMode(),
-    onDisablePickMode: () => picker.disablePickMode(),
-    getCanonicalFps: () => state.canonicalFps,
-  });
-
   state.deterministicAdapters = [
     createWaapiAdapter(),
     createCssAdapter({
@@ -2701,10 +2639,10 @@ export function initSandboxRuntimeModular(): void {
     return false;
   };
 
-  const seekTimelineAndAdapters = (
+  function seekTimelineAndAdapters(
     t: number,
     opts?: { activateChildren?: boolean; suppressEvents?: boolean },
-  ) => {
+  ) {
     const tl = state.capturedTimeline;
     const suppressEvents = opts?.suppressEvents === true;
     if (tl) {
@@ -2772,7 +2710,7 @@ export function initSandboxRuntimeModular(): void {
         swallow("runtime.init.transport.adapter", err);
       }
     }
-  };
+  }
 
   // True while the Studio is mid-drag on an element (the gesture marker is
   // stamped on the gestured element for the duration of the drag). During a
@@ -3008,7 +2946,7 @@ export function initSandboxRuntimeModular(): void {
   // rescaled in place; but a bounded source's window was baked into start()'s
   // duration at its prior rate and can't be rescaled, so when one is active we
   // stopAll()+reschedule at the new rate to keep trimmed clips ending on time.
-  const applyWebAudioRate = () => {
+  function applyWebAudioRate() {
     const changed = webAudio.setRate(state.playbackRate);
     if (
       changed &&
@@ -3021,7 +2959,7 @@ export function initSandboxRuntimeModular(): void {
       webAudio.stopAll();
       scheduleWebAudioForActiveClips();
     }
-  };
+  }
 
   // Sync clock duration from any captured timeline
   if (state.capturedTimeline) {
@@ -3037,6 +2975,123 @@ export function initSandboxRuntimeModular(): void {
   postTimeline();
   postState(true);
 
+  // Wire the control bridge LAST — after every transport helper its handlers
+  // dispatch to (seekTimelineAndAdapters, applyWebAudioRate, ...) is declared.
+  // The runtime's external control surface only goes live once all of its
+  // dependencies exist, so a load-time seek / set-playback-rate can never reach
+  // a not-yet-initialized helper (the 'before initialization' TDZ this fixes).
+  state.controlBridgeHandler = installRuntimeControlBridge({
+    onPlay: () => {
+      player.play();
+      emitAnalyticsEvent("composition_played", { time: player.getTime() });
+    },
+    onPause: () => {
+      player.pause();
+      emitAnalyticsEvent("composition_paused", { time: player.getTime() });
+    },
+    onStopMedia: () => {
+      webAudio.stopAll();
+      const mediaEls = document.querySelectorAll("video, audio");
+      for (const el of mediaEls) {
+        if (el instanceof HTMLMediaElement && !el.paused) el.pause();
+      }
+    },
+    onSeek: (timeSeconds, _seekMode) => {
+      player.seek(timeSeconds);
+      emitAnalyticsEvent("composition_seeked", { time: timeSeconds });
+    },
+    onSetMuted: (muted) => {
+      state.bridgeMuted = muted;
+      const effective = muted || state.mediaOutputMuted;
+      webAudio.setMuted(effective);
+      const mediaEls = document.querySelectorAll("video, audio");
+      for (const el of mediaEls) {
+        if (!(el instanceof HTMLMediaElement)) continue;
+        el.muted = effective || el.defaultMuted;
+      }
+    },
+    onSetVolume: (volume) => {
+      state.bridgeVolume = volume;
+      webAudio.setVolume(volume);
+      const mediaEls = document.querySelectorAll("video, audio");
+      for (const el of mediaEls) {
+        if (!(el instanceof HTMLMediaElement)) continue;
+        const parsed = parseFloat(el.dataset.volume ?? "");
+        const clipVolume = Number.isFinite(parsed) ? parsed : 1;
+        el.volume = clipVolume * volume;
+      }
+    },
+    onSetMediaOutputMuted: (muted) => {
+      state.mediaOutputMuted = muted;
+      const effective = muted || state.bridgeMuted;
+      webAudio.setMuted(effective);
+      const mediaEls = document.querySelectorAll("video, audio");
+      for (const el of mediaEls) {
+        if (!(el instanceof HTMLMediaElement)) continue;
+        el.muted = effective || el.defaultMuted;
+      }
+    },
+    onSetNativeMediaSyncDisabled: (disabled) => {
+      if (state.nativeMediaSyncDisabled === disabled) return;
+      state.nativeMediaSyncDisabled = disabled;
+      state.mediaForceSyncNextTick = true;
+      if (disabled) {
+        webAudio.stopAll();
+        clock.detachAudioSource();
+      } else {
+        syncMediaForCurrentState();
+      }
+    },
+    onSetWebAudioMediaDisabled: (disabled) => {
+      if (state.webAudioMediaDisabled === disabled) return;
+      state.webAudioMediaDisabled = disabled;
+      state.mediaForceSyncNextTick = true;
+      if (disabled) {
+        webAudio.stopAll();
+        clock.detachAudioSource();
+        syncMediaForCurrentState();
+      } else {
+        syncMediaForCurrentState();
+      }
+    },
+    onSetPlaybackRate: (rate) => {
+      applyPlaybackRate(rate);
+      if (state.transportClock) state.transportClock.setRate(state.playbackRate);
+      applyWebAudioRate();
+    },
+    onSetRootDuration: growRootDurationLive,
+    onSetColorGrading: (target, grading) => {
+      colorGrading.setGrading(target, grading);
+    },
+    onSetColorGradingCompare: (target, compare) => {
+      colorGrading.setCompare(target, compare);
+    },
+    onTick: () => {
+      if (state.tornDown || !clock.isPlaying()) return;
+      const t = clock.now();
+      state.currentTime = t;
+      seekTimelineAndAdapters(t);
+      if (clock.reachedEnd()) {
+        webAudio.stopAll();
+        clock.detachAudioSource();
+        clock.pause();
+        state.isPlaying = false;
+        const dur = clock.getDuration();
+        if (Number.isFinite(dur)) {
+          clock.seek(dur);
+          state.currentTime = dur;
+          seekTimelineAndAdapters(dur);
+        }
+        runAdapters("pause");
+        syncMediaForCurrentState();
+        postState(true);
+      }
+    },
+    onEnablePickMode: () => picker.enablePickMode(),
+    onDisablePickMode: () => picker.disablePickMode(),
+    getCanonicalFps: () => state.canonicalFps,
+  });
+
   const teardown = () => {
     if (state.tornDown) return;
     state.tornDown = true;
diff --git a/packages/core/src/runtime/wiggleEase.test.ts b/packages/core/src/runtime/wiggleEase.test.ts
new file mode 100644
index 0000000000..dd71ec8985
--- /dev/null
+++ b/packages/core/src/runtime/wiggleEase.test.ts
@@ -0,0 +1,112 @@
+import { describe, expect, it } from "vitest";
+import { evaluateWiggleEase, parseWiggleEase, resolveWiggleEase } from "./wiggleEase";
+
+function countExtrema(samples: number[]): number {
+  let previousDirection = 0;
+  let extrema = 0;
+  for (let index = 1; index < samples.length; index += 1) {
+    const delta = samples[index]! - samples[index - 1]!;
+    const direction = Math.sign(delta);
+    if (direction !== 0 && previousDirection !== 0 && direction !== previousDirection) extrema += 1;
+    if (direction !== 0) previousDirection = direction;
+  }
+  return extrema;
+}
+
+function maximumDeviation(
+  type: "easeOut" | "easeInOut" | "uniform",
+  from: number,
+  to: number,
+  amplitude?: number,
+) {
+  return Math.max(
+    ...Array.from({ length: 101 }, (_, index) => {
+      const progress = from + ((to - from) * index) / 100;
+      return Math.abs(evaluateWiggleEase(progress, 6, type, amplitude) - progress);
+    }),
+  );
+}
+
+describe("wiggle ease", () => {
+  it("parses positive integer wiggle counts and supported types", () => {
+    expect(parseWiggleEase(" wiggle(6, easeInOut) ")).toEqual({
+      wiggles: 6,
+      type: "easeInOut",
+    });
+    expect(parseWiggleEase("wiggle(3,easeInOut,0.12)")).toEqual({
+      wiggles: 3,
+      type: "easeInOut",
+      amplitude: 0.12,
+    });
+    expect(parseWiggleEase("wiggle(3,easeInOut,0)")?.amplitude).toBe(0);
+    expect(parseWiggleEase("wiggle(3,easeInOut,1)")?.amplitude).toBe(1);
+    expect(parseWiggleEase("wiggle(0,easeOut)")).toBeNull();
+    expect(parseWiggleEase("wiggle(2.5,uniform)")).toBeNull();
+    expect(parseWiggleEase("wiggle(3,unknown)")).toBeNull();
+    expect(parseWiggleEase("wiggle(3,easeInOut,-0.1)")).toBeNull();
+    expect(parseWiggleEase("wiggle(3,easeInOut,1.1)")).toBeNull();
+  });
+
+  it("is deterministic, endpoint-normalized, and oscillatory", () => {
+    const progress = Array.from({ length: 401 }, (_, index) => index / 400);
+    const first = progress.map((value) => evaluateWiggleEase(value, 6, "easeInOut"));
+    const second = progress.map((value) => evaluateWiggleEase(value, 6, "easeInOut"));
+
+    expect(first).toEqual(second);
+    expect(first[0]).toBe(0);
+    expect(first.at(-1)).toBe(1);
+    expect(countExtrema(first)).toBeGreaterThanOrEqual(8);
+
+    const explicitFirst = progress.map((value) => evaluateWiggleEase(value, 6, "easeInOut", 0.2));
+    const explicitSecond = progress.map((value) => evaluateWiggleEase(value, 6, "easeInOut", 0.2));
+    expect(explicitFirst).toEqual(explicitSecond);
+    expect(explicitFirst[0]).toBe(0);
+    expect(explicitFirst.at(-1)).toBe(1);
+  });
+
+  it("uses an explicit amplitude as the peak envelope amplitude", () => {
+    expect(maximumDeviation("easeInOut", 0, 1, 0.2)).toBeGreaterThan(
+      maximumDeviation("easeInOut", 0, 1, 0.1),
+    );
+  });
+
+  it("preserves the per-type defaults when amplitude is omitted", () => {
+    const progress = [0.125, 0.25, 0.5, 0.75, 0.875];
+    expect(progress.map((value) => evaluateWiggleEase(value, 6, "easeInOut"))).toEqual(
+      progress.map((value) => evaluateWiggleEase(value, 6, "easeInOut", 0.08)),
+    );
+    expect(progress.map((value) => evaluateWiggleEase(value, 6, "easeOut"))).toEqual(
+      progress.map((value) => evaluateWiggleEase(value, 6, "easeOut", 0.16)),
+    );
+    expect(progress.map((value) => evaluateWiggleEase(value, 6, "uniform"))).toEqual(
+      progress.map((value) => evaluateWiggleEase(value, 6, "uniform", 0.14)),
+    );
+  });
+
+  it("applies the CustomWiggle-style amplitude envelopes", () => {
+    expect(maximumDeviation("easeOut", 0, 0.25)).toBeGreaterThan(
+      maximumDeviation("easeOut", 0.75, 1),
+    );
+    expect(maximumDeviation("easeInOut", 0.375, 0.625)).toBeGreaterThan(
+      maximumDeviation("easeInOut", 0, 0.125),
+    );
+    expect(maximumDeviation("uniform", 0, 0.25)).toBeCloseTo(
+      maximumDeviation("uniform", 0.75, 1),
+      6,
+    );
+    expect(evaluateWiggleEase(0.025, 5, "anticipate")).toBeLessThan(0);
+  });
+
+  it("caches resolved functions by normalized parameters", () => {
+    const first = resolveWiggleEase("wiggle(6,easeInOut,0.2)");
+    const second = resolveWiggleEase(" wiggle(6, easeInOut, 0.20) ");
+    const differentAmplitude = resolveWiggleEase("wiggle(6,easeInOut,0.1)");
+    const legacyFirst = resolveWiggleEase("wiggle(6,easeInOut)");
+    const legacySecond = resolveWiggleEase(" wiggle(6, easeInOut) ");
+
+    expect(first).not.toBeNull();
+    expect(first).toBe(second);
+    expect(first).not.toBe(differentAmplitude);
+    expect(legacyFirst).toBe(legacySecond);
+  });
+});
diff --git a/packages/core/src/runtime/wiggleEase.ts b/packages/core/src/runtime/wiggleEase.ts
new file mode 100644
index 0000000000..8d453718f5
--- /dev/null
+++ b/packages/core/src/runtime/wiggleEase.ts
@@ -0,0 +1,63 @@
+export type WiggleType = "easeOut" | "easeInOut" | "anticipate" | "uniform";
+
+export type WiggleEaseConfig = {
+  wiggles: number;
+  type: WiggleType;
+  amplitude?: number;
+};
+
+type WiggleEase = (progress: number) => number;
+
+const WIGGLE_TOKEN =
+  /^\s*wiggle\(\s*(\d+)\s*,\s*(easeOut|easeInOut|anticipate|uniform)\s*(?:,\s*([+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][+-]?\d+)?)\s*)?\)\s*$/;
+const WIGGLE_CACHE = new Map<string, WiggleEase>();
+const TAU = Math.PI * 2;
+
+export function parseWiggleEase(ease: string): WiggleEaseConfig | null {
+  const match = WIGGLE_TOKEN.exec(ease);
+  if (!match) return null;
+  const wiggles = Number(match[1]);
+  if (!Number.isSafeInteger(wiggles) || wiggles < 1) return null;
+  const type = match[2];
+  if (type !== "easeOut" && type !== "easeInOut" && type !== "anticipate" && type !== "uniform") {
+    return null;
+  }
+  if (match[3] === undefined) return { wiggles, type };
+  const amplitude = Number(match[3]);
+  if (!Number.isFinite(amplitude) || amplitude < 0 || amplitude > 1) return null;
+  return { wiggles, type, amplitude };
+}
+
+export function evaluateWiggleEase(
+  progress: number,
+  wiggles: number,
+  type: WiggleType,
+  amplitude?: number,
+): number {
+  if (progress <= 0) return 0;
+  if (progress >= 1) return 1;
+
+  const peakAmplitude =
+    amplitude ??
+    (type === "easeInOut" ? 0.08 : type === "uniform" ? 0.14 : type === "anticipate" ? 0.12 : 0.16);
+  const envelope =
+    type === "easeInOut"
+      ? peakAmplitude * Math.sin(Math.PI * progress)
+      : type === "uniform"
+        ? peakAmplitude
+        : peakAmplitude * (1 - progress);
+  const direction = type === "anticipate" ? -1 : 1;
+  return progress + direction * envelope * Math.sin(TAU * wiggles * progress);
+}
+
+export function resolveWiggleEase(ease: string): WiggleEase | null {
+  const config = parseWiggleEase(ease);
+  if (!config) return null;
+  const key = `${config.wiggles}:${config.type}:${config.amplitude ?? "default"}`;
+  const cached = WIGGLE_CACHE.get(key);
+  if (cached) return cached;
+  const wiggleEase: WiggleEase = (progress) =>
+    evaluateWiggleEase(progress, config.wiggles, config.type, config.amplitude);
+  WIGGLE_CACHE.set(key, wiggleEase);
+  return wiggleEase;
+}
diff --git a/packages/core/src/runtime/window.d.ts b/packages/core/src/runtime/window.d.ts
index 5779df0c1d..d616c7ee79 100644
--- a/packages/core/src/runtime/window.d.ts
+++ b/packages/core/src/runtime/window.d.ts
@@ -75,6 +75,11 @@ declare global {
     __HF_PICKER_API?: HyperframePickerApi;
     gsap?: {
       timeline: (params?: { paused?: boolean }) => RuntimeTimelineLike;
+      parseEase?: (
+        ease: string | ((progress: number) => number),
+        ...args: unknown[]
+      ) => ((progress: number) => number) | null;
+      registerPlugin?: (plugin: unknown) => void;
       ticker?: {
         tick: () => void;
       };
diff --git a/packages/core/tsconfig.json b/packages/core/tsconfig.json
index 7cb20a06c7..d37173bc73 100644
--- a/packages/core/tsconfig.json
+++ b/packages/core/tsconfig.json
@@ -18,7 +18,8 @@
     "src/runtime/mediaVolumeEnvelope.ts",
     "src/runtime/positionEdits.ts",
     "src/runtime/protocol.ts",
-    "src/runtime/stackingContext.ts"
+    "src/runtime/stackingContext.ts",
+    "src/runtime/wiggleEase.ts"
   ],
   "include": ["src/**/*"],
   "exclude": [
diff --git a/packages/parsers/src/gsapConstants.ts b/packages/parsers/src/gsapConstants.ts
index 8bea681c7b..563ca09c7f 100644
--- a/packages/parsers/src/gsapConstants.ts
+++ b/packages/parsers/src/gsapConstants.ts
@@ -112,13 +112,17 @@ export const SUPPORTED_EASES = [
   "bounce.in",
   "bounce.out",
   "bounce.inOut",
+  "circ.inOut",
   "expo.in",
   "expo.out",
   "expo.inOut",
+  "elastic.out(1,0.3)",
+  "elastic.inOut(1,0.3)",
   "spring-gentle",
   "spring-bouncy",
   "spring-stiff",
   "spring-wobbly",
   "spring-heavy",
+  "hold",
   "steps(1)",
 ];
diff --git a/packages/parsers/src/gsapParser.test.ts b/packages/parsers/src/gsapParser.test.ts
index 11b592f9ae..690f473064 100644
--- a/packages/parsers/src/gsapParser.test.ts
+++ b/packages/parsers/src/gsapParser.test.ts
@@ -656,6 +656,27 @@ describe("stagger/yoyo/repeat round-trip", () => {
   });
 });
 
+describe("object keyframe per-step duration is not an animatable property", () => {
+  it("excludes `duration` from %-keyed keyframe properties (segment timing must not become a lane)", () => {
+    // A %-keyed object keyframe carrying a stray per-step `duration` — the shape
+    // a buggy array->object conversion produces. `duration` is GSAP segment
+    // timing, not a property; it must never surface as a keyframe lane or get
+    // round-tripped as an animatable value (which corrupts the tween on edit).
+    const script = `
+      const tl = gsap.timeline({ paused: true });
+      tl.to("#card", { keyframes: { "0%": { x: 0, duration: 0 }, "50%": { x: 100, duration: 6, ease: "power2.out" }, "100%": { x: 200, duration: 6 } } }, 0);
+    `;
+    const parsed = parseGsapScript(script);
+    const kfs = parsed.animations[0].keyframes?.keyframes ?? [];
+    expect(kfs.length).toBe(3);
+    for (const kf of kfs) {
+      expect(kf.properties).not.toHaveProperty("duration"); // the fix
+      expect(kf.properties).toHaveProperty("x"); // real animatable prop preserved
+    }
+    expect(kfs[1]?.ease).toBe("power2.out"); // per-keyframe ease still parsed
+  });
+});
+
 describe("unresolvable value round-trip", () => {
   it("preserves unresolvable property values through serialize", () => {
     const script = `
@@ -1919,6 +1940,15 @@ describe("keyframe mutations", () => {
     expect([kf[2]!.properties.x, kf[2]!.properties.y]).toEqual([1040, 0]);
   });
 
+  it("updateKeyframeInScript — array-form ease-only update preserves existing properties", () => {
+    const id = getAnimId(ARRAY_KF_SCRIPT);
+    const updated = updateKeyframeInScript(ARRAY_KF_SCRIPT, id, 33.3, {}, "power2.inOut");
+    const kf = parseGsapScript(updated).animations[0].keyframes!.keyframes;
+    expect(kf[1]!.properties.x).toBe(520);
+    expect(kf[1]!.properties.y).toBe(120);
+    expect(kf[1]!.ease).toBe("power2.inOut");
+  });
+
   it("addKeyframeToScript — array-form: normalizes to object form + inserts 50%", () => {
     const id = getAnimId(ARRAY_KF_SCRIPT);
     const updated = addKeyframeToScript(ARRAY_KF_SCRIPT, id, 50, { x: 780, y: 60 });
diff --git a/packages/parsers/src/gsapParser.ts b/packages/parsers/src/gsapParser.ts
index 315c238c8f..b785fb69d4 100644
--- a/packages/parsers/src/gsapParser.ts
+++ b/packages/parsers/src/gsapParser.ts
@@ -686,6 +686,12 @@ function parsePercentageKeyframes(node: AstNode, scope: ScopeBindings): GsapKeyf
       for (const [k, v] of Object.entries(record)) {
         if (k === "ease" && typeof v === "string") {
           kfEase = v;
+        } else if (k === "duration") {
+          // `duration` is array-keyframe segment timing, not an animatable
+          // property. In a %-keyed object keyframe the % key owns timing, so a
+          // per-step `duration` is neither timing nor a property — skip it, or
+          // it surfaces as a bogus keyframe lane and corrupts the round-trip.
+          continue;
         } else if (typeof v === "number" || typeof v === "string") {
           properties[k] = v;
         }
@@ -2014,6 +2020,18 @@ function buildKeyframeValueNode(
   return parseExpr(`{ ${entries.join(", ")} }`);
 }
 
+function setObjectExpressionEase(node: AstNode, ease: string): boolean {
+  if (node?.type !== "ObjectExpression") return false;
+  const props = (node.properties ?? []) as AstNode[];
+  const easeIdx = props.findIndex(
+    (property: AstNode) => isObjectProperty(property) && propKeyName(property) === "ease",
+  );
+  const easeNode = parseExpr(`({ ease: ${JSON.stringify(ease)} })`).properties[0];
+  if (easeIdx >= 0) props[easeIdx] = easeNode;
+  else props.push(easeNode);
+  return true;
+}
+
 /** Parse + locate a target animation, returning null on failure. */
 function locateAnimation(
   script: string,
@@ -2467,7 +2485,12 @@ export function updateKeyframeInScript(
       }
     }
     if (matchIdx === -1) return script;
-    const realIdx = arrVal.elements.indexOf(elements[matchIdx]);
+    const matchEl = elements[matchIdx];
+    if (!matchEl) return script;
+    const realIdx = arrVal.elements.indexOf(matchEl);
+    if (Object.keys(properties).length === 0 && ease && setObjectExpressionEase(matchEl, ease)) {
+      return recast.print(arrLoc.parsed.ast).code;
+    }
     arrVal.elements[realIdx] = buildKeyframeValueNode(properties, ease);
     return recast.print(arrLoc.parsed.ast).code;
   }
@@ -2481,18 +2504,7 @@ export function updateKeyframeInScript(
 
   if (Object.keys(properties).length === 0 && ease) {
     // Ease-only update: preserve existing properties, just add/replace ease
-    const existing = match.prop.value;
-    if (existing?.type === "ObjectExpression") {
-      const props = (existing.properties ?? []) as AstNode[];
-      const easeIdx = props.findIndex(
-        (p: AstNode) => isObjectProperty(p) && propKeyName(p) === "ease",
-      );
-      const easeNode = parseExpr(`({ ease: ${JSON.stringify(ease)} })`).properties[0];
-      if (easeIdx >= 0) {
-        props[easeIdx] = easeNode;
-      } else {
-        props.push(easeNode);
-      }
+    if (setObjectExpressionEase(match.prop.value, ease)) {
       return recast.print(loc.parsed.ast).code;
     }
     // Non-object keyframe value (primitive shorthand, e.g. "50%": "0.5"): there
diff --git a/packages/parsers/src/gsapParserAcorn.full.test.ts b/packages/parsers/src/gsapParserAcorn.full.test.ts
index eca4213a05..9eeab50737 100644
--- a/packages/parsers/src/gsapParserAcorn.full.test.ts
+++ b/packages/parsers/src/gsapParserAcorn.full.test.ts
@@ -84,6 +84,24 @@ const REAL_WORLD_SCRIPT = `(function () {
 // ── parseGsapScript ───────────────────────────────────────────────────────────
 
 describe("parseGsapScript", () => {
+  it("excludes per-step `duration` from %-keyed keyframe properties (segment timing is not a lane)", () => {
+    // A %-keyed object keyframe carrying a stray per-step `duration` — the shape
+    // a buggy array->object conversion produces. `duration` is GSAP segment
+    // timing, not an animatable property; it must not surface as a keyframe lane
+    // or round-trip as a property (which corrupts the tween on the next edit).
+    const script = `
+      const tl = gsap.timeline({ paused: true });
+      tl.to("#card", { keyframes: { "0%": { x: 0, duration: 0 }, "50%": { x: 100, duration: 6, ease: "power2.out" }, "100%": { x: 200, duration: 6 } } }, 0);
+    `;
+    const anim = parseGsapScript(script).animations[0]!;
+    const kfs = expectKeyframesFormat(anim, "percentage", 3);
+    for (const kf of kfs) {
+      expect(kf.properties).not.toHaveProperty("duration"); // the fix
+      expect(kf.properties).toHaveProperty("x"); // real animatable prop preserved
+    }
+    expect(kfs[1]!.ease).toBe("power2.out"); // per-keyframe ease still parsed
+  });
+
   it("parses a basic timeline with .to()", () => {
     const script = `
       const tl = gsap.timeline({ paused: true });
diff --git a/packages/parsers/src/gsapParserAcorn.ts b/packages/parsers/src/gsapParserAcorn.ts
index 5e9b472bc3..aedf4aa195 100644
--- a/packages/parsers/src/gsapParserAcorn.ts
+++ b/packages/parsers/src/gsapParserAcorn.ts
@@ -975,6 +975,14 @@ function parsePercentageKeyframes(
       for (const [k, v] of Object.entries(record)) {
         if (k === "ease" && typeof v === "string") {
           kfEase = v;
+        } else if (k === "duration") {
+          // `duration` is array-keyframe SEGMENT TIMING, not an animatable
+          // property. In a %-keyed object keyframe the % key owns timing, so a
+          // per-step `duration` is neither timing nor a property here. Skip it
+          // (parseObjectArrayKeyframes already does) — otherwise it surfaces as
+          // a bogus "duration" keyframe lane and gets round-tripped as a
+          // property, corrupting the tween on the next manual edit.
+          continue;
         } else if (typeof v === "number" || typeof v === "string") {
           properties[k] = v;
         }
diff --git a/packages/parsers/src/gsapWriter.acorn.test.ts b/packages/parsers/src/gsapWriter.acorn.test.ts
index e7ddd41dc8..96d7147750 100644
--- a/packages/parsers/src/gsapWriter.acorn.test.ts
+++ b/packages/parsers/src/gsapWriter.acorn.test.ts
@@ -15,7 +15,9 @@ import {
   updateAnimationInScript,
   updateKeyframeInScript,
 } from "./gsapWriterAcorn.js";
+import { parseGsapScriptAcorn } from "./gsapParserAcorn.js";
 import { parseGsapScript } from "./gsapParser.js";
+import { validateCompositionGsap } from "./gsapSerialize.js";
 
 // ---------------------------------------------------------------------------
 // Fixture scripts
@@ -376,6 +378,25 @@ describe("T6c — keyframe write ops", () => {
     expect(result.indexOf('"25%"')).toBeLessThan(result.indexOf('"50%"'));
   });
 
+  it("addKeyframeToScript converts a flat tween and round-trips three sane points", () => {
+    const script = `\
+var tl = gsap.timeline({ paused: true });
+tl.to("#box", { x: 420, duration: 1 }, 0);
+window.__timelines["t"] = tl;`;
+    const animationId = parseGsapScriptAcorn(script).animations[0]!.id;
+
+    const result = addKeyframeToScript(script, animationId, 50, { x: 210 });
+    const reparsed = parseGsapScriptAcorn(result);
+
+    expect(reparsed.animations).toHaveLength(1);
+    expect(reparsed.animations[0]?.keyframes?.keyframes).toEqual([
+      { percentage: 0, properties: { x: 0 } },
+      { percentage: 50, properties: { x: 210 } },
+      { percentage: 100, properties: { x: 420 } },
+    ]);
+    expect(validateCompositionGsap(result)).toEqual({ valid: true, errors: [], warnings: [] });
+  });
+
   it("addKeyframeToScript replaces value when percentage already exists", () => {
     const result = addKeyframeToScript(SCRIPT_D, "#box-to-200-visual", 50, { opacity: 0.99 });
     expect(result).toContain("opacity: 0.99");
diff --git a/packages/studio/src/App.tsx b/packages/studio/src/App.tsx
index 6b2df53800..3cd9144687 100644
--- a/packages/studio/src/App.tsx
+++ b/packages/studio/src/App.tsx
@@ -400,12 +400,14 @@ export function StudioApp() {
     designPanelActive,
     inspectorPanelActive,
     inspectorButtonActive,
+    shouldShowMotionPath,
     shouldShowSelectedDomBounds,
   } = useInspectorState(
     panelLayout.rightPanelTab,
     panelLayout.rightInspectorPanes,
     panelLayout.rightCollapsed,
     isPlaying,
+    domEditSession.domEditSelection,
     gestureState === "recording",
   );
   useStudioUrlState({
@@ -553,6 +555,7 @@ export function StudioApp() {
                     handleRazorSplitAll={timelineEditing.handleRazorSplitAll}
                     setCompIdToSrc={setCompIdToSrc}
                     setCompositionLoading={setCompositionLoading}
+                    shouldShowMotionPath={shouldShowMotionPath}
                     shouldShowSelectedDomBounds={shouldShowSelectedDomBounds}
                     isGestureRecording={gestureState === "recording"}
                     recordingState={gestureState}
diff --git a/packages/studio/src/components/EditorShell.tsx b/packages/studio/src/components/EditorShell.tsx
index a5d42e732c..e44524f0c0 100644
--- a/packages/studio/src/components/EditorShell.tsx
+++ b/packages/studio/src/components/EditorShell.tsx
@@ -52,6 +52,7 @@ export interface EditorShellProps extends TimelineEditCallbackDeps {
   ) => Promise<void> | void;
   setCompIdToSrc: (map: Map<string, string>) => void;
   setCompositionLoading: (loading: boolean) => void;
+  shouldShowMotionPath: boolean;
   shouldShowSelectedDomBounds: boolean;
   blockPreview?: BlockPreviewInfo | null;
   isGestureRecording?: boolean;
@@ -85,6 +86,7 @@ export function EditorShell({
   handleRazorSplitAll,
   setCompIdToSrc,
   setCompositionLoading,
+  shouldShowMotionPath,
   shouldShowSelectedDomBounds,
   isGestureRecording,
   recordingState,
@@ -143,6 +145,7 @@ export function EditorShell({
             onDeleteElement={handleTimelineElementDelete}
             previewOverlay={
               <PreviewOverlays
+                shouldShowMotionPath={shouldShowMotionPath}
                 shouldShowSelectedDomBounds={shouldShowSelectedDomBounds}
                 blockPreview={blockPreview}
                 isGestureRecording={isGestureRecording}
diff --git a/packages/studio/src/components/StudioRightPanel.tsx b/packages/studio/src/components/StudioRightPanel.tsx
index 3d68a15f45..d725ac50cd 100644
--- a/packages/studio/src/components/StudioRightPanel.tsx
+++ b/packages/studio/src/components/StudioRightPanel.tsx
@@ -152,6 +152,7 @@ export function StudioRightPanel({
     handleUpdateArcSegment,
     handleUnroll,
     handleUpdateKeyframeEase,
+    handleUpdateSegmentEase,
     handleSetAllKeyframeEases,
     handleGsapAddKeyframe,
     handleGsapRemoveKeyframe,
@@ -408,6 +409,7 @@ export function StudioRightPanel({
         onUpdateArcSegment={handleUpdateArcSegment}
         onUnroll={handleUnroll}
         onUpdateKeyframeEase={handleUpdateKeyframeEase}
+        onUpdateSegmentEase={handleUpdateSegmentEase}
         onSetAllKeyframeEases={handleSetAllKeyframeEases}
         recordingState={recordingState}
         recordingDuration={recordingDuration}
diff --git a/packages/studio/src/components/TimelineToolbar.tsx b/packages/studio/src/components/TimelineToolbar.tsx
index 1e314ed4ef..6a4e5d2ee3 100644
--- a/packages/studio/src/components/TimelineToolbar.tsx
+++ b/packages/studio/src/components/TimelineToolbar.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef } from "react";
-import { Magnet, MagnifyingGlassMinus, MagnifyingGlassPlus } from "@phosphor-icons/react";
+import { Image, Magnet, MagnifyingGlassMinus, MagnifyingGlassPlus } from "@phosphor-icons/react";
 import {
   useEnableKeyframes,
   isPlayheadWithinTween,
@@ -80,6 +80,8 @@ export function TimelineToolbar({ domEditSession, onSplitElement }: TimelineTool
   const setTimelineSnapEnabled = usePlayerStore((s) => s.setTimelineSnapEnabled);
   const autoKeyframeEnabled = usePlayerStore((s) => s.autoKeyframeEnabled);
   const setAutoKeyframeEnabled = usePlayerStore((s) => s.setAutoKeyframeEnabled);
+  const thumbnailsEnabled = usePlayerStore((s) => s.thumbnailsEnabled);
+  const setThumbnailsEnabled = usePlayerStore((s) => s.setThumbnailsEnabled);
   // Subscribe so the add-beat button reacts to playhead movement and analysis load.
   const currentTime = usePlayerStore((s) => s.currentTime);
   const beatAnalysisReady = usePlayerStore((s) => s.beatAnalysis !== null);
@@ -357,6 +359,21 @@ export function TimelineToolbar({ domEditSession, onSplitElement }: TimelineTool
           })()}
         </div>
         <div className="flex items-center gap-0.5">
+          <Tooltip label={thumbnailsEnabled ? "Hide clip thumbnails" : "Show clip thumbnails"}>
+            <button
+              type="button"
+              aria-label={thumbnailsEnabled ? "Hide clip thumbnails" : "Show clip thumbnails"}
+              aria-pressed={thumbnailsEnabled}
+              onClick={() => setThumbnailsEnabled(!thumbnailsEnabled)}
+              className={`h-7 px-2 rounded-md text-[11px] font-medium transition-colors ${
+                thumbnailsEnabled
+                  ? "bg-studio-accent/10 text-studio-accent"
+                  : "text-neutral-400 hover:bg-white/[0.06] hover:text-neutral-200"
+              }`}
+            >
+              <Image size={16} aria-hidden="true" />
+            </button>
+          </Tooltip>
           <Tooltip label="Fit timeline to width">
             <button
               type="button"
diff --git a/packages/studio/src/components/editor/AnimationCard.test.tsx b/packages/studio/src/components/editor/AnimationCard.test.tsx
index 63562fe734..31f1ad6035 100644
--- a/packages/studio/src/components/editor/AnimationCard.test.tsx
+++ b/packages/studio/src/components/editor/AnimationCard.test.tsx
@@ -2,14 +2,197 @@
 
 import React, { act } from "react";
 import { createRoot } from "react-dom/client";
+import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { AnimationCard } from "./AnimationCard";
-import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
+import { EASE_PRESETS } from "./easePresetLibrary";
+
+const trackStudioSegmentEaseEdit = vi.hoisted(() => vi.fn());
+vi.mock("../../telemetry/events", () => ({ trackStudioSegmentEaseEdit }));
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
+const ANIMATION: GsapAnimation = {
+  id: "position-tween",
+  targetSelector: "#clip-1",
+  method: "to",
+  position: 0,
+  duration: 2,
+  ease: "power1.out",
+  properties: { x: 200 },
+  keyframes: {
+    format: "percentage",
+    keyframes: [
+      { percentage: 0, properties: { x: 0 } },
+      { percentage: 50, properties: { x: 100 } },
+      { percentage: 100, properties: { x: 200 } },
+    ],
+  },
+};
+
+const FLAT_ANIMATION: GsapAnimation = {
+  ...ANIMATION,
+  id: "flat-position-tween",
+  keyframes: undefined,
+};
+
 afterEach(() => {
   document.body.innerHTML = "";
+  trackStudioSegmentEaseEdit.mockClear();
+});
+
+function renderCard(
+  focusedSegment: { tweenPercentage: number; collidingAnimationIds?: string[] } | null,
+  onEaseCommit = vi.fn(),
+  defaultExpanded = false,
+  animation = ANIMATION,
+  onUpdateMeta = vi.fn(),
+  onUpdateSegmentEase = vi.fn(),
+) {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  const render = (nextFocusedSegment: { tweenPercentage: number } | null) => {
+    act(() => {
+      root.render(
+        <AnimationCard
+          animation={animation}
+          defaultExpanded={defaultExpanded}
+          focusedSegment={nextFocusedSegment}
+          onFocusSegmentConsumed={vi.fn()}
+          onUpdateProperty={vi.fn()}
+          onUpdateMeta={onUpdateMeta}
+          onDeleteAnimation={vi.fn()}
+          onAddProperty={vi.fn()}
+          onRemoveProperty={vi.fn()}
+          onUpdateKeyframeEase={onEaseCommit}
+          onUpdateSegmentEase={onUpdateSegmentEase}
+        />,
+      );
+    });
+  };
+  render(focusedSegment);
+  return { host, root, render };
+}
+
+function findButton(host: HTMLElement, text: string): HTMLButtonElement | undefined {
+  return Array.from(host.querySelectorAll("button")).find((button) =>
+    button.textContent?.includes(text),
+  );
+}
+
+function selectPreset(host: HTMLElement, presetId: string): string {
+  const presetConfig = EASE_PRESETS.find((candidate) => candidate.id === presetId);
+  if (!presetConfig) throw new Error(`Missing ease preset: ${presetId}`);
+  const dropdown = host.querySelector<HTMLButtonElement>("[data-ease-type-dropdown]");
+  expect(dropdown).not.toBeNull();
+  act(() => dropdown?.click());
+
+  const preset = host.querySelector<HTMLButtonElement>(`[data-ease-preset-id="${presetId}"]`);
+  expect(preset).not.toBeNull();
+  act(() => preset?.click());
+  return presetConfig.ease;
+}
+
+function restoreScrollIntoView(descriptor: PropertyDescriptor | undefined): void {
+  if (descriptor) Object.defineProperty(HTMLElement.prototype, "scrollIntoView", descriptor);
+  else Reflect.deleteProperty(HTMLElement.prototype, "scrollIntoView");
+}
+
+describe("AnimationCard", () => {
+  it("scrolls a focused segment into view but not a manually toggled segment", () => {
+    const originalScrollIntoView = Object.getOwnPropertyDescriptor(
+      HTMLElement.prototype,
+      "scrollIntoView",
+    );
+    const scrollIntoView = vi.fn();
+    Object.defineProperty(HTMLElement.prototype, "scrollIntoView", {
+      configurable: true,
+      value: scrollIntoView,
+    });
+
+    const view = renderCard({ tweenPercentage: 50 });
+    try {
+      expect(scrollIntoView).toHaveBeenCalledOnce();
+      expect(scrollIntoView).toHaveBeenCalledWith({ block: "nearest", behavior: "smooth" });
+
+      view.render(null);
+      const manualToggle = findButton(view.host, "50% → 100%");
+      expect(manualToggle).toBeDefined();
+      act(() => manualToggle?.click());
+      expect(scrollIntoView).toHaveBeenCalledOnce();
+    } finally {
+      act(() => view.root.unmount());
+      restoreScrollIntoView(originalScrollIntoView);
+    }
+  });
+
+  it("tracks a committed segment ease alongside the existing update", () => {
+    const onEaseCommit = vi.fn();
+    const view = renderCard(null, onEaseCommit, true);
+    const segment = findButton(view.host, "0% → 50%");
+    expect(segment).toBeDefined();
+    act(() => segment?.click());
+    const ease = selectPreset(view.host, "quad-out");
+
+    expect(onEaseCommit).toHaveBeenCalledWith(ANIMATION.id, 50, ease);
+    expect(trackStudioSegmentEaseEdit).toHaveBeenCalledWith({ action: "commit", ease });
+    act(() => view.root.unmount());
+  });
+
+  it("commits a focused multi-id segment ease through the bulk callback", () => {
+    const onUpdateKeyframeEase = vi.fn();
+    const onUpdateSegmentEase = vi.fn();
+    const collidingAnimationIds = [ANIMATION.id, "scale-tween", "opacity-tween"];
+    const view = renderCard(
+      { tweenPercentage: 50, collidingAnimationIds },
+      onUpdateKeyframeEase,
+      false,
+      ANIMATION,
+      vi.fn(),
+      onUpdateSegmentEase,
+    );
+    const ease = selectPreset(view.host, "quad-out");
+
+    expect(onUpdateSegmentEase).toHaveBeenCalledExactlyOnceWith(collidingAnimationIds, 50, ease);
+    expect(onUpdateKeyframeEase).not.toHaveBeenCalled();
+    act(() => view.root.unmount());
+  });
+
+  it("keeps a focused single-id segment ease on the single callback", () => {
+    const onUpdateKeyframeEase = vi.fn();
+    const onUpdateSegmentEase = vi.fn();
+    const view = renderCard(
+      { tweenPercentage: 50, collidingAnimationIds: [ANIMATION.id] },
+      onUpdateKeyframeEase,
+      false,
+      ANIMATION,
+      vi.fn(),
+      onUpdateSegmentEase,
+    );
+    const ease = selectPreset(view.host, "quad-out");
+
+    expect(onUpdateKeyframeEase).toHaveBeenCalledExactlyOnceWith(ANIMATION.id, 50, ease);
+    expect(onUpdateSegmentEase).not.toHaveBeenCalled();
+    act(() => view.root.unmount());
+  });
+
+  it("commits a focused flat tween segment ease through tween metadata", () => {
+    const onUpdateMeta = vi.fn();
+    const onUpdateKeyframeEase = vi.fn();
+    const view = renderCard(
+      { tweenPercentage: 100 },
+      onUpdateKeyframeEase,
+      false,
+      FLAT_ANIMATION,
+      onUpdateMeta,
+    );
+    const ease = selectPreset(view.host, "quad-out");
+
+    expect(onUpdateMeta).toHaveBeenCalledExactlyOnceWith(FLAT_ANIMATION.id, { ease });
+    expect(onUpdateKeyframeEase).not.toHaveBeenCalled();
+    act(() => view.root.unmount());
+  });
 });
 
 function baseAnimation(overrides: Partial<GsapAnimation> = {}): GsapAnimation {
diff --git a/packages/studio/src/components/editor/AnimationCard.tsx b/packages/studio/src/components/editor/AnimationCard.tsx
index 97f8efa404..5529aa65ed 100644
--- a/packages/studio/src/components/editor/AnimationCard.tsx
+++ b/packages/studio/src/components/editor/AnimationCard.tsx
@@ -1,6 +1,7 @@
-import { memo, useCallback, useMemo, useState } from "react";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import { SUPPORTED_EASES, SUPPORTED_PROPS } from "@hyperframes/core/gsap-constants";
+import { trackStudioSegmentEaseEdit } from "../../telemetry/events";
 import { RESPONSIVE_GRID } from "./propertyPanelHelpers";
 import { MetricField, SelectField } from "./propertyPanelPrimitives";
 import { controlPointsForGsapEase } from "./studioMotion";
@@ -22,6 +23,8 @@ interface AnimationCardProps extends GsapAnimationEditCallbacks {
   animation: GsapAnimation;
   defaultExpanded: boolean;
   flat?: boolean;
+  focusedSegment?: { tweenPercentage: number; collidingAnimationIds?: string[] } | null;
+  onFocusSegmentConsumed?: () => void;
 }
 
 // fallow-ignore-next-line complexity
@@ -29,6 +32,8 @@ export const AnimationCard = memo(function AnimationCard({
   animation,
   defaultExpanded,
   flat,
+  focusedSegment,
+  onFocusSegmentConsumed,
   onUpdateProperty,
   onUpdateMeta,
   onDeleteAnimation,
@@ -42,6 +47,7 @@ export const AnimationCard = memo(function AnimationCard({
   onSetArcPath,
   onUpdateArcSegment,
   onUpdateKeyframeEase,
+  onUpdateSegmentEase,
   onSetAllKeyframeEases,
   onUnroll,
 }: AnimationCardProps) {
@@ -49,6 +55,29 @@ export const AnimationCard = memo(function AnimationCard({
   const [addingProp, setAddingProp] = useState(false);
   const [addingFromProp, setAddingFromProp] = useState(false);
   const [expandedKfPct, setExpandedKfPct] = useState<number | null>(null);
+  const [focusedCollidingAnimationIds, setFocusedCollidingAnimationIds] = useState<
+    string[] | undefined
+  >();
+  const cardRef = useRef<HTMLDivElement>(null);
+  const pendingAutoScrollRef = useRef(false);
+
+  useEffect(() => {
+    if (!focusedSegment) return;
+    setExpanded(true);
+    pendingAutoScrollRef.current = true;
+    setExpandedKfPct(focusedSegment.tweenPercentage);
+    setFocusedCollidingAnimationIds(focusedSegment.collidingAnimationIds);
+    onFocusSegmentConsumed?.();
+  }, [focusedSegment, onFocusSegmentConsumed]);
+
+  useEffect(() => {
+    if (!pendingAutoScrollRef.current || expandedKfPct === null) return;
+    const segment = cardRef.current?.querySelector<HTMLElement>(
+      `[data-ease-segment-pct="${expandedKfPct}"]`,
+    );
+    segment?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+    pendingAutoScrollRef.current = false;
+  }, [expandedKfPct]);
 
   const usedProps = useMemo(
     () => new Set(Object.keys(animation.properties)),
@@ -153,6 +182,7 @@ export const AnimationCard = memo(function AnimationCard({
 
   return (
     <div
+      ref={cardRef}
       data-flat-effect-card={flat ? "true" : undefined}
       className={
         flat
@@ -263,8 +293,23 @@ export const AnimationCard = memo(function AnimationCard({
                     keyframes={animation.keyframes.keyframes}
                     globalEase={animation.keyframes.easeEach ?? animation.ease ?? "none"}
                     expandedPct={expandedKfPct}
-                    onToggle={setExpandedKfPct}
-                    onEaseCommit={(pct, ease) => onUpdateKeyframeEase(animation.id, pct, ease)}
+                    collidingAnimationIds={focusedCollidingAnimationIds}
+                    onToggle={(pct) => {
+                      setExpandedKfPct(pct);
+                      setFocusedCollidingAnimationIds(undefined);
+                    }}
+                    onEaseCommit={(pct, ease) => {
+                      if (
+                        focusedCollidingAnimationIds &&
+                        focusedCollidingAnimationIds.length > 1 &&
+                        onUpdateSegmentEase
+                      ) {
+                        onUpdateSegmentEase(focusedCollidingAnimationIds, pct, ease);
+                      } else {
+                        onUpdateKeyframeEase(animation.id, pct, ease);
+                      }
+                      trackStudioSegmentEaseEdit({ action: "commit", ease });
+                    }}
                     onApplyAll={
                       onSetAllKeyframeEases
                         ? (ease) => onSetAllKeyframeEases(animation.id, ease)
@@ -292,7 +337,6 @@ export const AnimationCard = memo(function AnimationCard({
                     />
                     <EaseCurveSection
                       ease={easeName}
-                      duration={animation.duration}
                       onCustomEaseCommit={(customEase) => {
                         const easeKey = animation.keyframes ? "easeEach" : "ease";
                         onUpdateMeta(animation.id, { [easeKey]: customEase });
diff --git a/packages/studio/src/components/editor/EaseCurveSection.test.tsx b/packages/studio/src/components/editor/EaseCurveSection.test.tsx
new file mode 100644
index 0000000000..5e3bb46335
--- /dev/null
+++ b/packages/studio/src/components/editor/EaseCurveSection.test.tsx
@@ -0,0 +1,344 @@
+// @vitest-environment happy-dom
+
+import React, { act, useState } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { EaseCurveSection, MiniCurveSvg } from "./EaseCurveSection";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+function renderSection(
+  ease = "none",
+  onCustomEaseCommit = vi.fn(),
+  collidingAnimationIds?: string[],
+) {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  act(() => {
+    root.render(
+      <EaseCurveSection
+        ease={ease}
+        onCustomEaseCommit={onCustomEaseCommit}
+        collidingAnimationIds={collidingAnimationIds}
+      />,
+    );
+  });
+  return { host, root, onCustomEaseCommit };
+}
+
+// The preset grid now lives behind the Figma-style ease-type dropdown; open it
+// before querying preset tiles.
+function openPresetGrid(host: HTMLElement): void {
+  const dropdown = host.querySelector<HTMLButtonElement>("[data-ease-type-dropdown]");
+  act(() => dropdown!.click());
+}
+
+function presetPath(host: HTMLElement, id: string): string | null | undefined {
+  return host
+    .querySelector<HTMLButtonElement>(`[data-ease-preset-id="${id}"]`)
+    ?.querySelector("path")
+    ?.getAttribute("d");
+}
+
+function countPathExtrema(path: string): number {
+  const values = Array.from(path.matchAll(/[ML][^,]+,([^ ]+)/g), (match) => Number(match[1]));
+  const directions = values
+    .slice(1)
+    .map((value, index) => Math.sign(value - values[index]!))
+    .filter((direction) => direction !== 0);
+  return directions.filter((direction, index) => index > 0 && direction !== directions[index - 1])
+    .length;
+}
+
+function renderStatefulSection(initialEase = "none", onCustomEaseCommit = vi.fn()) {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  const Harness = () => {
+    const [ease, setEase] = useState(initialEase);
+    return (
+      <EaseCurveSection
+        ease={ease}
+        onCustomEaseCommit={(nextEase) => {
+          onCustomEaseCommit(nextEase);
+          setEase(nextEase);
+        }}
+      />
+    );
+  };
+  act(() => root.render(<Harness />));
+  return { host, root, onCustomEaseCommit };
+}
+
+function clickMode(host: HTMLElement, mode: "curve" | "spring" | "wiggle"): void {
+  const toggle = host.querySelector<HTMLButtonElement>(`[data-ease-mode="${mode}"]`);
+  expect(toggle).not.toBeNull();
+  act(() => toggle!.click());
+}
+
+function presetIds(host: HTMLElement): string[] {
+  return Array.from(host.querySelectorAll<HTMLElement>("[data-ease-preset-id]"), (preset) =>
+    preset.getAttribute("data-ease-preset-id"),
+  ).filter((id): id is string => id !== null);
+}
+
+function editorLabel(host: HTMLElement): string | null {
+  return host.querySelector("[data-ease-type-dropdown] span")?.textContent ?? null;
+}
+
+describe("EaseCurveSection preset grid", () => {
+  it("shows the number of properties for a multi-id segment", () => {
+    const { host, root } = renderSection("power2.out", vi.fn(), ["move-x", "move-y", "fade"]);
+
+    expect(host.textContent).toContain("Applies to 3 properties");
+
+    act(() => root.unmount());
+  });
+
+  it.each([undefined, ["move-x"]])(
+    "does not show a property count for a non-colliding segment",
+    (collidingAnimationIds) => {
+      const { host, root } = renderSection("power2.out", vi.fn(), collidingAnimationIds);
+
+      expect(host.textContent).not.toContain("Applies to");
+
+      act(() => root.unmount());
+    },
+  );
+
+  it.each([
+    ["curve", "none", "linear", ["flow-7", "spring-bouncy"]],
+    ["spring", "spring(0.42)", "spring-bouncy", ["linear", "flow-7"]],
+    ["wiggle", "wiggle(3,easeInOut,0.12)", "flow-7", ["linear", "spring-bouncy"]],
+  ] as const)("shows only %s presets", (_mode, ease, includedPreset, excludedPresets) => {
+    const { host, root } = renderSection(ease);
+    openPresetGrid(host);
+    const ids = presetIds(host);
+
+    expect(ids).toContain(includedPreset);
+    for (const id of excludedPresets) expect(ids).not.toContain(id);
+
+    act(() => root.unmount());
+  });
+
+  it("renders a wiggle graph and fields without curve handles or fallback copy", () => {
+    const { host, root } = renderSection("wiggle(3,easeInOut,0.12)");
+    const graph = host.querySelector<SVGElement>('svg[viewBox="0 0 216 288"]');
+
+    expect(graph?.querySelector("path")).not.toBeNull();
+    expect(graph?.querySelectorAll(".cursor-grab")).toHaveLength(0);
+    expect(host.querySelector('[aria-label="Wiggle count"]')).not.toBeNull();
+    expect(host.querySelector('[aria-label="Wiggle type"]')).not.toBeNull();
+    expect(host.querySelector('[aria-label="Wiggle amplitude"]')).not.toBeNull();
+    expect(host.textContent).not.toContain("switch to");
+
+    act(() => root.unmount());
+  });
+
+  it.each([
+    ["spring(0.6)", "Bouncy"],
+    ["spring(0.37)", "Custom spring"],
+    ["wiggle(2,uniform,0.3)", "Custom wiggle"],
+    ["custom(M0,0 C0.1,0.2 0.8,0.9 1,1)", "Custom bezier"],
+  ])("labels %s as %s", (ease, expectedLabel) => {
+    const { host, root } = renderSection(ease);
+
+    expect(editorLabel(host)).toBe(expectedLabel);
+
+    act(() => root.unmount());
+  });
+
+  it("commits the selected preset through the existing custom-ease callback", () => {
+    const { host, root, onCustomEaseCommit } = renderSection("wiggle(3,easeInOut,0.12)");
+    openPresetGrid(host);
+    const tile = host.querySelector<HTMLButtonElement>('[data-ease-preset-id="flow-7"]');
+    expect(tile).not.toBeNull();
+
+    act(() => tile!.click());
+
+    expect(onCustomEaseCommit).toHaveBeenCalledTimes(1);
+    expect(onCustomEaseCommit).toHaveBeenCalledWith("wiggle(7,easeInOut,0.06)");
+    act(() => root.unmount());
+  });
+
+  it("commits Hold as a segment ease", () => {
+    const { host, root, onCustomEaseCommit } = renderSection();
+    openPresetGrid(host);
+    const tile = host.querySelector<HTMLButtonElement>('[data-ease-preset-id="hold"]');
+    expect(tile).not.toBeNull();
+
+    act(() => tile!.click());
+
+    expect(onCustomEaseCommit).toHaveBeenCalledWith("hold");
+    act(() => root.unmount());
+  });
+
+  it("draws Hold as a flat step with an end jump", () => {
+    const { host, root } = renderSection();
+    openPresetGrid(host);
+    const path = presetPath(host, "hold");
+
+    expect(path).toBe("M3,21 L21,21 L21,3");
+
+    act(() => root.unmount());
+  });
+
+  it("draws Hold as the same flat step in the big editor graph", () => {
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    act(() => {
+      root.render(<EaseCurveSection ease="hold" onCustomEaseCommit={vi.fn()} />);
+    });
+
+    const path = host
+      .querySelector<SVGElement>('svg[viewBox="0 0 216 288"]')
+      ?.querySelector("path")
+      ?.getAttribute("d");
+    expect(path).toBe("M16,236 L200,236 L200,52");
+
+    act(() => root.unmount());
+  });
+
+  it("preserves negative custom-ease control points in both curve graphs", () => {
+    const ease = "custom(M0,0 C0.3,-0.5 0.7,1.5 1,1)";
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    act(() => {
+      root.render(
+        <>
+          <MiniCurveSvg ease={ease} active={false} />
+          <EaseCurveSection ease={ease} onCustomEaseCommit={vi.fn()} />
+        </>,
+      );
+    });
+
+    const miniPath = host
+      .querySelector<SVGElement>('svg[viewBox="0 0 24 24"]')
+      ?.querySelector("path")
+      ?.getAttribute("d");
+    const editorPath = host
+      .querySelector<SVGElement>('svg[viewBox="0 0 216 288"]')
+      ?.querySelector("path")
+      ?.getAttribute("d");
+    expect(miniPath).toBe("M3,21 C8.399999999999999,30 15.6,-6 21,3");
+    expect(editorPath).toBe("M16,236 C71.19999999999999,328 144.79999999999998,-40 200,52");
+
+    act(() => root.unmount());
+  });
+
+  it("draws wiggle presets as sampled oscillating glyphs", () => {
+    const { host, root } = renderSection("wiggle(3,easeInOut,0.12)");
+    openPresetGrid(host);
+    const flow = presetPath(host, "flow-7");
+    const bounce = presetPath(host, "bounce-3");
+
+    expect(flow).toMatch(/^M.* L/);
+    expect(bounce).toMatch(/^M.* L/);
+    expect(flow).not.toBe(bounce);
+    expect(countPathExtrema(flow!)).toBeGreaterThan(8);
+    expect(countPathExtrema(bounce!)).toBeGreaterThan(8);
+
+    act(() => root.unmount());
+  });
+
+  it("draws Flow with increasing-frequency sampled glyphs", () => {
+    const { host, root } = renderSection("wiggle(3,easeInOut,0.12)");
+    openPresetGrid(host);
+    const flow1 = presetPath(host, "flow-1");
+    const flow7 = presetPath(host, "flow-7");
+
+    expect(flow1).toMatch(/^M.* L/);
+    expect(flow7).toMatch(/^M.* L/);
+    expect(flow1).not.toBe(flow7);
+
+    act(() => root.unmount());
+  });
+
+  it("draws explicit wiggle amplitudes in sampled glyphs", () => {
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    act(() =>
+      root.render(
+        <>
+          <MiniCurveSvg ease="wiggle(3,easeInOut,0.1)" active={false} />
+          <MiniCurveSvg ease="wiggle(3,easeInOut,0.2)" active={false} />
+        </>,
+      ),
+    );
+    const paths = Array.from(host.querySelectorAll("path"), (path) => path.getAttribute("d"));
+
+    expect(paths[0]).not.toBe(paths[1]);
+
+    act(() => root.unmount());
+  });
+
+  it("commits each mode default when switching modes", () => {
+    const { host, root, onCustomEaseCommit } = renderStatefulSection();
+
+    clickMode(host, "spring");
+    expect(onCustomEaseCommit).toHaveBeenLastCalledWith("spring(0.42)");
+
+    clickMode(host, "curve");
+    expect(onCustomEaseCommit).toHaveBeenLastCalledWith("custom(M0,0 C0.16,1 0.3,1 1,1)");
+
+    clickMode(host, "wiggle");
+    expect(onCustomEaseCommit).toHaveBeenLastCalledWith("wiggle(3,easeInOut,0.12)");
+
+    act(() => root.unmount());
+  });
+
+  it("keeps spring bounce editing wired to the custom-ease callback", () => {
+    const { host, root, onCustomEaseCommit } = renderStatefulSection("spring(0.37)");
+    const bounceInput = host.querySelector<HTMLInputElement>('[aria-label="Spring bounce"]');
+    expect(bounceInput).not.toBeNull();
+
+    act(() => {
+      bounceInput!.value = "0.7";
+      bounceInput!.dispatchEvent(new Event("input", { bubbles: true }));
+    });
+    expect(onCustomEaseCommit).toHaveBeenLastCalledWith("spring(0.7)");
+
+    act(() => root.unmount());
+  });
+
+  it("keeps curve handles draggable and commits the edited custom curve", () => {
+    const { host, root, onCustomEaseCommit } = renderSection("power2.out");
+    const graph = host.querySelector<SVGSVGElement>('svg[viewBox="0 0 216 288"]');
+    const handle = graph?.querySelector<SVGCircleElement>(".cursor-grab");
+    expect(graph).not.toBeNull();
+    expect(handle).not.toBeNull();
+    vi.spyOn(graph!, "getBoundingClientRect").mockReturnValue(new DOMRect(0, 0, 216, 288));
+    handle!.setPointerCapture = vi.fn();
+
+    act(() => {
+      handle!.dispatchEvent(
+        new PointerEvent("pointerdown", { bubbles: true, pointerId: 1, clientX: 46, clientY: 52 }),
+      );
+    });
+    act(() => {
+      graph!.dispatchEvent(
+        new PointerEvent("pointermove", {
+          bubbles: true,
+          pointerId: 1,
+          clientX: 108,
+          clientY: 144,
+        }),
+      );
+    });
+    act(() => {
+      graph!.dispatchEvent(new PointerEvent("pointerup", { bubbles: true, pointerId: 1 }));
+    });
+
+    expect(onCustomEaseCommit).toHaveBeenLastCalledWith("custom(M0,0 C0.5,0.5 0.3,1 1,1)");
+
+    act(() => root.unmount());
+  });
+});
diff --git a/packages/studio/src/components/editor/EaseCurveSection.tsx b/packages/studio/src/components/editor/EaseCurveSection.tsx
index 262ff6a9f9..470e71f5a1 100644
--- a/packages/studio/src/components/editor/EaseCurveSection.tsx
+++ b/packages/studio/src/components/editor/EaseCurveSection.tsx
@@ -1,75 +1,52 @@
-import { useCallback, useRef, useState } from "react";
-import { EASE_CURVES, EASE_LABELS, parseCustomEaseFromString } from "./gsapAnimationConstants";
+import { useEffect, useRef, useState } from "react";
+import { evaluateSpringEase, parseSpringBounce } from "@hyperframes/core/spring-ease";
+import {
+  evaluateWiggleEase,
+  parseWiggleEase,
+  type WiggleEaseConfig,
+} from "@hyperframes/core/wiggle-ease";
+import { EASE_PRESETS, easePresetLabel } from "./easePresetLibrary";
+import { holdCurvePath, MiniCurveSvg, sampledPath } from "./easeCurveSvg";
+import { EaseBezierField, SpringBounceField, WiggleField } from "./EaseParamFields";
+import { EASE_CURVES, EASE_LABELS, resolveEaseCurveTuple } from "./gsapAnimationConstants";
 import { roundToCenti } from "../../utils/rounding";
 
-// Figma-canonical ordering: linear, the three core eases, then the expressive
-// (back / snappy) family. Each maps to a GSAP ease so it round-trips cleanly.
-const PRESET_GRID_EASES = [
-  "none",
-  "power2.in",
-  "power2.out",
-  "power2.inOut",
-  "back.in",
-  "back.out",
-  "back.inOut",
-  "expo.out",
-] as const;
+export { MiniCurveSvg } from "./easeCurveSvg";
 
-function MiniCurveSvg({
-  curve,
-  active,
-}: {
-  curve: [number, number, number, number];
-  active: boolean;
-}) {
-  const [x1, y1, x2, y2] = curve;
-  const s = 24;
-  const p = 3;
-  const g = s - p * 2;
-  const sx = (px: number) => p + g * px;
-  const sy = (py: number) => s - p - g * py;
-  const d = `M${p},${s - p} C${sx(x1)},${sy(y1)} ${sx(x2)},${sy(y2)} ${s - p},${p}`;
-  return (
-    <svg width={s} height={s} viewBox={`0 0 ${s} ${s}`}>
-      <path
-        d={d}
-        fill="none"
-        stroke={active ? "#3CE6AC" : "#737373"}
-        strokeWidth="1.5"
-        strokeLinecap="round"
-      />
-    </svg>
-  );
-}
+const EASE_MODES = ["curve", "spring", "wiggle"] as const;
+type EaseMode = (typeof EASE_MODES)[number];
 
 const EasePresetGrid = function EasePresetGrid({
+  kind,
   currentEase,
   onSelect,
 }: {
+  kind: EaseMode;
   currentEase: string;
   onSelect: (ease: string) => void;
 }) {
   return (
-    <div className="grid grid-cols-4 gap-1 mb-2">
-      {PRESET_GRID_EASES.map((name) => {
-        const curve = EASE_CURVES[name];
-        if (!curve) return null;
-        const isActive = currentEase === name;
+    <div className="mb-2 grid max-h-56 grid-cols-4 gap-1 overflow-y-auto pr-0.5">
+      {EASE_PRESETS.filter((preset) => preset.kind === kind).map((preset) => {
+        const isActive = currentEase === preset.ease;
         return (
           <button
-            key={name}
+            key={preset.id}
             type="button"
-            onClick={() => onSelect(name)}
+            data-ease-preset-id={preset.id}
+            onClick={() => onSelect(preset.ease)}
             className={`flex flex-col items-center gap-0.5 rounded-md p-1 transition-colors ${
               isActive ? "bg-panel-accent/10 ring-1 ring-panel-accent/30" : "hover:bg-neutral-800"
             }`}
-            title={EASE_LABELS[name] ?? name}
+            title={preset.label}
           >
-            <MiniCurveSvg curve={curve} active={isActive} />
+            <MiniCurveSvg ease={preset.ease} active={isActive} />
             <span
-              className={`text-[8px] leading-none ${isActive ? "text-panel-accent" : "text-neutral-500"}`}
+              className={`text-center text-[8px] leading-none ${
+                isActive ? "text-panel-accent" : "text-neutral-500"
+              }`}
             >
-              {(EASE_LABELS[name] ?? name).split(" ").slice(0, 2).join(" ")}
+              {preset.label}
             </span>
           </button>
         );
@@ -101,56 +78,193 @@ const DRAG_VMIN = -1;
 const ACCENT = "#3CE6AC";
 
 type Pts = [number, number, number, number];
+const DEFAULT_CURVE: Pts = EASE_CURVES["power2.out"];
+const MODE_LABELS = { curve: "Curve", spring: "Spring", wiggle: "Wiggle" } satisfies Record<
+  EaseMode,
+  string
+>;
+const DEFAULT_EASE_BY_MODE = {
+  curve: `custom(M0,0 C${DEFAULT_CURVE[0]},${DEFAULT_CURVE[1]} ${DEFAULT_CURVE[2]},${DEFAULT_CURVE[3]} 1,1)`,
+  spring: "spring(0.42)",
+  wiggle: "wiggle(3,easeInOut,0.12)",
+} satisfies Record<EaseMode, string>;
+
+function EaseModeToggle({ mode, onCommit }: { mode: EaseMode; onCommit: (ease: string) => void }) {
+  return (
+    <div
+      className="mb-2 grid grid-cols-3 rounded-md bg-black/20 p-0.5"
+      role="group"
+      aria-label="Ease editor mode"
+    >
+      {EASE_MODES.map((candidateMode) => {
+        const active = candidateMode === mode;
+        return (
+          <button
+            key={candidateMode}
+            type="button"
+            data-ease-mode={candidateMode}
+            aria-pressed={active}
+            onClick={() => {
+              if (active) return;
+              onCommit(DEFAULT_EASE_BY_MODE[candidateMode]);
+            }}
+            className={`rounded px-2 py-1 text-[10px] font-medium transition-colors ${
+              active ? "bg-neutral-700 text-neutral-100" : "text-neutral-500 hover:text-neutral-300"
+            }`}
+          >
+            {MODE_LABELS[candidateMode]}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+// Figma-style ease-type dropdown: the current ease (glyph + name) as a button
+// that opens the preset grid in a popover. This is where a preset is selected —
+// the grid is no longer shown inline.
+function EaseTypeDropdown({
+  kind,
+  ease,
+  label,
+  onSelect,
+}: {
+  kind: EaseMode;
+  ease: string;
+  label: string;
+  onSelect: (ease: string) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  return (
+    <div className="relative mb-2">
+      <button
+        type="button"
+        data-ease-type-dropdown=""
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        onClick={() => setOpen((prev) => !prev)}
+        className="flex w-full items-center gap-2 rounded-md border border-white/10 bg-black/20 px-2 py-1.5 text-left transition-colors hover:border-white/20"
+      >
+        <MiniCurveSvg ease={ease} active size={16} />
+        <span className="text-[11px] text-neutral-200">{label}</span>
+        <svg
+          width="8"
+          height="8"
+          viewBox="0 0 10 10"
+          fill="currentColor"
+          className={`ml-auto text-neutral-500 transition-transform ${open ? "rotate-180" : ""}`}
+        >
+          <path d="M2 3l3 4 3-4z" />
+        </svg>
+      </button>
+      {open && (
+        <div className="absolute inset-x-0 top-full z-20 mt-1 rounded-md border border-white/10 bg-neutral-900 p-2 shadow-xl">
+          <EasePresetGrid
+            kind={kind}
+            currentEase={ease}
+            onSelect={(next) => {
+              onSelect(next);
+              setOpen(false);
+            }}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function resolveEditableCurve(ease: string, springBounce: number | null): Pts | null {
+  if (springBounce !== null) return DEFAULT_CURVE;
+  if (ease === "hold") return DEFAULT_CURVE;
+  if (ease.startsWith("custom(") || ease in EASE_CURVES) return resolveEaseCurveTuple(ease);
+  return null;
+}
+
+function resolveEditorLabel(ease: string, springBounce: number | null, isWiggle: boolean): string {
+  const presetLabel = easePresetLabel(ease);
+  if (presetLabel !== null) return presetLabel;
+  if (springBounce !== null) return "Custom spring";
+  if (isWiggle) return "Custom wiggle";
+  if (ease.startsWith("custom(")) return "Custom bezier";
+  return EASE_LABELS[ease] ?? ease;
+}
 
 const xToSvg = (px: number) => PADH + S * px;
 const yToSvg = (py: number) => HR + S * (1 - py);
 const clampView = (py: number) => Math.max(VMIN, Math.min(VMAX, py));
 
-function cubicAt(t: number, c0: number, c1: number, c2: number, c3: number): number {
-  const mt = 1 - t;
-  return mt * mt * mt * c0 + 3 * mt * mt * t * c1 + 3 * mt * t * t * c2 + t * t * t * c3;
+function curvePathFor(
+  ease: string,
+  springBounce: number | null,
+  wiggleConfig: WiggleEaseConfig | null,
+  tuple: Pts,
+): string {
+  if (ease === "hold") return holdCurvePath(xToSvg(0), yToSvg(0), xToSvg(1), yToSvg(1));
+  if (wiggleConfig !== null) {
+    return sampledPath(64, xToSvg, yToSvg, (progress) =>
+      evaluateWiggleEase(progress, wiggleConfig.wiggles, wiggleConfig.type, wiggleConfig.amplitude),
+    );
+  }
+  if (springBounce !== null) {
+    return sampledPath(64, xToSvg, yToSvg, (progress) =>
+      evaluateSpringEase(progress, springBounce),
+    );
+  }
+  const [x1, y1, x2, y2] = tuple;
+  return `M${xToSvg(0)},${yToSvg(0)} C${xToSvg(x1)},${yToSvg(y1)} ${xToSvg(x2)},${yToSvg(y2)} ${xToSvg(1)},${yToSvg(1)}`;
+}
+
+function EaseParameterField({
+  springBounce,
+  wiggleConfig,
+  tuple,
+  onCommit,
+}: {
+  springBounce: number | null;
+  wiggleConfig: WiggleEaseConfig | null;
+  tuple: Pts;
+  onCommit: (ease: string) => void;
+}) {
+  if (springBounce !== null) {
+    return <SpringBounceField springBounce={springBounce} onCommit={onCommit} />;
+  }
+  if (wiggleConfig !== null) return <WiggleField config={wiggleConfig} onCommit={onCommit} />;
+  return <EaseBezierField tuple={tuple} onCommit={onCommit} />;
 }
 
 export function EaseCurveSection({
   ease,
-  duration,
   onCustomEaseCommit,
+  collidingAnimationIds,
 }: {
   ease: string;
-  duration?: number;
   onCustomEaseCommit: (ease: string) => void;
+  collidingAnimationIds?: string[];
 }) {
-  const isCustom = ease.startsWith("custom(");
-  const curveFromPreset = EASE_CURVES[ease];
-  const customPoints = isCustom ? parseCustomEaseFromString(ease) : null;
-  const curve: Pts | null =
-    isCustom && customPoints
-      ? [customPoints.x1, customPoints.y1, customPoints.x2, customPoints.y2]
-      : (curveFromPreset ?? null);
+  const springBounce = parseSpringBounce(ease);
+  const isSpring = springBounce !== null;
+  const wiggleConfig = parseWiggleEase(ease);
+  const isWiggle = wiggleConfig !== null;
+  const mode: EaseMode = isSpring ? "spring" : isWiggle ? "wiggle" : "curve";
+  const curve = resolveEditableCurve(ease, springBounce);
 
   const [draft, setDraft] = useState<Pts | null>(null);
-  const [progress, setProgress] = useState<number | null>(null);
   const [hover, setHover] = useState<"p1" | "p2" | null>(null);
   const draggingRef = useRef<"p1" | "p2" | null>(null);
   const svgRef = useRef<SVGSVGElement | null>(null);
-  const rafRef = useRef<number>(0);
 
-  const play = useCallback(() => {
-    const start = performance.now();
-    const dur = 1100;
-    const tick = (now: number) => {
-      const t = Math.min((now - start) / dur, 1);
-      setProgress(t);
-      if (t < 1) rafRef.current = requestAnimationFrame(tick);
-      else setTimeout(() => setProgress(null), 450);
-    };
-    cancelAnimationFrame(rafRef.current);
-    rafRef.current = requestAnimationFrame(tick);
-  }, []);
+  // Keep the local draft displayed until the committed `ease` prop round-trips
+  // back (write → reparse → re-render), then drop it. Clearing on pointer-up
+  // instead would fall back to the STALE prop for a frame — the curve snaps to
+  // the old value and jumps to the new one (the commit flicker). By the time
+  // `ease` changes, `curve` already equals the draft, so the handoff is seamless.
+  useEffect(() => {
+    setDraft(null);
+  }, [ease]);
 
-  const active = draft ?? curve;
-  if (!active) return null;
-  const [x1, y1, x2, y2] = active;
+  const activeTuple = draft ?? curve;
+  const displayTuple = activeTuple ?? DEFAULT_CURVE;
+  const [x1, y1, x2, y2] = displayTuple;
 
   // Anchors + control handles. Handle *display* is clamped to the view so an
   // extreme loaded overshoot rides the edge instead of disappearing.
@@ -158,18 +272,9 @@ export function EaseCurveSection({
   const a1 = { x: xToSvg(1), y: yToSvg(1) };
   const p1 = { x: xToSvg(x1), y: yToSvg(clampView(y1)) };
   const p2 = { x: xToSvg(x2), y: yToSvg(clampView(y2)) };
-  // Curve drawn from the true control points (so its shape is exact).
-  const cp1 = { x: xToSvg(x1), y: yToSvg(y1) };
-  const cp2 = { x: xToSvg(x2), y: yToSvg(y2) };
-  const curvePath = `M${a0.x},${a0.y} C${cp1.x},${cp1.y} ${cp2.x},${cp2.y} ${a1.x},${a1.y}`;
-
-  let dot: { x: number; y: number } | null = null;
-  if (progress !== null) {
-    dot = {
-      x: xToSvg(cubicAt(progress, 0, x1, x2, 1)),
-      y: yToSvg(cubicAt(progress, 0, y1, y2, 1)),
-    };
-  }
+  const curvePath = curvePathFor(ease, springBounce, wiggleConfig, displayTuple);
+  const showGraph = activeTuple !== null || isWiggle;
+  const showHandles = !isSpring && !isWiggle;
 
   const handlePointerDown = (handle: "p1" | "p2", e: React.PointerEvent) => {
     e.preventDefault();
@@ -203,164 +308,163 @@ export function EaseCurveSection({
     if (!draggingRef.current || !draft) return;
     draggingRef.current = null;
     const path = `M0,0 C${draft[0]},${draft[1]} ${draft[2]},${draft[3]} 1,1`;
+    // Commit only — the draft stays on screen and is cleared by the effect above
+    // once the committed `ease` prop comes back, so the curve never flickers.
     onCustomEaseCommit(`custom(${path})`);
-    setDraft(null);
   };
 
   const top = yToSvg(1);
   const bottom = yToSvg(0);
   const left = xToSvg(0);
   const right = xToSvg(1);
-  const label = isCustom ? "Custom curve" : (EASE_LABELS[ease] ?? ease);
-  const bezierText = `${x1} · ${y1} · ${x2} · ${y2}`;
+  const label = resolveEditorLabel(ease, springBounce, isWiggle);
 
   return (
     <div className="rounded-lg bg-neutral-900/50 p-2">
-      <EasePresetGrid currentEase={ease} onSelect={(name) => onCustomEaseCommit(name)} />
-      <div className="mb-1.5 flex items-center justify-between">
-        <span className="text-[10px] font-medium text-neutral-500">Speed curve</span>
-        <button
-          type="button"
-          onClick={play}
-          className="rounded px-1.5 py-0.5 text-[10px] font-medium text-panel-accent transition-colors hover:bg-panel-accent/10"
-        >
-          {progress !== null ? "Playing…" : "Preview"}
-        </button>
-      </div>
-      <div
-        className="mx-auto overflow-hidden rounded-md border border-white/5 bg-black/20"
-        style={{ aspectRatio: `${SVGW} / ${SVGH}`, width: "100%", maxWidth: 230 }}
-      >
-        <svg
-          ref={svgRef}
-          width="100%"
-          height="100%"
-          viewBox={`0 0 ${SVGW} ${SVGH}`}
-          preserveAspectRatio="none"
-          className="touch-none select-none"
-          onPointerMove={handlePointerMove}
-          onPointerUp={handlePointerUp}
-          onPointerCancel={handlePointerUp}
-        >
-          {/* Grid — quarter lines inside the unit square */}
-          {[0.25, 0.5, 0.75].map((q) => (
-            <line
-              key={`v${q}`}
-              x1={xToSvg(q)}
-              y1={top}
-              x2={xToSvg(q)}
-              y2={bottom}
-              stroke="white"
-              strokeOpacity="0.05"
-              strokeWidth="1"
-            />
-          ))}
-          {[0.25, 0.5, 0.75].map((q) => (
-            <line
-              key={`h${q}`}
-              x1={left}
-              y1={yToSvg(q)}
-              x2={right}
-              y2={yToSvg(q)}
-              stroke="white"
-              strokeOpacity="0.05"
-              strokeWidth="1"
-            />
-          ))}
-          {/* Unit-square frame (progress 0 → 1) */}
-          <rect
-            x={left}
-            y={top}
-            width={S}
-            height={bottom - top}
-            fill="none"
-            stroke="white"
-            strokeOpacity="0.1"
-            strokeWidth="1"
-          />
-          {/* Linear reference diagonal */}
-          <line
-            x1={a0.x}
-            y1={a0.y}
-            x2={a1.x}
-            y2={a1.y}
-            stroke="white"
-            strokeOpacity="0.08"
-            strokeWidth="1"
-            strokeDasharray="3 4"
-          />
-          {/* Tangent handle lines */}
-          <line
-            x1={a0.x}
-            y1={a0.y}
-            x2={p1.x}
-            y2={p1.y}
-            stroke={ACCENT}
-            strokeOpacity="0.5"
-            strokeWidth="1.5"
-          />
-          <line
-            x1={a1.x}
-            y1={a1.y}
-            x2={p2.x}
-            y2={p2.y}
-            stroke={ACCENT}
-            strokeOpacity="0.5"
-            strokeWidth="1.5"
-          />
-          {/* The curve */}
-          <path d={curvePath} fill="none" stroke={ACCENT} strokeWidth="2.5" strokeLinecap="round" />
-          {/* Anchors at (0,0) and (1,1) */}
-          <circle cx={a0.x} cy={a0.y} r="3" fill={ACCENT} />
-          <circle cx={a1.x} cy={a1.y} r="3" fill={ACCENT} />
-          {/* Animated preview dot */}
-          {dot && (
-            <>
-              <circle cx={dot.x} cy={dot.y} r="9" fill={ACCENT} fillOpacity="0.18" />
-              <circle cx={dot.x} cy={dot.y} r="4.5" fill={ACCENT} />
-            </>
-          )}
-          {/* Draggable control handles (large transparent hit area + visible dot) */}
-          {[["p1", p1] as const, ["p2", p2] as const].map(([key, pt]) => (
-            <g key={key}>
-              <circle
-                cx={pt.x}
-                cy={pt.y}
-                r="14"
-                fill="transparent"
-                className="cursor-grab active:cursor-grabbing"
-                onPointerDown={(e) => handlePointerDown(key, e)}
-                onPointerEnter={() => setHover(key)}
-                onPointerLeave={() => setHover((h) => (h === key ? null : h))}
+      <EaseTypeDropdown kind={mode} ease={ease} label={label} onSelect={onCustomEaseCommit} />
+      {collidingAnimationIds && collidingAnimationIds.length > 1 && (
+        <p className="mb-1 text-[9px] text-neutral-500">
+          Applies to {collidingAnimationIds.length} properties
+        </p>
+      )}
+      <EaseModeToggle mode={mode} onCommit={onCustomEaseCommit} />
+      {showGraph ? (
+        <>
+          <div
+            className="mx-auto overflow-hidden rounded-md border border-white/5 bg-black/20"
+            style={{ aspectRatio: `${SVGW} / ${SVGH}`, width: "100%", maxWidth: 230 }}
+          >
+            <svg
+              ref={svgRef}
+              width="100%"
+              height="100%"
+              viewBox={`0 0 ${SVGW} ${SVGH}`}
+              preserveAspectRatio="none"
+              className="touch-none select-none"
+              onPointerMove={handlePointerMove}
+              onPointerUp={handlePointerUp}
+              onPointerCancel={handlePointerUp}
+            >
+              {/* Grid — quarter lines inside the unit square */}
+              {[0.25, 0.5, 0.75].map((q) => (
+                <line
+                  key={`v${q}`}
+                  x1={xToSvg(q)}
+                  y1={top}
+                  x2={xToSvg(q)}
+                  y2={bottom}
+                  stroke="white"
+                  strokeOpacity="0.05"
+                  strokeWidth="1"
+                />
+              ))}
+              {[0.25, 0.5, 0.75].map((q) => (
+                <line
+                  key={`h${q}`}
+                  x1={left}
+                  y1={yToSvg(q)}
+                  x2={right}
+                  y2={yToSvg(q)}
+                  stroke="white"
+                  strokeOpacity="0.05"
+                  strokeWidth="1"
+                />
+              ))}
+              {/* Unit-square frame (progress 0 → 1) */}
+              <rect
+                x={left}
+                y={top}
+                width={S}
+                height={bottom - top}
+                fill="none"
+                stroke="white"
+                strokeOpacity="0.1"
+                strokeWidth="1"
+              />
+              {/* Linear reference diagonal */}
+              <line
+                x1={a0.x}
+                y1={a0.y}
+                x2={a1.x}
+                y2={a1.y}
+                stroke="white"
+                strokeOpacity="0.08"
+                strokeWidth="1"
+                strokeDasharray="3 4"
               />
-              <circle
-                cx={pt.x}
-                cy={pt.y}
-                r={hover === key || draggingRef.current === key ? 7 : 5.5}
-                fill="#0a0a1a"
+              {/* Tangent handle lines */}
+              {showHandles && (
+                <>
+                  <line
+                    x1={a0.x}
+                    y1={a0.y}
+                    x2={p1.x}
+                    y2={p1.y}
+                    stroke={ACCENT}
+                    strokeOpacity="0.5"
+                    strokeWidth="1.5"
+                  />
+                  <line
+                    x1={a1.x}
+                    y1={a1.y}
+                    x2={p2.x}
+                    y2={p2.y}
+                    stroke={ACCENT}
+                    strokeOpacity="0.5"
+                    strokeWidth="1.5"
+                  />
+                </>
+              )}
+              {/* The curve */}
+              <path
+                d={curvePath}
+                fill="none"
                 stroke={ACCENT}
                 strokeWidth="2.5"
-                className="pointer-events-none transition-[r]"
+                strokeLinecap="round"
               />
-            </g>
-          ))}
-        </svg>
-      </div>
-      {/* Axis + value readout */}
-      <div className="mt-1.5 flex items-center justify-between px-0.5 text-[9px] text-neutral-600">
-        <span>{duration != null && duration > 0 ? "0s" : "start"}</span>
-        <span className="tracking-wide text-neutral-500">time →</span>
-        <span>{duration != null && duration > 0 ? `${duration}s` : "end"}</span>
-      </div>
-      <div className="mt-1 flex items-center justify-between px-0.5">
-        <span className="text-[10px] text-neutral-400">{label}</span>
-        <span
-          className="font-mono text-[9px] tracking-tight text-neutral-600"
-          title="cubic-bezier control points"
-        >
-          {bezierText}
-        </span>
-      </div>
+              {/* Anchors at (0,0) and (1,1) */}
+              <circle cx={a0.x} cy={a0.y} r="3" fill={ACCENT} />
+              <circle cx={a1.x} cy={a1.y} r="3" fill={ACCENT} />
+              {/* Draggable control handles (large transparent hit area + visible dot) */}
+              {showHandles &&
+                [["p1", p1] as const, ["p2", p2] as const].map(([key, pt]) => (
+                  <g key={key}>
+                    <circle
+                      cx={pt.x}
+                      cy={pt.y}
+                      r="14"
+                      fill="transparent"
+                      className="cursor-grab active:cursor-grabbing"
+                      onPointerDown={(e) => handlePointerDown(key, e)}
+                      onPointerEnter={() => setHover(key)}
+                      onPointerLeave={() => setHover((h) => (h === key ? null : h))}
+                    />
+                    <circle
+                      cx={pt.x}
+                      cy={pt.y}
+                      r={hover === key || draggingRef.current === key ? 7 : 5.5}
+                      fill="#0a0a1a"
+                      stroke={ACCENT}
+                      strokeWidth="2.5"
+                      className="pointer-events-none transition-[r]"
+                    />
+                  </g>
+                ))}
+            </svg>
+          </div>
+          <EaseParameterField
+            springBounce={springBounce}
+            wiggleConfig={wiggleConfig}
+            tuple={displayTuple}
+            onCommit={onCustomEaseCommit}
+          />
+        </>
+      ) : (
+        <p className="px-0.5 py-1.5 text-[10px] leading-relaxed text-neutral-500">
+          {label} preset: switch to Curve, Spring, or Wiggle above to shape it by hand.
+        </p>
+      )}
     </div>
   );
 }
diff --git a/packages/studio/src/components/editor/EaseParamFields.test.tsx b/packages/studio/src/components/editor/EaseParamFields.test.tsx
new file mode 100644
index 0000000000..386bab2de4
--- /dev/null
+++ b/packages/studio/src/components/editor/EaseParamFields.test.tsx
@@ -0,0 +1,151 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { parseWiggleEase } from "@hyperframes/core/wiggle-ease";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { EaseBezierField, SpringBounceField, WiggleField } from "./EaseParamFields";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+const roots: Root[] = [];
+
+afterEach(() => {
+  act(() => roots.splice(0).forEach((root) => root.unmount()));
+  document.body.innerHTML = "";
+});
+
+function renderField(field: React.ReactNode): HTMLElement {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  roots.push(root);
+  act(() => root.render(field));
+  return host;
+}
+
+function parsedWiggle(ease: string) {
+  const config = parseWiggleEase(ease);
+  expect(config).not.toBeNull();
+  if (!config) throw new Error(`Expected a valid wiggle ease: ${ease}`);
+  return config;
+}
+
+function expectWiggleCommit(onCommit: ReturnType<typeof vi.fn>, ease: string): void {
+  expect(onCommit).toHaveBeenLastCalledWith(ease);
+  const emitted = onCommit.mock.lastCall?.[0];
+  expect(typeof emitted === "string" ? parseWiggleEase(emitted) : null).not.toBeNull();
+}
+
+function inputValue(input: HTMLInputElement, value: string): void {
+  act(() => {
+    input.value = value;
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+  });
+}
+
+// Render a default wiggle field, type `value` into the input labelled `label`,
+// and return the commit spy — the shared body of the input-edit cases.
+function editWiggle(label: string, value: string): ReturnType<typeof vi.fn> {
+  const onCommit = vi.fn();
+  const host = renderField(
+    <WiggleField config={parsedWiggle("wiggle(6,easeOut,0.26)")} onCommit={onCommit} />,
+  );
+  const input = host.querySelector<HTMLInputElement>(`[aria-label="${label}"]`);
+  expect(input).not.toBeNull();
+  if (input) inputValue(input, value);
+  return onCommit;
+}
+
+describe("WiggleField", () => {
+  it("reflects a parsed wiggle config", () => {
+    const host = renderField(
+      <WiggleField config={parsedWiggle("wiggle(6,easeOut,0.26)")} onCommit={vi.fn()} />,
+    );
+
+    expect(host.querySelector<HTMLInputElement>('[aria-label="Wiggle count"]')?.value).toBe("6");
+    expect(host.querySelector<HTMLSelectElement>('[aria-label="Wiggle type"]')?.value).toBe(
+      "easeOut",
+    );
+    expect(host.querySelector<HTMLInputElement>('[aria-label="Wiggle amplitude"]')?.value).toBe(
+      "0.26",
+    );
+  });
+
+  it("commits an edited count", () => {
+    expectWiggleCommit(editWiggle("Wiggle count", "4"), "wiggle(4,easeOut,0.26)");
+  });
+
+  it("commits an edited type", () => {
+    const onCommit = vi.fn();
+    const host = renderField(
+      <WiggleField config={parsedWiggle("wiggle(6,easeOut,0.26)")} onCommit={onCommit} />,
+    );
+
+    const select = host.querySelector<HTMLSelectElement>('[aria-label="Wiggle type"]');
+    expect(select).not.toBeNull();
+    act(() => {
+      if (!select) return;
+      select.value = "anticipate";
+      select.dispatchEvent(new Event("change", { bubbles: true }));
+    });
+
+    expectWiggleCommit(onCommit, "wiggle(6,anticipate,0.26)");
+  });
+
+  it("commits an edited amplitude", () => {
+    expectWiggleCommit(editWiggle("Wiggle amplitude", "0.1"), "wiggle(6,easeOut,0.1)");
+  });
+
+  it("seeds and explicitly commits the per-type default amplitude", () => {
+    const onCommit = vi.fn();
+    const host = renderField(
+      <WiggleField config={parsedWiggle("wiggle(3,easeInOut)")} onCommit={onCommit} />,
+    );
+
+    expect(host.querySelector<HTMLInputElement>('[aria-label="Wiggle amplitude"]')?.value).toBe(
+      "0.08",
+    );
+    const count = host.querySelector<HTMLInputElement>('[aria-label="Wiggle count"]');
+    expect(count).not.toBeNull();
+    if (count) inputValue(count, "4");
+
+    expectWiggleCommit(onCommit, "wiggle(4,easeInOut,0.08)");
+  });
+
+  it("ignores an empty amplitude", () => {
+    expect(editWiggle("Wiggle amplitude", "")).not.toHaveBeenCalled();
+  });
+
+  it("rejects a count below one", () => {
+    expect(editWiggle("Wiggle count", "0")).not.toHaveBeenCalled();
+  });
+});
+
+describe("moved ease parameter fields", () => {
+  it("keeps the spring bounce commit behavior", () => {
+    const onCommit = vi.fn();
+    const host = renderField(<SpringBounceField springBounce={0.5} onCommit={onCommit} />);
+    const input = host.querySelector<HTMLInputElement>('[aria-label="Spring bounce"]');
+    expect(input).not.toBeNull();
+    if (input) inputValue(input, "0.333");
+
+    expect(onCommit).toHaveBeenLastCalledWith("spring(0.33)");
+  });
+
+  it("keeps the cubic-bezier tuple commit behavior", () => {
+    const onCommit = vi.fn();
+    const host = renderField(<EaseBezierField tuple={[0.33, 0, 0.67, 1]} onCommit={onCommit} />);
+    const input = host.querySelector<HTMLInputElement>(
+      '[aria-label="Cubic bezier control points"]',
+    );
+    expect(input).not.toBeNull();
+    act(() => {
+      if (!input) return;
+      input.value = "0.111, 0.222, 0.777, 0.888";
+      input.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true }));
+    });
+
+    expect(onCommit).toHaveBeenLastCalledWith("custom(M0,0 C0.11,0.22 0.78,0.89 1,1)");
+  });
+});
diff --git a/packages/studio/src/components/editor/EaseParamFields.tsx b/packages/studio/src/components/editor/EaseParamFields.tsx
new file mode 100644
index 0000000000..c3519ff938
--- /dev/null
+++ b/packages/studio/src/components/editor/EaseParamFields.tsx
@@ -0,0 +1,173 @@
+import { parseSpringBounce } from "@hyperframes/core/spring-ease";
+import {
+  parseWiggleEase,
+  type WiggleEaseConfig,
+  type WiggleType,
+} from "@hyperframes/core/wiggle-ease";
+import { roundToCenti } from "../../utils/rounding";
+import { MiniCurveSvg } from "./easeCurveSvg";
+
+type Pts = [number, number, number, number];
+
+const round2 = roundToCenti;
+const WIGGLE_TYPES = ["easeOut", "easeInOut", "anticipate", "uniform"] as const;
+const WIGGLE_DEFAULT_AMPLITUDE = {
+  easeOut: 0.16,
+  easeInOut: 0.08,
+  anticipate: 0.12,
+  uniform: 0.14,
+} satisfies Record<WiggleType, number>;
+
+function isWiggleType(value: string): value is WiggleType {
+  return WIGGLE_TYPES.some((type) => type === value);
+}
+
+function commitWiggle(
+  onCommit: (ease: string) => void,
+  count: number,
+  type: WiggleType,
+  amplitude: number,
+): void {
+  const ease = `wiggle(${count},${type},${roundToCenti(amplitude)})`;
+  if (parseWiggleEase(ease)) onCommit(ease);
+}
+
+// Editable cubic-bezier control points, Figma-style ("0.33, 0, 0, 1"). Commits
+// on Enter/blur; remounts (via key) when the tuple changes from a drag or preset
+// pick so the text always mirrors the live curve.
+export function EaseBezierField({
+  tuple,
+  onCommit,
+}: {
+  tuple: Pts;
+  onCommit: (ease: string) => void;
+}) {
+  const text = tuple.join(", ");
+  const commit = (raw: string) => {
+    const nums = raw
+      .split(/[\s,]+/)
+      .map(Number)
+      .filter((value) => Number.isFinite(value));
+    if (nums.length !== 4) return;
+    const [x1, y1, x2, y2] = nums as [number, number, number, number];
+    // Control-point X must stay in [0,1] for a monotonic (valid) time curve;
+    // clamp it so an out-of-range entry can't persist as a broken ease. Y is
+    // left free so overshoot/anticipation curves still work.
+    const cx = (v: number) => Math.max(0, Math.min(1, v));
+    onCommit(`custom(M0,0 C${round2(cx(x1))},${round2(y1)} ${round2(cx(x2))},${round2(y2)} 1,1)`);
+  };
+  return (
+    <div className="mt-1.5 flex items-center gap-1.5 px-0.5">
+      <MiniCurveSvg
+        ease={`custom(M0,0 C${tuple[0]},${tuple[1]} ${tuple[2]},${tuple[3]} 1,1)`}
+        active
+        size={14}
+      />
+      <input
+        key={text}
+        type="text"
+        defaultValue={text}
+        aria-label="Cubic bezier control points"
+        onKeyDown={(event) => {
+          if (event.key === "Enter") commit(event.currentTarget.value);
+        }}
+        onBlur={(event) => commit(event.currentTarget.value)}
+        className="w-full rounded border border-white/10 bg-black/20 px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-none focus:border-panel-accent/50"
+      />
+    </div>
+  );
+}
+
+export function SpringBounceField({
+  springBounce,
+  onCommit,
+}: {
+  springBounce: number;
+  onCommit: (ease: string) => void;
+}) {
+  return (
+    <label className="mt-1.5 flex items-center gap-2 px-0.5 text-[10px] text-neutral-400">
+      Bounce
+      <input
+        type="number"
+        aria-label="Spring bounce"
+        min="0"
+        max="1"
+        step="0.01"
+        value={springBounce}
+        onInput={(event) => {
+          if (event.currentTarget.value === "") return;
+          const value = Number(event.currentTarget.value);
+          if (!Number.isFinite(value)) return;
+          const bounce = parseSpringBounce(`spring(${value})`);
+          if (bounce !== null) onCommit(`spring(${round2(bounce)})`);
+        }}
+        className="w-16 rounded border border-white/10 bg-black/20 px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-none focus:border-panel-accent/50"
+      />
+    </label>
+  );
+}
+
+export function WiggleField({
+  config,
+  onCommit,
+}: {
+  config: WiggleEaseConfig;
+  onCommit: (ease: string) => void;
+}) {
+  const amplitude = config.amplitude ?? WIGGLE_DEFAULT_AMPLITUDE[config.type];
+  return (
+    <div className="mt-1.5 flex items-center gap-2 px-0.5 text-[10px] text-neutral-400">
+      <label className="flex items-center gap-1">
+        Count
+        <input
+          type="number"
+          aria-label="Wiggle count"
+          min="1"
+          step="1"
+          value={config.wiggles}
+          onInput={(event) => {
+            if (event.currentTarget.value === "") return;
+            commitWiggle(onCommit, Number(event.currentTarget.value), config.type, amplitude);
+          }}
+          className="w-14 rounded border border-white/10 bg-black/20 px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-none focus:border-panel-accent/50"
+        />
+      </label>
+      <label className="flex items-center gap-1">
+        Type
+        <select
+          aria-label="Wiggle type"
+          value={config.type}
+          onChange={(event) => {
+            if (isWiggleType(event.currentTarget.value)) {
+              commitWiggle(onCommit, config.wiggles, event.currentTarget.value, amplitude);
+            }
+          }}
+          className="rounded border border-white/10 bg-black/20 px-1.5 py-1 text-[10px] text-neutral-300 outline-none focus:border-panel-accent/50"
+        >
+          {WIGGLE_TYPES.map((type) => (
+            <option key={type} value={type}>
+              {type}
+            </option>
+          ))}
+        </select>
+      </label>
+      <label className="flex items-center gap-1">
+        Amplitude
+        <input
+          type="number"
+          aria-label="Wiggle amplitude"
+          min="0"
+          max="1"
+          step="0.01"
+          value={amplitude}
+          onInput={(event) => {
+            if (event.currentTarget.value === "") return;
+            commitWiggle(onCommit, config.wiggles, config.type, Number(event.currentTarget.value));
+          }}
+          className="w-16 rounded border border-white/10 bg-black/20 px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-none focus:border-panel-accent/50"
+        />
+      </label>
+    </div>
+  );
+}
diff --git a/packages/studio/src/components/editor/GsapAnimationSection.tsx b/packages/studio/src/components/editor/GsapAnimationSection.tsx
index 33f6201b2f..75f9c03006 100644
--- a/packages/studio/src/components/editor/GsapAnimationSection.tsx
+++ b/packages/studio/src/components/editor/GsapAnimationSection.tsx
@@ -9,6 +9,7 @@ import {
   type GsapAnimationEditCallbacks,
 } from "./gsapAnimationCallbacks";
 import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
+import { usePlayerStore } from "../../player";
 
 interface GsapAnimationSectionProps extends GsapAnimationEditCallbacks {
   animations: GsapAnimation[];
@@ -35,6 +36,7 @@ export const GsapAnimationSection = memo(function GsapAnimationSection({
   onSetArcPath,
   onUpdateArcSegment,
   onUpdateKeyframeEase,
+  onUpdateSegmentEase,
   onSetAllKeyframeEases,
   onUnroll,
 }: GsapAnimationSectionProps) {
@@ -56,6 +58,8 @@ export const GsapAnimationSection = memo(function GsapAnimationSection({
     trackAnimationMetaUpdate(track, updates);
     onUpdateMeta(animationId, updates);
   };
+  const focusedEaseSegment = usePlayerStore((s) => s.focusedEaseSegment);
+  const setFocusedEaseSegment = usePlayerStore((s) => s.setFocusedEaseSegment);
 
   return (
     <Section title="Animation" icon={<Film size={15} />}>
@@ -79,6 +83,10 @@ export const GsapAnimationSection = memo(function GsapAnimationSection({
               key={anim.id}
               animation={anim}
               defaultExpanded={index === 0}
+              focusedSegment={
+                focusedEaseSegment?.animationId === anim.id ? focusedEaseSegment : null
+              }
+              onFocusSegmentConsumed={() => setFocusedEaseSegment(null)}
               onUpdateProperty={(animationId, property, value) => {
                 trackProperty(property);
                 onUpdateProperty(animationId, property, value);
@@ -151,6 +159,7 @@ export const GsapAnimationSection = memo(function GsapAnimationSection({
                     }
                   : undefined
               }
+              onUpdateSegmentEase={onUpdateSegmentEase}
               onSetAllKeyframeEases={
                 onSetAllKeyframeEases
                   ? (animationId, ease) => {
diff --git a/packages/studio/src/components/editor/KeyframeEaseList.tsx b/packages/studio/src/components/editor/KeyframeEaseList.tsx
index 4574433d7b..a9fe061b58 100644
--- a/packages/studio/src/components/editor/KeyframeEaseList.tsx
+++ b/packages/studio/src/components/editor/KeyframeEaseList.tsx
@@ -44,6 +44,7 @@ export function KeyframeEaseList({
   keyframes,
   globalEase,
   expandedPct,
+  collidingAnimationIds,
   onToggle,
   onEaseCommit,
   onApplyAll,
@@ -51,6 +52,7 @@ export function KeyframeEaseList({
   keyframes: GsapPercentageKeyframe[];
   globalEase: string;
   expandedPct: number | null;
+  collidingAnimationIds?: string[];
   onToggle: (pct: number | null) => void;
   onEaseCommit: (pct: number, ease: string) => void;
   /** Apply one ease to every segment at once (clears per-segment overrides). */
@@ -93,7 +95,11 @@ export function KeyframeEaseList({
           ? "Custom"
           : (EASE_LABELS[segEase] ?? segEase);
         return (
-          <div key={`${i}-${kf.percentage}`} className="rounded-md bg-neutral-900/50">
+          <div
+            key={`${i}-${kf.percentage}`}
+            data-ease-segment-pct={kf.percentage}
+            className="rounded-md bg-neutral-900/50"
+          >
             <button
               type="button"
               onClick={() => onToggle(isExpanded ? null : kf.percentage)}
@@ -115,6 +121,7 @@ export function KeyframeEaseList({
               <div className="px-2 pb-2">
                 <EaseCurveSection
                   ease={segEase}
+                  collidingAnimationIds={collidingAnimationIds}
                   onCustomEaseCommit={(ease) => onEaseCommit(kf.percentage, ease)}
                 />
               </div>
diff --git a/packages/studio/src/components/editor/KeyframeNavigation.tsx b/packages/studio/src/components/editor/KeyframeNavigation.tsx
index c54047c305..b8016f1a6b 100644
--- a/packages/studio/src/components/editor/KeyframeNavigation.tsx
+++ b/packages/studio/src/components/editor/KeyframeNavigation.tsx
@@ -22,6 +22,36 @@ interface KeyframeNavigationProps {
 
 const TOLERANCE = 0.5;
 
+interface NavigableKeyframe {
+  percentage: number;
+  tweenPercentage?: number;
+  properties: Record<string, number | string>;
+}
+
+export function getKeyframeNavigationState<Keyframe extends NavigableKeyframe>(
+  keyframes: readonly Keyframe[],
+  currentPercentage: number,
+  property?: string,
+) {
+  const propertyKeyframes = property
+    ? keyframes.filter((keyframe) => property in keyframe.properties)
+    : keyframes;
+  return {
+    propertyKeyframes,
+    prevKeyframe:
+      propertyKeyframes
+        .filter((keyframe) => keyframe.percentage < currentPercentage - TOLERANCE)
+        .at(-1) ?? null,
+    nextKeyframe:
+      propertyKeyframes.find((keyframe) => keyframe.percentage > currentPercentage + TOLERANCE) ??
+      null,
+    currentKeyframe:
+      propertyKeyframes.find(
+        (keyframe) => Math.abs(keyframe.percentage - currentPercentage) <= TOLERANCE,
+      ) ?? null,
+  };
+}
+
 /**
  * Convert a clip-relative percentage (element lifetime, used for display/seek) to
  * the TWEEN-relative percentage the GSAP writer/runtime key on. The clip→tween
@@ -92,18 +122,12 @@ export const KeyframeNavigation = memo(function KeyframeNavigation({
   onRemoveKeyframe,
   onConvertToKeyframes,
 }: KeyframeNavigationProps) {
-  // Find keyframes that contain this property
-  const propertyKeyframes = keyframes?.filter((kf) => property in kf.properties) ?? [];
-
-  const prevKf =
-    propertyKeyframes.filter((kf) => kf.percentage < currentPercentage - TOLERANCE).at(-1) ?? null;
-
-  const nextKf =
-    propertyKeyframes.find((kf) => kf.percentage > currentPercentage + TOLERANCE) ?? null;
-
-  const atCurrent =
-    propertyKeyframes.find((kf) => Math.abs(kf.percentage - currentPercentage) <= TOLERANCE) ??
-    null;
+  const {
+    propertyKeyframes,
+    prevKeyframe: prevKf,
+    nextKeyframe: nextKf,
+    currentKeyframe: atCurrent,
+  } = getKeyframeNavigationState(keyframes ?? [], currentPercentage, property);
 
   // Diamond state
   let diamondState: DiamondState;
diff --git a/packages/studio/src/components/editor/PropertyPanel.tsx b/packages/studio/src/components/editor/PropertyPanel.tsx
index 237d842695..fbcd00c783 100644
--- a/packages/studio/src/components/editor/PropertyPanel.tsx
+++ b/packages/studio/src/components/editor/PropertyPanel.tsx
@@ -101,6 +101,7 @@ export const PropertyPanel = memo(function PropertyPanel(props: PropertyPanelPro
     onUpdateArcSegment,
     onUnroll,
     onUpdateKeyframeEase,
+    onUpdateSegmentEase,
     onSetAllKeyframeEases,
     onAddKeyframe,
     onRemoveKeyframe,
@@ -566,6 +567,7 @@ export const PropertyPanel = memo(function PropertyPanel(props: PropertyPanelPro
               onUpdateArcSegment={onUpdateArcSegment}
               onUnroll={onUnroll}
               onUpdateKeyframeEase={onUpdateKeyframeEase}
+              onUpdateSegmentEase={onUpdateSegmentEase}
               onSetAllKeyframeEases={onSetAllKeyframeEases}
             />
           )}
diff --git a/packages/studio/src/components/editor/PropertyPanelFlat.tsx b/packages/studio/src/components/editor/PropertyPanelFlat.tsx
index 05c12d31fe..60e84e54d8 100644
--- a/packages/studio/src/components/editor/PropertyPanelFlat.tsx
+++ b/packages/studio/src/components/editor/PropertyPanelFlat.tsx
@@ -19,6 +19,7 @@ import { createGsapLivePreview } from "./gsapLivePreview";
 import { formatTextFieldPreview } from "./propertyPanelSections";
 import { STUDIO_GSAP_PANEL_ENABLED } from "./manualEditingAvailability";
 import { useColorGradingController } from "./useColorGradingController";
+import { usePlayerStore } from "../../player";
 import {
   FlatColorGradingAccessory,
   FlatColorGradingSection,
@@ -137,6 +138,7 @@ export function PropertyPanelFlat({
   onUpdateArcSegment,
   onUnroll,
   onUpdateKeyframeEase,
+  onUpdateSegmentEase,
   onSetAllKeyframeEases,
 }: Pick<
   PropertyPanelProps,
@@ -178,6 +180,7 @@ export function PropertyPanelFlat({
   | "onUpdateArcSegment"
   | "onUnroll"
   | "onUpdateKeyframeEase"
+  | "onUpdateSegmentEase"
   | "onSetAllKeyframeEases"
   | "recordingState"
   | "recordingDuration"
@@ -252,6 +255,23 @@ export function PropertyPanelFlat({
   // just toggled. Two ids, not one: the clicked (newly-opening/closing) group
   // AND whichever group was open immediately before the click and got
   // implicitly closed by it — both freshly-mounted headers need to animate.
+  // When the inline timeline ease button focuses a segment on this element,
+  // force the Motion group open so its AnimationCard (which only mounts while
+  // the group is expanded) can consume the focus and reveal the ease editor.
+  const focusedEaseSegment = usePlayerStore((s) => s.focusedEaseSegment);
+  // Identity of the element THIS panel actually renders (not the store's
+  // selectedElementId, which flips synchronously on selection while the panel
+  // still renders the previous element during async DOM-selection resolution):
+  // a stale panel would otherwise consume a focus request meant for its
+  // successor when both share a class-selector animation id.
+  const renderedElementId = `${element.sourceFile}#${element.id}`;
+  useEffect(() => {
+    if (!focusedEaseSegment || focusedEaseSegment.elementId !== renderedElementId) return;
+    if (gsapAnimations.some((a) => a.id === focusedEaseSegment.animationId)) {
+      setOpenGroupId("motion");
+    }
+  }, [focusedEaseSegment, gsapAnimations, renderedElementId]);
+
   const [justToggledIds, setJustToggledIds] = useState<string[]>([]);
   const justToggledTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   useEffect(() => {
@@ -337,6 +357,7 @@ export function PropertyPanelFlat({
           onUpdateArcSegment,
           onUnroll,
           onUpdateKeyframeEase,
+          onUpdateSegmentEase,
           onSetAllKeyframeEases,
         }
       : null;
diff --git a/packages/studio/src/components/editor/easeCurveSvg.tsx b/packages/studio/src/components/editor/easeCurveSvg.tsx
new file mode 100644
index 0000000000..8832404f81
--- /dev/null
+++ b/packages/studio/src/components/editor/easeCurveSvg.tsx
@@ -0,0 +1,65 @@
+import { evaluateWiggleEase, parseWiggleEase } from "@hyperframes/core/wiggle-ease";
+import { evaluateSpringEase, parseSpringBounce } from "@hyperframes/core/spring-ease";
+import { resolveEaseCurveTuple } from "./gsapAnimationConstants";
+
+export function sampledPath(
+  samples: number,
+  x: (progress: number) => number,
+  y: (value: number) => number,
+  evaluate: (progress: number) => number,
+): string {
+  return Array.from({ length: samples + 1 }, (_, index) => {
+    const progress = index / samples;
+    return `${index === 0 ? "M" : "L"}${x(progress)},${y(evaluate(progress))}`;
+  }).join(" ");
+}
+
+export function holdCurvePath(left: number, bottom: number, right: number, top: number): string {
+  return `M${left},${bottom} L${right},${bottom} L${right},${top}`;
+}
+
+export function MiniCurveSvg({
+  ease,
+  active,
+  size = 24,
+}: {
+  ease: string;
+  active: boolean;
+  size?: number;
+}) {
+  const springBounce = parseSpringBounce(ease);
+  const wiggle = parseWiggleEase(ease);
+  const curve = resolveEaseCurveTuple(ease);
+  const [x1, y1, x2, y2] = curve;
+  const s = size;
+  const p = size / 8;
+  const g = s - p * 2;
+  const sx = (px: number) => p + g * px;
+  const sy = (py: number) => s - p - g * py;
+  const d =
+    ease === "hold"
+      ? holdCurvePath(p, s - p, s - p, p)
+      : wiggle
+        ? sampledPath(64, sx, sy, (progress) =>
+            evaluateWiggleEase(progress, wiggle.wiggles, wiggle.type, wiggle.amplitude),
+          )
+        : springBounce !== null
+          ? sampledPath(
+              24,
+              sx,
+              (value) => sy(value / 1.2),
+              (progress) => evaluateSpringEase(progress, springBounce),
+            )
+          : `M${p},${s - p} C${sx(x1)},${sy(y1)} ${sx(x2)},${sy(y2)} ${s - p},${p}`;
+  return (
+    <svg width={s} height={s} viewBox={`0 0 ${s} ${s}`}>
+      <path
+        d={d}
+        fill="none"
+        stroke={active ? "#3CE6AC" : "#737373"}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/studio/src/components/editor/easePresetLibrary.test.ts b/packages/studio/src/components/editor/easePresetLibrary.test.ts
new file mode 100644
index 0000000000..1d16b66062
--- /dev/null
+++ b/packages/studio/src/components/editor/easePresetLibrary.test.ts
@@ -0,0 +1,114 @@
+// Imports the parsers SOURCE (not the published subpath) so newly-added eases
+// like circ.inOut resolve before the parsers dist is rebuilt.
+import { SUPPORTED_EASES } from "../../../../parsers/src/gsapConstants";
+import { parseSpringBounce } from "@hyperframes/core/spring-ease";
+import { parseWiggleEase } from "@hyperframes/core/wiggle-ease";
+import { describe, expect, it } from "vitest";
+import { EASE_PRESETS, easePresetLabel } from "./easePresetLibrary";
+import { resolveEaseCurveTuple } from "./gsapAnimationConstants";
+
+const CUSTOM_EASE_PATTERN =
+  /^custom\(M0,0 C-?\d+(?:\.\d+)?,-?\d+(?:\.\d+)? -?\d+(?:\.\d+)?,-?\d+(?:\.\d+)? 1,1\)$/;
+
+describe("EASE_PRESETS", () => {
+  it("contains the complete 32-preset Graphs library with unique fields", () => {
+    expect(EASE_PRESETS).toHaveLength(32);
+    expect(new Set(EASE_PRESETS.map(({ id }) => id))).toHaveLength(32);
+    expect(new Set(EASE_PRESETS.map(({ label }) => label))).toHaveLength(32);
+    expect(new Set(EASE_PRESETS.map(({ ease }) => ease))).toHaveLength(32);
+  });
+
+  it("preserves the required standard, Flow, and Bounce mappings", () => {
+    const easeByLabel = Object.fromEntries(EASE_PRESETS.map(({ label, ease }) => [label, ease]));
+
+    expect(easeByLabel).toMatchObject({
+      Linear: "none",
+      "Ease In": "power1.in",
+      "Quad In": "power2.in",
+      "Cubic In": "power3.in",
+      "Ease Out": "power1.out",
+      "Quad Out": "power2.out",
+      "Cubic Out": "power3.out",
+      "Ease In & Out": "power1.inOut",
+      "Quad Ease": "power2.inOut",
+      "Cubic Ease": "power3.inOut",
+      "Circular Ease": "circ.inOut",
+      "Ease In Back": "back.in",
+      "Ease Out Back": "back.out",
+      "Flow 1": "wiggle(1,easeInOut,0.20)",
+      "Flow 2": "wiggle(2,easeInOut,0.15)",
+      "Flow 3": "wiggle(3,easeInOut,0.12)",
+      "Flow 4": "wiggle(4,easeInOut,0.10)",
+      "Flow 5": "wiggle(5,easeInOut,0.08)",
+      "Flow 6": "wiggle(6,easeInOut,0.07)",
+      "Flow 7": "wiggle(7,easeInOut,0.06)",
+      "Bounce 1": "wiggle(4,easeOut,0.22)",
+      "Bounce 2": "wiggle(6,easeOut,0.26)",
+      "Bounce 3": "wiggle(9,uniform,0.32)",
+      "Bounce 4": "wiggle(5,anticipate,0.28)",
+      Hold: "hold",
+    });
+
+    const flows = EASE_PRESETS.filter(({ id }) => id.startsWith("flow-"));
+    expect(flows.map(({ label }) => label)).toEqual([
+      "Flow 1",
+      "Flow 2",
+      "Flow 3",
+      "Flow 4",
+      "Flow 5",
+      "Flow 6",
+      "Flow 7",
+    ]);
+    expect(flows.every(({ ease }) => parseWiggleEase(ease) !== null)).toBe(true);
+  });
+
+  it("uses supported or valid custom eases that all resolve to finite geometry", () => {
+    for (const preset of EASE_PRESETS) {
+      expect(
+        SUPPORTED_EASES.includes(preset.ease as (typeof SUPPORTED_EASES)[number]) ||
+          CUSTOM_EASE_PATTERN.test(preset.ease) ||
+          parseSpringBounce(preset.ease) !== null ||
+          parseWiggleEase(preset.ease) !== null,
+        `${preset.label} has unsupported ease ${preset.ease}`,
+      ).toBe(true);
+      expect(resolveEaseCurveTuple(preset.ease).every(Number.isFinite)).toBe(true);
+    }
+  });
+
+  it("assigns every preset a valid kind", () => {
+    const kinds = new Set(["curve", "spring", "wiggle"]);
+
+    for (const preset of EASE_PRESETS) {
+      expect(kinds.has(preset.kind)).toBe(true);
+    }
+  });
+
+  it("uses valid bounce values for spring presets", () => {
+    for (const preset of EASE_PRESETS.filter(({ kind }) => kind === "spring")) {
+      const bounce = parseSpringBounce(preset.ease);
+
+      expect(bounce).not.toBeNull();
+      expect(bounce).toBeGreaterThanOrEqual(0);
+      expect(bounce).toBeLessThanOrEqual(1);
+    }
+  });
+
+  it("uses parseable eases for wiggle presets", () => {
+    for (const preset of EASE_PRESETS.filter(({ kind }) => kind === "wiggle")) {
+      expect(parseWiggleEase(preset.ease)).not.toBeNull();
+    }
+  });
+
+  it("preserves stable preset ids", () => {
+    for (const id of ["flow-7", "hold", "rebound-in"]) {
+      expect(EASE_PRESETS.some((preset) => preset.id === id)).toBe(true);
+    }
+  });
+
+  it("resolves preset labels by exact ease", () => {
+    expect(easePresetLabel("spring(0.6)")).toBe("Bouncy");
+    expect(easePresetLabel("back.in")).toBe("Ease In Back");
+    expect(easePresetLabel("wiggle(9,uniform,0.32)")).toBe("Bounce 3");
+    expect(easePresetLabel("custom(x)")).toBeNull();
+  });
+});
diff --git a/packages/studio/src/components/editor/easePresetLibrary.ts b/packages/studio/src/components/editor/easePresetLibrary.ts
new file mode 100644
index 0000000000..37d9b449d8
--- /dev/null
+++ b/packages/studio/src/components/editor/easePresetLibrary.ts
@@ -0,0 +1,49 @@
+export const EASE_PRESETS = [
+  { id: "linear", label: "Linear", ease: "none", kind: "curve" },
+  { id: "ease-in", label: "Ease In", ease: "power1.in", kind: "curve" },
+  { id: "quad-in", label: "Quad In", ease: "power2.in", kind: "curve" },
+  { id: "cubic-in", label: "Cubic In", ease: "power3.in", kind: "curve" },
+  { id: "ease-out", label: "Ease Out", ease: "power1.out", kind: "curve" },
+  { id: "quad-out", label: "Quad Out", ease: "power2.out", kind: "curve" },
+  { id: "cubic-out", label: "Cubic Out", ease: "power3.out", kind: "curve" },
+  { id: "ease", label: "Ease In & Out", ease: "power1.inOut", kind: "curve" },
+  { id: "quad-ease", label: "Quad Ease", ease: "power2.inOut", kind: "curve" },
+  { id: "cubic-ease", label: "Cubic Ease", ease: "power3.inOut", kind: "curve" },
+  { id: "circular-ease", label: "Circular Ease", ease: "circ.inOut", kind: "curve" },
+  { id: "rebound-in", label: "Ease In Back", ease: "back.in", kind: "curve" },
+  { id: "rebound-out", label: "Ease Out Back", ease: "back.out", kind: "curve" },
+  { id: "flow-1", label: "Flow 1", ease: "wiggle(1,easeInOut,0.20)", kind: "wiggle" },
+  { id: "flow-2", label: "Flow 2", ease: "wiggle(2,easeInOut,0.15)", kind: "wiggle" },
+  { id: "flow-3", label: "Flow 3", ease: "wiggle(3,easeInOut,0.12)", kind: "wiggle" },
+  { id: "flow-4", label: "Flow 4", ease: "wiggle(4,easeInOut,0.10)", kind: "wiggle" },
+  { id: "flow-5", label: "Flow 5", ease: "wiggle(5,easeInOut,0.08)", kind: "wiggle" },
+  { id: "flow-6", label: "Flow 6", ease: "wiggle(6,easeInOut,0.07)", kind: "wiggle" },
+  { id: "flow-7", label: "Flow 7", ease: "wiggle(7,easeInOut,0.06)", kind: "wiggle" },
+  { id: "bounce-1", label: "Bounce 1", ease: "wiggle(4,easeOut,0.22)", kind: "wiggle" },
+  { id: "bounce-2", label: "Bounce 2", ease: "wiggle(6,easeOut,0.26)", kind: "wiggle" },
+  { id: "bounce-3", label: "Bounce 3", ease: "wiggle(9,uniform,0.32)", kind: "wiggle" },
+  { id: "bounce-4", label: "Bounce 4", ease: "wiggle(5,anticipate,0.28)", kind: "wiggle" },
+  { id: "hold", label: "Hold", ease: "hold", kind: "curve" },
+  {
+    id: "rebound-ease",
+    label: "Ease In & Out Back",
+    ease: "back.inOut",
+    kind: "curve",
+  },
+  { id: "expo-in", label: "Expo In", ease: "expo.in", kind: "curve" },
+  { id: "expo-out", label: "Expo Out", ease: "expo.out", kind: "curve" },
+  // Runtime spring(bounce) approximates Figma stiffness and damping with bounce alone.
+  { id: "spring-gentle", label: "Gentle", ease: "spring(0.15)", kind: "spring" },
+  { id: "spring-quick", label: "Quick", ease: "spring(0.4)", kind: "spring" },
+  { id: "spring-bouncy", label: "Bouncy", ease: "spring(0.6)", kind: "spring" },
+  { id: "spring-slow", label: "Slow", ease: "spring(0.25)", kind: "spring" },
+] as const satisfies ReadonlyArray<{
+  id: string;
+  label: string;
+  ease: string;
+  kind: "curve" | "spring" | "wiggle";
+}>;
+
+export function easePresetLabel(ease: string): string | null {
+  return EASE_PRESETS.find((preset) => preset.ease === ease)?.label ?? null;
+}
diff --git a/packages/studio/src/components/editor/gsapAnimationCallbacks.ts b/packages/studio/src/components/editor/gsapAnimationCallbacks.ts
index c07d9c83b4..61d672e098 100644
--- a/packages/studio/src/components/editor/gsapAnimationCallbacks.ts
+++ b/packages/studio/src/components/editor/gsapAnimationCallbacks.ts
@@ -29,6 +29,7 @@ export interface GsapAnimationEditCallbacks {
     update: Partial<ArcPathSegment>,
   ) => void;
   onUpdateKeyframeEase?: (animationId: string, percentage: number, ease: string) => void;
+  onUpdateSegmentEase?: (animationIds: string[], tweenPct: number, ease: string) => void;
   /** Apply one ease to every keyframe segment at once (clears per-segment overrides). */
   onSetAllKeyframeEases?: (animationId: string, ease: string) => void;
   /** Unroll a computed (helper/loop) tween into literal tweens so it edits directly. */
diff --git a/packages/studio/src/components/editor/gsapAnimationConstants.ts b/packages/studio/src/components/editor/gsapAnimationConstants.ts
index 0c97947cf2..5fa44e9006 100644
--- a/packages/studio/src/components/editor/gsapAnimationConstants.ts
+++ b/packages/studio/src/components/editor/gsapAnimationConstants.ts
@@ -1,4 +1,4 @@
-import { controlPointsForGsapEase } from "./studioMotion";
+import { controlPointsForGsapEase, parseStudioCustomEaseData } from "./studioMotion";
 
 export const METHOD_LABELS: Record<string, string> = {
   set: "Set",
@@ -116,9 +116,14 @@ export const EASE_CURVES: Record<string, [number, number, number, number]> = {
   "back.out": [0.34, 1.56, 0.64, 1],
   "back.in": [0.36, 0, 0.66, -0.56],
   "back.inOut": [0.68, -0.55, 0.27, 1.55],
+  "circ.inOut": [0.785, 0.135, 0.15, 0.86],
   "expo.out": [0.16, 1, 0.3, 1],
   "expo.in": [0.7, 0, 0.84, 0],
   "expo.inOut": [0.87, 0, 0.13, 1],
+  "bounce.out": [0.34, 1.56, 0.64, 0.74],
+  "bounce.in": [0.36, 0.26, 0.66, -0.56],
+  "elastic.out(1,0.3)": [0.16, 1.45, 0.28, 0.82],
+  "elastic.inOut(1,0.3)": [0.68, -0.55, 0.32, 1.55],
   // After Effects polarity: "in" eases into the keyframe (slow END, CP2 y=1),
   // "out" eases out of it (slow START, CP1 y=0). Matches the "(AE)" labels.
   "ae-ease": [0.333, 0, 0.667, 1],
@@ -126,18 +131,15 @@ export const EASE_CURVES: Record<string, [number, number, number, number]> = {
   "ae-ease-out": [0.333, 0, 0.667, 0.667],
 };
 
-export function parseCustomEaseFromString(ease: string): {
-  x1: number;
-  y1: number;
-  x2: number;
-  y2: number;
-} {
-  const match = ease.match(/^custom\((.+)\)$/);
-  if (!match) return controlPointsForGsapEase("power2.out");
-  const data = match[1];
-  const nums = data.match(/[\d.]+/g)?.map(Number);
-  if (!nums || nums.length < 6) return controlPointsForGsapEase("power2.out");
-  return { x1: nums[2], y1: nums[3], x2: nums[4], y2: nums[5] };
+export function resolveEaseCurveTuple(ease: string): [number, number, number, number] {
+  if (ease.startsWith("custom(")) {
+    const points = parseStudioCustomEaseData(ease.match(/^custom\((.+)\)$/)?.[1]);
+    if (points) return [points.x1, points.y1, points.x2, points.y2];
+  }
+  const curve = EASE_CURVES[ease];
+  if (curve) return curve;
+  const points = controlPointsForGsapEase(ease);
+  return [points.x1, points.y1, points.x2, points.y2];
 }
 
 export const PERCENT_PROPS = new Set(["opacity", "autoAlpha"]);
diff --git a/packages/studio/src/components/editor/holdEaseSeek.test.ts b/packages/studio/src/components/editor/holdEaseSeek.test.ts
new file mode 100644
index 0000000000..2245f51d12
--- /dev/null
+++ b/packages/studio/src/components/editor/holdEaseSeek.test.ts
@@ -0,0 +1,34 @@
+import { installStudioCustomEase } from "../../../../core/src/runtime/customEase";
+import { gsap } from "gsap";
+import { describe, expect, it } from "vitest";
+
+describe("Studio hold ease", () => {
+  it("holds the start value under seek until the destination time", () => {
+    const runtimeGsap = { parseEase: gsap.parseEase.bind(gsap) };
+    expect(installStudioCustomEase(runtimeGsap)).toBe(true);
+    const hold = runtimeGsap.parseEase("hold");
+    expect(hold).toBeTypeOf("function");
+    if (typeof hold !== "function") return;
+
+    const target = { value: 0 };
+    const timeline = gsap.timeline({ paused: true }).to(
+      target,
+      {
+        value: 100,
+        duration: 2,
+        ease: hold,
+      },
+      0,
+    );
+
+    timeline.seek(0.5);
+    expect(target.value).toBe(0);
+    timeline.seek(1);
+    expect(target.value).toBe(0);
+    timeline.seek(1.99);
+    expect(target.value).toBe(0);
+    timeline.seek(2);
+    expect(target.value).toBe(100);
+    timeline.kill();
+  });
+});
diff --git a/packages/studio/src/components/editor/propertyPanelFlatMotionSection.tsx b/packages/studio/src/components/editor/propertyPanelFlatMotionSection.tsx
index 7458ad508a..879f0352d1 100644
--- a/packages/studio/src/components/editor/propertyPanelFlatMotionSection.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFlatMotionSection.tsx
@@ -12,6 +12,7 @@ import {
   type GsapAnimationEditCallbacks,
 } from "./gsapAnimationCallbacks";
 import { deriveElementTiming } from "./propertyPanelFlatTimingDerivation";
+import { usePlayerStore } from "../../player";
 
 export function FlatTimingRow({
   element,
@@ -144,6 +145,17 @@ export function FlatMotionSection({
           : "metric";
     track(control, property);
   };
+  const focusedEaseSegment = usePlayerStore((s) => s.focusedEaseSegment);
+  const setFocusedEaseSegment = usePlayerStore((s) => s.setFocusedEaseSegment);
+  // Only consume a focus request aimed at the element THIS panel renders (not
+  // the store's selectedElementId, which flips synchronously during async
+  // selection resolution), so a shared class-selector animation id can't open
+  // the wrong element's editor.
+  const renderedElementId = `${element.sourceFile}#${element.id}`;
+  const focusedHere =
+    focusedEaseSegment && focusedEaseSegment.elementId === renderedElementId
+      ? focusedEaseSegment
+      : null;
 
   return (
     <div className="space-y-3">
@@ -176,6 +188,8 @@ export function FlatMotionSection({
                   animation={anim}
                   defaultExpanded={index === 0}
                   flat
+                  focusedSegment={focusedHere?.animationId === anim.id ? focusedHere : null}
+                  onFocusSegmentConsumed={() => setFocusedEaseSegment(null)}
                   onUpdateProperty={(animationId, property, value) => {
                     trackProperty(property);
                     callbacks.onUpdateProperty(animationId, property, value);
diff --git a/packages/studio/src/components/editor/propertyPanelTypes.ts b/packages/studio/src/components/editor/propertyPanelTypes.ts
index 12b3cb136f..a0a292f17d 100644
--- a/packages/studio/src/components/editor/propertyPanelTypes.ts
+++ b/packages/studio/src/components/editor/propertyPanelTypes.ts
@@ -2,6 +2,7 @@ import type { RefObject } from "react";
 import type { ArcPathSegment, GsapAnimation } from "@hyperframes/parsers/gsap-parser";
 import type { DomEditSelection } from "./domEditing";
 import type { ImportedFontAsset } from "./fontAssets";
+import type { GsapAnimationEditCallbacks } from "./gsapAnimationCallbacks";
 
 export interface BackgroundRemovalProgress {
   status: "processing" | "complete" | "failed";
@@ -107,6 +108,7 @@ export interface PropertyPanelProps {
   ) => void;
   onRemoveKeyframe?: (animationId: string, percentage: number) => void;
   onUpdateKeyframeEase?: (animationId: string, percentage: number, ease: string) => void;
+  onUpdateSegmentEase?: NonNullable<GsapAnimationEditCallbacks["onUpdateSegmentEase"]>;
   onSetAllKeyframeEases?: (animationId: string, ease: string) => void;
   onConvertToKeyframes?: (animationId: string, duration?: number) => void;
   onCommitAnimatedProperty?: (
diff --git a/packages/studio/src/components/nle/PreviewOverlays.tsx b/packages/studio/src/components/nle/PreviewOverlays.tsx
index 2eeb4f6294..77781d9939 100644
--- a/packages/studio/src/components/nle/PreviewOverlays.tsx
+++ b/packages/studio/src/components/nle/PreviewOverlays.tsx
@@ -27,6 +27,7 @@ import type { GestureRecordingState } from "../editor/GestureRecordControl";
 import type { ReactNode } from "react";
 
 export interface PreviewOverlaysProps {
+  shouldShowMotionPath: boolean;
   shouldShowSelectedDomBounds: boolean;
   blockPreview?: BlockPreviewInfo | null;
   isGestureRecording?: boolean;
@@ -132,6 +133,7 @@ export function resolveZIndexEntries(
 
 // fallow-ignore-next-line complexity
 export function PreviewOverlays({
+  shouldShowMotionPath,
   shouldShowSelectedDomBounds,
   blockPreview,
   isGestureRecording,
@@ -274,7 +276,7 @@ export function PreviewOverlays({
       {STUDIO_KEYFRAMES_ENABLED && (
         <MotionPathOverlay
           iframeRef={previewIframeRef}
-          selection={shouldShowSelectedDomBounds ? domEditSelection : null}
+          selection={shouldShowMotionPath ? domEditSelection : null}
           compositionSize={compositionDimensions}
           isPlaying={isPlaying}
         />
diff --git a/packages/studio/src/components/nle/useTimelineEditCallbacks.test.tsx b/packages/studio/src/components/nle/useTimelineEditCallbacks.test.tsx
new file mode 100644
index 0000000000..245b21cae0
--- /dev/null
+++ b/packages/studio/src/components/nle/useTimelineEditCallbacks.test.tsx
@@ -0,0 +1,316 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { TimelineElement } from "../../player";
+import type { TimelineEditCallbacks } from "../../player/components/timelineCallbacks";
+import { usePlayerStore } from "../../player/store/playerStore";
+import { installReactActEnvironment, mountReactHarness } from "../../hooks/domSelectionTestHarness";
+
+installReactActEnvironment();
+
+const mocks = vi.hoisted(() => ({
+  actions: {
+    handleGsapRemoveKeyframe: vi.fn(),
+    handleGsapMoveKeyframeToPlayhead: vi.fn(),
+    handleGsapMoveKeyframe: vi.fn(),
+    handleGsapResizeKeyframedTween: vi.fn(),
+    handleGsapUpdateMeta: vi.fn(),
+    handleGsapAddKeyframe: vi.fn(),
+    handleGsapAddKeyframeBatch: vi.fn().mockResolvedValue(undefined),
+    handleGsapConvertToKeyframes: vi.fn(),
+    handleGsapRemoveAllKeyframes: vi.fn(),
+    handleGsapDeleteAnimation: vi.fn(),
+    buildDomSelectionForTimelineElement: vi.fn(),
+  },
+  selection: { id: "box", selector: "#box", sourceFile: "index.html" },
+  animations: Array<GsapAnimation>(),
+}));
+
+vi.mock("../../contexts/StudioContext", () => ({
+  useStudioShellContext: () => ({ projectId: "project", activeCompPath: "index.html" }),
+}));
+
+vi.mock("../../contexts/DomEditContext", () => ({
+  useDomEditActionsContext: () => mocks.actions,
+  useDomEditSelectionContext: () => ({
+    domEditSelection: mocks.selection,
+    selectedGsapAnimations: mocks.animations,
+  }),
+}));
+
+import { useTimelineEditCallbacks } from "./useTimelineEditCallbacks";
+
+const element: TimelineElement = {
+  id: "box",
+  key: "index.html#box",
+  domId: "box",
+  tag: "div",
+  start: 0,
+  duration: 1,
+  track: 0,
+  sourceFile: "index.html",
+};
+
+const flatAnimation: GsapAnimation = {
+  id: "box-to-0-position",
+  targetSelector: "#box",
+  method: "to",
+  position: 0,
+  resolvedStart: 0,
+  duration: 1,
+  properties: { x: 420 },
+  propertyGroup: "position",
+};
+
+const otherFlatAnimation: GsapAnimation = {
+  ...flatAnimation,
+  id: "circle-to-0-position",
+  targetSelector: "#circle",
+};
+
+const otherKeyframedAnimation: GsapAnimation = {
+  ...otherFlatAnimation,
+  keyframes: {
+    format: "percentage",
+    keyframes: [
+      { percentage: 0, properties: { x: 0 } },
+      { percentage: 100, properties: { x: 420 } },
+    ],
+  },
+};
+
+function renderCallbacks(): { callbacks: TimelineEditCallbacks; unmount: () => void } {
+  let callbacks: TimelineEditCallbacks | null = null;
+  function Harness() {
+    callbacks = useTimelineEditCallbacks({
+      handleTimelineElementMove: vi.fn(),
+      handleTimelineElementsMove: vi.fn(),
+      handleTimelineElementResize: vi.fn(),
+      handleTimelineGroupResize: vi.fn(),
+      handleToggleTrackHidden: vi.fn(),
+      handleBlockedTimelineEdit: vi.fn(),
+      handleTimelineElementSplit: vi.fn(),
+      handleRazorSplit: vi.fn(),
+      handleRazorSplitAll: vi.fn(),
+    });
+    return null;
+  }
+  const root = mountReactHarness(<Harness />);
+  if (!callbacks) throw new Error("timeline callbacks did not initialize");
+  return { callbacks, unmount: () => act(() => root.unmount()) };
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  mocks.animations = [flatAnimation];
+  mocks.actions.buildDomSelectionForTimelineElement.mockResolvedValue(mocks.selection);
+  usePlayerStore.setState({
+    currentTime: 0.5,
+    elements: [element],
+    domClipChildren: [],
+    keyframeCache: new Map(),
+    gsapAnimations: new Map([["box", [flatAnimation]]]),
+  });
+});
+
+afterEach(() => {
+  usePlayerStore.setState({
+    elements: [],
+    domClipChildren: [],
+    keyframeCache: new Map(),
+    gsapAnimations: new Map(),
+  });
+});
+
+describe("useTimelineEditCallbacks — flat tween keyframe lanes", () => {
+  it("adds an interior point through the add-keyframe persist boundary", async () => {
+    const view = renderCallbacks();
+
+    await act(async () => {
+      await view.callbacks.onTogglePropertyGroupKeyframe?.(element, {
+        animationId: flatAnimation.id,
+        propertyGroup: "position",
+        tweenPercentage: 50,
+        properties: { x: 210 },
+        remove: false,
+      });
+    });
+
+    expect(mocks.actions.handleGsapAddKeyframeBatch).toHaveBeenCalledWith(
+      flatAnimation.id,
+      50,
+      { x: 210 },
+      undefined,
+      mocks.selection,
+    );
+    expect(mocks.actions.handleGsapConvertToKeyframes).not.toHaveBeenCalled();
+    view.unmount();
+  });
+
+  it("safely no-ops a boundary drag while the tween is still flat", () => {
+    const view = renderCallbacks();
+
+    act(() => {
+      view.callbacks.onMoveKeyframe?.("box", 0, 25, "position", 0, flatAnimation.id);
+    });
+
+    expect(mocks.actions.handleGsapMoveKeyframe).not.toHaveBeenCalled();
+    expect(mocks.actions.handleGsapResizeKeyframedTween).not.toHaveBeenCalled();
+    view.unmount();
+  });
+
+  it("deletes a non-selected element flat boundary through the clicked element's selection", async () => {
+    const circle: TimelineElement = {
+      ...element,
+      id: "circle",
+      key: "scenes/main.html#circle",
+      domId: "circle",
+    };
+    usePlayerStore.setState({
+      elements: [element, circle],
+      gsapAnimations: new Map([["scenes/main.html#circle", [otherFlatAnimation]]]),
+    });
+    const view = renderCallbacks();
+
+    await act(async () => {
+      view.callbacks.onDeleteKeyframe?.(
+        "scenes/main.html#circle",
+        0,
+        "position",
+        0,
+        otherFlatAnimation.id,
+      );
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    // Persisted through the CLICKED element's own selection, not the current one.
+    expect(mocks.actions.handleGsapDeleteAnimation).toHaveBeenCalledWith(
+      otherFlatAnimation.id,
+      mocks.selection,
+    );
+    expect(mocks.actions.handleGsapRemoveKeyframe).not.toHaveBeenCalled();
+    view.unmount();
+  });
+
+  it("removes a non-selected element authored endpoint through the clicked element's selection", async () => {
+    const circle: TimelineElement = {
+      ...element,
+      id: "circle",
+      key: "scenes/main.html#circle",
+      domId: "circle",
+    };
+    usePlayerStore.setState({
+      elements: [element, circle],
+      gsapAnimations: new Map([["index.html#circle", [otherKeyframedAnimation]]]),
+    });
+    const view = renderCallbacks();
+
+    await act(async () => {
+      view.callbacks.onDeleteKeyframe?.(
+        "scenes/main.html#circle",
+        100,
+        "position",
+        100,
+        otherKeyframedAnimation.id,
+      );
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(mocks.actions.handleGsapRemoveKeyframe).toHaveBeenCalledWith(
+      otherKeyframedAnimation.id,
+      100,
+      undefined,
+      mocks.selection,
+    );
+    expect(mocks.actions.handleGsapDeleteAnimation).not.toHaveBeenCalled();
+    view.unmount();
+  });
+
+  it("keeps selected-element flat boundary deletion on the animation delete path", () => {
+    const view = renderCallbacks();
+
+    act(() => {
+      view.callbacks.onDeleteKeyframe?.("box", 0, "position", 0, flatAnimation.id);
+    });
+
+    expect(mocks.actions.handleGsapDeleteAnimation).toHaveBeenCalledWith(flatAnimation.id);
+    expect(mocks.actions.handleGsapRemoveKeyframe).not.toHaveBeenCalled();
+    view.unmount();
+  });
+
+  it("routes the flat lane-header remove toggle through the guarded delete path", async () => {
+    const view = renderCallbacks();
+
+    await act(async () => {
+      await view.callbacks.onTogglePropertyGroupKeyframe?.(element, {
+        animationId: flatAnimation.id,
+        propertyGroup: "position",
+        tweenPercentage: 100,
+        properties: { x: 420 },
+        remove: true,
+      });
+    });
+
+    expect(mocks.actions.handleGsapDeleteAnimation).toHaveBeenCalledWith(
+      flatAnimation.id,
+      mocks.selection,
+    );
+    expect(mocks.actions.handleGsapRemoveKeyframe).not.toHaveBeenCalled();
+    view.unmount();
+  });
+
+  it("keeps authored interior deletion on the per-keyframe path", () => {
+    mocks.animations = [
+      {
+        ...flatAnimation,
+        keyframes: {
+          format: "percentage",
+          keyframes: [
+            { percentage: 0, properties: { x: 0 } },
+            { percentage: 50, properties: { x: 210 } },
+            { percentage: 100, properties: { x: 420 } },
+          ],
+        },
+      },
+    ];
+    usePlayerStore.setState({ gsapAnimations: new Map([["box", mocks.animations]]) });
+    const view = renderCallbacks();
+
+    act(() => {
+      view.callbacks.onDeleteKeyframe?.("box", 50, "position", 50, flatAnimation.id);
+    });
+
+    expect(mocks.actions.handleGsapRemoveKeyframe).toHaveBeenCalledWith(flatAnimation.id, 50);
+    expect(mocks.actions.handleGsapDeleteAnimation).not.toHaveBeenCalled();
+    view.unmount();
+  });
+
+  it("keeps an authored interior drag on the per-keyframe move path", () => {
+    mocks.animations = [
+      {
+        ...flatAnimation,
+        keyframes: {
+          format: "percentage",
+          keyframes: [
+            { percentage: 0, properties: { x: 0 } },
+            { percentage: 50, properties: { x: 210 } },
+            { percentage: 100, properties: { x: 420 } },
+          ],
+        },
+      },
+    ];
+    const view = renderCallbacks();
+
+    act(() => {
+      view.callbacks.onMoveKeyframe?.("box", 50, 75, "position", 50, flatAnimation.id);
+    });
+
+    expect(mocks.actions.handleGsapMoveKeyframe).toHaveBeenCalledWith(flatAnimation.id, 50, 75);
+    expect(mocks.actions.handleGsapResizeKeyframedTween).not.toHaveBeenCalled();
+    view.unmount();
+  });
+});
diff --git a/packages/studio/src/components/nle/useTimelineEditCallbacks.ts b/packages/studio/src/components/nle/useTimelineEditCallbacks.ts
index 7413aa18a4..34aadf3f23 100644
--- a/packages/studio/src/components/nle/useTimelineEditCallbacks.ts
+++ b/packages/studio/src/components/nle/useTimelineEditCallbacks.ts
@@ -1,4 +1,5 @@
 import { useCallback, useMemo } from "react";
+import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { TimelineElement } from "../../player";
 import { usePlayerStore } from "../../player/store/playerStore";
 import type { BlockedTimelineEditIntent } from "../../player/components/timelineEditing";
@@ -11,6 +12,7 @@ import {
 import { resolveTweenStart, resolveTweenDuration } from "../../utils/globalTimeCompiler";
 import { resolveClipTimingBasis } from "../../hooks/useGsapTweenCache";
 import { resolveKeyframeRetime } from "../editor/keyframeRetime";
+import type { DomEditSelection } from "../editor/domEditingTypes";
 import type { TimelineMoveOperation } from "../../hooks/timelineMoveAdapter";
 
 export interface TimelineEditCallbackDeps {
@@ -63,29 +65,78 @@ export function useTimelineEditCallbacks({
     handleGsapResizeKeyframedTween,
     handleGsapUpdateMeta,
     handleGsapAddKeyframe,
+    handleGsapAddKeyframeBatch,
     handleGsapConvertToKeyframes,
     handleGsapRemoveAllKeyframes,
+    handleGsapDeleteAnimation,
     buildDomSelectionForTimelineElement,
   } = useDomEditActionsContext();
 
+  const resolveElementAnimations = useCallback(
+    (elementKey: string): GsapAnimation[] => {
+      const { gsapAnimations } = usePlayerStore.getState();
+      const hashIndex = elementKey.lastIndexOf("#");
+      const elementId = hashIndex === -1 ? elementKey : elementKey.slice(hashIndex + 1);
+      const sourceFile =
+        hashIndex === -1 ? (activeCompPath ?? "index.html") : elementKey.slice(0, hashIndex);
+      return (
+        gsapAnimations.get(`${sourceFile}#${elementId}`) ??
+        gsapAnimations.get(`index.html#${elementId}`) ??
+        gsapAnimations.get(elementId) ??
+        []
+      );
+    },
+    [activeCompPath],
+  );
+
   // Resolve a timeline-diamond callback's clip-% to the keyframe's anim id + its
   // tween-relative percentage (shared by the delete/move keyframe callbacks): the
   // diamond reports a clip-% but the script ops key on the tween-%. Prefers the
   // anim in the keyframe's property group, falling back to the first keyframed one.
   const resolveKeyframeTarget = useCallback(
     // fallow-ignore-next-line complexity
-    (pct: number): { animId: string; tweenPct: number } | null => {
-      const cached = usePlayerStore.getState().keyframeCache.get(domEditSelection?.id ?? "");
+    (
+      pct: number,
+      propertyGroup?: string,
+      tweenPercentage?: number,
+      animationId?: string,
+      animations: GsapAnimation[] = selectedGsapAnimations,
+    ): { animId: string; tweenPct: number } | null => {
+      const cached = propertyGroup
+        ? undefined
+        : usePlayerStore.getState().keyframeCache.get(domEditSelection?.id ?? "");
       const kf = cached?.keyframes.find((k) => Math.abs(k.percentage - pct) < 0.2);
-      const group = kf?.propertyGroup;
+      const group = propertyGroup ?? kf?.propertyGroup;
       const anim =
-        (group ? selectedGsapAnimations.find((a) => a.propertyGroup === group) : undefined) ??
-        selectedGsapAnimations.find((a) => a.keyframes);
-      return anim ? { animId: anim.id, tweenPct: kf?.tweenPercentage ?? pct } : null;
+        (animationId ? animations.find((a) => a.id === animationId) : undefined) ??
+        (group ? animations.find((a) => a.propertyGroup === group) : undefined) ??
+        animations.find((a) => a.keyframes);
+      return anim
+        ? { animId: anim.id, tweenPct: tweenPercentage ?? kf?.tweenPercentage ?? pct }
+        : null;
     },
     [domEditSelection?.id, selectedGsapAnimations],
   );
 
+  const removeKeyframeTarget = useCallback(
+    (
+      animationId: string,
+      percentage: number,
+      animations: GsapAnimation[],
+      selectionOverride?: DomEditSelection | null,
+    ) => {
+      const animation = animations.find((candidate) => candidate.id === animationId);
+      if (animation && !animation.keyframes) {
+        if (selectionOverride === undefined) handleGsapDeleteAnimation(animationId);
+        else handleGsapDeleteAnimation(animationId, selectionOverride);
+        return;
+      }
+      if (selectionOverride === undefined) handleGsapRemoveKeyframe(animationId, percentage);
+      else handleGsapRemoveKeyframe(animationId, percentage, undefined, selectionOverride);
+    },
+    [handleGsapDeleteAnimation, handleGsapRemoveKeyframe],
+  );
+
   return useMemo(
     () => ({
       onMoveElement: handleTimelineElementMove,
@@ -105,13 +156,25 @@ export function useTimelineEditCallbacks({
         if (!anim) return;
         handleGsapRemoveAllKeyframes(anim.id);
       },
-      onDeleteKeyframe: (_elId: string, pct: number) => {
-        const target = resolveKeyframeTarget(pct);
-        if (target) handleGsapRemoveKeyframe(target.animId, target.tweenPct);
+      onDeleteKeyframe: (elId, pct, group, tweenPct, animationId) => {
+        const animations = resolveElementAnimations(elId);
+        const target = resolveKeyframeTarget(pct, group, tweenPct, animationId, animations);
+        if (!target) return;
+        const element = usePlayerStore.getState().elements.find((el) => (el.key ?? el.id) === elId);
+        if (!element) {
+          removeKeyframeTarget(target.animId, target.tweenPct, animations);
+          return;
+        }
+        // Persist through the CLICKED element's own selection so a deletion on a
+        // non-selected element (especially one in a different source file) commits
+        // against the right element instead of the current domEditSelection.
+        void buildDomSelectionForTimelineElement(element).then((selection) => {
+          removeKeyframeTarget(target.animId, target.tweenPct, animations, selection);
+        });
       },
       // Retime the keyframe to the playhead, preserving its value + ease.
-      onMoveKeyframeToPlayhead: (_elId: string, pct: number) => {
-        const target = resolveKeyframeTarget(pct);
+      onMoveKeyframeToPlayhead: (_elId, pct, group, tweenPct, animationId) => {
+        const target = resolveKeyframeTarget(pct, group, tweenPct, animationId);
         if (target) handleGsapMoveKeyframeToPlayhead(target.animId, target.tweenPct);
       },
       // Drag-to-retime. The diamond reports clip-%s; resolveKeyframeTarget gives
@@ -122,13 +185,17 @@ export function useTimelineEditCallbacks({
       // resizes the tween — position/duration grow so the dragged keyframe lands at
       // the drop while every other keyframe keeps its absolute time (value+ease too).
       // fallow-ignore-next-line complexity
-      onMoveKeyframe: (_elId: string, fromClipPct: number, toClipPct: number) => {
-        const target = resolveKeyframeTarget(fromClipPct);
+      onMoveKeyframe: (_elId, fromClipPct, toClipPct, group, tweenPct, animationId) => {
+        const target = resolveKeyframeTarget(fromClipPct, group, tweenPct, animationId);
         const sel = domEditSelection;
         if (!target || !sel) return;
         const anim = selectedGsapAnimations.find((a) => a.id === target.animId);
         const tweenStart = anim ? resolveTweenStart(anim) : null;
         if (!anim || tweenStart === null) return;
+        // Synthesized flat endpoints are clip boundaries, not authored keyframes.
+        // Boundary-to-clip resize wiring is intentionally deferred; ignore the
+        // drag rather than dispatching a free keyframe move that cannot be written.
+        if (!anim.keyframes) return;
         const tweenDuration = anim.duration ?? resolveTweenDuration(anim);
         const sourceFile = sel.sourceFile || activeCompPath || "index.html";
         const { elements, domClipChildren } = usePlayerStore.getState();
@@ -187,6 +254,26 @@ export function useTimelineEditCallbacks({
           if (flatAnim) handleGsapConvertToKeyframes(flatAnim.id);
         }
       },
+      onTogglePropertyGroupKeyframe: async (element, target) => {
+        const selection = await buildDomSelectionForTimelineElement(element);
+        if (!selection) return;
+        if (target.remove) {
+          removeKeyframeTarget(
+            target.animationId,
+            target.tweenPercentage,
+            selectedGsapAnimations,
+            selection,
+          );
+          return;
+        }
+        await handleGsapAddKeyframeBatch(
+          target.animationId,
+          target.tweenPercentage,
+          target.properties,
+          undefined,
+          selection,
+        );
+      },
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
@@ -200,14 +287,16 @@ export function useTimelineEditCallbacks({
       handleRazorSplit,
       handleRazorSplitAll,
       handleGsapRemoveAllKeyframes,
+      resolveElementAnimations,
       resolveKeyframeTarget,
+      removeKeyframeTarget,
       selectedGsapAnimations,
-      handleGsapRemoveKeyframe,
       handleGsapMoveKeyframeToPlayhead,
       handleGsapMoveKeyframe,
       handleGsapResizeKeyframedTween,
       handleGsapUpdateMeta,
       handleGsapAddKeyframe,
+      handleGsapAddKeyframeBatch,
       handleGsapConvertToKeyframes,
       buildDomSelectionForTimelineElement,
       projectId,
diff --git a/packages/studio/src/contexts/DomEditContext.tsx b/packages/studio/src/contexts/DomEditContext.tsx
index 37d461608a..f89e27e915 100644
--- a/packages/studio/src/contexts/DomEditContext.tsx
+++ b/packages/studio/src/contexts/DomEditContext.tsx
@@ -71,6 +71,7 @@ export interface DomEditActionsValue extends Pick<
   | "commitMutation"
   | "applyMarqueeSelection"
   | "handleUpdateKeyframeEase"
+  | "handleUpdateSegmentEase"
   | "handleSetAllKeyframeEases"
 > {}
 
@@ -199,6 +200,7 @@ export function DomEditProvider({
     commitMutation,
     applyMarqueeSelection,
     handleUpdateKeyframeEase,
+    handleUpdateSegmentEase,
     handleSetAllKeyframeEases,
   },
   children,
@@ -281,6 +283,7 @@ export function DomEditProvider({
       commitMutation: stableCommitMutation,
       applyMarqueeSelection,
       handleUpdateKeyframeEase,
+      handleUpdateSegmentEase,
       handleSetAllKeyframeEases,
     }),
     [
@@ -349,6 +352,7 @@ export function DomEditProvider({
       stableCommitMutation,
       applyMarqueeSelection,
       handleUpdateKeyframeEase,
+      handleUpdateSegmentEase,
       handleSetAllKeyframeEases,
     ],
   );
diff --git a/packages/studio/src/contexts/TimelineEditContext.tsx b/packages/studio/src/contexts/TimelineEditContext.tsx
index c2b6edc6ce..be7f4e9ad6 100644
--- a/packages/studio/src/contexts/TimelineEditContext.tsx
+++ b/packages/studio/src/contexts/TimelineEditContext.tsx
@@ -44,6 +44,7 @@ export function TimelineEditProvider({
       value.onMoveKeyframeToPlayhead,
       value.onMoveKeyframe,
       value.onToggleKeyframeAtPlayhead,
+      value.onTogglePropertyGroupKeyframe,
     ],
   );
   return <TimelineEditContext.Provider value={memoized}>{children}</TimelineEditContext.Provider>;
diff --git a/packages/studio/src/hooks/gsapDragCommit.ts b/packages/studio/src/hooks/gsapDragCommit.ts
index 167ce438d5..4774c17e1b 100644
--- a/packages/studio/src/hooks/gsapDragCommit.ts
+++ b/packages/studio/src/hooks/gsapDragCommit.ts
@@ -12,7 +12,7 @@ import { usePlayerStore } from "../player/store/playerStore";
 import { readRuntimeKeyframes, scanAllRuntimeKeyframes } from "./gsapRuntimeKeyframes";
 import { resolveTweenStart, resolveTweenDuration } from "../utils/globalTimeCompiler";
 import { roundTo3 } from "../utils/rounding";
-import { computeElementPercentage } from "./gsapShared";
+import { computeElementPercentage, idSelector } from "./gsapShared";
 import { computeDraggedGsapPosition } from "./draggedGsapPosition";
 import type { RuntimeTweenChange } from "./gsapRuntimePatch";
 import { isGestureTransactionCommit, runGestureTransaction } from "./gestureTransaction";
@@ -117,7 +117,7 @@ export async function materializeIfDynamic(
     const allScanned = scanAllRuntimeKeyframes(iframe);
     if (allScanned.size === 0) return;
     const allElements = Array.from(allScanned.entries()).map(([id, data]) => ({
-      selector: `#${id}`,
+      selector: idSelector(id),
       keyframes: data.keyframes,
       easeEach: data.easeEach,
     }));
diff --git a/packages/studio/src/hooks/gsapKeyframeCacheHelpers.test.ts b/packages/studio/src/hooks/gsapKeyframeCacheHelpers.test.ts
index 16fc62b206..17620e3164 100644
--- a/packages/studio/src/hooks/gsapKeyframeCacheHelpers.test.ts
+++ b/packages/studio/src/hooks/gsapKeyframeCacheHelpers.test.ts
@@ -28,7 +28,7 @@ const animWithKeyframes = (id: string): GsapAnimation => ({
 });
 
 beforeEach(() => {
-  usePlayerStore.setState({ keyframeCache: new Map(), elements: [] });
+  usePlayerStore.setState({ keyframeCache: new Map(), gsapAnimations: new Map(), elements: [] });
 });
 
 describe("clearKeyframeCacheForElement", () => {
@@ -98,6 +98,72 @@ describe("clearKeyframeCacheForFile", () => {
 });
 
 describe("updateKeyframeCacheFromParsed", () => {
+  it("records colliding animation ids in first-seen order", () => {
+    const animation = (
+      id: string,
+      propertyGroup: string,
+      properties: Record<string, number>,
+    ): GsapAnimation => ({
+      ...animWithKeyframes(id),
+      targetSelector: "#hero",
+      propertyGroup,
+      keyframes: { format: "percentage", keyframes: [{ percentage: 50, properties }] },
+    });
+
+    updateKeyframeCacheFromParsed(
+      [
+        animation("hero-position", "position", { x: 100 }),
+        animation("hero-visual", "visual", { opacity: 1 }),
+        animation("hero-position", "position", { y: 50 }),
+        animation("hero-scale", "scale", { scale: 2 }),
+      ],
+      "scene.html",
+      "hero",
+      {},
+    );
+
+    expect(cache().get("scene.html#hero")?.keyframes[0]?.collidingAnimationIds).toEqual([
+      "hero-position",
+      "hero-visual",
+      "hero-scale",
+    ]);
+  });
+
+  it("serializes a multi-keyframe tween with a stable shape and animation identity", () => {
+    const animation: GsapAnimation = {
+      ...animWithKeyframes("hero"),
+      duration: 2,
+      resolvedStart: 3,
+      keyframes: {
+        format: "percentage",
+        keyframes: [
+          { percentage: 0, properties: { x: 0 } },
+          { percentage: 50, properties: { x: 100 }, ease: "power1.inOut" },
+          { percentage: 100, properties: { x: 200 } },
+        ],
+        easeEach: "power1.inOut",
+      },
+    };
+    usePlayerStore.setState({
+      elements: [
+        {
+          id: "hero-clip",
+          domId: "hero",
+          tag: "div",
+          start: 2,
+          duration: 4,
+          track: 0,
+        },
+      ],
+    });
+
+    updateKeyframeCacheFromParsed([animation], "scene.html", "hero", {});
+
+    expect(JSON.stringify(cache().get("scene.html#hero"))).toBe(
+      '{"format":"percentage","keyframes":[{"percentage":25,"properties":{"x":0},"tweenPercentage":0,"propertyGroup":"position","animationId":"hero"},{"percentage":50,"properties":{"x":100},"ease":"power1.inOut","tweenPercentage":50,"propertyGroup":"position","animationId":"hero"},{"percentage":75,"properties":{"x":200},"tweenPercentage":100,"propertyGroup":"position","animationId":"hero"}],"easeEach":"power1.inOut"}',
+    );
+  });
+
   it("clears the bare key when the selected element no longer has keyframes", () => {
     // Element previously had keyframes, so a bare entry exists (writes set both).
     seed("index.html#box");
@@ -118,4 +184,63 @@ describe("updateKeyframeCacheFromParsed", () => {
     expect(cache().has("index.html#hero")).toBe(true);
     expect(cache().has("hero")).toBe(true);
   });
+
+  it("caches flat tweens as clip-relative start and end keyframes", () => {
+    const animation: GsapAnimation = {
+      id: "flat-box",
+      targetSelector: "#box",
+      method: "to",
+      position: 1,
+      properties: { x: 420 },
+      duration: 2,
+      resolvedStart: 1,
+      ease: "power2.out",
+      propertyGroup: "position",
+    };
+    usePlayerStore.setState({
+      elements: [{ id: "box-clip", domId: "box", tag: "div", start: 1, duration: 2, track: 0 }],
+    });
+
+    updateKeyframeCacheFromParsed([animation], "scene.html", "box", {});
+
+    expect(cache().get("scene.html#box")).toEqual({
+      format: "percentage",
+      keyframes: [
+        {
+          percentage: 0,
+          properties: { x: 0 },
+          tweenPercentage: 0,
+          propertyGroup: "position",
+          animationId: "flat-box",
+        },
+        {
+          percentage: 100,
+          properties: { x: 420 },
+          ease: "power2.out",
+          tweenPercentage: 100,
+          propertyGroup: "position",
+          animationId: "flat-box",
+        },
+      ],
+    });
+    expect(usePlayerStore.getState().gsapAnimations.get("scene.html#box")).toEqual([animation]);
+  });
+
+  it("does not cache a flat tween without animatable numeric properties", () => {
+    const animation: GsapAnimation = {
+      id: "flat-box",
+      targetSelector: "#box",
+      method: "to",
+      position: 0,
+      properties: { backgroundColor: "#fff" },
+      duration: 1,
+      propertyGroup: "visual",
+    };
+
+    updateKeyframeCacheFromParsed([animation], "scene.html", "box", {});
+
+    expect(cache().has("scene.html#box")).toBe(false);
+    expect(cache().has("box")).toBe(false);
+    expect(usePlayerStore.getState().gsapAnimations.has("scene.html#box")).toBe(false);
+  });
 });
diff --git a/packages/studio/src/hooks/gsapKeyframeCacheHelpers.ts b/packages/studio/src/hooks/gsapKeyframeCacheHelpers.ts
index 1b5bef62b0..054298cab4 100644
--- a/packages/studio/src/hooks/gsapKeyframeCacheHelpers.ts
+++ b/packages/studio/src/hooks/gsapKeyframeCacheHelpers.ts
@@ -5,6 +5,7 @@
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import { usePlayerStore, type KeyframeCacheEntry } from "../player/store/playerStore";
 import { toAbsoluteTime } from "./gsapShared";
+import { accumulateCollidingAnimationIds, synthesizeFlatTweenKeyframes } from "./gsapTweenSynth";
 
 export function updateKeyframeCacheFromParsed(
   animations: GsapAnimation[],
@@ -15,10 +16,16 @@ export function updateKeyframeCacheFromParsed(
   const { setKeyframeCache, elements } = usePlayerStore.getState();
   const idsWithKeyframes = new Set<string>();
   const merged = new Map<string, KeyframeCacheEntry>();
+  const sourceAnimations = new Map<string, GsapAnimation[]>();
   for (const anim of animations) {
     const id = anim.targetSelector.match(/^#([\w-]+)/)?.[1];
-    if (!id || !anim.keyframes) continue;
+    const kfSource =
+      anim.keyframes?.keyframes ?? synthesizeFlatTweenKeyframes(anim)?.keyframes ?? [];
+    if (!id || kfSource.length === 0) continue;
     idsWithKeyframes.add(id);
+    if (anim.propertyGroup) {
+      sourceAnimations.set(id, [...(sourceAnimations.get(id) ?? []), anim]);
+    }
 
     // Convert tween-relative percentages to clip-relative so diamonds
     // render at the correct position within the timeline clip.
@@ -29,7 +36,7 @@ export function updateKeyframeCacheFromParsed(
     );
     const elStart = timelineEl?.start ?? 0;
     const elDuration = timelineEl?.duration ?? 1;
-    const clipKeyframes = anim.keyframes.keyframes.map((kf) => {
+    const clipKeyframes = kfSource.map((kf) => {
       const absTime = toAbsoluteTime(tweenPos, tweenDur, kf.percentage);
       const clipPct =
         elDuration > 0 ? Math.round(((absTime - elStart) / elDuration) * 1000) / 10 : kf.percentage;
@@ -38,6 +45,7 @@ export function updateKeyframeCacheFromParsed(
         percentage: clipPct,
         tweenPercentage: kf.percentage,
         propertyGroup: anim.propertyGroup,
+        animationId: anim.id,
       };
     });
 
@@ -48,6 +56,7 @@ export function updateKeyframeCacheFromParsed(
         const prev = byPct.get(kf.percentage);
         if (prev) {
           prev.properties = { ...prev.properties, ...kf.properties };
+          accumulateCollidingAnimationIds(prev, kf.animationId);
           if (kf.ease) prev.ease = kf.ease;
         } else {
           byPct.set(kf.percentage, { ...kf, properties: { ...kf.properties } });
@@ -55,13 +64,18 @@ export function updateKeyframeCacheFromParsed(
       }
       existing.keyframes = Array.from(byPct.values()).sort((a, b) => a.percentage - b.percentage);
     } else {
-      merged.set(id, { ...anim.keyframes, keyframes: clipKeyframes });
+      merged.set(id, {
+        ...anim.keyframes,
+        format: anim.keyframes?.format ?? "percentage",
+        keyframes: clipKeyframes,
+      });
     }
   }
   for (const [id, entry] of merged) {
     setKeyframeCache(`${targetPath}#${id}`, entry);
     setKeyframeCache(id, entry);
     if (targetPath !== "index.html") setKeyframeCache(`index.html#${id}`, entry);
+    writeGsapAnimationsForElement(targetPath, id, sourceAnimations.get(id));
   }
   const targetId =
     (mutation as { targetSelector?: string }).targetSelector?.match(/^#([\w-]+)/)?.[1] ??
@@ -84,13 +98,12 @@ export function updateKeyframeCacheFromParsed(
  * a new cache map and re-render every subscriber.
  */
 export function clearKeyframeCacheForElement(sourceFile: string, elementId: string): void {
-  const { keyframeCache, setKeyframeCache } = usePlayerStore.getState();
-  const keys =
-    sourceFile === "index.html"
-      ? [`index.html#${elementId}`, elementId]
-      : [`${sourceFile}#${elementId}`, `index.html#${elementId}`, elementId];
+  const { keyframeCache, setKeyframeCache, gsapAnimations, setGsapAnimations } =
+    usePlayerStore.getState();
+  const keys = elementCacheKeys(sourceFile, elementId);
   for (const key of keys) {
     if (keyframeCache.has(key)) setKeyframeCache(key, undefined);
+    if (gsapAnimations.has(key)) setGsapAnimations(key, undefined);
   }
 }
 
@@ -102,11 +115,11 @@ export function clearKeyframeCacheForElement(sourceFile: string, elementId: stri
  * absent from the re-scan) leaves no stale bare entry behind.
  */
 export function clearKeyframeCacheForFile(sourceFile: string): void {
-  const { keyframeCache } = usePlayerStore.getState();
+  const { keyframeCache, gsapAnimations } = usePlayerStore.getState();
   const sfPrefix = `${sourceFile}#`;
   const fallbackPrefix = "index.html#";
   const ids = new Set<string>();
-  for (const key of keyframeCache.keys()) {
+  for (const key of [...keyframeCache.keys(), ...gsapAnimations.keys()]) {
     const matchesFile =
       key.startsWith(sfPrefix) || (sourceFile !== "index.html" && key.startsWith(fallbackPrefix));
     if (!matchesFile) continue;
@@ -118,6 +131,23 @@ export function clearKeyframeCacheForFile(sourceFile: string): void {
   }
 }
 
+function elementCacheKeys(sourceFile: string, elementId: string): string[] {
+  return sourceFile === "index.html"
+    ? [`index.html#${elementId}`, elementId]
+    : [`${sourceFile}#${elementId}`, `index.html#${elementId}`, elementId];
+}
+
+export function writeGsapAnimationsForElement(
+  sourceFile: string,
+  elementId: string,
+  animations: GsapAnimation[] | undefined,
+): void {
+  const { setGsapAnimations } = usePlayerStore.getState();
+  for (const key of elementCacheKeys(sourceFile, elementId)) {
+    setGsapAnimations(key, animations);
+  }
+}
+
 function buildCacheKey(sourceFile: string, elementId: string): string {
   return `${sourceFile}#${elementId}`;
 }
diff --git a/packages/studio/src/hooks/gsapScriptCommitHelpers.ts b/packages/studio/src/hooks/gsapScriptCommitHelpers.ts
index d84c698608..e6d17338f3 100644
--- a/packages/studio/src/hooks/gsapScriptCommitHelpers.ts
+++ b/packages/studio/src/hooks/gsapScriptCommitHelpers.ts
@@ -2,12 +2,13 @@ import { findUnsafeDomPatchValues } from "@hyperframes/core/studio-api/finite-mu
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 
 export { PROPERTY_DEFAULTS } from "./gsapShared";
+import { idSelector } from "./gsapShared";
 
 export function ensureElementAddressable(selection: DomEditSelection): {
   selector: string;
   autoId?: string;
 } {
-  if (selection.id) return { selector: `#${selection.id}` };
+  if (selection.id) return { selector: idSelector(selection.id) };
   if (selection.selector) return { selector: selection.selector };
 
   const el = selection.element;
@@ -20,7 +21,7 @@ export function ensureElementAddressable(selection: DomEditSelection): {
     id = `${tag}-${n}`;
   }
   el.setAttribute("id", id);
-  return { selector: `#${id}`, autoId: id };
+  return { selector: idSelector(id), autoId: id };
 }
 
 export class GsapMutationHttpError extends Error {
diff --git a/packages/studio/src/hooks/gsapShared.test.ts b/packages/studio/src/hooks/gsapShared.test.ts
index ba45743488..30ed300a07 100644
--- a/packages/studio/src/hooks/gsapShared.test.ts
+++ b/packages/studio/src/hooks/gsapShared.test.ts
@@ -1,6 +1,6 @@
 import { describe, it, expect } from "vitest";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
-import { isInstantHold, parsePercentageKeyframes } from "./gsapShared";
+import { idSelector, isInstantHold, parsePercentageKeyframes } from "./gsapShared";
 
 describe("isInstantHold", () => {
   const animation = (method: GsapAnimation["method"], duration?: number) =>
@@ -74,3 +74,32 @@ describe("parsePercentageKeyframes", () => {
     expect(parsePercentageKeyframes({})).toBeNull();
   });
 });
+
+describe("idSelector", () => {
+  it("uses #id for valid CSS identifiers", () => {
+    expect(idSelector("hero-word")).toBe("#hero-word");
+    expect(idSelector("el_1")).toBe("#el_1");
+  });
+
+  it("uses an attribute selector for ids that #id can't address (digit-leading, dots, spaces)", () => {
+    // #01-... / #a.b / #a b throw a SyntaxError in querySelector / GSAP, crashing
+    // the preview when such a target is committed (e.g. dragging the element).
+    expect(idSelector("01-hook-hero-word")).toBe('[id="01-hook-hero-word"]');
+    expect(idSelector("my.class")).toBe('[id="my.class"]');
+    expect(idSelector("1box")).toBe('[id="1box"]');
+  });
+
+  it("escapes quotes and backslashes in the attribute selector value", () => {
+    expect(idSelector('1"x')).toBe('[id="1\\"x"]');
+  });
+
+  it("only ever emits #id for ids that can't break querySelector", () => {
+    // Every id resolves to either a plain #id (only when safe) or an attribute
+    // selector — never a #id that would throw a SyntaxError.
+    for (const id of ["hero-word", "01-hook", "a.b", "a b", "1", "--x", '1"q']) {
+      const sel = idSelector(id);
+      if (sel.startsWith("#")) expect(sel).toBe(`#${id}`);
+      else expect(sel.startsWith('[id="')).toBe(true);
+    }
+  });
+});
diff --git a/packages/studio/src/hooks/gsapShared.ts b/packages/studio/src/hooks/gsapShared.ts
index 459f303b46..db4e5a900b 100644
--- a/packages/studio/src/hooks/gsapShared.ts
+++ b/packages/studio/src/hooks/gsapShared.ts
@@ -53,8 +53,35 @@ export function isInstantHold(animation: GsapAnimation): boolean {
  * Returns `#id` if the selection has an id, otherwise the raw selector,
  * or null if neither exists.
  */
+/**
+ * A CSS-valid selector for an element id. `#id` for a valid CSS identifier,
+ * otherwise an `[id="..."]` attribute selector. IDs that start with a digit
+ * (e.g. "01-hook-hero-word") make `#id` an invalid selector, so
+ * `document.querySelector("#01-...")` / GSAP's `querySelectorAll` throw a
+ * SyntaxError — which surfaces as a masked cross-origin "Script error." and
+ * crashes the preview the moment such a target is committed (e.g. dragging).
+ */
+// Conservative: matches only ids that are unquestionably safe as a `#id`
+// selector — ASCII identifier, starts with a letter/underscore (or a single
+// leading hyphen), no dots/colons/spaces/digits-first. Anything it rejects
+// (digit-leading like "01-hook-...", dots, spaces, non-ASCII, …) falls through
+// to the attribute selector below, which is always valid. It can only ever err
+// toward the safe form, never toward a `#id` that throws — and, unlike
+// `CSS.escape`, it needs no browser global (this runs in node tests too).
+const SAFE_HASH_ID = /^-?[A-Za-z_][\w-]*$/;
+
+export function idSelector(id: string): string {
+  // A `#id` selector is only valid for a CSS identifier. IDs that start with a
+  // digit (e.g. "01-hook-hero-word") make `document.querySelector("#01-...")` and
+  // GSAP's `querySelectorAll` throw a SyntaxError — surfacing as a masked
+  // cross-origin "Script error." that crashes the preview the moment such a
+  // target is committed (e.g. dragging the element). Address those via an
+  // attribute selector instead (quotes/backslashes escaped for the string).
+  return SAFE_HASH_ID.test(id) ? `#${id}` : `[id="${id.replace(/(["\\])/g, "\\$1")}"]`;
+}
+
 export function selectorFromSelection(selection: DomEditSelection): string | null {
-  if (selection.id) return `#${selection.id}`;
+  if (selection.id) return idSelector(selection.id);
   if (selection.selector) return selection.selector;
   return null;
 }
diff --git a/packages/studio/src/hooks/gsapTweenSynth.test.ts b/packages/studio/src/hooks/gsapTweenSynth.test.ts
index 3d8d771222..496264f9ba 100644
--- a/packages/studio/src/hooks/gsapTweenSynth.test.ts
+++ b/packages/studio/src/hooks/gsapTweenSynth.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
-import { synthesizeFlatTweenKeyframes } from "./gsapTweenSynth";
+import { deduplicateKeyframes, synthesizeFlatTweenKeyframes } from "./gsapTweenSynth";
 
 function anim(overrides: Partial<GsapAnimation>): GsapAnimation {
   return {
@@ -53,3 +53,36 @@ describe("synthesizeFlatTweenKeyframes", () => {
     expect(out).not.toBeNull();
   });
 });
+
+describe("deduplicateKeyframes colliding animation ids", () => {
+  it("records different animations in first-seen order at the same percentage", () => {
+    const merged = deduplicateKeyframes([
+      { percentage: 45, properties: { x: 10 }, ease: "power2.in", animationId: "#a-position" },
+      { percentage: 45, properties: { opacity: 1 }, ease: "power2.out", animationId: "#a-visual" },
+    ]);
+    const kf = merged.find((k) => k.percentage === 45);
+    expect(kf?.collidingAnimationIds).toEqual(["#a-position", "#a-visual"]);
+  });
+
+  it("deduplicates three colliding animations while preserving first-seen order", () => {
+    const merged = deduplicateKeyframes([
+      { percentage: 45, properties: { x: 10 }, ease: "power2.in", animationId: "#a-position" },
+      { percentage: 45, properties: { opacity: 1 }, ease: "power2.in", animationId: "#a-visual" },
+      { percentage: 45, properties: { y: 20 }, ease: "power2.out", animationId: "#a-position" },
+      { percentage: 45, properties: { scale: 2 }, ease: "power2.in", animationId: "#a-scale" },
+    ]);
+    expect(merged.find((k) => k.percentage === 45)?.collidingAnimationIds).toEqual([
+      "#a-position",
+      "#a-visual",
+      "#a-scale",
+    ]);
+  });
+
+  it("leaves the collision set undefined within a single animation", () => {
+    const merged = deduplicateKeyframes([
+      { percentage: 45, properties: { x: 10 }, ease: "power2.in", animationId: "#a-position" },
+      { percentage: 45, properties: { y: 20 }, ease: "power2.out", animationId: "#a-position" },
+    ]);
+    expect(merged.find((k) => k.percentage === 45)?.collidingAnimationIds).toBeUndefined();
+  });
+});
diff --git a/packages/studio/src/hooks/gsapTweenSynth.ts b/packages/studio/src/hooks/gsapTweenSynth.ts
index edb849f28c..72ec9f7dea 100644
--- a/packages/studio/src/hooks/gsapTweenSynth.ts
+++ b/packages/studio/src/hooks/gsapTweenSynth.ts
@@ -5,14 +5,38 @@ import type {
 } from "@hyperframes/core/gsap-parser";
 import { PROPERTY_DEFAULTS } from "./gsapShared";
 
-export function deduplicateKeyframes(
-  keyframes: GsapPercentageKeyframe[],
-): GsapPercentageKeyframe[] {
-  const byPct = new Map<number, GsapPercentageKeyframe>();
+export function accumulateCollidingAnimationIds(
+  keyframe: { animationId?: string; collidingAnimationIds?: string[] },
+  incomingAnimationId: string | undefined,
+): void {
+  const primaryId = keyframe.animationId;
+  if (
+    primaryId === undefined ||
+    incomingAnimationId === undefined ||
+    primaryId === incomingAnimationId
+  ) {
+    return;
+  }
+  const collisionIds = keyframe.collidingAnimationIds;
+  if (collisionIds?.includes(incomingAnimationId)) return;
+  keyframe.collidingAnimationIds = [
+    ...(collisionIds === undefined || collisionIds.length === 0 ? [primaryId] : collisionIds),
+    incomingAnimationId,
+  ];
+}
+
+export function deduplicateKeyframes<
+  T extends GsapPercentageKeyframe & {
+    animationId?: string;
+    collidingAnimationIds?: string[];
+  },
+>(keyframes: T[]): T[] {
+  const byPct = new Map<number, T>();
   for (const kf of keyframes) {
     const existing = byPct.get(kf.percentage);
     if (existing) {
       existing.properties = { ...existing.properties, ...kf.properties };
+      accumulateCollidingAnimationIds(existing, kf.animationId);
       if (kf.ease) existing.ease = kf.ease;
     } else {
       byPct.set(kf.percentage, { ...kf, properties: { ...kf.properties } });
@@ -41,29 +65,40 @@ export function synthesizeFlatTweenKeyframes(anim: GsapAnimation): GsapKeyframes
   const fromProps = anim.fromProperties;
   if (!toProps || Object.keys(toProps).length === 0) return null;
 
-  const startProps: Record<string, number | string> = {};
-  const endProps: Record<string, number | string> = {};
+  const rawStart: Record<string, number | string> = {};
+  const rawEnd: Record<string, number | string> = {};
 
   if (anim.method === "from") {
     for (const [k, v] of Object.entries(toProps)) {
-      startProps[k] = v;
-      endProps[k] = PROPERTY_DEFAULTS[k] ?? 0;
+      rawStart[k] = v;
+      rawEnd[k] = PROPERTY_DEFAULTS[k] ?? 0;
     }
   } else if (anim.method === "fromTo" && fromProps) {
-    Object.assign(startProps, fromProps);
-    Object.assign(endProps, toProps);
+    Object.assign(rawStart, fromProps);
+    Object.assign(rawEnd, toProps);
   } else {
     for (const [k, v] of Object.entries(toProps)) {
-      startProps[k] = PROPERTY_DEFAULTS[k] ?? 0;
-      endProps[k] = v;
+      rawStart[k] = PROPERTY_DEFAULTS[k] ?? 0;
+      rawEnd[k] = v;
     }
   }
 
+  // Only numeric props are keyframe-interpolatable — a flat tween of a
+  // non-numeric prop (e.g. backgroundColor: "#fff") can't be a 2-keyframe lane.
+  const numericKeys = Object.keys(rawEnd).filter(
+    (k) => typeof rawStart[k] === "number" && typeof rawEnd[k] === "number",
+  );
+  if (numericKeys.length === 0) return null;
+  const startProps = Object.fromEntries(numericKeys.map((k) => [k, rawStart[k]]));
+  const endProps = Object.fromEntries(numericKeys.map((k) => [k, rawEnd[k]]));
+
   return {
     format: "percentage",
     keyframes: [
       { percentage: 0, properties: startProps },
-      { percentage: 100, properties: endProps },
+      // Segment ease lives on the destination keyframe (Figma/AE model) so the
+      // lane + cache surface it; also kept data-level for useGsapTweenCache.
+      { percentage: 100, properties: endProps, ...(anim.ease ? { ease: anim.ease } : {}) },
     ],
     ...(anim.ease ? { ease: anim.ease } : {}),
   };
diff --git a/packages/studio/src/hooks/useDomEditSession.test.tsx b/packages/studio/src/hooks/useDomEditSession.test.tsx
index 57b4751f42..fda24c9592 100644
--- a/packages/studio/src/hooks/useDomEditSession.test.tsx
+++ b/packages/studio/src/hooks/useDomEditSession.test.tsx
@@ -5,6 +5,7 @@ import { describe, expect, it, vi } from "vitest";
 import { shouldUseSdkCutover } from "../utils/sdkCutover";
 import type { PatchOperation } from "../utils/sourcePatcher";
 import type { Composition } from "@hyperframes/sdk";
+import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import type { UseDomEditSessionParams } from "./useDomEditSession";
 
 const styleOp = (property: string, value: string): PatchOperation => ({
@@ -56,6 +57,8 @@ const recordResolverParity = vi.fn<(...args: unknown[]) => Promise<void>>(async
 const capturedOnReorderShadow: { fn: ((targets: string[]) => void) | undefined } = {
   fn: undefined,
 };
+const domEditSelectionRef: { current: DomEditSelection | null } = { current: null };
+const gsapCommitMutation = Object.assign(vi.fn(), { batch: vi.fn() });
 
 vi.mock("../utils/sdkResolverShadow", () => ({
   runResolverShadow: vi.fn(),
@@ -83,11 +86,11 @@ vi.mock("./useDomEditCommits", () => ({
 }));
 vi.mock("./useDomSelection", () => ({
   useDomSelection: () => ({
-    domEditSelection: null,
+    domEditSelection: domEditSelectionRef.current,
     domEditGroupSelections: [],
     domEditHoverSelection: null,
     activeGroupElement: null,
-    domEditSelectionRef: { current: null },
+    domEditSelectionRef,
     domEditGroupSelectionsRef: { current: [] },
     setActiveGroupElement: vi.fn(),
     applyDomSelection: vi.fn(),
@@ -123,7 +126,7 @@ vi.mock("./useGsapTweenCache", () => ({
 }));
 vi.mock("./useGsapScriptCommits", () => ({
   useGsapScriptCommits: () => ({
-    commitMutation: vi.fn(),
+    commitMutation: gsapCommitMutation,
     updateGsapProperty: vi.fn(),
     updateGsapMeta: vi.fn(),
     deleteGsapAnimation: vi.fn(),
@@ -277,3 +280,131 @@ describe("onReorderShadow source filter", () => {
     }
   });
 });
+
+describe("bulk segment ease commits", () => {
+  it("uses one ordered batch for many ids and sane paths for one or no ids", async () => {
+    const { useDomEditSession } = await import("./useDomEditSession");
+    const selection: DomEditSelection = {
+      id: "hero",
+      element: document.createElement("div"),
+      label: "Hero",
+      tagName: "DIV",
+      sourceFile: "index.html",
+      compositionPath: "index.html",
+      isCompositionHost: false,
+      isInsideLockedComposition: false,
+      boundingBox: { x: 0, y: 0, width: 100, height: 100 },
+      textContent: null,
+      dataAttributes: {},
+      inlineStyles: {},
+      computedStyles: {},
+      textFields: [],
+      capabilities: {
+        canSelect: true,
+        canEditStyles: true,
+        canCrop: true,
+        canMove: true,
+        canResize: true,
+        canApplyManualOffset: true,
+        canApplyManualSize: true,
+        canApplyManualRotation: true,
+      },
+    };
+    domEditSelectionRef.current = selection;
+    gsapCommitMutation.mockClear();
+    gsapCommitMutation.batch.mockClear();
+    let updateSegmentEase:
+      | ((animationIds: string[], tweenPct: number, ease: string) => void)
+      | undefined;
+
+    function Probe() {
+      const params: UseDomEditSessionParams = {
+        projectId: "proj-1",
+        activeCompPath: "index.html",
+        isMasterView: false,
+        compIdToSrc: new Map(),
+        captionEditMode: false,
+        compositionLoading: false,
+        previewIframeRef: { current: null },
+        timelineElements: [],
+        setSelectedTimelineElementId: vi.fn(),
+        setRightCollapsed: vi.fn(),
+        setRightPanelTab: vi.fn(),
+        showToast: vi.fn(),
+        refreshPreviewDocumentVersion: vi.fn(),
+        queueDomEditSave: async <T,>(save: () => Promise<T>) => save(),
+        readProjectFile: async () => "",
+        writeProjectFile: async () => {},
+        updateEditingFileContent: vi.fn(),
+        domEditSaveTimestampRef: { current: 0 },
+        editHistory: { recordEdit: async () => {} },
+        fileTree: [],
+        importedFontAssetsRef: { current: [] },
+        projectDir: null,
+        projectIdRef: { current: "proj-1" },
+        previewIframe: null,
+        refreshKey: 0,
+        previewDocumentVersion: 0,
+        rightPanelTab: "design",
+        applyStudioManualEditsToPreviewRef: { current: async () => {} },
+        syncPreviewHistoryHotkey: vi.fn(),
+        reloadPreview: vi.fn(),
+        setRefreshKey: vi.fn(),
+      };
+      updateSegmentEase = useDomEditSession(params).handleUpdateSegmentEase;
+      return null;
+    }
+
+    const container = document.createElement("div");
+    const root = createRoot(container);
+    act(() => root.render(<Probe />));
+    try {
+      expect(updateSegmentEase).toBeTypeOf("function");
+      if (!updateSegmentEase) return;
+      const options = { label: "Update segment ease", softReload: true };
+      updateSegmentEase(["move-x", "move-y", "fade"], 100, "power2.inOut");
+
+      expect(gsapCommitMutation).not.toHaveBeenCalled();
+      expect(gsapCommitMutation.batch).toHaveBeenCalledTimes(1);
+      expect(gsapCommitMutation.batch).toHaveBeenCalledWith(
+        ["move-x", "move-y", "fade"].map((animationId) => ({
+          selection,
+          mutation: {
+            type: "update-keyframe",
+            animationId,
+            percentage: 100,
+            properties: {},
+            ease: "power2.inOut",
+          },
+          options,
+        })),
+        options,
+      );
+
+      gsapCommitMutation.mockClear();
+      gsapCommitMutation.batch.mockClear();
+      updateSegmentEase(["fade"], 25, "none");
+      expect(gsapCommitMutation).toHaveBeenCalledTimes(1);
+      expect(gsapCommitMutation).toHaveBeenCalledWith(
+        selection,
+        {
+          type: "update-keyframe",
+          animationId: "fade",
+          percentage: 25,
+          properties: {},
+          ease: "none",
+        },
+        { label: "Update keyframe ease", softReload: true },
+      );
+      expect(gsapCommitMutation.batch).not.toHaveBeenCalled();
+
+      gsapCommitMutation.mockClear();
+      updateSegmentEase([], 50, "linear");
+      expect(gsapCommitMutation).not.toHaveBeenCalled();
+      expect(gsapCommitMutation.batch).not.toHaveBeenCalled();
+    } finally {
+      domEditSelectionRef.current = null;
+      act(() => root.unmount());
+    }
+  });
+});
diff --git a/packages/studio/src/hooks/useDomEditSession.ts b/packages/studio/src/hooks/useDomEditSession.ts
index e4f978c210..b38007dc11 100644
--- a/packages/studio/src/hooks/useDomEditSession.ts
+++ b/packages/studio/src/hooks/useDomEditSession.ts
@@ -423,9 +423,6 @@ export function useDomEditSession({
     removeAllKeyframes,
     handleDomManualEditsReset,
   });
-
-  // ── Preview interaction ──
-
   const {
     handlePreviewCanvasMouseDown,
     handlePreviewCanvasPointerMove,
@@ -444,9 +441,6 @@ export function useDomEditSession({
     setActiveGroupElement,
     onClickToSource,
   });
-
-  // ── GSAP-aware geometry intercepts + animated property commit ──
-
   const {
     handleGsapAwarePathOffsetCommit,
     handleGsapAwareGroupPathOffsetCommit,
@@ -473,28 +467,39 @@ export function useDomEditSession({
     setArcPath,
     updateArcSegment,
   });
-
-  const handleUpdateKeyframeEase = useCallback(
-    (animationId: string, percentage: number, ease: string) => {
-      const sel = domEditSelectionRef.current;
-      if (!sel) return;
-      gsapCommitMutation(
-        sel,
-        {
+  const handleUpdateSegmentEase = useCallback(
+    (animationIds: string[], tweenPct: number, ease: string) => {
+      const selection = domEditSelectionRef.current;
+      if (!selection || animationIds.length === 0) return;
+      const options = {
+        label: animationIds.length === 1 ? "Update keyframe ease" : "Update segment ease",
+        softReload: true,
+      };
+      const calls = animationIds.map((animationId) => ({
+        selection,
+        mutation: {
           type: "update-keyframe",
           animationId,
-          percentage,
+          percentage: tweenPct,
           properties: {},
           ease,
         },
-        { label: "Update keyframe ease", softReload: true },
-      );
+        options,
+      }));
+      if (calls.length === 1) {
+        const call = calls[0];
+        if (call) void gsapCommitMutation(call.selection, call.mutation, call.options);
+        return;
+      }
+      void gsapCommitMutation.batch?.(calls, options);
     },
     [gsapCommitMutation, domEditSelectionRef],
   );
-
-  // Apply one ease to every segment at once (AE select-all + F9): set easeEach
-  // and strip per-keyframe overrides in a single mutation.
+  const handleUpdateKeyframeEase = useCallback(
+    (animationId: string, percentage: number, ease: string) =>
+      handleUpdateSegmentEase([animationId], percentage, ease),
+    [handleUpdateSegmentEase],
+  );
   const handleSetAllKeyframeEases = useCallback(
     (animationId: string, ease: string) => {
       const sel = domEditSelectionRef.current;
@@ -511,7 +516,6 @@ export function useDomEditSession({
     },
     [gsapCommitMutation, domEditSelectionRef],
   );
-
   return {
     // State
     domEditSelection,
@@ -587,6 +591,7 @@ export function useDomEditSession({
     handleGsapRemoveAllKeyframes,
     handleResetSelectedElementKeyframes,
     handleUpdateKeyframeEase,
+    handleUpdateSegmentEase,
     handleSetAllKeyframeEases,
     commitAnimatedProperty,
     commitAnimatedProperties,
diff --git a/packages/studio/src/hooks/useDomSelection.ts b/packages/studio/src/hooks/useDomSelection.ts
index 903894c7e9..568c964228 100644
--- a/packages/studio/src/hooks/useDomSelection.ts
+++ b/packages/studio/src/hooks/useDomSelection.ts
@@ -24,6 +24,7 @@ import {
   type DomEditSelection,
 } from "../components/editor/domEditing";
 import { reapplyPositionEditsAfterSeek } from "../components/editor/manualEdits";
+import { useStudioTestHooks } from "./useStudioTestHooks";
 
 // ── Types ──
 
@@ -506,6 +507,9 @@ export function useDomSelection({
     applyDomSelection(null, { revealPanel: false });
   }, [applyDomSelection, captionEditMode]);
 
+  // Dev-only headless-QA shortcut (window.__studioTest.selectByDomId). No-op in prod.
+  useStudioTestHooks({ previewIframeRef, buildDomSelectionFromTarget, applyDomSelection });
+
   const applyMarqueeSelection = useCallback(
     // fallow-ignore-next-line complexity
     (selections: DomEditSelection[], additive: boolean) => {
diff --git a/packages/studio/src/hooks/useGestureCommit.ts b/packages/studio/src/hooks/useGestureCommit.ts
index a0aba6747f..cdc51dcf97 100644
--- a/packages/studio/src/hooks/useGestureCommit.ts
+++ b/packages/studio/src/hooks/useGestureCommit.ts
@@ -13,7 +13,7 @@ import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { CommitMutationOptions } from "./gsapScriptCommitTypes";
 import { roundTo3 } from "../utils/rounding";
 import { classifyPropertyGroup } from "@hyperframes/core/gsap-parser";
-import { isInstantHold } from "./gsapShared";
+import { isInstantHold, idSelector } from "./gsapShared";
 
 type RecordedKeyframe = {
   percentage: number;
@@ -168,7 +168,7 @@ export function useGestureCommit({
         if (!sortedPcts.includes(0)) sortedPcts.unshift(0);
       }
 
-      const selector = sel.id ? `#${sel.id}` : sel.selector;
+      const selector = sel.id ? idSelector(sel.id) : sel.selector;
       if (!selector) {
         showToast("Cannot save — element has no selector", "error");
         return;
diff --git a/packages/studio/src/hooks/useGsapKeyframeOps.test.tsx b/packages/studio/src/hooks/useGsapKeyframeOps.test.tsx
index 9a965d63db..049a3970b4 100644
--- a/packages/studio/src/hooks/useGsapKeyframeOps.test.tsx
+++ b/packages/studio/src/hooks/useGsapKeyframeOps.test.tsx
@@ -101,6 +101,28 @@ describe("useGsapKeyframeOps — resizeKeyframedTween", () => {
 });
 
 describe("useGsapKeyframeOps — keyframe transaction options", () => {
+  it("routes a flat-lane add through the add-keyframe writer mutation", async () => {
+    const commitMutation = vi.fn<(...args: unknown[]) => Promise<unknown>>(async () => ({
+      ok: true,
+    }));
+    const api = renderKeyframeOps({ commitMutation, trackGsapSaveFailure: vi.fn() });
+
+    await act(async () => {
+      await api.addKeyframeBatch(selection, "box-to-0-position", 50, { x: 210 });
+    });
+
+    expect(commitMutation).toHaveBeenCalledWith(
+      selection,
+      {
+        type: "add-keyframe",
+        animationId: "box-to-0-position",
+        percentage: 50,
+        properties: { x: 210 },
+      },
+      { label: "Add keyframe at 50%", softReload: true },
+    );
+  });
+
   it("soft-reloads a standalone convert when the SDK path is unavailable", async () => {
     const commitMutation = vi.fn<(...args: unknown[]) => Promise<unknown>>(async () => ({
       ok: true,
diff --git a/packages/studio/src/hooks/useGsapSelectionHandlers.ts b/packages/studio/src/hooks/useGsapSelectionHandlers.ts
index 0b11d760de..efde12caa5 100644
--- a/packages/studio/src/hooks/useGsapSelectionHandlers.ts
+++ b/packages/studio/src/hooks/useGsapSelectionHandlers.ts
@@ -173,8 +173,8 @@ export function useGsapSelectionHandlers({
   );
 
   const handleGsapDeleteAnimation = useCallback(
-    (animId: string) => {
-      const sel = domEditSelection ?? lastSelectionRef.current;
+    (animId: string, selectionOverride?: DomEditSelection | null) => {
+      const sel = selectionOverride ?? domEditSelection ?? lastSelectionRef.current;
       if (!sel) return;
       observeGsapMutation(deleteGsapAnimation(sel, animId), sel, "delete", "Delete GSAP animation");
     },
@@ -298,17 +298,15 @@ export function useGsapSelectionHandlers({
       percentage: number,
       properties: Record<string, number | string>,
       commitOverrides?: Partial<CommitMutationOptions>,
+      selectionOverride?: DomEditSelection | null,
     ) => {
-      if (!domEditSelection) return Promise.resolve();
-      return addKeyframeBatch(
-        domEditSelection,
-        animId,
-        percentage,
-        properties,
-        commitOverrides,
-      ).catch((error) => {
-        trackGsapHandlerFailure(error, domEditSelection, "add-keyframe", "Add keyframe");
-      });
+      const sel = selectionOverride ?? domEditSelection ?? lastSelectionRef.current;
+      if (!sel) return Promise.resolve();
+      return addKeyframeBatch(sel, animId, percentage, properties, commitOverrides).catch(
+        (error) => {
+          trackGsapHandlerFailure(error, sel, "add-keyframe", "Add keyframe");
+        },
+      );
     },
     [domEditSelection, addKeyframeBatch, trackGsapHandlerFailure],
   );
diff --git a/packages/studio/src/hooks/useGsapTweenCache.ts b/packages/studio/src/hooks/useGsapTweenCache.ts
index 226ec4c194..6a8e9d5481 100644
--- a/packages/studio/src/hooks/useGsapTweenCache.ts
+++ b/packages/studio/src/hooks/useGsapTweenCache.ts
@@ -6,6 +6,7 @@ import { readRuntimeKeyframes, scanAllRuntimeKeyframes } from "./gsapRuntimeBrid
 import {
   clearKeyframeCacheForElement,
   clearKeyframeCacheForFile,
+  writeGsapAnimationsForElement,
 } from "./gsapKeyframeCacheHelpers";
 import { toAbsoluteTime } from "./gsapShared";
 import { deduplicateKeyframes, synthesizeFlatTweenKeyframes } from "./gsapTweenSynth";
@@ -328,6 +329,12 @@ export function useGsapAnimationsForElement(
   // fallow-ignore-next-line complexity
   useEffect(() => {
     if (!elementId) return;
+    const sourceAnimations = animations.filter(
+      (animation) =>
+        animation.propertyGroup && (animation.keyframes || synthesizeFlatTweenKeyframes(animation)),
+    );
+    if (sourceAnimations.length > 0)
+      writeGsapAnimationsForElement(sourceFile, elementId, sourceAnimations);
 
     // Resolve the element's time range from the player store so we can
     // convert tween-relative keyframe percentages to clip-relative ones.
@@ -340,7 +347,11 @@ export function useGsapAnimationsForElement(
     );
 
     const allKeyframes: Array<
-      GsapKeyframesData["keyframes"][0] & { tweenPercentage?: number; propertyGroup?: string }
+      GsapKeyframesData["keyframes"][0] & {
+        tweenPercentage?: number;
+        propertyGroup?: string;
+        animationId?: string;
+      }
     > = [];
     let format: GsapKeyframesData["format"] = "percentage";
     let ease: string | undefined;
@@ -378,6 +389,7 @@ export function useGsapAnimationsForElement(
           percentage: clipPct,
           tweenPercentage: k.percentage,
           propertyGroup: anim.propertyGroup,
+          animationId: anim.id,
         });
       }
       format = kf.format;
@@ -459,6 +471,7 @@ export function usePopulateKeyframeCacheForFile(
       const { elements, domClipChildren } = usePlayerStore.getState();
       const doc = iframeRef?.current?.contentDocument;
       const mergedByElement = new Map<string, GsapKeyframesData>();
+      const sourceByElement = new Map<string, GsapAnimation[]>();
       for (const anim of parsed.animations) {
         if (anim.hasUnresolvedKeyframes) continue;
         // Position-only static holds are not keyframed animations — skip them so
@@ -479,12 +492,16 @@ export function usePopulateKeyframeCacheForFile(
         // Attribute the tween to every element it animates (handles class /
         // group / descendant selectors, not just `#id`).
         for (const id of resolveSelectorElementIds(anim.targetSelector, doc)) {
+          // kfData is already resolved (real keyframes OR a synthesized flat
+          // tween), so a grouped flat tween joins the store like a keyframed one.
+          if (anim.propertyGroup) {
+            sourceByElement.set(id, [...(sourceByElement.get(id) ?? []), anim]);
+          }
           const { elStart, elDuration } = resolveClipTimingBasis(id, sf, elements, domClipChildren);
           const clipKeyframes = kfData.keyframes.map((kf) => {
             const absTime = toAbsoluteTime(tweenPos, tweenDur, kf.percentage);
-            // 0.001% precision (matching useGsapAnimationsForElement above) so a
-            // beat-snapped keyframe centers exactly on the beat dot and the two
-            // caches agree on a keyframe's percentage.
+            // 0.001% precision (see useGsapAnimationsForElement) so a beat-snapped
+            // keyframe centers on the beat dot and both caches agree.
             const clipPct =
               elDuration > 0
                 ? Math.round(((absTime - elStart) / elDuration) * 100000) / 1000
@@ -494,6 +511,7 @@ export function usePopulateKeyframeCacheForFile(
               percentage: clipPct,
               tweenPercentage: kf.percentage,
               propertyGroup: anim.propertyGroup,
+              animationId: anim.id, // parity with other cache writers; inline ease needs it
             };
           });
           const existing = mergedByElement.get(id);
@@ -508,6 +526,7 @@ export function usePopulateKeyframeCacheForFile(
         setKeyframeCache(`${sf}#${id}`, kfData);
         setKeyframeCache(id, kfData);
         if (sf !== "index.html") setKeyframeCache(`index.html#${id}`, kfData);
+        writeGsapAnimationsForElement(sf, id, sourceByElement.get(id));
       }
       astFetchDoneRef.current = fetchKey;
     });
diff --git a/packages/studio/src/hooks/useRenderClipContent.test.ts b/packages/studio/src/hooks/useRenderClipContent.test.ts
index 057cf04824..afee7e5792 100644
--- a/packages/studio/src/hooks/useRenderClipContent.test.ts
+++ b/packages/studio/src/hooks/useRenderClipContent.test.ts
@@ -5,13 +5,14 @@ import { createRoot } from "react-dom/client";
 import { afterEach, describe, expect, it } from "vitest";
 import { CompositionThumbnail, VideoThumbnail } from "../player";
 import { AudioWaveform } from "../player/components/AudioWaveform";
-import type { TimelineElement } from "../player/store/playerStore";
+import { usePlayerStore, type TimelineElement } from "../player/store/playerStore";
 import { normalizeCompositionSrc } from "./useRenderClipContent";
 import { useRenderClipContent } from "./useRenderClipContent";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
 afterEach(() => {
+  usePlayerStore.setState({ thumbnailsEnabled: false });
   document.body.innerHTML = "";
 });
 
@@ -106,6 +107,8 @@ describe("useRenderClipContent", () => {
   });
 
   it("passes empty labels to thumbnail content so TimelineClip owns clip names", () => {
+    usePlayerStore.setState({ thumbnailsEnabled: true });
+
     const cases: Array<{ content: ReactNode; type: unknown }> = [
       {
         content: renderClipContent({
diff --git a/packages/studio/src/hooks/useRenderClipContent.ts b/packages/studio/src/hooks/useRenderClipContent.ts
index 0e01c381fa..b3c7dc079a 100644
--- a/packages/studio/src/hooks/useRenderClipContent.ts
+++ b/packages/studio/src/hooks/useRenderClipContent.ts
@@ -5,6 +5,7 @@ import type { TimelineElement } from "../player";
 import { AudioWaveform } from "../player/components/AudioWaveform";
 import { ImageThumbnail } from "../player/components/ImageThumbnail";
 import { encodePreviewPath, resolveMediaPreviewUrl } from "../player/components/thumbnailUtils";
+import { usePlayerStore } from "../player/store/playerStore";
 
 export function normalizeCompositionSrc(
   compSrc: string,
@@ -87,6 +88,9 @@ export function useRenderClipContent({
   activePreviewUrl,
   effectiveTimelineDuration,
 }: UseRenderClipContentOptions) {
+  // Self-sourced (not threaded via App) so the toggle gates generation without
+  // App.tsx plumbing. Off by default -> plain clip bars, snappy timeline (#2428).
+  const thumbnailsEnabled = usePlayerStore((s) => s.thumbnailsEnabled);
   return useCallback(
     // Pre-existing clip-content dispatcher; reduced by extracting renderAudioClip.
     // fallow-ignore-next-line complexity
@@ -94,6 +98,12 @@ export function useRenderClipContent({
       const pid = projectIdRef.current;
       if (!pid) return null;
 
+      // Thumbnail generation disabled (perf) -> plain clip bars. Audio still shows
+      // its waveform (cheap, not a frame thumbnail). Toggle: timeline toolbar.
+      if (!thumbnailsEnabled) {
+        return el.tag === "audio" ? renderAudioClip(el, pid, style.label) : null;
+      }
+
       let compSrc = el.compositionSrc;
       if (compSrc) {
         compSrc = normalizeCompositionSrc(compSrc, pid, window.location.origin);
@@ -182,6 +192,6 @@ export function useRenderClipContent({
 
       return null;
     },
-    [projectIdRef, compIdToSrc, activePreviewUrl, effectiveTimelineDuration],
+    [projectIdRef, compIdToSrc, activePreviewUrl, effectiveTimelineDuration, thumbnailsEnabled],
   );
 }
diff --git a/packages/studio/src/hooks/useStudioContextValue.test.ts b/packages/studio/src/hooks/useStudioContextValue.test.ts
new file mode 100644
index 0000000000..01228d92ed
--- /dev/null
+++ b/packages/studio/src/hooks/useStudioContextValue.test.ts
@@ -0,0 +1,93 @@
+// @vitest-environment happy-dom
+
+import React from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import type { DomEditSelection } from "../components/editor/domEditing";
+import type { RightInspectorPanes } from "../utils/studioHelpers";
+import { makeSelection } from "./domSelectionTestHarness";
+import { useInspectorState, type InspectorState } from "./useStudioContextValue";
+
+interface HarnessProps {
+  rightPanelTab: string;
+  rightInspectorPanes: RightInspectorPanes;
+  rightCollapsed: boolean;
+  isPlaying: boolean;
+  isGestureRecording: boolean;
+  domEditSelection: DomEditSelection | null;
+}
+
+function renderInspectorState(props: HarnessProps): InspectorState {
+  let state: InspectorState | null = null;
+
+  function Harness() {
+    state = useInspectorState(
+      props.rightPanelTab,
+      props.rightInspectorPanes,
+      props.rightCollapsed,
+      props.isPlaying,
+      props.domEditSelection,
+      props.isGestureRecording,
+    );
+    return null;
+  }
+
+  renderToStaticMarkup(React.createElement(Harness));
+  if (!state) throw new Error("Expected inspector state");
+  return state;
+}
+
+function selectedProps(
+  overrides: Partial<HarnessProps> = {},
+): HarnessProps & { domEditSelection: DomEditSelection } {
+  const element = document.createElement("div");
+  return {
+    rightPanelTab: "renders",
+    rightInspectorPanes: { layers: false, design: false },
+    rightCollapsed: true,
+    isPlaying: false,
+    isGestureRecording: false,
+    domEditSelection: makeSelection("Selected", element),
+    ...overrides,
+  };
+}
+
+describe("useInspectorState", () => {
+  it("shows the motion path for pure selection with the inspector collapsed", () => {
+    expect(renderInspectorState(selectedProps()).shouldShowMotionPath).toBe(true);
+  });
+
+  it("hides the motion path without a selection", () => {
+    expect(
+      renderInspectorState({ ...selectedProps(), domEditSelection: null }).shouldShowMotionPath,
+    ).toBe(false);
+  });
+
+  it("hides the motion path during playback", () => {
+    expect(renderInspectorState(selectedProps({ isPlaying: true })).shouldShowMotionPath).toBe(
+      false,
+    );
+  });
+
+  it("hides the motion path during gesture recording", () => {
+    expect(
+      renderInspectorState(selectedProps({ isGestureRecording: true })).shouldShowMotionPath,
+    ).toBe(false);
+  });
+
+  it("keeps selected DOM bounds coupled to the inspector or variables panel", () => {
+    expect(renderInspectorState(selectedProps()).shouldShowSelectedDomBounds).toBe(false);
+    expect(
+      renderInspectorState(
+        selectedProps({
+          rightPanelTab: "design",
+          rightInspectorPanes: { layers: false, design: true },
+        }),
+      ).shouldShowSelectedDomBounds,
+    ).toBe(true);
+    expect(
+      renderInspectorState(selectedProps({ rightPanelTab: "variables" }))
+        .shouldShowSelectedDomBounds,
+    ).toBe(true);
+  });
+});
diff --git a/packages/studio/src/hooks/useStudioContextValue.ts b/packages/studio/src/hooks/useStudioContextValue.ts
index 460028bdfb..21ba371f73 100644
--- a/packages/studio/src/hooks/useStudioContextValue.ts
+++ b/packages/studio/src/hooks/useStudioContextValue.ts
@@ -1,5 +1,6 @@
 import { useCallback, useMemo, useRef, useState, type DragEvent } from "react";
 import { STUDIO_INSPECTOR_PANELS_ENABLED } from "../components/editor/manualEditingAvailability";
+import type { DomEditSelection } from "../components/editor/domEditing";
 import type { StudioContextValue } from "../contexts/StudioContext";
 import type { RightInspectorPanes } from "../utils/studioHelpers";
 import type { TimelineFileDropHandler } from "./useTimelineEditingTypes";
@@ -69,6 +70,7 @@ export interface InspectorState {
   designPanelActive: boolean;
   inspectorPanelActive: boolean;
   inspectorButtonActive: boolean;
+  shouldShowMotionPath: boolean;
   shouldShowSelectedDomBounds: boolean;
 }
 
@@ -77,6 +79,7 @@ export function useInspectorState(
   rightInspectorPanes: RightInspectorPanes,
   rightCollapsed: boolean,
   isPlaying: boolean,
+  domEditSelection: DomEditSelection | null,
   isGestureRecording?: boolean,
 ): InspectorState {
   // fallow-ignore-next-line complexity
@@ -93,8 +96,9 @@ export function useInspectorState(
       inspectorPanelActive,
       inspectorButtonActive:
         STUDIO_INSPECTOR_PANELS_ENABLED && !rightCollapsed && inspectorPanelActive,
-      // Keep the selection box + motion path drawn even when the Inspector is
-      // collapsed — closing the panel shouldn't visually deselect the element.
+      shouldShowMotionPath: !!domEditSelection && !isPlaying && !isGestureRecording,
+      // Keep the selection box drawn even when the Inspector is collapsed —
+      // closing the panel shouldn't visually deselect the element.
       // The Variables tab also works against the canvas selection (bind card),
       // so the selection outline stays visible there too.
       shouldShowSelectedDomBounds:
@@ -102,7 +106,14 @@ export function useInspectorState(
         !isPlaying &&
         !isGestureRecording,
     };
-  }, [rightPanelTab, rightInspectorPanes, rightCollapsed, isPlaying, isGestureRecording]);
+  }, [
+    rightPanelTab,
+    rightInspectorPanes,
+    rightCollapsed,
+    isPlaying,
+    isGestureRecording,
+    domEditSelection,
+  ]);
 }
 
 // fallow-ignore-next-line complexity
diff --git a/packages/studio/src/hooks/useStudioTestHooks.ts b/packages/studio/src/hooks/useStudioTestHooks.ts
new file mode 100644
index 0000000000..a00e01a455
--- /dev/null
+++ b/packages/studio/src/hooks/useStudioTestHooks.ts
@@ -0,0 +1,51 @@
+import { useEffect } from "react";
+import type { DomEditSelection } from "../components/editor/domEditing";
+
+interface StudioTestHookDeps {
+  previewIframeRef: React.MutableRefObject<HTMLIFrameElement | null>;
+  buildDomSelectionFromTarget: (target: HTMLElement) => Promise<DomEditSelection | null>;
+  applyDomSelection: (
+    selection: DomEditSelection | null,
+    options?: { revealPanel?: boolean },
+  ) => void;
+}
+
+/**
+ * Dev-only headless-QA shortcut. Selecting an element normally requires a
+ * pixel-precise click inside the preview iframe, which automated verification
+ * can't reliably land. `window.__studioTest.selectByDomId(id)` resolves the
+ * DomEditSelection for a preview element by id and reveals the inspector —
+ * exactly what a click does — so a driver can open the property/ease panels and
+ * then focus a segment via `__playerStore.getState().setFocusedEaseSegment`.
+ * No-op in production builds.
+ */
+export function useStudioTestHooks({
+  previewIframeRef,
+  buildDomSelectionFromTarget,
+  applyDomSelection,
+}: StudioTestHookDeps): void {
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    let isDev = false;
+    try {
+      isDev = import.meta.env.DEV === true;
+    } catch {
+      isDev = false;
+    }
+    if (!isDev || typeof window === "undefined") return;
+    const api = {
+      selectByDomId: async (id: string): Promise<boolean> => {
+        const element = previewIframeRef.current?.contentDocument?.getElementById(id) ?? null;
+        if (!element) return false;
+        const selection = await buildDomSelectionFromTarget(element);
+        if (!selection) return false;
+        applyDomSelection(selection, { revealPanel: true });
+        return true;
+      },
+    };
+    (window as unknown as { __studioTest?: typeof api }).__studioTest = api;
+    return () => {
+      (window as unknown as { __studioTest?: typeof api }).__studioTest = undefined;
+    };
+  }, [applyDomSelection, buildDomSelectionFromTarget, previewIframeRef]);
+}
diff --git a/packages/studio/src/player/components/KeyframeDiamondContextMenu.tsx b/packages/studio/src/player/components/KeyframeDiamondContextMenu.tsx
index 34a1cc41ff..e40f0c295b 100644
--- a/packages/studio/src/player/components/KeyframeDiamondContextMenu.tsx
+++ b/packages/studio/src/player/components/KeyframeDiamondContextMenu.tsx
@@ -8,18 +8,32 @@ export interface KeyframeDiamondContextMenuState {
   elementId: string;
   percentage: number;
   tweenPercentage?: number;
+  propertyGroup?: string;
+  animationId?: string;
   currentEase?: string;
 }
 
 interface KeyframeDiamondContextMenuProps {
   state: KeyframeDiamondContextMenuState;
   onClose: () => void;
-  onDelete: (elementId: string, percentage: number) => void;
+  onDelete: (
+    elementId: string,
+    percentage: number,
+    propertyGroup?: string,
+    tweenPercentage?: number,
+    animationId?: string,
+  ) => void;
   onDeleteAll: (elementId: string) => void;
   onChangeEase?: (elementId: string, percentage: number, ease: string) => void;
   onCopyProperties?: (elementId: string, percentage: number) => void;
   /** Retime the keyframe to the current playhead, preserving its value + ease. */
-  onMoveToPlayhead?: (elementId: string, fromPercentage: number) => void;
+  onMoveToPlayhead?: (
+    elementId: string,
+    fromPercentage: number,
+    propertyGroup?: string,
+    tweenPercentage?: number,
+    animationId?: string,
+  ) => void;
 }
 
 export const KeyframeDiamondContextMenu = memo(function KeyframeDiamondContextMenu({
@@ -51,7 +65,13 @@ export const KeyframeDiamondContextMenu = memo(function KeyframeDiamondContextMe
             // Pass clip-% — resolveKeyframeTarget keys the cache lookup on clip-%
             // and returns the tween-% for the mutation. Passing tween-% here would
             // miss the lookup on any tween whose window is shorter than the clip.
-            onMoveToPlayhead(state.elementId, state.percentage);
+            onMoveToPlayhead(
+              state.elementId,
+              state.percentage,
+              state.propertyGroup,
+              state.tweenPercentage,
+              state.animationId,
+            );
             onClose();
           }}
         >
@@ -64,7 +84,13 @@ export const KeyframeDiamondContextMenu = memo(function KeyframeDiamondContextMe
         type="button"
         className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-red-400 hover:bg-neutral-800 cursor-pointer text-left"
         onClick={() => {
-          onDelete(state.elementId, state.percentage);
+          onDelete(
+            state.elementId,
+            state.percentage,
+            state.propertyGroup,
+            state.tweenPercentage,
+            state.animationId,
+          );
           onClose();
         }}
       >
diff --git a/packages/studio/src/player/components/LayerDisclosureRow.tsx b/packages/studio/src/player/components/LayerDisclosureRow.tsx
new file mode 100644
index 0000000000..b630482d69
--- /dev/null
+++ b/packages/studio/src/player/components/LayerDisclosureRow.tsx
@@ -0,0 +1,56 @@
+import { CaretRight } from "@phosphor-icons/react";
+import type { TimelineElement } from "../store/playerStore";
+import { LABEL_COL_W, TRACK_H } from "./timelineLayout";
+
+// Layer row (Figma order: disclosure ▸/▾, diamond, name) — the disclosure lives
+// here, not on the clip bar, and re-expands a collapsed layer.
+export function LayerDisclosureRow({
+  keyframeClip,
+  isExpanded,
+  gutterBackground,
+  onToggleClipExpanded,
+}: {
+  keyframeClip: TimelineElement;
+  isExpanded: boolean;
+  gutterBackground: string;
+  onToggleClipExpanded: () => void;
+}) {
+  const name = keyframeClip.label ?? keyframeClip.domId ?? keyframeClip.id;
+  return (
+    <div
+      className="absolute left-0 top-0 flex items-center gap-1.5 overflow-hidden px-1.5 text-[11px]"
+      style={{
+        width: LABEL_COL_W,
+        height: TRACK_H,
+        color: "#ffffff",
+        background: gutterBackground,
+      }}
+    >
+      <button
+        type="button"
+        aria-label={`${isExpanded ? "Collapse" : "Expand"} ${name} keyframes`}
+        title={`${isExpanded ? "Collapse" : "Expand"} keyframe lanes`}
+        className="flex h-5 w-4 shrink-0 items-center justify-center rounded border-0 bg-transparent p-0 text-white/55 hover:text-white focus-visible:outline focus-visible:outline-1 focus-visible:outline-[#3CE6AC]"
+        onPointerDown={(event) => event.stopPropagation()}
+        onClick={(event) => {
+          event.stopPropagation();
+          onToggleClipExpanded();
+        }}
+      >
+        <CaretRight
+          size={11}
+          weight="bold"
+          aria-hidden="true"
+          style={{ transform: isExpanded ? "rotate(90deg)" : undefined }}
+        />
+      </button>
+      <span
+        aria-label="Layer keyframe indicator"
+        className="shrink-0 text-[13px] leading-none text-white/40"
+      >
+        ◇
+      </span>
+      <span className="min-w-0 flex-1 truncate font-medium">{name}</span>
+    </div>
+  );
+}
diff --git a/packages/studio/src/player/components/Timeline.test.ts b/packages/studio/src/player/components/Timeline.test.ts
index e3db29f4a3..410507d4c7 100644
--- a/packages/studio/src/player/components/Timeline.test.ts
+++ b/packages/studio/src/player/components/Timeline.test.ts
@@ -19,8 +19,11 @@ import {
   shouldAutoScrollTimeline,
 } from "./Timeline";
 import {
+  CLIP_Y,
   FIT_ZOOM_HEADROOM,
   GUTTER,
+  LABEL_COL_W,
+  LANE_H,
   MIN_TIMELINE_EXTENT_S,
   PLAYHEAD_HEAD_W,
   RULER_H,
@@ -28,6 +31,7 @@ import {
   TRACKS_LEFT_PAD,
   getTimelineDisplayContentWidth,
   getTimelineFitPps,
+  getTimelineLaneTop,
 } from "./timelineLayout";
 import { formatTime } from "../lib/time";
 import { usePlayerStore } from "../store/playerStore";
@@ -40,7 +44,178 @@ afterEach(() => {
   usePlayerStore.getState().reset();
 });
 
+function getHorizontalGeometry(host: HTMLElement, clipId: string, tickLabel: string) {
+  const clip = host.querySelector<HTMLElement>(`[data-el-id="${clipId}"]`);
+  if (!clip) throw new Error(`Missing timeline clip ${clipId}`);
+  const trackContent = clip.parentElement;
+  if (!trackContent) throw new Error(`Missing content row for ${clipId}`);
+  const trackHeader = trackContent.previousElementSibling;
+  if (!(trackHeader instanceof HTMLElement)) throw new Error(`Missing track header for ${clipId}`);
+  const rulerTickLabel = Array.from(host.querySelectorAll("span")).find(
+    (node) => node.textContent === tickLabel,
+  );
+  const rulerTick = rulerTickLabel?.parentElement;
+  if (!rulerTick) throw new Error(`Missing ruler tick ${tickLabel}`);
+  const ruler = rulerTick.parentElement;
+  if (!ruler) throw new Error("Missing timeline ruler");
+  const rulerOrigin = ruler.previousElementSibling;
+  if (!(rulerOrigin instanceof HTMLElement)) throw new Error("Missing timeline ruler origin");
+  const playhead = Array.from(host.querySelectorAll<HTMLElement>("div")).find(
+    (node) => node.style.zIndex === "100",
+  );
+  if (!playhead) throw new Error("Missing timeline playhead");
+  return { clip, trackHeader, rulerTick, rulerOrigin, playhead };
+}
+
+function renderTimelineGeometry(clipId: string) {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  act(() => {
+    root.render(React.createElement(Timeline));
+  });
+  return { host, root, ...getHorizontalGeometry(host, clipId, "00:10") };
+}
+
 describe("Timeline provider boundary", () => {
+  it("keeps all-collapsed horizontal positions at the 32px gutter", () => {
+    usePlayerStore.setState({
+      duration: 11,
+      timelineReady: true,
+      currentTime: 10,
+      zoomMode: "manual",
+      manualZoomPercent: 100,
+      elements: [{ id: "clip-1", tag: "div", start: 10, duration: 1, track: 0 }],
+    });
+
+    const { root, clip, trackHeader, rulerTick, rulerOrigin, playhead } =
+      renderTimelineGeometry("clip-1");
+
+    expect(trackHeader.style.width).toBe("32px");
+    expect(clip.style.left).toBe("1000px");
+    expect(clip.style.height).toBe("");
+    expect(clip.style.bottom).toBe(`${CLIP_Y}px`);
+    expect(rulerOrigin.style.width).toBe("32px");
+    expect(rulerTick.style.left).toBe("999.5px");
+    expect(playhead.style.left).toBe(`${1032 - PLAYHEAD_HEAD_W / 2}px`);
+    expect(playhead.style.width).toBe(`${PLAYHEAD_HEAD_W}px`);
+    expect(
+      resolveTimelineAssetDrop(
+        {
+          rectLeft: 100,
+          rectTop: 0,
+          scrollLeft: 0,
+          scrollTop: 0,
+          contentOrigin: GUTTER,
+          pixelsPerSecond: 100,
+          duration: 60,
+          trackOrder: [0],
+        },
+        1132,
+        100,
+      ).start,
+    ).toBe(10);
+    expect(getTimelineFitPps(640, 11, GUTTER)).toBe(10.1);
+
+    act(() => root.unmount());
+  });
+
+  it("reserves the label column and keeps expanded keyframes aligned with ruler time", () => {
+    usePlayerStore.setState({
+      duration: 20,
+      timelineReady: true,
+      currentTime: 10,
+      zoomMode: "manual",
+      manualZoomPercent: 100,
+      selectedElementId: "clip-1",
+      expandedClipIds: new Set(["clip-1"]),
+      elements: [
+        { id: "clip-1", label: "Hero card", tag: "div", start: 0, duration: 20, track: 0 },
+        { id: "clip-2", label: "Outro", tag: "div", start: 2, duration: 1, track: 1 },
+      ],
+      gsapAnimations: new Map([
+        [
+          "clip-1",
+          [
+            {
+              id: "position-tween",
+              targetSelector: "#clip-1",
+              method: "to",
+              position: 0,
+              duration: 20,
+              properties: {},
+              propertyGroup: "position",
+              keyframes: {
+                format: "percentage",
+                keyframes: [{ percentage: 50, properties: { x: 100 } }],
+              },
+            },
+          ],
+        ],
+      ]),
+    });
+
+    const { host, root, clip, trackHeader, rulerTick, rulerOrigin, playhead } =
+      renderTimelineGeometry("clip-1");
+    const { trackHeader: collapsedHeader } = getHorizontalGeometry(host, "clip-2", "00:10");
+    const diamond = host.querySelector<HTMLElement>(
+      '[data-keyframe-group="position"][data-keyframe-percentage="50"]',
+    );
+    if (!diamond) throw new Error("Missing expanded position keyframe");
+    const propertyLane = diamond.closest<HTMLElement>("[data-timeline-property-lane]");
+    if (!propertyLane) throw new Error("Missing flat position property lane");
+    const headerLane = trackHeader.querySelector<HTMLElement>('[data-property-group="position"]');
+    if (!headerLane) throw new Error("Missing position property header");
+    // Absolute x rebuilds from the content origin (the ruler-origin spacer),
+    // which now insets a GUTTER past the LABEL_COL_W label column so a 0%
+    // diamond has room to its left. The content row reaches that same origin via
+    // header (LABEL_COL_W) + its gutter margin, so ruler tick and diamond still
+    // coincide on the shared time x.
+    const contentOrigin = Number.parseFloat(rulerOrigin.style.width);
+    const rulerX = contentOrigin + Number.parseFloat(rulerTick.style.left) + 0.5;
+    const diamondX =
+      contentOrigin +
+      Number.parseFloat(propertyLane.style.left) +
+      Number.parseFloat(diamond.style.left) +
+      Number.parseFloat(diamond.style.width) / 2;
+
+    expect(clip.contains(propertyLane)).toBe(false);
+    expect(clip.style.height).toBe(`${TRACK_H - 2 * CLIP_Y}px`);
+    expect(clip.style.bottom).toBe("");
+    expect(propertyLane.style.top).toBe(`${getTimelineLaneTop(0)}px`);
+    expect(propertyLane.style.top).toBe(headerLane.style.top);
+    expect(propertyLane.style.background).toBe("");
+    expect(propertyLane.style.border).toBe("");
+    expect(propertyLane.style.borderRadius).toBe("");
+    expect(trackHeader.style.width).toBe(`${LABEL_COL_W}px`);
+    expect(rulerOrigin.style.width).toBe(`${LABEL_COL_W + GUTTER}px`);
+    expect(playhead.style.left).toBe(`${LABEL_COL_W + GUTTER + 1000 - PLAYHEAD_HEAD_W / 2}px`);
+    expect(diamondX).toBe(rulerX);
+    expect(rulerX).toBe(LABEL_COL_W + GUTTER + 1000);
+    expect(collapsedHeader.textContent).toContain("Outro");
+    expect(getTimelineFitPps(640, 20, LABEL_COL_W + GUTTER)).toBeCloseTo(
+      (640 - (LABEL_COL_W + GUTTER) - 2) / MIN_TIMELINE_EXTENT_S,
+    );
+    expect(
+      resolveTimelineAssetDrop(
+        {
+          rectLeft: 100,
+          rectTop: 0,
+          scrollLeft: 0,
+          scrollTop: 0,
+          contentOrigin: LABEL_COL_W + GUTTER,
+          pixelsPerSecond: 100,
+          duration: 60,
+          trackOrder: [0],
+        },
+        100 + LABEL_COL_W + GUTTER + 1000,
+        100,
+      ).start,
+    ).toBe(10);
+
+    act(() => root.unmount());
+  });
+
   // fallow-ignore-next-line code-duplication
   it("renders the public Timeline export without TimelineEditProvider", () => {
     const host = document.createElement("div");
@@ -153,8 +328,8 @@ describe("Timeline provider boundary", () => {
     });
 
     const row = button.parentElement?.parentElement;
-    // Row children: [sticky gutter, TRACKS_LEFT_PAD spacer, time-mapped content].
-    const trackContent = row?.children.item(2);
+    // Row children: [TimelineTrackHeader (sticky column), time-mapped content].
+    const trackContent = row?.children.item(1);
     expect(onToggleTrackHidden).toHaveBeenCalledWith(0, false);
     expect(trackContent).toBeInstanceOf(HTMLElement);
     if (!(trackContent instanceof HTMLElement)) {
@@ -215,6 +390,106 @@ describe("Timeline provider boundary", () => {
     act(() => root.unmount());
   });
 
+  it("shows a disclosure only for grouped keyframes and toggles the track height", () => {
+    const host = document.createElement("div");
+    document.body.append(host);
+    Object.defineProperty(host, "clientWidth", {
+      configurable: true,
+      value: 720,
+    });
+
+    usePlayerStore.setState({
+      duration: 4,
+      timelineReady: true,
+      elements: [
+        { id: "clip-1", tag: "div", start: 0, duration: 2, track: 0 },
+        { id: "clip-2", tag: "div", start: 2, duration: 2, track: 1 },
+      ],
+      keyframeCache: new Map([
+        [
+          "clip-1",
+          {
+            format: "percentage",
+            keyframes: [
+              { percentage: 0, properties: { x: 0 }, propertyGroup: "position" },
+              { percentage: 50, properties: { x: 100 }, propertyGroup: "position" },
+              { percentage: 100, properties: { opacity: 0 }, propertyGroup: "visual" },
+            ],
+          },
+        ],
+      ]),
+      gsapAnimations: new Map([
+        [
+          "clip-1",
+          [
+            {
+              id: "clip-1-position",
+              targetSelector: "#clip-1",
+              method: "to",
+              position: 0,
+              duration: 2,
+              properties: {},
+              propertyGroup: "position",
+              keyframes: {
+                format: "percentage",
+                keyframes: [
+                  { percentage: 0, properties: { x: 0 } },
+                  { percentage: 50, properties: { x: 100 } },
+                ],
+              },
+            },
+            {
+              id: "clip-1-visual",
+              targetSelector: "#clip-1",
+              method: "to",
+              position: 0,
+              duration: 2,
+              properties: {},
+              propertyGroup: "visual",
+              keyframes: {
+                format: "percentage",
+                keyframes: [{ percentage: 100, properties: { opacity: 0 } }],
+              },
+            },
+          ],
+        ],
+      ]),
+    });
+
+    const root = createRoot(host);
+    act(() => {
+      root.render(React.createElement(Timeline));
+    });
+
+    // Keyframed clip-1 is expanded by default (AE/Figma default); its disclosure
+    // lives in the left column. clip-2 has no keyframes so it never shows one.
+    const collapseButton = host.querySelector<HTMLButtonElement>(
+      'button[aria-label="Collapse clip-1 keyframes"]',
+    );
+    expect(collapseButton).not.toBeNull();
+    expect(host.querySelector('button[aria-label="Expand clip-2 keyframes"]')).toBeNull();
+    expect(host.querySelector('button[aria-label="Collapse clip-2 keyframes"]')).toBeNull();
+
+    const clip = host.querySelector<HTMLElement>('[data-el-id="clip-1"]');
+    const row = clip?.parentElement?.parentElement;
+    expect(usePlayerStore.getState().expandedClipIds).toEqual(new Set(["clip-1"]));
+    expect(row?.style.height).toBe(`${TRACK_H + 2 * LANE_H}px`);
+
+    // Collapsing sticks (does not bounce back open via auto-expand).
+    act(() => collapseButton?.click());
+    expect(usePlayerStore.getState().expandedClipIds).toEqual(new Set());
+    expect(row?.style.height).toBe(`${TRACK_H}px`);
+
+    const expandButton = host.querySelector<HTMLButtonElement>(
+      'button[aria-label="Expand clip-1 keyframes"]',
+    );
+    expect(expandButton).not.toBeNull();
+    act(() => expandButton?.click());
+    expect(usePlayerStore.getState().expandedClipIds).toEqual(new Set(["clip-1"]));
+    expect(row?.style.height).toBe(`${TRACK_H + 2 * LANE_H}px`);
+    act(() => root.unmount());
+  });
+
   it("marks every clip in selectedElementIds as selected", () => {
     const host = document.createElement("div");
     document.body.append(host);
@@ -461,23 +736,29 @@ describe("getTimelineFitPps (min 60s extent + fit headroom)", () => {
   it("computes fit pps against the 60s floor for short compositions", () => {
     // A 10s comp maps 60s onto the viewport → the comp takes ~1/6 of the width.
     // (10 * 1.2 = 12s of headroom-padded content is still under the 60s floor.)
-    const pps = getTimelineFitPps(viewport, 10);
-    expect(pps).toBeCloseTo((viewport - GUTTER - TRACKS_LEFT_PAD - 2) / MIN_TIMELINE_EXTENT_S);
-    expect(10 * pps).toBeCloseTo((viewport - GUTTER - TRACKS_LEFT_PAD - 2) / 6);
+    const pps = getTimelineFitPps(viewport, 10, GUTTER + TRACKS_LEFT_PAD);
+    expect(pps).toBeCloseTo((viewport - (GUTTER + TRACKS_LEFT_PAD) - 2) / MIN_TIMELINE_EXTENT_S);
+    expect(10 * pps).toBeCloseTo((viewport - (GUTTER + TRACKS_LEFT_PAD) - 2) / 6);
   });
 
   it("fits duration * FIT_ZOOM_HEADROOM (not the bare duration) for long compositions", () => {
-    expect(getTimelineFitPps(viewport, 60)).toBeCloseTo(
-      (viewport - GUTTER - TRACKS_LEFT_PAD - 2) / (60 * FIT_ZOOM_HEADROOM),
+    expect(getTimelineFitPps(viewport, 60, GUTTER + TRACKS_LEFT_PAD)).toBeCloseTo(
+      (viewport - (GUTTER + TRACKS_LEFT_PAD) - 2) / (60 * FIT_ZOOM_HEADROOM),
+    );
+    expect(getTimelineFitPps(viewport, 120, GUTTER + TRACKS_LEFT_PAD)).toBeCloseTo(
+      (viewport - (GUTTER + TRACKS_LEFT_PAD) - 2) / (120 * FIT_ZOOM_HEADROOM),
     );
-    expect(getTimelineFitPps(viewport, 120)).toBeCloseTo(
-      (viewport - GUTTER - TRACKS_LEFT_PAD - 2) / (120 * FIT_ZOOM_HEADROOM),
+  });
+
+  it("subtracts the expanded keyframe label column before fitting headroom", () => {
+    expect(getTimelineFitPps(viewport, 120, LABEL_COL_W)).toBeCloseTo(
+      (viewport - LABEL_COL_W - 2) / (120 * FIT_ZOOM_HEADROOM),
     );
   });
 
   it("leaves CapCut-style trailing headroom: the comp ends at 1/1.2 of the usable width", () => {
-    const usable = viewport - GUTTER - TRACKS_LEFT_PAD - 2;
-    const pps = getTimelineFitPps(viewport, 120);
+    const usable = viewport - (GUTTER + TRACKS_LEFT_PAD) - 2;
+    const pps = getTimelineFitPps(viewport, 120, GUTTER + TRACKS_LEFT_PAD);
     // Composition content occupies usable/1.2 px; the remaining ~17% is empty
     // droppable ruler/lane surface past the end.
     expect(120 * pps).toBeCloseTo(usable / FIT_ZOOM_HEADROOM);
@@ -485,17 +766,17 @@ describe("getTimelineFitPps (min 60s extent + fit headroom)", () => {
   });
 
   it("falls back to 100 pps before the viewport is measured", () => {
-    expect(getTimelineFitPps(0, 10)).toBe(100);
-    expect(getTimelineFitPps(GUTTER + TRACKS_LEFT_PAD, 10)).toBe(100);
-    expect(getTimelineFitPps(Number.NaN, 10)).toBe(100);
+    expect(getTimelineFitPps(0, 10, GUTTER)).toBe(100);
+    expect(getTimelineFitPps(GUTTER, 10, GUTTER)).toBe(100);
+    expect(getTimelineFitPps(Number.NaN, 10, GUTTER)).toBe(100);
   });
 
   it("uses the floor for zero/invalid durations", () => {
-    expect(getTimelineFitPps(viewport, 0)).toBeCloseTo(
-      (viewport - GUTTER - TRACKS_LEFT_PAD - 2) / MIN_TIMELINE_EXTENT_S,
+    expect(getTimelineFitPps(viewport, 0, GUTTER + TRACKS_LEFT_PAD)).toBeCloseTo(
+      (viewport - (GUTTER + TRACKS_LEFT_PAD) - 2) / MIN_TIMELINE_EXTENT_S,
     );
-    expect(getTimelineFitPps(viewport, Number.NaN)).toBeCloseTo(
-      (viewport - GUTTER - TRACKS_LEFT_PAD - 2) / MIN_TIMELINE_EXTENT_S,
+    expect(getTimelineFitPps(viewport, Number.NaN, GUTTER + TRACKS_LEFT_PAD)).toBeCloseTo(
+      (viewport - (GUTTER + TRACKS_LEFT_PAD) - 2) / MIN_TIMELINE_EXTENT_S,
     );
   });
 });
@@ -504,14 +785,24 @@ describe("getTimelineDisplayContentWidth", () => {
   it("always spans at least MIN_TIMELINE_EXTENT_S seconds of content", () => {
     // 10s of content at 20 pps = 200px; the floor keeps 60s (1200px) rendered.
     expect(
-      getTimelineDisplayContentWidth({ trackContentWidth: 200, viewportWidth: 400, pps: 20 }),
+      getTimelineDisplayContentWidth({
+        trackContentWidth: 200,
+        viewportWidth: 400,
+        contentOrigin: GUTTER,
+        pps: 20,
+      }),
     ).toBe(MIN_TIMELINE_EXTENT_S * 20);
   });
 
   it("still fills the viewport when that is larger than the 60s floor", () => {
     expect(
-      getTimelineDisplayContentWidth({ trackContentWidth: 200, viewportWidth: 2000, pps: 5 }),
-    ).toBe(2000 - GUTTER - TRACKS_LEFT_PAD - 2);
+      getTimelineDisplayContentWidth({
+        trackContentWidth: 200,
+        viewportWidth: 2000,
+        contentOrigin: GUTTER + TRACKS_LEFT_PAD,
+        pps: 5,
+      }),
+    ).toBe(2000 - (GUTTER + TRACKS_LEFT_PAD) - 2);
   });
 
   it("tracks a drag ghost past every other bound (drag-to-extend)", () => {
@@ -519,6 +810,7 @@ describe("getTimelineDisplayContentWidth", () => {
       getTimelineDisplayContentWidth({
         trackContentWidth: 500,
         viewportWidth: 400,
+        contentOrigin: GUTTER,
         pps: 5,
         dragGhostEndPx: 5000,
       }),
@@ -530,6 +822,7 @@ describe("getTimelineDisplayContentWidth", () => {
       getTimelineDisplayContentWidth({
         trackContentWidth: 500,
         viewportWidth: 400,
+        contentOrigin: GUTTER,
         pps: 5,
         resizeGhostEndPx: 4200,
       }),
@@ -538,7 +831,12 @@ describe("getTimelineDisplayContentWidth", () => {
 
   it("keeps long content authoritative", () => {
     expect(
-      getTimelineDisplayContentWidth({ trackContentWidth: 9000, viewportWidth: 400, pps: 50 }),
+      getTimelineDisplayContentWidth({
+        trackContentWidth: 9000,
+        viewportWidth: 400,
+        contentOrigin: GUTTER,
+        pps: 50,
+      }),
     ).toBe(9000);
   });
 });
@@ -565,7 +863,7 @@ describe("getTimelineScrollLeftForZoomAnchor", () => {
       getTimelineScrollLeftForZoomAnchor({
         pointerX: 300,
         currentScrollLeft: 200,
-        gutter: 32,
+        contentOrigin: GUTTER,
         currentPixelsPerSecond: 10,
         nextPixelsPerSecond: 20,
         duration: 120,
@@ -578,7 +876,7 @@ describe("getTimelineScrollLeftForZoomAnchor", () => {
       getTimelineScrollLeftForZoomAnchor({
         pointerX: 300,
         currentScrollLeft: 0,
-        gutter: 32,
+        contentOrigin: GUTTER,
         currentPixelsPerSecond: 20,
         nextPixelsPerSecond: 5,
         duration: 120,
@@ -591,7 +889,7 @@ describe("getTimelineScrollLeftForZoomAnchor", () => {
       getTimelineScrollLeftForZoomAnchor({
         pointerX: 300,
         currentScrollLeft: 120,
-        gutter: 32,
+        contentOrigin: GUTTER,
         currentPixelsPerSecond: 0,
         nextPixelsPerSecond: 20,
         duration: 120,
@@ -601,28 +899,47 @@ describe("getTimelineScrollLeftForZoomAnchor", () => {
 });
 
 describe("getTimelinePlayheadLeft", () => {
-  it("offsets the wrapper by half the head width so the line CENTER = GUTTER + TRACKS_LEFT_PAD + t*pps", () => {
+  it("offsets the wrapper by half the head width so the line CENTER = contentOrigin + t*pps", () => {
     // Wrapper left + PLAYHEAD_HEAD_W/2 (where the 1px line is centered) must
-    // equal GUTTER + TRACKS_LEFT_PAD + t*pps at any zoom.
-    expect(getTimelinePlayheadLeft(4, 20) + PLAYHEAD_HEAD_W / 2).toBe(
+    // equal contentOrigin + t*pps at any zoom, for both the padded default
+    // origin and the plain gutter origin.
+    expect(getTimelinePlayheadLeft(4, 20, GUTTER + TRACKS_LEFT_PAD) + PLAYHEAD_HEAD_W / 2).toBe(
       GUTTER + TRACKS_LEFT_PAD + 4 * 20,
     );
-    expect(getTimelinePlayheadLeft(10, 7.5) + PLAYHEAD_HEAD_W / 2).toBe(
+    expect(getTimelinePlayheadLeft(10, 7.5, GUTTER + TRACKS_LEFT_PAD) + PLAYHEAD_HEAD_W / 2).toBe(
       GUTTER + TRACKS_LEFT_PAD + 75,
     );
+    expect(getTimelinePlayheadLeft(4, 20, GUTTER) + PLAYHEAD_HEAD_W / 2).toBe(GUTTER + 4 * 20);
+    expect(getTimelinePlayheadLeft(10, 7.5, GUTTER) + PLAYHEAD_HEAD_W / 2).toBe(GUTTER + 75);
+  });
+
+  it("uses the expanded keyframe label column as the playhead origin", () => {
+    expect(getTimelinePlayheadLeft(4, 20, LABEL_COL_W) + PLAYHEAD_HEAD_W / 2).toBe(
+      LABEL_COL_W + 4 * 20,
+    );
   });
 
   it("centers the line exactly on the left pad's end (the 00:00 tick) at t = 0", () => {
-    expect(getTimelinePlayheadLeft(0, 20) + PLAYHEAD_HEAD_W / 2).toBe(GUTTER + TRACKS_LEFT_PAD);
+    expect(getTimelinePlayheadLeft(0, 20, GUTTER + TRACKS_LEFT_PAD) + PLAYHEAD_HEAD_W / 2).toBe(
+      GUTTER + TRACKS_LEFT_PAD,
+    );
+  });
+
+  it("centers the line exactly on the gutter (the 00:00 tick) at t = 0", () => {
+    expect(getTimelinePlayheadLeft(0, 20, GUTTER) + PLAYHEAD_HEAD_W / 2).toBe(GUTTER);
   });
 
   it("guards invalid input", () => {
-    expect(getTimelinePlayheadLeft(Number.NaN, 20)).toBe(
+    expect(getTimelinePlayheadLeft(Number.NaN, 20, GUTTER + TRACKS_LEFT_PAD)).toBe(
       GUTTER + TRACKS_LEFT_PAD - PLAYHEAD_HEAD_W / 2,
     );
-    expect(getTimelinePlayheadLeft(4, Number.NaN)).toBe(
+    expect(getTimelinePlayheadLeft(4, Number.NaN, GUTTER + TRACKS_LEFT_PAD)).toBe(
       GUTTER + TRACKS_LEFT_PAD - PLAYHEAD_HEAD_W / 2,
     );
+    expect(getTimelinePlayheadLeft(Number.NaN, 20, GUTTER)).toBe(GUTTER - PLAYHEAD_HEAD_W / 2);
+    expect(getTimelinePlayheadLeft(4, Number.NaN, LABEL_COL_W)).toBe(
+      LABEL_COL_W - PLAYHEAD_HEAD_W / 2,
+    );
   });
 });
 
@@ -686,14 +1003,15 @@ describe("resolveTimelineAssetDrop", () => {
           rectTop: 200,
           scrollLeft: 0,
           scrollTop: 0,
+          contentOrigin: GUTTER,
           pixelsPerSecond: 100,
           duration: 10,
           trackHeight: 72,
           trackOrder: [0, 3, 7],
         },
-        480, // rectLeft(100) + GUTTER + TRACKS_LEFT_PAD + 3s*100pps
-        // clientY updated for TRACKS_TOP_PAD=72: rectTop(200) + RULER_H(24) +
-        // TRACKS_TOP_PAD(72) + TRACK_H(48) + TRACK_H/2(24) = 368 → row 1 → track 3.
+        432, // rectLeft(100) + GUTTER(32) + 3s*100pps  (contentOrigin = GUTTER)
+        // clientY: rectTop(200) + RULER_H(24) + TRACKS_TOP_PAD(72) + TRACK_H(48)
+        // + TRACK_H/2(24) = 368 → row 1 → track 3.
         368,
       ),
     ).toEqual({ start: 3, track: 3 });
@@ -707,12 +1025,13 @@ describe("resolveTimelineAssetDrop", () => {
           rectTop: 200,
           scrollLeft: 0,
           scrollTop: 0,
+          contentOrigin: GUTTER,
           pixelsPerSecond: 100,
           duration: 10,
           trackHeight: 72,
           trackOrder: [0, 3, 7],
         },
-        250 + TRACKS_LEFT_PAD,
+        250, // rectLeft(100) + GUTTER(32) + 1.18s*100pps  (contentOrigin = GUTTER)
         600,
       ),
     ).toEqual({ start: 1.18, track: 8 });
diff --git a/packages/studio/src/player/components/Timeline.tsx b/packages/studio/src/player/components/Timeline.tsx
index 2e215381f6..583f98e17d 100644
--- a/packages/studio/src/player/components/Timeline.tsx
+++ b/packages/studio/src/player/components/Timeline.tsx
@@ -9,7 +9,6 @@ import { defaultTimelineTheme } from "./timelineTheme";
 import { useTimelineRangeSelection } from "./useTimelineRangeSelection";
 import { useTimelinePlayhead } from "./useTimelinePlayhead";
 import { useTimelineActiveClips } from "./useTimelineActiveClips";
-import { getTrackStyle } from "./timelineIcons";
 import { useTimelineZoom } from "./useTimelineZoom";
 import { useTimelineAssetDrop } from "./timelineDragDrop";
 import { TimelineEmptyState } from "./TimelineEmptyState";
@@ -17,15 +16,28 @@ import { TimelineCanvas } from "./TimelineCanvas";
 import { type KeyframeDiamondContextMenuState } from "./KeyframeDiamondContextMenu";
 import { useTimelineClipDrag } from "./useTimelineClipDrag";
 import { TimelineOverlays } from "./TimelineOverlays";
+import { animationContributesLane } from "./TimelinePropertyLanes";
 import { useTimelineEditPinning } from "./useTimelineEditPinning";
 import { useTimelineStackingSync } from "./useTimelineStackingSync";
 import { useTimelineGeometry } from "./useTimelineGeometry";
-import { useTimelineTrackDerivations } from "./useTimelineTrackDerivations";
-import { GUTTER, TRACKS_LEFT_PAD, generateTicks, getTimelineCanvasHeight } from "./timelineLayout";
+import { useAutoExpandKeyframedClips } from "./useAutoExpandKeyframedClips";
+import {
+  GUTTER,
+  LABEL_COL_W,
+  generateTicks,
+  getTimelineContentXFromClient,
+} from "./timelineLayout";
 import { useTimelineScrollViewport } from "./useTimelineScrollViewport";
 import { STUDIO_PREVIEW_FPS } from "../lib/time";
 import { useResolvedTimelineEditCallbacks } from "./useResolvedTimelineEditCallbacks";
 import type { TimelineProps } from "./TimelineTypes";
+import {
+  getTrackStyle,
+  useTimelineDisplayLayout,
+  useTimelineTrackLayout,
+} from "./useTimelineTrackLayout";
+import { useTimelineKeyframeHandlers } from "./useTimelineKeyframeHandlers";
+import { STUDIO_KEYFRAMES_ENABLED } from "../../components/editor/manualEditingAvailability";
 import { useTrackGapMenu } from "./useTrackGapMenu";
 import { useTimelineGapHighlights } from "./useTimelineGapHighlights";
 
@@ -99,6 +111,22 @@ export const Timeline = memo(function Timeline({
   const timelineReady = usePlayerStore((s) => s.timelineReady);
   const selectedElementId = usePlayerStore((s) => s.selectedElementId);
   const selectedElementIds = usePlayerStore((s) => s.selectedElementIds);
+  const gsapAnimations = usePlayerStore((s) => s.gsapAnimations);
+  // Label mode = comp has keyframed clips (not just when expanded): keeps the layer
+  // disclosure + property column visible and reserves a GUTTER before 0s (Figma).
+  const hasKeyframedClips = useMemo(
+    () =>
+      Array.from(gsapAnimations.values()).some((list) =>
+        // Same lane-contribution predicate the layout uses: real keyframes OR a
+        // synthesizable flat tween. Checking animation.keyframes alone left a
+        // flat-tween-only comp without its reserved label column.
+        list.some((animation) => animationContributesLane(animation)),
+      ),
+    [gsapAnimations],
+  );
+  const labelMode = STUDIO_KEYFRAMES_ENABLED && hasKeyframedClips;
+  const contentOrigin = labelMode ? LABEL_COL_W + GUTTER : GUTTER;
+  const contentGutter = labelMode ? GUTTER : 0;
   const setSelectedElementId = usePlayerStore((s) => s.setSelectedElementId);
   const currentTime = usePlayerStore((s) => s.currentTime);
   const { zoomMode, manualZoomPercent, setZoomMode, setManualZoomPercent } = useTimelineZoom();
@@ -147,9 +175,10 @@ export const Timeline = memo(function Timeline({
     return Number.isFinite(result) ? result : safeDur;
   }, [rawElements, duration]);
 
-  const { tracks, trackStyles, trackOrder } = useTimelineTrackDerivations(expandedElements);
-  const trackOrderRef = useRef(trackOrder);
-  trackOrderRef.current = trackOrder;
+  const keyframeCache = usePlayerStore((s) => s.keyframeCache);
+  useAutoExpandKeyframedClips(gsapAnimations);
+  const { tracks, trackStyles, trackOrder, trackOrderRef, laneCounts, rowHeights, rowHeightsRef } =
+    useTimelineTrackLayout(expandedElements, gsapAnimations, selectedElementId, selectedElementIds);
   const expandedElementsRef = useRef(expandedElements);
   expandedElementsRef.current = expandedElements;
 
@@ -214,6 +243,7 @@ export const Timeline = memo(function Timeline({
     ppsRef,
     durationRef,
     trackOrderRef,
+    rowHeightsRef,
     onMoveElement: pinnedOnMoveElement,
     onMoveElements: pinnedOnMoveElements,
     onResizeElement: pinnedOnResizeElement,
@@ -231,25 +261,31 @@ export const Timeline = memo(function Timeline({
       ppsRef,
       durationRef,
       trackOrderRef,
+      rowHeightsRef,
+      contentOrigin,
       onFileDrop: pinnedOnFileDrop,
       onAssetDrop: pinnedOnAssetDrop,
       onBlockDrop: pinnedOnBlockDrop,
     });
 
-  const displayTrackOrder = useMemo(() => {
-    if (!draggedClip?.started || trackOrder.includes(draggedClip.previewTrack)) return trackOrder;
-    return [...trackOrder, draggedClip.previewTrack].sort((a, b) => a - b);
-  }, [draggedClip, trackOrder]);
-
-  const totalH = getTimelineCanvasHeight(displayTrackOrder.length);
+  const displayLayout = useTimelineDisplayLayout(draggedClip, trackOrder, rowHeights);
   const { viewportWidth, showShortcutHint, setScrollRef } = useTimelineScrollViewport(scrollRef, [
     timelineReady,
     expandedElements.length,
-    totalH,
+    displayLayout.totalH,
   ]);
-  const keyframeCache = usePlayerStore((s) => s.keyframeCache);
   const selectedKeyframes = usePlayerStore((s) => s.selectedKeyframes);
   const toggleSelectedKeyframe = usePlayerStore((s) => s.toggleSelectedKeyframe);
+  const { onClickKeyframe, onSelectSegment, onShiftClickKeyframe, onContextMenuKeyframe } =
+    useTimelineKeyframeHandlers({
+      expandedElements,
+      keyframeCache,
+      onSelectElement,
+      onSeek,
+      setSelectedElementId,
+      setKfContextMenu,
+      toggleSelectedKeyframe,
+    });
 
   const selectedElement = useMemo(
     () =>
@@ -280,6 +316,7 @@ export const Timeline = memo(function Timeline({
     isDragging,
     scrollRef,
     lastScrollLeftRef,
+    contentOrigin,
   });
 
   const laneGapStrips = useTimelineGapHighlights({
@@ -312,6 +349,7 @@ export const Timeline = memo(function Timeline({
     setZoomMode,
     setManualZoomPercent,
     onSeek,
+    contentOrigin,
   });
   useTimelineActiveClips({
     scrollRef,
@@ -341,7 +379,9 @@ export const Timeline = memo(function Timeline({
     setShowPopover,
     elementsRef: expandedElementsRef,
     trackOrderRef,
+    rowHeightsRef,
     onSelectElement,
+    contentOrigin,
   });
   setRangeSelectionRef.current = setRangeSelection; // stable ref consumed by useTimelineClipDrag
 
@@ -424,10 +464,17 @@ export const Timeline = memo(function Timeline({
         onDragLeave={() => clearDropPreview()}
         onDrop={handleAssetDrop}
         onPointerDown={(e) => {
+          // Let interactive controls (keyframe nav/toggle, caret, inputs) handle
+          // their own clicks — scrubbing here would preventDefault and eat them.
+          if ((e.target as HTMLElement).closest("button, input, select, a")) return;
           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 - TRACKS_LEFT_PAD;
+            const x = getTimelineContentXFromClient({
+              clientX: e.clientX,
+              rectLeft: rect.left,
+              scrollLeft: scrollRef.current.scrollLeft,
+              contentOrigin,
+            });
             const splitTime = Math.max(0, x / pps);
             onRazorSplitAll?.(splitTime);
             return;
@@ -442,18 +489,22 @@ export const Timeline = memo(function Timeline({
           major={major}
           minor={minor}
           pps={pps}
+          contentOrigin={contentOrigin}
+          contentGutter={contentGutter}
           trackContentWidth={displayContentWidth}
-          totalH={totalH}
+          totalH={displayLayout.totalH}
           effectiveDuration={effectiveDuration}
           majorTickInterval={majorTickInterval}
           rangeSelection={rangeSelection}
           marqueeRect={marqueeRect}
           laneGapStrips={laneGapStrips}
           theme={theme}
-          displayTrackOrder={displayTrackOrder}
+          displayTrackOrder={displayLayout.displayTrackOrder}
+          rowHeights={displayLayout.displayRowHeights}
           trackOrder={trackOrder}
           tracks={tracks}
           trackStyles={trackStyles}
+          laneCounts={laneCounts}
           selectedElementId={selectedElementId}
           selectedElementIds={selectedElementIds}
           hoveredClip={hoveredClip}
@@ -479,43 +530,16 @@ export const Timeline = memo(function Timeline({
           getPreviewElement={getPreviewElement}
           getTrackStyle={getTrackStyle}
           keyframeCache={keyframeCache}
+          gsapAnimations={gsapAnimations}
           selectedKeyframes={selectedKeyframes}
           currentTime={currentTime}
+          onSeek={onSeek}
           beatAnalysis={adjustedBeatAnalysis}
-          onClickKeyframe={(el, pct) => {
-            usePlayerStore.getState().clearSelectedKeyframes();
-            const elKey = el.key ?? el.id;
-            setSelectedElementId(elKey);
-            onSelectElement?.(el);
-            // Select the clicked diamond (matches shift-click); cleared above so this single-selects.
-            toggleSelectedKeyframe(`${elKey}:${pct}`);
-            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}`);
-          }}
+          onSelectSegment={onSelectSegment}
+          onClickKeyframe={onClickKeyframe}
+          onShiftClickKeyframe={onShiftClickKeyframe}
           onMoveKeyframe={onMoveKeyframe}
-          onContextMenuKeyframe={(e, elId, pct) => {
-            const el = expandedElements.find((x) => (x.key ?? x.id) === elId);
-            if (el) {
-              setSelectedElementId(elId);
-              onSelectElement?.(el);
-            }
-            const kfData = keyframeCache.get(elId);
-            const kf = kfData?.keyframes.find((k) => Math.abs(k.percentage - pct) < 0.2);
-            setKfContextMenu({
-              x: e.clientX + 4,
-              y: e.clientY + 2,
-              elementId: elId,
-              percentage: pct,
-              tweenPercentage: kf?.tweenPercentage,
-              currentEase: kf?.ease ?? kfData?.ease,
-            });
-          }}
+          onContextMenuKeyframe={onContextMenuKeyframe}
           onContextMenuClip={(e, el) => {
             e.preventDefault();
             setSelectedElementId(el.key ?? el.id);
diff --git a/packages/studio/src/player/components/TimelineCanvas.tsx b/packages/studio/src/player/components/TimelineCanvas.tsx
index 462acc2885..181ca290b8 100644
--- a/packages/studio/src/player/components/TimelineCanvas.tsx
+++ b/packages/studio/src/player/components/TimelineCanvas.tsx
@@ -4,16 +4,15 @@ import { PlayheadIndicator } from "./PlayheadIndicator";
 import { getTimelineEditCapabilities, type TimelineRangeSelection } from "./timelineEditing";
 import { getRenderedTimelineElement } from "./timelineTheme";
 import {
-  GUTTER,
-  TRACK_H,
   RULER_H,
   CLIP_Y,
   TRACKS_TOP_PAD,
   TRACKS_BOTTOM_PAD,
-  TRACKS_LEFT_PAD,
+  TRACK_H,
   PLAYHEAD_HEAD_W,
   getTimelinePlayheadLeft,
   getTimelineRowTop,
+  getTimelineRowHeight,
 } from "./timelineLayout";
 import { usePlayerStore } from "../store/playerStore";
 import type { ResizingClipState } from "./useTimelineClipDrag";
@@ -45,8 +44,17 @@ interface TimelineCanvasProps extends TimelineLaneBaseProps {
 
 export const TimelineCanvas = memo(function TimelineCanvas(props: TimelineCanvasProps) {
   const { draggedClip, scrollRef, selectedElementIds, displayTrackOrder } = props;
-  const { onResizeElement, onMoveElement, onToggleTrackHidden, onRazorSplit, onRazorSplitAll } =
-    useTimelineEditContextOptional();
+  const draggedRowIndex =
+    draggedClip?.started === true ? displayTrackOrder.indexOf(draggedClip.previewTrack) : -1;
+  const draggedRowHeight = getTimelineRowHeight(draggedRowIndex, props.rowHeights);
+  const {
+    onResizeElement,
+    onMoveElement,
+    onToggleTrackHidden,
+    onTogglePropertyGroupKeyframe,
+    onRazorSplit,
+    onRazorSplitAll,
+  } = useTimelineEditContextOptional();
   const beatDragging = usePlayerStore((s) => s.beatDragging);
   // Scroll a clip into view when the sidebar (asset card) requests a reveal.
   useTimelineRevealClip(scrollRef);
@@ -63,8 +71,6 @@ export const TimelineCanvas = memo(function TimelineCanvas(props: TimelineCanvas
   // The drag ghost follows the cursor freely (both axes) — CapCut-style. The
   // "magnetic" affordance is a highlight on the destination lane (draggedRowIndex),
   // which flips at the MAGNETIC_TRACK_THRESHOLD point; the clip drops into it.
-  const draggedRowIndex =
-    draggedClip?.started === true ? displayTrackOrder.indexOf(draggedClip.previewTrack) : -1;
   // Live multi-selection drag: while a selected clip is dragged, ALL selected
   // clips move together as one rigid formation. The GRABBED clip is the free
   // ghost below; its co-selected "passengers" slide by the SAME group-clamped
@@ -101,7 +107,7 @@ export const TimelineCanvas = memo(function TimelineCanvas(props: TimelineCanvas
   return (
     <div
       className="relative"
-      style={{ height: props.totalH, width: GUTTER + TRACKS_LEFT_PAD + props.trackContentWidth }}
+      style={{ height: props.totalH, width: props.contentOrigin + props.trackContentWidth }}
     >
       <TimelineRuler
         major={props.major}
@@ -113,6 +119,7 @@ export const TimelineCanvas = memo(function TimelineCanvas(props: TimelineCanvas
         majorTickInterval={props.majorTickInterval}
         theme={props.theme}
         beatAnalysis={props.beatAnalysis}
+        contentOrigin={props.contentOrigin}
       />
 
       {/* Breathing room between the sticky ruler and the first track lane — the
@@ -124,6 +131,7 @@ export const TimelineCanvas = memo(function TimelineCanvas(props: TimelineCanvas
         draggedElement={draggedElement}
         multiDragPreview={multiDragPreview}
         onToggleTrackHidden={onToggleTrackHidden}
+        onTogglePropertyGroupKeyframe={onTogglePropertyGroupKeyframe}
         onResizeElement={onResizeElement}
         onMoveElement={onMoveElement}
         onRazorSplit={onRazorSplit}
@@ -148,8 +156,8 @@ export const TimelineCanvas = memo(function TimelineCanvas(props: TimelineCanvas
             key={`gap-${strip.kind}-${strip.track}-${gap.start}`}
             className="pointer-events-none absolute"
             style={{
-              top: getTimelineRowTop(rowIndex) + CLIP_Y,
-              left: GUTTER + TRACKS_LEFT_PAD + gap.start * props.pps,
+              top: getTimelineRowTop(rowIndex, props.rowHeights) + CLIP_Y,
+              left: props.contentOrigin + gap.start * props.pps,
               width: Math.max((gap.end - gap.start) * props.pps, 2),
               height: TRACK_H - CLIP_Y * 2,
               background: loud ? "rgba(60,230,172,0.18)" : "rgba(60,230,172,0.055)",
@@ -166,10 +174,10 @@ export const TimelineCanvas = memo(function TimelineCanvas(props: TimelineCanvas
         <div
           className="absolute pointer-events-none"
           style={{
-            top: getTimelineRowTop(draggedRowIndex) + CLIP_Y,
-            left: GUTTER + TRACKS_LEFT_PAD + draggedClip.previewStart * props.pps,
+            top: getTimelineRowTop(draggedRowIndex, props.rowHeights) + CLIP_Y,
+            left: props.contentOrigin + draggedClip.previewStart * props.pps,
             width: Math.max(draggedClip.element.duration * props.pps, 4),
-            height: TRACK_H - CLIP_Y * 2,
+            height: draggedRowHeight - CLIP_Y * 2,
             border: "1px solid rgba(60,230,172,0.55)",
             background: "rgba(60,230,172,0.12)",
             borderRadius: 4,
@@ -184,8 +192,8 @@ export const TimelineCanvas = memo(function TimelineCanvas(props: TimelineCanvas
         <div
           className="absolute pointer-events-none"
           style={{
-            top: getTimelineRowTop(draggedClip.insertRow) - 0.5,
-            left: GUTTER + TRACKS_LEFT_PAD,
+            top: getTimelineRowTop(draggedClip.insertRow, props.rowHeights) - 0.5,
+            left: props.contentOrigin,
             width: props.trackContentWidth,
             height: 1,
             background: "#3CE6AC",
@@ -200,7 +208,7 @@ export const TimelineCanvas = memo(function TimelineCanvas(props: TimelineCanvas
         <div
           className="absolute pointer-events-none"
           style={{
-            left: GUTTER + TRACKS_LEFT_PAD + draggedClip.snapTime * props.pps,
+            left: props.contentOrigin + draggedClip.snapTime * props.pps,
             top: RULER_H,
             bottom: 0,
             width: 1,
@@ -222,7 +230,7 @@ export const TimelineCanvas = memo(function TimelineCanvas(props: TimelineCanvas
             top: activeDraggedPosition.top,
             left: activeDraggedPosition.left,
             width: Math.max(activeDraggedElement.duration * props.pps, 4),
-            height: TRACK_H - CLIP_Y * 2,
+            height: draggedRowHeight - CLIP_Y * 2,
             zIndex: 40,
           }}
         >
@@ -280,8 +288,7 @@ export const TimelineCanvas = memo(function TimelineCanvas(props: TimelineCanvas
           className="absolute pointer-events-none"
           style={{
             left:
-              GUTTER +
-              TRACKS_LEFT_PAD +
+              props.contentOrigin +
               Math.min(props.rangeSelection.start, props.rangeSelection.end) * props.pps,
             width: Math.abs(props.rangeSelection.end - props.rangeSelection.start) * props.pps,
             top: RULER_H,
@@ -297,13 +304,13 @@ export const TimelineCanvas = memo(function TimelineCanvas(props: TimelineCanvas
       {/* Playhead — hidden while dragging a beat so its guideline doesn't
           track the scrub and clutter the beat being moved. Explicit width +
           the half-head offset baked into getTimelinePlayheadLeft keep the
-          inner 1px line's CENTER exactly on GUTTER + t * pps (the ruler
+          inner 1px line's CENTER exactly on contentOrigin + t * pps (the ruler
           ticks' center), instead of relying on shrink-wrap sizing. */}
       <div
         ref={props.playheadRef}
         className="absolute top-0 bottom-0 pointer-events-none"
         style={{
-          left: `${getTimelinePlayheadLeft(0, 0)}px`,
+          left: `${getTimelinePlayheadLeft(0, 0, props.contentOrigin)}px`,
           width: PLAYHEAD_HEAD_W,
           zIndex: 100,
           display: beatDragging ? "none" : undefined,
diff --git a/packages/studio/src/player/components/TimelineClip.tsx b/packages/studio/src/player/components/TimelineClip.tsx
index 79abf1c39b..8ba1a24d1f 100644
--- a/packages/studio/src/player/components/TimelineClip.tsx
+++ b/packages/studio/src/player/components/TimelineClip.tsx
@@ -8,6 +8,7 @@ interface TimelineClipProps {
   el: TimelineElement;
   pps: number;
   clipY: number;
+  clipHeight?: number;
   isSelected: boolean;
   isHovered: boolean;
   isDragging?: boolean;
@@ -30,6 +31,7 @@ export const TimelineClip = memo(function TimelineClip({
   el,
   pps,
   clipY,
+  clipHeight,
   isSelected,
   isHovered,
   isDragging = false,
@@ -71,7 +73,7 @@ export const TimelineClip = memo(function TimelineClip({
     left: leftPx,
     width: widthPx,
     top: clipY,
-    bottom: clipY,
+    ...(clipHeight === undefined ? { bottom: clipY } : { height: clipHeight }),
     borderRadius: theme.clipRadius,
     zIndex: isDragging ? 20 : isSelected ? 10 : isHovered ? 5 : 1,
     // Regular cursor over clips (CapCut-style, user preference) — no grab hand.
diff --git a/packages/studio/src/player/components/TimelineClipDiamonds.test.tsx b/packages/studio/src/player/components/TimelineClipDiamonds.test.tsx
index 254e5d6086..de1b5e0126 100644
--- a/packages/studio/src/player/components/TimelineClipDiamonds.test.tsx
+++ b/packages/studio/src/player/components/TimelineClipDiamonds.test.tsx
@@ -3,7 +3,7 @@
 import React, { act } from "react";
 import { createRoot } from "react-dom/client";
 import { afterEach, describe, expect, it, vi } from "vitest";
-import { TimelineClipDiamonds } from "./TimelineClipDiamonds";
+import { TimelineClipDiamonds, TimelineDiamondLane } from "./TimelineClipDiamonds";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -84,12 +84,24 @@ describe("TimelineClipDiamonds", () => {
     const root = createRoot(host);
     act(() => {
       root.render(
-        <TimelineClipDiamonds
+        <TimelineDiamondLane
           keyframesData={{
             format: "percentage",
             keyframes: [
-              { percentage: 0, properties: { x: 0 } },
-              { percentage: 50, properties: { x: 100 } },
+              {
+                percentage: 0,
+                tweenPercentage: 0,
+                propertyGroup: "position",
+                animationId: "anim-1",
+                properties: { x: 0 },
+              },
+              {
+                percentage: 50,
+                tweenPercentage: 100,
+                propertyGroup: "position",
+                animationId: "anim-1",
+                properties: { x: 100 },
+              },
             ],
           }}
           clipWidthPx={5000}
@@ -101,6 +113,7 @@ describe("TimelineClipDiamonds", () => {
           selectedKeyframes={new Set()}
           onClickKeyframe={onClickKeyframe}
           onMoveKeyframe={onMoveKeyframe}
+          groupAware
         />,
       );
     });
@@ -117,7 +130,12 @@ describe("TimelineClipDiamonds", () => {
       diamond!.dispatchEvent(pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 104 }));
     });
 
-    expect(onClickKeyframe).toHaveBeenCalledWith(50);
+    expect(onClickKeyframe).toHaveBeenCalledWith({
+      percentage: 50,
+      tweenPercentage: 100,
+      propertyGroup: "position",
+      animationId: "anim-1",
+    });
     expect(onMoveKeyframe).not.toHaveBeenCalled();
     act(() => root.unmount());
   });
@@ -126,7 +144,7 @@ describe("TimelineClipDiamonds", () => {
   // keyframe) committed the move but never selected/parked on the result —
   // the diamond it was just dragged looked exactly like one nothing happened
   // to. Select it at its NEW position too.
-  it("selects the keyframe at its new position after a real drag-retime", () => {
+  it("reselects a retimed keyframe with its post-move tween percentage", () => {
     const onClickKeyframe = vi.fn();
     const onMoveKeyframe = vi.fn();
     const host = document.createElement("div");
@@ -134,12 +152,31 @@ describe("TimelineClipDiamonds", () => {
     const root = createRoot(host);
     act(() => {
       root.render(
-        <TimelineClipDiamonds
+        <TimelineDiamondLane
           keyframesData={{
             format: "percentage",
             keyframes: [
-              { percentage: 0, properties: { x: 0 } },
-              { percentage: 50, properties: { x: 100 } },
+              {
+                percentage: 20,
+                tweenPercentage: 0,
+                propertyGroup: "position",
+                animationId: "anim-1",
+                properties: { x: 0 },
+              },
+              {
+                percentage: 40,
+                tweenPercentage: 50,
+                propertyGroup: "position",
+                animationId: "anim-1",
+                properties: { x: 100 },
+              },
+              {
+                percentage: 60,
+                tweenPercentage: 100,
+                propertyGroup: "position",
+                animationId: "anim-1",
+                properties: { x: 200 },
+              },
             ],
           }}
           clipWidthPx={200}
@@ -151,6 +188,81 @@ describe("TimelineClipDiamonds", () => {
           selectedKeyframes={new Set()}
           onClickKeyframe={onClickKeyframe}
           onMoveKeyframe={onMoveKeyframe}
+          groupAware
+        />,
+      );
+    });
+    const diamond = host.querySelector<HTMLButtonElement>('button[title="40%"]');
+    expect(diamond).not.toBeNull();
+
+    act(() => {
+      diamond!.dispatchEvent(
+        pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 80 }),
+      );
+      diamond!.dispatchEvent(pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 100 }));
+    });
+
+    expect(onMoveKeyframe).toHaveBeenCalledWith(
+      {
+        percentage: 40,
+        tweenPercentage: 50,
+        propertyGroup: "position",
+        animationId: "anim-1",
+      },
+      50,
+    );
+    expect(onClickKeyframe).toHaveBeenCalledWith({
+      percentage: 50,
+      tweenPercentage: 75,
+      propertyGroup: "position",
+      animationId: "anim-1",
+    });
+    act(() => root.unmount());
+  });
+
+  it("composes a rapid second retime from the pending position", () => {
+    const onMoveKeyframe = vi.fn();
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    act(() => {
+      root.render(
+        <TimelineDiamondLane
+          keyframesData={{
+            format: "percentage",
+            keyframes: [
+              {
+                percentage: 0,
+                tweenPercentage: 0,
+                propertyGroup: "position",
+                animationId: "anim-1",
+                properties: { x: 0 },
+              },
+              {
+                percentage: 50,
+                tweenPercentage: 50,
+                propertyGroup: "position",
+                animationId: "anim-1",
+                properties: { x: 100 },
+              },
+              {
+                percentage: 100,
+                tweenPercentage: 100,
+                propertyGroup: "position",
+                animationId: "anim-1",
+                properties: { x: 200 },
+              },
+            ],
+          }}
+          clipWidthPx={200}
+          clipHeightPx={48}
+          accentColor="#4ba3d2"
+          isSelected
+          currentPercentage={0}
+          elementId="clip-1"
+          selectedKeyframes={new Set()}
+          onMoveKeyframe={onMoveKeyframe}
+          groupAware
         />,
       );
     });
@@ -161,13 +273,29 @@ describe("TimelineClipDiamonds", () => {
       diamond!.dispatchEvent(
         pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 100 }),
       );
-      // 4px at a 200px clip width is 2 clip-% — well past the no-op epsilon,
-      // a real retime.
-      diamond!.dispatchEvent(pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 104 }));
+      diamond!.dispatchEvent(pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 150 }));
+
+      // The cache still exposes 50%, but this second +10% drag starts at the
+      // pending 75% destination and must therefore land at 85%, not 60%.
+      diamond!.dispatchEvent(
+        pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 150 }),
+      );
+      diamond!.dispatchEvent(pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 170 }));
     });
 
-    expect(onMoveKeyframe).toHaveBeenCalledWith("clip-1", 50, 52);
-    expect(onClickKeyframe).toHaveBeenCalledWith(52);
+    // The second move must identify the FROM keyframe by the pending (already-
+    // moved) position 75%, not the stale rendered 50%; otherwise the serialized
+    // mutation can't locate the keyframe the first move relocated.
+    expect(onMoveKeyframe).toHaveBeenNthCalledWith(
+      2,
+      {
+        percentage: 75,
+        tweenPercentage: 75,
+        propertyGroup: "position",
+        animationId: "anim-1",
+      },
+      85,
+    );
     act(() => root.unmount());
   });
 
@@ -212,4 +340,95 @@ describe("TimelineClipDiamonds", () => {
     expect(suppressClickRef.current).toBe(true);
     act(() => root.unmount());
   });
+
+  const renderSegmentLane = (lastAmbiguous: boolean) => {
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    const kf = (percentage: number, extra: Record<string, unknown> = {}) => ({
+      percentage,
+      tweenPercentage: percentage,
+      propertyGroup: "position",
+      animationId: "anim-1",
+      properties: { x: percentage },
+      ...extra,
+    });
+    act(() => {
+      root.render(
+        <TimelineDiamondLane
+          keyframesData={{
+            format: "percentage",
+            keyframes: [
+              kf(0),
+              kf(50),
+              kf(100, {
+                collidingAnimationIds: lastAmbiguous ? ["anim-1", "anim-2"] : undefined,
+              }),
+            ],
+          }}
+          clipWidthPx={200}
+          clipHeightPx={48}
+          accentColor="#4ba3d2"
+          isSelected
+          currentPercentage={0}
+          elementId="clip-1"
+          selectedKeyframes={new Set()}
+          onSelectSegment={vi.fn()}
+          groupAware
+        />,
+      );
+    });
+    return { host, root };
+  };
+
+  it("shows the inline ease button on a colliding merged segment (bulk edit)", () => {
+    // Both segments (0->50, 50->100) render their ease button; the 50->100
+    // segment ends on a keyframe shared by two animations and the button now
+    // bulk-edits both rather than being hidden.
+    const { host, root } = renderSegmentLane(true);
+    expect(host.querySelectorAll("[data-keyframe-ease-segment]").length).toBe(2);
+    act(() => root.unmount());
+  });
+
+  it("shows the inline ease button on single-animation merged segments", () => {
+    const { host, root } = renderSegmentLane(false);
+    expect(host.querySelectorAll("[data-keyframe-ease-segment]").length).toBe(2);
+    act(() => root.unmount());
+  });
+
+  it("hides the inline ease button on a segment with no source animation id", () => {
+    // A runtime-scanned keyframe has no animationId, so there is no tween to
+    // target; the segment ending on it must not render a (dead) ease button.
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    const kf = (percentage: number, animationId?: string) => ({
+      percentage,
+      tweenPercentage: percentage,
+      propertyGroup: "position",
+      ...(animationId ? { animationId } : {}),
+      properties: { x: percentage },
+    });
+    act(() => {
+      root.render(
+        <TimelineDiamondLane
+          keyframesData={{
+            format: "percentage",
+            keyframes: [kf(0, "anim-1"), kf(50, "anim-1"), kf(100)],
+          }}
+          clipWidthPx={200}
+          clipHeightPx={48}
+          accentColor="#4ba3d2"
+          isSelected
+          currentPercentage={0}
+          elementId="clip-1"
+          selectedKeyframes={new Set()}
+          onSelectSegment={vi.fn()}
+          groupAware
+        />,
+      );
+    });
+    expect(host.querySelectorAll("[data-keyframe-ease-segment]").length).toBe(1);
+    act(() => root.unmount());
+  });
 });
diff --git a/packages/studio/src/player/components/TimelineClipDiamonds.tsx b/packages/studio/src/player/components/TimelineClipDiamonds.tsx
index 129104dfb8..9a09a7e576 100644
--- a/packages/studio/src/player/components/TimelineClipDiamonds.tsx
+++ b/packages/studio/src/player/components/TimelineClipDiamonds.tsx
@@ -1,22 +1,33 @@
-import { memo, useRef, useState } from "react";
+import { Fragment, memo, useEffect, useRef, useState } from "react";
 import { BEAT_BAND_H } from "./BeatStrip";
 import {
   KEYFRAME_DRAG_THRESHOLD_PX,
   previewClipPct,
   resolveKeyframeDrag,
 } from "../../components/editor/keyframeDrag";
+import { MiniCurveSvg } from "../../components/editor/EaseCurveSection";
+import { clipToTweenPercentage } from "../../components/editor/KeyframeNavigation";
+import { LANE_H } from "./timelineLayout";
+import {
+  timelineKeyframeSelectionKey,
+  type TimelineKeyframeTarget,
+} from "./timelineKeyframeIdentity";
 
-interface KeyframeEntry {
+export interface TimelineDiamondKeyframe {
   percentage: number;
   /** Tween-relative percentage (the retime mutation keys on this, not clip %). */
   tweenPercentage?: number;
+  propertyGroup?: string;
+  animationId?: string;
   properties: Record<string, number | string>;
   ease?: string;
+  /** Source animation ids that collide at this percentage, in first-seen order. */
+  collidingAnimationIds?: string[];
 }
 
 interface KeyframeCacheEntry {
   format: string;
-  keyframes: KeyframeEntry[];
+  keyframes: TimelineDiamondKeyframe[];
   ease?: string;
   easeEach?: string;
 }
@@ -32,7 +43,7 @@ interface TimelineClipDiamondsProps {
   isSelected: boolean;
   currentPercentage: number;
   elementId: string;
-  selectedKeyframes: Set<string>;
+  selectedKeyframes: ReadonlySet<string>;
   onClickKeyframe?: (percentage: number) => void;
   onShiftClickKeyframe?: (elementId: string, percentage: number) => void;
   onContextMenuKeyframe?: (e: React.MouseEvent, elementId: string, percentage: number) => void;
@@ -45,12 +56,32 @@ interface TimelineClipDiamondsProps {
     fromClipPercentage: number,
     toClipPercentage: number,
   ) => void;
+  /** Open the segment ease editor for the hovered mid-point button — available on
+   *  the inline clip row too, not just the expanded lanes. */
+  onSelectSegment?: (elementId: string, target: TimelineKeyframeTarget) => void;
   /** Set while resolving a diamond press so the ancestor clip's onClick (which
    *  toggles selection off when already selected) ignores the native "click"
    *  the browser auto-synthesizes after this button's pointerdown+pointerup. */
   suppressClickRef?: React.RefObject<boolean>;
 }
 
+interface TimelineDiamondLaneProps extends Omit<
+  TimelineClipDiamondsProps,
+  | "onClickKeyframe"
+  | "onShiftClickKeyframe"
+  | "onContextMenuKeyframe"
+  | "onMoveKeyframe"
+  | "onSelectSegment"
+> {
+  groupAware?: boolean;
+  globalEase?: string;
+  onSelectSegment?: (target: TimelineKeyframeTarget) => void;
+  onClickKeyframe?: (target: TimelineKeyframeTarget) => void;
+  onShiftClickKeyframe?: (target: TimelineKeyframeTarget) => void;
+  onContextMenuKeyframe?: (e: React.MouseEvent, target: TimelineKeyframeTarget) => void;
+  onMoveKeyframe?: (target: TimelineKeyframeTarget, toClipPercentage: number) => void;
+}
+
 const DIAMOND_RATIO = 0.8;
 // Percentage tolerance for rendering keyframes near clip boundaries. Keyframes
 // slightly outside [0, 100] (from rounding or stale cache during the async
@@ -66,7 +97,22 @@ type DragState = {
   moved: boolean;
 };
 
-export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({
+function keyframeTarget(
+  keyframe: TimelineDiamondKeyframe,
+  groupAware: boolean,
+): TimelineKeyframeTarget {
+  return groupAware
+    ? {
+        percentage: keyframe.percentage,
+        tweenPercentage: keyframe.tweenPercentage,
+        propertyGroup: keyframe.propertyGroup,
+        animationId: keyframe.animationId,
+        collidingAnimationIds: keyframe.collidingAnimationIds,
+      }
+    : { percentage: keyframe.percentage };
+}
+
+export const TimelineDiamondLane = memo(function TimelineDiamondLane({
   keyframesData,
   clipWidthPx,
   clipHeightPx,
@@ -80,14 +126,35 @@ export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({
   onShiftClickKeyframe,
   onContextMenuKeyframe,
   onMoveKeyframe,
+  onSelectSegment,
   suppressClickRef,
-}: TimelineClipDiamondsProps) {
+  groupAware = false,
+  globalEase = "none",
+}: TimelineDiamondLaneProps) {
   // Hooks must run before the early return below.
   const dragRef = useRef<DragState | null>(null);
+  // Pending retime destination (clip + tween %) per keyframe key, so a rapid
+  // second drag composes from where the first move left the keyframe (whose
+  // cache entry has not rebuilt yet) instead of the stale rendered value.
+  const pendingRetimeRef = useRef(new Map<string, { clipPct: number; tweenPct: number }>());
+  useEffect(() => {
+    // Clear a pending entry once the authoritative cache reflects a keyframe at
+    // ~its destination. Match by tolerance, not equality: cache writers round
+    // clip %s, so an exact check would leak an entry after every successful retime.
+    for (const [key, pending] of pendingRetimeRef.current) {
+      if (keyframesData.keyframes.some((k) => Math.abs(k.percentage - pending.clipPct) < 0.2)) {
+        pendingRetimeRef.current.delete(key);
+      }
+    }
+  }, [keyframesData.keyframes]);
   // Visual-only preview of the dragged diamond's clip-% — no runtime/GSAP hold
   // (that optimistic hold was the #1763 flake). The atomic move-keyframe commit
   // on drop re-keys the diamond from source.
   const [preview, setPreview] = useState<{ kfKey: string; clipPct: number } | null>(null);
+  // Index of the segment whose mid-point ease button is revealed on hover, like
+  // Figma. Null = no segment hovered → no button shown (resting state is just
+  // the connector line + diamonds).
+  const [hoveredSegment, setHoveredSegment] = useState<number | null>(null);
   // The button element can re-render (reposition/unmount) synchronously from
   // the state updates onClickKeyframe/onMoveKeyframe trigger, before the
   // browser gets to auto-synthesize the "click" event that normally follows
@@ -108,7 +175,12 @@ export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({
 
   // When the beat strip occupies the top band, shrink the diamonds and center
   // them in the remaining bottom region so they don't collide with it.
-  const diamondSize = Math.round(clipHeightPx * (beatsActive ? 0.45 : DIAMOND_RATIO));
+  // One consistent keyframe-diamond size everywhere (clip bars + property lanes),
+  // matching the property-lane size (LANE_H · ratio). Beat-strip tracks still
+  // shrink to fit under the strip.
+  const diamondSize = beatsActive
+    ? Math.round(clipHeightPx * 0.45)
+    : Math.round(LANE_H * DIAMOND_RATIO);
   const half = diamondSize / 2;
   const centerY = beatsActive ? BEAT_BAND_H + (clipHeightPx - BEAT_BAND_H) / 2 : clipHeightPx / 2;
   const sorted = keyframesData.keyframes
@@ -141,32 +213,89 @@ export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({
         const x1 = Math.max(0, Math.min(clipWidthPx, (prev.percentage / 100) * clipWidthPx));
         const x2 = Math.max(0, Math.min(clipWidthPx, (kf.percentage / 100) * clipWidthPx));
         if (x2 - x1 < 1) return null;
+        // Group-aware target for the ease button. On a merged inline row the
+        // button edits the ease of every animation colliding at this percentage
+        // at once (the collapsed row is the element's unified motion). It is only
+        // hidden when the keyframe has no source animation id (runtime-scanned),
+        // so there is no tween to target.
+        const target = keyframeTarget(kf, true);
+        const ease = kf.ease ?? globalEase;
         return (
-          <div
-            key={`line-${i}-${prev.percentage}-${kf.percentage}`}
-            className="absolute"
-            style={{
-              left: x1,
-              top: centerY,
-              width: x2 - x1,
-              height: 2,
-              transform: "translateY(-1px)",
-              background: baseColor,
-              opacity: baseOpacity,
-              borderRadius: 1,
-            }}
-          />
+          <Fragment key={`line-${i}-${prev.percentage}-${kf.percentage}`}>
+            <div
+              className="absolute"
+              data-keyframe-connector={groupAware ? "" : undefined}
+              style={{
+                left: x1,
+                top: centerY,
+                width: x2 - x1,
+                height: 2,
+                transform: "translateY(-1px)",
+                background: baseColor,
+                opacity: baseOpacity,
+                borderRadius: 1,
+              }}
+            />
+            {onSelectSegment && kf.animationId !== undefined && (
+              <div
+                className="absolute"
+                data-keyframe-ease-segment=""
+                style={{
+                  left: x1,
+                  top: centerY,
+                  width: x2 - x1,
+                  height: 18,
+                  transform: "translateY(-50%)",
+                  pointerEvents: "auto",
+                }}
+                onMouseEnter={() => setHoveredSegment(i)}
+                onMouseLeave={() => setHoveredSegment((h) => (h === i ? null : h))}
+              >
+                {hoveredSegment === i && (
+                  <button
+                    type="button"
+                    data-keyframe-ease-button=""
+                    aria-label={`Edit ${ease} easing`}
+                    title={`Edit ${ease} easing`}
+                    className="absolute flex items-center justify-center rounded"
+                    style={{
+                      left: "50%",
+                      top: "50%",
+                      width: 16,
+                      height: 16,
+                      transform: "translate(-50%, -50%)",
+                      zIndex: 3,
+                      pointerEvents: "auto",
+                      padding: 0,
+                      border: "1px solid rgba(255, 255, 255, 0.14)",
+                      background: "#171717",
+                      cursor: "pointer",
+                    }}
+                    onPointerDown={(e) => e.stopPropagation()}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onSelectSegment(target);
+                    }}
+                  >
+                    <MiniCurveSvg ease={ease} active size={12} />
+                  </button>
+                )}
+              </div>
+            )}
+          </Fragment>
         );
       })}
 
       {sorted.map((kf, i) => {
-        const kfKey = `${elementId}:${kf.percentage}`;
+        const target = keyframeTarget(kf, groupAware);
+        const kfKey = timelineKeyframeSelectionKey(elementId, target);
         // While dragging this diamond, render it at the live preview clip-%.
         const renderPct = preview?.kfKey === kfKey ? preview.clipPct : kf.percentage;
-        // Center the diamond ON its keyframe %: left = (% · width) − half so the
-        // diamond's midpoint sits exactly at the percentage. At 0% the midpoint
-        // is the clip's left edge (the left half overflows, which the
-        // overflow-visible clip shows) — NOT shifted fully inside.
+        // Center the diamond ON its keyframe %: left = (% · width) − half, so the
+        // diamond's midpoint sits exactly on the playhead/ruler x for that time.
+        // The 0% diamond's left half lands in the reserved left gutter (the
+        // content origin is inset past the label column, Figma-style) so it stays
+        // fully visible instead of being clipped by the sticky label column.
         const leftPx = (renderPct / 100) * clipWidthPx - half;
         const isKfSelected = selectedKeyframes.has(kfKey);
         const atPlayhead = isSelected && Math.abs(kf.percentage - currentPercentage) < 0.5;
@@ -181,7 +310,7 @@ export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({
             dragRef.current = {
               kfKey,
               startX: e.clientX,
-              fromClipPct: kf.percentage,
+              fromClipPct: pendingRetimeRef.current.get(kfKey)?.clipPct ?? kf.percentage,
               moved: false,
             };
           }
@@ -212,8 +341,8 @@ export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({
           if (!d || d.kfKey !== kfKey) {
             if (e.button !== 0) return;
             suppressNextClick();
-            if (e.shiftKey) onShiftClickKeyframe?.(elementId, kf.percentage);
-            else onClickKeyframe?.(kf.percentage);
+            if (e.shiftKey) onShiftClickKeyframe?.(target);
+            else onClickKeyframe?.(target);
             return;
           }
           e.stopPropagation();
@@ -235,14 +364,46 @@ export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({
             // back onto ~the same position — no real retime, so treat it as the
             // click it was. Otherwise a normal click with a few px of mouse/
             // trackpad drift silently does nothing: no selection, no move.
-            if (e.shiftKey) onShiftClickKeyframe?.(elementId, kf.percentage);
-            else onClickKeyframe?.(kf.percentage);
+            if (e.shiftKey) onShiftClickKeyframe?.(target);
+            else onClickKeyframe?.(target);
           } else if (res.kind === "move" && res.toClipPct != null) {
-            onMoveKeyframe?.(elementId, d.fromClipPct, res.toClipPct);
+            const animKfs =
+              target.animationId === undefined
+                ? keyframesData.keyframes
+                : keyframesData.keyframes.filter((k) => k.animationId === target.animationId);
+            // Clamp to the mapped tween range: clipToTweenPercentage extrapolates
+            // linearly, so a boundary drag past the range would otherwise reselect
+            // an out-of-range tween % (e.g. 150%) even though the mutation clamps
+            // the moved endpoint back to the boundary.
+            const tweenPcts = animKfs
+              .map((k) => k.tweenPercentage)
+              .filter((v): v is number => typeof v === "number");
+            const clampTween = (v: number) =>
+              tweenPcts.length
+                ? Math.max(Math.min(...tweenPcts), Math.min(Math.max(...tweenPcts), v))
+                : v;
+            const newTweenPct = clampTween(clipToTweenPercentage(animKfs, res.toClipPct));
+            // For a rapid second retime the diamond still renders the stale cache
+            // position, so identify the FROM keyframe by the pending (already-moved)
+            // position; the mutation locates the source keyframe by this identity.
+            const pendingBefore = pendingRetimeRef.current.get(kfKey);
+            const fromTarget = pendingBefore
+              ? {
+                  ...target,
+                  percentage: pendingBefore.clipPct,
+                  tweenPercentage: pendingBefore.tweenPct,
+                }
+              : target;
+            pendingRetimeRef.current.set(kfKey, { clipPct: res.toClipPct, tweenPct: newTweenPct });
+            onMoveKeyframe?.(fromTarget, res.toClipPct);
             // A retime still targeted this exact diamond — park/select it at its
             // new position, same as a plain click, or a drag that actually moved
             // something looks identical to one that silently did nothing.
-            onClickKeyframe?.(res.toClipPct);
+            onClickKeyframe?.({
+              ...target,
+              percentage: res.toClipPct,
+              tweenPercentage: newTweenPct,
+            });
           }
         };
 
@@ -251,6 +412,10 @@ export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({
             key={`${i}-${kf.percentage}`}
             type="button"
             className="absolute"
+            data-keyframe-group={groupAware ? kf.propertyGroup : undefined}
+            data-keyframe-percentage={
+              groupAware ? (kf.tweenPercentage ?? kf.percentage) : undefined
+            }
             style={{
               left: leftPx,
               top: centerY,
@@ -268,10 +433,19 @@ export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({
             onPointerDown={onPointerDown}
             onPointerMove={onPointerMove}
             onPointerUp={onPointerUp}
+            onPointerCancel={(e) => {
+              // Browser/OS cancellation (or lost capture) ends the drag without a
+              // pointerup, so clear the armed drag and preview or a ghost diamond
+              // stays stuck at the last previewed position.
+              if (dragRef.current?.kfKey !== kfKey) return;
+              dragRef.current = null;
+              setPreview(null);
+              e.currentTarget.releasePointerCapture?.(e.pointerId);
+            }}
             onContextMenu={(e) => {
               e.preventDefault();
               e.stopPropagation();
-              onContextMenuKeyframe?.(e, elementId, kf.percentage);
+              onContextMenuKeyframe?.(e, target);
             }}
             title={`${kf.percentage}%`}
           >
@@ -297,3 +471,32 @@ export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({
     </div>
   );
 });
+
+export const TimelineClipDiamonds = memo(function TimelineClipDiamonds(
+  props: TimelineClipDiamondsProps,
+) {
+  return (
+    <TimelineDiamondLane
+      {...props}
+      globalEase={props.keyframesData.ease}
+      onClickKeyframe={(target) => props.onClickKeyframe?.(target.percentage)}
+      onShiftClickKeyframe={(target) =>
+        props.onShiftClickKeyframe?.(props.elementId, target.percentage)
+      }
+      onContextMenuKeyframe={(e, target) =>
+        props.onContextMenuKeyframe?.(e, props.elementId, target.percentage)
+      }
+      onMoveKeyframe={
+        props.onMoveKeyframe
+          ? (target, toClipPercentage) =>
+              props.onMoveKeyframe?.(props.elementId, target.percentage, toClipPercentage)
+          : undefined
+      }
+      onSelectSegment={
+        props.onSelectSegment
+          ? (target) => props.onSelectSegment?.(props.elementId, target)
+          : undefined
+      }
+    />
+  );
+});
diff --git a/packages/studio/src/player/components/TimelineDragGhost.tsx b/packages/studio/src/player/components/TimelineDragGhost.tsx
deleted file mode 100644
index 771bddb65d..0000000000
--- a/packages/studio/src/player/components/TimelineDragGhost.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import type { ReactNode } from "react";
-import { TimelineClip } from "./TimelineClip";
-import { getTimelineEditCapabilities } from "./timelineEditing";
-import { CLIP_Y, TRACK_H } from "./timelineLayout";
-import type { TimelineTheme } from "./timelineTheme";
-import type { TimelineElement } from "../store/playerStore";
-
-interface TimelineDragGhostProps {
-  element: TimelineElement;
-  position: { left: number; top: number };
-  pps: number;
-  selectedElementId: string | null;
-  hasCustomContent: boolean;
-  theme: TimelineTheme;
-  children: ReactNode;
-}
-
-export function TimelineDragGhost({
-  element,
-  position,
-  pps,
-  selectedElementId,
-  hasCustomContent,
-  theme,
-  children,
-}: TimelineDragGhostProps) {
-  return (
-    <div
-      className="absolute pointer-events-none"
-      style={{
-        top: position.top,
-        left: position.left,
-        width: Math.max(element.duration * pps, 4),
-        height: TRACK_H - CLIP_Y * 2,
-        zIndex: 40,
-      }}
-    >
-      <TimelineClip
-        el={{ ...element, start: 0 }}
-        pps={pps}
-        clipY={0}
-        isSelected={selectedElementId === (element.key ?? element.id)}
-        isHovered={false}
-        isDragging={true}
-        hasCustomContent={hasCustomContent}
-        capabilities={getTimelineEditCapabilities(element)}
-        theme={theme}
-        isComposition={!!element.compositionSrc}
-        onHoverStart={() => {}}
-        onHoverEnd={() => {}}
-        onResizeStart={() => {}}
-        onClick={() => {}}
-        onDoubleClick={() => {}}
-      >
-        {children}
-      </TimelineClip>
-    </div>
-  );
-}
diff --git a/packages/studio/src/player/components/TimelineLanes.tsx b/packages/studio/src/player/components/TimelineLanes.tsx
index 75069c1a0b..a09090900f 100644
--- a/packages/studio/src/player/components/TimelineLanes.tsx
+++ b/packages/studio/src/player/components/TimelineLanes.tsx
@@ -1,12 +1,16 @@
 import { type ReactNode } from "react";
-import { Eye, EyeSlash } from "@phosphor-icons/react";
+import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import { BeatStrip, BeatBackgroundLines } from "./BeatStrip";
 import { TimelineClip } from "./TimelineClip";
 import { TimelineClipDiamonds } from "./TimelineClipDiamonds";
+import { TimelinePropertyLanes } from "./TimelinePropertyLanes";
+import { TimelineTrackHeader } from "./TimelineTrackHeader";
+import { resolveTrackKeyframeClip } from "./useTimelineTrackLayout";
+import type { TimelineKeyframeTarget } from "./timelineKeyframeIdentity";
 import type { MusicBeatAnalysis } from "@hyperframes/core/beats";
 import { getTimelineEditCapabilities, resolveBlockedTimelineEditIntent } from "./timelineEditing";
 import type { TimelineTheme } from "./timelineTheme";
-import { GUTTER, TRACK_H, TRACKS_LEFT_PAD, CLIP_Y, CLIP_HANDLE_W } from "./timelineLayout";
+import { CLIP_Y, CLIP_HANDLE_W, TRACK_H, getTimelineRowHeight } from "./timelineLayout";
 import {
   usePlayerStore,
   type TimelineElement,
@@ -21,9 +25,9 @@ import {
 import type { TrackVisualStyle } from "./timelineIcons";
 import type { TimelineEditCallbacks } from "./timelineCallbacks";
 import { STUDIO_KEYFRAMES_ENABLED } from "../../components/editor/manualEditingAvailability";
+import { trackStudioKeyframeLaneExpand } from "../../telemetry/events";
 import { SPLIT_BOUNDARY_EPSILON_S } from "../../utils/timelineElementSplit";
 import { isAudioTimelineElement, isMusicTrack } from "../../utils/timelineInspector";
-import { Music } from "../../icons/SystemIcons";
 import { renderClipChildren } from "./timelineClipChildren";
 
 /**
@@ -34,12 +38,16 @@ import { renderClipChildren } from "./timelineClipChildren";
  */
 export interface TimelineLaneBaseProps {
   pps: number;
+  contentOrigin: number;
+  contentGutter: number;
   trackContentWidth: number;
   theme: TimelineTheme;
   displayTrackOrder: number[];
+  rowHeights: readonly number[];
   trackOrder: number[];
   tracks: [number, TimelineElement[]][];
   trackStyles: Map<number, TrackVisualStyle>;
+  laneCounts: ReadonlyMap<string, number>;
   selectedElementId: string | null;
   selectedElementIds: Set<string>;
   hoveredClip: string | null;
@@ -69,15 +77,25 @@ export interface TimelineLaneBaseProps {
   getPreviewElement: (element: TimelineElement) => TimelineElement;
   getTrackStyle: (tag: string) => TrackVisualStyle;
   keyframeCache?: Map<string, KeyframeCacheEntry>;
+  gsapAnimations: Map<string, GsapAnimation[]>;
   selectedKeyframes: Set<string>;
   currentTime: number;
-  onClickKeyframe?: (element: TimelineElement, percentage: number) => void;
-  onShiftClickKeyframe?: (elementId: string, percentage: number) => void;
-  onContextMenuKeyframe?: (e: React.MouseEvent, elementId: string, percentage: number) => void;
+  onSeek?: (time: number) => void;
+  onSelectSegment?: (elementId: string, target: TimelineKeyframeTarget) => void;
+  onClickKeyframe?: (element: TimelineElement, target: TimelineKeyframeTarget) => void;
+  onShiftClickKeyframe?: (elementId: string, target: TimelineKeyframeTarget) => void;
+  onContextMenuKeyframe?: (
+    e: React.MouseEvent,
+    elementId: string,
+    target: TimelineKeyframeTarget,
+  ) => void;
   onMoveKeyframe?: (
     elementId: string,
     fromClipPercentage: number,
     toClipPercentage: number,
+    propertyGroup?: string,
+    tweenPercentage?: number,
+    animationId?: string,
   ) => void;
   onContextMenuClip?: (e: React.MouseEvent, element: TimelineElement) => void;
   /**
@@ -94,6 +112,7 @@ interface TimelineLanesProps extends TimelineLaneBaseProps {
   draggedElement: TimelineElement | null;
   multiDragPreview: MultiDragPreviewInput | null;
   onToggleTrackHidden: TimelineEditCallbacks["onToggleTrackHidden"];
+  onTogglePropertyGroupKeyframe: TimelineEditCallbacks["onTogglePropertyGroupKeyframe"];
   onResizeElement: TimelineEditCallbacks["onResizeElement"];
   onMoveElement: TimelineEditCallbacks["onMoveElement"];
   onRazorSplit: TimelineEditCallbacks["onRazorSplit"];
@@ -102,12 +121,16 @@ interface TimelineLanesProps extends TimelineLaneBaseProps {
 
 export function TimelineLanes({
   pps,
+  contentOrigin,
+  contentGutter,
   trackContentWidth,
   theme,
   displayTrackOrder,
+  rowHeights,
   trackOrder,
   tracks,
   trackStyles,
+  laneCounts,
   selectedElementId,
   selectedElementIds,
   hoveredClip,
@@ -132,8 +155,11 @@ export function TimelineLanes({
   getPreviewElement,
   getTrackStyle,
   keyframeCache,
+  gsapAnimations,
   selectedKeyframes,
   currentTime,
+  onSeek,
+  onSelectSegment,
   onClickKeyframe,
   onShiftClickKeyframe,
   onContextMenuKeyframe,
@@ -142,11 +168,19 @@ export function TimelineLanes({
   onContextMenuLane,
   beatAnalysis,
   onToggleTrackHidden,
+  onTogglePropertyGroupKeyframe,
   onResizeElement,
   onMoveElement,
   onRazorSplit,
   onRazorSplitAll,
 }: TimelineLanesProps) {
+  const expandedClipIds = usePlayerStore((s) => s.expandedClipIds);
+  const toggleClipExpanded = usePlayerStore((s) => s.toggleClipExpanded);
+  const toggleClipExpandedTracked = (key: string) => {
+    const willExpand = !expandedClipIds.has(key);
+    trackStudioKeyframeLaneExpand({ expanded: willExpand });
+    toggleClipExpanded(key);
+  };
   return (
     <>
       {
@@ -156,7 +190,8 @@ export function TimelineLanes({
         // bounded and virtualization's complexity isn't worth it. TODO: revisit and swap
         // in a virtualizer if editorial workflows ever push very high clip counts.
         // fallow-ignore-next-line complexity
-        displayTrackOrder.map((trackNum) => {
+        displayTrackOrder.map((trackNum, row) => {
+          const rowHeight = getTimelineRowHeight(row, rowHeights);
           const els = tracks.find(([t]) => t === trackNum)?.[1] ?? [];
           const ts = trackStyles.get(trackNum) ?? getTrackStyle("");
           const isPendingTrack =
@@ -173,58 +208,54 @@ export function TimelineLanes({
               : els.some(isMusicTrack));
           const isTrackHidden = els.length > 0 && els.every((element) => element.hidden === true);
           const isAudioTrack = els.length > 0 && els.some(isAudioTimelineElement);
+          // The one keyframed element this track shows lanes for (selected, else
+          // most lanes). A track can hold several elements; scoping to one keeps
+          // their keyframes from cramming into a single row.
+          const keyframeClip = STUDIO_KEYFRAMES_ENABLED
+            ? resolveTrackKeyframeClip(els, laneCounts, selectedElementId, selectedElementIds)
+            : null;
+          const keyframeClipKey = keyframeClip?.key ?? keyframeClip?.id;
+          const keyframeClipExpanded =
+            keyframeClipKey != null && expandedClipIds.has(keyframeClipKey);
           return (
-            <div key={trackNum} className="relative flex" style={{ height: TRACK_H }}>
-              <div
-                className="sticky left-0 z-[12] flex-shrink-0 flex flex-col items-center justify-center gap-0.5"
-                style={{
-                  width: GUTTER,
-                  background: theme.gutterBackground,
-                  borderRight: `1px solid ${theme.gutterBorder}`,
-                  borderBottom: `1px solid ${theme.rowBorder}`,
+            <div
+              key={trackNum}
+              className="relative flex"
+              style={{
+                height: rowHeight,
+                background: rowBackground,
+                borderBottom: `1px solid ${theme.rowBorder}`,
+              }}
+            >
+              <TimelineTrackHeader
+                trackNumber={trackNum}
+                trackLabel={els[0]?.label ?? els[0]?.domId ?? els[0]?.id ?? `Track ${trackNum}`}
+                contentOrigin={contentOrigin}
+                keyframeClip={keyframeClip}
+                isExpanded={keyframeClipExpanded}
+                animations={keyframeClipKey ? (gsapAnimations.get(keyframeClipKey) ?? []) : []}
+                currentTime={currentTime}
+                isTrackHidden={isTrackHidden}
+                isAudioTrack={isAudioTrack}
+                isActive={
+                  keyframeClipKey != null &&
+                  (selectedElementId === keyframeClipKey || selectedElementIds.has(keyframeClipKey))
+                }
+                isHovered={keyframeClipKey != null && hoveredClip === keyframeClipKey}
+                theme={theme}
+                onToggleClipExpanded={() => {
+                  if (keyframeClipKey) {
+                    toggleClipExpandedTracked(keyframeClipKey);
+                  }
                 }}
-              >
-                {isAudioTrack && (
-                  <Music size={12} weight="fill" aria-hidden="true" className="text-white/35" />
-                )}
-                <button
-                  type="button"
-                  aria-label={isTrackHidden ? `Show track ${trackNum}` : `Hide track ${trackNum}`}
-                  title={isTrackHidden ? `Show track ${trackNum}` : `Hide track ${trackNum}`}
-                  className={`flex h-6 w-6 items-center justify-center rounded border-0 bg-transparent p-0 transition-colors focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-[-1px] focus-visible:outline-[#3CE6AC] ${
-                    isTrackHidden
-                      ? "text-[#3CE6AC] hover:text-white"
-                      : "text-white/35 hover:text-white/75"
-                  }`}
-                  onPointerDown={(e) => {
-                    e.stopPropagation();
-                  }}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    void onToggleTrackHidden?.(trackNum, !isTrackHidden);
-                  }}
-                >
-                  {isTrackHidden ? (
-                    <EyeSlash size={14} weight="bold" aria-hidden="true" />
-                  ) : (
-                    <Eye size={14} weight="bold" aria-hidden="true" />
-                  )}
-                </button>
-              </div>
-              {/* Left breathing pad — empty lane surface before t=0, scrolling
-                  with the content (the horizontal TRACKS_TOP_PAD). Sits OUTSIDE
-                  the time-mapped content div so clip/beat/menu math stays
-                  content-relative (clip left = t·pps). */}
-              <div
-                aria-hidden="true"
-                className="flex-shrink-0"
-                style={{ width: TRACKS_LEFT_PAD }}
+                onToggleTrackHidden={onToggleTrackHidden}
+                onTogglePropertyGroupKeyframe={onTogglePropertyGroupKeyframe}
+                onSeek={onSeek}
               />
               <div
                 style={{
                   width: trackContentWidth,
-                  background: rowBackground,
-                  borderBottom: `1px solid ${theme.rowBorder}`,
+                  marginLeft: contentGutter, // room for a 0% diamond left of t=0
                   opacity: isTrackHidden ? 0.35 : 1,
                   transition: "opacity 120ms ease",
                 }}
@@ -282,6 +313,13 @@ export function TimelineLanes({
                   els.map((el) => {
                     const clipStyle = getTrackStyle(el.tag);
                     const elementKey = el.key ?? el.id;
+                    // Only the track's active keyframe clip shows expanded lanes;
+                    // other clips (incl. siblings on a shared track) show compact
+                    // diamonds on their own bar instead.
+                    const showsLanes =
+                      STUDIO_KEYFRAMES_ENABLED &&
+                      elementKey === keyframeClipKey &&
+                      keyframeClipExpanded;
                     const capabilities = getTimelineEditCapabilities(el);
                     const isSelected =
                       selectedElementId === elementKey || selectedElementIds.has(elementKey);
@@ -315,6 +353,7 @@ export function TimelineLanes({
                         el={previewElement}
                         pps={pps}
                         clipY={CLIP_Y}
+                        clipHeight={showsLanes ? TRACK_H - 2 * CLIP_Y : undefined}
                         isSelected={isSelected}
                         isHovered={hoveredClip === clipKey}
                         isDragging={false}
@@ -457,32 +496,80 @@ export function TimelineLanes({
                           renderClipContent,
                           renderClipOverlay,
                         )}
-                        {STUDIO_KEYFRAMES_ENABLED && keyframeCache?.get(elementKey) && (
-                          <TimelineClipDiamonds
-                            keyframesData={keyframeCache.get(elementKey)!}
-                            clipWidthPx={Math.max(previewElement.duration * pps, 4)}
-                            clipHeightPx={TRACK_H - 2 * CLIP_Y}
-                            beatsActive={beatStripOnTrack}
-                            accentColor={clipStyle.accent}
-                            isSelected={isSelected}
-                            currentPercentage={
-                              previewElement.duration > 0
-                                ? ((currentTime - previewElement.start) / previewElement.duration) *
-                                  100
-                                : 0
-                            }
-                            elementId={elementKey}
-                            selectedKeyframes={selectedKeyframes}
-                            onClickKeyframe={(pct) => onClickKeyframe?.(previewElement, pct)}
-                            onShiftClickKeyframe={onShiftClickKeyframe}
-                            onContextMenuKeyframe={onContextMenuKeyframe}
-                            onMoveKeyframe={onMoveKeyframe}
-                            suppressClickRef={suppressClickRef}
-                          />
-                        )}
+                        {STUDIO_KEYFRAMES_ENABLED &&
+                          !showsLanes &&
+                          keyframeCache?.get(elementKey) && (
+                            <TimelineClipDiamonds
+                              keyframesData={keyframeCache.get(elementKey)!}
+                              clipWidthPx={Math.max(previewElement.duration * pps, 4)}
+                              clipHeightPx={rowHeight - 2 * CLIP_Y}
+                              beatsActive={beatStripOnTrack}
+                              accentColor={clipStyle.accent}
+                              isSelected={isSelected}
+                              currentPercentage={
+                                previewElement.duration > 0
+                                  ? ((currentTime - previewElement.start) /
+                                      previewElement.duration) *
+                                    100
+                                  : 0
+                              }
+                              elementId={elementKey}
+                              selectedKeyframes={selectedKeyframes}
+                              onClickKeyframe={(pct) =>
+                                onClickKeyframe?.(previewElement, { percentage: pct })
+                              }
+                              onShiftClickKeyframe={(elId, pct) =>
+                                onShiftClickKeyframe?.(elId, { percentage: pct })
+                              }
+                              onContextMenuKeyframe={(e, elId, pct) =>
+                                onContextMenuKeyframe?.(e, elId, { percentage: pct })
+                              }
+                              onMoveKeyframe={onMoveKeyframe}
+                              onSelectSegment={onSelectSegment}
+                              suppressClickRef={suppressClickRef}
+                            />
+                          )}
                       </TimelineClip>
                     );
-                    if (!isPassenger) return clip;
+                    const propertyLanes = showsLanes && (
+                      <TimelinePropertyLanes
+                        key={`${clipKey}-property-lanes`}
+                        animations={gsapAnimations.get(elementKey) ?? []}
+                        clipStart={previewElement.start}
+                        clipDuration={previewElement.duration}
+                        clipLeftPx={previewElement.start * pps}
+                        clipWidthPx={Math.max(previewElement.duration * pps, 4)}
+                        accentColor={clipStyle.accent}
+                        isSelected={isSelected}
+                        currentPercentage={
+                          previewElement.duration > 0
+                            ? ((currentTime - previewElement.start) / previewElement.duration) * 100
+                            : 0
+                        }
+                        elementId={elementKey}
+                        selectedKeyframes={selectedKeyframes}
+                        onSelectSegment={(target) => onSelectSegment?.(elementKey, target)}
+                        onClickKeyframe={(target) => onClickKeyframe?.(previewElement, target)}
+                        onShiftClickKeyframe={(target) =>
+                          onShiftClickKeyframe?.(elementKey, target)
+                        }
+                        onContextMenuKeyframe={(e, target) =>
+                          onContextMenuKeyframe?.(e, elementKey, target)
+                        }
+                        onMoveKeyframe={(target, toClipPercentage) =>
+                          onMoveKeyframe?.(
+                            elementKey,
+                            target.percentage,
+                            toClipPercentage,
+                            target.propertyGroup,
+                            target.tweenPercentage,
+                            target.animationId,
+                          )
+                        }
+                        suppressClickRef={suppressClickRef}
+                      />
+                    );
+                    if (!isPassenger) return [clip, propertyLanes];
                     return (
                       <div
                         key={clipKey}
@@ -495,6 +582,7 @@ export function TimelineLanes({
                         }}
                       >
                         {clip}
+                        {propertyLanes}
                       </div>
                     );
                   })
diff --git a/packages/studio/src/player/components/TimelineOverlays.tsx b/packages/studio/src/player/components/TimelineOverlays.tsx
index bd0896e0be..449a968149 100644
--- a/packages/studio/src/player/components/TimelineOverlays.tsx
+++ b/packages/studio/src/player/components/TimelineOverlays.tsx
@@ -106,13 +106,11 @@ export function TimelineOverlays({
         <KeyframeDiamondContextMenu
           state={kfContextMenu}
           onClose={() => setKfContextMenu(null)}
-          onDelete={(elId, pct) => onDeleteKeyframe?.(elId, pct)}
+          onDelete={(...args) => onDeleteKeyframe?.(...args)}
           onDeleteAll={(elId) => onDeleteAllKeyframes?.(elId)}
           onChangeEase={(elId, pct, ease) => onChangeKeyframeEase?.(elId, pct, ease)}
           onMoveToPlayhead={
-            onMoveKeyframeToPlayhead
-              ? (elId, pct) => onMoveKeyframeToPlayhead(elId, pct)
-              : undefined
+            onMoveKeyframeToPlayhead ? (...args) => onMoveKeyframeToPlayhead(...args) : undefined
           }
           onCopyProperties={(elId, pct) => {
             const kfData = keyframeCache.get(elId);
diff --git a/packages/studio/src/player/components/TimelinePropertyLanes.test.tsx b/packages/studio/src/player/components/TimelinePropertyLanes.test.tsx
new file mode 100644
index 0000000000..5a7b261589
--- /dev/null
+++ b/packages/studio/src/player/components/TimelinePropertyLanes.test.tsx
@@ -0,0 +1,433 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import type { GsapAnimation, PropertyGroupName } from "@hyperframes/core/gsap-parser";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { TimelineClipDiamonds } from "./TimelineClipDiamonds";
+import {
+  getTimelinePropertyLanes,
+  TimelinePropertyLanes,
+  type TimelinePropertyLanesProps,
+} from "./TimelinePropertyLanes";
+import { timelineKeyframeSelectionKey } from "./timelineKeyframeIdentity";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+function animation(
+  id: string,
+  propertyGroup: PropertyGroupName,
+  keyframes: Array<{
+    percentage: number;
+    properties: Record<string, number | string>;
+    ease?: string;
+  }>,
+): GsapAnimation {
+  return {
+    id,
+    targetSelector: "#clip-1",
+    method: "to",
+    position: 0,
+    duration: 1,
+    properties: {},
+    propertyGroup,
+    keyframes: { format: "percentage", keyframes },
+  };
+}
+
+function flatAnimation(
+  id: string,
+  propertyGroup: PropertyGroupName,
+  properties: Record<string, number | string>,
+): GsapAnimation {
+  return {
+    id,
+    targetSelector: "#clip-1",
+    method: "to",
+    position: 0,
+    duration: 1,
+    properties,
+    propertyGroup,
+  };
+}
+
+function renderPropertyLanes(overrides: Partial<TimelinePropertyLanesProps> = {}): {
+  host: HTMLDivElement;
+  root: Root;
+} {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  act(() => {
+    root.render(
+      <TimelinePropertyLanes
+        animations={[]}
+        clipStart={0}
+        clipDuration={1}
+        clipLeftPx={0}
+        clipWidthPx={200}
+        accentColor="#4ba3d2"
+        isSelected
+        currentPercentage={-10}
+        elementId="clip-1"
+        selectedKeyframes={new Set()}
+        {...overrides}
+      />,
+    );
+  });
+  return { host, root };
+}
+
+function laneDiamonds(host: HTMLElement, group: string): HTMLButtonElement[] {
+  return Array.from(
+    host.querySelectorAll<HTMLButtonElement>(
+      `[data-property-group="${group}"] button[data-keyframe-percentage]`,
+    ),
+  );
+}
+
+function laneEaseButtons(host: HTMLElement, group: string): HTMLButtonElement[] {
+  return Array.from(
+    host.querySelectorAll<HTMLButtonElement>(
+      `[data-property-group="${group}"] button[data-keyframe-ease-button]`,
+    ),
+  );
+}
+
+function laneEaseSegments(host: HTMLElement, group: string): HTMLElement[] {
+  return Array.from(
+    host.querySelectorAll<HTMLElement>(
+      `[data-property-group="${group}"] [data-keyframe-ease-segment]`,
+    ),
+  );
+}
+
+// The mid-segment ease button is revealed on hover (Figma parity), so tests must
+// hover the segment strip before its button exists. React derives onMouseEnter
+// from a bubbling mouseover, so dispatching that is what arms the hover.
+function revealEaseButton(segment: HTMLElement): HTMLButtonElement | null {
+  act(() => {
+    segment.dispatchEvent(new MouseEvent("mouseover", { bubbles: true }));
+  });
+  return segment.querySelector<HTMLButtonElement>("button[data-keyframe-ease-button]");
+}
+
+const POSITION_SEGMENT_ANIMATION = animation("position-tween", "position", [
+  { percentage: 0, properties: { x: 0 } },
+  { percentage: 50, properties: { x: 50 } },
+]);
+
+describe("TimelinePropertyLanes", () => {
+  it("returns a position lane with synthesized endpoints for a flat tween", () => {
+    const lanes = getTimelinePropertyLanes(
+      [flatAnimation("position-tween", "position", { x: 420 })],
+      0,
+      1,
+    );
+
+    expect(lanes).toHaveLength(1);
+    expect(lanes[0]?.group).toBe("position");
+    expect(lanes[0]?.keyframes).toEqual([
+      {
+        percentage: 0,
+        tweenPercentage: 0,
+        properties: { x: 0 },
+        propertyGroup: "position",
+        animationId: "position-tween",
+      },
+      {
+        percentage: 100,
+        tweenPercentage: 100,
+        properties: { x: 420 },
+        propertyGroup: "position",
+        animationId: "position-tween",
+      },
+    ]);
+  });
+
+  it("returns both flat and authored keyframe property groups", () => {
+    const lanes = getTimelinePropertyLanes(
+      [
+        flatAnimation("position-tween", "position", { x: 420 }),
+        animation("visual-tween", "visual", [
+          { percentage: 0, properties: { opacity: 0 } },
+          { percentage: 100, properties: { opacity: 1 } },
+        ]),
+      ],
+      0,
+      1,
+    );
+
+    expect(lanes.map((lane) => lane.group)).toEqual(["position", "visual"]);
+    expect(lanes.map((lane) => lane.keyframes.map((keyframe) => keyframe.percentage))).toEqual([
+      [0, 100],
+      [0, 100],
+    ]);
+  });
+
+  it("renders each source property group at its independent keyframe positions", () => {
+    const animations = [
+      animation("position-tween", "position", [
+        { percentage: 0, properties: { x: 0, y: 0 } },
+        { percentage: 50, properties: { x: 100, y: 20 } },
+        { percentage: 100, properties: { x: 200, y: 40 } },
+      ]),
+      animation("visual-tween", "visual", [{ percentage: 25, properties: { opacity: 0.5 } }]),
+    ];
+
+    const { host, root } = renderPropertyLanes({ animations });
+    const position = laneDiamonds(host, "position");
+    const visual = laneDiamonds(host, "visual");
+
+    expect(position).toHaveLength(3);
+    expect(visual).toHaveLength(1);
+    // Diamonds are centered on their true keyframe time (0% at -half); the
+    // reserved left gutter (content origin inset, tested at the Timeline level)
+    // keeps the overflowing left half visible rather than clamping it inward.
+    expect(position.map((diamond) => diamond.style.left)).toEqual(["-11px", "89px", "189px"]);
+    expect(visual[0]?.style.left).toBe("39px");
+    expect(
+      host.querySelectorAll('[data-property-group="position"] [data-keyframe-connector]'),
+    ).toHaveLength(2);
+    act(() => root.unmount());
+  });
+
+  it("keeps both groups' diamonds when their source keyframes share 0% and 100%", () => {
+    const animations = [
+      animation("position-tween", "position", [
+        { percentage: 0, properties: { x: 0 } },
+        { percentage: 100, properties: { x: 100 } },
+      ]),
+      animation("visual-tween", "visual", [
+        { percentage: 0, properties: { opacity: 0 } },
+        { percentage: 100, properties: { opacity: 1 } },
+      ]),
+    ];
+
+    const { host, root } = renderPropertyLanes({ animations });
+
+    expect(
+      laneDiamonds(host, "position").map((diamond) => diamond.dataset.keyframePercentage),
+    ).toEqual(["0", "100"]);
+    expect(
+      laneDiamonds(host, "visual").map((diamond) => diamond.dataset.keyframePercentage),
+    ).toEqual(["0", "100"]);
+    act(() => root.unmount());
+  });
+
+  it("renders an authored hold keyframe whose value equals its predecessor", () => {
+    const animations = [
+      animation("position-tween", "position", [
+        { percentage: 0, properties: { x: 10 } },
+        { percentage: 50, properties: { x: 10 } },
+        { percentage: 100, properties: { x: 20 } },
+      ]),
+    ];
+
+    const { host, root } = renderPropertyLanes({ animations });
+
+    expect(
+      laneDiamonds(host, "position").map((diamond) => diamond.dataset.keyframePercentage),
+    ).toEqual(["0", "50", "100"]);
+    act(() => root.unmount());
+  });
+
+  it("keeps Position@50% selection distinct from Opacity@50%", () => {
+    const onClickKeyframe = vi.fn();
+    const animations = [
+      animation("position-tween", "position", [{ percentage: 50, properties: { x: 50 } }]),
+      animation("visual-tween", "visual", [{ percentage: 50, properties: { opacity: 0.5 } }]),
+    ];
+    const { host, root } = renderPropertyLanes({ animations, onClickKeyframe });
+    const position = laneDiamonds(host, "position")[0]!;
+
+    act(() => {
+      position.dispatchEvent(new MouseEvent("pointerup", { bubbles: true, button: 0 }));
+    });
+
+    const target = onClickKeyframe.mock.calls[0]?.[0];
+    expect(target).toEqual({
+      animationId: "position-tween",
+      percentage: 50,
+      propertyGroup: "position",
+      tweenPercentage: 50,
+    });
+
+    act(() => {
+      root.render(
+        <TimelinePropertyLanes
+          animations={animations}
+          clipStart={0}
+          clipDuration={1}
+          clipLeftPx={0}
+          clipWidthPx={200}
+          accentColor="#4ba3d2"
+          isSelected
+          currentPercentage={-10}
+          elementId="clip-1"
+          selectedKeyframes={new Set([timelineKeyframeSelectionKey("clip-1", target)])}
+        />,
+      );
+    });
+
+    const positionFill = laneDiamonds(host, "position")[0]?.querySelector("path:last-child");
+    const visualFill = laneDiamonds(host, "visual")[0]?.querySelector("path:last-child");
+    expect(positionFill?.getAttribute("fill")).toBe("#4ba3d2");
+    expect(visualFill?.getAttribute("fill")).toBe("#a3a3a3");
+    act(() => root.unmount());
+  });
+
+  it("reveals one midpoint ease button per segment on hover, regardless of selection", () => {
+    const animations = [
+      animation("position-tween", "position", [
+        { percentage: 0, properties: { x: 0 } },
+        { percentage: 50, properties: { x: 50 } },
+        { percentage: 100, properties: { x: 100 } },
+      ]),
+    ];
+    const { host, root } = renderPropertyLanes({ animations, onSelectSegment: vi.fn() });
+
+    const segments = laneEaseSegments(host, "position");
+    expect(segments).toHaveLength(2);
+    expect(segments.map((segment) => segment.style.left)).toEqual(["0px", "100px"]);
+    expect(laneDiamonds(host, "position")).toHaveLength(3);
+    // Resting state: no button until a segment is hovered.
+    expect(laneEaseButtons(host, "position")).toHaveLength(0);
+
+    // Hovering reveals exactly one button — the hovered segment's.
+    expect(revealEaseButton(segments[0]!)).not.toBeNull();
+    expect(laneEaseButtons(host, "position")).toHaveLength(1);
+
+    // The ease button is available on hover even when the element is NOT selected
+    // (a lane shows for the track's active/primary clip, not only the selected one).
+    act(() => {
+      root.render(
+        <TimelinePropertyLanes
+          animations={animations}
+          clipStart={0}
+          clipDuration={1}
+          clipLeftPx={0}
+          clipWidthPx={200}
+          accentColor="#4ba3d2"
+          isSelected={false}
+          currentPercentage={-10}
+          elementId="clip-1"
+          selectedKeyframes={new Set()}
+          onSelectSegment={vi.fn()}
+        />,
+      );
+    });
+    const unselectedSegments = laneEaseSegments(host, "position");
+    expect(unselectedSegments).toHaveLength(2);
+    expect(revealEaseButton(unselectedSegments[0]!)).not.toBeNull();
+    act(() => root.unmount());
+  });
+
+  it("reveals each segment's button with its destination keyframe ease curve", () => {
+    const animations = [
+      animation("position-tween", "position", [
+        { percentage: 0, properties: { x: 0 } },
+        { percentage: 33, properties: { x: 33 }, ease: "none" },
+        { percentage: 66, properties: { x: 66 }, ease: "power2.out" },
+        {
+          percentage: 100,
+          properties: { x: 100 },
+          ease: "custom(M0,0 C0.1,0.2 0.3,0.9 1,1)",
+        },
+      ]),
+    ];
+    const { host, root } = renderPropertyLanes({ animations, onSelectSegment: vi.fn() });
+
+    const segments = laneEaseSegments(host, "position");
+    expect(segments).toHaveLength(3);
+    const paths = segments.map((segment) =>
+      revealEaseButton(segment)?.querySelector("path")?.getAttribute("d"),
+    );
+    expect(paths).toHaveLength(3);
+    expect(new Set(paths).size).toBe(3);
+    act(() => root.unmount());
+  });
+
+  it("selects the destination keyframe when a hovered segment's ease button is clicked", () => {
+    const onSelectSegment = vi.fn();
+    const { host, root } = renderPropertyLanes({
+      animations: [POSITION_SEGMENT_ANIMATION],
+      onSelectSegment,
+    });
+
+    const button = revealEaseButton(laneEaseSegments(host, "position")[0]!);
+    act(() => button?.click());
+
+    expect(onSelectSegment).toHaveBeenCalledWith({
+      animationId: "position-tween",
+      percentage: 50,
+      propertyGroup: "position",
+      tweenPercentage: 50,
+    });
+    act(() => root.unmount());
+  });
+
+  it("routes a colliding Position segment to the Position animation", () => {
+    const onSelectSegment = vi.fn();
+    const animations = [
+      POSITION_SEGMENT_ANIMATION,
+      animation("visual-tween", "visual", [
+        { percentage: 0, properties: { opacity: 0 } },
+        { percentage: 50, properties: { opacity: 0.5 } },
+      ]),
+    ];
+    const { host, root } = renderPropertyLanes({ animations, onSelectSegment });
+
+    const button = revealEaseButton(laneEaseSegments(host, "position")[0]!);
+    act(() => button?.click());
+
+    expect(onSelectSegment.mock.calls[0]?.[0]).toMatchObject({
+      animationId: "position-tween",
+      propertyGroup: "position",
+    });
+    act(() => root.unmount());
+  });
+
+  it("keeps the collapsed TimelineClipDiamonds positions and callback contract unchanged", () => {
+    const onClickKeyframe = vi.fn();
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    act(() => {
+      root.render(
+        <TimelineClipDiamonds
+          keyframesData={{
+            format: "percentage",
+            keyframes: [
+              { percentage: 0, properties: { x: 0 } },
+              { percentage: 50, properties: { x: 100 } },
+            ],
+          }}
+          clipWidthPx={200}
+          clipHeightPx={48}
+          accentColor="#4ba3d2"
+          isSelected
+          currentPercentage={-10}
+          elementId="clip-1"
+          selectedKeyframes={new Set(["clip-1:50"])}
+          onClickKeyframe={onClickKeyframe}
+        />,
+      );
+    });
+    const diamonds = Array.from(host.querySelectorAll<HTMLButtonElement>("button"));
+
+    // Unified keyframe-diamond size (LANE_H·ratio ≈ 22px, half 11) on collapsed
+    // clips too, so 0% sits at -11px regardless of clip-bar height.
+    expect(diamonds.map((diamond) => diamond.style.left)).toEqual(["-11px", "89px"]);
+    expect(diamonds[1]?.querySelector("path:last-child")?.getAttribute("fill")).toBe("#4ba3d2");
+    act(() => {
+      diamonds[1]?.dispatchEvent(new MouseEvent("pointerup", { bubbles: true, button: 0 }));
+    });
+    expect(onClickKeyframe).toHaveBeenCalledWith(50);
+    act(() => root.unmount());
+  });
+});
diff --git a/packages/studio/src/player/components/TimelinePropertyLanes.tsx b/packages/studio/src/player/components/TimelinePropertyLanes.tsx
new file mode 100644
index 0000000000..6fb51c7219
--- /dev/null
+++ b/packages/studio/src/player/components/TimelinePropertyLanes.tsx
@@ -0,0 +1,163 @@
+import type { MouseEvent as ReactMouseEvent, RefObject } from "react";
+import {
+  classifyPropertyGroup,
+  type GsapAnimation,
+  type PropertyGroupName,
+} from "@hyperframes/core/gsap-parser";
+import { toAbsoluteTime } from "../../hooks/gsapShared";
+import { synthesizeFlatTweenKeyframes } from "../../hooks/gsapTweenSynth";
+import { TimelineDiamondLane, type TimelineDiamondKeyframe } from "./TimelineClipDiamonds";
+import { LANE_H, getTimelineLaneTop } from "./timelineLayout";
+import type { TimelineKeyframeTarget } from "./timelineKeyframeIdentity";
+
+export interface TimelinePropertyLanesProps {
+  animations: readonly GsapAnimation[];
+  clipStart: number;
+  clipDuration: number;
+  clipLeftPx: number;
+  clipWidthPx: number;
+  accentColor: string;
+  isSelected: boolean;
+  currentPercentage: number;
+  elementId: string;
+  selectedKeyframes: ReadonlySet<string>;
+  onSelectSegment?: (target: TimelineKeyframeTarget) => void;
+  onClickKeyframe?: (target: TimelineKeyframeTarget) => void;
+  onShiftClickKeyframe?: (target: TimelineKeyframeTarget) => void;
+  onContextMenuKeyframe?: (e: ReactMouseEvent, target: TimelineKeyframeTarget) => void;
+  onMoveKeyframe?: (target: TimelineKeyframeTarget, toClipPercentage: number) => void;
+  suppressClickRef?: RefObject<boolean>;
+}
+
+function hasGroupProperty(
+  properties: Record<string, number | string>,
+  group: PropertyGroupName,
+): boolean {
+  return Object.keys(properties).some((property) => classifyPropertyGroup(property) === group);
+}
+
+/** The tween's editable keyframes: its real keyframes, or the start→end pair
+ *  synthesized for a flat tween. Empty for a tween that animates nothing. */
+function animationKeyframes(animation: GsapAnimation) {
+  return animation.keyframes?.keyframes ?? synthesizeFlatTweenKeyframes(animation)?.keyframes ?? [];
+}
+
+/** A tween contributes a property lane when it has a group and at least one
+ *  editable keyframe (real or synthesized). */
+export function animationContributesLane(animation: GsapAnimation): boolean {
+  return !!animation.propertyGroup && animationKeyframes(animation).length > 0;
+}
+
+function sourceGroups(animations: readonly GsapAnimation[]) {
+  const groups = new Map<PropertyGroupName, GsapAnimation[]>();
+  for (const animation of animations) {
+    if (!animation.propertyGroup || !animationContributesLane(animation)) continue;
+    const groupAnimations = groups.get(animation.propertyGroup) ?? [];
+    groupAnimations.push(animation);
+    groups.set(animation.propertyGroup, groupAnimations);
+  }
+  return groups;
+}
+
+function groupKeyframes(
+  animations: readonly GsapAnimation[],
+  group: PropertyGroupName,
+  clipStart: number,
+  clipDuration: number,
+): TimelineDiamondKeyframe[] {
+  const keyframes: TimelineDiamondKeyframe[] = [];
+  for (const animation of animations) {
+    const tweenStart =
+      animation.resolvedStart ?? (typeof animation.position === "number" ? animation.position : 0);
+    const tweenDuration = animation.duration ?? clipDuration;
+    for (const keyframe of animationKeyframes(animation)) {
+      if (!hasGroupProperty(keyframe.properties, group)) continue;
+      const absoluteTime = toAbsoluteTime(tweenStart, tweenDuration, keyframe.percentage);
+      keyframes.push({
+        ...keyframe,
+        percentage: ((absoluteTime - clipStart) / clipDuration) * 100,
+        tweenPercentage: keyframe.percentage,
+        propertyGroup: group,
+        animationId: animation.id,
+      });
+    }
+  }
+  return keyframes;
+}
+
+export function getTimelinePropertyLanes(
+  animations: readonly GsapAnimation[],
+  clipStart: number,
+  clipDuration: number,
+) {
+  if (clipDuration <= 0) return [];
+  return Array.from(sourceGroups(animations), ([group, groupAnimations]) => ({
+    group,
+    animations: groupAnimations,
+    keyframes: groupKeyframes(groupAnimations, group, clipStart, clipDuration),
+  })).filter((lane) => lane.keyframes.length > 0);
+}
+
+export function TimelinePropertyLanes({
+  animations,
+  clipStart,
+  clipDuration,
+  clipLeftPx,
+  clipWidthPx,
+  accentColor,
+  isSelected,
+  currentPercentage,
+  elementId,
+  selectedKeyframes,
+  onSelectSegment,
+  onClickKeyframe,
+  onShiftClickKeyframe,
+  onContextMenuKeyframe,
+  onMoveKeyframe,
+  suppressClickRef,
+}: TimelinePropertyLanesProps) {
+  if (clipWidthPx < 20 || clipDuration <= 0) return null;
+  const lanes = getTimelinePropertyLanes(animations, clipStart, clipDuration);
+
+  if (lanes.length === 0) return null;
+  return (
+    <>
+      {lanes.map(({ group, animations: groupAnimations, keyframes }, laneIndex) => (
+        <div
+          key={group}
+          data-property-group={group}
+          data-timeline-property-lane=""
+          data-timeline-lane-top={getTimelineLaneTop(laneIndex)}
+          className="absolute"
+          style={{
+            left: clipLeftPx,
+            top: getTimelineLaneTop(laneIndex),
+            width: clipWidthPx,
+            height: LANE_H,
+          }}
+        >
+          <TimelineDiamondLane
+            keyframesData={{ format: "percentage", keyframes }}
+            globalEase={
+              groupAnimations[0]?.keyframes?.easeEach ?? groupAnimations[0]?.ease ?? "none"
+            }
+            clipWidthPx={clipWidthPx}
+            clipHeightPx={LANE_H}
+            accentColor={accentColor}
+            isSelected={isSelected}
+            currentPercentage={currentPercentage}
+            elementId={elementId}
+            selectedKeyframes={selectedKeyframes}
+            onSelectSegment={onSelectSegment}
+            onClickKeyframe={onClickKeyframe}
+            onShiftClickKeyframe={onShiftClickKeyframe}
+            onContextMenuKeyframe={onContextMenuKeyframe}
+            onMoveKeyframe={onMoveKeyframe}
+            suppressClickRef={suppressClickRef}
+            groupAware
+          />
+        </div>
+      ))}
+    </>
+  );
+}
diff --git a/packages/studio/src/player/components/TimelineRuler.tsx b/packages/studio/src/player/components/TimelineRuler.tsx
index fe8fac5f18..5356341bbe 100644
--- a/packages/studio/src/player/components/TimelineRuler.tsx
+++ b/packages/studio/src/player/components/TimelineRuler.tsx
@@ -1,6 +1,6 @@
 import { memo } from "react";
 import type { TimelineTheme } from "./timelineTheme";
-import { GUTTER, RULER_H, TRACKS_LEFT_PAD, formatTimelineTickLabel } from "./timelineLayout";
+import { RULER_H, formatTimelineTickLabel } from "./timelineLayout";
 import { usePlayerStore } from "../store/playerStore";
 import { secondsToFrame } from "../lib/time";
 import type { MusicBeatAnalysis } from "@hyperframes/core/beats";
@@ -15,6 +15,7 @@ interface TimelineRulerProps {
   majorTickInterval: number;
   theme: TimelineTheme;
   beatAnalysis?: MusicBeatAnalysis | null;
+  contentOrigin: number;
 }
 
 export const TimelineRuler = memo(function TimelineRuler({
@@ -27,6 +28,7 @@ export const TimelineRuler = memo(function TimelineRuler({
   majorTickInterval,
   theme,
   beatAnalysis,
+  contentOrigin,
 }: TimelineRulerProps) {
   const timeDisplayMode = usePlayerStore((s) => s.timeDisplayMode);
   const beatTimes = beatAnalysis?.beatTimes ?? [];
@@ -45,7 +47,7 @@ export const TimelineRuler = memo(function TimelineRuler({
           the ruler's own small ticks mark intervals (no full-height lines). */}
       <svg
         className="absolute pointer-events-none"
-        style={{ left: GUTTER + TRACKS_LEFT_PAD, width: trackContentWidth, zIndex: 0 }}
+        style={{ left: contentOrigin, width: trackContentWidth, zIndex: 0 }}
         height={totalH}
       >
         {showBeats &&
@@ -69,35 +71,23 @@ export const TimelineRuler = memo(function TimelineRuler({
       </svg>
 
       {/* Ruler — sticky so the timestamps stay visible while the tracks scroll
-          vertically. Opaque background (plus the gutter corner block) so clips
+          vertically. Opaque background (plus the label-column corner block) so clips
           scrolling underneath don't bleed through; z-index sits above the track
           rows and drag overlays but below the playhead (z 100). */}
       <div
         className="sticky top-0 flex"
-        style={{
-          height: RULER_H,
-          width: GUTTER + TRACKS_LEFT_PAD + trackContentWidth,
-          zIndex: 70,
-        }}
+        style={{ height: RULER_H, width: contentOrigin + trackContentWidth, zIndex: 70 }}
       >
         <div
           className="sticky left-0 z-[12] flex-shrink-0"
           style={{
-            width: GUTTER,
-            // Ruler corner uses the panel surface — same as the ruler strip
-            // itself, and NO right border: the ruler band stays completely
-            // clean until 00:00 (the header-boundary line belongs to the track
-            // rows below, not the ruler).
+            width: contentOrigin,
+            // Ruler corner uses the panel surface — same as the ruler strip itself.
             background: theme.shellBackground,
           }}
         />
-        {/* Left breathing pad — scrolls with the content, so 00:00 starts a
-            beat right of the gutter (see TRACKS_LEFT_PAD). */}
-        <div
-          aria-hidden="true"
-          className="flex-shrink-0"
-          style={{ width: TRACKS_LEFT_PAD, background: theme.shellBackground }}
-        />
+        {/* Breathing pad before 00:00 is folded into contentOrigin (see
+            Timeline.tsx: GUTTER + TRACKS_LEFT_PAD), so no separate pad div. */}
         <div
           className="relative overflow-hidden"
           style={{
@@ -110,7 +100,7 @@ export const TimelineRuler = memo(function TimelineRuler({
         >
           {/* Each 1px tick line is shifted -0.5px so its CENTER sits exactly on
               t * pps — matching the playhead line, which is also centered on
-              GUTTER + t * pps (see getTimelinePlayheadLeft). Without the shift
+              contentOrigin + t * pps (see getTimelinePlayheadLeft). Without the shift
               a tick spans [x, x+1) and its center is half a pixel right. */}
           {minor.map((t) => (
             <div key={`m-${t}`} className="absolute bottom-0" style={{ left: t * pps - 0.5 }}>
diff --git a/packages/studio/src/player/components/TimelineTrackHeader.test.tsx b/packages/studio/src/player/components/TimelineTrackHeader.test.tsx
new file mode 100644
index 0000000000..57d6fb127c
--- /dev/null
+++ b/packages/studio/src/player/components/TimelineTrackHeader.test.tsx
@@ -0,0 +1,262 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import type { GsapAnimation, PropertyGroupName } from "@hyperframes/core/gsap-parser";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { TimelinePropertyLanes } from "./TimelinePropertyLanes";
+import { TimelineTrackHeader } from "./TimelineTrackHeader";
+import { defaultTimelineTheme } from "./timelineTheme";
+import type { TimelineElement } from "../store/playerStore";
+import type { TimelineEditCallbacks } from "./timelineCallbacks";
+import { LABEL_COL_W } from "./timelineLayout";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+const ELEMENT: TimelineElement = {
+  id: "clip-1",
+  label: "Hero card",
+  tag: "div",
+  start: 0,
+  duration: 2,
+  track: 0,
+};
+
+function animation(
+  id: string,
+  propertyGroup: PropertyGroupName,
+  keyframes: Array<{
+    percentage: number;
+    properties: Record<string, number | string>;
+  }>,
+): GsapAnimation {
+  return {
+    id,
+    targetSelector: "#clip-1",
+    method: "to",
+    position: 0,
+    duration: 2,
+    properties: {},
+    propertyGroup,
+    keyframes: { format: "percentage", keyframes },
+  };
+}
+
+const POSITION = animation("position-tween", "position", [
+  { percentage: 0, properties: { x: 0, y: 0 } },
+  { percentage: 50, properties: { x: 100, y: 50 } },
+  { percentage: 100, properties: { x: 200, y: 100 } },
+]);
+
+const OPACITY = animation("opacity-tween", "visual", [
+  { percentage: 0, properties: { opacity: 0 } },
+  { percentage: 50, properties: { opacity: 0.5 } },
+  { percentage: 100, properties: { opacity: 1 } },
+]);
+
+interface RenderHeaderOptions {
+  animations?: GsapAnimation[];
+  currentTime?: number;
+  expanded?: boolean;
+  onSeek?: (time: number) => void;
+  onTogglePropertyGroupKeyframe?: TimelineEditCallbacks["onTogglePropertyGroupKeyframe"];
+}
+
+function renderHeader(options: RenderHeaderOptions = {}): {
+  host: HTMLDivElement;
+  root: Root;
+  rerender: (next: RenderHeaderOptions) => void;
+} {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  const render = (next: RenderHeaderOptions) => {
+    act(() => {
+      root.render(
+        <TimelineTrackHeader
+          trackNumber={0}
+          trackLabel="Hero card"
+          contentOrigin={LABEL_COL_W}
+          keyframeClip={ELEMENT}
+          isExpanded={next.expanded !== false}
+          animations={next.animations ?? [POSITION, OPACITY]}
+          currentTime={next.currentTime ?? 0}
+          isTrackHidden={false}
+          isAudioTrack={false}
+          isActive
+          isHovered={false}
+          theme={defaultTimelineTheme}
+          onToggleClipExpanded={vi.fn()}
+          onToggleTrackHidden={vi.fn()}
+          onTogglePropertyGroupKeyframe={next.onTogglePropertyGroupKeyframe}
+          onSeek={next.onSeek}
+        />,
+      );
+    });
+  };
+  render(options);
+  return { host, root, rerender: render };
+}
+
+function click(host: HTMLElement, label: string) {
+  const button = host.querySelector<HTMLButtonElement>(`button[aria-label="${label}"]`);
+  expect(button).not.toBeNull();
+  act(() => button?.click());
+}
+
+describe("TimelineTrackHeader", () => {
+  it("adds and removes a keyframe on the explicitly targeted property-group tween", () => {
+    const onTogglePropertyGroupKeyframe = vi.fn();
+    const view = renderHeader({ currentTime: 0.5, onTogglePropertyGroupKeyframe });
+
+    click(view.host, "Toggle Opacity keyframe");
+    expect(onTogglePropertyGroupKeyframe).toHaveBeenLastCalledWith(
+      ELEMENT,
+      expect.objectContaining({
+        animationId: "opacity-tween",
+        propertyGroup: "visual",
+        tweenPercentage: 25,
+        properties: { opacity: 0.25 },
+        remove: false,
+      }),
+    );
+
+    view.rerender({ currentTime: 1, onTogglePropertyGroupKeyframe });
+    click(view.host, "Toggle Opacity keyframe");
+    expect(onTogglePropertyGroupKeyframe).toHaveBeenLastCalledWith(
+      ELEMENT,
+      expect.objectContaining({
+        animationId: "opacity-tween",
+        propertyGroup: "visual",
+        tweenPercentage: 50,
+        properties: { opacity: 0.5 },
+        remove: true,
+      }),
+    );
+    expect(onTogglePropertyGroupKeyframe).not.toHaveBeenCalledWith(
+      ELEMENT,
+      expect.objectContaining({ animationId: "position-tween" }),
+    );
+    act(() => view.root.unmount());
+  });
+
+  it("seeks only to the selected group's adjacent keyframes", () => {
+    const onSeek = vi.fn();
+    const view = renderHeader({
+      currentTime: 1,
+      animations: [
+        POSITION,
+        animation("opacity-tween", "visual", [
+          { percentage: 25, properties: { opacity: 0.25 } },
+          { percentage: 50, properties: { opacity: 0.5 } },
+          { percentage: 75, properties: { opacity: 0.75 } },
+        ]),
+      ],
+      onSeek,
+    });
+
+    click(view.host, "Next Position keyframe");
+    expect(onSeek).toHaveBeenLastCalledWith(2);
+    click(view.host, "Previous Position keyframe");
+    expect(onSeek).toHaveBeenLastCalledWith(0);
+    expect(onSeek).not.toHaveBeenCalledWith(1.5);
+    act(() => view.root.unmount());
+  });
+
+  it("fills the toggle diamond exactly at that group's keyframe", () => {
+    const view = renderHeader({ currentTime: 0.5 });
+    const positionToggle = view.host.querySelector<HTMLButtonElement>(
+      'button[aria-label="Toggle Position keyframe"]',
+    );
+    expect(positionToggle?.textContent).toBe("◇");
+
+    view.rerender({ currentTime: 1 });
+    expect(
+      view.host.querySelector<HTMLButtonElement>('button[aria-label="Toggle Position keyframe"]')
+        ?.textContent,
+    ).toBe("◆");
+    act(() => view.root.unmount());
+  });
+
+  it("updates formatted group values when the playhead moves", () => {
+    const view = renderHeader({ currentTime: 0.5 });
+    expect(view.host.querySelector('[data-property-group="position"]')?.textContent).toContain(
+      "50, 25",
+    );
+    expect(view.host.querySelector('[data-property-group="visual"]')?.textContent).toContain("25%");
+
+    view.rerender({ currentTime: 1.5 });
+    expect(view.host.querySelector('[data-property-group="position"]')?.textContent).toContain(
+      "150, 75",
+    );
+    expect(view.host.querySelector('[data-property-group="visual"]')?.textContent).toContain("75%");
+    act(() => view.root.unmount());
+  });
+
+  it("disables the previous chevron at or before the group's first keyframe", () => {
+    const view = renderHeader({ currentTime: 0 });
+    const prevAt0 = view.host.querySelector<HTMLButtonElement>(
+      'button[aria-label="Previous Position keyframe"]',
+    );
+    expect(prevAt0).not.toBeNull();
+    expect(prevAt0?.disabled).toBe(true);
+
+    view.rerender({ currentTime: 1 });
+    const prevAt1 = view.host.querySelector<HTMLButtonElement>(
+      'button[aria-label="Previous Position keyframe"]',
+    );
+    expect(prevAt1?.disabled).toBe(false);
+    act(() => view.root.unmount());
+  });
+
+  it("uses the same lane row offsets when collapsed, expanded once, and expanded multiple times", () => {
+    const view = renderHeader({ expanded: false });
+    expect(view.host.querySelectorAll("[data-timeline-lane-top]")).toHaveLength(0);
+
+    const assertAligned = (animations: GsapAnimation[]) => {
+      view.rerender({ animations });
+      const lanesHost = document.createElement("div");
+      document.body.append(lanesHost);
+      const lanesRoot = createRoot(lanesHost);
+      act(() => {
+        lanesRoot.render(
+          <TimelinePropertyLanes
+            animations={animations}
+            clipStart={0}
+            clipDuration={2}
+            clipLeftPx={120}
+            clipWidthPx={200}
+            accentColor="#3CE6AC"
+            isSelected
+            currentPercentage={0}
+            elementId="clip-1"
+            selectedKeyframes={new Set()}
+          />,
+        );
+      });
+      expect(
+        Array.from(view.host.querySelectorAll<HTMLElement>("[data-timeline-lane-top]")).map(
+          (row) => row.style.top,
+        ),
+      ).toEqual(
+        Array.from(lanesHost.querySelectorAll<HTMLElement>("[data-timeline-lane-top]")).map(
+          (row) => row.style.top,
+        ),
+      );
+      expect(
+        Array.from(lanesHost.querySelectorAll<HTMLElement>("[data-timeline-property-lane]")).map(
+          (row) => row.style.left,
+        ),
+      ).toEqual(animations.map(() => "120px"));
+      act(() => lanesRoot.unmount());
+    };
+
+    assertAligned([POSITION]);
+    assertAligned([POSITION, OPACITY]);
+    act(() => view.root.unmount());
+  });
+});
diff --git a/packages/studio/src/player/components/TimelineTrackHeader.tsx b/packages/studio/src/player/components/TimelineTrackHeader.tsx
new file mode 100644
index 0000000000..e27812aab9
--- /dev/null
+++ b/packages/studio/src/player/components/TimelineTrackHeader.tsx
@@ -0,0 +1,552 @@
+import { useState } from "react";
+import { Eye, EyeSlash } from "@phosphor-icons/react";
+import {
+  classifyPropertyGroup,
+  type GsapAnimation,
+  type PropertyGroupName,
+} from "@hyperframes/core/gsap-parser";
+import {
+  clipToTweenPercentage,
+  getKeyframeNavigationState,
+} from "../../components/editor/KeyframeNavigation";
+import { Music } from "../../icons/SystemIcons";
+import {
+  absoluteToPercentageForAnimation,
+  isTimeWithinTween,
+  resolveTweenDuration,
+  resolveTweenStart,
+} from "../../utils/globalTimeCompiler";
+import type { TimelineElement } from "../store/playerStore";
+import type {
+  TimelineEditCallbacks,
+  TimelinePropertyGroupKeyframeToggle,
+} from "./timelineCallbacks";
+import { getTimelinePropertyLanes } from "./TimelinePropertyLanes";
+import { LayerDisclosureRow } from "./LayerDisclosureRow";
+import { LABEL_COL_W, LANE_H, getTimelineLaneTop } from "./timelineLayout";
+import type { TimelineTheme } from "./timelineTheme";
+
+interface TimelineTrackHeaderProps {
+  trackNumber: number;
+  trackLabel: string;
+  contentOrigin: number;
+  /** The track's active keyframe clip (selected, else primary) — the one whose
+   *  disclosure + property rows this header shows, whether expanded or not. */
+  keyframeClip: TimelineElement | null;
+  isExpanded: boolean;
+  animations: readonly GsapAnimation[];
+  currentTime: number;
+  isTrackHidden: boolean;
+  isAudioTrack: boolean;
+  isActive: boolean;
+  isHovered: boolean;
+  theme: TimelineTheme;
+  onToggleClipExpanded: () => void;
+  onToggleTrackHidden: TimelineEditCallbacks["onToggleTrackHidden"];
+  onTogglePropertyGroupKeyframe?: TimelineEditCallbacks["onTogglePropertyGroupKeyframe"];
+  onSeek?: (time: number) => void;
+}
+
+function roundValue(value: number): string {
+  return String(Math.round(value * 100) / 100);
+}
+
+function propertyValueAt(
+  animation: GsapAnimation,
+  property: string,
+  tweenPercentage: number,
+): number | string | undefined {
+  const keyframes = animation.keyframes?.keyframes ?? [];
+  const values = keyframes
+    .filter((keyframe) => property in keyframe.properties)
+    .map((keyframe) => ({
+      percentage: keyframe.percentage,
+      value: keyframe.properties[property],
+    }));
+  const before = values.filter((value) => value.percentage <= tweenPercentage).at(-1);
+  const after = values.find((value) => value.percentage >= tweenPercentage);
+  if (!before) return after?.value;
+  if (!after) return before.value;
+  if (
+    typeof before.value !== "number" ||
+    typeof after.value !== "number" ||
+    before.percentage === after.percentage
+  ) {
+    return before.value;
+  }
+  const progress = (tweenPercentage - before.percentage) / (after.percentage - before.percentage);
+  return before.value + (after.value - before.value) * progress;
+}
+
+function valuesAt(
+  animation: GsapAnimation,
+  group: PropertyGroupName,
+  tweenPercentage: number,
+): Record<string, number | string> {
+  const propertyNames = new Set<string>();
+  for (const keyframe of animation.keyframes?.keyframes ?? []) {
+    for (const property of Object.keys(keyframe.properties)) {
+      if (classifyPropertyGroup(property) === group) propertyNames.add(property);
+    }
+  }
+  const values: Record<string, number | string> = {};
+  for (const property of propertyNames) {
+    const value = propertyValueAt(animation, property, tweenPercentage);
+    if (value !== undefined) values[property] = value;
+  }
+  return values;
+}
+
+function groupLabel(group: PropertyGroupName, properties: Record<string, number | string>): string {
+  if (group === "visual" && ("opacity" in properties || "autoAlpha" in properties)) {
+    return "Opacity";
+  }
+  if (group !== "other") return `${group[0]?.toUpperCase() ?? ""}${group.slice(1)}`;
+  const property = Object.keys(properties)[0];
+  return property ? `${property[0]?.toUpperCase() ?? ""}${property.slice(1)}` : "Other";
+}
+
+type LaneValues = Record<string, number | string>;
+
+function defaultValueReadout(values: LaneValues): string {
+  return Object.values(values)
+    .map((value) => (typeof value === "number" ? roundValue(value) : value))
+    .join(", ");
+}
+
+function positionValueReadout(values: LaneValues): string | null {
+  const x = values.x;
+  const y = values.y;
+  return typeof x === "number" && typeof y === "number"
+    ? `${roundValue(x)}, ${roundValue(y)}`
+    : null;
+}
+
+function rotationValueReadout(values: LaneValues): string | null {
+  return typeof values.rotation === "number" ? `${roundValue(values.rotation)}°` : null;
+}
+
+function visualValueReadout(values: LaneValues): string | null {
+  const opacity = values.opacity ?? values.autoAlpha;
+  return typeof opacity === "number"
+    ? `${roundValue(Math.abs(opacity) <= 1 ? opacity * 100 : opacity)}%`
+    : null;
+}
+
+const GROUP_VALUE_READOUTS: Partial<
+  Record<PropertyGroupName, (values: LaneValues) => string | null>
+> = {
+  position: positionValueReadout,
+  rotation: rotationValueReadout,
+  visual: visualValueReadout,
+};
+
+function valueReadout(group: PropertyGroupName, values: Record<string, number | string>): string {
+  return GROUP_VALUE_READOUTS[group]?.(values) ?? defaultValueReadout(values);
+}
+
+function VisibilityButton({
+  hidden,
+  trackNumber,
+  visible,
+  onToggle,
+}: {
+  hidden: boolean;
+  trackNumber: number;
+  visible: boolean;
+  onToggle: TimelineEditCallbacks["onToggleTrackHidden"];
+}) {
+  if (!visible) return <span aria-hidden="true" className="h-6 w-6 shrink-0" />;
+  const label = hidden ? `Show track ${trackNumber}` : `Hide track ${trackNumber}`;
+  return (
+    <button
+      type="button"
+      aria-label={label}
+      title={label}
+      className={`flex h-6 w-6 shrink-0 items-center justify-center rounded border-0 bg-transparent p-0 transition-colors focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-[-1px] focus-visible:outline-[#3CE6AC] ${
+        hidden ? "text-[#3CE6AC] hover:text-white" : "text-white/35 hover:text-white/75"
+      }`}
+      onPointerDown={(event) => event.stopPropagation()}
+      onClick={(event) => {
+        event.stopPropagation();
+        void onToggle?.(trackNumber, !hidden);
+      }}
+    >
+      {hidden ? (
+        <EyeSlash size={14} weight="bold" aria-hidden="true" />
+      ) : (
+        <Eye size={14} weight="bold" aria-hidden="true" />
+      )}
+    </button>
+  );
+}
+
+function LegacyTrackHeader({
+  trackNumber,
+  trackLabel,
+  showTrackLabel,
+  isTrackHidden,
+  isAudioTrack,
+  onToggleTrackHidden,
+}: Pick<
+  TimelineTrackHeaderProps,
+  "trackNumber" | "trackLabel" | "isTrackHidden" | "isAudioTrack" | "onToggleTrackHidden"
+> & { showTrackLabel: boolean }) {
+  return (
+    <>
+      {isAudioTrack && (
+        <Music size={12} weight="fill" aria-hidden="true" className="text-white/35" />
+      )}
+      {showTrackLabel && <span className="min-w-0 flex-1 truncate text-[11px]">{trackLabel}</span>}
+      <VisibilityButton
+        hidden={isTrackHidden}
+        trackNumber={trackNumber}
+        visible
+        onToggle={onToggleTrackHidden}
+      />
+    </>
+  );
+}
+
+type TimelinePropertyLane = ReturnType<typeof getTimelinePropertyLanes>[number];
+type KeyframeNavigationState = ReturnType<
+  typeof getKeyframeNavigationState<TimelinePropertyLane["keyframes"][number]>
+>;
+
+function findNearestLaneKeyframe(lane: TimelinePropertyLane, clipPercentage: number) {
+  return lane.keyframes.reduce<(typeof lane.keyframes)[number] | null>(
+    (nearest, keyframe) =>
+      !nearest ||
+      Math.abs(keyframe.percentage - clipPercentage) < Math.abs(nearest.percentage - clipPercentage)
+        ? keyframe
+        : nearest,
+    null,
+  );
+}
+
+function findAnimationAtTime(animations: TimelinePropertyLane["animations"], currentTime: number) {
+  return animations.find((candidate) => {
+    const start = resolveTweenStart(candidate);
+    return start !== null && isTimeWithinTween(currentTime, start, resolveTweenDuration(candidate));
+  });
+}
+
+function resolveLaneAnimation(
+  lane: TimelinePropertyLane,
+  navigation: KeyframeNavigationState,
+  nearestKeyframe: TimelinePropertyLane["keyframes"][number] | null,
+  animationAtPlayhead: GsapAnimation | undefined,
+) {
+  const animationId = navigation.currentKeyframe?.animationId ?? nearestKeyframe?.animationId;
+  return animationAtPlayhead ?? lane.animations.find((candidate) => candidate.id === animationId);
+}
+
+function resolveLaneTweenPercentage(
+  navigation: KeyframeNavigationState,
+  animation: GsapAnimation | undefined,
+  animationKeyframes: TimelinePropertyLane["keyframes"],
+  currentTime: number,
+  clipPercentage: number,
+) {
+  return (
+    navigation.currentKeyframe?.tweenPercentage ??
+    (animation ? absoluteToPercentageForAnimation(currentTime, animation) : null) ??
+    clipToTweenPercentage(animationKeyframes, clipPercentage)
+  );
+}
+
+function valuesForLaneAnimation(
+  animation: GsapAnimation | undefined,
+  lane: TimelinePropertyLane,
+  tweenPercentage: number,
+) {
+  return animation ? valuesAt(animation, lane.group, tweenPercentage) : {};
+}
+
+function createLaneToggleTarget(
+  animation: GsapAnimation | undefined,
+  lane: TimelinePropertyLane,
+  tweenPercentage: number,
+  values: LaneValues,
+  navigation: KeyframeNavigationState,
+): TimelinePropertyGroupKeyframeToggle | null {
+  return animation
+    ? {
+        animationId: animation.id,
+        propertyGroup: lane.group,
+        tweenPercentage,
+        properties: values,
+        remove: navigation.currentKeyframe !== null,
+      }
+    : null;
+}
+
+function resolveLaneHeaderState(
+  lane: TimelinePropertyLane,
+  currentTime: number,
+  clipPercentage: number,
+) {
+  const navigation = getKeyframeNavigationState(lane.keyframes, clipPercentage);
+  const nearestKeyframe = findNearestLaneKeyframe(lane, clipPercentage);
+  const animationAtPlayhead = findAnimationAtTime(lane.animations, currentTime);
+  const animation = resolveLaneAnimation(lane, navigation, nearestKeyframe, animationAtPlayhead);
+  const animationKeyframes = lane.keyframes.filter(
+    (keyframe) => keyframe.animationId === animation?.id,
+  );
+  const tweenPercentage = resolveLaneTweenPercentage(
+    navigation,
+    animation,
+    animationKeyframes,
+    currentTime,
+    clipPercentage,
+  );
+  const values = valuesForLaneAnimation(animation, lane, tweenPercentage);
+  const label = groupLabel(lane.group, values);
+  const toggleTarget = createLaneToggleTarget(animation, lane, tweenPercentage, values, navigation);
+
+  return {
+    navigation,
+    nearestKeyframe,
+    animationAtPlayhead,
+    animation,
+    animationKeyframes,
+    tweenPercentage,
+    values,
+    label,
+    toggleTarget,
+  };
+}
+
+// Figma layout: prev-keyframe ‹, the add/remove toggle (children), next ›.
+function PropertyGroupNavigation({
+  navigation,
+  label,
+  expandedElement,
+  onSeek,
+  children,
+}: {
+  navigation: KeyframeNavigationState;
+  label: string;
+  expandedElement: TimelineElement;
+  onSeek?: (time: number) => void;
+  children: React.ReactNode;
+}) {
+  const seekTo = (keyframe: { percentage: number } | null) => {
+    if (keyframe) {
+      onSeek?.(expandedElement.start + (keyframe.percentage / 100) * expandedElement.duration);
+    }
+  };
+  return (
+    <span className="flex shrink-0 items-center gap-0.5">
+      <button
+        type="button"
+        aria-label={`Previous ${label} keyframe`}
+        disabled={!navigation.prevKeyframe}
+        className="h-5 w-3 border-0 bg-transparent p-0 text-white/55 hover:text-white disabled:text-white/15"
+        onClick={() => seekTo(navigation.prevKeyframe)}
+      >
+        ‹
+      </button>
+      {children}
+      <button
+        type="button"
+        aria-label={`Next ${label} keyframe`}
+        disabled={!navigation.nextKeyframe}
+        className="h-5 w-3 border-0 bg-transparent p-0 text-white/55 hover:text-white disabled:text-white/15"
+        onClick={() => seekTo(navigation.nextKeyframe)}
+      >
+        ›
+      </button>
+    </span>
+  );
+}
+
+function PropertyGroupHeaderRow({
+  lane,
+  laneIndex,
+  isLastLane,
+  expandedElement,
+  currentTime,
+  clipPercentage,
+  hoveredGroup,
+  setHoveredGroup,
+  isActive,
+  isHovered,
+  isTrackHidden,
+  trackNumber,
+  gutterBackground,
+  onToggleTrackHidden,
+  onTogglePropertyGroupKeyframe,
+  onSeek,
+}: {
+  lane: TimelinePropertyLane;
+  laneIndex: number;
+  isLastLane: boolean;
+  expandedElement: TimelineElement;
+  currentTime: number;
+  clipPercentage: number;
+  hoveredGroup: PropertyGroupName | null;
+  setHoveredGroup: (group: PropertyGroupName | null) => void;
+  isActive: boolean;
+  isHovered: boolean;
+  isTrackHidden: boolean;
+  trackNumber: number;
+  gutterBackground: string;
+  onToggleTrackHidden: TimelineEditCallbacks["onToggleTrackHidden"];
+  onTogglePropertyGroupKeyframe?: TimelineEditCallbacks["onTogglePropertyGroupKeyframe"];
+  onSeek?: (time: number) => void;
+}) {
+  const { navigation, values, label, toggleTarget } = resolveLaneHeaderState(
+    lane,
+    currentTime,
+    clipPercentage,
+  );
+  const showEye =
+    hoveredGroup === lane.group ||
+    (hoveredGroup === null && laneIndex === 0 && (isActive || isHovered));
+
+  return (
+    <div
+      data-property-group={lane.group}
+      data-timeline-lane-top={getTimelineLaneTop(laneIndex)}
+      className="absolute left-0 flex items-center gap-1 px-1.5 text-[10px] text-white/65"
+      style={{
+        top: getTimelineLaneTop(laneIndex),
+        width: LABEL_COL_W,
+        height: LANE_H,
+        background: gutterBackground,
+      }}
+      onPointerEnter={() => setHoveredGroup(lane.group)}
+      onPointerLeave={() => setHoveredGroup(null)}
+    >
+      {/* Tree connector: vertical spine (top-half on the last lane) + branch tick. */}
+      <span className="relative h-full w-3 shrink-0" aria-hidden="true">
+        <span
+          className="absolute left-1.5 top-0 w-px bg-white/15"
+          style={{ height: isLastLane ? "50%" : "100%" }}
+        />
+        <span className="absolute left-1.5 top-1/2 h-px w-1.5 bg-white/15" />
+      </span>
+      <span className="w-[46px] shrink-0 truncate text-white">{label}</span>
+      <PropertyGroupNavigation
+        navigation={navigation}
+        label={label}
+        expandedElement={expandedElement}
+        onSeek={onSeek}
+      >
+        <button
+          type="button"
+          aria-label={`Toggle ${label} keyframe`}
+          title={`${navigation.currentKeyframe ? "Remove" : "Add"} ${label} keyframe`}
+          className="flex h-5 w-4 shrink-0 items-center justify-center border-0 bg-transparent p-0 text-[11px] text-[#3CE6AC] focus-visible:outline focus-visible:outline-1 focus-visible:outline-[#3CE6AC]"
+          onClick={() => {
+            if (expandedElement && toggleTarget) {
+              void onTogglePropertyGroupKeyframe?.(expandedElement, toggleTarget);
+            }
+          }}
+        >
+          {navigation.currentKeyframe ? "◆" : "◇"}
+        </button>
+      </PropertyGroupNavigation>
+      <span className="min-w-0 flex-1 truncate text-right tabular-nums text-white/45">
+        {valueReadout(lane.group, values)}
+      </span>
+      <VisibilityButton
+        hidden={isTrackHidden}
+        trackNumber={trackNumber}
+        visible={showEye}
+        onToggle={onToggleTrackHidden}
+      />
+    </div>
+  );
+}
+
+export function TimelineTrackHeader({
+  trackNumber,
+  trackLabel,
+  contentOrigin,
+  keyframeClip,
+  isExpanded,
+  animations,
+  currentTime,
+  isTrackHidden,
+  isAudioTrack,
+  isActive,
+  isHovered,
+  theme,
+  onToggleClipExpanded,
+  onToggleTrackHidden,
+  onTogglePropertyGroupKeyframe,
+  onSeek,
+}: TimelineTrackHeaderProps) {
+  const [hoveredGroup, setHoveredGroup] = useState<PropertyGroupName | null>(null);
+  const clipPercentage = keyframeClip
+    ? ((currentTime - keyframeClip.start) / keyframeClip.duration) * 100
+    : 0;
+  const lanes = keyframeClip
+    ? getTimelinePropertyLanes(animations, keyframeClip.start, keyframeClip.duration)
+    : [];
+  // Label mode = keyframe view; the label column stays LABEL_COL_W (Timeline.tsx
+  // owns the gutter past it, so a 0% diamond isn't clipped by this panel).
+  const showTrackLabel = contentOrigin >= LABEL_COL_W;
+  const isKeyframeLayer = !!keyframeClip && lanes.length > 0;
+
+  return (
+    <div
+      className={`sticky left-0 z-[12] shrink-0 ${
+        !isKeyframeLayer
+          ? showTrackLabel
+            ? "flex items-center gap-1 px-1.5 text-white/55"
+            : "flex flex-col items-center justify-center gap-0.5"
+          : ""
+      }`}
+      style={{
+        width: showTrackLabel ? LABEL_COL_W : contentOrigin,
+        background: theme.gutterBackground,
+        borderRight: `1px solid ${theme.gutterBorder}`,
+      }}
+    >
+      {!keyframeClip || lanes.length === 0 ? (
+        <LegacyTrackHeader
+          trackNumber={trackNumber}
+          trackLabel={trackLabel}
+          showTrackLabel={showTrackLabel}
+          isTrackHidden={isTrackHidden}
+          isAudioTrack={isAudioTrack}
+          onToggleTrackHidden={onToggleTrackHidden}
+        />
+      ) : (
+        <>
+          <LayerDisclosureRow
+            keyframeClip={keyframeClip}
+            isExpanded={isExpanded}
+            gutterBackground={theme.gutterBackground}
+            onToggleClipExpanded={onToggleClipExpanded}
+          />
+          {isExpanded &&
+            lanes.map((lane, laneIndex) => (
+              <PropertyGroupHeaderRow
+                key={lane.group}
+                lane={lane}
+                laneIndex={laneIndex}
+                isLastLane={laneIndex === lanes.length - 1}
+                expandedElement={keyframeClip}
+                currentTime={currentTime}
+                clipPercentage={clipPercentage}
+                hoveredGroup={hoveredGroup}
+                setHoveredGroup={setHoveredGroup}
+                isActive={isActive}
+                isHovered={isHovered}
+                isTrackHidden={isTrackHidden}
+                trackNumber={trackNumber}
+                gutterBackground={theme.gutterBackground}
+                onToggleTrackHidden={onToggleTrackHidden}
+                onTogglePropertyGroupKeyframe={onTogglePropertyGroupKeyframe}
+                onSeek={onSeek}
+              />
+            ))}
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/packages/studio/src/player/components/timelineCallbacks.ts b/packages/studio/src/player/components/timelineCallbacks.ts
index 26d1e4bd77..4bdc653e23 100644
--- a/packages/studio/src/player/components/timelineCallbacks.ts
+++ b/packages/studio/src/player/components/timelineCallbacks.ts
@@ -3,6 +3,15 @@
 import type { TimelineElement } from "../store/playerStore";
 import type { TimelineMoveOperation } from "../../hooks/timelineMoveAdapter";
 import type { BlockedTimelineEditIntent } from "./timelineEditing";
+import type { PropertyGroupName } from "@hyperframes/core/gsap-parser";
+
+export interface TimelinePropertyGroupKeyframeToggle {
+  animationId: string;
+  propertyGroup: PropertyGroupName;
+  tweenPercentage: number;
+  properties: Record<string, number | string>;
+  remove: boolean;
+}
 
 /**
  * Shared callback signatures for timeline editing operations.
@@ -58,14 +67,33 @@ export interface TimelineEditCallbacks {
   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;
+  onDeleteKeyframe?: (
+    elementId: string,
+    percentage: number,
+    propertyGroup?: string,
+    tweenPercentage?: number,
+    animationId?: string,
+  ) => void;
   onDeleteAllKeyframes?: (elementId: string) => void;
   onChangeKeyframeEase?: (elementId: string, percentage: number, ease: string) => void;
-  onMoveKeyframeToPlayhead?: (elementId: string, percentage: number) => void;
+  onMoveKeyframeToPlayhead?: (
+    elementId: string,
+    percentage: number,
+    propertyGroup?: string,
+    tweenPercentage?: number,
+    animationId?: string,
+  ) => void;
   onMoveKeyframe?: (
     elementId: string,
     fromClipPercentage: number,
     toClipPercentage: number,
+    propertyGroup?: string,
+    tweenPercentage?: number,
+    animationId?: string,
   ) => void;
   onToggleKeyframeAtPlayhead?: (element: TimelineElement) => void;
+  onTogglePropertyGroupKeyframe?: (
+    element: TimelineElement,
+    target: TimelinePropertyGroupKeyframeToggle,
+  ) => Promise<void> | void;
 }
diff --git a/packages/studio/src/player/components/timelineClipDragPreview.test.ts b/packages/studio/src/player/components/timelineClipDragPreview.test.ts
index fc1a4ca2bf..b35b72a709 100644
--- a/packages/studio/src/player/components/timelineClipDragPreview.test.ts
+++ b/packages/studio/src/player/components/timelineClipDragPreview.test.ts
@@ -2,7 +2,7 @@ import { describe, expect, it } from "vitest";
 import type { TimelineElement } from "../store/playerStore";
 import { computeDragPreview, type DragPreviewContext } from "./timelineClipDragPreview";
 import type { DraggedClipState } from "./timelineClipDragTypes";
-import { RULER_H, TRACKS_TOP_PAD, TRACK_H } from "./timelineLayout";
+import { LANE_H, RULER_H, TRACKS_TOP_PAD, TRACK_H } from "./timelineLayout";
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Regression bed for the live-reproduced BUG 1: a PLAIN HORIZONTAL drag of a clip
@@ -51,13 +51,17 @@ function fakeScroll(): HTMLDivElement {
   } as unknown as HTMLDivElement;
 }
 
-function ctx(): DragPreviewContext {
+function ctx(
+  rowHeights?: readonly number[],
+  elements: TimelineElement[] = fixtureElements,
+): DragPreviewContext {
   return {
     scroll: fakeScroll(),
     pps: PPS,
     duration: 44.5,
     trackOrder: [0, 1, 2],
-    elements: fixtureElements,
+    elements,
+    rowHeights,
     selectedKeys: new Set<string>(),
     buildSnapTargets: () => [],
     audioTracks: new Set<number>(),
@@ -141,4 +145,47 @@ describe("computeDragPreview — plain horizontal drag never arms a phantom inse
     const next = computeDragPreview(drag, originClientX, yForRow(-0.6), ctx());
     expect(next.insertRow).toBe(0); // a new TOP track will be created on drop
   });
+
+  it("keeps a horizontal drag in the body of an expanded row out of insert mode", () => {
+    const rowHeights = [TRACK_H + 2 * LANE_H, TRACK_H, TRACK_H];
+    const clientY = RULER_H + TRACKS_TOP_PAD + rowHeights[0] - 8;
+    const { drag, clientX } = horizontalDrag(moodboard, 0.5, 2);
+    const next = computeDragPreview(
+      { ...drag, originClientY: clientY, pointerClientY: clientY },
+      clientX,
+      clientY,
+      ctx(rowHeights),
+    );
+    expect(next.insertRow).toBeNull();
+    expect(next.previewTrack).toBe(0);
+  });
+
+  it("uses the expanded row midpoint when choosing the side for an automatic insert", () => {
+    const rowHeights = [TRACK_H + 2 * LANE_H, TRACK_H];
+    const dragged = clip("dragged", 0, 0, 1, 3);
+    const occupied = [dragged, clip("block-0", 0, 0, 1, 2), clip("block-1", 1, 0, 1, 1)];
+    const clientY = RULER_H + TRACKS_TOP_PAD + 30;
+    const drag: DraggedClipState = {
+      element: dragged,
+      originClientX: 0,
+      originClientY: clientY,
+      originScrollLeft: 0,
+      originScrollTop: 0,
+      pointerClientX: 0,
+      pointerClientY: clientY,
+      pointerOffsetX: 0,
+      pointerOffsetY: 0,
+      previewStart: 0,
+      previewTrack: 0,
+      insertRow: null,
+      snapTime: null,
+      snapType: null,
+      started: true,
+    };
+    const next = computeDragPreview(drag, 0, clientY, {
+      ...ctx(rowHeights, occupied),
+      trackOrder: [0, 1],
+    });
+    expect(next.insertRow).toBe(0);
+  });
 });
diff --git a/packages/studio/src/player/components/timelineClipDragPreview.ts b/packages/studio/src/player/components/timelineClipDragPreview.ts
index 30b06d3ea6..6036f9e454 100644
--- a/packages/studio/src/player/components/timelineClipDragPreview.ts
+++ b/packages/studio/src/player/components/timelineClipDragPreview.ts
@@ -1,6 +1,11 @@
 import { resolveTimelineMove, resolveTimelineResize } from "./timelineEditing";
 import type { TimelineElement } from "../store/playerStore";
-import { TRACK_H, getTimelineRowFromY, INSERT_BOUNDARY_BAND } from "./timelineLayout";
+import {
+  getTimelineInsertBoundaryBand,
+  getTimelineRowFromY,
+  getTimelineRowHeight,
+  getTimelineRowPositionFromY,
+} from "./timelineLayout";
 import { isMusicTrack, isAudioTimelineElement } from "../../utils/timelineInspector";
 import {
   TIMELINE_SNAP_PX,
@@ -27,6 +32,7 @@ export interface DragPreviewContext {
   pps: number;
   duration: number;
   trackOrder: number[];
+  rowHeights?: readonly number[];
   elements: TimelineElement[];
   selectedKeys: ReadonlySet<string>;
   buildSnapTargets: BuildSnapTargets;
@@ -81,20 +87,26 @@ function resolveDropPlacement(
   desiredTrack: number,
   ctx: DragPreviewContext,
 ): { track: number; insertRow: number | null } {
-  const { scroll, trackOrder, elements } = ctx;
+  const { scroll, trackOrder, rowHeights, elements } = ctx;
   // rowFloat = the pointer's position in track-heights from the top lane; a
   // near-boundary hover requests a deliberate new-track insert. Uses the
   // shared row→y inverse so the top breathing pad is subtracted consistently.
-  const rowFloat = scroll
-    ? getTimelineRowFromY(clientY - scroll.getBoundingClientRect().top + scroll.scrollTop)
-    : 0;
-  // Geometry-exact band (the clip inset) so an insert only arms in the visible
-  // gutter BETWEEN clip bodies — dragging over a clip body is a lane move, never a
-  // phantom insert (the plain-horizontal-drag misfire). See INSERT_BOUNDARY_BAND.
-  const rawInsertRow = resolveInsertRow(rowFloat, trackOrder.length, INSERT_BOUNDARY_BAND);
+  const rowPosition = scroll
+    ? getTimelineRowPositionFromY(
+        clientY - scroll.getBoundingClientRect().top + scroll.scrollTop,
+        rowHeights,
+      )
+    : { rowFloat: 0, row: 0, fraction: 0, rowHeight: getTimelineRowHeight(0, rowHeights) };
+  // Geometry-exact band (the clip inset divided by this row's actual height) so
+  // an insert only arms in the visible gutter between clip bodies.
+  const rawInsertRow = resolveInsertRow(
+    rowPosition.rowFloat,
+    trackOrder.length,
+    getTimelineInsertBoundaryBand(rowPosition.rowHeight),
+  );
   // Pointer sub-row half: when a drop must auto-create a track (aimed span
   // occupied, no free lane), open it on the side the pointer is nearer.
-  const preferInsertAbove = rowFloat - Math.floor(rowFloat) < 0.5;
+  const preferInsertAbove = rowPosition.fraction < 0.5;
   const audioTracks =
     ctx.audioTracks ?? new Set(elements.filter(isAudioTimelineElement).map((e) => e.track));
   return resolveZoneDropPlacement({
@@ -120,24 +132,34 @@ export function computeDragPreview(
 ): DraggedClipState {
   const { scroll, pps, duration, trackOrder, elements, selectedKeys, buildSnapTargets } = ctx;
   const dragMaxStart = resolveDragMaxStart(scroll, pps, duration);
+  const scrollTop = scroll?.scrollTop ?? drag.originScrollTop;
+  const scrollRectTop = scroll?.getBoundingClientRect().top ?? 0;
+  const originRow = getTimelineRowFromY(
+    drag.originClientY - scrollRectTop + drag.originScrollTop,
+    ctx.rowHeights,
+  );
+  const currentRow = getTimelineRowFromY(clientY - scrollRectTop + scrollTop, ctx.rowHeights);
+  // resolveTimelineMove's vertical axis is expressed in track-height units.
+  // Feeding cumulative row coordinates with a unit height preserves its existing
+  // threshold/create-track behavior while supporting variable pixel heights.
   const nextMove = resolveTimelineMove(
     {
       start: drag.element.start,
       track: drag.element.track,
       duration: drag.element.duration,
       originClientX: drag.originClientX,
-      originClientY: drag.originClientY,
+      originClientY: originRow,
       originScrollLeft: drag.originScrollLeft,
-      originScrollTop: drag.originScrollTop,
+      originScrollTop: 0,
       currentScrollLeft: scroll?.scrollLeft ?? drag.originScrollLeft,
-      currentScrollTop: scroll?.scrollTop ?? drag.originScrollTop,
+      currentScrollTop: 0,
       pixelsPerSecond: pps,
-      trackHeight: TRACK_H,
+      trackHeight: 1,
       maxStart: dragMaxStart,
       trackOrder,
     },
     clientX,
-    clientY,
+    currentRow,
   );
   // The music track defines the beats, so it must not snap to them —
   // but it still snaps to the playhead and other clip edges.
diff --git a/packages/studio/src/player/components/timelineCollision.ts b/packages/studio/src/player/components/timelineCollision.ts
index 6dce919ec9..a7458a3068 100644
--- a/packages/studio/src/player/components/timelineCollision.ts
+++ b/packages/studio/src/player/components/timelineCollision.ts
@@ -1,4 +1,5 @@
 import type { TimelineElement } from "../store/playerStore";
+import { INSERT_BOUNDARY_BAND } from "./timelineLayout";
 
 /**
  * Keep a landing track inside the dragged clip's kind-zone: visual clips stay in
@@ -136,28 +137,18 @@ export function resolveZoneDropPlacement(input: {
   return { track: placement.track, insertRow: null };
 }
 
-/**
- * Fallback half-width (fraction of a track height) of the insert band straddling
- * a lane boundary — used only when the caller passes no explicit band. Production
- * threads the geometry-exact `INSERT_BOUNDARY_BAND` (timelineLayout.ts, = the clip
- * inset `CLIP_Y / TRACK_H`) so the band matches the rendered inter-clip gutter and
- * NEVER reaches into a clip body. Kept in sync with that constant; do not widen it
- * back toward the old 0.32 (which armed an insert across ~64% of every row — the
- * misfire that turned a plain horizontal drag into a phantom track insert).
- */
-const INSERT_BAND = 3 / 48;
-
 /**
  * Decide whether a vertical drag is inserting a new track at a lane boundary.
  * `rowFloat` is the pointer's position in track-height units from the top of the
  * first lane (0 = top of lane 0). Returns the boundary row to insert at
  * (0 = above the top lane, `trackCount` = below the bottom), or null when the
- * pointer is over a lane's middle band (a normal move/target).
+ * pointer is over a lane's middle band (a normal move/target). The default band
+ * preserves collapsed-row behavior; production passes the concrete row's band.
  */
 export function resolveInsertRow(
   rowFloat: number,
   trackCount: number,
-  band: number = INSERT_BAND,
+  band: number = INSERT_BOUNDARY_BAND,
 ): number | null {
   if (trackCount === 0) return 0;
   if (rowFloat <= 0) return 0;
diff --git a/packages/studio/src/player/components/timelineDragDrop.ts b/packages/studio/src/player/components/timelineDragDrop.ts
index e24511e380..089651ba10 100644
--- a/packages/studio/src/player/components/timelineDragDrop.ts
+++ b/packages/studio/src/player/components/timelineDragDrop.ts
@@ -1,7 +1,7 @@
 import { useCallback, useState, type RefObject } from "react";
 import { TIMELINE_ASSET_MIME, TIMELINE_BLOCK_MIME } from "../../utils/timelineAssetDrop";
 import { usePlayerStore } from "../store/playerStore";
-import { TRACK_H, resolveTimelineAssetDrop } from "./timelineLayout";
+import { resolveTimelineAssetDrop } from "./timelineLayout";
 import type { TimelineDropCallbacks } from "./timelineCallbacks";
 
 interface UseTimelineAssetDropOptions extends TimelineDropCallbacks {
@@ -9,6 +9,8 @@ interface UseTimelineAssetDropOptions extends TimelineDropCallbacks {
   ppsRef: RefObject<number>;
   durationRef: RefObject<number>;
   trackOrderRef: RefObject<number[]>;
+  rowHeightsRef: RefObject<readonly number[]>;
+  contentOrigin: number;
 }
 
 type TimelinePlacement = { start: number; track: number };
@@ -45,6 +47,8 @@ export function useTimelineAssetDrop({
   ppsRef,
   durationRef,
   trackOrderRef,
+  rowHeightsRef,
+  contentOrigin,
   onFileDrop,
   onAssetDrop,
   onBlockDrop,
@@ -75,9 +79,10 @@ export function useTimelineAssetDrop({
           rectTop: rect?.top ?? 0,
           scrollLeft: scroll?.scrollLeft ?? 0,
           scrollTop: scroll?.scrollTop ?? 0,
+          contentOrigin,
           pixelsPerSecond: ppsRef.current,
           duration: durationRef.current,
-          trackHeight: TRACK_H,
+          rowHeights: rowHeightsRef.current,
           trackOrder: trackOrderRef.current,
         },
         clientX,
@@ -86,7 +91,7 @@ export function useTimelineAssetDrop({
       const start = Math.max(0, usePlayerStore.getState().currentTime);
       return { start, track };
     },
-    [scrollRef, ppsRef, durationRef, trackOrderRef],
+    [scrollRef, ppsRef, durationRef, trackOrderRef, rowHeightsRef, contentOrigin],
   );
 
   const handleAssetDrop = useCallback(
diff --git a/packages/studio/src/player/components/timelineKeyframeIdentity.ts b/packages/studio/src/player/components/timelineKeyframeIdentity.ts
new file mode 100644
index 0000000000..96edaf4d81
--- /dev/null
+++ b/packages/studio/src/player/components/timelineKeyframeIdentity.ts
@@ -0,0 +1,18 @@
+export interface TimelineKeyframeTarget {
+  percentage: number;
+  tweenPercentage?: number;
+  propertyGroup?: string;
+  animationId?: string;
+  collidingAnimationIds?: string[];
+}
+
+export function timelineKeyframeSelectionKey(
+  elementId: string,
+  target: TimelineKeyframeTarget,
+): string {
+  if (!target.propertyGroup) return `${elementId}:${target.percentage}`;
+  const groupKey = target.animationId
+    ? `${target.propertyGroup}:${target.animationId}`
+    : target.propertyGroup;
+  return `${elementId}:${groupKey}:${target.percentage}`;
+}
diff --git a/packages/studio/src/player/components/timelineLayout.test.ts b/packages/studio/src/player/components/timelineLayout.test.ts
index 3642dea953..a85215c0e1 100644
--- a/packages/studio/src/player/components/timelineLayout.test.ts
+++ b/packages/studio/src/player/components/timelineLayout.test.ts
@@ -2,16 +2,90 @@ import { describe, it, expect } from "vitest";
 import {
   RULER_H,
   TRACK_H,
+  LANE_H,
   TRACKS_TOP_PAD,
   TRACKS_BOTTOM_PAD,
   GUTTER,
-  TRACKS_LEFT_PAD,
   getTimelineRowTop,
   getTimelineRowFromY,
+  getTimelineRowOffsets,
   getTimelineCanvasHeight,
+  trackHeights,
   resolveTimelineAssetDrop,
 } from "./timelineLayout";
 
+describe("variable timeline row geometry", () => {
+  const tracks = [
+    [{ clipId: "a", laneCount: 0 }],
+    [{ clipId: "b", laneCount: 2 }],
+    [{ clipId: "c", laneCount: 1 }],
+  ];
+
+  it("resolves every row to the base height when no clip is expanded", () => {
+    expect(trackHeights(tracks)).toEqual([TRACK_H, TRACK_H, TRACK_H]);
+    expect(trackHeights(3)).toEqual([TRACK_H, TRACK_H, TRACK_H]);
+  });
+
+  it("adds one lane height per lane on an expanded clip", () => {
+    expect(trackHeights(tracks, new Set(["b"]))).toEqual([TRACK_H, TRACK_H + 2 * LANE_H, TRACK_H]);
+  });
+
+  it("derives row tops from cumulative offsets", () => {
+    const heights = trackHeights(tracks, new Set(["b"]));
+    expect(getTimelineRowOffsets(heights)).toEqual([
+      0,
+      TRACK_H,
+      2 * TRACK_H + 2 * LANE_H,
+      3 * TRACK_H + 2 * LANE_H,
+    ]);
+    expect(getTimelineRowTop(2, heights)).toBe(RULER_H + TRACKS_TOP_PAD + 2 * TRACK_H + 2 * LANE_H);
+  });
+
+  it("maps y inside an expanded lane region back to the expanded track", () => {
+    const heights = trackHeights(tracks, new Set(["b"]));
+    const yInSecondExpandedLane = getTimelineRowTop(1, heights) + TRACK_H + LANE_H * 1.5;
+    const row = getTimelineRowFromY(yInSecondExpandedLane, heights);
+    expect(Math.floor(row)).toBe(1);
+    expect(row).toBeGreaterThan(1.5);
+    expect(row).toBeLessThan(2);
+  });
+
+  it("sums resolved row heights into the canvas height", () => {
+    const heights = trackHeights(tracks, new Set(["b"]));
+    expect(getTimelineCanvasHeight(heights)).toBe(
+      RULER_H + TRACKS_TOP_PAD + 3 * TRACK_H + 2 * LANE_H + TRACKS_BOTTOM_PAD,
+    );
+  });
+});
+
+describe("collapsed timeline row geometry characterization", () => {
+  it.each([
+    [0, 74],
+    [1, 122],
+    [4, 266],
+  ])("keeps row %i at content y=%i", (row, expectedTop) => {
+    expect(getTimelineRowTop(row)).toBe(expectedTop);
+  });
+
+  it.each([
+    [74, 0],
+    [86, 0.25],
+    [146, 1.5],
+    [290, 4.5],
+  ])("maps content y=%i to fractional row %f", (contentY, expectedRow) => {
+    expect(getTimelineRowFromY(contentY)).toBe(expectedRow);
+  });
+
+  it.each([
+    [0, 146],
+    [1, 194],
+    [3, 290],
+    [5, 386],
+  ])("keeps the %i-track canvas height at %i", (trackCount, expectedHeight) => {
+    expect(getTimelineCanvasHeight(trackCount)).toBe(expectedHeight);
+  });
+});
+
 describe("track-area breathing pad y-math", () => {
   describe("getTimelineRowTop", () => {
     it("offsets the first lane below the ruler by the top pad", () => {
@@ -78,15 +152,16 @@ describe("track-area breathing pad y-math", () => {
       rectTop: 0,
       scrollLeft: 0,
       scrollTop: 0,
+      contentOrigin: GUTTER,
       pixelsPerSecond: 100,
       duration: 60,
-      trackHeight: TRACK_H,
+      rowHeights: trackHeights(3),
       trackOrder: [0, 1, 2],
     };
 
     it("drops onto lane 0 when the pointer is in the middle of the first lane", () => {
       const clientY = getTimelineRowTop(0) + TRACK_H / 2;
-      const clientX = GUTTER + TRACKS_LEFT_PAD + 100; // t = 1s
+      const clientX = GUTTER + 100; // t = 1s (contentOrigin = GUTTER)
       const { start, track } = resolveTimelineAssetDrop(base, clientX, clientY);
       expect(track).toBe(0);
       expect(start).toBe(1);
@@ -103,5 +178,12 @@ describe("track-area breathing pad y-math", () => {
       const { track } = resolveTimelineAssetDrop(base, GUTTER, clientY);
       expect(track).toBe(3); // max(trackOrder)+1
     });
+
+    it("keeps a drop in an expanded lane region on that track", () => {
+      const rowHeights = [TRACK_H + 2 * LANE_H, TRACK_H, TRACK_H];
+      const clientY = getTimelineRowTop(0, rowHeights) + TRACK_H + LANE_H;
+      const { track } = resolveTimelineAssetDrop({ ...base, rowHeights }, GUTTER, clientY);
+      expect(track).toBe(0);
+    });
   });
 });
diff --git a/packages/studio/src/player/components/timelineLayout.ts b/packages/studio/src/player/components/timelineLayout.ts
index 3b3562e480..530324b240 100644
--- a/packages/studio/src/player/components/timelineLayout.ts
+++ b/packages/studio/src/player/components/timelineLayout.ts
@@ -3,26 +3,25 @@ import type { ZoomMode } from "../store/playerStore";
 
 /* ── Layout constants ──────────────────────────────────────────────── */
 export const GUTTER = 32;
+export const LABEL_COL_W = 232;
 export const TRACK_H = 48;
+export const LANE_H = 28;
 export const RULER_H = 24;
 export const CLIP_Y = 3;
 export const CLIP_HANDLE_W = 18;
+
+export function getTimelineLaneTop(laneIndex: number): number {
+  return TRACK_H + Math.max(0, Math.trunc(laneIndex)) * LANE_H;
+}
 /**
- * Half-width (as a fraction of TRACK_H) of the new-track INSERT band that
- * straddles each lane boundary. Deliberately equals the clip's vertical inset
- * (`CLIP_Y / TRACK_H`): a clip body fills [CLIP_Y, TRACK_H − CLIP_Y] of its row,
- * so the ONLY region this band covers is the visible empty gutter between two
- * clip bodies (plus the top/bottom breathing pads, handled separately by the
- * rowFloat ≤ 0 / ≥ trackCount extremes). Aiming at a clip body is therefore a
- * move-to-that-lane; only the inter-clip gap arms an insert — see resolveInsertRow.
- * Threaded into resolveInsertRow by the drag preview so the hit band can never
- * drift from the rendered clip geometry.
+ * Collapsed-row characterization value for the new-track INSERT band. Runtime
+ * hit-testing uses getTimelineInsertBoundaryBand with the concrete row height.
  */
 export const INSERT_BOUNDARY_BAND = CLIP_Y / TRACK_H;
 /**
  * Breathing room INSIDE the scroll area (CapCut-style), threaded through every
  * track-row y computation via {@link getTimelineRowTop} — never inline a magic
- * offset; a track row's top is always `RULER_H + TRACKS_TOP_PAD + row*TRACK_H`.
+ * offset; a track row's top is always ruler + top pad + cumulative row heights.
  *
  * - TRACKS_TOP_PAD: empty space between the (sticky) ruler and the first track
  *   (~half a track height) so the first clip isn't jammed under the ruler.
@@ -50,17 +49,108 @@ export const TRACKS_LEFT_PAD = 48;
  * placeholder/insertion top and every pointer-y→row inversion goes through this
  * (or its inverse in {@link getTimelineRowFromY}) so the pad can never drift.
  */
-export function getTimelineRowTop(row: number): number {
-  return RULER_H + TRACKS_TOP_PAD + row * TRACK_H;
+export interface TimelineTrackHeightClip {
+  clipId: string;
+  laneCount: number;
+}
+
+type TimelineTrackHeightInput = readonly (readonly TimelineTrackHeightClip[])[];
+
+/**
+ * Resolve each track's full height. Without expansion state every row is the
+ * legacy TRACK_H; if multiple clips in one track expand, the tallest one owns
+ * the shared row height.
+ */
+export function trackHeights(
+  tracks: number | TimelineTrackHeightInput,
+  expandedClipIds?: ReadonlySet<string>,
+): number[] {
+  if (typeof tracks === "number") {
+    return Array.from({ length: Math.max(0, Math.trunc(tracks)) }, () => TRACK_H);
+  }
+  return tracks.map((clips) => {
+    let laneCount = 0;
+    if (expandedClipIds) {
+      for (const clip of clips) {
+        if (expandedClipIds.has(clip.clipId)) laneCount = Math.max(laneCount, clip.laneCount);
+      }
+    }
+    return TRACK_H + Math.max(0, Math.trunc(laneCount)) * LANE_H;
+  });
+}
+
+function validRowHeight(height: number | undefined): number {
+  if (height === undefined || !Number.isFinite(height) || height <= 0) return TRACK_H;
+  return height;
+}
+
+/** Cumulative top offsets, including the final bottom boundary. */
+export function getTimelineRowOffsets(rowHeights: readonly number[]): number[] {
+  const offsets = [0];
+  for (const height of rowHeights) {
+    offsets.push((offsets[offsets.length - 1] ?? 0) + validRowHeight(height));
+  }
+  return offsets;
+}
+
+export function getTimelineRowHeight(row: number, rowHeights: readonly number[] = []): number {
+  return validRowHeight(rowHeights[row]);
+}
+
+function getTimelineRowOffset(row: number, rowHeights: readonly number[]): number {
+  if (rowHeights.length === 0) return row * TRACK_H;
+  const offsets = getTimelineRowOffsets(rowHeights);
+  if (row <= 0) return row * getTimelineRowHeight(0, rowHeights);
+  if (row >= rowHeights.length) {
+    return (offsets[rowHeights.length] ?? 0) + (row - rowHeights.length) * TRACK_H;
+  }
+  const wholeRow = Math.floor(row);
+  const fraction = row - wholeRow;
+  return (offsets[wholeRow] ?? 0) + fraction * getTimelineRowHeight(wholeRow, rowHeights);
+}
+
+export function getTimelineRowTop(row: number, rowHeights: readonly number[] = []): number {
+  return RULER_H + TRACKS_TOP_PAD + getTimelineRowOffset(row, rowHeights);
 }
 
 /**
  * Inverse of {@link getTimelineRowTop}: the fractional row index for a content-
- * space y (used for insert-row / drop-lane decisions). Subtracts the ruler and
- * top pad before dividing by the track height.
+ * space y (used for insert-row / drop-lane decisions). Locates the concrete row
+ * from cumulative offsets, then returns its local fractional position.
  */
-export function getTimelineRowFromY(contentY: number): number {
-  return (contentY - RULER_H - TRACKS_TOP_PAD) / TRACK_H;
+export function getTimelineRowFromY(contentY: number, rowHeights: readonly number[] = []): number {
+  const y = contentY - RULER_H - TRACKS_TOP_PAD;
+  if (rowHeights.length === 0) return y / TRACK_H;
+  if (y < 0) return y / getTimelineRowHeight(0, rowHeights);
+
+  const offsets = getTimelineRowOffsets(rowHeights);
+  for (let row = 0; row < rowHeights.length; row += 1) {
+    const bottom = offsets[row + 1] ?? 0;
+    if (y < bottom) {
+      const top = offsets[row] ?? 0;
+      return row + (y - top) / getTimelineRowHeight(row, rowHeights);
+    }
+  }
+  return rowHeights.length + (y - (offsets[rowHeights.length] ?? 0)) / TRACK_H;
+}
+
+export function getTimelineRowPositionFromY(
+  contentY: number,
+  rowHeights: readonly number[] = [],
+): { rowFloat: number; row: number; fraction: number; rowHeight: number } {
+  const rowFloat = getTimelineRowFromY(contentY, rowHeights);
+  const row = Math.floor(rowFloat);
+  return {
+    rowFloat,
+    row,
+    fraction: rowFloat - row,
+    rowHeight: getTimelineRowHeight(row, rowHeights),
+  };
+}
+
+/** Fractional insert band for the concrete row under a pointer. */
+export function getTimelineInsertBoundaryBand(rowHeight: number): number {
+  return CLIP_Y / validRowHeight(rowHeight);
 }
 /**
  * While a clip drag is live, the rendered timeline extends this far past the
@@ -216,12 +306,16 @@ export function formatTimelineTickLabel(time: number, duration: number, majorInt
  * remaining ruler runs to 1:00.
  * Manual zoom multiplies this base, so the floor only anchors the default.
  */
-export function getTimelineFitPps(viewportWidth: number, effectiveDuration: number): number {
+export function getTimelineFitPps(
+  viewportWidth: number,
+  effectiveDuration: number,
+  contentOrigin: number,
+): number {
   const safeDuration =
     Number.isFinite(effectiveDuration) && effectiveDuration > 0 ? effectiveDuration : 0;
   const span = Math.max(safeDuration * FIT_ZOOM_HEADROOM, MIN_TIMELINE_EXTENT_S);
-  if (!Number.isFinite(viewportWidth) || viewportWidth <= GUTTER + TRACKS_LEFT_PAD) return 100;
-  return (viewportWidth - GUTTER - TRACKS_LEFT_PAD - 2) / span;
+  if (!Number.isFinite(viewportWidth) || viewportWidth <= contentOrigin) return 100;
+  return (viewportWidth - contentOrigin - 2) / span;
 }
 
 /**
@@ -234,6 +328,7 @@ export function getTimelineFitPps(viewportWidth: number, effectiveDuration: numb
 export function getTimelineDisplayContentWidth(input: {
   trackContentWidth: number;
   viewportWidth: number;
+  contentOrigin: number;
   pps: number;
   dragGhostEndPx?: number;
   resizeGhostEndPx?: number;
@@ -241,7 +336,7 @@ export function getTimelineDisplayContentWidth(input: {
   const safePps = Number.isFinite(input.pps) ? Math.max(input.pps, 0) : 0;
   return Math.max(
     input.trackContentWidth,
-    input.viewportWidth - GUTTER - TRACKS_LEFT_PAD - 2,
+    input.viewportWidth - input.contentOrigin - 2,
     input.dragGhostEndPx ?? 0,
     input.resizeGhostEndPx ?? 0,
     MIN_TIMELINE_EXTENT_S * safePps,
@@ -249,6 +344,15 @@ export function getTimelineDisplayContentWidth(input: {
 }
 
 /* ── Scroll / zoom helpers ────────────────────────────────────────── */
+export function getTimelineContentXFromClient(input: {
+  clientX: number;
+  rectLeft: number;
+  scrollLeft: number;
+  contentOrigin: number;
+}): number {
+  return input.clientX - input.rectLeft + input.scrollLeft - input.contentOrigin;
+}
+
 export function shouldAutoScrollTimeline(
   zoomMode: ZoomMode,
   scrollWidth: number,
@@ -271,7 +375,7 @@ export function getTimelineScrollLeftForZoomTransition(
 export function getTimelineScrollLeftForZoomAnchor(input: {
   pointerX: number;
   currentScrollLeft: number;
-  gutter: number;
+  contentOrigin: number;
   currentPixelsPerSecond: number;
   nextPixelsPerSecond: number;
   duration: number;
@@ -288,9 +392,17 @@ export function getTimelineScrollLeftForZoomAnchor(input: {
   ) {
     return Math.max(0, input.currentScrollLeft);
   }
-  const timelineX = Math.max(0, input.currentScrollLeft + input.pointerX - input.gutter);
+  const timelineX = Math.max(
+    0,
+    getTimelineContentXFromClient({
+      clientX: input.pointerX,
+      rectLeft: 0,
+      scrollLeft: input.currentScrollLeft,
+      contentOrigin: input.contentOrigin,
+    }),
+  );
   const timeAtPointer = Math.max(0, Math.min(input.duration, timelineX / currentPps));
-  return Math.max(0, input.gutter + timeAtPointer * nextPps - input.pointerX);
+  return Math.max(0, input.contentOrigin + timeAtPointer * nextPps - input.pointerX);
 }
 
 /* ── Playhead / canvas ────────────────────────────────────────────── */
@@ -299,33 +411,37 @@ export function getTimelineScrollLeftForZoomAnchor(input: {
  * width, which the wrapper shrink-wraps to). The 1px vertical line inside
  * PlayheadIndicator is centered at 50% of this wrapper, so the wrapper must be
  * shifted LEFT by half this width for the line's center to land exactly on
- * `GUTTER + time * pps` — see {@link getTimelinePlayheadLeft}.
+ * `contentOrigin + time * pps` — see {@link getTimelinePlayheadLeft}.
  */
 export const PLAYHEAD_HEAD_W = 9;
 
 /**
  * The `left` for the playhead WRAPPER such that the vertical line's CENTER
- * sits exactly on `GUTTER + time * pps` (the same x the ruler ticks center
+ * sits exactly on `contentOrigin + time * pps` (the same x the ruler ticks center
  * on) at every zoom level. Without the half-head offset the line sat
  * `PLAYHEAD_HEAD_W / 2` px to the right of its ruler tick.
  */
-export function getTimelinePlayheadLeft(time: number, pixelsPerSecond: number): number {
+export function getTimelinePlayheadLeft(
+  time: number,
+  pixelsPerSecond: number,
+  contentOrigin: number,
+): number {
   if (!Number.isFinite(time) || !Number.isFinite(pixelsPerSecond)) {
-    return GUTTER + TRACKS_LEFT_PAD - PLAYHEAD_HEAD_W / 2;
+    return contentOrigin - PLAYHEAD_HEAD_W / 2;
   }
-  return (
-    GUTTER +
-    TRACKS_LEFT_PAD +
-    Math.max(0, time) * Math.max(0, pixelsPerSecond) -
-    PLAYHEAD_HEAD_W / 2
-  );
+  return contentOrigin + Math.max(0, time) * Math.max(0, pixelsPerSecond) - PLAYHEAD_HEAD_W / 2;
 }
 
-export function getTimelineCanvasHeight(trackCount: number): number {
+export function getTimelineCanvasHeight(trackCountOrHeights: number | readonly number[]): number {
   // RULER_H + top pad + lanes + bottom pad. The old TIMELINE_SCROLL_BUFFER is
   // subsumed by TRACKS_BOTTOM_PAD (which is larger), so the drag-into-void space
   // below the last lane is real scrollable surface, not a hidden buffer.
-  return RULER_H + TRACKS_TOP_PAD + Math.max(0, trackCount) * TRACK_H + TRACKS_BOTTOM_PAD;
+  const heights =
+    typeof trackCountOrHeights === "number"
+      ? trackHeights(trackCountOrHeights)
+      : trackCountOrHeights;
+  const rowsHeight = getTimelineRowOffsets(heights).at(-1) ?? 0;
+  return RULER_H + TRACKS_TOP_PAD + rowsHeight + TRACKS_BOTTOM_PAD;
 }
 
 /* ── UI helpers ───────────────────────────────────────────────────── */
@@ -381,15 +497,21 @@ export function resolveTimelineAssetDrop(
     rectTop: number;
     scrollLeft: number;
     scrollTop: number;
+    contentOrigin: number;
     pixelsPerSecond: number;
     duration: number;
-    trackHeight: number;
+    rowHeights?: readonly number[];
     trackOrder: number[];
   },
   clientX: number,
   clientY: number,
 ): { start: number; track: number } {
-  const x = clientX - input.rectLeft + input.scrollLeft - GUTTER - TRACKS_LEFT_PAD;
+  const x = getTimelineContentXFromClient({
+    clientX,
+    rectLeft: input.rectLeft,
+    scrollLeft: input.scrollLeft,
+    contentOrigin: input.contentOrigin,
+  });
   const contentY = clientY - input.rectTop + input.scrollTop;
   const start = Math.max(
     0,
@@ -398,7 +520,7 @@ export function resolveTimelineAssetDrop(
   // Row from the shared row→y inverse so the top pad is honoured; a drop in the
   // pad above the first lane floors to row 0, a drop in the bottom pad rounds
   // past the last lane (getDefaultDroppedTrack then appends a new track).
-  const rowIndex = Math.floor(getTimelineRowFromY(contentY));
+  const rowIndex = Math.floor(getTimelineRowFromY(contentY, input.rowHeights));
   return {
     start,
     track: getDefaultDroppedTrack(input.trackOrder, rowIndex),
diff --git a/packages/studio/src/player/components/timelineMarquee.test.ts b/packages/studio/src/player/components/timelineMarquee.test.ts
index 732076edb9..7c6673b552 100644
--- a/packages/studio/src/player/components/timelineMarquee.test.ts
+++ b/packages/studio/src/player/components/timelineMarquee.test.ts
@@ -9,6 +9,7 @@ import {
 } from "./timelineMarquee";
 import {
   GUTTER,
+  LANE_H,
   TRACK_H,
   RULER_H,
   CLIP_Y,
@@ -16,7 +17,9 @@ import {
   getTimelineRowTop,
 } from "./timelineLayout";
 
-// Canvas-space time origin: right edge of the sticky gutter + the left pad.
+// Canvas-space time origin used by the breathing-pad (default) test cases: right
+// edge of the sticky gutter + the left pad. Other cases pass GUTTER or LABEL_COL_W
+// directly as contentOrigin to test the plain/keyframe-label-column origins.
 const ORIGIN = GUTTER + TRACKS_LEFT_PAD;
 
 describe("isTimelineRulerPress", () => {
@@ -94,9 +97,9 @@ describe("getTimelineClipRect", () => {
   const trackOrder = [0, 2, 5];
 
   it("maps start/duration to x via pps and the track row to y via the shared row→y helper", () => {
-    const rect = getTimelineClipRect({ start: 2, duration: 3, track: 2 }, trackOrder, 100);
+    const rect = getTimelineClipRect({ start: 2, duration: 3, track: 2 }, trackOrder, 100, GUTTER);
     expect(rect).toEqual({
-      left: ORIGIN + 200,
+      left: GUTTER + 200,
       top: getTimelineRowTop(1) + CLIP_Y,
       width: 300,
       height: TRACK_H - CLIP_Y * 2,
@@ -104,25 +107,55 @@ describe("getTimelineClipRect", () => {
   });
 
   it("places the first visible track below the ruler + top breathing pad", () => {
-    const rect = getTimelineClipRect({ start: 0, duration: 1, track: 0 }, trackOrder, 50);
+    const rect = getTimelineClipRect({ start: 0, duration: 1, track: 0 }, trackOrder, 50, GUTTER);
     expect(rect?.top).toBe(getTimelineRowTop(0) + CLIP_Y);
-    expect(rect?.left).toBe(ORIGIN);
+    expect(rect?.left).toBe(GUTTER);
   });
 
   it("uses the row index in trackOrder, not the raw track number", () => {
-    const rect = getTimelineClipRect({ start: 0, duration: 1, track: 5 }, trackOrder, 50);
+    const rect = getTimelineClipRect({ start: 0, duration: 1, track: 5 }, trackOrder, 50, GUTTER);
     expect(rect?.top).toBe(getTimelineRowTop(2) + CLIP_Y);
   });
 
+  it("uses cumulative tops and the resolved height for an expanded row", () => {
+    const rowHeights = [TRACK_H + 2 * LANE_H, TRACK_H, TRACK_H];
+    const rect = getTimelineClipRect(
+      { start: 0, duration: 1, track: 0 },
+      trackOrder,
+      50,
+      GUTTER,
+      rowHeights,
+    );
+    expect(rect).toMatchObject({
+      top: getTimelineRowTop(0, rowHeights) + CLIP_Y,
+      height: rowHeights[0] - CLIP_Y * 2,
+    });
+    expect(
+      getTimelineClipRect({ start: 0, duration: 1, track: 2 }, trackOrder, 50, GUTTER, rowHeights)
+        ?.top,
+    ).toBe(getTimelineRowTop(1, rowHeights) + CLIP_Y);
+  });
+
   it("enforces the 4px minimum rendered width", () => {
-    const rect = getTimelineClipRect({ start: 0, duration: 0.01, track: 0 }, trackOrder, 10);
+    const rect = getTimelineClipRect(
+      { start: 0, duration: 0.01, track: 0 },
+      trackOrder,
+      10,
+      GUTTER,
+    );
     expect(rect?.width).toBe(4);
   });
 
   it("returns null for a track that is not displayed or an invalid pps", () => {
-    expect(getTimelineClipRect({ start: 0, duration: 1, track: 9 }, trackOrder, 100)).toBeNull();
-    expect(getTimelineClipRect({ start: 0, duration: 1, track: 0 }, trackOrder, 0)).toBeNull();
-    expect(getTimelineClipRect({ start: 0, duration: 1, track: 0 }, trackOrder, NaN)).toBeNull();
+    expect(
+      getTimelineClipRect({ start: 0, duration: 1, track: 9 }, trackOrder, 100, GUTTER),
+    ).toBeNull();
+    expect(
+      getTimelineClipRect({ start: 0, duration: 1, track: 0 }, trackOrder, 0, GUTTER),
+    ).toBeNull();
+    expect(
+      getTimelineClipRect({ start: 0, duration: 1, track: 0 }, trackOrder, NaN, GUTTER),
+    ).toBeNull();
   });
 });
 
@@ -140,29 +173,48 @@ describe("computeMarqueeSelection", () => {
 
   it("selects only the clips the marquee rect intersects", () => {
     const marquee = { left: ORIGIN, top: row0Top, width: 50, height: 10 };
-    const { ids, primaryId } = computeMarqueeSelection({ clips, trackOrder, pps, marquee });
+    const { ids, primaryId } = computeMarqueeSelection({
+      clips,
+      trackOrder,
+      pps,
+      contentOrigin: ORIGIN,
+      marquee,
+    });
     expect(ids).toEqual(new Set(["a"]));
     expect(primaryId).toBe("a");
   });
 
   it("selects across tracks when the rect spans multiple rows", () => {
     const marquee = { left: ORIGIN, top: row0Top, width: 60, height: row1Top - row0Top + 5 };
-    const { ids } = computeMarqueeSelection({ clips, trackOrder, pps, marquee });
+    const { ids } = computeMarqueeSelection({
+      clips,
+      trackOrder,
+      pps,
+      contentOrigin: ORIGIN,
+      marquee,
+    });
     expect(ids).toEqual(new Set(["a", "c"]));
   });
 
   it("excludes clips outside the rect horizontally", () => {
     const marquee = { left: ORIGIN + 140, top: row0Top, width: 50, height: 10 };
-    const { ids } = computeMarqueeSelection({ clips, trackOrder, pps, marquee });
+    const { ids } = computeMarqueeSelection({
+      clips,
+      trackOrder,
+      pps,
+      contentOrigin: ORIGIN,
+      marquee,
+    });
     expect(ids).toEqual(new Set());
   });
 
   it("returns null primaryId and keeps the base when nothing is hit (additive)", () => {
-    const marquee = { left: ORIGIN + 140, top: row0Top, width: 50, height: 10 };
+    const marquee = { left: GUTTER + 140, top: row0Top, width: 50, height: 10 };
     const { ids, primaryId } = computeMarqueeSelection({
       clips,
       trackOrder,
       pps,
+      contentOrigin: GUTTER,
       marquee,
       baseSelection: ["b"],
     });
@@ -171,11 +223,12 @@ describe("computeMarqueeSelection", () => {
   });
 
   it("unions additive base selection with new hits; primary comes from the marquee", () => {
-    const marquee = { left: ORIGIN, top: row1Top, width: 100, height: 10 };
+    const marquee = { left: GUTTER, top: row1Top, width: 100, height: 10 };
     const { ids, primaryId } = computeMarqueeSelection({
       clips,
       trackOrder,
       pps,
+      contentOrigin: GUTTER,
       marquee,
       baseSelection: ["b"],
     });
@@ -186,12 +239,13 @@ describe("computeMarqueeSelection", () => {
   it("shrinking the rect live drops clips it no longer covers", () => {
     const wide = { left: ORIGIN, top: row0Top, width: 320, height: 10 };
     const narrow = { left: ORIGIN, top: row0Top, width: 80, height: 10 };
-    expect(computeMarqueeSelection({ clips, trackOrder, pps, marquee: wide }).ids).toEqual(
-      new Set(["a", "b"]),
-    );
-    expect(computeMarqueeSelection({ clips, trackOrder, pps, marquee: narrow }).ids).toEqual(
-      new Set(["a"]),
-    );
+    expect(
+      computeMarqueeSelection({ clips, trackOrder, pps, contentOrigin: ORIGIN, marquee: wide }).ids,
+    ).toEqual(new Set(["a", "b"]));
+    expect(
+      computeMarqueeSelection({ clips, trackOrder, pps, contentOrigin: ORIGIN, marquee: narrow })
+        .ids,
+    ).toEqual(new Set(["a"]));
   });
 
   it("ignores clips on hidden/undisplayed tracks", () => {
@@ -200,6 +254,7 @@ describe("computeMarqueeSelection", () => {
       clips: [{ id: "x", start: 0, duration: 1, track: 7 }],
       trackOrder,
       pps,
+      contentOrigin: GUTTER,
       marquee,
     });
     expect(ids).toEqual(new Set());
diff --git a/packages/studio/src/player/components/timelineMarquee.ts b/packages/studio/src/player/components/timelineMarquee.ts
index 21c18913d1..23bffaf317 100644
--- a/packages/studio/src/player/components/timelineMarquee.ts
+++ b/packages/studio/src/player/components/timelineMarquee.ts
@@ -1,11 +1,4 @@
-import {
-  GUTTER,
-  TRACK_H,
-  RULER_H,
-  CLIP_Y,
-  TRACKS_LEFT_PAD,
-  getTimelineRowTop,
-} from "./timelineLayout";
+import { RULER_H, CLIP_Y, getTimelineRowHeight, getTimelineRowTop } from "./timelineLayout";
 import { rectsOverlap, type Rect } from "../../utils/marqueeGeometry";
 
 /** Pointer must travel at least this far (either axis) before a pointerdown on
@@ -68,22 +61,24 @@ export function getMarqueeRect(
 
 /**
  * A clip's rendered rect in canvas/content coordinates (the same space the
- * marquee rect lives in): x from GUTTER + start * pps, y from the clip's row
- * index within the visible track order (RULER_H + row * TRACK_H + CLIP_Y).
+ * marquee rect lives in): x from the shared content origin + start * pps, y from the clip's row
+ * index within the visible track order (cumulative row top + CLIP_Y).
  * Returns null when the clip's track is not currently displayed.
  */
 export function getTimelineClipRect(
   clip: Pick<MarqueeClipInput, "start" | "duration" | "track">,
   trackOrder: number[],
   pps: number,
+  contentOrigin: number,
+  rowHeights: readonly number[] = [],
 ): Rect | null {
   const row = trackOrder.indexOf(clip.track);
   if (row < 0 || !Number.isFinite(pps) || pps <= 0) return null;
   return {
-    left: GUTTER + TRACKS_LEFT_PAD + clip.start * pps,
-    top: getTimelineRowTop(row) + CLIP_Y,
+    left: contentOrigin + clip.start * pps,
+    top: getTimelineRowTop(row, rowHeights) + CLIP_Y,
     width: Math.max(clip.duration * pps, MIN_CLIP_W),
-    height: TRACK_H - CLIP_Y * 2,
+    height: getTimelineRowHeight(row, rowHeights) - CLIP_Y * 2,
   };
 }
 
@@ -103,13 +98,21 @@ export function computeMarqueeSelection(input: {
   clips: MarqueeClipInput[];
   trackOrder: number[];
   pps: number;
+  contentOrigin: number;
   marquee: Rect;
   baseSelection?: Iterable<string>;
+  rowHeights?: readonly number[];
 }): MarqueeSelectionResult {
   const ids = new Set<string>(input.baseSelection ?? []);
   let primaryId: string | null = null;
   for (const clip of input.clips) {
-    const rect = getTimelineClipRect(clip, input.trackOrder, input.pps);
+    const rect = getTimelineClipRect(
+      clip,
+      input.trackOrder,
+      input.pps,
+      input.contentOrigin,
+      input.rowHeights,
+    );
     if (rect && rectsOverlap(rect, input.marquee)) {
       ids.add(clip.id);
       primaryId = clip.id;
diff --git a/packages/studio/src/player/components/useAutoExpandKeyframedClips.ts b/packages/studio/src/player/components/useAutoExpandKeyframedClips.ts
new file mode 100644
index 0000000000..626b0784fc
--- /dev/null
+++ b/packages/studio/src/player/components/useAutoExpandKeyframedClips.ts
@@ -0,0 +1,27 @@
+import { useEffect, useRef } from "react";
+import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
+import { usePlayerStore } from "../store/playerStore";
+import { STUDIO_KEYFRAMES_ENABLED } from "../../components/editor/manualEditingAvailability";
+import { animationContributesLane } from "./TimelinePropertyLanes";
+
+/**
+ * Keyframed clips start expanded (AE/Figma default). Auto-expands each clip the
+ * first time it contributes a lane — real keyframes OR a synthesizable flat tween
+ * — tracked per-clip so a later user collapse sticks and never bounces back open
+ * (and clips added later still auto-expand).
+ */
+export function useAutoExpandKeyframedClips(gsapAnimations: Map<string, GsapAnimation[]>): void {
+  const expandClips = usePlayerStore((s) => s.expandClips);
+  const seen = useRef<Set<string>>(new Set());
+  useEffect(() => {
+    if (!STUDIO_KEYFRAMES_ENABLED) return;
+    const fresh: string[] = [];
+    for (const [key, animations] of gsapAnimations) {
+      if (seen.current.has(key)) continue;
+      if (animations.some(animationContributesLane)) fresh.push(key);
+    }
+    if (fresh.length === 0) return;
+    for (const key of fresh) seen.current.add(key);
+    expandClips(fresh);
+  }, [gsapAnimations, expandClips]);
+}
diff --git a/packages/studio/src/player/components/useTimelineClipDrag.ts b/packages/studio/src/player/components/useTimelineClipDrag.ts
index f63c0d5c2a..62e73a400d 100644
--- a/packages/studio/src/player/components/useTimelineClipDrag.ts
+++ b/packages/studio/src/player/components/useTimelineClipDrag.ts
@@ -48,6 +48,7 @@ interface UseTimelineClipDragInput {
   ppsRef: React.RefObject<number>;
   durationRef: React.RefObject<number>;
   trackOrderRef: React.RefObject<number[]>;
+  rowHeightsRef?: React.RefObject<readonly number[]>;
   onMoveElement?: (
     element: TimelineElement,
     updates: Pick<TimelineElement, "start" | "track">,
@@ -84,6 +85,7 @@ export function useTimelineClipDrag({
   ppsRef,
   durationRef,
   trackOrderRef,
+  rowHeightsRef,
   onMoveElement,
   onMoveElements,
   onResizeElement,
@@ -237,13 +239,14 @@ export function useTimelineClipDrag({
         pps: ppsRef.current,
         duration: durationRef.current,
         trackOrder: trackOrderRef.current,
+        rowHeights: rowHeightsRef?.current,
         elements: elementsRef.current,
         selectedKeys: usePlayerStore.getState().selectedElementIds,
         buildSnapTargets,
         audioTracks: dragAudioTracksRef.current,
       });
     },
-    [scrollRef, ppsRef, durationRef, trackOrderRef, buildSnapTargets],
+    [scrollRef, ppsRef, durationRef, trackOrderRef, rowHeightsRef, buildSnapTargets],
   );
 
   // Recompute the trim preview for a pointer x. Shared by the pointermove resize
diff --git a/packages/studio/src/player/components/useTimelineGeometry.ts b/packages/studio/src/player/components/useTimelineGeometry.ts
index fb18810902..6241cda973 100644
--- a/packages/studio/src/player/components/useTimelineGeometry.ts
+++ b/packages/studio/src/player/components/useTimelineGeometry.ts
@@ -21,6 +21,7 @@ interface UseTimelineGeometryInput {
   isDragging: RefObject<boolean>;
   scrollRef: RefObject<HTMLDivElement | null>;
   lastScrollLeftRef: RefObject<number>;
+  contentOrigin: number;
 }
 
 // Derive the timeline's horizontal geometry from the viewport, zoom, and any live
@@ -40,10 +41,11 @@ export function useTimelineGeometry({
   isDragging,
   scrollRef,
   lastScrollLeftRef,
+  contentOrigin,
 }: UseTimelineGeometryInput) {
   // Fit pps maps at least MIN_TIMELINE_EXTENT_S onto the viewport, so short
   // comps show a 60s ruler with usable empty space (see getTimelineFitPps).
-  const fitPps = getTimelineFitPps(viewportWidth, effectiveDuration);
+  const fitPps = getTimelineFitPps(viewportWidth, effectiveDuration, contentOrigin);
   const pps = getTimelinePixelsPerSecond(fitPps, zoomMode, manualZoomPercent);
   ppsRef.current = pps;
   const trackContentWidth = Math.max(0, effectiveDuration * pps);
@@ -70,6 +72,7 @@ export function useTimelineGeometry({
   const displayContentWidth = getTimelineDisplayContentWidth({
     trackContentWidth,
     viewportWidth,
+    contentOrigin,
     pps,
     dragGhostEndPx,
     resizeGhostEndPx,
diff --git a/packages/studio/src/player/components/useTimelineKeyframeHandlers.test.tsx b/packages/studio/src/player/components/useTimelineKeyframeHandlers.test.tsx
new file mode 100644
index 0000000000..3353f1e21d
--- /dev/null
+++ b/packages/studio/src/player/components/useTimelineKeyframeHandlers.test.tsx
@@ -0,0 +1,140 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { mountReactHarness } from "../../hooks/domSelectionTestHarness";
+import type { TimelineElement } from "../store/playerStore";
+import { usePlayerStore } from "../store/playerStore";
+import type { TimelineKeyframeTarget } from "./timelineKeyframeIdentity";
+import { useTimelineKeyframeHandlers } from "./useTimelineKeyframeHandlers";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+const trackStudioSegmentEaseEdit = vi.hoisted(() => vi.fn());
+vi.mock("../../telemetry/events", () => ({ trackStudioSegmentEaseEdit }));
+
+const ELEMENT: TimelineElement = {
+  id: "clip-1",
+  label: "Hero card",
+  tag: "div",
+  start: 1,
+  duration: 2,
+  track: 0,
+};
+
+const TARGET: TimelineKeyframeTarget = {
+  percentage: 50,
+  tweenPercentage: 50,
+  propertyGroup: "position",
+  animationId: "position-tween",
+};
+
+const FLAT_TWEEN_TARGET: TimelineKeyframeTarget = {
+  percentage: 100,
+  tweenPercentage: 100,
+  propertyGroup: "position",
+  animationId: "position-tween",
+};
+
+const COLLIDING_TARGET: TimelineKeyframeTarget = {
+  ...FLAT_TWEEN_TARGET,
+  collidingAnimationIds: ["position-tween", "scale-tween"],
+};
+
+afterEach(() => {
+  document.body.innerHTML = "";
+  trackStudioSegmentEaseEdit.mockClear();
+  usePlayerStore.setState({ focusedEaseSegment: null });
+});
+
+describe("useTimelineKeyframeHandlers", () => {
+  it("tracks opening the segment ease editor when a timeline segment is selected", () => {
+    let onSelectSegment: ((elementId: string, target: TimelineKeyframeTarget) => void) | undefined;
+
+    function Harness() {
+      ({ onSelectSegment } = useTimelineKeyframeHandlers({
+        expandedElements: [ELEMENT],
+        keyframeCache: new Map(),
+        setSelectedElementId: vi.fn(),
+        setKfContextMenu: vi.fn(),
+        toggleSelectedKeyframe: vi.fn(),
+      }));
+      return null;
+    }
+
+    const root = mountReactHarness(<Harness />);
+    act(() => onSelectSegment?.(ELEMENT.id, TARGET));
+
+    expect(trackStudioSegmentEaseEdit).toHaveBeenCalledOnce();
+    expect(trackStudioSegmentEaseEdit).toHaveBeenCalledWith({ action: "open" });
+    act(() => root.unmount());
+  });
+
+  it("focuses a merged segment with its colliding animation ids", () => {
+    let onSelectSegment: ((elementId: string, target: TimelineKeyframeTarget) => void) | undefined;
+
+    function Harness() {
+      ({ onSelectSegment } = useTimelineKeyframeHandlers({
+        expandedElements: [ELEMENT],
+        keyframeCache: new Map(),
+        setSelectedElementId: vi.fn(),
+        setKfContextMenu: vi.fn(),
+        toggleSelectedKeyframe: vi.fn(),
+      }));
+      return null;
+    }
+
+    const root = mountReactHarness(<Harness />);
+    act(() => onSelectSegment?.(ELEMENT.id, COLLIDING_TARGET));
+
+    expect(usePlayerStore.getState().focusedEaseSegment).toEqual({
+      animationId: "position-tween",
+      collidingAnimationIds: ["position-tween", "scale-tween"],
+      tweenPercentage: 100,
+      elementId: ELEMENT.id,
+    });
+    act(() => root.unmount());
+  });
+
+  it("focuses a flat tween segment without seeking, while keyframe clicks still seek", () => {
+    const onSeek = vi.fn();
+    const onSelectElement = vi.fn();
+    const setSelectedElementId = vi.fn();
+    let onClickKeyframe:
+      | ((el: TimelineElement, target: TimelineKeyframeTarget) => void)
+      | undefined;
+    let onSelectSegment: ((elementId: string, target: TimelineKeyframeTarget) => void) | undefined;
+
+    function Harness() {
+      ({ onClickKeyframe, onSelectSegment } = useTimelineKeyframeHandlers({
+        expandedElements: [ELEMENT],
+        keyframeCache: new Map(),
+        onSelectElement,
+        onSeek,
+        setSelectedElementId,
+        setKfContextMenu: vi.fn(),
+        toggleSelectedKeyframe: vi.fn(),
+      }));
+      return null;
+    }
+
+    const root = mountReactHarness(<Harness />);
+
+    // Selecting a segment must NOT move the playhead.
+    act(() => onSelectSegment?.(ELEMENT.id, FLAT_TWEEN_TARGET));
+    expect(onSeek).not.toHaveBeenCalled();
+    expect(usePlayerStore.getState().focusedEaseSegment).toEqual({
+      animationId: "position-tween",
+      tweenPercentage: 100,
+      elementId: ELEMENT.id,
+    });
+    expect(usePlayerStore.getState().focusedEaseSegment?.collidingAnimationIds).toBeUndefined();
+    expect(setSelectedElementId).toHaveBeenCalledWith(ELEMENT.id);
+    expect(onSelectElement).toHaveBeenCalledWith(ELEMENT);
+
+    // Clicking the keyframe itself still seeks to it (start 1 + 50% of 2 = 2).
+    act(() => onClickKeyframe?.(ELEMENT, TARGET));
+    expect(onSeek).toHaveBeenCalledExactlyOnceWith(2);
+    act(() => root.unmount());
+  });
+});
diff --git a/packages/studio/src/player/components/useTimelineKeyframeHandlers.ts b/packages/studio/src/player/components/useTimelineKeyframeHandlers.ts
index d9a91abd63..291b408083 100644
--- a/packages/studio/src/player/components/useTimelineKeyframeHandlers.ts
+++ b/packages/studio/src/player/components/useTimelineKeyframeHandlers.ts
@@ -1,7 +1,12 @@
 import { useCallback, type MouseEvent as ReactMouseEvent } from "react";
+import { trackStudioSegmentEaseEdit } from "../../telemetry/events";
 import type { TimelineElement, KeyframeCacheEntry } from "../store/playerStore";
 import { usePlayerStore } from "../store/playerStore";
 import type { KeyframeDiamondContextMenuState } from "./KeyframeDiamondContextMenu";
+import {
+  timelineKeyframeSelectionKey,
+  type TimelineKeyframeTarget,
+} from "./timelineKeyframeIdentity";
 
 interface UseTimelineKeyframeHandlersInput {
   expandedElements: TimelineElement[];
@@ -23,42 +28,72 @@ export function useTimelineKeyframeHandlers({
   toggleSelectedKeyframe,
 }: UseTimelineKeyframeHandlersInput) {
   const onClickKeyframe = useCallback(
-    (el: TimelineElement, pct: number) => {
+    (el: TimelineElement, target: TimelineKeyframeTarget, options?: { seek?: boolean }) => {
       usePlayerStore.getState().clearSelectedKeyframes();
       const elKey = el.key ?? el.id;
       setSelectedElementId(elKey);
       onSelectElement?.(el);
-      toggleSelectedKeyframe(`${elKey}:${pct}`);
-      onSeek?.(el.start + (pct / 100) * el.duration);
+      toggleSelectedKeyframe(timelineKeyframeSelectionKey(elKey, target));
+      // Clicking a diamond seeks the playhead to it; selecting a segment to edit
+      // its ease (options.seek === false) must NOT move the playhead.
+      if (options?.seek !== false) {
+        onSeek?.(el.start + (target.percentage / 100) * el.duration);
+      }
       const kfData = keyframeCache.get(elKey);
-      const kf = kfData?.keyframes.find((item) => Math.abs(item.percentage - pct) < 0.5);
-      usePlayerStore.getState().setActiveKeyframePct(kf?.tweenPercentage ?? null);
+      const kf = kfData?.keyframes.find(
+        (item) => Math.abs(item.percentage - target.percentage) < 0.5,
+      );
+      usePlayerStore
+        .getState()
+        .setActiveKeyframePct(target.tweenPercentage ?? kf?.tweenPercentage ?? null);
     },
     [keyframeCache, onSeek, onSelectElement, setSelectedElementId, toggleSelectedKeyframe],
   );
 
   const onShiftClickKeyframe = useCallback(
-    (elId: string, pct: number) => {
-      toggleSelectedKeyframe(`${elId}:${pct}`);
+    (elId: string, target: TimelineKeyframeTarget) => {
+      toggleSelectedKeyframe(timelineKeyframeSelectionKey(elId, target));
     },
     [toggleSelectedKeyframe],
   );
 
+  const onSelectSegment = useCallback(
+    (elId: string, target: TimelineKeyframeTarget) => {
+      const el = expandedElements.find((item) => (item.key ?? item.id) === elId);
+      if (!el) return;
+      onClickKeyframe(el, target, { seek: false });
+      if (target.animationId !== undefined && target.tweenPercentage !== undefined) {
+        usePlayerStore.getState().setFocusedEaseSegment({
+          animationId: target.animationId,
+          collidingAnimationIds: target.collidingAnimationIds,
+          tweenPercentage: target.tweenPercentage,
+          elementId: elId,
+        });
+        trackStudioSegmentEaseEdit({ action: "open" });
+      }
+    },
+    [expandedElements, onClickKeyframe],
+  );
+
   const onContextMenuKeyframe = useCallback(
-    (e: ReactMouseEvent, elId: string, pct: number) => {
+    (e: ReactMouseEvent, elId: string, target: TimelineKeyframeTarget) => {
       const el = expandedElements.find((item) => (item.key ?? item.id) === elId);
       if (el) {
         setSelectedElementId(elId);
         onSelectElement?.(el);
       }
       const kfData = keyframeCache.get(elId);
-      const kf = kfData?.keyframes.find((item) => Math.abs(item.percentage - pct) < 0.2);
+      const kf = kfData?.keyframes.find(
+        (item) => Math.abs(item.percentage - target.percentage) < 0.2,
+      );
       setKfContextMenu({
         x: e.clientX + 4,
         y: e.clientY + 2,
         elementId: elId,
-        percentage: pct,
-        tweenPercentage: kf?.tweenPercentage,
+        percentage: target.percentage,
+        tweenPercentage: target.tweenPercentage ?? kf?.tweenPercentage,
+        propertyGroup: target.propertyGroup,
+        animationId: target.animationId,
         currentEase: kf?.ease ?? kfData?.ease,
       });
     },
@@ -67,6 +102,7 @@ export function useTimelineKeyframeHandlers({
 
   return {
     onClickKeyframe,
+    onSelectSegment,
     onShiftClickKeyframe,
     onContextMenuKeyframe,
   };
diff --git a/packages/studio/src/player/components/useTimelinePlayhead.ts b/packages/studio/src/player/components/useTimelinePlayhead.ts
index 6706c0f7b3..245d04c4dd 100644
--- a/packages/studio/src/player/components/useTimelinePlayhead.ts
+++ b/packages/studio/src/player/components/useTimelinePlayhead.ts
@@ -3,8 +3,7 @@ import { liveTime, type ZoomMode } from "../store/playerStore";
 import { useMountEffect } from "../../hooks/useMountEffect";
 import { getPinchTimelineZoomPercent } from "./timelineZoom";
 import {
-  GUTTER,
-  TRACKS_LEFT_PAD,
+  getTimelineContentXFromClient,
   getTimelinePlayheadLeft,
   getTimelineScrollLeftForZoomTransition,
   getTimelineScrollLeftForZoomAnchor,
@@ -31,6 +30,7 @@ interface UseTimelinePlayheadInput {
   setZoomMode: (mode: ZoomMode) => void;
   setManualZoomPercent: (percent: number) => void;
   onSeek?: (time: number) => void;
+  contentOrigin: number;
 }
 
 export function useTimelinePlayhead({
@@ -52,6 +52,7 @@ export function useTimelinePlayhead({
   setZoomMode,
   setManualZoomPercent,
   onSeek,
+  contentOrigin,
 }: UseTimelinePlayheadInput) {
   const dragScrollRaf = useRef(0);
   const previousZoomModeRef = useRef<ZoomMode | null>(zoomMode);
@@ -60,6 +61,8 @@ export function useTimelinePlayhead({
   // anchors at the cursor instead, so it opts out via `skipCenterAnchorRef`.
   const previousAnchorPpsRef = useRef(pps);
   const skipCenterAnchorRef = useRef(false);
+  const contentOriginRef = useRef(contentOrigin);
+  contentOriginRef.current = contentOrigin;
 
   useLayoutEffect(() => {
     const scroll = scrollRef.current;
@@ -74,21 +77,21 @@ export function useTimelinePlayhead({
     const nextScrollLeft = getTimelineScrollLeftForZoomAnchor({
       pointerX: scroll.clientWidth / 2,
       currentScrollLeft: scroll.scrollLeft,
-      gutter: GUTTER + TRACKS_LEFT_PAD,
+      contentOrigin,
       currentPixelsPerSecond: prevPps,
       nextPixelsPerSecond: pps,
       duration: durationRef.current,
     });
     const maxScrollLeft = Math.max(0, scroll.scrollWidth - scroll.clientWidth);
     scroll.scrollLeft = Math.max(0, Math.min(maxScrollLeft, nextScrollLeft));
-  }, [pps, scrollRef, durationRef]);
+  }, [pps, scrollRef, durationRef, contentOrigin]);
 
   const syncPlayheadPosition = useCallback(
     (time: number) => {
       if (!playheadRef.current || durationRef.current <= 0) return;
-      playheadRef.current.style.left = `${getTimelinePlayheadLeft(time, ppsRef.current)}px`;
+      playheadRef.current.style.left = `${getTimelinePlayheadLeft(time, ppsRef.current, contentOrigin)}px`;
     },
-    [playheadRef, durationRef, ppsRef],
+    [playheadRef, durationRef, ppsRef, contentOrigin],
   );
 
   useEffect(() => {
@@ -120,7 +123,7 @@ export function useTimelinePlayhead({
       if (!playheadRef.current || durationRef.current <= 0) return;
       // Playback deliberately does NOT scroll the viewport to chase the playhead —
       // the user's scroll position is theirs; the playhead may run off-screen.
-      playheadRef.current.style.left = `${getTimelinePlayheadLeft(t, ppsRef.current)}px`;
+      playheadRef.current.style.left = `${getTimelinePlayheadLeft(t, ppsRef.current, contentOriginRef.current)}px`;
     });
     return unsub;
   });
@@ -130,13 +133,18 @@ export function useTimelinePlayhead({
       const el = scrollRef.current;
       if (!el || effectiveDuration <= 0) return;
       const rect = el.getBoundingClientRect();
-      const x = clientX - rect.left + el.scrollLeft - GUTTER - TRACKS_LEFT_PAD;
+      const x = getTimelineContentXFromClient({
+        clientX,
+        rectLeft: rect.left,
+        scrollLeft: el.scrollLeft,
+        contentOrigin,
+      });
       if (x < 0) return;
       const time = Math.max(0, Math.min(effectiveDuration, x / pps));
       liveTime.notify(time);
       onSeek?.(time);
     },
-    [scrollRef, effectiveDuration, pps, onSeek],
+    [scrollRef, effectiveDuration, pps, onSeek, contentOrigin],
   );
 
   const autoScrollDuringDrag = useCallback(
@@ -186,7 +194,7 @@ export function useTimelinePlayhead({
       const nextScrollLeft = getTimelineScrollLeftForZoomAnchor({
         pointerX: e.clientX - rect.left,
         currentScrollLeft: scroll.scrollLeft,
-        gutter: GUTTER + TRACKS_LEFT_PAD,
+        contentOrigin,
         currentPixelsPerSecond: ppsRef.current,
         nextPixelsPerSecond: nextPps,
         duration: durationRef.current,
@@ -209,6 +217,7 @@ export function useTimelinePlayhead({
       manualZoomPercentRef,
       setManualZoomPercent,
       setZoomMode,
+      contentOrigin,
     ],
   );
 
diff --git a/packages/studio/src/player/components/useTimelineRangeSelection.ts b/packages/studio/src/player/components/useTimelineRangeSelection.ts
index 1df2a74fee..796d8123cd 100644
--- a/packages/studio/src/player/components/useTimelineRangeSelection.ts
+++ b/packages/studio/src/player/components/useTimelineRangeSelection.ts
@@ -7,7 +7,6 @@ import {
 } from "./timelineEditing";
 import type { TimelineElement } from "../store/playerStore";
 import { liveTime, usePlayerStore } from "../store/playerStore";
-import { GUTTER, TRACKS_LEFT_PAD } from "./timelineLayout";
 import {
   computeMarqueeSelection,
   getMarqueeRect,
@@ -30,7 +29,9 @@ interface UseTimelineRangeSelectionInput {
   setShowPopover: (v: boolean) => void;
   elementsRef: React.RefObject<TimelineElement[]>;
   trackOrderRef: React.RefObject<number[]>;
+  rowHeightsRef: React.RefObject<readonly number[]>;
   onSelectElement?: (element: TimelineElement | null) => void;
+  contentOrigin: number;
 }
 
 interface MarqueeDragState {
@@ -72,12 +73,16 @@ function commitMarqueeSelection(
   marquee: MarqueeDragState,
   elements: TimelineElement[],
   trackOrder: number[],
+  rowHeights: readonly number[],
   pps: number,
+  contentOrigin: number,
 ): void {
   const { ids, primaryId } = computeMarqueeSelection({
     clips: toMarqueeClips(elements),
     trackOrder,
+    rowHeights,
     pps,
+    contentOrigin,
     marquee: rect,
     baseSelection: additive ? marquee.baseIds : undefined,
   });
@@ -101,7 +106,9 @@ export function useTimelineRangeSelection({
   setShowPopover,
   elementsRef,
   trackOrderRef,
+  rowHeightsRef,
   onSelectElement,
+  contentOrigin,
 }: UseTimelineRangeSelectionInput) {
   const isRangeSelecting = useRef(false);
   const rangeAnchorTime = useRef(0);
@@ -168,10 +175,12 @@ export function useTimelineRangeSelection({
         marquee,
         elementsRef.current ?? [],
         trackOrderRef.current ?? [],
+        rowHeightsRef.current,
         ppsRef.current,
+        contentOrigin,
       );
     },
-    [toContentPoint, elementsRef, trackOrderRef, ppsRef],
+    [toContentPoint, elementsRef, trackOrderRef, rowHeightsRef, ppsRef, contentOrigin],
   );
 
   const stopMarqueeAutoScroll = useCallback(() => {
@@ -228,14 +237,13 @@ export function useTimelineRangeSelection({
       setShowPopover(false);
       const rect = scrollRef.current?.getBoundingClientRect();
       if (rect) {
-        const x =
-          e.clientX - rect.left + (scrollRef.current?.scrollLeft ?? 0) - GUTTER - TRACKS_LEFT_PAD;
+        const x = e.clientX - rect.left + (scrollRef.current?.scrollLeft ?? 0) - contentOrigin;
         const time = Math.max(0, x / pps);
         rangeAnchorTime.current = time;
         setRangeSelection({ start: time, end: time, anchorX: e.clientX, anchorY: e.clientY });
       }
     },
-    [scrollRef, pps, setShowPopover],
+    [scrollRef, pps, setShowPopover, contentOrigin],
   );
 
   const handlePointerDown = useCallback(
@@ -286,7 +294,7 @@ export function useTimelineRangeSelection({
       const el = scrollRef.current;
       if (el) {
         const rect = el.getBoundingClientRect();
-        const x = clientX - rect.left + el.scrollLeft - GUTTER - TRACKS_LEFT_PAD;
+        const x = clientX - rect.left + el.scrollLeft - contentOrigin;
         if (x >= 0) {
           const dur = el.scrollWidth / pps;
           liveTime.notify(Math.max(0, Math.min(dur, x / pps)));
@@ -302,7 +310,7 @@ export function useTimelineRangeSelection({
         });
       }
     },
-    [scrollRef, pps, seekFromX, autoScrollDuringDrag, isDragging],
+    [scrollRef, pps, seekFromX, autoScrollDuringDrag, isDragging, contentOrigin],
   );
 
   const handlePointerMove = useCallback(
@@ -310,8 +318,7 @@ export function useTimelineRangeSelection({
       if (isRangeSelecting.current) {
         const rect = scrollRef.current?.getBoundingClientRect();
         if (rect) {
-          const x =
-            e.clientX - rect.left + (scrollRef.current?.scrollLeft ?? 0) - GUTTER - TRACKS_LEFT_PAD;
+          const x = e.clientX - rect.left + (scrollRef.current?.scrollLeft ?? 0) - contentOrigin;
           setRangeSelection((prev) =>
             prev
               ? { ...prev, end: Math.max(0, x / pps), anchorX: e.clientX, anchorY: e.clientY }
@@ -331,7 +338,15 @@ export function useTimelineRangeSelection({
       if (!isDragging.current) return;
       updateScrubDrag(e.clientX);
     },
-    [pps, scrollRef, isDragging, applyMarqueeAtClient, syncMarqueeAutoScroll, updateScrubDrag],
+    [
+      pps,
+      scrollRef,
+      isDragging,
+      applyMarqueeAtClient,
+      syncMarqueeAutoScroll,
+      updateScrubDrag,
+      contentOrigin,
+    ],
   );
 
   // Release of a shift time-range gesture: keep a real range (or a shift-click
diff --git a/packages/studio/src/player/components/useTimelineTrackLayout.test.ts b/packages/studio/src/player/components/useTimelineTrackLayout.test.ts
new file mode 100644
index 0000000000..e2d1b6d293
--- /dev/null
+++ b/packages/studio/src/player/components/useTimelineTrackLayout.test.ts
@@ -0,0 +1,53 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
+import { afterEach, describe, expect, it } from "vitest";
+import { usePlayerStore, type TimelineElement } from "../store/playerStore";
+import { LANE_H, TRACK_H } from "./timelineLayout";
+import { useTimelineTrackLayout } from "./useTimelineTrackLayout";
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  usePlayerStore.getState().reset();
+});
+
+describe("useTimelineTrackLayout", () => {
+  it("counts a flat tween lane and reserves its expanded row height", () => {
+    const elements: TimelineElement[] = [
+      { id: "clip-1", tag: "div", start: 0, duration: 1, track: 0 },
+    ];
+    const animations = new Map<string, GsapAnimation[]>([
+      [
+        "clip-1",
+        [
+          {
+            id: "position-tween",
+            targetSelector: "#clip-1",
+            method: "to",
+            position: 0,
+            duration: 1,
+            properties: { x: 420 },
+            propertyGroup: "position",
+          },
+        ],
+      ],
+    ]);
+    usePlayerStore.setState({ expandedClipIds: new Set(["clip-1"]) });
+
+    let layout: ReturnType<typeof useTimelineTrackLayout> | undefined;
+    function Probe() {
+      layout = useTimelineTrackLayout(elements, animations, null, new Set());
+      return null;
+    }
+
+    const root = createRoot(document.createElement("div"));
+    act(() => root.render(React.createElement(Probe)));
+
+    expect(layout?.laneCounts.get("clip-1")).toBe(1);
+    expect(layout?.rowHeights).toEqual([TRACK_H + LANE_H]);
+    act(() => root.unmount());
+  });
+});
diff --git a/packages/studio/src/player/components/useTimelineTrackLayout.ts b/packages/studio/src/player/components/useTimelineTrackLayout.ts
new file mode 100644
index 0000000000..5c24eec950
--- /dev/null
+++ b/packages/studio/src/player/components/useTimelineTrackLayout.ts
@@ -0,0 +1,179 @@
+import { useMemo, useRef } from "react";
+import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
+import { animationContributesLane } from "./TimelinePropertyLanes";
+import { usePlayerStore, type TimelineElement } from "../store/playerStore";
+import { STUDIO_KEYFRAMES_ENABLED } from "../../components/editor/manualEditingAvailability";
+import type { DraggedClipState } from "./timelineClipDragTypes";
+import { getTrackStyle, type TrackVisualStyle } from "./timelineIcons";
+import {
+  TRACK_H,
+  getTimelineCanvasHeight,
+  getTimelineRowHeight,
+  trackHeights,
+  type TimelineTrackHeightClip,
+} from "./timelineLayout";
+
+export { getTrackStyle };
+
+/**
+ * The single keyframed element whose property lanes a track shows when expanded.
+ * A track can hold several elements (same z-index is common), but keyframes are
+ * per-element, so we scope to ONE active element — the selected one if it's on
+ * this track, otherwise the element with the most lanes. Selecting a clip is how
+ * you switch which element you're keyframing. Returns null when no element on the
+ * track has keyframes.
+ */
+export function resolveTrackKeyframeClip(
+  elements: readonly TimelineElement[],
+  laneCounts: ReadonlyMap<string, number>,
+  selectedElementId: string | null,
+  selectedElementIds: ReadonlySet<string>,
+): TimelineElement | null {
+  const keyframed = elements.filter(
+    (element) => (laneCounts.get(element.key ?? element.id) ?? 0) >= 1,
+  );
+  if (keyframed.length === 0) return null;
+  const selected = keyframed.find((element) => {
+    const key = element.key ?? element.id;
+    return key === selectedElementId || selectedElementIds.has(key);
+  });
+  if (selected) return selected;
+  return [...keyframed].sort(
+    (a, b) => (laneCounts.get(b.key ?? b.id) ?? 0) - (laneCounts.get(a.key ?? a.id) ?? 0),
+  )[0]!;
+}
+
+/** Lanes per clip: the count of distinct property groups whose tween contributes
+ *  a lane (real keyframes or a synthesizable flat tween). */
+function computeLaneCounts(
+  tracks: [number, TimelineElement[]][],
+  gsapAnimations: Map<string, GsapAnimation[]>,
+): Map<string, number> {
+  const laneCounts = new Map<string, number>();
+  for (const [, elements] of tracks) {
+    for (const element of elements) {
+      const clipId = element.key ?? element.id;
+      const propertyGroups = new Set<string>();
+      for (const animation of gsapAnimations.get(clipId) ?? []) {
+        if (animation.propertyGroup && animationContributesLane(animation)) {
+          propertyGroups.add(animation.propertyGroup);
+        }
+      }
+      laneCounts.set(clipId, propertyGroups.size);
+    }
+  }
+  return laneCounts;
+}
+
+function useTimelineRowHeights(
+  tracks: [number, TimelineElement[]][],
+  gsapAnimations: Map<string, GsapAnimation[]>,
+  selectedElementId: string | null,
+  selectedElementIds: ReadonlySet<string>,
+) {
+  const expandedClipIds = usePlayerStore((s) => s.expandedClipIds);
+  const { laneCounts, rowHeights } = useMemo(() => {
+    const laneCounts = computeLaneCounts(tracks, gsapAnimations);
+    // Row height follows only the active keyframe clip, so a track with several
+    // keyframed elements never reserves empty lanes for the ones not shown.
+    const heightTracks: TimelineTrackHeightClip[][] = tracks.map(([, elements]) => {
+      const active = resolveTrackKeyframeClip(
+        elements,
+        laneCounts,
+        selectedElementId,
+        selectedElementIds,
+      );
+      if (!active) return [];
+      const clipId = active.key ?? active.id;
+      return [{ clipId, laneCount: laneCounts.get(clipId) ?? 0 }];
+    });
+    return {
+      laneCounts,
+      rowHeights: trackHeights(
+        heightTracks,
+        STUDIO_KEYFRAMES_ENABLED ? expandedClipIds : undefined,
+      ),
+    };
+  }, [expandedClipIds, gsapAnimations, tracks, selectedElementId, selectedElementIds]);
+  const rowHeightsRef = useRef<readonly number[]>(rowHeights);
+  rowHeightsRef.current = rowHeights;
+  return { laneCounts, rowHeights, rowHeightsRef };
+}
+
+export function useTimelineTrackLayout(
+  expandedElements: TimelineElement[],
+  gsapAnimations: Map<string, GsapAnimation[]>,
+  selectedElementId: string | null,
+  selectedElementIds: ReadonlySet<string>,
+) {
+  const tracks = useMemo(() => {
+    const map = new Map<number, typeof expandedElements>();
+    for (const el of expandedElements) {
+      const list = map.get(el.track) ?? [];
+      list.push(el);
+      map.set(el.track, list);
+    }
+    return Array.from(map.entries()).sort(([a], [b]) => a - b);
+  }, [expandedElements]);
+
+  const trackStyles = useMemo(() => {
+    const map = new Map<number, TrackVisualStyle>();
+    for (const [trackNum, els] of tracks) {
+      map.set(trackNum, getTrackStyle(els[0]?.tag ?? ""));
+    }
+    return map;
+  }, [tracks]);
+
+  const trackOrder = useMemo(() => tracks.map(([trackNum]) => trackNum), [tracks]);
+  const trackOrderRef = useRef(trackOrder);
+  trackOrderRef.current = trackOrder;
+  const { laneCounts, rowHeights, rowHeightsRef } = useTimelineRowHeights(
+    tracks,
+    gsapAnimations,
+    selectedElementId,
+    selectedElementIds,
+  );
+
+  return {
+    tracks,
+    trackStyles,
+    trackOrder,
+    trackOrderRef,
+    laneCounts,
+    rowHeights,
+    rowHeightsRef,
+  };
+}
+
+function useDisplayRowHeights(
+  displayTrackOrder: readonly number[],
+  trackOrder: readonly number[],
+  rowHeights: readonly number[],
+) {
+  return useMemo(
+    () =>
+      displayTrackOrder.map((track) => {
+        const row = trackOrder.indexOf(track);
+        return row < 0 ? TRACK_H : getTimelineRowHeight(row, rowHeights);
+      }),
+    [displayTrackOrder, trackOrder, rowHeights],
+  );
+}
+
+function useDisplayTrackOrder(draggedClip: DraggedClipState | null, trackOrder: number[]) {
+  return useMemo(() => {
+    if (!draggedClip?.started || trackOrder.includes(draggedClip.previewTrack)) return trackOrder;
+    return [...trackOrder, draggedClip.previewTrack].sort((a, b) => a - b);
+  }, [draggedClip, trackOrder]);
+}
+
+export function useTimelineDisplayLayout(
+  draggedClip: DraggedClipState | null,
+  trackOrder: number[],
+  rowHeights: readonly number[],
+) {
+  const displayTrackOrder = useDisplayTrackOrder(draggedClip, trackOrder);
+  const displayRowHeights = useDisplayRowHeights(displayTrackOrder, trackOrder, rowHeights);
+  const totalH = getTimelineCanvasHeight(displayRowHeights);
+  return { displayTrackOrder, displayRowHeights, totalH };
+}
diff --git a/packages/studio/src/player/store/keyframeSlice.ts b/packages/studio/src/player/store/keyframeSlice.ts
new file mode 100644
index 0000000000..632bdf7e86
--- /dev/null
+++ b/packages/studio/src/player/store/keyframeSlice.ts
@@ -0,0 +1,118 @@
+import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
+import type { StoreApi } from "zustand";
+
+/** Minimal keyframe cache types — mirrors GsapKeyframesData without pulling in Node-only gsap-parser. */
+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;
+    /** Source tween id — lets the inline clip-row ease button target a specific segment. */
+    animationId?: string;
+    properties: Record<string, number | string>;
+    ease?: string;
+    /** Source animation ids that collide at this percentage, in first-seen order. */
+    collidingAnimationIds?: string[];
+  }>;
+  ease?: string;
+  easeEach?: string;
+}
+
+export interface KeyframeSlice {
+  /** Selected collapsed (`element:pct`) or expanded (`element:group:animation:clipPct`) diamonds. */
+  selectedKeyframes: Set<string>;
+  toggleSelectedKeyframe: (key: string) => void;
+  clearSelectedKeyframes: () => void;
+
+  /** Clips whose keyframe property lanes are expanded in the timeline. */
+  expandedClipIds: Set<string>;
+  toggleClipExpanded: (id: string) => void;
+  setClipExpanded: (id: string, expanded: boolean) => void;
+  /** Union-expand clips (keyframed clips are expanded by default on load). */
+  expandClips: (ids: readonly string[]) => void;
+
+  /** elementId scopes the request to one element so a shared (class-selector)
+   * animation id can't open the ease editor on the wrong element. */
+  focusedEaseSegment: {
+    animationId: string;
+    collidingAnimationIds?: string[];
+    tweenPercentage: number;
+    elementId: string;
+  } | null;
+  setFocusedEaseSegment: (
+    target: {
+      animationId: string;
+      collidingAnimationIds?: string[];
+      tweenPercentage: number;
+      elementId: string;
+    } | null,
+  ) => void;
+
+  /** Keyframe data per element id, populated from parsed GSAP animations. */
+  keyframeCache: Map<string, KeyframeCacheEntry>;
+  /** Unmerged source tweens per element; expanded property lanes read this, never keyframeCache. */
+  gsapAnimations: Map<string, GsapAnimation[]>;
+  setGsapAnimations: (elementId: string, animations: GsapAnimation[] | undefined) => void;
+  setKeyframeCache: (elementId: string, data: KeyframeCacheEntry | undefined) => void;
+}
+
+export function createKeyframeSlice(set: StoreApi<KeyframeSlice>["setState"]): KeyframeSlice {
+  return {
+    selectedKeyframes: new Set(),
+    toggleSelectedKeyframe: (key) =>
+      set((state) => {
+        const next = new Set(state.selectedKeyframes);
+        if (next.has(key)) next.delete(key);
+        else next.add(key);
+        return { selectedKeyframes: next };
+      }),
+    clearSelectedKeyframes: () => set({ selectedKeyframes: new Set() }),
+
+    expandedClipIds: new Set(),
+    toggleClipExpanded: (id) =>
+      set((state) => {
+        const next = new Set(state.expandedClipIds);
+        if (next.has(id)) next.delete(id);
+        else next.add(id);
+        return { expandedClipIds: next };
+      }),
+    setClipExpanded: (id, expanded) =>
+      set((state) => {
+        if (state.expandedClipIds.has(id) === expanded) return state;
+        const next = new Set(state.expandedClipIds);
+        if (expanded) next.add(id);
+        else next.delete(id);
+        return { expandedClipIds: next };
+      }),
+    expandClips: (ids) =>
+      set((state) => {
+        if (ids.every((id) => state.expandedClipIds.has(id))) return state;
+        const next = new Set(state.expandedClipIds);
+        for (const id of ids) next.add(id);
+        return { expandedClipIds: next };
+      }),
+
+    focusedEaseSegment: null,
+    setFocusedEaseSegment: (target) => set({ focusedEaseSegment: target }),
+
+    keyframeCache: new Map(),
+    setKeyframeCache: (elementId, data) =>
+      set((state) => {
+        const next = new Map(state.keyframeCache);
+        if (data) next.set(elementId, data);
+        else next.delete(elementId);
+        return { keyframeCache: next };
+      }),
+    gsapAnimations: new Map(),
+    setGsapAnimations: (elementId, animations) =>
+      set((state) => {
+        const next = new Map(state.gsapAnimations);
+        if (animations) next.set(elementId, animations);
+        else next.delete(elementId);
+        return { gsapAnimations: next };
+      }),
+  };
+}
diff --git a/packages/studio/src/player/store/playerStore.test.ts b/packages/studio/src/player/store/playerStore.test.ts
index ed86efaa36..1eb3f72c56 100644
--- a/packages/studio/src/player/store/playerStore.test.ts
+++ b/packages/studio/src/player/store/playerStore.test.ts
@@ -25,6 +25,31 @@ describe("usePlayerStore", () => {
       expect(state.loopEnabled).toBe(false);
       expect(state.zoomMode).toBe("fit");
       expect(state.manualZoomPercent).toBe(100);
+      expect(state.expandedClipIds).toEqual(new Set());
+    });
+  });
+
+  describe("expandedClipIds", () => {
+    it("toggles clip membership", () => {
+      const store = usePlayerStore.getState();
+
+      store.toggleClipExpanded("clip-1");
+      expect(usePlayerStore.getState().expandedClipIds).toEqual(new Set(["clip-1"]));
+
+      store.toggleClipExpanded("clip-1");
+      expect(usePlayerStore.getState().expandedClipIds).toEqual(new Set());
+    });
+
+    it("sets clip membership idempotently", () => {
+      const store = usePlayerStore.getState();
+
+      store.setClipExpanded("clip-1", true);
+      store.setClipExpanded("clip-1", true);
+      expect(usePlayerStore.getState().expandedClipIds).toEqual(new Set(["clip-1"]));
+
+      store.setClipExpanded("clip-1", false);
+      store.setClipExpanded("clip-1", false);
+      expect(usePlayerStore.getState().expandedClipIds).toEqual(new Set());
     });
   });
 
diff --git a/packages/studio/src/player/store/playerStore.ts b/packages/studio/src/player/store/playerStore.ts
index 665a63beee..2e54f11562 100644
--- a/packages/studio/src/player/store/playerStore.ts
+++ b/packages/studio/src/player/store/playerStore.ts
@@ -4,22 +4,9 @@ import type { BeatEditState } from "../../utils/beatEditing";
 import type { ClipManifestClip } from "../lib/playbackTypes";
 import { readStudioUiPreferences, writeStudioUiPreferences } from "../../utils/studioUiPreferences";
 import { computePinnedZoomPercent } from "../components/timelineZoom";
+import { createKeyframeSlice, type KeyframeSlice } from "./keyframeSlice";
 
-/** Minimal keyframe cache types — mirrors GsapKeyframesData without pulling in Node-only gsap-parser. */
-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;
-  }>;
-  ease?: string;
-  easeEach?: string;
-}
+export type { KeyframeCacheEntry } from "./keyframeSlice";
 
 export interface TimelineElement {
   id: string;
@@ -108,7 +95,7 @@ function resolveElementSelection(
   };
 }
 
-interface PlayerState {
+interface PlayerState extends KeyframeSlice {
   isPlaying: boolean;
   currentTime: number;
   duration: number;
@@ -122,6 +109,7 @@ interface PlayerState {
   loopEnabled: boolean;
   /** Timeline zoom: 'fit' auto-scales to viewport, 'manual' uses manualZoomPercent */
   zoomMode: ZoomMode;
+  thumbnailsEnabled: boolean;
   /** Timeline zoom percent relative to the fit width when in manual mode */
   manualZoomPercent: number;
   /**
@@ -139,11 +127,6 @@ interface PlayerState {
   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;
@@ -192,10 +175,6 @@ interface PlayerState {
   toggleSelectedElementId: (id: string) => void;
   clearSelection: () => void;
 
-  /** Keyframe data per element id, populated from parsed GSAP animations. */
-  keyframeCache: Map<string, KeyframeCacheEntry>;
-  setKeyframeCache: (elementId: string, data: KeyframeCacheEntry | undefined) => void;
-
   setIsPlaying: (playing: boolean) => void;
   setCurrentTime: (time: number) => void;
   setDuration: (duration: number) => void;
@@ -218,6 +197,7 @@ interface PlayerState {
     >,
   ) => void;
   setZoomMode: (mode: ZoomMode) => void;
+  setThumbnailsEnabled: (enabled: boolean) => void;
   setManualZoomPercent: (percent: number) => void;
   bumpZEditVersion: () => void;
   setInPoint: (time: number | null) => void;
@@ -316,6 +296,7 @@ export const usePlayerStore = create<PlayerState>((set, get) => ({
   audioMuted: readStudioUiPreferences().audioMuted ?? false,
   loopEnabled: false,
   zoomMode: "fit",
+  thumbnailsEnabled: readStudioUiPreferences().thumbnailsEnabled ?? false,
   manualZoomPercent: 100,
   zEditVersion: 0,
   timelinePps: 100,
@@ -326,15 +307,7 @@ export const usePlayerStore = create<PlayerState>((set, get) => ({
   activeTool: "select",
   setActiveTool: (tool) => set({ activeTool: tool }),
 
-  selectedKeyframes: new Set(),
-  toggleSelectedKeyframe: (key) =>
-    set((s) => {
-      const next = new Set(s.selectedKeyframes);
-      if (next.has(key)) next.delete(key);
-      else next.add(key);
-      return { selectedKeyframes: next };
-    }),
-  clearSelectedKeyframes: () => set({ selectedKeyframes: new Set() }),
+  ...createKeyframeSlice(set),
 
   activeKeyframePct: null,
   setActiveKeyframePct: (pct) => set({ activeKeyframePct: pct }),
@@ -362,15 +335,6 @@ export const usePlayerStore = create<PlayerState>((set, get) => ({
     }),
   clearSelection: () => set({ selectedElementId: null, selectedElementIds: new Set() }),
 
-  keyframeCache: new Map(),
-  setKeyframeCache: (elementId, data) =>
-    set((s) => {
-      const next = new Map(s.keyframeCache);
-      if (data) next.set(elementId, data);
-      else next.delete(elementId);
-      return { keyframeCache: next };
-    }),
-
   requestedSeekTime: null,
   requestSeek: (time) => set({ requestedSeekTime: time }),
   clearSeekRequest: () => set({ requestedSeekTime: null }),
@@ -448,6 +412,10 @@ export const usePlayerStore = create<PlayerState>((set, get) => ({
     writeStudioUiPreferences({ audioMuted: muted });
     set({ audioMuted: muted });
   },
+  setThumbnailsEnabled: (enabled) => {
+    writeStudioUiPreferences({ thumbnailsEnabled: enabled });
+    set({ thumbnailsEnabled: enabled });
+  },
   setLoopEnabled: (enabled) => set({ loopEnabled: enabled }),
   setZoomMode: (mode) => set({ zoomMode: mode }),
   clearSelectedElementIds: () => set({ selectedElementIds: new Set() }),
@@ -568,9 +536,11 @@ export const usePlayerStore = create<PlayerState>((set, get) => ({
       outPoint: null,
       activeTool: "select",
       selectedKeyframes: new Set(),
+      expandedClipIds: new Set(),
       selectedElementIds: new Set(),
       clipRevealRequest: null,
       keyframeCache: new Map(),
+      gsapAnimations: new Map(),
       beatAnalysis: null,
       beatEdits: null,
       beatUndo: [],
diff --git a/packages/studio/src/telemetry/events.test.ts b/packages/studio/src/telemetry/events.test.ts
index 03d706e02e..5c2cb034ac 100644
--- a/packages/studio/src/telemetry/events.test.ts
+++ b/packages/studio/src/telemetry/events.test.ts
@@ -13,6 +13,8 @@ const {
   trackStudioRazorSplit,
   trackStudioExpandedClipEdit,
   trackStudioFeedback,
+  trackStudioKeyframeLaneExpand,
+  trackStudioSegmentEaseEdit,
 } = await import("./events");
 
 describe("studio telemetry events", () => {
@@ -79,4 +81,17 @@ describe("studio telemetry events", () => {
       expect.objectContaining({ $survey_response: rating, rating_scale: 10 }),
     );
   });
+
+  it("trackStudioKeyframeLaneExpand emits 'studio_keyframe_lane_expand' with expanded", () => {
+    trackStudioKeyframeLaneExpand({ expanded: true });
+    expect(trackEvent).toHaveBeenCalledWith("studio_keyframe_lane_expand", { expanded: true });
+  });
+
+  it("trackStudioSegmentEaseEdit emits 'studio_segment_ease_edit' with action and ease", () => {
+    trackStudioSegmentEaseEdit({ action: "commit", ease: "power2.out" });
+    expect(trackEvent).toHaveBeenCalledWith("studio_segment_ease_edit", {
+      action: "commit",
+      ease: "power2.out",
+    });
+  });
 });
diff --git a/packages/studio/src/telemetry/events.ts b/packages/studio/src/telemetry/events.ts
index f8ab262473..ecc80e9bfd 100644
--- a/packages/studio/src/telemetry/events.ts
+++ b/packages/studio/src/telemetry/events.ts
@@ -63,6 +63,19 @@ export function trackStudioExpandedClipEdit(props: {
   trackEvent("studio_expanded_clip_edit", { action: props.action });
 }
 
+// Adoption signal for the per-clip keyframe-lane caret toggle.
+export function trackStudioKeyframeLaneExpand(props: { expanded: boolean }): void {
+  trackEvent("studio_keyframe_lane_expand", { expanded: props.expanded });
+}
+
+// Adoption signal for opening and committing the per-segment ease editor.
+export function trackStudioSegmentEaseEdit(props: {
+  action: "open" | "commit";
+  ease?: string;
+}): void {
+  trackEvent("studio_segment_ease_edit", { action: props.action, ease: props.ease });
+}
+
 export function trackStudioFeedback(props: { rating: number; comment?: string }): void {
   trackEvent("survey sent", {
     $survey_id: "studio_experience",
diff --git a/packages/studio/src/utils/studioUiPreferences.ts b/packages/studio/src/utils/studioUiPreferences.ts
index 6548a58eba..b66eea8e5e 100644
--- a/packages/studio/src/utils/studioUiPreferences.ts
+++ b/packages/studio/src/utils/studioUiPreferences.ts
@@ -10,6 +10,7 @@ export interface StudioUiPreferences {
   timelineHeight?: number;
   playbackRate?: number;
   audioMuted?: boolean;
+  thumbnailsEnabled?: boolean;
   previewZoom?: StoredPreviewZoomState;
   recentBlocks?: string[];
   snapEnabled?: boolean;
@@ -70,6 +71,9 @@ function readStorage(storage: Storage | null): StudioUiPreferences {
     if (typeof parsed.audioMuted === "boolean") {
       preferences.audioMuted = parsed.audioMuted;
     }
+    if (typeof parsed.thumbnailsEnabled === "boolean") {
+      preferences.thumbnailsEnabled = parsed.thumbnailsEnabled;
+    }
     if (isRecord(parsed.previewZoom)) {
       const { zoomPercent, panX, panY } = parsed.previewZoom;
       if (
diff --git a/packages/studio/vite.browser.ts b/packages/studio/vite.browser.ts
index 9d1482cdfb..2489ca95cd 100644
--- a/packages/studio/vite.browser.ts
+++ b/packages/studio/vite.browser.ts
@@ -1,6 +1,8 @@
 // Shared Puppeteer browser management and thumbnail generation for Studio dev server.
 
-import { existsSync } from "node:fs";
+import { existsSync, readdirSync } from "node:fs";
+import { homedir } from "node:os";
+import { join } from "node:path";
 import { createHash } from "node:crypto";
 import {
   createStudioDevRenderBodyScripts,
@@ -14,18 +16,66 @@ import { seekThumbnailPreview } from "./vite.thumbnail";
 let _browser: import("puppeteer-core").Browser | null = null;
 let _browserLaunchPromise: Promise<import("puppeteer-core").Browser> | null = null;
 
-const CHROME_PATHS = [
+// Installed system browsers (Chrome/Chromium-family), macOS + Linux.
+const CHROME_APP_PATHS = [
   "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
+  "/Applications/Google Chrome Canary.app/Contents/MacOS/Google Chrome Canary",
+  "/Applications/Chromium.app/Contents/MacOS/Chromium",
+  "/Applications/Brave Browser.app/Contents/MacOS/Brave Browser",
+  "/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge",
   "/usr/bin/google-chrome",
+  "/usr/bin/google-chrome-stable",
+  "/usr/bin/chromium",
   "/usr/bin/chromium-browser",
 ];
 
+// Chrome-for-Testing downloaded by Puppeteer (or `npx puppeteer browsers install`).
+// Layout: <cacheDir>/chrome/<platform>-<version>/chrome-<platform>/<executable>.
+// Prefer the highest version so a stale early build doesn't win.
+// fallow-ignore-next-line complexity
+function findPuppeteerCacheChrome(): string | undefined {
+  const cacheRoot = process.env.PUPPETEER_CACHE_DIR || join(homedir(), ".cache", "puppeteer");
+  const chromeRoot = join(cacheRoot, "chrome");
+  let versionDirs: string[];
+  try {
+    versionDirs = readdirSync(chromeRoot);
+  } catch {
+    return undefined; // no cache dir
+  }
+  const buildOrder = (dir: string): number => {
+    const parts = (dir.split("-").pop() ?? "").split(".").map((n) => Number.parseInt(n, 10) || 0);
+    return parts.reduce((acc, n) => acc * 100000 + n, 0);
+  };
+  const relCandidates = [
+    "chrome-mac-arm64/Google Chrome for Testing.app/Contents/MacOS/Google Chrome for Testing",
+    "chrome-mac-x64/Google Chrome for Testing.app/Contents/MacOS/Google Chrome for Testing",
+    "chrome-linux64/chrome",
+  ];
+  for (const dir of versionDirs.sort((a, b) => buildOrder(b) - buildOrder(a))) {
+    for (const rel of relCandidates) {
+      const exe = join(chromeRoot, dir, rel);
+      if (existsSync(exe)) return exe;
+    }
+  }
+  return undefined;
+}
+
+/** Resolve a Chrome/Chromium executable: env override → system install → Puppeteer cache. */
+function resolveChromeExecutable(): string | undefined {
+  const envOverride = [
+    process.env.PUPPETEER_EXECUTABLE_PATH,
+    process.env.CHROME_PATH,
+    process.env.CHROME_BIN,
+  ].find((p): p is string => !!p && existsSync(p));
+  return envOverride ?? CHROME_APP_PATHS.find((p) => existsSync(p)) ?? findPuppeteerCacheChrome();
+}
+
 async function getSharedBrowser(): Promise<import("puppeteer-core").Browser | null> {
   if (_browser?.connected) return _browser;
   if (_browserLaunchPromise) return _browserLaunchPromise;
   _browserLaunchPromise = (async () => {
     const puppeteer = await import("puppeteer-core");
-    const executablePath = CHROME_PATHS.find((p) => existsSync(p));
+    const executablePath = resolveChromeExecutable();
     if (!executablePath) return null;
     _browser = await puppeteer.default.launch({
       headless: true,
@@ -46,9 +96,9 @@ async function getSharedBrowser(): Promise<import("puppeteer-core").Browser | nu
   return _browserLaunchPromise;
 }
 
-/** The system Chrome executable path (undefined if not found). */
+/** The Chrome/Chromium executable path (undefined if none found). */
 export function findSystemChrome(): string | undefined {
-  return CHROME_PATHS.find((p) => existsSync(p));
+  return resolveChromeExecutable();
 }
 
 // In-flight thumbnail dedup