From a7579ac95a550f334d73eb71ba67fb72f3bc8fd8 Mon Sep 17 00:00:00 2001
From: EmaDev <pavanello.emanuele@gmail.com>
Date: Sun, 15 Feb 2026 20:13:14 +0100
Subject: [PATCH 1/5] go to props

---
 .../components/editor/keyframe-card.svelte    |  82 +++++-
 .../editor/panels/input-propery.svelte        |  12 +-
 .../editor/panels/input-wrapper.svelte        |   6 +-
 .../editor/panels/inputs-wrapper.svelte       |   6 +-
 .../editor/panels/properties-panel.svelte     |  69 +++--
 .../editor/timeline/timeline-keyframe.svelte  |  11 +-
 src/lib/utils/property-names.ts               | 244 ++++++++++++++++++
 7 files changed, 365 insertions(+), 65 deletions(-)
 create mode 100644 src/lib/utils/property-names.ts

diff --git a/src/lib/components/editor/keyframe-card.svelte b/src/lib/components/editor/keyframe-card.svelte
index fe2c85f..7fe2604 100644
--- a/src/lib/components/editor/keyframe-card.svelte
+++ b/src/lib/components/editor/keyframe-card.svelte
@@ -3,9 +3,16 @@
   import { getEditorState } from '$lib/contexts/editor.svelte';
   import { Button } from '$lib/components/ui/button';
   import * as Popover from '$lib/components/ui/popover';
-  import { Trash2, Palette, Move, RotateCw, Scale, Eye, Clock } from '@lucide/svelte';
+  import { Trash2, Palette, Move, RotateCw, Scale, Eye, Clock, ScanSearch } from '@lucide/svelte';
   import ScrubInput from './panels/scrub-input.svelte';
-
+  import {
+    getPropertyCategory,
+    getTransformInputId,
+    getStyleInputId,
+    isTransformProperty,
+    isStyleProperty,
+    type AnimatableProperty
+  } from '$lib/utils/property-names';
   const editorState = $derived(getEditorState());
   const projectStore = $derived(editorState.project);
 
@@ -13,9 +20,10 @@
     keyframe: Keyframe;
     layerId: string;
     readonlyTime?: boolean;
+    onGoToPropertyClick?: () => void;
   }
 
-  let { keyframe, layerId, readonlyTime = false }: Props = $props();
+  let { keyframe, layerId, readonlyTime = false, onGoToPropertyClick }: Props = $props();
 
   // Type-safe strategy labels - ensures all strategies have corresponding labels
   type ContinuousStrategy = Extract<Interpolation, { family: 'continuous' }>['strategy'];
@@ -79,7 +87,6 @@
       'rotation.z': 'Rotation Z',
       'scale.x': 'Scale X',
       'scale.y': 'Scale Y',
-      'scale.z': 'Scale Z',
       opacity: 'Opacity',
       color: 'Color'
     };
@@ -93,11 +100,11 @@
     return property;
   }
 
-  function getPropertyIcon(property: string) {
-    if (property.startsWith('position.')) return Move;
+  function getPropertyIcon(property: AnimatableProperty) {
+    if (isTransformProperty(property)) return Move;
     if (property.startsWith('rotation.')) return RotateCw;
     if (property.startsWith('scale.')) return Scale;
-    if (property === 'opacity') return Eye;
+    if (isStyleProperty(property)) return Eye;
     if (property === 'color') return Palette;
     return Move;
   }
@@ -170,6 +177,48 @@
   }
 
   const Icon = $derived(getPropertyIcon(keyframe.property));
+
+  /**
+   * Maps keyframe property to the input ID in properties panel
+   * Uses unified naming convention from property-names utility
+   */
+  function getInputIdFromProperty(property: AnimatableProperty): string {
+    const category = getPropertyCategory(property);
+
+    if (category === 'transform') {
+      return getTransformInputId(property);
+    }
+    if (category === 'style') {
+      return getStyleInputId(property);
+    }
+    // For props.* properties, use the property name directly
+    if (property.startsWith('props.')) {
+      return property;
+    }
+
+    // Fallback: use the property name as-is
+    return property;
+  }
+
+  /**
+   * Scroll to and focus the corresponding input in the properties panel
+   * Uses ID attribute to find the input
+   */
+  function handleGoToProperty() {
+    onGoToPropertyClick?.();
+    const property = keyframe.property;
+    const inputId = getInputIdFromProperty(property);
+
+    // Find input by ID
+    const input = document.getElementById(inputId) as HTMLElement | null;
+    if (input) {
+      input.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      setTimeout(() => {
+        (input as HTMLInputElement)?.focus?.();
+        (input as HTMLInputElement)?.select?.();
+      }, 500);
+    }
+  }
 </script>
 
 <div class="group rounded-lg border bg-muted/20 p-3 transition-colors hover:bg-muted/40">
@@ -183,17 +232,26 @@
       <span class="text-sm font-semibold">{getPropertyLabel(keyframe.property)}</span>
     </button>
 
