diff --git a/packages/core/src/generators/hyperframes.ts b/packages/core/src/generators/hyperframes.ts
index 68307921b..f8da4e69c 100644
--- a/packages/core/src/generators/hyperframes.ts
+++ b/packages/core/src/generators/hyperframes.ts
@@ -7,7 +7,12 @@ import {
 } from "../core.types";
 import type { GsapAnimation } from "../parsers/gsapParser";
 import { serializeGsapAnimations, keyframesToGsapAnimations } from "../parsers/gsapParser";
-import { GSAP_CDN, BASE_STYLES, ZOOM_CONTAINER_STYLES } from "../templates/constants";
+import {
+  GSAP_CDN,
+  MOTIONPATH_CDN,
+  BASE_STYLES,
+  ZOOM_CONTAINER_STYLES,
+} from "../templates/constants";
 
 const GOOGLE_FONTS_BASE = "https://fonts.googleapis.com/css2";
 const FONT_WEIGHTS: Record<string, string> = {
@@ -337,6 +342,10 @@ export function generateHyperframesHtml(
     : "";
 
   const gsapCdnTag = includeScripts ? `  <script src="${GSAP_CDN}"></script>` : "";
+  const motionPathCdnTag =
+    includeScripts && gsapScript && /motionPath\s*[:{]/.test(gsapScript)
+      ? `\n  <script src="${MOTIONPATH_CDN}"></script>`
+      : "";
 
   const gsapScriptTag = includeScripts
     ? `  <script>
@@ -373,7 +382,7 @@ ${gsapScript}
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   ${includeStyles ? googleFontsLink : ""}
-  ${gsapCdnTag}
+  ${gsapCdnTag}${motionPathCdnTag}
 ${styleTags ? `  ${styleTags}` : ""}
 </head>
 <body>
diff --git a/packages/core/src/parsers/gsapParser.test.ts b/packages/core/src/parsers/gsapParser.test.ts
index d4e0e7cd2..b02bde6be 100644
--- a/packages/core/src/parsers/gsapParser.test.ts
+++ b/packages/core/src/parsers/gsapParser.test.ts
@@ -1504,3 +1504,138 @@ describe("keyframe mutations", () => {
     expect(anim.properties.opacity).toBe(1);
   });
 });
+
+describe("motionPath parsing", () => {
+  it("parses motionPath with waypoint array and curviness", () => {
+    const script = `
+      const tl = gsap.timeline({ paused: true });
+      tl.to("#el", {
+        motionPath: {
+          path: [{x: 0, y: 0}, {x: 200, y: -100}, {x: 400, y: 50}],
+          curviness: 1.5
+        },
+        duration: 2
+      }, 0);
+    `;
+    const result = parseGsapScript(script);
+    expect(result.animations).toHaveLength(1);
+    const anim = result.animations[0];
+
+    expect(anim.arcPath).toBeDefined();
+    expect(anim.arcPath!.enabled).toBe(true);
+    expect(anim.arcPath!.segments).toHaveLength(2);
+    expect(anim.arcPath!.segments[0].curviness).toBe(1.5);
+    expect(anim.arcPath!.segments[1].curviness).toBe(1.5);
+
+    expect(anim.keyframes).toBeDefined();
+    expect(anim.keyframes!.keyframes).toHaveLength(3);
+    expect(anim.keyframes!.keyframes[0].properties.x).toBe(0);
+    expect(anim.keyframes!.keyframes[0].properties.y).toBe(0);
+    expect(anim.keyframes!.keyframes[1].properties.x).toBe(200);
+    expect(anim.keyframes!.keyframes[1].properties.y).toBe(-100);
+    expect(anim.keyframes!.keyframes[2].properties.x).toBe(400);
+    expect(anim.keyframes!.keyframes[2].properties.y).toBe(50);
+  });
+
+  it("parses motionPath with type cubic and explicit control points", () => {
+    const script = `
+      const tl = gsap.timeline({ paused: true });
+      tl.to("#el", {
+        motionPath: {
+          path: [
+            {x: 0, y: 0},
+            {x: 50, y: -80}, {x: 150, y: -120},
+            {x: 200, y: -100},
+            {x: 250, y: -80}, {x: 350, y: 30},
+            {x: 400, y: 50}
+          ],
+          type: "cubic"
+        },
+        duration: 2
+      }, 0);
+    `;
+    const result = parseGsapScript(script);
+    const anim = result.animations[0];
+
+    expect(anim.arcPath).toBeDefined();
+    expect(anim.arcPath!.segments).toHaveLength(2);
+
+    expect(anim.arcPath!.segments[0].cp1).toEqual({ x: 50, y: -80 });
+    expect(anim.arcPath!.segments[0].cp2).toEqual({ x: 150, y: -120 });
+
+    expect(anim.arcPath!.segments[1].cp1).toEqual({ x: 250, y: -80 });
+    expect(anim.arcPath!.segments[1].cp2).toEqual({ x: 350, y: 30 });
+
+    expect(anim.keyframes!.keyframes).toHaveLength(3);
+    expect(anim.keyframes!.keyframes[0].properties).toEqual({ x: 0, y: 0 });
+    expect(anim.keyframes!.keyframes[1].properties).toEqual({ x: 200, y: -100 });
+    expect(anim.keyframes!.keyframes[2].properties).toEqual({ x: 400, y: 50 });
+  });
+
+  it("parses motionPath with autoRotate", () => {
+    const script = `
+      const tl = gsap.timeline({ paused: true });
+      tl.to("#el", {
+        motionPath: {
+          path: [{x: 0, y: 0}, {x: 200, y: 100}],
+          autoRotate: true
+        },
+        duration: 1
+      }, 0);
+    `;
+    const result = parseGsapScript(script);
+    const anim = result.animations[0];
+    expect(anim.arcPath!.autoRotate).toBe(true);
+  });
+
+  it("merges motionPath waypoints into existing keyframes", () => {
+    const script = `
+      const tl = gsap.timeline({ paused: true });
+      tl.to("#el", {
+        motionPath: {
+          path: [{x: 0, y: 0}, {x: 200, y: 100}],
+          curviness: 2
+        },
+        keyframes: {
+          "0%": { opacity: 1 },
+          "100%": { opacity: 0 }
+        },
+        duration: 2
+      }, 0);
+    `;
+    const result = parseGsapScript(script);
+    const anim = result.animations[0];
+
+    expect(anim.arcPath).toBeDefined();
+    expect(anim.arcPath!.segments).toHaveLength(1);
+    expect(anim.arcPath!.segments[0].curviness).toBe(2);
+
+    expect(anim.keyframes!.keyframes).toHaveLength(2);
+    expect(anim.keyframes!.keyframes[0].properties).toEqual({ opacity: 1, x: 0, y: 0 });
+    expect(anim.keyframes!.keyframes[1].properties).toEqual({ opacity: 0, x: 200, y: 100 });
+  });
+
+  it("skips motionPath with fewer than 2 waypoints", () => {
+    const script = `
+      const tl = gsap.timeline({ paused: true });
+      tl.to("#el", {
+        motionPath: { path: [{x: 0, y: 0}] },
+        duration: 1
+      }, 0);
+    `;
+    const result = parseGsapScript(script);
+    expect(result.animations[0].arcPath).toBeUndefined();
+  });
+
+  it("tween without motionPath parses identically to before", () => {
+    const script = `
+      const tl = gsap.timeline({ paused: true });
+      tl.to("#el", { x: 100, y: 200, duration: 1 }, 0);
+    `;
+    const result = parseGsapScript(script);
+    const anim = result.animations[0];
+    expect(anim.arcPath).toBeUndefined();
+    expect(anim.properties.x).toBe(100);
+    expect(anim.properties.y).toBe(200);
+  });
+});
diff --git a/packages/core/src/parsers/gsapParser.ts b/packages/core/src/parsers/gsapParser.ts
index 478fbdbba..f5423657b 100644
--- a/packages/core/src/parsers/gsapParser.ts
+++ b/packages/core/src/parsers/gsapParser.ts
@@ -11,6 +11,8 @@
 import * as recast from "recast";
 import { parse as babelParse } from "@babel/parser";
 import {
+  type ArcPathConfig,
+  type ArcPathSegment,
   type GsapAnimation,
   type GsapKeyframesData,
   type GsapMethod,
@@ -19,6 +21,8 @@ import {
 } from "./gsapSerialize";
 
 export type {
+  ArcPathConfig,
+  ArcPathSegment,
   GsapAnimation,
   GsapMethod,
   ParsedGsap,
@@ -685,6 +689,84 @@ function parseSimpleArrayKeyframes(node: any, scope: ScopeBindings): GsapKeyfram
   };
 }
 
+// ── MotionPath Parsing ────────────────────────────────────────────────────
+
+interface MotionPathParseResult {
+  arcPath: ArcPathConfig;
+  waypoints: Array<{ x: number; y: number }>;
+}
+
+function parseMotionPathNode(node: any, scope: ScopeBindings): MotionPathParseResult | undefined {
+  if (!node) return undefined;
+
+  let pathNode: any;
+  let autoRotate: boolean | number = false;
+  let curviness = 1;
+  let isCubic = false;
+
+  if (node.type === "ObjectExpression") {
+    for (const prop of node.properties ?? []) {
+      if (!isObjectProperty(prop)) continue;
+      const key = propKeyName(prop);
+      if (key === "path") pathNode = prop.value;
+      else if (key === "autoRotate") {
+        const val = resolveNode(prop.value, scope);
+        autoRotate = typeof val === "number" ? val : val === true;
+      } else if (key === "curviness") {
+        const val = resolveNode(prop.value, scope);
+        if (typeof val === "number") curviness = val;
+      } else if (key === "type") {
+        const val = resolveNode(prop.value, scope);
+        if (val === "cubic") isCubic = true;
+      }
+    }
+  } else if (node.type === "ArrayExpression") {
+    pathNode = node;
+  }
+
+  if (!pathNode || pathNode.type !== "ArrayExpression") return undefined;
+
+  const elements = pathNode.elements ?? [];
+  const coords: Array<{ x: number; y: number }> = [];
+  for (const elem of elements) {
+    if (!elem || elem.type !== "ObjectExpression") continue;
+    const rec = objectExpressionToRecord(elem, scope);
+    const x = typeof rec.x === "number" ? rec.x : undefined;
+    const y = typeof rec.y === "number" ? rec.y : undefined;
+    if (x !== undefined && y !== undefined) coords.push({ x, y });
+  }
+
+  if (coords.length < 2) return undefined;
+
+  let waypoints: Array<{ x: number; y: number }>;
+  const segments: ArcPathSegment[] = [];
+
+  if (isCubic && coords.length >= 4) {
+    // type: "cubic" — coords are [anchor, cp1, cp2, anchor, cp1, cp2, anchor, ...]
+    // Every 3rd coord starting from 0 is an anchor, the two between are control points.
+    waypoints = [];
+    waypoints.push(coords[0]!);
+    for (let i = 1; i + 2 < coords.length; i += 3) {
+      const cp1 = coords[i]!;
+      const cp2 = coords[i + 1]!;
+      const anchor = coords[i + 2]!;
+      waypoints.push(anchor);
+      segments.push({ curviness, cp1, cp2 });
+    }
+  } else {
+    // Waypoint array with global curviness
+    waypoints = coords;
+    for (let i = 0; i < waypoints.length - 1; i++) {
+      segments.push({ curviness });
+    }
+  }
+
+  return {
+    arcPath: { enabled: true, autoRotate, segments },
+    waypoints,
+  };
+}
+
 // fallow-ignore-next-line complexity
 function tweenCallToAnimation(
   call: TweenCallInfo,
@@ -695,6 +777,7 @@ function tweenCallToAnimation(
   const extras: Record<string, unknown> = {};
   let keyframesData: GsapKeyframesData | undefined;
   let hasUnresolvedKeyframes = false;
+  let motionPathResult: MotionPathParseResult | undefined;
 
   for (const [key, val] of Object.entries(vars)) {
     if (BUILTIN_VAR_KEYS.has(key)) continue;
@@ -707,6 +790,12 @@ function tweenCallToAnimation(
       continue;
     }
 
+    if (key === "motionPath") {
+      const mpNode = findPropertyNode(call.varsArg, "motionPath");
+      motionPathResult = parseMotionPathNode(mpNode, scope);
+      continue;
+    }
+
     if (key === "easeEach") {
       // easeEach is only meaningful alongside keyframes — handled below.
       continue;
@@ -734,6 +823,30 @@ function tweenCallToAnimation(
     keyframesData.easeEach = vars.easeEach as string;
   }
 
+  // When motionPath is present, reconstruct x/y as keyframe waypoints.
+  if (motionPathResult) {
+    const { waypoints } = motionPathResult;
+    if (!keyframesData) {
+      // No explicit keyframes — create synthetic percentage keyframes from waypoints.
+      const kf: GsapPercentageKeyframe[] = waypoints.map((wp, i) => ({
+        percentage: waypoints.length > 1 ? Math.round((i / (waypoints.length - 1)) * 100) : 0,
+        properties: { x: wp.x, y: wp.y },
+      }));
+      keyframesData = { format: "percentage", keyframes: kf };
+    } else {
+      // Merge waypoint positions into existing keyframes at matching percentages.
+      // If keyframe count matches waypoint count, assign positionally.
+      const kfs = keyframesData.keyframes;
+      if (kfs.length === waypoints.length) {
+        for (let i = 0; i < kfs.length; i++) {
+          kfs[i]!.properties.x = waypoints[i]!.x;
+          kfs[i]!.properties.y = waypoints[i]!.y;
+        }
+      }
+    }
+    // arcPath is attached below on the animation result.
+  }
+
   let fromProperties: Record<string, number | string> | undefined;
   if (call.method === "fromTo" && call.fromArg) {
     fromProperties = {};
@@ -762,6 +875,7 @@ function tweenCallToAnimation(
   };
   if (Object.keys(extras).length > 0) anim.extras = extras;
   if (keyframesData) anim.keyframes = keyframesData;
+  if (motionPathResult) anim.arcPath = motionPathResult.arcPath;
   if (hasUnresolvedKeyframes) anim.hasUnresolvedKeyframes = true;
   if (call.selector === "__unresolved__") anim.hasUnresolvedSelector = true;
   return anim;
@@ -1481,6 +1595,219 @@ export function materializeKeyframesInScript(
   return recast.print(loc.parsed.ast).code;
 }
 
+// ── Arc Path (motionPath) AST Mutations ──────────────────────────────────
+
+function buildMotionPathObjectCode(config: {
+  waypoints: Array<{ x: number; y: number }>;
+  segments: ArcPathSegment[];
+  autoRotate: boolean | number;
+}): string {
+  const { waypoints, segments, autoRotate } = config;
+  const hasExplicitControlPoints = segments.some((s) => s.cp1 && s.cp2);
+
+  let pathEntries: string[];
+  if (hasExplicitControlPoints && waypoints.length >= 2) {
+    // type: "cubic" — interleave control points: [anchor, cp1, cp2, anchor, ...]
+    pathEntries = [`{x: ${waypoints[0]!.x}, y: ${waypoints[0]!.y}}`];
+    for (let i = 0; i < segments.length; i++) {
+      const seg = segments[i]!;
+      const nextWp = waypoints[i + 1]!;
+      if (seg.cp1 && seg.cp2) {
+        pathEntries.push(`{x: ${seg.cp1.x}, y: ${seg.cp1.y}}`);
+        pathEntries.push(`{x: ${seg.cp2.x}, y: ${seg.cp2.y}}`);
+      } else {
+        // Auto-generate simple midpoint control points from curviness
+        const wp = waypoints[i]!;
+        const dx = nextWp.x - wp.x;
+        const dy = nextWp.y - wp.y;
+        const c = seg.curviness ?? 1;
+        pathEntries.push(
+          `{x: ${wp.x + dx * 0.33}, y: ${wp.y + dy * 0.33 - c * Math.abs(dx) * 0.25}}`,
+        );
+        pathEntries.push(
+          `{x: ${wp.x + dx * 0.66}, y: ${wp.y + dy * 0.66 - c * Math.abs(dx) * 0.25}}`,
+        );
+      }
+      pathEntries.push(`{x: ${nextWp.x}, y: ${nextWp.y}}`);
+    }
+    const pathStr = pathEntries.join(", ");
+    const parts = [`path: [${pathStr}]`, `type: "cubic"`];
+    if (autoRotate === true) parts.push("autoRotate: true");
+    else if (typeof autoRotate === "number") parts.push(`autoRotate: ${autoRotate}`);
+    return `{ ${parts.join(", ")} }`;
+  }
+
+  // Simple waypoint array with curviness
+  pathEntries = waypoints.map((wp) => `{x: ${wp.x}, y: ${wp.y}}`);
+  const curviness = segments[0]?.curviness ?? 1;
+  const parts = [`path: [${pathEntries.join(", ")}]`];
+  if (curviness !== 1) parts.push(`curviness: ${curviness}`);
+  if (autoRotate === true) parts.push("autoRotate: true");
+  else if (typeof autoRotate === "number") parts.push(`autoRotate: ${autoRotate}`);
+  return `{ ${parts.join(", ")} }`;
+}
+
+export function setArcPathInScript(
+  script: string,
+  animationId: string,
+  config: ArcPathConfig,
+): string {
+  const loc = locateAnimation(script, animationId);
+  if (!loc) return script;
+
+  const varsArg = loc.target.call.varsArg;
+  const anim = loc.target.animation;
+
+  if (!config.enabled) {
+    // Disable arc: restore x/y from motionPath's last waypoint, then remove motionPath
+    const motionPathProp = varsArg.properties.find(
+      (p: any) => isObjectProperty(p) && propKeyName(p) === "motionPath",
+    );
+    if (motionPathProp) {
+      const mpVal = motionPathProp.value;
+      let pathArr: any[] | undefined;
+      if (mpVal?.type === "ObjectExpression") {
+        const pathProp = mpVal.properties.find(
+          (p: any) => isObjectProperty(p) && propKeyName(p) === "path",
+        );
+        if (pathProp?.value?.type === "ArrayExpression") pathArr = pathProp.value.elements;
+      }
+      if (pathArr && pathArr.length > 0) {
+        const last = pathArr[pathArr.length - 1];
+        if (last?.type === "ObjectExpression") {
+          for (const p of last.properties) {
+            const k = propKeyName(p);
+            if (k === "x" || k === "y") {
+              const v = p.value?.value;
+              if (typeof v === "number") setVarsKey(varsArg, k, v);
+            }
+          }
+        }
+      }
+    }
+    removeVarsKey(varsArg, "motionPath");
+    return recast.print(loc.parsed.ast).code;
+  }
+
+  // Extract x/y waypoints from keyframes or flat tween properties
+  const kfs = anim.keyframes?.keyframes ?? [];
+  const waypoints: Array<{ x: number; y: number }> = [];
+  for (const kf of kfs) {
+    const x = typeof kf.properties.x === "number" ? kf.properties.x : undefined;
+    const y = typeof kf.properties.y === "number" ? kf.properties.y : undefined;
+    if (x !== undefined && y !== undefined) waypoints.push({ x, y });
+  }
+
+  // For flat tweens with x/y in properties, synthesize start → end waypoints
+  if (waypoints.length < 2) {
+    const px = anim.properties.x;
+    const py = anim.properties.y;
+    if (typeof px === "number" || typeof py === "number") {
+      waypoints.length = 0;
+      waypoints.push({ x: 0, y: 0 });
+      waypoints.push({ x: typeof px === "number" ? px : 0, y: typeof py === "number" ? py : 0 });
+    }
+  }
+
+  if (waypoints.length < 2) return script;
+
+  // Build segments — use provided segments or create defaults
+  const segments: ArcPathSegment[] =
+    config.segments.length === waypoints.length - 1
+      ? config.segments
+      : Array.from({ length: waypoints.length - 1 }, () => ({ curviness: 1 }));
+
+  const motionPathCode = buildMotionPathObjectCode({
+    waypoints,
+    segments,
+    autoRotate: config.autoRotate,
+  });
+
+  // Set motionPath on the vars
+  const motionPathNode = parseExpr(motionPathCode);
+  const existingProp = varsArg.properties.find(
+    (p: any) => isObjectProperty(p) && propKeyName(p) === "motionPath",
+  );
+  if (existingProp) {
+    existingProp.value = motionPathNode;
+  } else {
+    const prop = parseExpr(`{ motionPath: ${motionPathCode} }`).properties[0];
+    varsArg.properties.push(prop);
+  }
+
+  // Strip x/y from keyframes (they're now in motionPath)
+  const kfNode = findKeyframesObjectNode(varsArg);
+  if (kfNode) {
+    for (const pctProp of filterPercentageProps(kfNode)) {
+      if (pctProp.value?.type === "ObjectExpression") {
+        pctProp.value.properties = pctProp.value.properties.filter((p: any) => {
+          const k = propKeyName(p);
+          return k !== "x" && k !== "y";
+        });
+      }
+    }
+  }
+
+  // Strip flat x/y from vars (they're now in motionPath)
+  removeVarsKey(varsArg, "x");
+  removeVarsKey(varsArg, "y");
+
+  return recast.print(loc.parsed.ast).code;
+}
+
+export function updateArcSegmentInScript(
+  script: string,
+  animationId: string,
+  segmentIndex: number,
+  update: Partial<ArcPathSegment>,
+): string {
+  const loc = locateAnimation(script, animationId);
+  if (!loc) return script;
+
+  const anim = loc.target.animation;
+  if (!anim.arcPath?.enabled) return script;
+
+  const segments = [...anim.arcPath.segments];
+  if (segmentIndex < 0 || segmentIndex >= segments.length) return script;
+
+  segments[segmentIndex] = { ...segments[segmentIndex]!, ...update };
+
+  // Rebuild the full motionPath with updated segments
+  const kfs = anim.keyframes?.keyframes ?? [];
+  const waypoints: Array<{ x: number; y: number }> = [];
+  for (const kf of kfs) {
+    const x = typeof kf.properties.x === "number" ? kf.properties.x : undefined;
+    const y = typeof kf.properties.y === "number" ? kf.properties.y : undefined;
+    if (x !== undefined && y !== undefined) waypoints.push({ x, y });
+  }
+
+  if (waypoints.length < 2) return script;
+
+  const motionPathCode = buildMotionPathObjectCode({
+    waypoints,
+    segments,
+    autoRotate: anim.arcPath.autoRotate,
+  });
+
+  const varsArg = loc.target.call.varsArg;
+  const existingProp = varsArg.properties.find(
+    (p: any) => isObjectProperty(p) && propKeyName(p) === "motionPath",
+  );
+  if (existingProp) {
+    existingProp.value = parseExpr(motionPathCode);
+  }
+
+  return recast.print(loc.parsed.ast).code;
+}
+
+export function removeArcPathFromScript(script: string, animationId: string): string {
+  return setArcPathInScript(script, animationId, {
+    enabled: false,
+    autoRotate: false,
+    segments: [],
+  });
+}
+
 /**
  * Replace a dynamic loop that generates multiple tween calls with individual
  * static `tl.to()` calls — one per element. Finds the loop containing the
diff --git a/packages/core/src/parsers/gsapSerialize.ts b/packages/core/src/parsers/gsapSerialize.ts
index 364c586da..b480190e6 100644
--- a/packages/core/src/parsers/gsapSerialize.ts
+++ b/packages/core/src/parsers/gsapSerialize.ts
@@ -23,6 +23,8 @@ export interface GsapAnimation {
   extras?: Record<string, unknown>;
   /** Native GSAP keyframes data — present when the tween uses keyframes: { ... }. */
   keyframes?: GsapKeyframesData;
+  /** Arc motion path config — present when the tween uses motionPath for curved position interpolation. */
+  arcPath?: ArcPathConfig;
   /** True when the tween has a `keyframes` property that couldn't be statically resolved (dynamic). */
   hasUnresolvedKeyframes?: boolean;
   /** True when the tween's target selector couldn't be statically resolved (dynamic). */
@@ -44,6 +46,18 @@ export interface GsapKeyframesData {
   easeEach?: string;
 }
 
+export interface ArcPathSegment {
+  curviness: number;
+  cp1?: { x: number; y: number };
+  cp2?: { x: number; y: number };
+}
+
+export interface ArcPathConfig {
+  enabled: boolean;
+  autoRotate: boolean | number;
+  segments: ArcPathSegment[];
+}
+
 export interface ParsedGsap {
   animations: GsapAnimation[];
   timelineVar: string;
@@ -176,10 +190,8 @@ const FORBIDDEN_GSAP_PATTERNS: Array<{ pattern: RegExp; message: string }> = [
   { pattern: /\.add\s*\(/, message: "add() method not allowed" },
   { pattern: /\.addLabel\s*\(/, message: "addLabel() method not allowed" },
   { pattern: /\.addPause\s*\(/, message: "addPause() method not allowed" },
-  { pattern: /gsap\.registerPlugin\s*\(/, message: "registerPlugin() not allowed" },
   { pattern: /gsap\.registerEffect\s*\(/, message: "registerEffect() not allowed" },
   { pattern: /ScrollTrigger/, message: "ScrollTrigger not allowed" },
-  { pattern: /MotionPathPlugin/, message: "MotionPathPlugin not allowed" },
   { pattern: /onComplete\s*:/, message: "onComplete callback not allowed" },
   { pattern: /onUpdate\s*:/, message: "onUpdate callback not allowed" },
   { pattern: /onStart\s*:/, message: "onStart callback not allowed" },
diff --git a/packages/core/src/runtime/init.ts b/packages/core/src/runtime/init.ts
index 6b62d3cfb..1e1c1b6a3 100644
--- a/packages/core/src/runtime/init.ts
+++ b/packages/core/src/runtime/init.ts
@@ -999,6 +999,51 @@ export function initSandboxRuntimeModular(): void {
         mediaDurationFloorSeconds: resolution.mediaDurationFloorSeconds ?? null,
       },
     });
+    // Stamp data-start / data-duration on GSAP-targeted elements that lack
+    // them so the Studio timeline can discover individual animated elements.
+    {
+      const rootComp = resolveRootCompositionElement();
+      const rootDuration = boundDuration > 0 ? boundDuration : 0;
+      const dur = String(rootDuration > 0 ? rootDuration : 1);
+      const seen = new Set<Element>();
+
+      // Stamp GSAP-targeted elements
+      if (state.capturedTimeline.getChildren) {
+        try {
+          for (const child of state.capturedTimeline.getChildren(true)) {
+            if (typeof child.targets !== "function") continue;
+            for (const target of child.targets()) {
+              if (!(target instanceof HTMLElement)) continue;
+              if (target === rootComp) continue;
+              if (target.hasAttribute("data-start")) continue;
+              if (seen.has(target)) continue;
+              seen.add(target);
+              target.setAttribute("data-start", "0");
+              target.setAttribute("data-duration", dur);
+            }
+          }
+        } catch {
+          /* timeline access guard */
+        }
+      }
+
+      // Stamp all ID'd children of the composition root so they appear
+      // in the timeline even without animations. Enables selecting and
+      // adding animations from the design panel on a blank canvas.
+      if (rootComp instanceof HTMLElement) {
+        for (const el of rootComp.querySelectorAll("[id]")) {
+          if (!(el instanceof HTMLElement)) continue;
+          if (el === rootComp) continue;
+          if (el.hasAttribute("data-start")) continue;
+          if (seen.has(el)) continue;
+          if (el.tagName === "SCRIPT" || el.tagName === "STYLE" || el.tagName === "LINK") continue;
+          seen.add(el);
+          el.setAttribute("data-start", "0");
+          el.setAttribute("data-duration", dur);
+        }
+      }
+    }
+
     // (Re-)probe all already-bound media elements against the new timeline.
     // Clear the cache first so elements probed against a prior timeline get fresh keyframes.
     for (const el of metadataBoundMedia) {
diff --git a/packages/core/src/studio-api/helpers/studioMotionRenderScript.ts b/packages/core/src/studio-api/helpers/studioMotionRenderScript.ts
index 87d2b815e..d229e8832 100644
--- a/packages/core/src/studio-api/helpers/studioMotionRenderScript.ts
+++ b/packages/core/src/studio-api/helpers/studioMotionRenderScript.ts
@@ -58,6 +58,7 @@ function studioMotionRenderRuntime(
       registerPlugin?: (...plugins: unknown[]) => unknown;
     };
     CustomEase?: { create?: (id: string, data: string) => unknown };
+    MotionPathPlugin?: unknown;
     __player?: { getTime?: () => number };
     __timeline?: { time?: () => number };
     __timelines?: Record<
@@ -212,6 +213,9 @@ function studioMotionRenderRuntime(
     restoreStudioMotionElements();
     const gsap = runtimeWindow.gsap;
     if (!gsap?.timeline || manifestMotions.length === 0) return 0;
+    if (runtimeWindow.MotionPathPlugin) {
+      gsap.registerPlugin?.(runtimeWindow.MotionPathPlugin);
+    }
 
     const timeline = gsap.timeline({ paused: true, defaults: { overwrite: "auto" } });
     let applied = 0;
diff --git a/packages/core/src/studio-api/routes/files.ts b/packages/core/src/studio-api/routes/files.ts
index fddd4321d..4b1347911 100644
--- a/packages/core/src/studio-api/routes/files.ts
+++ b/packages/core/src/studio-api/routes/files.ts
@@ -651,7 +651,27 @@ export function registerFileRoutes(api: Hono, adapter: StudioApiAdapter): void {
           keyframes: Array<{ percentage: number; properties: Record<string, number | string> }>;
           easeEach?: string;
         }>;
-      };
+      }
+    | {
+        type: "set-arc-path";
+        animationId: string;
+        enabled: boolean;
+        autoRotate?: boolean | number;
+        segments?: Array<{
+          curviness: number;
+          cp1?: { x: number; y: number };
+          cp2?: { x: number; y: number };
+        }>;
+      }
+    | {
+        type: "update-arc-segment";
+        animationId: string;
+        segmentIndex: number;
+        curviness?: number;
+        cp1?: { x: number; y: number };
+        cp2?: { x: number; y: number };
+      }
+    | { type: "remove-arc-path"; animationId: string };
 
   api.post("/projects/:id/gsap-mutations/*", async (c) => {
     const res = await resolveProjectPath(c, adapter, (id) => `/projects/${id}/gsap-mutations/`, {
@@ -835,6 +855,34 @@ export function registerFileRoutes(api: Hono, adapter: StudioApiAdapter): void {
         }
         break;
       }
+      case "set-arc-path": {
+        const { setArcPathInScript } = await loadGsapParser();
+        newScript = setArcPathInScript(block.scriptText, body.animationId, {
+          enabled: body.enabled,
+          autoRotate: body.autoRotate ?? false,
+          segments: body.segments ?? [],
+        });
+        break;
+      }
+      case "update-arc-segment": {
+        const { updateArcSegmentInScript } = await loadGsapParser();
+        newScript = updateArcSegmentInScript(
+          block.scriptText,
+          body.animationId,
+          body.segmentIndex,
+          {
+            ...(body.curviness !== undefined ? { curviness: body.curviness } : {}),
+            ...(body.cp1 ? { cp1: body.cp1 } : {}),
+            ...(body.cp2 ? { cp2: body.cp2 } : {}),
+          },
+        );
+        break;
+      }
+      case "remove-arc-path": {
+        const { removeArcPathFromScript } = await loadGsapParser();
+        newScript = removeArcPathFromScript(block.scriptText, body.animationId);
+        break;
+      }
       default:
         return c.json({ error: `unknown mutation type: ${(body as { type: string }).type}` }, 400);
     }
diff --git a/packages/core/src/templates/constants.ts b/packages/core/src/templates/constants.ts
index eabb04fbb..74078d120 100644
--- a/packages/core/src/templates/constants.ts
+++ b/packages/core/src/templates/constants.ts
@@ -1,4 +1,6 @@
 export const GSAP_CDN = "https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js";
+export const MOTIONPATH_CDN =
+  "https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/MotionPathPlugin.min.js";
 
 export const BASE_STYLES = `* { margin: 0; padding: 0; box-sizing: border-box; }
 html, body { width: 100%; height: 100%; overflow: hidden; background: #000; display: flex; align-items: center; justify-content: center; }`;
diff --git a/packages/producer/build.mjs b/packages/producer/build.mjs
index b2f4d4fb8..4721ef685 100644
--- a/packages/producer/build.mjs
+++ b/packages/producer/build.mjs
@@ -15,6 +15,14 @@ mkdirSync("dist", { recursive: true });
 
 const scriptDir = dirname(fileURLToPath(import.meta.url));
 
+// The banner provides a real `require` function via createRequire so that
+// esbuild's CJS interop (__require) works correctly in ESM output.
+// Without this, bundled CJS deps (recast, yauzl, etc.) that call
+// require("fs") throw "Dynamic require of 'fs' is not supported".
+const cjsBanner = {
+  js: "import { createRequire as __cjsRequire } from 'module'; const require = __cjsRequire(import.meta.url);",
+};
+
 const workspaceAliasPlugin = {
   name: "workspace-alias",
   setup(build) {
@@ -36,80 +44,32 @@ const workspaceAliasPlugin = {
   },
 };
 
+const sharedOpts = {
+  bundle: true,
+  platform: "node",
+  target: "node22",
+  format: "esm",
+  external: ["puppeteer", "esbuild", "postcss"],
+  plugins: [workspaceAliasPlugin],
+  minify: false,
+  sourcemap: true,
+  banner: cjsBanner,
+};
+
 await Promise.all([
+  build({ ...sharedOpts, entryPoints: ["src/index.ts"], outfile: "dist/index.js" }),
+  build({ ...sharedOpts, entryPoints: ["src/server.ts"], outfile: "dist/public-server.js" }),
   build({
-    bundle: true,
-    platform: "node",
-    target: "node22",
-    format: "esm",
-    external: ["puppeteer", "esbuild", "postcss"],
-    plugins: [workspaceAliasPlugin],
-    minify: false,
-    sourcemap: true,
-    entryPoints: ["src/index.ts"],
-    outfile: "dist/index.js",
-  }),
-  build({
-    bundle: true,
-    platform: "node",
-    target: "node22",
-    format: "esm",
-    external: ["puppeteer", "esbuild", "postcss"],
-    plugins: [workspaceAliasPlugin],
-    minify: false,
-    sourcemap: true,
-    entryPoints: ["src/server.ts"],
-    outfile: "dist/public-server.js",
-  }),
-  // PNG decode + alpha-blit worker (hf#732 lever-4). Loaded by
-  // `pngDecodeBlitWorkerPool.createPngDecodeBlitWorkerPool` via
-  // `new Worker(<path>)`. Must be a separate entry point so the worker
-  // module is standalone and shares no parent module-graph state.
-  build({
-    bundle: true,
-    platform: "node",
-    target: "node22",
-    format: "esm",
-    external: ["puppeteer", "esbuild", "postcss"],
-    plugins: [workspaceAliasPlugin],
-    minify: false,
-    sourcemap: true,
+    ...sharedOpts,
     entryPoints: ["src/services/pngDecodeBlitWorker.ts"],
     outfile: "dist/services/pngDecodeBlitWorker.js",
   }),
-  // Shader-blend worker (hf#677 follow-up). Loaded by
-  // `shaderTransitionWorkerPool.createShaderTransitionWorkerPool` via
-  // `new Worker(<path>)`. Same bundling rationale as the
-  // `pngDecodeBlitWorker` entry above.
   build({
-    bundle: true,
-    platform: "node",
-    target: "node22",
-    format: "esm",
-    external: ["puppeteer", "esbuild", "postcss"],
-    plugins: [workspaceAliasPlugin],
-    minify: false,
-    sourcemap: true,
+    ...sharedOpts,
     entryPoints: ["src/services/shaderTransitionWorker.ts"],
     outfile: "dist/services/shaderTransitionWorker.js",
   }),
-  // `@hyperframes/producer/distributed` subpath — the public distributed
-  // render primitives (plan / renderChunk / assemble). Bundled as a
-  // separate entry so adopters that don't need the in-process renderer
-  // (Lambda chunk workers, CDK constructs, thin orchestrators) can import
-  // only this surface and skip the rest of the producer's dependency tree.
-  build({
-    bundle: true,
-    platform: "node",
-    target: "node22",
-    format: "esm",
-    external: ["puppeteer", "esbuild", "postcss"],
-    plugins: [workspaceAliasPlugin],
-    minify: false,
-    sourcemap: true,
-    entryPoints: ["src/distributed.ts"],
-    outfile: "dist/distributed.js",
-  }),
+  build({ ...sharedOpts, entryPoints: ["src/distributed.ts"], outfile: "dist/distributed.js" }),
 ]);
 
 // Copy core runtime artifacts so the producer can find them at dist/
diff --git a/packages/studio/src/App.tsx b/packages/studio/src/App.tsx
index 5bbaaf29e..af9edf131 100644
--- a/packages/studio/src/App.tsx
+++ b/packages/studio/src/App.tsx
@@ -514,6 +514,7 @@ export function StudioApp() {
                 refreshCaptureFrameTime={frameCapture.refreshCaptureFrameTime}
                 inspectorButtonActive={inspectorButtonActive}
                 inspectorPanelActive={inspectorPanelActive}
+                onExport={() => void renderQueue.startRender()}
               />
 
               <div className="flex flex-1 min-h-0">
diff --git a/packages/studio/src/components/StudioHeader.tsx b/packages/studio/src/components/StudioHeader.tsx
index 9384950ab..3404df15c 100644
--- a/packages/studio/src/components/StudioHeader.tsx
+++ b/packages/studio/src/components/StudioHeader.tsx
@@ -17,6 +17,7 @@ export interface StudioHeaderProps {
   refreshCaptureFrameTime: () => void;
   inspectorButtonActive: boolean;
   inspectorPanelActive: boolean;
+  onExport?: () => void;
 }
 
 function HyperframesLogo() {
@@ -147,6 +148,7 @@ export function StudioHeader({
   refreshCaptureFrameTime,
   inspectorButtonActive,
   inspectorPanelActive,
+  onExport,
 }: StudioHeaderProps) {
   const { projectId, editHistory, handleUndo, handleRedo } = useStudioContext();
   const { rightCollapsed, setRightCollapsed, setRightPanelTab } = usePanelLayoutContext();
@@ -264,6 +266,17 @@ export function StudioHeader({
           </svg>
           Inspector
         </button>
+        <button
+          type="button"
+          onClick={() => {
+            setRightPanelTab("renders");
+            setRightCollapsed(false);
+            onExport?.();
+          }}
+          className="h-7 flex items-center gap-1.5 px-3 rounded-md text-[11px] font-semibold bg-studio-accent text-[#09090B] hover:brightness-110 transition-colors"
+        >
+          Export
+        </button>
       </div>
     </div>
   );
diff --git a/packages/studio/src/components/StudioRightPanel.tsx b/packages/studio/src/components/StudioRightPanel.tsx
index a0adf87d4..ed68072a8 100644
--- a/packages/studio/src/components/StudioRightPanel.tsx
+++ b/packages/studio/src/components/StudioRightPanel.tsx
@@ -92,6 +92,8 @@ export function StudioRightPanel({
     handleGsapAddFromProperty,
     handleGsapRemoveFromProperty,
     commitAnimatedProperty,
+    handleSetArcPath,
+    handleUpdateArcSegment,
   } = useDomEditContext();
 
   const { assets, fontAssets, projectDir, handleImportFiles, handleImportFonts } =
@@ -226,6 +228,8 @@ export function StudioRightPanel({
                   onRemoveGsapFromProperty={handleGsapRemoveFromProperty}
                   onAddGsapAnimation={handleGsapAddAnimation}
                   onCommitAnimatedProperty={commitAnimatedProperty}
+                  onSetArcPath={handleSetArcPath}
+                  onUpdateArcSegment={handleUpdateArcSegment}
                 />
               ) : motionPanelActive ? (
                 <MotionPanel
diff --git a/packages/studio/src/components/editor/AnimationCard.tsx b/packages/studio/src/components/editor/AnimationCard.tsx
index 839d3f7b3..60e5a6fdc 100644
--- a/packages/studio/src/components/editor/AnimationCard.tsx
+++ b/packages/studio/src/components/editor/AnimationCard.tsx
@@ -17,6 +17,9 @@ import {
 } from "./gsapAnimationConstants";
 import { buildTweenSummary } from "./gsapAnimationHelpers";
 import { EaseCurveSection } from "./EaseCurveSection";
+import { ArcPathControls } from "./ArcPathControls";
+import type { ArcPathSegment } from "@hyperframes/core/gsap-parser";
+import { P } from "./panelTokens";
 const BOOLEAN_PROPS = new Set(["visibility"]);
 const STRING_PROPS = new Set(["filter", "clipPath"]);
 
@@ -97,11 +100,18 @@ function PropertyRow({
           <button
             type="button"
             onClick={() => onCommit(isVisible ? "hidden" : "visible")}
-            className={`flex-shrink-0 w-7 h-4 rounded-full transition-colors relative ${isVisible ? "bg-emerald-500/30" : "bg-neutral-700"}`}
+            className={`flex-shrink-0 rounded-full transition-all duration-150 relative`}
+            style={{ width: 28, height: 16, background: isVisible ? P.accent : P.borderInput }}
             title={isVisible ? "Visible — click to hide" : "Hidden — click to show"}
           >
             <span
-              className={`absolute top-0.5 h-3 w-3 rounded-full transition-transform ${isVisible ? "bg-emerald-400 translate-x-3.5" : "bg-neutral-500 translate-x-0.5"}`}
+              className="absolute top-[2px] left-0 rounded-full transition-transform duration-150"
+              style={{
+                width: 12,
+                height: 12,
+                background: isVisible ? P.white : P.textMuted,
+                transform: isVisible ? "translateX(14px)" : "translateX(2px)",
+              }}
             />
           </button>
         </div>
@@ -241,6 +251,15 @@ interface AnimationCardProps {
   onRemoveFromProperty?: (animationId: string, property: string) => void;
   onLivePreview?: (property: string, value: number | string) => void;
   onLivePreviewEnd?: () => void;
+  onSetArcPath?: (
+    animationId: string,
+    config: { enabled: boolean; autoRotate?: boolean | number; segments?: ArcPathSegment[] },
+  ) => void;
+  onUpdateArcSegment?: (
+    animationId: string,
+    segmentIndex: number,
+    update: Partial<ArcPathSegment>,
+  ) => void;
 }
 
 // fallow-ignore-next-line complexity
@@ -257,6 +276,8 @@ export const AnimationCard = memo(function AnimationCard({
   onRemoveFromProperty,
   onLivePreview,
   onLivePreviewEnd,
+  onSetArcPath,
+  onUpdateArcSegment,
 }: AnimationCardProps) {
   const [expanded, setExpanded] = useState(defaultExpanded);
   const [addingProp, setAddingProp] = useState(false);
@@ -348,7 +369,7 @@ export const AnimationCard = memo(function AnimationCard({
         className="flex w-full items-center gap-2 py-1.5"
       >
         <span
-          className="rounded bg-emerald-500/10 px-1.5 py-0.5 text-[10px] font-semibold text-emerald-400"
+          className="rounded bg-panel-accent/10 px-1.5 py-0.5 text-[10px] font-semibold text-panel-accent"
           title={METHOD_TOOLTIPS[animation.method]}
         >
           {methodLabel}
@@ -477,7 +498,7 @@ export const AnimationCard = memo(function AnimationCard({
             )}
 
             {animation.method === "fromTo" && Object.keys(animation.properties).length > 0 && (
-              <p className="text-[9px] font-semibold uppercase tracking-wider text-emerald-400/70">
+              <p className="text-[9px] font-semibold uppercase tracking-wider text-panel-accent/70">
                 To
               </p>
             )}
@@ -500,6 +521,39 @@ export const AnimationCard = memo(function AnimationCard({
               </div>
             )}
 
+            {onSetArcPath &&
+              (animation.properties.x != null ||
+                animation.properties.y != null ||
+                animation.keyframes) && (
+                <div className="border-t border-neutral-800 pt-3">
+                  <ArcPathControls
+                    arcPath={
+                      animation.arcPath ?? { enabled: false, autoRotate: false, segments: [] }
+                    }
+                    segmentCount={Math.max(
+                      animation.properties.x != null || animation.properties.y != null ? 1 : 0,
+                      (animation.keyframes?.keyframes?.length ?? 0) - 1,
+                    )}
+                    onToggle={(enabled) =>
+                      onSetArcPath(animation.id, {
+                        enabled,
+                        segments: animation.arcPath?.segments,
+                      })
+                    }
+                    onUpdateSegment={(index, update) =>
+                      onUpdateArcSegment?.(animation.id, index, update)
+                    }
+                    onToggleAutoRotate={(autoRotate) =>
+                      onSetArcPath(animation.id, {
+                        enabled: true,
+                        autoRotate,
+                        segments: animation.arcPath?.segments,
+                      })
+                    }
+                  />
+                </div>
+              )}
+
             <div className="flex items-center gap-2 pt-1">
               <AddPropertyTrigger
                 adding={addingProp}
diff --git a/packages/studio/src/components/editor/ArcPathControls.tsx b/packages/studio/src/components/editor/ArcPathControls.tsx
new file mode 100644
index 000000000..e9f46607d
--- /dev/null
+++ b/packages/studio/src/components/editor/ArcPathControls.tsx
@@ -0,0 +1,131 @@
+import { memo, useCallback } from "react";
+import type { ArcPathConfig, ArcPathSegment } from "@hyperframes/core/gsap-parser";
+import { SliderControl } from "./propertyPanelPrimitives";
+import { LABEL } from "./propertyPanelHelpers";
+import { P } from "./panelTokens";
+
+interface ArcPathControlsProps {
+  arcPath: ArcPathConfig;
+  segmentCount: number;
+  onToggle: (enabled: boolean) => void;
+  onUpdateSegment: (index: number, update: Partial<ArcPathSegment>) => void;
+  onToggleAutoRotate: (autoRotate: boolean) => void;
+  disabled?: boolean;
+}
+
+export const ArcPathControls = memo(function ArcPathControls({
+  arcPath,
+  segmentCount,
+  onToggle,
+  onUpdateSegment,
+  onToggleAutoRotate,
+  disabled,
+}: ArcPathControlsProps) {
+  const handleToggle = useCallback(() => {
+    onToggle(!arcPath.enabled);
+  }, [arcPath.enabled, onToggle]);
+
+  const handleAutoRotate = useCallback(() => {
+    onToggleAutoRotate(!arcPath.autoRotate);
+  }, [arcPath.autoRotate, onToggleAutoRotate]);
+
+  if (segmentCount < 1) {
+    return (
+      <div className="rounded-md border border-neutral-800 bg-neutral-900/50 px-3 py-2">
+        <p className="text-[11px] text-neutral-500">
+          Add at least 2 position keyframes to enable arc motion.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between">
+        <span className={LABEL}>Arc Motion</span>
+        <button
+          type="button"
+          onClick={handleToggle}
+          disabled={disabled}
+          className="relative rounded-full transition-all duration-150"
+          style={{ width: 28, height: 16, background: arcPath.enabled ? P.accent : P.borderInput }}
+          title={arcPath.enabled ? "Disable arc motion" : "Enable arc motion"}
+        >
+          <span
+            className="absolute top-[2px] left-0 rounded-full transition-transform duration-150"
+            style={{
+              width: 12,
+              height: 12,
+              background: arcPath.enabled ? P.white : P.textMuted,
+              transform: arcPath.enabled ? "translateX(14px)" : "translateX(2px)",
+            }}
+          />
+        </button>
+      </div>
+
+      {arcPath.enabled && (
+        <>
+          <div className="flex items-center justify-between">
+            <span className={LABEL}>Auto-Rotate</span>
+            <button
+              type="button"
+              onClick={handleAutoRotate}
+              disabled={disabled}
+              className="relative rounded-full transition-all duration-150"
+              style={{
+                width: 28,
+                height: 16,
+                background: arcPath.autoRotate ? P.accent : "#27272A",
+              }}
+              title={
+                arcPath.autoRotate
+                  ? "Disable auto-rotate along path"
+                  : "Rotate element to follow path tangent"
+              }
+            >
+              <span
+                className="absolute top-[2px] left-0 rounded-full transition-transform duration-150"
+                style={{
+                  width: 12,
+                  height: 12,
+                  background: arcPath.autoRotate ? P.white : P.textMuted,
+                  transform: arcPath.autoRotate ? "translateX(14px)" : "translateX(2px)",
+                }}
+              />
+            </button>
+          </div>
+
+          {arcPath.segments.map((seg, i) => (
+            <div key={i} className="grid min-w-0 gap-1.5">
+              <div className="flex items-center justify-between">
+                <span className={LABEL}>
+                  {segmentCount === 1 ? "Curviness" : `Segment ${i + 1}`}
+                </span>
+                {seg.cp1 && seg.cp2 && (
+                  <button
+                    type="button"
+                    onClick={() => onUpdateSegment(i, { cp1: undefined, cp2: undefined })}
+                    className="text-[9px] font-medium text-neutral-500 transition-colors hover:text-neutral-300"
+                    title="Reset to auto-generated control points"
+                  >
+                    Reset
+                  </button>
+                )}
+              </div>
+              <SliderControl
+                value={seg.curviness}
+                min={0}
+                max={3}
+                step={0.1}
+                disabled={disabled}
+                displayValue={seg.curviness.toFixed(1)}
+                formatDisplayValue={(v) => v.toFixed(1)}
+                onCommit={(v) => onUpdateSegment(i, { curviness: v })}
+              />
+            </div>
+          ))}
+        </>
+      )}
+    </div>
+  );
+});
diff --git a/packages/studio/src/components/editor/BorderRadiusEditor.tsx b/packages/studio/src/components/editor/BorderRadiusEditor.tsx
index c4f697a5f..011d5aeb6 100644
--- a/packages/studio/src/components/editor/BorderRadiusEditor.tsx
+++ b/packages/studio/src/components/editor/BorderRadiusEditor.tsx
@@ -83,28 +83,28 @@ export function BorderRadiusEditor({
             cx={sTL}
             cy={sTL}
             r={3}
-            fill={linked ? "#3b82f6" : "#a78bfa"}
+            fill={linked ? "#3CE6AC" : "#52525B"}
             className="cursor-pointer"
           />
           <circle
             cx={PREVIEW_W - sTR}
             cy={sTR}
             r={3}
-            fill={linked ? "#3b82f6" : "#a78bfa"}
+            fill={linked ? "#3CE6AC" : "#52525B"}
             className="cursor-pointer"
           />
           <circle
             cx={PREVIEW_W - sBR}
             cy={PREVIEW_H - sBR}
             r={3}
-            fill={linked ? "#3b82f6" : "#a78bfa"}
+            fill={linked ? "#3CE6AC" : "#52525B"}
             className="cursor-pointer"
           />
           <circle
             cx={sBL}
             cy={PREVIEW_H - sBL}
             r={3}
-            fill={linked ? "#3b82f6" : "#a78bfa"}
+            fill={linked ? "#3CE6AC" : "#52525B"}
             className="cursor-pointer"
           />
         </svg>
diff --git a/packages/studio/src/components/editor/DomEditOverlay.tsx b/packages/studio/src/components/editor/DomEditOverlay.tsx
index ec289fc78..60fc487cf 100644
--- a/packages/studio/src/components/editor/DomEditOverlay.tsx
+++ b/packages/studio/src/components/editor/DomEditOverlay.tsx
@@ -90,6 +90,29 @@ export const DomEditOverlay = memo(function DomEditOverlay({
 }: DomEditOverlayProps) {
   const overlayRef = useRef<HTMLDivElement | null>(null);
   const boxRef = useRef<HTMLDivElement | null>(null);
+
+  const selectionShapeStyles = (() => {
+    const fallback = {
+      borderRadius: 4 as string | number,
+      clipPath: undefined as string | undefined,
+    };
+    if (!selection?.element) return fallback;
+    try {
+      const tag = selection.element.tagName.toLowerCase();
+      if (tag === "svg" || tag === "img" || tag === "video" || tag === "canvas") return fallback;
+      const win = selection.element.ownerDocument.defaultView;
+      if (!win) return fallback;
+      const cs = win.getComputedStyle(selection.element);
+      const br = cs.borderRadius;
+      const cp = cs.clipPath;
+      return {
+        borderRadius: br && br !== "0px" ? br : 4,
+        clipPath: cp && cp !== "none" ? cp : undefined,
+      };
+    } catch {
+      return fallback;
+    }
+  })();
   const gestureRef = useRef<GestureState | null>(null);
   const groupGestureRef = useRef<GroupGestureState | null>(null);
   const blockedMoveRef = useRef<BlockedMoveState | null>(null);
@@ -324,13 +347,30 @@ export const DomEditOverlay = memo(function DomEditOverlay({
         <div
           aria-hidden="true"
           data-dom-edit-hover-box="true"
-          className="pointer-events-none absolute rounded-xl border border-studio-accent/80 bg-studio-accent/5 shadow-[0_0_0_1px_rgba(60,230,172,0.25)]"
-          style={{
-            left: hoverRect.left,
-            top: hoverRect.top,
-            width: hoverRect.width,
-            height: hoverRect.height,
-          }}
+          className="pointer-events-none absolute border border-studio-accent/80 bg-studio-accent/5 shadow-[0_0_0_1px_rgba(60,230,172,0.25)]"
+          style={(() => {
+            let br: string | number = 4;
+            let cp: string | undefined;
+            try {
+              const el = hoverSelection.element;
+              const tag = el.tagName.toLowerCase();
+              if (tag !== "svg" && tag !== "img" && tag !== "video" && tag !== "canvas") {
+                const cs = el.ownerDocument.defaultView?.getComputedStyle(el);
+                if (cs?.borderRadius && cs.borderRadius !== "0px") br = cs.borderRadius;
+                if (cs?.clipPath && cs.clipPath !== "none") cp = cs.clipPath;
+              }
+            } catch {
+              /* cross-origin guard */
+            }
+            return {
+              left: hoverRect.left,
+              top: hoverRect.top,
+              width: hoverRect.width,
+              height: hoverRect.height,
+              borderRadius: br,
+              clipPath: cp,
+            };
+          })()}
         />
       )}
       {hasGroupSelection && groupOverlayItems.length > 1 && groupBounds && (
@@ -398,12 +438,14 @@ export const DomEditOverlay = memo(function DomEditOverlay({
             key={selectionKey}
             ref={boxRef}
             data-dom-edit-selection-box="true"
-            className="pointer-events-auto absolute rounded-xl border border-studio-accent/80 bg-studio-accent/5 shadow-[0_0_0_1px_rgba(60,230,172,0.25)]"
+            className={`pointer-events-auto absolute ${selectionShapeStyles.clipPath ? "shadow-[inset_0_0_0_2px_rgba(60,230,172,0.6)]" : "border border-studio-accent/80 shadow-[0_0_0_1px_rgba(60,230,172,0.25)]"} bg-studio-accent/5`}
             style={{
               left: overlayRect.left,
               top: overlayRect.top,
               width: overlayRect.width,
               height: overlayRect.height,
+              borderRadius: selectionShapeStyles.borderRadius,
+              clipPath: selectionShapeStyles.clipPath,
               cursor:
                 allowCanvasMovement && selection.capabilities.canApplyManualOffset
                   ? "move"
diff --git a/packages/studio/src/components/editor/EaseCurveSection.tsx b/packages/studio/src/components/editor/EaseCurveSection.tsx
index 88e6b81f8..ba348c0b2 100644
--- a/packages/studio/src/components/editor/EaseCurveSection.tsx
+++ b/packages/studio/src/components/editor/EaseCurveSection.tsx
@@ -113,7 +113,7 @@ export function EaseCurveSection({
         <button
           type="button"
           onClick={play}
-          className="rounded px-1.5 py-0.5 text-[10px] font-medium text-emerald-400 transition-colors hover:bg-emerald-500/10"
+          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>
@@ -165,17 +165,17 @@ export function EaseCurveSection({
             y1={end.y}
             x2={p2.x}
             y2={p2.y}
-            stroke="rgba(52,211,153,0.25)"
+            stroke="rgba(45,212,191,0.25)"
             strokeWidth="1"
           />
-          <path d={curvePath} fill="none" stroke="#34d399" strokeWidth="2" strokeLinecap="round" />
-          {progress !== null && <circle cx={dotX} cy={dotY} r="4" fill="#34d399" />}
+          <path d={curvePath} fill="none" stroke="#3CE6AC" strokeWidth="2" strokeLinecap="round" />
+          {progress !== null && <circle cx={dotX} cy={dotY} r="4" fill="#3CE6AC" />}
           <circle
             cx={p1.x}
             cy={p1.y}
             r="5"
             fill="#0a0a1a"
-            stroke="#34d399"
+            stroke="#3CE6AC"
             strokeWidth="2"
             className="cursor-grab active:cursor-grabbing"
             onPointerDown={(e) => handlePointerDown("p1", e)}
@@ -185,7 +185,7 @@ export function EaseCurveSection({
             cy={p2.y}
             r="5"
             fill="#0a0a1a"
-            stroke="#34d399"
+            stroke="#3CE6AC"
             strokeWidth="2"
             className="cursor-grab active:cursor-grabbing"
             onPointerDown={(e) => handlePointerDown("p2", e)}
diff --git a/packages/studio/src/components/editor/GsapAnimationSection.tsx b/packages/studio/src/components/editor/GsapAnimationSection.tsx
index f9c6a505e..72ecf5186 100644
--- a/packages/studio/src/components/editor/GsapAnimationSection.tsx
+++ b/packages/studio/src/components/editor/GsapAnimationSection.tsx
@@ -1,5 +1,5 @@
 import { memo, useState } from "react";
-import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
+import type { ArcPathSegment, GsapAnimation } from "@hyperframes/core/gsap-parser";
 import { Film } from "../../icons/SystemIcons";
 import { Section } from "./propertyPanelPrimitives";
 import { ADD_METHODS, ADD_METHOD_LABELS, METHOD_TOOLTIPS } from "./gsapAnimationConstants";
@@ -23,6 +23,15 @@ interface GsapAnimationSectionProps {
   onAddAnimation: (method: "to" | "from" | "set" | "fromTo") => void;
   onLivePreview?: (property: string, value: number | string) => void;
   onLivePreviewEnd?: () => void;
+  onSetArcPath?: (
+    animationId: string,
+    config: { enabled: boolean; autoRotate?: boolean | number; segments?: ArcPathSegment[] },
+  ) => void;
+  onUpdateArcSegment?: (
+    animationId: string,
+    segmentIndex: number,
+    update: Partial<ArcPathSegment>,
+  ) => void;
 }
 
 export const GsapAnimationSection = memo(function GsapAnimationSection({
@@ -40,6 +49,8 @@ export const GsapAnimationSection = memo(function GsapAnimationSection({
   onAddAnimation,
   onLivePreview,
   onLivePreviewEnd,
+  onSetArcPath,
+  onUpdateArcSegment,
 }: GsapAnimationSectionProps) {
   const [addMenuOpen, setAddMenuOpen] = useState(false);
 
@@ -75,6 +86,8 @@ export const GsapAnimationSection = memo(function GsapAnimationSection({
               onRemoveFromProperty={onRemoveFromProperty}
               onLivePreview={onLivePreview}
               onLivePreviewEnd={onLivePreviewEnd}
+              onSetArcPath={onSetArcPath}
+              onUpdateArcSegment={onUpdateArcSegment}
             />
           ))}
 
diff --git a/packages/studio/src/components/editor/KeyframeDiamond.tsx b/packages/studio/src/components/editor/KeyframeDiamond.tsx
index 10c7814c8..d519b63ad 100644
--- a/packages/studio/src/components/editor/KeyframeDiamond.tsx
+++ b/packages/studio/src/components/editor/KeyframeDiamond.tsx
@@ -18,7 +18,7 @@ export const KeyframeDiamond = memo(function KeyframeDiamond({
 }: KeyframeDiamondProps) {
   const isFilled = state === "active";
   const opacity = state === "ghost" ? 0.25 : state === "inactive" ? 0.6 : 1;
-  const color = state === "active" ? "#3b82f6" : "#a3a3a3";
+  const color = state === "active" ? "#3CE6AC" : "#a3a3a3";
 
   return (
     <button
diff --git a/packages/studio/src/components/editor/LayersPanel.tsx b/packages/studio/src/components/editor/LayersPanel.tsx
index 8dddc31f1..4eda5c35d 100644
--- a/packages/studio/src/components/editor/LayersPanel.tsx
+++ b/packages/studio/src/components/editor/LayersPanel.tsx
@@ -239,9 +239,9 @@ export const LayersPanel = memo(function LayersPanel() {
 
   if (layers.length === 0) {
     return (
-      <div className="flex h-full flex-col items-center justify-center bg-neutral-900 px-6 text-center">
-        <Layers size={18} className="mb-3 text-neutral-600" />
-        <p className="text-sm font-medium text-neutral-200">No layers</p>
+      <div className="flex h-full flex-col items-center justify-center bg-panel-bg px-6 text-center">
+        <Layers size={18} className="mb-3 text-panel-text-5" />
+        <p className="text-sm font-medium text-panel-text-1">No layers</p>
         <p className="mt-1 text-xs text-neutral-500">Load a composition to see its element tree</p>
       </div>
     );
@@ -249,10 +249,10 @@ export const LayersPanel = memo(function LayersPanel() {
 
   return (
     <div
-      className="flex h-full min-h-0 flex-col overflow-hidden bg-neutral-900"
+      className="flex h-full min-h-0 flex-col overflow-hidden bg-panel-bg"
       onPointerLeave={() => handleLayerHover(null)}
     >
-      <div className="border-b border-white/10 px-3 py-2 text-[11px] text-neutral-500">
+      <div className="border-b border-panel-border px-3 py-2 text-[11px] text-panel-text-3">
         {layers.length} layer{layers.length === 1 ? "" : "s"}
       </div>
       <div
@@ -289,8 +289,8 @@ export const LayersPanel = memo(function LayersPanel() {
                 isDragged
                   ? "opacity-40"
                   : selected
-                    ? "bg-studio-accent/14 text-studio-accent"
-                    : "text-neutral-300 hover:bg-white/[0.04] hover:text-neutral-100"
+                    ? "bg-panel-accent/14 text-panel-accent"
+                    : "text-panel-text-2 hover:bg-panel-hover/40 hover:text-panel-text-1"
               } ${dragKey ? "cursor-grabbing" : draggable ? "cursor-pointer" : "cursor-not-allowed opacity-50"}`}
               style={{ paddingLeft: 8 + layer.depth * 16 }}
             >
@@ -316,17 +316,19 @@ export const LayersPanel = memo(function LayersPanel() {
               <span
                 className={`flex h-5 w-5 flex-shrink-0 items-center justify-center rounded text-[8px] font-bold uppercase ${
                   selected
-                    ? "bg-studio-accent/18 text-studio-accent"
+                    ? "bg-panel-accent/18 text-panel-accent"
                     : isCompHost
-                      ? "bg-blue-900/40 text-blue-400"
-                      : "bg-neutral-800 text-neutral-500"
+                      ? "bg-panel-accent/40 text-panel-accent"
+                      : "bg-panel-hover text-panel-text-4"
                 }`}
               >
                 {getTagBadge(layer.tagName)}
               </span>
               <span className="min-w-0 flex-1 truncate text-[11px]">{layer.label}</span>
               {hasChildren && (
-                <span className="text-[9px] tabular-nums text-neutral-600">{layer.childCount}</span>
+                <span className="text-[9px] tabular-nums text-panel-text-5">
+                  {layer.childCount}
+                </span>
               )}
             </div>
           );
diff --git a/packages/studio/src/components/editor/MotionPathOverlay.tsx b/packages/studio/src/components/editor/MotionPathOverlay.tsx
new file mode 100644
index 000000000..49ea39dd0
--- /dev/null
+++ b/packages/studio/src/components/editor/MotionPathOverlay.tsx
@@ -0,0 +1,146 @@
+import { memo, useMemo, type RefObject } from "react";
+import type { ArcPathConfig } from "@hyperframes/core/gsap-parser";
+
+interface MotionPathOverlayProps {
+  iframeRef: RefObject<HTMLIFrameElement | null>;
+  arcPath: ArcPathConfig | null;
+  waypoints: Array<{ x: number; y: number }> | null;
+  elementBaseRect: { left: number; top: number; scaleX: number; scaleY: number } | null;
+}
+
+function buildSvgPath(
+  waypoints: Array<{ x: number; y: number }>,
+  segments: ArcPathConfig["segments"],
+  base: { left: number; top: number; scaleX: number; scaleY: number },
+): string {
+  if (waypoints.length < 2) return "";
+
+  const toPixel = (wp: { x: number; y: number }) => ({
+    x: base.left + wp.x * base.scaleX,
+    y: base.top + wp.y * base.scaleY,
+  });
+
+  const first = toPixel(waypoints[0]!);
+  const parts = [`M ${first.x} ${first.y}`];
+
+  for (let i = 0; i < segments.length && i < waypoints.length - 1; i++) {
+    const seg = segments[i]!;
+    const end = toPixel(waypoints[i + 1]!);
+
+    if (seg.cp1 && seg.cp2) {
+      const c1 = toPixel(seg.cp1);
+      const c2 = toPixel(seg.cp2);
+      parts.push(`C ${c1.x} ${c1.y} ${c2.x} ${c2.y} ${end.x} ${end.y}`);
+    } else {
+      const start = toPixel(waypoints[i]!);
+      const dx = end.x - start.x;
+      const dy = end.y - start.y;
+      const c = seg.curviness ?? 1;
+      const offset = c * Math.abs(dx) * 0.25;
+      const c1x = start.x + dx * 0.33;
+      const c1y = start.y + dy * 0.33 - offset;
+      const c2x = start.x + dx * 0.66;
+      const c2y = start.y + dy * 0.66 - offset;
+      parts.push(`C ${c1x} ${c1y} ${c2x} ${c2y} ${end.x} ${end.y}`);
+    }
+  }
+
+  return parts.join(" ");
+}
+
+export const MotionPathOverlay = memo(function MotionPathOverlay({
+  arcPath,
+  waypoints,
+  elementBaseRect,
+}: MotionPathOverlayProps) {
+  const pathD = useMemo(() => {
+    if (!arcPath?.enabled || !waypoints || waypoints.length < 2 || !elementBaseRect) return "";
+    return buildSvgPath(waypoints, arcPath.segments, elementBaseRect);
+  }, [arcPath, waypoints, elementBaseRect]);
+
+  const anchorPoints = useMemo(() => {
+    if (!waypoints || !elementBaseRect) return [];
+    return waypoints.map((wp) => ({
+      x: elementBaseRect.left + wp.x * elementBaseRect.scaleX,
+      y: elementBaseRect.top + wp.y * elementBaseRect.scaleY,
+    }));
+  }, [waypoints, elementBaseRect]);
+
+  const controlPoints = useMemo(() => {
+    if (!arcPath?.enabled || !elementBaseRect) return [];
+    const points: Array<{
+      segIndex: number;
+      type: "cp1" | "cp2";
+      x: number;
+      y: number;
+      anchorX: number;
+      anchorY: number;
+    }> = [];
+    for (let i = 0; i < arcPath.segments.length; i++) {
+      const seg = arcPath.segments[i]!;
+      if (seg.cp1 && seg.cp2 && waypoints) {
+        const anchor1 = waypoints[i]!;
+        const anchor2 = waypoints[i + 1]!;
+        points.push({
+          segIndex: i,
+          type: "cp1",
+          x: elementBaseRect.left + seg.cp1.x * elementBaseRect.scaleX,
+          y: elementBaseRect.top + seg.cp1.y * elementBaseRect.scaleY,
+          anchorX: elementBaseRect.left + anchor1.x * elementBaseRect.scaleX,
+          anchorY: elementBaseRect.top + anchor1.y * elementBaseRect.scaleY,
+        });
+        points.push({
+          segIndex: i,
+          type: "cp2",
+          x: elementBaseRect.left + seg.cp2.x * elementBaseRect.scaleX,
+          y: elementBaseRect.top + seg.cp2.y * elementBaseRect.scaleY,
+          anchorX: elementBaseRect.left + anchor2.x * elementBaseRect.scaleX,
+          anchorY: elementBaseRect.top + anchor2.y * elementBaseRect.scaleY,
+        });
+      }
+    }
+    return points;
+  }, [arcPath, waypoints, elementBaseRect]);
+
+  if (!pathD) return null;
+
+  return (
+    <svg className="absolute inset-0 pointer-events-none z-20 overflow-visible">
+      <path d={pathD} fill="none" stroke="rgba(45, 212, 191, 0.4)" strokeWidth={2} />
+
+      {controlPoints.map((cp) => (
+        <g key={`${cp.segIndex}-${cp.type}`}>
+          <line
+            x1={cp.anchorX}
+            y1={cp.anchorY}
+            x2={cp.x}
+            y2={cp.y}
+            stroke="rgba(167, 139, 250, 0.3)"
+            strokeWidth={1}
+            strokeDasharray="3 2"
+          />
+          <circle
+            cx={cp.x}
+            cy={cp.y}
+            r={4}
+            fill="#a78bfa"
+            className="pointer-events-auto cursor-grab"
+          />
+        </g>
+      ))}
+
+      {anchorPoints.map((pt, i) => (
+        <circle
+          key={i}
+          cx={pt.x}
+          cy={pt.y}
+          r={5}
+          fill="#3CE6AC"
+          stroke="rgba(255,255,255,0.5)"
+          strokeWidth={1}
+          className="pointer-events-auto cursor-pointer"
+        />
+      ))}
+    </svg>
+  );
+});
diff --git a/packages/studio/src/components/editor/PropertyPanel.tsx b/packages/studio/src/components/editor/PropertyPanel.tsx
index 551d734be..db9bcd477 100644
--- a/packages/studio/src/components/editor/PropertyPanel.tsx
+++ b/packages/studio/src/components/editor/PropertyPanel.tsx
@@ -4,7 +4,6 @@ import { readStudioBoxSize, readStudioPathOffset, readStudioRotation } from "./m
 import {
   EMPTY_STYLES,
   formatPxMetricValue,
-  LABEL,
   parsePxMetricValue,
   RESPONSIVE_GRID,
 } from "./propertyPanelHelpers";
@@ -16,7 +15,7 @@ import { KeyframeNavigation } from "./KeyframeNavigation";
 import { STUDIO_GSAP_PANEL_ENABLED, STUDIO_KEYFRAMES_ENABLED } from "./manualEditingAvailability";
 import { usePlayerStore } from "../../player";
 import { TimingSection } from "./propertyPanelTimingSection";
-import { computeFitToChildrenSize, type PropertyPanelProps } from "./propertyPanelHelpers";
+import { type PropertyPanelProps } from "./propertyPanelHelpers";
 
 // Re-export helpers that external consumers import from this module
 export {
@@ -70,6 +69,8 @@ export const PropertyPanel = memo(function PropertyPanel({
   onAddGsapFromProperty,
   onRemoveGsapFromProperty,
   onAddGsapAnimation,
+  onSetArcPath,
+  onUpdateArcSegment,
   onAddKeyframe,
   onRemoveKeyframe,
   onConvertToKeyframes,
@@ -252,34 +253,33 @@ export const PropertyPanel = memo(function PropertyPanel({
   const displayR = gsapRuntimeValues?.rotation ?? manualRotation.angle;
 
   return (
-    <div className="flex h-full min-h-0 flex-col overflow-hidden bg-neutral-900 text-neutral-100">
-      <div className="border-b border-neutral-800 px-4 py-5">
-        <div className="flex items-start justify-between gap-4">
+    <div className="flex h-full min-h-0 flex-col overflow-hidden bg-panel-bg text-panel-text-1">
+      <div className="px-4 py-3">
+        <div className="flex items-center justify-between gap-4">
           <div className="min-w-0">
-            <div className={LABEL}>Document</div>
-            <div className="mt-3 truncate text-[12px] font-semibold text-neutral-100">
+            <div className="truncate text-[13px] font-semibold text-neutral-100">
               {element.label}
             </div>
-            <div className="mt-1 truncate text-[11px] text-neutral-500">{sourceLabel}</div>
+            <div className="mt-0.5 truncate text-[11px] text-neutral-500">{sourceLabel}</div>
+          </div>
+          <div className="flex items-center gap-1">
+            <button
+              type="button"
+              onClick={onAskAgent}
+              className="flex h-6 w-6 items-center justify-center rounded text-neutral-500 transition-colors hover:bg-neutral-800 hover:text-neutral-300"
+              title={copiedAgentPrompt ? "Prompt copied" : "Copy prompt to AI agent"}
+            >
+              <MessageSquare size={13} />
+            </button>
+            <button
+              type="button"
+              aria-label="Clear selection"
+              onClick={onClearSelection}
+              className="flex h-6 w-6 items-center justify-center rounded text-neutral-500 transition-colors hover:bg-neutral-800 hover:text-neutral-300"
+            >
+              <X size={13} />
+            </button>
           </div>
-          <button
-            type="button"
-            aria-label="Clear selection"
-            onClick={onClearSelection}
-            className="flex h-9 w-9 items-center justify-center rounded-full border border-neutral-700 bg-neutral-950 text-neutral-500 shadow-[0_1px_2px_rgba(0,0,0,0.2)] transition-colors hover:border-neutral-600 hover:text-neutral-200"
-          >
-            <X size={13} />
-          </button>
-        </div>
-        <div className="mt-4 flex min-w-0 flex-wrap items-center gap-2">
-          <button
-            type="button"
-            onClick={onAskAgent}
-            className="inline-flex h-8 items-center justify-center gap-2 rounded-xl border border-neutral-700 bg-neutral-950 px-3.5 text-[11px] font-medium text-neutral-100 transition-colors hover:border-studio-accent/40 hover:text-studio-accent"
-          >
-            <MessageSquare size={15} />
-            <span>{copiedAgentPrompt ? "Prompt copied" : "Copy prompt to AI agent"}</span>
-          </button>
         </div>
       </div>
 
@@ -412,29 +412,6 @@ export const PropertyPanel = memo(function PropertyPanel({
                 />
               )}
             </div>
-            {element.capabilities.canApplyManualSize && (
-              <button
-                type="button"
-                className="flex-shrink-0 rounded p-1 text-neutral-500 transition-colors hover:bg-neutral-800 hover:text-neutral-300"
-                title="Fit to children"
-                onClick={() => {
-                  const size = computeFitToChildrenSize(element);
-                  if (size) onSetManualSize(element, size);
-                }}
-              >
-                <svg
-                  width="14"
-                  height="14"
-                  viewBox="0 0 14 14"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="1.2"
-                >
-                  <rect x="2" y="2" width="10" height="10" strokeDasharray="2 1.5" rx="1" />
-                  <path d="M2 4.5h1m-1 5h1m8-5h1m-1 5h1M4.5 2v1m5-1v1M4.5 11v1m5-1v1" />
-                </svg>
-              </button>
-            )}
             <div className="flex items-center gap-1">
               <div className="flex-1">
                 <MetricField
@@ -561,6 +538,8 @@ export const PropertyPanel = memo(function PropertyPanel({
               onAddFromProperty={onAddGsapFromProperty}
               onRemoveFromProperty={onRemoveGsapFromProperty}
               onAddAnimation={onAddGsapAnimation}
+              onSetArcPath={onSetArcPath}
+              onUpdateArcSegment={onUpdateArcSegment}
             />
           )}
 
diff --git a/packages/studio/src/components/editor/domEditingElement.ts b/packages/studio/src/components/editor/domEditingElement.ts
index b081d6498..ab60f39b4 100644
--- a/packages/studio/src/components/editor/domEditingElement.ts
+++ b/packages/studio/src/components/editor/domEditingElement.ts
@@ -37,9 +37,26 @@ export function isElementComputedVisible(el: HTMLElement): boolean {
 
 const VISUAL_LEAF_TAGS = new Set(["img", "video", "canvas", "svg", "audio"]);
 
+function hasVisualPresence(el: HTMLElement): boolean {
+  const win = el.ownerDocument.defaultView;
+  if (!win) return false;
+  const cs = win.getComputedStyle(el);
+  if (cs.backgroundImage !== "none") return true;
+  if (
+    cs.backgroundColor &&
+    cs.backgroundColor !== "transparent" &&
+    cs.backgroundColor !== "rgba(0, 0, 0, 0)"
+  )
+    return true;
+  if (cs.borderWidth && parseFloat(cs.borderWidth) > 0 && cs.borderStyle !== "none") return true;
+  if (cs.boxShadow && cs.boxShadow !== "none") return true;
+  return false;
+}
+
 function isEmptyVisualContainer(el: HTMLElement): boolean {
   const tag = el.tagName.toLowerCase();
   if (VISUAL_LEAF_TAGS.has(tag)) return false;
+  if (hasVisualPresence(el)) return false;
 
   const { children } = el;
   if (children.length === 0) {
diff --git a/packages/studio/src/components/editor/manualEditingAvailability.ts b/packages/studio/src/components/editor/manualEditingAvailability.ts
index 553bb5e8d..dc4af6756 100644
--- a/packages/studio/src/components/editor/manualEditingAvailability.ts
+++ b/packages/studio/src/components/editor/manualEditingAvailability.ts
@@ -74,7 +74,7 @@ export const STUDIO_GSAP_PANEL_ENABLED = resolveStudioBooleanEnvFlag(
 export const STUDIO_KEYFRAMES_ENABLED = resolveStudioBooleanEnvFlag(
   env,
   ["VITE_STUDIO_ENABLE_KEYFRAMES", "VITE_STUDIO_KEYFRAMES_ENABLED"],
-  false,
+  true,
 );
 
 export const STUDIO_PREVIEW_SELECTION_ENABLED = STUDIO_INSPECTOR_PANELS_ENABLED;
diff --git a/packages/studio/src/components/editor/panelTokens.ts b/packages/studio/src/components/editor/panelTokens.ts
new file mode 100644
index 000000000..607101ab3
--- /dev/null
+++ b/packages/studio/src/components/editor/panelTokens.ts
@@ -0,0 +1,10 @@
+// ── Design Panel Tokens (for inline style={{}} usage) ──────────────────
+// Tailwind classes use `panel-*` from tailwind.config.js theme.extend.colors.
+// This file provides the same values for inline styles where Tailwind can't reach.
+
+export const P = {
+  accent: "#3CE6AC",
+  borderInput: "#27272A",
+  textMuted: "#52525B",
+  white: "#FAFAFA",
+} as const;
diff --git a/packages/studio/src/components/editor/propertyPanelColor.tsx b/packages/studio/src/components/editor/propertyPanelColor.tsx
index 2a8cb0fd5..962f0e917 100644
--- a/packages/studio/src/components/editor/propertyPanelColor.tsx
+++ b/packages/studio/src/components/editor/propertyPanelColor.tsx
@@ -71,7 +71,7 @@ function ColorSlider({
         aria-valuemax={max}
         aria-valuenow={value}
         aria-disabled={disabled}
-        className={`relative h-4 rounded-full border border-neutral-700 shadow-[inset_0_1px_2px_rgba(0,0,0,0.55)] outline-none focus:border-[#f5a400] focus:ring-2 focus:ring-[#f5a400]/40 ${
+        className={`relative h-4 rounded-full border border-neutral-700 shadow-[inset_0_1px_2px_rgba(0,0,0,0.55)] outline-none focus:border-panel-accent focus:ring-2 focus:ring-panel-accent/40 ${
           disabled ? "cursor-not-allowed opacity-50" : "cursor-ew-resize"
         }`}
         style={{ background }}
@@ -294,7 +294,7 @@ export function ColorField({
                 <div className="truncate text-[11px] font-medium text-neutral-100">
                   {currentColor}
                 </div>
-                <div className="mt-0.5 text-[9px] uppercase tracking-[0.12em] text-neutral-600">
+                <div className="mt-0.5 text-[9px] text-neutral-600">
                   S {saturationPercent}% · B {brightnessPercent}% · A {alphaPercent}%
                 </div>
               </div>
diff --git a/packages/studio/src/components/editor/propertyPanelFill.tsx b/packages/studio/src/components/editor/propertyPanelFill.tsx
index 77a0d2961..3b1669e04 100644
--- a/packages/studio/src/components/editor/propertyPanelFill.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFill.tsx
@@ -278,7 +278,7 @@ export function GradientField({
               checked={parsed.repeating}
               disabled={disabled}
               onChange={(e) => patch({ repeating: e.target.checked })}
-              className="h-4 w-4 rounded border-neutral-700 bg-neutral-950 text-[#3ce6ac] focus:ring-[#3ce6ac]"
+              className="h-4 w-4 rounded border-neutral-700 bg-neutral-950 text-panel-accent focus:ring-panel-accent"
             />
             Repeat
           </label>
diff --git a/packages/studio/src/components/editor/propertyPanelHelpers.ts b/packages/studio/src/components/editor/propertyPanelHelpers.ts
index d043ca332..f5e205a76 100644
--- a/packages/studio/src/components/editor/propertyPanelHelpers.ts
+++ b/packages/studio/src/components/editor/propertyPanelHelpers.ts
@@ -41,6 +41,19 @@ export interface PropertyPanelProps {
   onAddGsapFromProperty?: (animId: string, prop: string) => void;
   onRemoveGsapFromProperty?: (animId: string, prop: string) => void;
   onAddGsapAnimation?: (method: "to" | "from" | "set" | "fromTo") => void;
+  onSetArcPath?: (
+    animId: string,
+    config: {
+      enabled: boolean;
+      autoRotate?: boolean | number;
+      segments?: import("@hyperframes/core/gsap-parser").ArcPathSegment[];
+    },
+  ) => void;
+  onUpdateArcSegment?: (
+    animId: string,
+    segmentIndex: number,
+    update: Partial<import("@hyperframes/core/gsap-parser").ArcPathSegment>,
+  ) => void;
   onAddKeyframe?: (
     animationId: string,
     percentage: number,
@@ -184,8 +197,8 @@ function fontSourceRank(source: FontSource): number {
 /* ------------------------------------------------------------------ */
 
 export const FIELD =
-  "min-w-0 rounded-xl border border-neutral-800 bg-neutral-900/95 px-3 py-2 text-neutral-100 shadow-[inset_0_1px_0_rgba(255,255,255,0.03)] transition-colors focus-within:border-neutral-600";
-export const LABEL = "text-[11px] font-medium uppercase tracking-[0.18em] text-neutral-500";
+  "min-w-0 rounded-md bg-panel-input px-3 py-[7px] text-panel-text-1 transition-colors focus-within:ring-1 focus-within:ring-panel-accent/30";
+export const LABEL = "text-[11px] font-medium text-panel-text-3";
 export const RESPONSIVE_GRID = "grid grid-cols-[repeat(auto-fit,minmax(118px,1fr))] gap-3";
 export const EMPTY_STYLES: Record<string, string> = {};
 
diff --git a/packages/studio/src/components/editor/propertyPanelMediaSection.tsx b/packages/studio/src/components/editor/propertyPanelMediaSection.tsx
index 33269298d..eeff73077 100644
--- a/packages/studio/src/components/editor/propertyPanelMediaSection.tsx
+++ b/packages/studio/src/components/editor/propertyPanelMediaSection.tsx
@@ -76,7 +76,7 @@ export function MediaSection({
         {srcAttr && (
           <div className="min-w-0">
             <div className="flex items-center justify-between gap-2">
-              <div className="text-[10px] uppercase tracking-[0.12em] text-neutral-500">Source</div>
+              <div className="text-[11px] font-medium text-neutral-500">Source</div>
               <button
                 type="button"
                 onClick={() => {
diff --git a/packages/studio/src/components/editor/propertyPanelPrimitives.tsx b/packages/studio/src/components/editor/propertyPanelPrimitives.tsx
index 32e0ff0cc..c12173585 100644
--- a/packages/studio/src/components/editor/propertyPanelPrimitives.tsx
+++ b/packages/studio/src/components/editor/propertyPanelPrimitives.tsx
@@ -257,9 +257,9 @@ export function SliderControl({
         onMouseUp={() => commitDraft(draft)}
         onTouchEnd={() => commitDraft(draft)}
         onBlur={() => commitDraft(draft)}
-        className="h-2 min-w-0 w-full cursor-pointer appearance-none rounded-full bg-neutral-800 accent-[#3ce6ac] disabled:cursor-not-allowed"
+        className="h-4 min-w-0 w-full cursor-pointer appearance-none bg-transparent disabled:cursor-not-allowed disabled:opacity-50 [&::-webkit-slider-runnable-track]:h-[2px] [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-panel-border [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:-mt-1 [&::-webkit-slider-thumb]:shadow-[0_0_0_2px_#0C0C0E,0_1px_3px_rgba(0,0,0,0.5)] [&::-webkit-slider-thumb]:cursor-grab [&::-webkit-slider-thumb:active]:cursor-grabbing"
       />
-      <div className="min-w-[52px] rounded-xl border border-neutral-800 bg-neutral-900 px-2 py-2 text-right text-[11px] font-medium text-neutral-100 shadow-[inset_0_1px_0_rgba(255,255,255,0.03)]">
+      <div className="min-w-[44px] rounded-md bg-panel-input px-2 py-1.5 text-right text-[11px] font-medium text-panel-text-1 tabular-nums">
         {formatDisplayValue?.(draft) ?? displayValue}
       </div>
     </div>
@@ -279,7 +279,7 @@ export function SegmentedControl({
 }) {
   return (
     <div
-      className="grid min-w-0 gap-1 rounded-xl bg-neutral-900 p-1 shadow-[inset_0_1px_0_rgba(255,255,255,0.03)]"
+      className="grid min-w-0 gap-[2px] rounded-md bg-panel-input p-[2px]"
       style={{ gridTemplateColumns: `repeat(${options.length}, minmax(0, 1fr))` }}
     >
       {options.map((option) => (
@@ -288,10 +288,10 @@ export function SegmentedControl({
           type="button"
           disabled={disabled}
           onClick={() => onChange(option.value)}
-          className={`min-w-0 truncate rounded-lg px-2 py-1.5 text-[11px] font-medium transition-colors disabled:cursor-not-allowed ${
+          className={`min-w-0 truncate rounded px-2 py-[5px] text-[11px] font-medium transition-colors disabled:cursor-not-allowed ${
             option.value === value
-              ? "bg-neutral-800 text-white shadow-[0_1px_3px_rgba(0,0,0,0.28)]"
-              : "text-neutral-500 hover:text-neutral-200"
+              ? "bg-panel-hover text-white"
+              : "text-panel-text-4 hover:text-panel-text-2"
           }`}
         >
           {option.label}
@@ -336,7 +336,7 @@ export function SelectField({
 
 export function Section({
   title,
-  icon,
+  icon: _icon,
   children,
   accessory,
   defaultCollapsed = false,
@@ -350,32 +350,45 @@ export function Section({
   const [collapsed, setCollapsed] = useState(defaultCollapsed);
 
   return (
-    <section className="min-w-0 border-t border-neutral-800/80">
+    <section className="min-w-0 border-t border-panel-border">
       <button
         type="button"
         onClick={() => setCollapsed((v) => !v)}
-        className="flex w-full items-center justify-between gap-2 px-4 py-3"
+        className="flex w-full items-center justify-between gap-2 px-4 py-2.5"
       >
-        <div className="flex min-w-0 items-center gap-2.5">
-          <span className="flex-shrink-0 text-neutral-500">{icon}</span>
-          <h3 className="text-[11px] font-semibold uppercase tracking-[0.12em] text-neutral-300">
-            {title}
-          </h3>
-        </div>
+        <h3 className="text-[12px] font-semibold text-panel-text-1">{title}</h3>
         <div className="flex items-center gap-2">
           {accessory}
-          <svg
-            width="10"
-            height="10"
-            viewBox="0 0 10 10"
-            fill="currentColor"
-            className={`flex-shrink-0 text-neutral-500 transition-transform ${collapsed ? "-rotate-90" : ""}`}
-          >
-            <path d="M2 3l3 4 3-4z" />
-          </svg>
+          {collapsed && (
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 12 12"
+              fill="none"
+              className="flex-shrink-0 text-panel-text-5"
+            >
+              <path
+                d="M6 2.5v7M2.5 6h7"
+                stroke="currentColor"
+                strokeWidth="1.2"
+                strokeLinecap="round"
+              />
+            </svg>
+          )}
+          {!collapsed && (
+            <svg
+              width="10"
+              height="10"
+              viewBox="0 0 10 10"
+              fill="currentColor"
+              className="flex-shrink-0 text-panel-text-5"
+            >
+              <path d="M2 3l3 4 3-4z" />
+            </svg>
+          )}
         </div>
       </button>
-      {!collapsed && <div className="px-4 pb-4">{children}</div>}
+      {!collapsed && <div className="px-4 pb-3">{children}</div>}
     </section>
   );
 }
diff --git a/packages/studio/src/components/editor/propertyPanelSections.tsx b/packages/studio/src/components/editor/propertyPanelSections.tsx
index cef2c9602..2eaaa1792 100644
--- a/packages/studio/src/components/editor/propertyPanelSections.tsx
+++ b/packages/studio/src/components/editor/propertyPanelSections.tsx
@@ -262,15 +262,13 @@ function TextFieldEditor({
   onRemoveTextField: (fieldKey: string) => void;
 }) {
   return (
-    <div className="space-y-4 rounded-xl border border-neutral-800 bg-neutral-900/60 p-3">
+    <div className="space-y-3">
       <div className={showRemove ? "flex min-w-0 items-center justify-between gap-2" : "min-w-0"}>
         <div className="min-w-0">
           <div className="truncate text-[11px] font-medium text-neutral-100">
             {formatTextFieldPreview(field.value) || "Text"}
           </div>
-          <div className="text-[10px] uppercase tracking-[0.12em] text-neutral-500">
-            {field.tagName}
-          </div>
+          <div className="text-[10px] text-neutral-500">{field.tagName}</div>
         </div>
         {showRemove && (
           <button
@@ -368,7 +366,7 @@ export function TextSection({
 
   if (textFields.length === 1) {
     return (
-      <Section title="Text" icon={<Type size={15} />}>
+      <Section title="Text" icon={<Type size={15} />} defaultCollapsed>
         <TextFieldEditor
           field={activeField}
           styles={styles}
@@ -426,7 +424,7 @@ export function TextSection({
                         {formatTextFieldPreview(field.value) || `Text ${index + 1}`}
                       </span>
                     </div>
-                    <span className="flex-shrink-0 rounded-md border border-neutral-700 bg-neutral-950 px-1.5 py-0.5 text-[10px] uppercase tracking-[0.12em] text-neutral-500">
+                    <span className="flex-shrink-0 rounded-md border border-neutral-700 bg-neutral-950 px-1.5 py-0.5 text-[10px] text-neutral-500">
                       {field.tagName}
                     </span>
                   </div>
diff --git a/packages/studio/src/components/renders/RenderQueue.tsx b/packages/studio/src/components/renders/RenderQueue.tsx
index 1e00b9326..f3362843e 100644
--- a/packages/studio/src/components/renders/RenderQueue.tsx
+++ b/packages/studio/src/components/renders/RenderQueue.tsx
@@ -154,22 +154,22 @@ function FormatInfoTooltip({ format }: { format: "mp4" | "webm" | "mov" }) {
         strokeWidth="2"
         strokeLinecap="round"
         strokeLinejoin="round"
-        className="text-neutral-600 hover:text-neutral-400 transition-colors cursor-help"
+        className="text-panel-text-5 hover:text-panel-text-3 transition-colors cursor-help"
       >
         <circle cx="12" cy="12" r="10" />
         <path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3" />
         <line x1="12" y1="17" x2="12.01" y2="17" />
       </svg>
       {open && (
-        <div className="absolute top-full right-0 mt-1.5 w-52 p-2 rounded bg-neutral-900 border border-neutral-700 shadow-lg z-50">
-          <p className="text-[10px] font-semibold text-neutral-200 mb-0.5">{info.label}</p>
-          <p className="text-[9px] text-neutral-400 leading-tight">{info.desc}</p>
+        <div className="absolute top-full right-0 mt-1.5 w-52 p-2 rounded bg-panel-input border border-neutral-700 shadow-lg z-50">
+          <p className="text-[10px] font-semibold text-panel-text-1 mb-0.5">{info.label}</p>
+          <p className="text-[9px] text-panel-text-3 leading-tight">{info.desc}</p>
           <div className="mt-1.5 pt-1.5 border-t border-neutral-800">
             {(["mp4", "mov", "webm"] as const)
               .filter((f) => f !== format)
               .map((f) => (
-                <p key={f} className="text-[9px] text-neutral-500 leading-relaxed">
-                  <span className="text-neutral-400 font-medium">{FORMAT_INFO[f].label}</span>
+                <p key={f} className="text-[9px] text-panel-text-4 leading-relaxed">
+                  <span className="text-panel-text-3 font-medium">{FORMAT_INFO[f].label}</span>
                   {" — "}
                   {FORMAT_INFO[f].desc}
                 </p>
@@ -209,80 +209,97 @@ function FormatExportButton({
   // MOV (ProRes) is a fixed-quality codec — quality selector has no effect.
   const showQuality = format !== "mov";
 
+  const selectCls =
+    "h-7 w-full px-2 text-[11px] bg-panel-input rounded-md text-panel-text-1 outline-none cursor-pointer disabled:opacity-50 hover:bg-panel-hover transition-colors";
+
   return (
-    <div className="flex items-center gap-1 flex-wrap justify-end">
-      <FormatInfoTooltip format={format} />
-      {/* Resolution must remain the leftmost <select> in this row — it
-          carries `rounded-l` for the joined-button look. If you ever hide it
-          (feature-flag, etc.), move `rounded-l` to whichever element ends up
-          leftmost. */}
-      <select
-        value={resolution}
-        onChange={(e) => setResolution(e.target.value as ResolutionPreset | "auto")}
-        disabled={isRendering}
-        className="h-5 px-1 text-[10px] rounded-l bg-neutral-800 border border-neutral-700 text-neutral-300 outline-none disabled:opacity-50"
-      >
-        {SCALE_OPTION_ORDER.map((value) => (
-          <option key={value} value={value} disabled={!scaleApplies(value, compositionDimensions)}>
-            {scaleOptionLabel(value, compositionDimensions)}
-          </option>
-        ))}
-      </select>
-      {showQuality && (
-        <select
-          value={quality}
-          onChange={(e) => {
-            const v = e.target.value as "draft" | "standard" | "high";
-            setQuality(v);
-            persistRenderSettings(format, v, fps);
-          }}
-          disabled={isRendering}
-          title={QUALITY_OPTIONS.find((q) => q.value === quality)?.title}
-          className="h-5 px-1 text-[10px] bg-neutral-800 border border-neutral-700 text-neutral-300 outline-none disabled:opacity-50"
-        >
-          {QUALITY_OPTIONS.map((q) => (
-            <option key={q.value} value={q.value} title={q.title}>
-              {q.label}
-            </option>
-          ))}
-        </select>
-      )}
-      <select
-        value={fps}
-        onChange={(e) => {
-          const v = Number(e.target.value) as 24 | 30 | 60;
-          setFps(v);
-          persistRenderSettings(format, quality, v);
-        }}
-        disabled={isRendering}
-        title="Frames per second"
-        className="h-5 px-1 text-[10px] bg-neutral-800 border border-neutral-700 text-neutral-300 outline-none disabled:opacity-50"
-      >
-        <option value={24}>24fps</option>
-        <option value={30}>30fps</option>
-        <option value={60}>60fps</option>
-      </select>
-      <select
-        value={format}
-        onChange={(e) => {
-          const v = e.target.value as "mp4" | "webm" | "mov";
-          setFormat(v);
-          persistRenderSettings(v, quality, fps);
-        }}
-        disabled={isRendering}
-        className="h-5 px-1 text-[10px] bg-neutral-800 border border-neutral-700 text-neutral-300 outline-none disabled:opacity-50"
-      >
-        <option value="mp4">MP4</option>
-        <option value="mov">MOV</option>
-        <option value="webm">WebM</option>
-      </select>
+    <div className="flex flex-col gap-3">
+      <div className="grid grid-cols-2 gap-2">
+        <div className="flex flex-col gap-1">
+          <div className="flex items-center gap-1">
+            <span className="text-[10px] text-panel-text-4">Format</span>
+            <FormatInfoTooltip format={format} />
+          </div>
+          <select
+            value={format}
+            onChange={(e) => {
+              const v = e.target.value as "mp4" | "webm" | "mov";
+              setFormat(v);
+              persistRenderSettings(v, quality, fps);
+            }}
+            disabled={isRendering}
+            className={selectCls}
+          >
+            <option value="mp4">MP4</option>
+            <option value="mov">MOV (ProRes)</option>
+            <option value="webm">WebM</option>
+          </select>
+        </div>
+        <div className="flex flex-col gap-1">
+          <span className="text-[10px] text-panel-text-4">Resolution</span>
+          <select
+            value={resolution}
+            onChange={(e) => setResolution(e.target.value as ResolutionPreset | "auto")}
+            disabled={isRendering}
+            className={selectCls}
+          >
+            {SCALE_OPTION_ORDER.map((value) => (
+              <option
+                key={value}
+                value={value}
+                disabled={!scaleApplies(value, compositionDimensions)}
+              >
+                {scaleOptionLabel(value, compositionDimensions)}
+              </option>
+            ))}
+          </select>
+        </div>
+        <div className="flex flex-col gap-1">
+          <span className="text-[10px] text-panel-text-4">Frame rate</span>
+          <select
+            value={fps}
+            onChange={(e) => {
+              const v = Number(e.target.value) as 24 | 30 | 60;
+              setFps(v);
+              persistRenderSettings(format, quality, v);
+            }}
+            disabled={isRendering}
+            className={selectCls}
+          >
+            <option value={24}>24 fps</option>
+            <option value={30}>30 fps</option>
+            <option value={60}>60 fps</option>
+          </select>
+        </div>
+        {showQuality && (
+          <div className="flex flex-col gap-1">
+            <span className="text-[10px] text-panel-text-4">Quality</span>
+            <select
+              value={quality}
+              onChange={(e) => {
+                const v = e.target.value as "draft" | "standard" | "high";
+                setQuality(v);
+                persistRenderSettings(format, v, fps);
+              }}
+              disabled={isRendering}
+              className={selectCls}
+            >
+              {QUALITY_OPTIONS.map((q) => (
+                <option key={q.value} value={q.value}>
+                  {q.label}
+                </option>
+              ))}
+            </select>
+          </div>
+        )}
+      </div>
       <button
         onClick={() => {
           trackStudioEvent("render_start", { format, quality, resolution, fps });
           void onStartRender(format, quality, resolution, fps);
         }}
         disabled={isRendering}
-        className="flex items-center gap-1 px-2 py-0.5 text-[10px] font-semibold rounded-r bg-studio-accent text-[#09090B] hover:brightness-110 transition-colors disabled:opacity-50"
+        className="w-full flex items-center justify-center h-8 text-[11px] font-semibold rounded-md bg-panel-accent text-[#09090B] hover:brightness-110 transition-colors disabled:opacity-50"
       >
         {isRendering ? "Rendering..." : "Export"}
       </button>
@@ -313,23 +330,12 @@ export const RenderQueue = memo(function RenderQueue({
 
   return (
     <div className="flex flex-col h-full">
-      {/* Header — no title, already shown in header button */}
-      <div className="flex items-center justify-end flex-wrap gap-y-1.5 px-3 py-2 border-b border-neutral-800/50 flex-shrink-0">
-        <div className="flex items-center gap-1.5">
-          {completedCount > 0 && (
-            <button
-              onClick={onClearCompleted}
-              className="text-[10px] text-neutral-600 hover:text-neutral-400 transition-colors"
-            >
-              Clear
-            </button>
-          )}
-          <FormatExportButton
-            onStartRender={onStartRender}
-            isRendering={isRendering}
-            compositionDimensions={compositionDimensions}
-          />
-        </div>
+      <div className="px-3 py-3 border-b border-panel-border flex-shrink-0">
+        <FormatExportButton
+          onStartRender={onStartRender}
+          isRendering={isRendering}
+          compositionDimensions={compositionDimensions}
+        />
       </div>
 
       {/* Job list */}
@@ -343,7 +349,7 @@ export const RenderQueue = memo(function RenderQueue({
               fill="none"
               stroke="currentColor"
               strokeWidth="1.5"
-              className="text-neutral-700"
+              className="text-panel-text-5"
             >
               <rect
                 x="2"
@@ -361,17 +367,32 @@ export const RenderQueue = memo(function RenderQueue({
                 strokeLinejoin="round"
               />
             </svg>
-            <p className="text-[10px] text-neutral-600 text-center">No renders yet</p>
+            <p className="text-[10px] text-panel-text-5 text-center">No renders yet</p>
           </div>
         ) : (
-          jobs.map((job) => (
-            <RenderQueueItem
-              key={job.id}
-              job={job}
-              projectId={projectId}
-              onDelete={() => onDelete(job.id)}
-            />
-          ))
+          <div>
+            {completedCount > 0 && (
+              <div className="flex items-center justify-between px-3 py-1.5 border-b border-panel-border">
+                <span className="text-[10px] text-panel-text-4">
+                  {jobs.length} render{jobs.length === 1 ? "" : "s"}
+                </span>
+                <button
+                  onClick={onClearCompleted}
+                  className="text-[10px] text-panel-text-4 hover:text-panel-text-2 transition-colors"
+                >
+                  Clear
+                </button>
+              </div>
+            )}
+            {jobs.map((job) => (
+              <RenderQueueItem
+                key={job.id}
+                job={job}
+                projectId={projectId}
+                onDelete={() => onDelete(job.id)}
+              />
+            ))}
+          </div>
         )}
       </div>
     </div>
diff --git a/packages/studio/src/components/renders/RenderQueueItem.tsx b/packages/studio/src/components/renders/RenderQueueItem.tsx
index 09a78b8a1..1005328f2 100644
--- a/packages/studio/src/components/renders/RenderQueueItem.tsx
+++ b/packages/studio/src/components/renders/RenderQueueItem.tsx
@@ -57,15 +57,15 @@ export const RenderQueueItem = memo(function RenderQueueItem({
       onPointerLeave={() => setHovered(false)}
       onClick={isComplete ? handleOpen : undefined}
       className={[
-        "px-3 py-2.5 border-b border-neutral-800/30 last:border-0 transition-colors duration-150",
-        isComplete ? "cursor-pointer hover:bg-neutral-800/30" : "",
+        "px-3 py-2.5 border-b border-panel-border last:border-0 transition-colors duration-150",
+        isComplete ? "cursor-pointer hover:bg-panel-hover/30" : "",
       ]
         .filter(Boolean)
         .join(" ")}
     >
       <div className="flex items-center gap-2.5">
         {/* Thumbnail — static frame; swaps to live video on hover */}
-        <div className="w-20 h-[45px] rounded overflow-hidden bg-neutral-900 flex-shrink-0 relative">
+        <div className="w-20 h-[45px] rounded-md overflow-hidden bg-panel-input flex-shrink-0 relative">
           {isComplete && (
             <>
               {/* Live video — visible on hover */}
@@ -90,7 +90,7 @@ export const RenderQueueItem = memo(function RenderQueueItem({
           )}
           {job.status === "rendering" && (
             <div className="w-full h-full flex items-center justify-center">
-              <div className="w-2 h-2 rounded-full bg-studio-accent animate-pulse" />
+              <div className="w-2 h-2 rounded-full bg-panel-accent animate-pulse" />
             </div>
           )}
           {job.status === "failed" && (
@@ -108,11 +108,11 @@ export const RenderQueueItem = memo(function RenderQueueItem({
         {/* Info */}
         <div className="flex-1 min-w-0">
           <div className="flex items-center gap-1.5">
-            <span className="text-[11px] font-medium text-neutral-300 truncate">
+            <span className="text-[11px] font-medium text-panel-text-2 truncate">
               {job.filename}
             </span>
             {job.durationMs && (
-              <span className="text-[9px] text-neutral-600 flex-shrink-0">
+              <span className="text-[9px] text-panel-text-5 flex-shrink-0">
                 {formatDuration(job.durationMs)}
               </span>
             )}
@@ -121,12 +121,12 @@ export const RenderQueueItem = memo(function RenderQueueItem({
           {job.status === "rendering" && (
             <div className="mt-1">
               <div className="flex items-center justify-between mb-0.5">
-                <span className="text-[9px] text-neutral-500">{job.stage || "Rendering"}</span>
-                <span className="text-[9px] font-mono text-studio-accent">{job.progress}%</span>
+                <span className="text-[9px] text-panel-text-4">{job.stage || "Rendering"}</span>
+                <span className="text-[9px] font-mono text-panel-accent">{job.progress}%</span>
               </div>
-              <div className="w-full h-1 bg-neutral-800 rounded-full overflow-hidden">
+              <div className="w-full h-1 bg-panel-border rounded-full overflow-hidden">
                 <div
-                  className="h-full bg-studio-accent rounded-full transition-all duration-300"
+                  className="h-full bg-panel-accent rounded-full transition-all duration-300"
                   style={{ width: `${job.progress}%` }}
                 />
               </div>
@@ -138,7 +138,7 @@ export const RenderQueueItem = memo(function RenderQueueItem({
           )}
 
           {job.status !== "rendering" && (
-            <span className="text-[9px] text-neutral-600">{formatTimeAgo(job.createdAt)}</span>
+            <span className="text-[9px] text-panel-text-5">{formatTimeAgo(job.createdAt)}</span>
           )}
         </div>
 
@@ -148,7 +148,7 @@ export const RenderQueueItem = memo(function RenderQueueItem({
             {isComplete && (
               <button
                 onClick={handleDownload}
-                className="p-1 rounded text-neutral-500 hover:text-green-400 transition-colors"
+                className="p-1 rounded text-panel-text-4 hover:text-panel-accent transition-colors"
                 title="Download"
               >
                 <svg
@@ -172,7 +172,7 @@ export const RenderQueueItem = memo(function RenderQueueItem({
                 e.stopPropagation();
                 onDelete();
               }}
-              className="p-1 rounded text-neutral-500 hover:text-red-400 transition-colors"
+              className="p-1 rounded text-panel-text-4 hover:text-red-400 transition-colors"
               title="Remove"
             >
               <svg
diff --git a/packages/studio/src/contexts/DomEditContext.tsx b/packages/studio/src/contexts/DomEditContext.tsx
index feed5118f..985cbc57b 100644
--- a/packages/studio/src/contexts/DomEditContext.tsx
+++ b/packages/studio/src/contexts/DomEditContext.tsx
@@ -72,6 +72,8 @@ export function DomEditProvider({
     handleGsapRemoveAllKeyframes,
     handleResetSelectedElementKeyframes,
     commitAnimatedProperty,
+    handleSetArcPath,
+    handleUpdateArcSegment,
     invalidateGsapCache,
     previewIframeRef,
   },
@@ -141,6 +143,8 @@ export function DomEditProvider({
       handleGsapRemoveAllKeyframes,
       handleResetSelectedElementKeyframes,
       commitAnimatedProperty,
+      handleSetArcPath,
+      handleUpdateArcSegment,
       invalidateGsapCache,
       previewIframeRef,
     }),
@@ -204,6 +208,8 @@ export function DomEditProvider({
       handleGsapRemoveAllKeyframes,
       handleResetSelectedElementKeyframes,
       commitAnimatedProperty,
+      handleSetArcPath,
+      handleUpdateArcSegment,
       invalidateGsapCache,
       previewIframeRef,
     ],
diff --git a/packages/studio/src/hooks/gsapRuntimeKeyframes.ts b/packages/studio/src/hooks/gsapRuntimeKeyframes.ts
index 4aa976f59..1029fd6df 100644
--- a/packages/studio/src/hooks/gsapRuntimeKeyframes.ts
+++ b/packages/studio/src/hooks/gsapRuntimeKeyframes.ts
@@ -126,45 +126,96 @@ export function scanAllRuntimeKeyframes(iframe: HTMLIFrameElement | null): Map<
 
   for (const timeline of Object.values(timelines)) {
     if (!timeline?.getChildren) continue;
+    const tlDuration = typeof timeline.duration === "function" ? timeline.duration() : 0;
+
     for (const tween of timeline.getChildren(true)) {
       if (!tween.targets || !tween.vars) continue;
       const vars = tween.vars;
-      if (!vars.keyframes || typeof vars.keyframes !== "object") continue;
 
-      const kfObj = vars.keyframes as Record<string, unknown>;
-      const keyframes: Array<{ percentage: number; properties: Record<string, number | string> }> =
-        [];
-      let easeEach: string | undefined;
+      if (vars.keyframes && typeof vars.keyframes === "object") {
+        const kfObj = vars.keyframes as Record<string, unknown>;
+        const keyframes: Array<{
+          percentage: number;
+          properties: Record<string, number | string>;
+        }> = [];
+        let easeEach: string | undefined;
+
+        for (const [key, val] of Object.entries(kfObj)) {
+          if (key === "easeEach") {
+            if (typeof val === "string") easeEach = val;
+            continue;
+          }
+          const pctMatch = key.match(/^(\d+(?:\.\d+)?)%$/);
+          if (!pctMatch || !val || typeof val !== "object") continue;
+          const percentage = parseFloat(pctMatch[1]);
+          const properties: Record<string, number | string> = {};
+          for (const [pk, pv] of Object.entries(val as Record<string, unknown>)) {
+            if (pk === "ease") continue;
+            if (typeof pv === "number") properties[pk] = Math.round(pv * 1000) / 1000;
+            else if (typeof pv === "string") properties[pk] = pv;
+          }
+          if (Object.keys(properties).length > 0) {
+            keyframes.push({ percentage, properties });
+          }
+        }
 
-      for (const [key, val] of Object.entries(kfObj)) {
-        if (key === "easeEach") {
-          if (typeof val === "string") easeEach = val;
+        if (keyframes.length > 0) {
+          keyframes.sort((a, b) => a.percentage - b.percentage);
+          for (const target of tween.targets()) {
+            const id = (target as HTMLElement).id;
+            if (id && !result.has(id)) {
+              result.set(id, { keyframes, easeEach });
+            }
+          }
           continue;
         }
-        const pctMatch = key.match(/^(\d+(?:\.\d+)?)%$/);
-        if (!pctMatch || !val || typeof val !== "object") continue;
-        const percentage = parseFloat(pctMatch[1]);
-        const properties: Record<string, number | string> = {};
-        for (const [pk, pv] of Object.entries(val as Record<string, unknown>)) {
-          if (pk === "ease") continue;
-          if (typeof pv === "number") properties[pk] = Math.round(pv * 1000) / 1000;
-          else if (typeof pv === "string") properties[pk] = pv;
-        }
-        if (Object.keys(properties).length > 0) {
-          keyframes.push({ percentage, properties });
-        }
       }
 
-      if (keyframes.length === 0) continue;
-      keyframes.sort((a, b) => a.percentage - b.percentage);
+      // Flat tweens: synthesize start + end keyframe entries
+      if (!tlDuration || tlDuration <= 0) continue;
+      const tweenStart = typeof tween.startTime === "function" ? tween.startTime() : undefined;
+      if (typeof tweenStart !== "number" || !Number.isFinite(tweenStart)) continue;
+      const tweenDur = typeof tween.duration === "function" ? tween.duration() : 0;
+
+      const startPct = Math.round((tweenStart / tlDuration) * 1000) / 10;
+      const endPct =
+        tweenDur > 0 ? Math.round(((tweenStart + tweenDur) / tlDuration) * 1000) / 10 : startPct;
+      const properties: Record<string, number | string> = {};
+      const skip = new Set([
+        "ease",
+        "duration",
+        "delay",
+        "stagger",
+        "motionPath",
+        "overwrite",
+        "immediateRender",
+        "onComplete",
+        "onUpdate",
+        "onStart",
+      ]);
+      for (const [k, v] of Object.entries(vars)) {
+        if (skip.has(k)) continue;
+        if (typeof v === "number") properties[k] = Math.round(v * 1000) / 1000;
+        else if (typeof v === "string") properties[k] = v;
+      }
+      if (Object.keys(properties).length === 0) continue;
 
       for (const target of tween.targets()) {
         const id = (target as HTMLElement).id;
-        if (id && !result.has(id)) {
-          result.set(id, { keyframes, easeEach });
+        if (!id) continue;
+        const existing = result.get(id);
+        const entries = existing ?? { keyframes: [] };
+        entries.keyframes.push({ percentage: startPct, properties });
+        if (endPct !== startPct) {
+          entries.keyframes.push({ percentage: endPct, properties });
         }
+        if (!existing) result.set(id, entries);
       }
     }
   }
+
+  for (const entry of result.values()) {
+    entry.keyframes.sort((a, b) => a.percentage - b.percentage);
+  }
   return result;
 }
diff --git a/packages/studio/src/hooks/useDomEditSession.ts b/packages/studio/src/hooks/useDomEditSession.ts
index cf788ec4f..02013491e 100644
--- a/packages/studio/src/hooks/useDomEditSession.ts
+++ b/packages/studio/src/hooks/useDomEditSession.ts
@@ -244,6 +244,7 @@ export function useDomEditSession({
     STUDIO_GSAP_PANEL_ENABLED ? (projectId ?? null) : null,
     gsapSourceFile,
     gsapCacheVersion,
+    previewIframeRef,
   );
 
   const {
@@ -274,6 +275,8 @@ export function useDomEditSession({
     removeKeyframe,
     convertToKeyframes,
     removeAllKeyframes,
+    setArcPath,
+    updateArcSegment,
   } = useGsapScriptCommits({
     projectIdRef,
     activeCompPath,
@@ -464,6 +467,22 @@ export function useDomEditSession({
     bumpGsapCache,
   });
 
+  const handleSetArcPath = useCallback(
+    (animId: string, config: Parameters<typeof setArcPath>[2]) => {
+      if (!domEditSelection) return;
+      setArcPath(domEditSelection, animId, config);
+    },
+    [domEditSelection, setArcPath],
+  );
+
+  const handleUpdateArcSegment = useCallback(
+    (animId: string, segmentIndex: number, update: Parameters<typeof updateArcSegment>[3]) => {
+      if (!domEditSelection) return;
+      updateArcSegment(domEditSelection, animId, segmentIndex, update);
+    },
+    [domEditSelection, updateArcSegment],
+  );
+
   // Sync selection from preview document on load / refresh
   // eslint-disable-next-line no-restricted-syntax
   useEffect(() => {
@@ -609,6 +628,8 @@ export function useDomEditSession({
     handleGsapRemoveAllKeyframes,
     handleResetSelectedElementKeyframes,
     commitAnimatedProperty,
+    handleSetArcPath,
+    handleUpdateArcSegment,
     invalidateGsapCache: bumpGsapCache,
     previewIframeRef,
   };
diff --git a/packages/studio/src/hooks/useGsapScriptCommits.ts b/packages/studio/src/hooks/useGsapScriptCommits.ts
index fbc8acd86..1e478104b 100644
--- a/packages/studio/src/hooks/useGsapScriptCommits.ts
+++ b/packages/studio/src/hooks/useGsapScriptCommits.ts
@@ -502,6 +502,60 @@ export function useGsapScriptCommits({
     [commitMutation],
   );
 
+  const setArcPath = useCallback(
+    (
+      selection: DomEditSelection,
+      animationId: string,
+      config: {
+        enabled: boolean;
+        autoRotate?: boolean | number;
+        segments?: Array<{
+          curviness: number;
+          cp1?: { x: number; y: number };
+          cp2?: { x: number; y: number };
+        }>;
+      },
+    ) => {
+      void commitMutation(
+        selection,
+        { type: "set-arc-path" as const, animationId, ...config },
+        { label: config.enabled ? "Enable arc path" : "Disable arc path", softReload: true },
+      );
+    },
+    [commitMutation],
+  );
+
+  const updateArcSegment = useCallback(
+    (
+      selection: DomEditSelection,
+      animationId: string,
+      segmentIndex: number,
+      update: {
+        curviness?: number;
+        cp1?: { x: number; y: number };
+        cp2?: { x: number; y: number };
+      },
+    ) => {
+      void commitMutation(
+        selection,
+        { type: "update-arc-segment" as const, animationId, segmentIndex, ...update },
+        { label: "Update arc segment", softReload: true },
+      );
+    },
+    [commitMutation],
+  );
+
+  const removeArcPath = useCallback(
+    (selection: DomEditSelection, animationId: string) => {
+      void commitMutation(
+        selection,
+        { type: "remove-arc-path" as const, animationId },
+        { label: "Remove arc path", softReload: true },
+      );
+    },
+    [commitMutation],
+  );
+
   return {
     commitMutation,
     updateGsapProperty,
@@ -517,5 +571,8 @@ export function useGsapScriptCommits({
     removeKeyframe,
     convertToKeyframes,
     removeAllKeyframes,
+    setArcPath,
+    updateArcSegment,
+    removeArcPath,
   };
 }
diff --git a/packages/studio/src/hooks/useGsapTweenCache.ts b/packages/studio/src/hooks/useGsapTweenCache.ts
index f47b806cf..ce427bf11 100644
--- a/packages/studio/src/hooks/useGsapTweenCache.ts
+++ b/packages/studio/src/hooks/useGsapTweenCache.ts
@@ -213,32 +213,28 @@ export function usePopulateKeyframeCacheForFile(
   const lastFetchKeyRef = useRef("");
 
   const runtimeScanDoneRef = useRef("");
+  const astFetchDoneRef = useRef("");
 
   useEffect(() => {
     const fetchKey = `kf-cache:${projectId}:${sourceFile}:${version}`;
     if (fetchKey === lastFetchKeyRef.current) return;
     lastFetchKeyRef.current = fetchKey;
     runtimeScanDoneRef.current = "";
+    astFetchDoneRef.current = "";
     if (!projectId) return;
 
     const sf = sourceFile;
     fetchParsedAnimations(projectId, sf).then((parsed) => {
       if (!parsed) return;
-      const { setKeyframeCache, keyframeCache } = usePlayerStore.getState();
-      const sfPrefix = `${sf}#`;
-      const fallbackPrefix = "index.html#";
-      for (const key of keyframeCache.keys()) {
-        if (key.startsWith(sfPrefix) || (sf !== "index.html" && key.startsWith(fallbackPrefix))) {
-          setKeyframeCache(key, undefined);
-        }
-      }
+      const { setKeyframeCache } = usePlayerStore.getState();
       for (const anim of parsed.animations) {
         const id = extractIdFromSelector(anim.targetSelector);
         if (!id || !anim.keyframes) continue;
         setKeyframeCache(`${sf}#${id}`, anim.keyframes);
+        setKeyframeCache(id, anim.keyframes);
         if (sf !== "index.html") setKeyframeCache(`index.html#${id}`, anim.keyframes);
       }
-      runtimeScanDoneRef.current = fetchKey;
+      astFetchDoneRef.current = fetchKey;
     });
   }, [projectId, sourceFile, version]);
 
@@ -253,7 +249,8 @@ export function usePopulateKeyframeCacheForFile(
 
     const tryRuntimeScan = () => {
       if (runtimeScanDoneRef.current === `kf-cache:${projectId}:${sf}:${version}`) return true;
-      const iframe = iframeRef?.current;
+      const iframe =
+        iframeRef?.current ?? document.querySelector<HTMLIFrameElement>("iframe[src*='/preview/']");
       if (!iframe) return false;
       const scanned = scanAllRuntimeKeyframes(iframe);
       if (scanned.size === 0) return false;
@@ -261,7 +258,8 @@ export function usePopulateKeyframeCacheForFile(
       for (const [id, data] of scanned) {
         const cacheKey = `${sf}#${id}`;
         const fallbackKey = `index.html#${id}`;
-        if (keyframeCache.has(cacheKey) || keyframeCache.has(fallbackKey)) continue;
+        if (keyframeCache.has(cacheKey) || keyframeCache.has(fallbackKey) || keyframeCache.has(id))
+          continue;
         const entry = {
           format: "percentage" as const,
           keyframes: data.keyframes,
@@ -269,6 +267,7 @@ export function usePopulateKeyframeCacheForFile(
         };
         setKeyframeCache(cacheKey, entry);
         if (sf !== "index.html") setKeyframeCache(fallbackKey, entry);
+        setKeyframeCache(id, entry);
       }
       runtimeScanDoneRef.current = `kf-cache:${projectId}:${sf}:${version}`;
       return true;
diff --git a/packages/studio/src/utils/gsapSoftReload.ts b/packages/studio/src/utils/gsapSoftReload.ts
index b27d404e1..d35488e26 100644
--- a/packages/studio/src/utils/gsapSoftReload.ts
+++ b/packages/studio/src/utils/gsapSoftReload.ts
@@ -4,7 +4,11 @@ type IframeWindow = Window & {
   __hfForceTimelineRebind?: () => void;
   __hfSuppressSceneMutations?: <T>(fn: () => T) => T;
   __hfStudioManualEditsApply?: () => void;
-  gsap?: { timeline?: (...args: unknown[]) => unknown };
+  gsap?: {
+    timeline?: (...args: unknown[]) => unknown;
+    registerPlugin?: (...plugins: unknown[]) => unknown;
+  };
+  MotionPathPlugin?: unknown;
 };
 
 function isGsapScript(text: string): boolean {
@@ -64,16 +68,30 @@ export function applySoftReload(iframe: HTMLIFrameElement | null, scriptText: st
     }
 
     oldScriptEl.remove();
-    const newScript = doc.createElement("script");
-    // IIFE prevents const/let redeclaration errors across consecutive edits.
-    // Top-level declarations are scoped to the IIFE; window.* assignments
-    // (e.g. window.__timelines["root"] = tl) still reach the global scope.
-    newScript.textContent = `(function(){${scriptText}\n})();`;
-    doc.body.appendChild(newScript);
 
-    win.__hfForceTimelineRebind?.();
-    win.__player?.seek?.(currentTime);
-    win.__hfStudioManualEditsApply?.();
+    const executeScript = () => {
+      if (win.MotionPathPlugin && win.gsap?.registerPlugin) {
+        win.gsap.registerPlugin(win.MotionPathPlugin);
+      }
+      const s = doc.createElement("script");
+      s.textContent = `(function(){${scriptText}\n})();`;
+      doc.body.appendChild(s);
+      win.__hfForceTimelineRebind?.();
+      win.__player?.seek?.(currentTime);
+      win.__hfStudioManualEditsApply?.();
+    };
+
+    // Load MotionPathPlugin on demand if the script uses motionPath
+    const needsMotionPath = /motionPath\s*[:{]/.test(scriptText);
+    if (needsMotionPath && !win.MotionPathPlugin && win.gsap) {
+      const pluginScript = doc.createElement("script");
+      pluginScript.src = "https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/MotionPathPlugin.min.js";
+      pluginScript.onload = () => executeScript();
+      doc.head.appendChild(pluginScript);
+      return;
+    }
+
+    executeScript();
   };
 
   try {
diff --git a/packages/studio/tailwind.config.js b/packages/studio/tailwind.config.js
index ecdc87de4..3c9488b5e 100644
--- a/packages/studio/tailwind.config.js
+++ b/packages/studio/tailwind.config.js
@@ -17,6 +17,21 @@ export default {
           muted: "#737373",
           accent: "#3CE6AC",
         },
+        panel: {
+          bg: "#0C0C0E",
+          input: "#161618",
+          surface: "#18181B",
+          hover: "#27272A",
+          border: "#1E1E1E",
+          "border-input": "#27272A",
+          "text-1": "#E4E4E7",
+          "text-2": "#A1A1AA",
+          "text-3": "#71717A",
+          "text-4": "#52525B",
+          "text-5": "#3F3F46",
+          accent: "#3CE6AC",
+          danger: "#EF4444",
+        },
       },
     },
   },