+    <!-- Jump to property button -->
+    <Button
+      variant="ghost"
+      size="icon-sm"
+      class="opacity-0 transition-opacity group-hover:opacity-100"
+      onclick={handleGoToProperty}
+      title="Jump to property"
+      icon={ScanSearch}
+    />
+
     <Popover.Root>
       <Popover.Trigger>
         {#snippet child({ props })}
           <Button
             variant="ghost"
-            size="icon"
-            class="h-7 w-7 opacity-0 transition-opacity group-hover:opacity-100"
+            size="icon-sm"
+            class="opacity-0 transition-opacity group-hover:opacity-100"
+            icon={Trash2}
             {...props}
-          >
-            <Trash2 class="h-3.5 w-3.5" />
-          </Button>
+          />
         {/snippet}
       </Popover.Trigger>
       <Popover.Content class="w-64" align="end" side="left">
diff --git a/src/lib/components/editor/panels/input-propery.svelte b/src/lib/components/editor/panels/input-propery.svelte
index 1a2134b..52ba6d2 100644
--- a/src/lib/components/editor/panels/input-propery.svelte
+++ b/src/lib/components/editor/panels/input-propery.svelte
@@ -66,7 +66,7 @@
   />
 {:else if metadata.meta?.widget === 'textarea'}
   <Textarea
-    id={metadata.name}
+    id={`props.${metadata.name}`}
     value={typeof value === 'string' ? value : ''}
     oninput={(e) => onUpdateProp(metadata.name, e.currentTarget.value)}
     spellcheck="false"
@@ -78,7 +78,7 @@
   />
 {:else if metadata.meta?.widget === 'color'}
   <Input
-    id={metadata.name}
+    id={`props.${metadata.name}`}
     type="color"
     value={typeof value === 'string' ? value : '#000000'}
     oninput={(e) => onUpdateProp(metadata.name, e.currentTarget.value)}
@@ -89,7 +89,7 @@
   <Component {value} onChange={(newValue) => onUpdateProp(metadata.name, newValue)} {layer} />
 {:else if metadata.type === 'number'}
   <ScrubInput
-    id={metadata.name}
+    id={`props.${metadata.name}`}
     value={typeof value === 'number' ? value : 0}
     min={metadata.min}
     max={metadata.max}
@@ -99,7 +99,7 @@
 {:else if metadata.type === 'boolean'}
   <label class="flex items-center gap-2">
     <input
-      id={metadata.name}
+      id={`props.${metadata.name}`}
       type="checkbox"
       checked={typeof value === 'boolean' ? value : false}
       onchange={(e) => onUpdateProp(metadata.name, e.currentTarget.checked)}
@@ -109,7 +109,7 @@
   </label>
 {:else if metadata.type === 'select' && metadata.options}
   <select
-    id={metadata.name}
+    id={`props.${metadata.name}`}
     value={typeof value === 'string' || typeof value === 'number' ? value : ''}
     onchange={(e) => onUpdateProp(metadata.name, e.currentTarget.value)}
     class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none"
@@ -121,7 +121,7 @@
 {:else}
   <!-- Default to text input for strings and unknown types -->
   <Input
-    id={metadata.name}
+    id={`props.${metadata.name}`}
     type="text"
     value={typeof value === 'string' ? value : ''}
     oninput={(e) => onUpdateProp(metadata.name, e.currentTarget.value)}
diff --git a/src/lib/components/editor/panels/input-wrapper.svelte b/src/lib/components/editor/panels/input-wrapper.svelte
index e481fff..9b97d8b 100644
--- a/src/lib/components/editor/panels/input-wrapper.svelte
+++ b/src/lib/components/editor/panels/input-wrapper.svelte
@@ -9,13 +9,13 @@
   const projectStore = $derived(editorState.project);
 
   const {
-    id,
+    for: htmlFor,
     label,
     children,
     property,
     addKeyframe
   }: {
-    id: string;
+    for: string;
     label: string;
     children: Snippet;
   } & (
@@ -44,7 +44,7 @@
     {#if property}
       <InputPin {property} active={!!hasKeyframes} {label} {addKeyframe} {removeKeyframes} />
     {/if}
-    <Label for={id} class="text-[10px] text-muted-foreground">{label}</Label>
+    <Label for={htmlFor} class="text-[10px] text-muted-foreground">{label}</Label>
   </div>
 
   {@render children()}
diff --git a/src/lib/components/editor/panels/inputs-wrapper.svelte b/src/lib/components/editor/panels/inputs-wrapper.svelte
index dbd665f..37284e6 100644
--- a/src/lib/components/editor/panels/inputs-wrapper.svelte
+++ b/src/lib/components/editor/panels/inputs-wrapper.svelte
@@ -16,7 +16,7 @@
     prefix
   }: {
     fields: ({
-      id: string;
+      for: string;
       labels: string;
     } & (
       | {
@@ -51,7 +51,7 @@
   {/if}
 
   <div class="flex gap-1">
-    {#each fields as field (field.id)}
+    {#each fields as field (field.for)}
       <div class="flex flex-1 items-center gap-0.5">
         {#if field.property}
           <InputPin
@@ -62,7 +62,7 @@
             {removeKeyframes}
           />
         {/if}
-        <Label for={field.id} class="text-[10px] text-muted-foreground">{field.labels}</Label>
+        <Label for={field.for} class="text-[10px] text-muted-foreground">{field.labels}</Label>
       </div>
     {/each}
   </div>
diff --git a/src/lib/components/editor/panels/properties-panel.svelte b/src/lib/components/editor/panels/properties-panel.svelte
index 7fe38c3..ee6917e 100644
--- a/src/lib/components/editor/panels/properties-panel.svelte
+++ b/src/lib/components/editor/panels/properties-panel.svelte
@@ -34,6 +34,7 @@
     getAnimatedStyle,
     getAnimatedProps
   } from '$lib/engine/interpolation';
+  import { ANIMATABLE_PROPERTIES } from '$lib/utils/property-names';
   import { getLayerDefinition, getLayerSchema } from '$lib/layers/registry';
   import { extractPropertyMetadata } from '$lib/layers/base';
   import { animationPresets } from '$lib/engine/presets';
@@ -169,23 +170,12 @@
     projectStore.updateLayer(selectedLayer.id, { [property]: value });
   }
 
-  // Map property names to AnimatableProperty format
-  const transformPropertyMap: Record<string, AnimatableProperty> = {
-    x: 'position.x',
-    y: 'position.y',
-    z: 'position.z',
-    rotationX: 'rotation.x',
-    rotationY: 'rotation.y',
-    rotationZ: 'rotation.z',
-    scaleX: 'scale.x',
-    scaleY: 'scale.y'
-  };
-
   function mapToAnimatable(
     target: 'transform' | 'props' | 'style',
     propertyName: string
   ): AnimatableProperty {
-    if (target === 'transform') return transformPropertyMap[propertyName];
+    if (target === 'transform')
+      return ANIMATABLE_PROPERTIES[propertyName as keyof typeof ANIMATABLE_PROPERTIES];
     if (target === 'props') return `props.${propertyName}` as AnimatableProperty;
     return propertyName as AnimatableProperty; // style: 'opacity'
   }
@@ -381,6 +371,7 @@
 <div
   class:pointer-events-none={projectStore.isRecording}
   class:opacity-50={projectStore.isRecording}
+  data-panel="properties"
 >
   {#if selectedLayer}
     <div class="space-y-4 p-4">
@@ -509,11 +500,11 @@
         <!-- TODO: manage like groups -->
         <InputsWrapper
           fields={[
-            { prop: 'position.x' as AnimatableProperty, label: 'X' },
-            { prop: 'position.y' as AnimatableProperty, label: 'Y' },
-            { prop: 'position.z' as AnimatableProperty, label: 'Z' }
+            { prop: 'position.x' as AnimatableProperty, label: 'X', id: 'transform.position.x' },
+            { prop: 'position.y' as AnimatableProperty, label: 'Y', id: 'transform.position.y' },
+            { prop: 'position.z' as AnimatableProperty, label: 'Z', id: 'transform.position.z' }
           ].map((f) => ({
-            id: f.prop,
+            for: f.id,
             labels: f.label,
             property: f.prop,
             addKeyframe: addKeyframe,
@@ -535,18 +526,18 @@
           {/snippet}
 
           <ScrubInput
-            id="pos-x"
+            id="transform.position.x"
             value={currentValues?.transform.x ?? 0}
             onchange={(v) => updateProperty('x', v, 'transform')}
           />
 
           <ScrubInput
-            id="pos-y"
+            id="transform.position.y"
             value={currentValues?.transform.y ?? 0}
             onchange={(v) => updateProperty('y', v, 'transform')}
           />
           <ScrubInput
-            id="pos-z"
+            id="transform.position.z"
             value={currentValues?.transform.z ?? 0}
             onchange={(v) => updateProperty('z', v, 'transform')}
           />
@@ -555,11 +546,11 @@
         <!-- Rotation -->
         <InputsWrapper
           fields={[
-            { prop: 'rotation.x' as AnimatableProperty, label: 'X' },
-            { prop: 'rotation.y' as AnimatableProperty, label: 'Y' },
-            { prop: 'rotation.z' as AnimatableProperty, label: 'Z' }
+            { prop: 'rotation.x' as AnimatableProperty, label: 'X', id: 'transform.rotation.x' },
+            { prop: 'rotation.y' as AnimatableProperty, label: 'Y', id: 'transform.rotation.y' },
+            { prop: 'rotation.z' as AnimatableProperty, label: 'Z', id: 'transform.rotation.z' }
           ].map((f) => ({
-            id: f.prop,
+            for: f.id,
             labels: f.label,
             property: f.prop,
             addKeyframe: addKeyframe,
@@ -581,19 +572,19 @@
             />
           {/snippet}
           <ScrubInput
-            id="rot-x"
+            id="transform.rotation.x"
             value={currentValues?.transform.rotationX ?? 0}
             step={0.1}
             onchange={(v) => updateProperty('rotationX', v, 'transform')}
           />
           <ScrubInput
-            id="rot-y"
+            id="transform.rotation.y"
             value={currentValues?.transform.rotationY ?? 0}
             step={0.1}
             onchange={(v) => updateProperty('rotationY', v, 'transform')}
           />
           <ScrubInput
-            id="rot-z"
+            id="transform.rotation.z"
             value={currentValues?.transform.rotationZ ?? 0}
             step={0.1}
             onchange={(v) => updateProperty('rotationZ', v, 'transform')}
@@ -606,10 +597,10 @@
         {@const currentScaleY = currentValues?.transform.scaleY ?? 1}
         <InputsWrapper
           fields={[
-            { prop: 'scale.x' as AnimatableProperty, label: 'X' },
-            { prop: 'scale.y' as AnimatableProperty, label: 'Y' }
+            { prop: 'scale.x' as AnimatableProperty, label: 'X', id: 'transform.scale.x' },
+            { prop: 'scale.y' as AnimatableProperty, label: 'Y', id: 'transform.scale.y' }
           ].map((f) => ({
-            id: f.prop,
+            for: f.id,
             labels: f.label,
             property: f.prop,
             addKeyframe: addKeyframe,
@@ -652,13 +643,13 @@
             </Button>
           {/snippet}
           <ScrubInput
-            id="scale-x"
+            id="transform.scale.x"
             value={currentScaleX}
             step={0.1}
             onchange={(v) => updateProperty('scaleX', v || 1, 'transform')}
           />
           <ScrubInput
-            id="scale-y"
+            id="transform.scale.y"
             value={currentScaleY}
             step={0.1}
             onchange={(v) => updateProperty('scaleY', v || 1, 'transform')}
@@ -666,7 +657,7 @@
         </InputsWrapper>
 
         <!-- Anchor Point -->
-        <InputWrapper id="anchor-point" label="Anchor Point">
+        <InputWrapper for="anchor-point" label="Anchor Point">
           <DropdownMenu.Root>
             <DropdownMenu.Trigger>
               {#snippet child({ props })}
@@ -697,9 +688,9 @@
 
       <!-- Style -->
       <PropertiesGroup label="Style">
-        <InputWrapper id="opacity" label="Opacity" property="opacity" {addKeyframe}>
+        <InputWrapper for="style.opacity" label="Opacity" property="opacity" {addKeyframe}>
           <ScrubInput
-            id="opacity"
+            id="style.opacity"
             value={currentValues?.style.opacity ?? 1}
             step={0.1}
             min={0}
@@ -717,7 +708,7 @@
             {#if item.kind === 'group'}
               <InputsWrapper
                 fields={item.fields.map((field) => ({
-                  id: `props.${field.name}`,
+                  for: `props.${field.name}`,
                   labels: field.description || field.name,
                   property: `props.${field.name}` as AnimatableProperty,
                   addKeyframe,
@@ -753,7 +744,7 @@
               </InputsWrapper>
             {:else}
               <InputWrapper
-                id={item.field.name}
+                for={`props.${item.field.name}`}
                 label={item.field.description || item.field.name}
                 property={`props.${item.field.name}`}
                 {addKeyframe}
@@ -784,11 +775,11 @@
         <InputsWrapper
           fields={[
             {
-              id: 'animation-presets',
+              for: 'animation-presets',
               labels: 'Animation'
             },
             {
-              id: 'preset-duration',
+              for: 'preset-duration',
               labels: 'Duration (s)'
             }
           ]}
diff --git a/src/lib/components/editor/timeline/timeline-keyframe.svelte b/src/lib/components/editor/timeline/timeline-keyframe.svelte
index cc6d49f..0efc36d 100644
--- a/src/lib/components/editor/timeline/timeline-keyframe.svelte
+++ b/src/lib/components/editor/timeline/timeline-keyframe.svelte
@@ -77,9 +77,11 @@
       projectStore.removeKeyframe(layerId, keyframe.id);
     }
   }
+
+  let popoverOpen = $state(false);
 </script>
 
-<Popover.Root>
+<Popover.Root bind:open={popoverOpen}>
   <Popover.Trigger>
     {#snippet child({ props })}
       <div
@@ -118,7 +120,12 @@
       <!-- Keyframe Cards -->
       <div class="space-y-2">
         {#each keyframes as keyframe (keyframe.id)}
-          <KeyframeCard {keyframe} {layerId} readonlyTime />
+          <KeyframeCard
+            {keyframe}
+            {layerId}
+            readonlyTime
+            onGoToPropertyClick={() => (popoverOpen = false)}
+          />
         {/each}
       </div>
 
diff --git a/src/lib/utils/property-names.ts b/src/lib/utils/property-names.ts
new file mode 100644
index 0000000..924ef01
--- /dev/null
+++ b/src/lib/utils/property-names.ts
@@ -0,0 +1,244 @@
+/**
+ * Unified property naming conventions for the animation editor.
+ *
+ * This module provides a single source of truth for mapping between:
+ * - Transform object keys (x, y, z, rotationX, rotationY, rotationZ, scaleX, scaleY)
+ * - AnimatableProperty strings (position.x, position.y, position.z, rotation.x, etc.)
+ * - Input IDs (transform.position.x, style.opacity, props.xxx)
+ *
+ * The naming convention:
+ * - Transform: camelCase (x, y, z, rotationX, rotationY, rotationZ, scaleX, scaleY)
+ * - AnimatableProperty: dot-notation with category prefix (position.x, rotation.x, scale.x, opacity)
+ * - Input IDs: dot-notation with group prefix (transform.position.x, style.opacity, props.xxx)
+ * - Props: prefix with 'props.' (props.fontSize, props.fill, etc.)
+ */
+
+import type { AnimatableProperty } from '$lib/schemas/animation';
+
+// Re-export the type
+export type { AnimatableProperty };
+
+// ============================================
+// Transform categories (used to derive both keys)
+// ============================================
+
+const TRANSFORM_CATEGORIES = {
+  POSITION: 'position',
+  ROTATION: 'rotation',
+  SCALE: 'scale'
+} as const;
+
+// ============================================
+// Transform object keys (used in Transform type)
+// Derived from category + axis
+// ============================================
+
+export const TRANSFORM_KEYS = {
+  X: 'x',
+  Y: 'y',
+  Z: 'z',
+  ROTATION_X: 'rotationX',
+  ROTATION_Y: 'rotationY',
+  ROTATION_Z: 'rotationZ',
+  SCALE_X: 'scaleX',
+  SCALE_Y: 'scaleY'
+} as const;
+
+// ============================================
+// AnimatableProperty constants (canonical form)
+// Derived from category + axis
+// ============================================
+
+// Helper to build animatable property from category and axis
+function buildAnimatableProperty(
+  category: string,
+  axis: string
+): `position.${string}` | `rotation.${string}` | `scale.${string}` {
+  return `${category}.${axis}` as `position.${string}` | `rotation.${string}` | `scale.${string}`;
+}
+
+// Generate all animatable properties from transform keys
+function generateAnimatableProperties(): Record<string, AnimatableProperty> {
+  const props: Record<string, AnimatableProperty> = {};
+
+  // Position
+  props[TRANSFORM_KEYS.X] = buildAnimatableProperty(TRANSFORM_CATEGORIES.POSITION, 'x');
+  props[TRANSFORM_KEYS.Y] = buildAnimatableProperty(TRANSFORM_CATEGORIES.POSITION, 'y');
+  props[TRANSFORM_KEYS.Z] = buildAnimatableProperty(TRANSFORM_CATEGORIES.POSITION, 'z');
+
+  // Rotation
+  props[TRANSFORM_KEYS.ROTATION_X] = buildAnimatableProperty(TRANSFORM_CATEGORIES.ROTATION, 'x');
+  props[TRANSFORM_KEYS.ROTATION_Y] = buildAnimatableProperty(TRANSFORM_CATEGORIES.ROTATION, 'y');
+  props[TRANSFORM_KEYS.ROTATION_Z] = buildAnimatableProperty(TRANSFORM_CATEGORIES.ROTATION, 'z');
+
+  // Scale
+  props[TRANSFORM_KEYS.SCALE_X] = buildAnimatableProperty(TRANSFORM_CATEGORIES.SCALE, 'x');
+  props[TRANSFORM_KEYS.SCALE_Y] = buildAnimatableProperty(TRANSFORM_CATEGORIES.SCALE, 'y');
+
+  // Style properties
+  props['opacity'] = 'opacity';
+  props['color'] = 'color';
+
+  return props;
+}
+
+// Generate once at module load
+const _animatableProps = generateAnimatableProperties();
+
+// Export as constants (frozen)
+export const ANIMATABLE_PROPERTIES = {
+  POSITION_X: _animatableProps['x'],
+  POSITION_Y: _animatableProps['y'],
+  POSITION_Z: _animatableProps['z'],
+  ROTATION_X: _animatableProps['rotationX'],
+  ROTATION_Y: _animatableProps['rotationY'],
+  ROTATION_Z: _animatableProps['rotationZ'],
+  SCALE_X: _animatableProps['scaleX'],
+  SCALE_Y: _animatableProps['scaleY'],
+  OPACITY: 'opacity',
+  COLOR: 'color'
+} as const;
+
+// ============================================
+// Mapping: Transform key <-> AnimatableProperty
+// ============================================
+
+/**
+ * Maps Transform object keys to AnimatableProperty strings
+ */
+export const TRANSFORM_KEY_TO_PROPERTY: Record<string, AnimatableProperty> = {
+  [TRANSFORM_KEYS.X]: ANIMATABLE_PROPERTIES.POSITION_X,
+  [TRANSFORM_KEYS.Y]: ANIMATABLE_PROPERTIES.POSITION_Y,
+  [TRANSFORM_KEYS.Z]: ANIMATABLE_PROPERTIES.POSITION_Z,
+  [TRANSFORM_KEYS.ROTATION_X]: ANIMATABLE_PROPERTIES.ROTATION_X,
+  [TRANSFORM_KEYS.ROTATION_Y]: ANIMATABLE_PROPERTIES.ROTATION_Y,
+  [TRANSFORM_KEYS.ROTATION_Z]: ANIMATABLE_PROPERTIES.ROTATION_Z,
+  [TRANSFORM_KEYS.SCALE_X]: ANIMATABLE_PROPERTIES.SCALE_X,
+  [TRANSFORM_KEYS.SCALE_Y]: ANIMATABLE_PROPERTIES.SCALE_Y
+};
+
+/**
+ * Maps AnimatableProperty strings to Transform object keys
+ */
+export const PROPERTY_TO_TRANSFORM_KEY: Record<string, string> = {
+  [ANIMATABLE_PROPERTIES.POSITION_X]: TRANSFORM_KEYS.X,
+  [ANIMATABLE_PROPERTIES.POSITION_Y]: TRANSFORM_KEYS.Y,
+  [ANIMATABLE_PROPERTIES.POSITION_Z]: TRANSFORM_KEYS.Z,
+  [ANIMATABLE_PROPERTIES.ROTATION_X]: TRANSFORM_KEYS.ROTATION_X,
+  [ANIMATABLE_PROPERTIES.ROTATION_Y]: TRANSFORM_KEYS.ROTATION_Y,
+  [ANIMATABLE_PROPERTIES.ROTATION_Z]: TRANSFORM_KEYS.ROTATION_Z,
+  [ANIMATABLE_PROPERTIES.SCALE_X]: TRANSFORM_KEYS.SCALE_X,
+  [ANIMATABLE_PROPERTIES.SCALE_Y]: TRANSFORM_KEYS.SCALE_Y
+};
+
+// ============================================
+// Input ID helpers
+// ============================================
+
+/**
+ * Get input ID for a transform property
+ */
+export function getTransformInputId(property: AnimatableProperty): string {
+  return `transform.${property}`;
+}
+
+/**
+ * Get input ID for a style property
+ */
+export function getStyleInputId(property: string): string {
+  return `style.${property}`;
+}
+
+/**
+ * Get input ID for a props property
+ */
+export function getPropsInputId(property: string): string {
+  return `props.${property}`;
+}
+
+// ============================================
+// Property category detection
+// ============================================
+
+export type PropertyCategory = 'transform' | 'style' | 'props';
+
+/**
+ * Determine the category of an AnimatableProperty
+ */
+export function getPropertyCategory(property: AnimatableProperty): PropertyCategory {
+  if (
+    property.startsWith('position.') ||
+    property.startsWith('rotation.') ||
+    property.startsWith('scale.')
+  ) {
+    return 'transform';
+  }
+  if (property.startsWith('props.')) {
+    return 'props';
+  }
+  return 'style'; // opacity, color, etc.
+}
+
+/**
+ * Check if a property is a built-in transform property
+ */
+export function isTransformProperty(property: AnimatableProperty): boolean {
+  return (
+    property.startsWith('position.') ||
+    property.startsWith('rotation.') ||
+    property.startsWith('scale.')
+  );
+}
+
+/**
+ * Check if a property is a style property (opacity, color)
+ */
+export function isStyleProperty(property: AnimatableProperty): boolean {
+  return property === 'opacity' || property === 'color';
+}
+
+/**
+ * Check if a property is a custom props property
+ */
+export function isPropsProperty(property: AnimatableProperty): boolean {
+  return property.startsWith('props.');
+}
+
+// ============================================
+// Property name utilities
+// ============================================
+
+/**
+ * Get the simple property name without category prefix
+ * e.g., 'position.x' -> 'x', 'props.fontSize' -> 'fontSize'
+ */
+export function getPropertyBaseName(property: AnimatableProperty | string): string {
+  if (property.startsWith('props.')) {
+    return property.slice(6);
+  }
+  if (property.includes('.')) {
+    return property.split('.').pop() ?? property;
+  }
+  return property;
+}
+
+/**
+ * Convert Transform key to AnimatableProperty
+ */
+export function transformKeyToAnimatable(key: string): AnimatableProperty | undefined {
+  return TRANSFORM_KEY_TO_PROPERTY[key];
+}
+
+/**
+ * Convert AnimatableProperty to Transform key
+ */
+export function animatableToTransformKey(property: AnimatableProperty): string | undefined {
+  return PROPERTY_TO_TRANSFORM_KEY[property];
+}
+
+/**
+ * Create a props AnimatableProperty from a property name
+ */
+export function makePropsProperty(name: string): `props.${string}` {
+  return `props.${name}`;
+}

From 9568b21a0dfc185b464d75ad956963fa138b00b5 Mon Sep 17 00:00:00 2001
From: EmaDev <pavanello.emanuele@gmail.com>
Date: Sun, 15 Feb 2026 23:35:36 +0100
Subject: [PATCH 2/5] refactor props

---
 src/lib/ai/mutations.ts                       |  66 +++----
 src/lib/ai/schemas.ts                         |  38 +---
 src/lib/ai/system-prompt.ts                   |   4 +-
 src/lib/components/ai/ai-chat.svelte          |   2 +-
 .../components/editor/keyframe-card.svelte    | 178 +++++++++++-------
 .../components/editor/panels/add-layer.svelte |   7 +-
 .../editor/panels/layer-keyframes.svelte      |   2 +-
 .../editor/panels/properties-panel.svelte     | 156 +++++++--------
 .../editor/timeline/timeline-keyframe.svelte  |   3 +
 src/lib/components/ui/select/select.svelte    |   6 +-
 src/lib/engine/interpolation.ts               |  14 +-
 src/lib/engine/layer-factory.ts               |  17 +-
 src/lib/engine/layer-rendering.ts             |  22 ++-
 src/lib/layers/LayerWrapper.svelte            |   8 +-
 src/lib/layers/base.ts                        |  12 +-
 src/lib/schemas/animation.ts                  |  14 +-
 src/lib/schemas/base.ts                       | 104 ++++++++--
 src/lib/schemas/size.ts                       |  15 +-
 src/lib/stores/project.svelte.ts              |  56 +++---
 src/lib/utils/interpolation-utils.ts          | 119 ++++++++++++
 src/lib/utils/property-names.ts               | 172 +----------------
 src/routes/(app)/p/[id]/+page.svelte          |  35 ++--
 22 files changed, 562 insertions(+), 488 deletions(-)
 create mode 100644 src/lib/utils/interpolation-utils.ts

diff --git a/src/lib/ai/mutations.ts b/src/lib/ai/mutations.ts
index 02cf65c..df59830 100644
--- a/src/lib/ai/mutations.ts
+++ b/src/lib/ai/mutations.ts
@@ -34,7 +34,7 @@ import type {
   RemoveKeyframeInput,
   RemoveKeyframeOutput
 } from './schemas';
-import type { ProjectData } from '$lib/schemas/animation';
+import type { Layer, ProjectData } from '$lib/schemas/animation';
 
 /**
  * Context for resolving layer IDs (e.g. "layer_0" -> "actual-uuid")
@@ -122,7 +122,7 @@ export function mutateCreateLayer(
   try {
     const layer = createLayer(input.type, {
       props: input.props,
-      trasform: input.position,
+      transform: input.transform,
       projectDimensions: {
         width: ctx.project.width,
         height: ctx.project.height
@@ -290,31 +290,18 @@ export function mutateEditLayer(ctx: MutationContext, input: EditLayerInput): Ed
   const layer = ctx.project.layers[layerIndex];
 
   try {
-    if (input.updates.name !== undefined) layer.name = input.updates.name;
-    if (input.updates.visible !== undefined) layer.visible = input.updates.visible;
-    if (input.updates.locked !== undefined) layer.locked = input.updates.locked;
-
-    if (input.updates.position) {
-      layer.transform.x = input.updates.position.x ?? layer.transform.x;
-      layer.transform.y = input.updates.position.y ?? layer.transform.y;
-      layer.transform.z = input.updates.position.z ?? layer.transform.z;
+    if (input.updates.name !== undefined) {
+      layer.name = input.updates.name;
     }
-
-    if (input.updates.scale) {
-      layer.transform.scaleX = input.updates.scale.x ?? layer.transform.scaleX;
-      layer.transform.scaleY = input.updates.scale.y ?? layer.transform.scaleY;
+    if (input.updates.visible !== undefined) {
+      layer.visible = input.updates.visible;
     }
-
-    if (input.updates.rotation !== undefined) {
-      layer.transform.rotationZ = (input.updates.rotation * Math.PI) / 180;
+    if (input.updates.locked !== undefined) {
+      layer.locked = input.updates.locked;
     }
 
-    // Handle 3D rotation (rotationX and rotationY in degrees)
-    if (input.updates.rotationX !== undefined) {
-      layer.transform.rotationX = (input.updates.rotationX * Math.PI) / 180;
-    }
-    if (input.updates.rotationY !== undefined) {
-      layer.transform.rotationY = (input.updates.rotationY * Math.PI) / 180;
+    if (input.updates.transform) {
+      layer.transform = input.updates.transform;
     }
 
     // Handle anchor point
@@ -445,19 +432,14 @@ export function mutateGroupLayers(
     const groupId = nanoid();
 
     // Create the group layer
-    const groupLayer = {
+    const groupLayer: Layer = {
       id: groupId,
       name: input.name ?? 'Group',
       type: 'group' as const,
       transform: {
-        x: 0,
-        y: 0,
-        z: 0,
-        rotationX: 0,
-        rotationY: 0,
-        rotationZ: 0,
-        scaleX: 1,
-        scaleY: 1,
+        position: { x: 0, y: 0, z: 0 },
+        rotation: { x: 0, y: 0, z: 0 },
+        scale: { x: 1, y: 1 },
         anchor: 'center' as const
       },
       style: { opacity: 1 },
@@ -528,14 +510,14 @@ export function mutateUngroupLayers(
   for (const layer of ctx.project.layers) {
     if (layer.parentId === resolvedId) {
       layer.parentId = undefined;
-      layer.transform.x += gt.x;
-      layer.transform.y += gt.y;
-      layer.transform.z += gt.z;
-      layer.transform.rotationX += gt.rotationX;
-      layer.transform.rotationY += gt.rotationY;
-      layer.transform.rotationZ += gt.rotationZ;
-      layer.transform.scaleX *= gt.scaleX;
-      layer.transform.scaleY *= gt.scaleY;
+      layer.transform.position.x += gt.position.x;
+      layer.transform.position.y += gt.position.y;
+      layer.transform.position.z += gt.position.z;
+      layer.transform.rotation.x += gt.rotation.x;
+      layer.transform.rotation.y += gt.rotation.y;
+      layer.transform.rotation.z += gt.rotation.z;
+      layer.transform.scale.x *= gt.scale.x;
+      layer.transform.scale.y *= gt.scale.y;
       layer.style.opacity *= gs.opacity;
     }
   }
@@ -732,9 +714,9 @@ function applyPresetToProject(
 
     let value = kf.value;
     if (kf.property === 'position.x' && typeof kf.value === 'number') {
-      value = layer.transform.x + kf.value;
+      value = layer.transform.position.x + kf.value;
     } else if (kf.property === 'position.y' && typeof kf.value === 'number') {
-      value = layer.transform.y + kf.value;
+      value = layer.transform.position.y + kf.value;
     }
 
     addKeyframeToProject(project, layerId, {
diff --git a/src/lib/ai/schemas.ts b/src/lib/ai/schemas.ts
index 97f467d..18884c1 100644
--- a/src/lib/ai/schemas.ts
+++ b/src/lib/ai/schemas.ts
@@ -5,11 +5,11 @@
  * Each layer type has its own creation tool (create_text_layer, create_icon_layer, etc.)
  */
 import { z } from 'zod';
-import { InterpolationSchema } from '$lib/schemas/animation';
+import { InterpolationSchema, TransformSchema } from '$lib/schemas/animation';
 import { getPresetIds } from '$lib/engine/presets';
 import { tool, type InferUITools, type Tool } from 'ai';
 import { layerRegistry, getAvailableLayerTypes } from '$lib/layers/registry';
-import { extractDefaultValues } from '$lib/layers/base';
+import { AnchorPointSchema, extractDefaultValues } from '$lib/layers/base';
 
 // ============================================
 // Helper Functions
@@ -123,7 +123,7 @@ const CreateLayerInputSchema = z
     name: z.string().optional().describe('Layer name for identification'),
     visible: z.boolean().optional().default(true).describe('Layer visibility (default: true)'),
     locked: z.boolean().optional().default(false).describe('Layer locked state (default: false)'),
-    position: PositionSchema,
+    transform: TransformSchema,
     animation: AnimationSchema
   })
   .extend(TimingFieldsSchema.shape)
@@ -241,36 +241,8 @@ export const EditLayerInputSchema = z.object({
       name: z.string().optional(),
       visible: z.boolean().optional(),
       locked: z.boolean().optional(),
-      position: z
-        .object({
-          x: z.number().optional(),
-          y: z.number().optional(),
-          z: z.number().optional().describe('Z position (depth)')
-        })
-        .optional(),
-      scale: z
-        .object({
-          x: z.number().optional(),
-          y: z.number().optional()
-        })
-        .optional(),
-      rotation: z.number().optional().describe('Rotation around Z axis (degrees)'),
-      rotationX: z.number().optional().describe('Rotation around X axis (degrees)'),
-      rotationY: z.number().optional().describe('Rotation around Y axis (degrees)'),
-      anchor: z
-        .enum([
-          'top-left',
-          'top-center',
-          'top-right',
-          'center-left',
-          'center',
-          'center-right',
-          'bottom-left',
-          'bottom-center',
-          'bottom-right'
-        ])
-        .optional()
-        .describe('Anchor point for transformations'),
+      transform: TransformSchema.optional(),
+      anchor: AnchorPointSchema.optional().describe('Anchor point for transformations'),
       opacity: z.number().min(0).max(1).optional(),
       props: z.record(z.string(), z.unknown()).optional()
     })
diff --git a/src/lib/ai/system-prompt.ts b/src/lib/ai/system-prompt.ts
index ce21e2d..9207800 100644
--- a/src/lib/ai/system-prompt.ts
+++ b/src/lib/ai/system-prompt.ts
@@ -115,7 +115,7 @@ function buildCanvasState(project: Project): string {
           const kfList = kfs
             .sort((a, b) => a.time - b.time)
             .map(
-              (kf) => `t=${kf.time}s: ${JSON.stringify(kf.value)} (${kf.interpolation.strategy})`
+              (kf) => `t=${kf.time}s: ${JSON.stringify(kf.value)} (${kf.interpolation?.strategy})`
             )
             .join(', ');
           keyframesDetail += `\n     ${prop}: [${kfList}]`;
@@ -123,7 +123,7 @@ function buildCanvasState(project: Project): string {
       }
 
       return `${index}. "${layer.name}" (id: "${layer.id}", type: ${layer.type})
-   pos: (${layer.transform.x}, ${layer.transform.y}) | scale: (${layer.transform.scaleX}, ${layer.transform.scaleY}) | rotation: ${layer.transform.rotationZ} rad | opacity: ${layer.style.opacity}
+   pos: (${layer.transform.position.x}, ${layer.transform.position.y}) | scale: (${layer.transform.scale.x}, ${layer.transform.scale.y}) | rotation: ${layer.transform.rotation.z} rad | opacity: ${layer.style.opacity}
    props: {${propsPreview || 'none'}}${keyframesDetail || '\n   keyframes: none'}`;
     })
     .join('\n\n');
diff --git a/src/lib/components/ai/ai-chat.svelte b/src/lib/components/ai/ai-chat.svelte
index 1b13fb6..6501320 100644
--- a/src/lib/components/ai/ai-chat.svelte
+++ b/src/lib/components/ai/ai-chat.svelte
@@ -92,7 +92,7 @@
             name: input.name,
             visible: input.visible,
             locked: input.locked,
-            position: input.position,
+            transform: input.transform,
             props: input.props || {},
             animation: input.animation,
             enterTime: input.enterTime,
diff --git a/src/lib/components/editor/keyframe-card.svelte b/src/lib/components/editor/keyframe-card.svelte
index 7fe2604..7031e3c 100644
--- a/src/lib/components/editor/keyframe-card.svelte
+++ b/src/lib/components/editor/keyframe-card.svelte
@@ -1,5 +1,10 @@
 <script lang="ts">
-  import type { Keyframe, Interpolation } from '$lib/types/animation';
+  import type {
+    Keyframe,
+    Interpolation,
+    InterpolationFamily,
+    AnimatableProperty
+  } from '$lib/types/animation';
   import { getEditorState } from '$lib/contexts/editor.svelte';
   import { Button } from '$lib/components/ui/button';
   import * as Popover from '$lib/components/ui/popover';
@@ -10,72 +15,54 @@
     getTransformInputId,
     getStyleInputId,
     isTransformProperty,
-    isStyleProperty,
-    type AnimatableProperty
+    isStyleProperty
   } from '$lib/utils/property-names';
+  import {
+    getStrategyOptionsForFamilies,
+    getSupportedInterpolationFamilies,
+    getDefaultInterpolationForProperty
+  } from '$lib/utils/interpolation-utils';
+  import Select from '../ui/select/select.svelte';
   const editorState = $derived(getEditorState());
   const projectStore = $derived(editorState.project);
 
   interface Props {
     keyframe: Keyframe;
     layerId: string;
+    layerType: string;
     readonlyTime?: boolean;
     onGoToPropertyClick?: () => void;
   }
 
-  let { keyframe, layerId, readonlyTime = false, onGoToPropertyClick }: Props = $props();
-
-  // Type-safe strategy labels - ensures all strategies have corresponding labels
-  type ContinuousStrategy = Extract<Interpolation, { family: 'continuous' }>['strategy'];
-  type DiscreteStrategy = Extract<Interpolation, { family: 'discrete' }>['strategy'];
-  type QuantizedStrategy = Extract<Interpolation, { family: 'quantized' }>['strategy'];
-  type TextStrategy = Extract<Interpolation, { family: 'text' }>['strategy'];
-
-  const continuousStrategyLabels: Record<ContinuousStrategy, string> = {
-    linear: 'Linear',
-    'ease-in': 'Ease In',
-    'ease-out': 'Ease Out',
-    'ease-in-out': 'Ease In-Out'
-  };
-
-  const discreteStrategyLabels: Record<DiscreteStrategy, string> = {
-    'step-end': 'Step End',
-    'step-start': 'Step Start',
-    'step-mid': 'Step Mid'
-  };
+  let { keyframe, layerId, layerType, readonlyTime = false, onGoToPropertyClick }: Props = $props();
 
-  const quantizedStrategyLabels: Record<QuantizedStrategy, string> = {
-    integer: 'Integer',
-    'snap-grid': 'Snap Grid'
-  };
+  // Get supported interpolation families from layer schema
+  const supportedFamilies = $derived(
+    getSupportedInterpolationFamilies(layerType, keyframe.property)
+  );
 
-  const textStrategyLabels: Record<TextStrategy, string> = {
-    'char-reveal': 'Char Reveal',
-    'word-reveal': 'Word Reveal'
-  };
+  const interpolation: Interpolation | undefined = $derived(keyframe.interpolation);
 
-  const interpolation: Interpolation = $derived.by(() => {
-    if (!keyframe.interpolation) {
-      return { family: 'continuous', strategy: 'linear' };
+  const activeFamily = $derived.by(() => {
+    if (!interpolation) {
+      return supportedFamilies[0];
     }
-    return keyframe.interpolation;
+    return interpolation.family;
   });
 
-  // Get strategy options based on interpolation family - convert Record to array format
-  const strategyOptions = $derived.by(() => {
-    const labels =
-      interpolation.family === 'continuous'
-        ? continuousStrategyLabels
-        : interpolation.family === 'discrete'
-          ? discreteStrategyLabels
-          : interpolation.family === 'quantized'
-            ? quantizedStrategyLabels
-            : interpolation.family === 'text'
-              ? textStrategyLabels
-              : continuousStrategyLabels;
-
-    return Object.entries(labels).map(([value, label]) => ({ value, label }));
-  });
+  // Check if multiple families are supported
+  const hasMultipleFamilies = $derived(supportedFamilies.length > 1);
+
+  // Get strategy options for the current family
+  const currentFamilyOptions = $derived(getStrategyOptionsForFamilies([activeFamily]));
+
+  // Family labels for display
+  const familyLabels: Record<InterpolationFamily, string> = {
+    continuous: 'Continuous',
+    discrete: 'Discrete',
+    quantized: 'Quantized',
+    text: 'Text'
+  };
 
   function getPropertyLabel(property: string): string {
     const labels: Record<string, string> = {
@@ -132,9 +119,30 @@
     projectStore.updateKeyframe(layerId, keyframe.id, { time: clampedTime });
   }
 
+  function handleFamilyChange(family: InterpolationFamily) {
+    // When changing family, use the first strategy available for that family
+    let newInterpolation: Interpolation;
+
+    switch (family) {
+      case 'continuous':
+        newInterpolation = { family: 'continuous', strategy: 'ease-in-out' };
+        break;
+      case 'discrete':
+        newInterpolation = { family: 'discrete', strategy: 'step-end' };
+        break;
+      case 'quantized':
+        newInterpolation = { family: 'quantized', strategy: 'integer' };
+        break;
+      case 'text':
+        newInterpolation = { family: 'text', strategy: 'char-reveal' };
+        break;
+    }
+
+    projectStore.updateKeyframe(layerId, keyframe.id, { interpolation: newInterpolation });
+  }
+
   function handleStrategyChange(strategy: string) {
-    // Reconstruct interpolation with proper types based on family
-    const family = interpolation.family;
+    const family = activeFamily;
     let newInterpolation: Interpolation;
 
     switch (family) {
@@ -157,7 +165,8 @@
           newInterpolation = { family: 'quantized', strategy: 'integer' };
         } else {
           // For snap-grid, preserve increment if exists, otherwise use default
-          const increment = 'increment' in interpolation ? interpolation.increment : 10;
+          const increment =
+            interpolation && 'increment' in interpolation ? interpolation.increment : 10;
           newInterpolation = { family: 'quantized', strategy: 'snap-grid', increment };
         }
         break;
@@ -167,7 +176,8 @@
           newInterpolation = { family: 'text', strategy: 'char-reveal' };
         } else {
           // For word-reveal, preserve separator if exists, otherwise use default
-          const separator = 'separator' in interpolation ? interpolation.separator : ' ';
+          const separator =
+            interpolation && 'separator' in interpolation ? interpolation.separator : ' ';
           newInterpolation = { family: 'text', strategy: 'word-reveal', separator };
         }
         break;
@@ -222,7 +232,7 @@
 </script>
 
 <div class="group rounded-lg border bg-muted/20 p-3 transition-colors hover:bg-muted/40">
-  <div class="flex items-start justify-between gap-2">
+  <div class="flex items-center justify-between gap-2">
     <button
       type="button"
       onclick={handleGoToTime}
@@ -294,7 +304,7 @@
             min={0}
             max={projectStore.state.duration}
             onchange={handleTimeChange}
-            class="max-w-12 shrink-0"
+            class="w-12 shrink-0"
           />
           <span
             class="pointer-events-none absolute top-1/2 right-2 -translate-y-1/2 text-[10px] text-muted-foreground"
@@ -304,24 +314,58 @@
         </div>
       {/if}
       <span class="text-muted-foreground">=</span>
-      <span class="min-w-[60px] font-mono font-medium tabular-nums">
+      <span
+        class="min-w-[60px] overflow-hidden font-mono font-medium text-ellipsis tabular-nums"
+        title={formatValue(keyframe.value)}
+      >
         {formatValue(keyframe.value)}
       </span>
     </div>
 
+    <!-- Family selector (only shown if multiple families are supported) -->
+    {#if hasMultipleFamilies}
+      <div class="flex items-center gap-2 text-xs">
+        <span class="text-muted-foreground">Family:</span>
+        <Select
+          value={activeFamily}
+          placeholder="Select Family"
+          root={{
+            onValueChange: (value) => handleFamilyChange(value as InterpolationFamily)
+          }}
+          trigger={{
+            class:
+              'h-7 flex-1 rounded-md border border-input bg-background px-2 text-xs focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none'
+          }}
+          options={supportedFamilies.map((family) => ({
+            value: family,
+            label: familyLabels[family]
+          }))}
+        />
+      </div>
+    {/if}
+
+    <!-- Strategy selector -->
     <div class="flex items-center gap-2 text-xs">
       <span class="text-muted-foreground">
-        {interpolation.family === 'continuous' ? 'Easing:' : 'Strategy:'}
+        {activeFamily === 'continuous' ? 'Easing:' : 'Strategy:'}
       </span>
-      <select
-        value={interpolation.strategy}
-        onchange={(e) => handleStrategyChange(e.currentTarget.value)}
-        class="h-7 flex-1 rounded-md border border-input bg-background px-2 text-xs focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none"
-      >
-        {#each strategyOptions as option (option.value)}
-          <option value={option.value}>{option.label}</option>
-        {/each}
-      </select>
+      {#if currentFamilyOptions.length > 0}
+        <Select
+          value={interpolation?.strategy}
+          placeholder="Select Strategy"
+          root={{
+            onValueChange: (value) => handleStrategyChange(value)
+          }}
+          trigger={{
+            class:
+              'h-7 flex-1 rounded-md border border-input bg-background px-2 text-xs focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none'
+          }}
+          options={currentFamilyOptions.map((option) => ({
+            value: option.strategy,
+            label: option.label
+          }))}
+        />
+      {/if}
     </div>
   </div>
 </div>
diff --git a/src/lib/components/editor/panels/add-layer.svelte b/src/lib/components/editor/panels/add-layer.svelte
index 3581ed6..61b3a32 100644
--- a/src/lib/components/editor/panels/add-layer.svelte
+++ b/src/lib/components/editor/panels/add-layer.svelte
@@ -16,7 +16,12 @@
 
   function addLayer(type: LiteralUnion<LayerTypeString, string>) {
     const layer = createLayer(type, {
-      trasform: { x: 0, y: 0 },
+      transform: {
+        position: { x: 0, y: 0, z: 0 },
+        rotation: { x: 0, y: 0, z: 0 },
+        scale: { x: 1, y: 1 },
+        anchor: 'center'
+      },
       projectDimensions: {
         width: projectStore.state.width,
         height: projectStore.state.height
diff --git a/src/lib/components/editor/panels/layer-keyframes.svelte b/src/lib/components/editor/panels/layer-keyframes.svelte
index 1f631ee..bb033f7 100644
--- a/src/lib/components/editor/panels/layer-keyframes.svelte
+++ b/src/lib/components/editor/panels/layer-keyframes.svelte
@@ -73,7 +73,7 @@
       <p class="py-4 text-center text-sm text-muted-foreground">No keyframes found</p>
     {:else}
       {#each filteredKeyframes as keyframe (keyframe.id)}
-        <KeyframeCard {keyframe} layerId={layer.id} />
+        <KeyframeCard {keyframe} layerId={layer.id} layerType={layer.type} />
       {/each}
     {/if}
   </div>
diff --git a/src/lib/components/editor/panels/properties-panel.svelte b/src/lib/components/editor/panels/properties-panel.svelte
index ee6917e..c5ffa3b 100644
--- a/src/lib/components/editor/panels/properties-panel.svelte
+++ b/src/lib/components/editor/panels/properties-panel.svelte
@@ -25,19 +25,18 @@
     AnimatableProperty,
     Transform,
     LayerStyle,
-    AnchorPoint,
-    Interpolation,
-    InterpolationFamily
+    AnchorPoint
   } from '$lib/types/animation';
   import {
     getAnimatedTransform,
     getAnimatedStyle,
     getAnimatedProps
   } from '$lib/engine/interpolation';
-  import { ANIMATABLE_PROPERTIES } from '$lib/utils/property-names';
+
   import { getLayerDefinition, getLayerSchema } from '$lib/layers/registry';
   import { extractPropertyMetadata } from '$lib/layers/base';
   import { animationPresets } from '$lib/engine/presets';
+  import { getDefaultInterpolationForProperty } from '$lib/utils/interpolation-utils';
   import InputWrapper from './input-wrapper.svelte';
 
   import ScrubXyz from './scrub-xyz.svelte';
@@ -117,14 +116,18 @@
 
     return {
       transform: {
-        x: animatedTransform.position.x ?? selectedLayer.transform.x,
-        y: animatedTransform.position.y ?? selectedLayer.transform.y,
-        z: animatedTransform.position.z ?? selectedLayer.transform.z,
-        rotationX: animatedTransform.rotation.x ?? selectedLayer.transform.rotationX,
-        rotationY: animatedTransform.rotation.y ?? selectedLayer.transform.rotationY,
-        rotationZ: animatedTransform.rotation.z ?? selectedLayer.transform.rotationZ,
-        scaleX: animatedTransform.scale.x ?? selectedLayer.transform.scaleX,
-        scaleY: animatedTransform.scale.y ?? selectedLayer.transform.scaleY
+        x: animatedTransform.position.x ?? selectedLayer.transform.position.x,
+        y: animatedTransform.position.y ?? selectedLayer.transform.position.y,
+        z: animatedTransform.position.z ?? selectedLayer.transform.position.z,
+        rotation: {
+          x: animatedTransform.rotation.x ?? selectedLayer.transform.rotation.x,
+          y: animatedTransform.rotation.y ?? selectedLayer.transform.rotation.y,
+          z: animatedTransform.rotation.z ?? selectedLayer.transform.rotation.z
+        },
+        scale: {
+          x: animatedTransform.scale.x ?? selectedLayer.transform.scale.x,
+          y: animatedTransform.scale.y ?? selectedLayer.transform.scale.y
+        }
       },
       style: {
         opacity: animatedStyle.opacity ?? selectedLayer.style.opacity
@@ -174,47 +177,16 @@
     target: 'transform' | 'props' | 'style',
     propertyName: string
   ): AnimatableProperty {
-    if (target === 'transform')
-      return ANIMATABLE_PROPERTIES[propertyName as keyof typeof ANIMATABLE_PROPERTIES];
-    if (target === 'props') return `props.${propertyName}` as AnimatableProperty;
-    return propertyName as AnimatableProperty; // style: 'opacity'
-  }
-
-  /**
-   * Get default interpolation for a property based on its metadata
-   */
-  function getDefaultInterpolationForProperty(property: AnimatableProperty): Interpolation {
-    // Extract property name from animatable property (e.g., "props.fontSize" -> "fontSize")
-    const propertyName = property.includes('.') ? property.split('.').pop()! : property;
-
-    // Find metadata for this property
-    const metadata = layerPropertyMetadata.find((m) => m.name === propertyName);
-
-    if (!metadata) {
-      // Default for built-in properties (position, scale, rotation, opacity)
-      return { family: 'continuous', strategy: 'ease-in-out' };
+    if (target === 'transform') {
+      return propertyName;
     }
-
-    // Get first family if array, otherwise use the family
-    const family: InterpolationFamily = Array.isArray(metadata.interpolationFamily)
-      ? metadata.interpolationFamily[0]
-      : metadata.interpolationFamily;
-
-    // Return appropriate default based on family
-    switch (family) {
-      case 'continuous':
-        return { family: 'continuous', strategy: 'linear' };
-      case 'discrete':
-        return { family: 'discrete', strategy: 'step-end' };
-      case 'quantized':
-        return { family: 'quantized', strategy: 'integer' };
-      case 'text':
-        return { family: 'text', strategy: 'char-reveal' };
-      default:
-        return { family: 'continuous', strategy: 'linear' };
+    if (target === 'props') {
+      return `props.${propertyName}` as AnimatableProperty;
     }
+    return propertyName as AnimatableProperty; // style: 'opacity'
   }
 
+
   /**
    * Helper to update an animatable property - handles keyframe logic.
    * If the property has keyframes, updates/creates keyframe at current time.
@@ -239,7 +211,7 @@
         projectStore.updateKeyframe(layer.id, keyframeAtTime.id, { value });
       } else {
         // Get default interpolation based on property metadata
-        const interpolation = getDefaultInterpolationForProperty(animatableProperty);
+        const interpolation = getDefaultInterpolationForProperty(layer.type, animatableProperty);
         projectStore.addKeyframe(layer.id, {
           id: nanoid(),
           time: currentTime,
@@ -253,6 +225,25 @@
     }
   }
 
+  /**
+   * Deep set a property on an object using dot notation.
+   * E.g., setDeep(obj, 'position.x', 10) sets obj.position.x = 10
+   */
+  function setDeep<T extends Record<string, unknown>>(obj: T, path: string, value: unknown): T {
+    const keys = path.split('.');
+    const result = { ...obj };
+    let current: Record<string, unknown> = result;
+
+    for (let i = 0; i < keys.length - 1; i++) {
+      const key = keys[i];
+      current[key] = { ...(current[key] as Record<string, unknown>) };
+      current = current[key] as Record<string, unknown>;
+    }
+
+    current[keys[keys.length - 1]] = value;
+    return result;
+  }
+
   /**
    * Unified property update function.
    * Handles transform, style, and props targets.
@@ -263,6 +254,7 @@
     value: unknown,
     target: 'transform' | 'props' | 'style'
   ) {
+    console.log('updateProperty', propertyName, value, target);
     if (!selectedLayer) return;
 
     if (target === 'props' && layerDefinition?.middleware && currentValues) {
@@ -300,10 +292,8 @@
           propAnimatable,
           val as number | string | boolean,
           () => {
-            const newTransform: Transform = {
-              ...selectedLayer.transform,
-              [prop]: val
-            };
+            // Handle deep property access for transform (e.g., 'position.x', 'scale.y')
+            const newTransform = setDeep(selectedLayer.transform, prop, val);
             projectStore.updateLayer(selectedLayer.id, { transform: newTransform });
           }
         );
@@ -329,11 +319,11 @@
       'position.x': currentValues.transform.x,
       'position.y': currentValues.transform.y,
       'position.z': currentValues.transform.z,
-      'rotation.x': currentValues.transform.rotationX,
-      'rotation.y': currentValues.transform.rotationY,
-      'rotation.z': currentValues.transform.rotationZ,
-      'scale.x': currentValues.transform.scaleX,
-      'scale.y': currentValues.transform.scaleY,
+      'rotation.x': currentValues.transform.rotation.x,
+      'rotation.y': currentValues.transform.rotation.y,
+      'rotation.z': currentValues.transform.rotation.z,
+      'scale.x': currentValues.transform.scale.x,
+      'scale.y': currentValues.transform.scale.y,
       opacity: currentValues.style.opacity
     };
 
@@ -519,27 +509,27 @@
               valueZ={currentValues?.transform.z ?? 0}
               stepXY={1}
               stepZ={1}
-              onchangeX={(v: number) => updateProperty('x', v, 'transform')}
-              onchangeY={(v: number) => updateProperty('y', v, 'transform')}
-              onchangeZ={(v: number) => updateProperty('z', v, 'transform')}
+              onchangeX={(v: number) => updateProperty('position.x', v, 'transform')}
+              onchangeY={(v: number) => updateProperty('position.y', v, 'transform')}
+              onchangeZ={(v: number) => updateProperty('position.z', v, 'transform')}
             />
           {/snippet}
 
           <ScrubInput
             id="transform.position.x"
             value={currentValues?.transform.x ?? 0}
-            onchange={(v) => updateProperty('x', v, 'transform')}
+            onchange={(v) => updateProperty('position.x', v, 'transform')}
           />
 
           <ScrubInput
             id="transform.position.y"
             value={currentValues?.transform.y ?? 0}
-            onchange={(v) => updateProperty('y', v, 'transform')}
+            onchange={(v) => updateProperty('position.y', v, 'transform')}
           />
           <ScrubInput
             id="transform.position.z"
             value={currentValues?.transform.z ?? 0}
-            onchange={(v) => updateProperty('z', v, 'transform')}
+            onchange={(v) => updateProperty('position.z', v, 'transform')}
           />
         </InputsWrapper>
 
@@ -560,41 +550,41 @@
           {#snippet prefix()}
             <Label class="text-xs text-muted-foreground">Rotation</Label>
             <ScrubXyz
-              valueX={currentValues?.transform.rotationY ?? 0}
-              valueY={currentValues?.transform.rotationX ?? 0}
-              valueZ={currentValues?.transform.rotationZ ?? 0}
+              valueX={currentValues?.transform.rotation.y ?? 0}
+              valueY={currentValues?.transform.rotation.x ?? 0}
+              valueZ={currentValues?.transform.rotation.z ?? 0}
               stepXY={0.1}
               stepZ={0.1}
               invertY={true}
-              onchangeX={(v: number) => updateProperty('rotationY', v, 'transform')}
-              onchangeY={(v: number) => updateProperty('rotationX', v, 'transform')}
-              onchangeZ={(v: number) => updateProperty('rotationZ', v, 'transform')}
+              onchangeX={(v: number) => updateProperty('rotation.y', v, 'transform')}
+              onchangeY={(v: number) => updateProperty('rotation.x', v, 'transform')}
+              onchangeZ={(v: number) => updateProperty('rotation.z', v, 'transform')}
             />
           {/snippet}
           <ScrubInput
             id="transform.rotation.x"
-            value={currentValues?.transform.rotationX ?? 0}
+            value={currentValues?.transform.rotation.x ?? 0}
             step={0.1}
-            onchange={(v) => updateProperty('rotationX', v, 'transform')}
+            onchange={(v) => updateProperty('rotation.x', v, 'transform')}
           />
           <ScrubInput
             id="transform.rotation.y"
-            value={currentValues?.transform.rotationY ?? 0}
+            value={currentValues?.transform.rotation.y ?? 0}
             step={0.1}
-            onchange={(v) => updateProperty('rotationY', v, 'transform')}
+            onchange={(v) => updateProperty('rotation.y', v, 'transform')}
           />
           <ScrubInput
             id="transform.rotation.z"
-            value={currentValues?.transform.rotationZ ?? 0}
+            value={currentValues?.transform.rotation.z ?? 0}
             step={0.1}
-            onchange={(v) => updateProperty('rotationZ', v, 'transform')}
+            onchange={(v) => updateProperty('rotation.z', v, 'transform')}
           />
         </InputsWrapper>
 
         <!-- Scale -->
         {@const scaleLocked = selectedLayer?.props._scaleLocked ?? false}
-        {@const currentScaleX = currentValues?.transform.scaleX ?? 1}
-        {@const currentScaleY = currentValues?.transform.scaleY ?? 1}
+        {@const currentScaleX = currentValues?.transform.scale.x ?? 1}
+        {@const currentScaleY = currentValues?.transform.scale.y ?? 1}
         <InputsWrapper
           fields={[
             { prop: 'scale.x' as AnimatableProperty, label: 'X', id: 'transform.scale.x' },
@@ -615,8 +605,8 @@
               valueZ={0}
               stepXY={0.1}
               stepZ={0.1}
-              onchangeX={(v: number) => updateProperty('scaleX', v || 1, 'transform')}
-              onchangeY={(v: number) => updateProperty('scaleY', v || 1, 'transform')}
+              onchangeX={(v: number) => updateProperty('scale.x', v || 1, 'transform')}
+              onchangeY={(v: number) => updateProperty('scale.y', v || 1, 'transform')}
               onchangeZ={() => {}}
             />
             <Button
@@ -646,13 +636,13 @@
             id="transform.scale.x"
             value={currentScaleX}
             step={0.1}
-            onchange={(v) => updateProperty('scaleX', v || 1, 'transform')}
+            onchange={(v) => updateProperty('scale.x', v || 1, 'transform')}
           />
           <ScrubInput
             id="transform.scale.y"
             value={currentScaleY}
             step={0.1}
-            onchange={(v) => updateProperty('scaleY', v || 1, 'transform')}
+            onchange={(v) => updateProperty('scale.y', v || 1, 'transform')}
           />
         </InputsWrapper>
 
diff --git a/src/lib/components/editor/timeline/timeline-keyframe.svelte b/src/lib/components/editor/timeline/timeline-keyframe.svelte
index 0efc36d..fc4f152 100644
--- a/src/lib/components/editor/timeline/timeline-keyframe.svelte
+++ b/src/lib/components/editor/timeline/timeline-keyframe.svelte
@@ -17,6 +17,8 @@
 
   let { keyframes, pixelsPerSecond, layerId }: Props = $props();
 
+  const layer = $derived(projectStore.state.layers.find((l) => l.id === layerId));
+  const layerType = $derived(layer?.type ?? 'rectangle');
   const firstKeyframe = $derived(keyframes[0]);
   const position = $derived(firstKeyframe.time * pixelsPerSecond);
   const isSelected = $derived(keyframes.some((kf) => projectStore.selectedKeyframeIds.has(kf.id)));
@@ -123,6 +125,7 @@
           <KeyframeCard
             {keyframe}
             {layerId}
+            {layerType}
             readonlyTime
             onGoToPropertyClick={() => (popoverOpen = false)}
           />
diff --git a/src/lib/components/ui/select/select.svelte b/src/lib/components/ui/select/select.svelte
index 2541012..57459d8 100644
--- a/src/lib/components/ui/select/select.svelte
+++ b/src/lib/components/ui/select/select.svelte
@@ -8,6 +8,7 @@
 
   let {
     value = $bindable(),
+    placeholder,
     options,
     root,
     trigger,
@@ -15,7 +16,8 @@
     group,
     item
   }: {
-    value: string;
+    value?: string;
+    placeholder?: string;
     options: {
       value: string;
       label: string;
@@ -34,7 +36,7 @@
 
 <Select.Root {...root} bind:value type="single">
   <Select.Trigger {...trigger}>
-    {value}
+    {value || placeholder}
   </Select.Trigger>
 
   <Select.Content {...content}>
diff --git a/src/lib/engine/interpolation.ts b/src/lib/engine/interpolation.ts
index 9482455..b614278 100644
--- a/src/lib/engine/interpolation.ts
+++ b/src/lib/engine/interpolation.ts
@@ -4,6 +4,10 @@
 import BezierEasing from 'bezier-easing';
 import type { Interpolation, Keyframe, AnimatableProperty } from '$lib/types/animation';
 import type { PropertyMetadata } from '$lib/layers/base';
+import type {
+  
+  ContinuousInterpolationStrategy
+} from '$lib/schemas/animation';
 
 /**
  * Main interpolation function - dispatches to family-specific interpolators
@@ -12,8 +16,12 @@ export function interpolateValue(
   startValue: unknown,
   endValue: unknown,
   progress: number,
-  interpolation: Interpolation = { family: 'continuous', strategy: 'linear' }
+  interpolation?: Interpolation
 ): unknown {
+  if (!interpolation) {
+    console.warn('No interpolation provided, using end value');
+    return endValue;
+  }
   switch (interpolation.family) {
     case 'continuous':
       return interpolateContinuous(startValue, endValue, progress, interpolation.strategy);
@@ -40,7 +48,7 @@ function interpolateContinuous(
   start: unknown,
   end: unknown,
   progress: number,
-  strategy: string
+  strategy: ContinuousInterpolationStrategy
 ): number {
   if (typeof start !== 'number' || typeof end !== 'number') {
     throw new Error('continuous interpolation requires numeric values');
@@ -173,7 +181,7 @@ function interpolateText(
 /**
  * Get easing function for continuous interpolation strategies
  */
-function getEasingFunction(strategy: string): (t: number) => number {
+function getEasingFunction(strategy: ContinuousInterpolationStrategy): (t: number) => number {
   switch (strategy) {
     case 'linear':
       return (t) => t;
diff --git a/src/lib/engine/layer-factory.ts b/src/lib/engine/layer-factory.ts
index 62c6398..b856487 100644
--- a/src/lib/engine/layer-factory.ts
+++ b/src/lib/engine/layer-factory.ts
@@ -24,12 +24,12 @@ export function createLayer<T extends LayerTypeString>(
   type: T | string,
   override?: {
     props?: Partial<LayerProps<T>>;
-    trasform?: Partial<Transform>;
+    transform?: Partial<Transform>;
     layer?: Partial<Omit<TypedLayer, 'transform' | 'style' | 'keyframes' | 'props'>>;
     projectDimensions?: { width: number; height: number };
   }
 ): TypedLayer {
-  const { x = 0, y = 0 } = override?.trasform || {};
+  const { x = 0, y = 0 } = override?.transform?.position || {};
   const definition = getLayerDefinition(type);
 
   // Extract default values from the Zod schema
@@ -71,16 +71,11 @@ export function createLayer<T extends LayerTypeString>(
     name: definition.label,
     type,
     transform: {
-      x,
-      y,
-      z: 0,
-      rotationX: 0,
-      rotationY: 0,
-      rotationZ: 0,
-      scaleX: 1,
-      scaleY: 1,
+      position: { x, y, z: 0 },
+      rotation: { x: 0, y: 0, z: 0 },
+      scale: { x: 1, y: 1 },
       anchor: 'center',
-      ...override?.trasform
+      ...override?.transform
     },
     style: {
       opacity: 1
diff --git a/src/lib/engine/layer-rendering.ts b/src/lib/engine/layer-rendering.ts
index e94efb1..3d45c5e 100644
--- a/src/lib/engine/layer-rendering.ts
+++ b/src/lib/engine/layer-rendering.ts
@@ -15,14 +15,20 @@ export function getLayerTransform(layer: TypedLayer, currentTime: number): Trans
   const animatedTransform = getAnimatedTransform(layer.keyframes, currentTime);
 
   return {
-    x: animatedTransform.position?.x ?? layer.transform.x,
-    y: animatedTransform.position?.y ?? layer.transform.y,
-    z: animatedTransform.position?.z ?? layer.transform.z,
-    rotationX: animatedTransform.rotation?.x ?? layer.transform.rotationX,
-    rotationY: animatedTransform.rotation?.y ?? layer.transform.rotationY,
-    rotationZ: animatedTransform.rotation?.z ?? layer.transform.rotationZ,
-    scaleX: animatedTransform.scale?.x ?? layer.transform.scaleX,
-    scaleY: animatedTransform.scale?.y ?? layer.transform.scaleY,
+    position: {
+      x: animatedTransform.position?.x ?? layer.transform.position.x,
+      y: animatedTransform.position?.y ?? layer.transform.position.y,
+      z: animatedTransform.position?.z ?? layer.transform.position.z
+    },
+    rotation: {
+      x: animatedTransform.rotation?.x ?? layer.transform.rotation.x,
+      y: animatedTransform.rotation?.y ?? layer.transform.rotation.y,
+      z: animatedTransform.rotation?.z ?? layer.transform.rotation.z
+    },
+    scale: {
+      x: animatedTransform.scale?.x ?? layer.transform.scale.x,
+      y: animatedTransform.scale?.y ?? layer.transform.scale.y
+    },
     anchor: layer.transform.anchor ?? 'center'
   };
 }
diff --git a/src/lib/layers/LayerWrapper.svelte b/src/lib/layers/LayerWrapper.svelte
index e7cd88b..418caa8 100644
--- a/src/lib/layers/LayerWrapper.svelte
+++ b/src/lib/layers/LayerWrapper.svelte
@@ -138,8 +138,8 @@
 
       // Get current animated values using the interpolation engine
       const animatedTransform = getAnimatedTransform(layer.keyframes, currentTime);
-      const currentX = animatedTransform.position.x ?? layer.transform.x;
-      const currentY = animatedTransform.position.y ?? layer.transform.y;
+      const currentX = animatedTransform.position.x ?? layer.transform.position.x;
+      const currentY = animatedTransform.position.y ?? layer.transform.position.y;
 
       // Find keyframes at exact current time
       const xKeyframeAtTime = layer.keyframes.find(
@@ -193,8 +193,8 @@
       if (!hasXKeyframes || !hasYKeyframes) {
         const newTransform = {
           ...layer.transform,
-          x: hasXKeyframes ? layer.transform.x : layer.transform.x + movementX,
-          y: hasYKeyframes ? layer.transform.y : layer.transform.y + movementY
+          x: hasXKeyframes ? layer.transform.position.x : layer.transform.position.x + movementX,
+          y: hasYKeyframes ? layer.transform.position.y : layer.transform.position.y + movementY
         };
         projectStore.updateLayer(id, { transform: newTransform });
       }
diff --git a/src/lib/layers/base.ts b/src/lib/layers/base.ts
index f4d5109..df7cffb 100644
--- a/src/lib/layers/base.ts
+++ b/src/lib/layers/base.ts
@@ -305,18 +305,18 @@ function getAnchorOffset(anchor: AnchorPoint): { x: string; y: string } {
  * so that translate3d(0, 0, 0) places it at the canvas center.
  */
 export function generateTransformCSS(transform: Transform): string {
-  const { x, y, z, rotationX, rotationY, rotationZ, scaleX, scaleY, anchor } = transform;
+  const { position, rotation, scale, anchor } = transform;
   const anchorOffset = getAnchorOffset(anchor);
 
   // Apply position offset, then anchor offset, then rotation and scale
   // The layer is already positioned at canvas center via CSS (top-1/2 left-1/2)
   return `
-    translate3d(${x}px, ${y}px, ${z}px)
+    translate3d(${position.x}px, ${position.y}px, ${position.z}px)
     translate(${anchorOffset.x}, ${anchorOffset.y})
-    rotateX(${rotationX}rad)
-    rotateY(${rotationY}rad)
-    rotateZ(${rotationZ}rad)
-    scale(${scaleX}, ${scaleY})
+    rotateX(${rotation.x}rad)
+    rotateY(${rotation.y}rad)
+    rotateZ(${rotation.z}rad)
+    scale(${scale.x}, ${scale.y})
   `
     .trim()
     .replace(/\s+/g, ' ');
diff --git a/src/lib/schemas/animation.ts b/src/lib/schemas/animation.ts
index 555ec03..6b71491 100644
--- a/src/lib/schemas/animation.ts
+++ b/src/lib/schemas/animation.ts
@@ -7,6 +7,7 @@ import { z } from 'zod';
 import { BackgroundValueSchema } from './background';
 import { TransformSchema, LayerStyleSchema, BaseLayerFieldsSchema } from './base';
 import { googleFontValues } from '$lib/utils/fonts';
+import type { LiteralUnion } from 'type-fest';
 
 // ============================================
 // Interpolation
@@ -18,6 +19,9 @@ const ContinuousInterpolationSchema = z.object({
   strategy: z.enum(['linear', 'ease-in', 'ease-out', 'ease-in-out'])
 });
 
+export type ContinuousInterpolation = z.infer<typeof ContinuousInterpolationSchema>;
+export type ContinuousInterpolationStrategy = ContinuousInterpolation['strategy'];
+
 // Discrete interpolation (instant value changes)
 const DiscreteInterpolationSchema = z.object({
   family: z.literal('discrete'),
@@ -121,7 +125,7 @@ export const KeyframeSchema = z.object({
   time: z.number().min(0),
   property: AnimatablePropertySchema,
   value: z.union([z.number(), z.string(), z.boolean()]),
-  interpolation: InterpolationSchema
+  interpolation: InterpolationSchema.optional()
 });
 
 // ============================================
@@ -251,8 +255,12 @@ export type Interpolation = z.infer<typeof InterpolationSchema>;
 export type InterpolationFamily = Interpolation['family'];
 
 export type BuiltInAnimatableProperty = z.infer<typeof BuiltInAnimatablePropertySchema>;
-export type PropsAnimatableProperty = z.infer<typeof PropsAnimatablePropertySchema>;
-export type AnimatableProperty = z.infer<typeof AnimatablePropertySchema>;
+// TypeScript type with template literal (can't be inferred from Zod regex)
+export type PropsAnimatableProperty = `props.${string}`;
+export type AnimatableProperty = LiteralUnion<
+  BuiltInAnimatableProperty | PropsAnimatableProperty,
+  string
+>;
 
 // Re-export base types for backward compatibility
 export type { AnchorPoint, Transform, LayerStyle } from './base';
diff --git a/src/lib/schemas/base.ts b/src/lib/schemas/base.ts
index bb910ae..8623bfd 100644
--- a/src/lib/schemas/base.ts
+++ b/src/lib/schemas/base.ts
@@ -34,18 +34,100 @@ export type AnchorPoint = z.infer<typeof AnchorPointSchema>;
 /**
  * Transform properties for positioning, rotating, and scaling layers in 3D space.
  * These properties can be animated via keyframes.
+ *
+ * Uses nested structure to match AnimatableProperty convention:
+ * - position.x, position.y, position.z
+ * - rotation.x, rotation.y, rotation.z
+ * - scale.x, scale.y
+ *
+ * Supports both old flat format (x, y, z, rotationX, rotationY, rotationZ, scaleX, scaleY, anchor)
+ * and new nested format (position, rotation, scale, anchor).
+ * Old format is automatically converted to new format on parse.
  */
-export const TransformSchema = z.object({
-  x: z.number().describe('Position X'),
-  y: z.number().describe('Position Y'),
-  z: z.number().describe('Position Z (depth)'),
-  rotationX: z.number().describe('Rotation X (radians)'),
-  rotationY: z.number().describe('Rotation Y (radians)'),
-  rotationZ: z.number().describe('Rotation Z (radians)'),
-  scaleX: z.number().min(0).describe('Scale X'),
-  scaleY: z.number().min(0).describe('Scale Y'),
-  anchor: AnchorPointSchema.describe('Anchor point')
-});
+export const TransformSchema = z
+  .object({
+    // New nested format
+    position: z
+      .object({
+        x: z.number().describe('Position X'),
+        y: z.number().describe('Position Y'),
+        z: z.number().describe('Position Z (depth)')
+      })
+      .optional(),
+    rotation: z
+      .object({
+        x: z.number().describe('Rotation X (radians)'),
+        y: z.number().describe('Rotation Y (radians)'),
+        z: z.number().describe('Rotation Z (radians)')
+      })
+      .optional(),
+    scale: z
+      .object({
+        x: z.number().min(0).describe('Scale X'),
+        y: z.number().min(0).describe('Scale Y')
+      })
+      .optional(),
+    anchor: AnchorPointSchema.describe('Anchor point').optional(),
+    // Old flat format (legacy support)
+    x: z.number().describe('Position X').optional(),
+    y: z.number().describe('Position Y').optional(),
+    z: z.number().describe('Position Z (depth)').optional(),
+    rotationX: z.number().describe('Rotation X (radians)').optional(),
+    rotationY: z.number().describe('Rotation Y (radians)').optional(),
+    rotationZ: z.number().describe('Rotation Z (radians)').optional(),
+    scaleX: z.number().min(0).describe('Scale X').optional(),
+    scaleY: z.number().min(0).describe('Scale Y').optional()
+  })
+  .superRefine((data, ctx) => {
+    const hasNewFormat = data.position || data.rotation || data.scale;
+    const hasOldFormat =
+      data.x !== undefined ||
+      data.y !== undefined ||
+      data.z !== undefined ||
+      data.rotationX !== undefined ||
+      data.rotationY !== undefined ||
+      data.rotationZ !== undefined ||
+      data.scaleX !== undefined ||
+      data.scaleY !== undefined;
+
+    // If neither format is provided, error
+    if (!hasNewFormat && !hasOldFormat) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message:
+          'Transform must have either new format (position/rotation/scale) or old flat format'
+      });
+      return;
+    }
+
+    // If both formats are provided, prefer new format but warn
+    if (hasNewFormat && hasOldFormat) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'Both old and new format detected, using new format'
+      });
+    }
+  })
+  .transform((data) => {
+    // Convert old flat format to new nested format
+    return {
+      position: data.position ?? {
+        x: data.x ?? 0,
+        y: data.y ?? 0,
+        z: data.z ?? 0
+      },
+      rotation: data.rotation ?? {
+        x: data.rotationX ?? 0,
+        y: data.rotationY ?? 0,
+        z: data.rotationZ ?? 0
+      },
+      scale: data.scale ?? {
+        x: data.scaleX ?? 1,
+        y: data.scaleY ?? 1
+      },
+      anchor: data.anchor ?? 'center'
+    };
+  });
 
 export type Transform = z.infer<typeof TransformSchema>;
 
diff --git a/src/lib/schemas/size.ts b/src/lib/schemas/size.ts
index a7b4efa..2183d60 100644
--- a/src/lib/schemas/size.ts
+++ b/src/lib/schemas/size.ts
@@ -79,16 +79,21 @@ export const sizeMiddleware: PropertyMiddleware = (propName, value, currentValue
  * Automatically adjusts scaleY when scaleX changes (and vice versa) when proportions are locked
  */
 export const scaleMiddleware: PropertyMiddleware = (propName, value, currentValues) => {
-  const updates: Record<string, unknown> = { [propName]: value };
+  const updates: Record<string, unknown> = {};
   const props = currentValues.props;
 
-  if (props._scaleLocked && (propName === 'scaleX' || propName === 'scaleY')) {
+  // Handle nested property names (scale.x, scale.y)
+  if (props._scaleLocked && (propName === 'scale.x' || propName === 'scale.y')) {
     const ratio = (props._scaleRatio as number) || 1;
-    if (propName === 'scaleX') {
-      updates.scaleY = (value as number) / ratio;
+    if (propName === 'scale.x') {
+      updates['scale.x'] = value;
+      updates['scale.y'] = parseFloat(((value as number) / ratio).toFixed(2));
     } else {
-      updates.scaleX = (value as number) * ratio;
+      updates['scale.x'] = parseFloat(((value as number) * ratio).toFixed(2));
+      updates['scale.y'] = value;
     }
+  } else {
+    updates[propName] = value;
   }
 
   return updates;
diff --git a/src/lib/stores/project.svelte.ts b/src/lib/stores/project.svelte.ts
index aa702a0..fa4f61d 100644
--- a/src/lib/stores/project.svelte.ts
+++ b/src/lib/stores/project.svelte.ts
@@ -174,19 +174,14 @@ export class ProjectStore {
     const insertIndex = indices[0];
 
     // Create the group layer
-    const groupLayer: TypedLayer = {
+    const groupLayer: TypedLayer<'group'> = {
       id: groupId,
       name: 'Group',
       type: 'group',
       transform: {
-        x: 0,
-        y: 0,
-        z: 0,
-        rotationX: 0,
-        rotationY: 0,
-        rotationZ: 0,
-        scaleX: 1,
-        scaleY: 1,
+        position: { x: 0, y: 0, z: 0 },
+        rotation: { x: 0, y: 0, z: 0 },
+        scale: { x: 1, y: 1 },
         anchor: 'center'
       },
       style: { opacity: 1 },
@@ -234,14 +229,20 @@ export class ProjectStore {
             parentId: undefined,
             transform: {
               ...layer.transform,
-              x: layer.transform.x + gt.x,
-              y: layer.transform.y + gt.y,
-              z: layer.transform.z + gt.z,
-              rotationX: layer.transform.rotationX + gt.rotationX,
-              rotationY: layer.transform.rotationY + gt.rotationY,
-              rotationZ: layer.transform.rotationZ + gt.rotationZ,
-              scaleX: layer.transform.scaleX * gt.scaleX,
-              scaleY: layer.transform.scaleY * gt.scaleY
+              position: {
+                x: layer.transform.position.x + gt.position.x,
+                y: layer.transform.position.y + gt.position.y,
+                z: layer.transform.position.z + gt.position.z
+              },
+              rotation: {
+                x: layer.transform.rotation.x + gt.rotation.x,
+                y: layer.transform.rotation.y + gt.rotation.y,
+                z: layer.transform.rotation.z + gt.rotation.z
+              },
+              scale: {
+                x: layer.transform.scale.x * gt.scale.x,
+                y: layer.transform.scale.y * gt.scale.y
+              }
             },
             style: {
               ...layer.style,
@@ -312,9 +313,20 @@ export class ProjectStore {
         if (gt) {
           updated.transform = {
             ...l.transform,
-            x: l.transform.x + gt.x,
-            y: l.transform.y + gt.y,
-            z: l.transform.z + gt.z
+            position: {
+              x: l.transform.position.x + gt.position.x,
+              y: l.transform.position.y + gt.position.y,
+              z: l.transform.position.z + gt.position.z
+            },
+            rotation: {
+              x: l.transform.rotation.x + gt.rotation.x,
+              y: l.transform.rotation.y + gt.rotation.y,
+              z: l.transform.rotation.z + gt.rotation.z
+            },
+            scale: {
+              x: l.transform.scale.x + gt.scale.x,
+              y: l.transform.scale.y + gt.scale.y
+            }
           };
         }
         if (gs) {
@@ -510,9 +522,9 @@ export class ProjectStore {
       // Get the base position from the layer's transform if it's a position property
       let value = kf.value;
       if (kf.property === 'position.x' && typeof kf.value === 'number') {
-        value = layer.transform.x + kf.value;
+        value = layer.transform.position.x + kf.value;
       } else if (kf.property === 'position.y' && typeof kf.value === 'number') {
-        value = layer.transform.y + kf.value;
+        value = layer.transform.position.y + kf.value;
       }
 
       this.addKeyframe(layerId, {
diff --git a/src/lib/utils/interpolation-utils.ts b/src/lib/utils/interpolation-utils.ts
new file mode 100644
index 0000000..f36e1ed
--- /dev/null
+++ b/src/lib/utils/interpolation-utils.ts
@@ -0,0 +1,119 @@
+import type { AnimatableProperty, Interpolation, InterpolationFamily } from '$lib/types/animation';
+import { extractPropertyMetadata } from '$lib/layers/base';
+import { getLayerSchema } from '$lib/layers/registry';
+
+/**
+ * Type-safe interpolation labels - maps each family to its available strategies
+ */
+export type InterpolationLabels = {
+  [F in Interpolation['family']]: {
+    [K in Extract<Interpolation, { family: F }>['strategy']]: string;
+  };
+};
+
+export const interpolationLabels = {
+  continuous: {
+    linear: 'Linear',
+    'ease-in': 'Ease In',
+    'ease-out': 'Ease Out',
+    'ease-in-out': 'Ease In-Out'
+  },
+  discrete: {
+    'step-end': 'Step End',
+    'step-start': 'Step Start',
+    'step-mid': 'Step Mid'
+  },
+  quantized: {
+    integer: 'Integer',
+    'snap-grid': 'Snap Grid'
+  },
+  text: {
+    'char-reveal': 'Char Reveal',
+    'word-reveal': 'Word Reveal'
+  }
+} as const satisfies InterpolationLabels;
+
+/**
+ * Get supported interpolation families for a property based on layer schema
+ */
+export function getSupportedInterpolationFamilies(
+  layerType: string,
+  property: AnimatableProperty
+): InterpolationFamily[] {
+  // Extract property name from animatable property (e.g., "props.fontSize" -> "fontSize")
+  const propertyName = property.includes('.') ? property.split('.').pop()! : property;
+
+  // Get layer schema and extract metadata
+  const schema = getLayerSchema(layerType);
+  const metadata = extractPropertyMetadata(schema);
+
+  // Find metadata for this property
+  const fieldMeta = metadata.find((m) => m.name === propertyName);
+
+  if (!fieldMeta) {
+    // Default for built-in properties (position, scale, rotation, opacity)
+    return ['continuous'];
+  }
+
+  // Return supported families from metadata
+  const families = fieldMeta.interpolationFamily;
+  if (Array.isArray(families)) {
+    return families;
+  }
+  return [families];
+}
+
+/**
+ * Get available strategy options for a set of interpolation families
+ */
+export function getStrategyOptionsForFamilies(
+  families: InterpolationFamily[]
+): Array<{ family: InterpolationFamily; strategy: string; label: string }> {
+  const options: Array<{ family: InterpolationFamily; strategy: string; label: string }> = [];
+
+  for (const family of families) {
+    const familyLabels = interpolationLabels[family];
+    for (const [strategy, label] of Object.entries(familyLabels)) {
+      options.push({ family, strategy, label });
+    }
+  }
+
+  return options;
+}
+
+/**
+ * Get default interpolation for a property based on layer schema
+ */
+export function getDefaultInterpolationForProperty(
+  layerType: string,
+  property: AnimatableProperty
+): Interpolation {
+  const families = getSupportedInterpolationFamilies(layerType, property);
+  const primaryFamily = families[0];
+
+  // Return default strategy for the primary family
+  switch (primaryFamily) {
+    case 'continuous':
+      return { family: 'continuous', strategy: 'ease-in-out' };
+    case 'discrete':
+      return { family: 'discrete', strategy: 'step-end' };
+    case 'quantized':
+      return { family: 'quantized', strategy: 'integer' };
+    case 'text':
+      return { family: 'text', strategy: 'char-reveal' };
+    default:
+      return { family: 'continuous', strategy: 'ease-in-out' };
+  }
+}
+
+/**
+ * Check if an interpolation is valid for a property based on layer schema
+ */
+export function isInterpolationValid(
+  layerType: string,
+  property: AnimatableProperty,
+  interpolation: Interpolation
+): boolean {
+  const supportedFamilies = getSupportedInterpolationFamilies(layerType, property);
+  return supportedFamilies.includes(interpolation.family);
+}
diff --git a/src/lib/utils/property-names.ts b/src/lib/utils/property-names.ts
index 924ef01..a53c931 100644
--- a/src/lib/utils/property-names.ts
+++ b/src/lib/utils/property-names.ts
@@ -2,12 +2,12 @@
  * Unified property naming conventions for the animation editor.
  *
  * This module provides a single source of truth for mapping between:
- * - Transform object keys (x, y, z, rotationX, rotationY, rotationZ, scaleX, scaleY)
- * - AnimatableProperty strings (position.x, position.y, position.z, rotation.x, etc.)
+ * - Transform object keys (nested: rotation.x, scale.x)
+ * - AnimatableProperty strings (position.x, rotation.x, scale.x)
  * - Input IDs (transform.position.x, style.opacity, props.xxx)
  *
  * The naming convention:
- * - Transform: camelCase (x, y, z, rotationX, rotationY, rotationZ, scaleX, scaleY)
+ * - Transform: nested object (rotation: {x, y, z}, scale: {x, y})
  * - AnimatableProperty: dot-notation with category prefix (position.x, rotation.x, scale.x, opacity)
  * - Input IDs: dot-notation with group prefix (transform.position.x, style.opacity, props.xxx)
  * - Props: prefix with 'props.' (props.fontSize, props.fill, etc.)
@@ -15,126 +15,6 @@
 
 import type { AnimatableProperty } from '$lib/schemas/animation';
 
-// Re-export the type
-export type { AnimatableProperty };
-
-// ============================================
-// Transform categories (used to derive both keys)
-// ============================================
-
-const TRANSFORM_CATEGORIES = {
-  POSITION: 'position',
-  ROTATION: 'rotation',
-  SCALE: 'scale'
-} as const;
-
-// ============================================
-// Transform object keys (used in Transform type)
-// Derived from category + axis
-// ============================================
-
-export const TRANSFORM_KEYS = {
-  X: 'x',
-  Y: 'y',
-  Z: 'z',
-  ROTATION_X: 'rotationX',
-  ROTATION_Y: 'rotationY',
-  ROTATION_Z: 'rotationZ',
-  SCALE_X: 'scaleX',
-  SCALE_Y: 'scaleY'
-} as const;
-
-// ============================================
-// AnimatableProperty constants (canonical form)
-// Derived from category + axis
-// ============================================
-
-// Helper to build animatable property from category and axis
-function buildAnimatableProperty(
-  category: string,
-  axis: string
-): `position.${string}` | `rotation.${string}` | `scale.${string}` {
-  return `${category}.${axis}` as `position.${string}` | `rotation.${string}` | `scale.${string}`;
-}
-
-// Generate all animatable properties from transform keys
-function generateAnimatableProperties(): Record<string, AnimatableProperty> {
-  const props: Record<string, AnimatableProperty> = {};
-
-  // Position
-  props[TRANSFORM_KEYS.X] = buildAnimatableProperty(TRANSFORM_CATEGORIES.POSITION, 'x');
-  props[TRANSFORM_KEYS.Y] = buildAnimatableProperty(TRANSFORM_CATEGORIES.POSITION, 'y');
-  props[TRANSFORM_KEYS.Z] = buildAnimatableProperty(TRANSFORM_CATEGORIES.POSITION, 'z');
-
-  // Rotation
-  props[TRANSFORM_KEYS.ROTATION_X] = buildAnimatableProperty(TRANSFORM_CATEGORIES.ROTATION, 'x');
-  props[TRANSFORM_KEYS.ROTATION_Y] = buildAnimatableProperty(TRANSFORM_CATEGORIES.ROTATION, 'y');
-  props[TRANSFORM_KEYS.ROTATION_Z] = buildAnimatableProperty(TRANSFORM_CATEGORIES.ROTATION, 'z');
-
-  // Scale
-  props[TRANSFORM_KEYS.SCALE_X] = buildAnimatableProperty(TRANSFORM_CATEGORIES.SCALE, 'x');
-  props[TRANSFORM_KEYS.SCALE_Y] = buildAnimatableProperty(TRANSFORM_CATEGORIES.SCALE, 'y');
-
-  // Style properties
-  props['opacity'] = 'opacity';
-  props['color'] = 'color';
-
-  return props;
-}
-
-// Generate once at module load
-const _animatableProps = generateAnimatableProperties();
-
-// Export as constants (frozen)
-export const ANIMATABLE_PROPERTIES = {
-  POSITION_X: _animatableProps['x'],
-  POSITION_Y: _animatableProps['y'],
-  POSITION_Z: _animatableProps['z'],
-  ROTATION_X: _animatableProps['rotationX'],
-  ROTATION_Y: _animatableProps['rotationY'],
-  ROTATION_Z: _animatableProps['rotationZ'],
-  SCALE_X: _animatableProps['scaleX'],
-  SCALE_Y: _animatableProps['scaleY'],
-  OPACITY: 'opacity',
-  COLOR: 'color'
-} as const;
-
-// ============================================
-// Mapping: Transform key <-> AnimatableProperty
-// ============================================
-
-/**
- * Maps Transform object keys to AnimatableProperty strings
- */
-export const TRANSFORM_KEY_TO_PROPERTY: Record<string, AnimatableProperty> = {
-  [TRANSFORM_KEYS.X]: ANIMATABLE_PROPERTIES.POSITION_X,
-  [TRANSFORM_KEYS.Y]: ANIMATABLE_PROPERTIES.POSITION_Y,
-  [TRANSFORM_KEYS.Z]: ANIMATABLE_PROPERTIES.POSITION_Z,
-  [TRANSFORM_KEYS.ROTATION_X]: ANIMATABLE_PROPERTIES.ROTATION_X,
-  [TRANSFORM_KEYS.ROTATION_Y]: ANIMATABLE_PROPERTIES.ROTATION_Y,
-  [TRANSFORM_KEYS.ROTATION_Z]: ANIMATABLE_PROPERTIES.ROTATION_Z,
-  [TRANSFORM_KEYS.SCALE_X]: ANIMATABLE_PROPERTIES.SCALE_X,
-  [TRANSFORM_KEYS.SCALE_Y]: ANIMATABLE_PROPERTIES.SCALE_Y
-};
-
-/**
- * Maps AnimatableProperty strings to Transform object keys
- */
-export const PROPERTY_TO_TRANSFORM_KEY: Record<string, string> = {
-  [ANIMATABLE_PROPERTIES.POSITION_X]: TRANSFORM_KEYS.X,
-  [ANIMATABLE_PROPERTIES.POSITION_Y]: TRANSFORM_KEYS.Y,
-  [ANIMATABLE_PROPERTIES.POSITION_Z]: TRANSFORM_KEYS.Z,
-  [ANIMATABLE_PROPERTIES.ROTATION_X]: TRANSFORM_KEYS.ROTATION_X,
-  [ANIMATABLE_PROPERTIES.ROTATION_Y]: TRANSFORM_KEYS.ROTATION_Y,
-  [ANIMATABLE_PROPERTIES.ROTATION_Z]: TRANSFORM_KEYS.ROTATION_Z,
-  [ANIMATABLE_PROPERTIES.SCALE_X]: TRANSFORM_KEYS.SCALE_X,
-  [ANIMATABLE_PROPERTIES.SCALE_Y]: TRANSFORM_KEYS.SCALE_Y
-};
-
-// ============================================
-// Input ID helpers
-// ============================================
-
 /**
  * Get input ID for a transform property
  */
@@ -196,49 +76,3 @@ export function isTransformProperty(property: AnimatableProperty): boolean {
 export function isStyleProperty(property: AnimatableProperty): boolean {
   return property === 'opacity' || property === 'color';
 }
-
-/**
- * Check if a property is a custom props property
- */
-export function isPropsProperty(property: AnimatableProperty): boolean {
-  return property.startsWith('props.');
-}
-
-// ============================================
-// Property name utilities
-// ============================================
-
-/**
- * Get the simple property name without category prefix
- * e.g., 'position.x' -> 'x', 'props.fontSize' -> 'fontSize'
- */
-export function getPropertyBaseName(property: AnimatableProperty | string): string {
-  if (property.startsWith('props.')) {
-    return property.slice(6);
-  }
-  if (property.includes('.')) {
-    return property.split('.').pop() ?? property;
-  }
-  return property;
-}
-
-/**
- * Convert Transform key to AnimatableProperty
- */
-export function transformKeyToAnimatable(key: string): AnimatableProperty | undefined {
-  return TRANSFORM_KEY_TO_PROPERTY[key];
-}
-
-/**
- * Convert AnimatableProperty to Transform key
- */
-export function animatableToTransformKey(property: AnimatableProperty): string | undefined {
-  return PROPERTY_TO_TRANSFORM_KEY[property];
-}
-
-/**
- * Create a props AnimatableProperty from a property name
- */
-export function makePropsProperty(name: string): `props.${string}` {
-  return `props.${name}`;
-}
diff --git a/src/routes/(app)/p/[id]/+page.svelte b/src/routes/(app)/p/[id]/+page.svelte
index d1694c7..50d347f 100644
--- a/src/routes/(app)/p/[id]/+page.svelte
+++ b/src/routes/(app)/p/[id]/+page.svelte
@@ -5,6 +5,8 @@
   import { PUBLIC_BASE_URL } from '$env/static/public';
   import type { PageData } from './$types';
   import { getEditorState } from '$lib/contexts/editor.svelte';
+  import { ProjectSchema } from '$lib/types/animation';
+  import { toast } from 'svelte-sonner';
 
   let { data }: { data: PageData } = $props();
 
@@ -20,23 +22,28 @@
 
   // Load project data when route changes
   $effect(() => {
-    const projectData = data.project.data;
+    try {
+      const projectData = ProjectSchema.omit({ id: true }).parse(data.project.data);
 
-    editorState.project.loadProject({
-      id: data.project.id,
-      name: projectData.name,
-      width: projectData.width,
-      height: projectData.height,
-      duration: projectData.duration,
-      fps: projectData.fps,
-      background: projectData.background,
-      layers: projectData.layers,
-      fontFamily: projectData.fontFamily
-    });
+      editorState.project.loadProject({
+        id: data.project.id,
+        name: projectData.name,
+        width: projectData.width,
+        height: projectData.height,
+        duration: projectData.duration,
+        fps: projectData.fps,
+        background: projectData.background,
+        layers: projectData.layers,
+        fontFamily: projectData.fontFamily
+      });
 
-    editorState.setDbContext(data.project.id, data.isOwner, data.canEdit, data.project.isPublic);
+      editorState.setDbContext(data.project.id, data.isOwner, data.canEdit, data.project.isPublic);
 
-    editorState.isMcp = data.project.isMcp;
+      editorState.isMcp = data.project.isMcp;
+    } catch (error) {
+      console.error('Failed to load project data:', error);
+      toast.error('Failed to load project data');
+    }
   });
 </script>
 

From cd5602fcaddc8ecf1405aa8232315bb9570c1dc6 Mon Sep 17 00:00:00 2001
From: EmaDev <pavanello.emanuele@gmail.com>
Date: Sun, 15 Feb 2026 23:52:23 +0100
Subject: [PATCH 3/5] fixes

---
 src/lib/ai/system-prompt.ts                   |  2 +-
 .../components/editor/keyframe-card.svelte    |  5 ++-
 ...t-propery.svelte => input-property.svelte} |  0
 .../editor/panels/properties-panel.svelte     | 34 +++++++++----------
 src/lib/engine/interpolation.ts               | 11 +-----
 src/lib/layers/LayerWrapper.svelte            | 10 ++++--
 src/lib/stores/project.svelte.ts              |  4 +--
 7 files changed, 30 insertions(+), 36 deletions(-)
 rename src/lib/components/editor/panels/{input-propery.svelte => input-property.svelte} (100%)

diff --git a/src/lib/ai/system-prompt.ts b/src/lib/ai/system-prompt.ts
index 9207800..45a116c 100644
--- a/src/lib/ai/system-prompt.ts
+++ b/src/lib/ai/system-prompt.ts
@@ -30,7 +30,7 @@ export function buildSystemPrompt(project: Project): string {
 
 - **Position**: x, y (horizontal/vertical), z (depth)
 - **Scale**: x, y (independent or use matching values for proportional scaling)
-- **Rotation**: rotation (Z-axis in degrees), rotationX, rotationY (3D rotation in degrees)
+- **Rotation**: rotation (Z-axis in radians), rotationX, rotationY (3D rotation in radians)
 - **Anchor**: Set anchor point (top-left, top-center, top-right, center-left, center, center-right, bottom-left, bottom-center, bottom-right) to control which point of the layer is positioned at the transform coordinates
 
 ## Keyframe Management
diff --git a/src/lib/components/editor/keyframe-card.svelte b/src/lib/components/editor/keyframe-card.svelte
index 7031e3c..fcf69bc 100644
--- a/src/lib/components/editor/keyframe-card.svelte
+++ b/src/lib/components/editor/keyframe-card.svelte
@@ -19,8 +19,7 @@
   } from '$lib/utils/property-names';
   import {
     getStrategyOptionsForFamilies,
-    getSupportedInterpolationFamilies,
-    getDefaultInterpolationForProperty
+    getSupportedInterpolationFamilies
   } from '$lib/utils/interpolation-utils';
   import Select from '../ui/select/select.svelte';
   const editorState = $derived(getEditorState());
@@ -88,9 +87,9 @@
   }
 
   function getPropertyIcon(property: AnimatableProperty) {
-    if (isTransformProperty(property)) return Move;
     if (property.startsWith('rotation.')) return RotateCw;
     if (property.startsWith('scale.')) return Scale;
+    if (isTransformProperty(property)) return Move;
     if (isStyleProperty(property)) return Eye;
     if (property === 'color') return Palette;
     return Move;
diff --git a/src/lib/components/editor/panels/input-propery.svelte b/src/lib/components/editor/panels/input-property.svelte
similarity index 100%
rename from src/lib/components/editor/panels/input-propery.svelte
rename to src/lib/components/editor/panels/input-property.svelte
diff --git a/src/lib/components/editor/panels/properties-panel.svelte b/src/lib/components/editor/panels/properties-panel.svelte
index c5ffa3b..2f5e9e6 100644
--- a/src/lib/components/editor/panels/properties-panel.svelte
+++ b/src/lib/components/editor/panels/properties-panel.svelte
@@ -45,7 +45,7 @@
   import { SvelteSet } from 'svelte/reactivity';
   import PropertiesGroup from './properties-group.svelte';
   import InputsWrapper from './inputs-wrapper.svelte';
-  import InputPropery from './input-propery.svelte';
+  import InputProperty from './input-property.svelte';
   import LayerKeyframes from './layer-keyframes.svelte';
   import type { TypedLayer } from '$lib/layers/typed-registry';
   import { Select } from '$lib/components/ui/select';
@@ -116,9 +116,11 @@
 
     return {
       transform: {
-        x: animatedTransform.position.x ?? selectedLayer.transform.position.x,
-        y: animatedTransform.position.y ?? selectedLayer.transform.position.y,
-        z: animatedTransform.position.z ?? selectedLayer.transform.position.z,
+        position: {
+          x: animatedTransform.position.x ?? selectedLayer.transform.position.x,
+          y: animatedTransform.position.y ?? selectedLayer.transform.position.y,
+          z: animatedTransform.position.z ?? selectedLayer.transform.position.z
+        },
         rotation: {
           x: animatedTransform.rotation.x ?? selectedLayer.transform.rotation.x,
           y: animatedTransform.rotation.y ?? selectedLayer.transform.rotation.y,
@@ -186,7 +188,6 @@
     return propertyName as AnimatableProperty; // style: 'opacity'
   }
 
-
   /**
    * Helper to update an animatable property - handles keyframe logic.
    * If the property has keyframes, updates/creates keyframe at current time.
@@ -254,7 +255,6 @@
     value: unknown,
     target: 'transform' | 'props' | 'style'
   ) {
-    console.log('updateProperty', propertyName, value, target);
     if (!selectedLayer) return;
 
     if (target === 'props' && layerDefinition?.middleware && currentValues) {
@@ -316,9 +316,9 @@
     if (!selectedLayer || !currentValues) return;
 
     const propertyValueMap: Record<string, number> = {
-      'position.x': currentValues.transform.x,
-      'position.y': currentValues.transform.y,
-      'position.z': currentValues.transform.z,
+      'position.x': currentValues.transform.position.x,
+      'position.y': currentValues.transform.position.y,
+      'position.z': currentValues.transform.position.z,
       'rotation.x': currentValues.transform.rotation.x,
       'rotation.y': currentValues.transform.rotation.y,
       'rotation.z': currentValues.transform.rotation.z,
@@ -504,9 +504,9 @@
           {#snippet prefix()}
             <Label class="text-xs text-muted-foreground">Position</Label>
             <ScrubXyz
-              valueX={currentValues?.transform.x ?? 0}
-              valueY={currentValues?.transform.y ?? 0}
-              valueZ={currentValues?.transform.z ?? 0}
+              valueX={currentValues?.transform.position.x ?? 0}
+              valueY={currentValues?.transform.position.y ?? 0}
+              valueZ={currentValues?.transform.position.z ?? 0}
               stepXY={1}
               stepZ={1}
               onchangeX={(v: number) => updateProperty('position.x', v, 'transform')}
@@ -517,18 +517,18 @@
 
           <ScrubInput
             id="transform.position.x"
-            value={currentValues?.transform.x ?? 0}
+            value={currentValues?.transform.position.x ?? 0}
             onchange={(v) => updateProperty('position.x', v, 'transform')}
           />
 
           <ScrubInput
             id="transform.position.y"
-            value={currentValues?.transform.y ?? 0}
+            value={currentValues?.transform.position.y ?? 0}
             onchange={(v) => updateProperty('position.y', v, 'transform')}
           />
           <ScrubInput
             id="transform.position.z"
-            value={currentValues?.transform.z ?? 0}
+            value={currentValues?.transform.position.z ?? 0}
             onchange={(v) => updateProperty('position.z', v, 'transform')}
           />
         </InputsWrapper>
@@ -724,7 +724,7 @@
                 {/snippet}
 
                 {#each item.fields as field (field.name)}
-                  <InputPropery
+                  <InputProperty
                     metadata={field}
                     value={currentValues?.props[field.name]}
                     onUpdateProp={(name, v) => updateProperty(name, v, 'props')}
@@ -739,7 +739,7 @@
                 property={`props.${item.field.name}`}
                 {addKeyframe}
               >
-                <InputPropery
+                <InputProperty
                   metadata={item.field}
                   value={currentValues?.props[item.field.name]}
                   onUpdateProp={(name, v) => updateProperty(name, v, 'props')}
diff --git a/src/lib/engine/interpolation.ts b/src/lib/engine/interpolation.ts
index b614278..ce293a3 100644
--- a/src/lib/engine/interpolation.ts
+++ b/src/lib/engine/interpolation.ts
@@ -4,10 +4,7 @@
 import BezierEasing from 'bezier-easing';
 import type { Interpolation, Keyframe, AnimatableProperty } from '$lib/types/animation';
 import type { PropertyMetadata } from '$lib/layers/base';
-import type {
-  
-  ContinuousInterpolationStrategy
-} from '$lib/schemas/animation';
+import type { ContinuousInterpolationStrategy } from '$lib/schemas/animation';
 
 /**
  * Main interpolation function - dispatches to family-specific interpolators
@@ -19,24 +16,18 @@ export function interpolateValue(
   interpolation?: Interpolation
 ): unknown {
   if (!interpolation) {
-    console.warn('No interpolation provided, using end value');
     return endValue;
   }
   switch (interpolation.family) {
     case 'continuous':
       return interpolateContinuous(startValue, endValue, progress, interpolation.strategy);
-
     case 'discrete':
       return interpolateDiscrete(startValue, endValue, progress, interpolation.strategy);
-
     case 'quantized':
       return interpolateQuantized(startValue, endValue, progress, interpolation);
-
     case 'text':
       return interpolateText(startValue, endValue, progress, interpolation);
-
     default:
-      console.warn('Unknown interpolation family:', interpolation);
       return progress >= 1 ? endValue : startValue;
   }
 }
diff --git a/src/lib/layers/LayerWrapper.svelte b/src/lib/layers/LayerWrapper.svelte
index 418caa8..26fc461 100644
--- a/src/lib/layers/LayerWrapper.svelte
+++ b/src/lib/layers/LayerWrapper.svelte
@@ -5,6 +5,7 @@
   import { nanoid } from 'nanoid';
   import type { Component } from 'svelte';
   import { BRAND_COLORS } from '$lib/constants/branding';
+  import type { Transform } from '$lib/schemas/base';
 
   const editorState = $derived(getEditorState());
   const projectStore = $derived(editorState.project);
@@ -191,10 +192,13 @@
 
       // Update base transform if either property is not animated
       if (!hasXKeyframes || !hasYKeyframes) {
-        const newTransform = {
+        const newTransform: Transform = {
           ...layer.transform,
-          x: hasXKeyframes ? layer.transform.position.x : layer.transform.position.x + movementX,
-          y: hasYKeyframes ? layer.transform.position.y : layer.transform.position.y + movementY
+          position: {
+            ...layer.transform.position,
+            x: hasXKeyframes ? layer.transform.position.x : layer.transform.position.x + movementX,
+            y: hasYKeyframes ? layer.transform.position.y : layer.transform.position.y + movementY
+          }
         };
         projectStore.updateLayer(id, { transform: newTransform });
       }
diff --git a/src/lib/stores/project.svelte.ts b/src/lib/stores/project.svelte.ts
index fa4f61d..8fd7488 100644
--- a/src/lib/stores/project.svelte.ts
+++ b/src/lib/stores/project.svelte.ts
@@ -324,8 +324,8 @@ export class ProjectStore {
               z: l.transform.rotation.z + gt.rotation.z
             },
             scale: {
-              x: l.transform.scale.x + gt.scale.x,
-              y: l.transform.scale.y + gt.scale.y
+              x: l.transform.scale.x * gt.scale.x,
+              y: l.transform.scale.y * gt.scale.y
             }
           };
         }

From 6e00029778b4e310bd20ae9ce4fc462527237427 Mon Sep 17 00:00:00 2001
From: EmaDev <pavanello.emanuele@gmail.com>
Date: Mon, 16 Feb 2026 00:07:49 +0100
Subject: [PATCH 4/5] fix

---
 src/lib/ai/mutations.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/ai/mutations.ts b/src/lib/ai/mutations.ts
index df59830..b48a04d 100644
--- a/src/lib/ai/mutations.ts
+++ b/src/lib/ai/mutations.ts
@@ -301,7 +301,7 @@ export function mutateEditLayer(ctx: MutationContext, input: EditLayerInput): Ed
     }
 
     if (input.updates.transform) {
-      layer.transform = input.updates.transform;
+      layer.transform = { ...layer.transform, ...input.updates.transform };
     }
 
     // Handle anchor point

From ffbf58f132247c3037e25f6517136a5f4450e68d Mon Sep 17 00:00:00 2001
From: EmaDev <pavanello.emanuele@gmail.com>
Date: Mon, 16 Feb 2026 00:21:02 +0100
Subject: [PATCH 5/5] fix

---
 src/lib/ai/system-prompt.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/lib/ai/system-prompt.ts b/src/lib/ai/system-prompt.ts
index 45a116c..0f8fd24 100644
--- a/src/lib/ai/system-prompt.ts
+++ b/src/lib/ai/system-prompt.ts
@@ -28,9 +28,9 @@ export function buildSystemPrompt(project: Project): string {
 
 ## Transform Capabilities
 
-- **Position**: x, y (horizontal/vertical), z (depth)
-- **Scale**: x, y (independent or use matching values for proportional scaling)
-- **Rotation**: rotation (Z-axis in radians), rotationX, rotationY (3D rotation in radians)
+- **Position**: position.x, position.y (horizontal/vertical), position.z (depth)
+- **Scale**: scale.x, scale.y (independent or use matching values for proportional scaling)
+- **Rotation**: rotation.z (Z-axis in radians), rotation.x, rotation.y (3D rotation in radians)
 - **Anchor**: Set anchor point (top-left, top-center, top-right, center-left, center, center-right, bottom-left, bottom-center, bottom-right) to control which point of the layer is positioned at the transform coordinates
 
 ## Keyframe Management