diff --git a/.gitignore b/.gitignore
index c0e6322..03aee31 100644
--- a/.gitignore
+++ b/.gitignore
@@ -27,4 +27,5 @@ src/lib/paraglide
 
 # AI Debug Logs
 logs/
-.vscode/chrome/
\ No newline at end of file
+.vscode/chrome/
+demo.json
diff --git a/src/lib/ai/models.ts b/src/lib/ai/models.ts
index 6676364..76f866d 100644
--- a/src/lib/ai/models.ts
+++ b/src/lib/ai/models.ts
@@ -37,20 +37,32 @@ export const AI_MODELS = {
       input: 0.3,
       output: 1.2
     }
-  }
+  },
   // // Kimi K2.5 - Excellent for creative tasks, long context
-  // 'moonshotai/kimi-k2.5': {
-  //   id: 'moonshotai/kimi-k2.5',
-  //   name: 'Kimi K2.5',
-  //   provider: 'Moonshot AI',
-  //   description: 'Excellent for creative and complex tasks with 128K context',
-  //   recommended: true,
-  //   costTier: 'low',
-  //   pricing: {
-  //     input: 0.5,
-  //     output: 2.8
-  //   }
-  // }
+  'moonshotai/kimi-k2.5': {
+    id: 'moonshotai/kimi-k2.5',
+    name: 'Kimi K2.5',
+    provider: 'Moonshot AI',
+    description: 'Excellent for creative and complex tasks with 128K context',
+    recommended: true,
+    costTier: 'low',
+    pricing: {
+      input: 0.5,
+      output: 2.8
+    }
+  },
+  'x-ai/grok-4.1-fast': {
+    id: 'x-ai/grok-4.1-fast',
+    name: 'Grok 4.1 Fast',
+    provider: 'X AI',
+    description: 'Excellent for creative and complex tasks with 128K context',
+    recommended: true,
+    costTier: 'low',
+    pricing: {
+      input: 0.2,
+      output: 0.5
+    }
+  }
 
   // // Claude 4.5 Sonnet - Great reasoning and creativity
   // 'anthropic/claude-sonnet-4.5': {
@@ -98,7 +110,7 @@ export type ModelId = keyof typeof AI_MODELS;
 /**
  * Default model to use
  */
-export const DEFAULT_MODEL_ID: ModelId = 'minimax/minimax-m2.5';
+export const DEFAULT_MODEL_ID: ModelId = 'x-ai/grok-4.1-fast';
 
 /**
  * Get model by ID with fallback to default
diff --git a/src/lib/ai/mutations.ts b/src/lib/ai/mutations.ts
index b48a04d..223e03e 100644
--- a/src/lib/ai/mutations.ts
+++ b/src/lib/ai/mutations.ts
@@ -35,6 +35,7 @@ import type {
   RemoveKeyframeOutput
 } from './schemas';
 import type { Layer, ProjectData } from '$lib/schemas/animation';
+import { defaultLayerStyle, defaultTransform } from '$lib/schemas/base';
 
 /**
  * Context for resolving layer IDs (e.g. "layer_0" -> "actual-uuid")
@@ -436,13 +437,8 @@ export function mutateGroupLayers(
       id: groupId,
       name: input.name ?? 'Group',
       type: 'group' as const,
-      transform: {
-        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 },
+      transform: defaultTransform(),
+      style: defaultLayerStyle(),
       visible: true,
       locked: false,
       keyframes: [],
diff --git a/src/lib/components/editor/panels/add-layer.svelte b/src/lib/components/editor/panels/add-layer.svelte
index 0cbc288..7fb6289 100644
--- a/src/lib/components/editor/panels/add-layer.svelte
+++ b/src/lib/components/editor/panels/add-layer.svelte
@@ -10,18 +10,14 @@
   import type { LayerCategory } from '$lib/layers/base';
   import { SvelteMap } from 'svelte/reactivity';
   import type { Component } from 'svelte';
+  import { defaultTransform } from '$lib/schemas/base';
 
   const editorState = $derived(getEditorState());
   const projectStore = $derived(editorState.project);
 
   function addLayer(type: LiteralUnion<LayerTypeString, string>) {
     const layer = createLayer(type, {
-      transform: {
-        position: { x: 0, y: 0, z: 0 },
-        rotation: { x: 0, y: 0, z: 0 },
-        scale: { x: 1, y: 1 },
-        anchor: 'center'
-      },
+      transform: defaultTransform(),
       projectDimensions: {
         width: projectStore.state.width,
         height: projectStore.state.height
diff --git a/src/lib/components/editor/panels/input-property.svelte b/src/lib/components/editor/panels/input-property.svelte
index 52ba6d2..5252381 100644
--- a/src/lib/components/editor/panels/input-property.svelte
+++ b/src/lib/components/editor/panels/input-property.svelte
@@ -16,12 +16,15 @@
     metadata,
     value,
     layer,
-    onUpdateProp
+    onUpdateProp,
+    targetPath = 'props'
   }: {
     metadata: PropertyMetadata;
     value: unknown;
     layer: TypedLayer;
     onUpdateProp: (prop: string, value: unknown) => void;
+    /** The path prefix for the property (e.g., 'props' or 'style') */
+    targetPath?: 'transform' | 'props' | 'style';
   } = $props();
 </script>
 
@@ -66,7 +69,7 @@
   />
 {:else if metadata.meta?.widget === 'textarea'}
   <Textarea
-    id={`props.${metadata.name}`}
+    id={`${targetPath}.${metadata.name}`}
     value={typeof value === 'string' ? value : ''}
     oninput={(e) => onUpdateProp(metadata.name, e.currentTarget.value)}
     spellcheck="false"
@@ -78,7 +81,7 @@
   />
 {:else if metadata.meta?.widget === 'color'}
   <Input
-    id={`props.${metadata.name}`}
+    id={`${targetPath}.${metadata.name}`}
     type="color"
     value={typeof value === 'string' ? value : '#000000'}
     oninput={(e) => onUpdateProp(metadata.name, e.currentTarget.value)}
@@ -89,7 +92,7 @@
   <Component {value} onChange={(newValue) => onUpdateProp(metadata.name, newValue)} {layer} />
 {:else if metadata.type === 'number'}
   <ScrubInput
-    id={`props.${metadata.name}`}
+    id={`${targetPath}.${metadata.name}`}
     value={typeof value === 'number' ? value : 0}
     min={metadata.min}
     max={metadata.max}
@@ -99,7 +102,7 @@
 {:else if metadata.type === 'boolean'}
   <label class="flex items-center gap-2">
     <input
-      id={`props.${metadata.name}`}
+      id={`${targetPath}.${metadata.name}`}
       type="checkbox"
       checked={typeof value === 'boolean' ? value : false}
       onchange={(e) => onUpdateProp(metadata.name, e.currentTarget.checked)}
@@ -109,7 +112,7 @@
   </label>
 {:else if metadata.type === 'select' && metadata.options}
   <select
-    id={`props.${metadata.name}`}
+    id={`${targetPath}.${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 +124,7 @@
 {:else}
   <!-- Default to text input for strings and unknown types -->
   <Input
-    id={`props.${metadata.name}`}
+    id={`${targetPath}.${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/properties-group.svelte b/src/lib/components/editor/panels/properties-group.svelte
index 1fef668..94f846b 100644
--- a/src/lib/components/editor/panels/properties-group.svelte
+++ b/src/lib/components/editor/panels/properties-group.svelte
@@ -1,15 +1,37 @@
 <script lang="ts">
   import Label from '$lib/components/ui/label/label.svelte';
+  import { ChevronRight } from '@lucide/svelte';
   import type { Snippet } from 'svelte';
 
-  const { label, children }: { label: string | Snippet; children: Snippet } = $props();
+  let {
+    label,
+    children,
+    defaultOpen = false
+  }: { label: string | Snippet; children: Snippet; defaultOpen?: boolean } = $props();
+
+  let isOpen = $derived(defaultOpen);
 </script>
 
 <div class="space-y-3">
-  {#if typeof label === 'string'}
-    <Label class="font-semibold">{label}</Label>
-  {:else}
-    {@render label()}
+  <button
+    type="button"
+    class="flex w-full items-center gap-1.5 text-left transition-colors hover:text-foreground"
+    onclick={() => (isOpen = !isOpen)}
+  >
+    <ChevronRight
+      class="h-3.5 w-3.5 shrink-0 transition-transform duration-200"
+      style="transform: rotate({isOpen ? 90 : 0}deg)"
+    />
+    {#if typeof label === 'string'}
+      <Label class="pointer-events-none cursor-pointer font-semibold">{label}</Label>
+    {:else}
+      {@render label()}
+    {/if}
+  </button>
+
+  {#if isOpen}
+    <div class="space-y-3">
+      {@render children()}
+    </div>
   {/if}
-  {@render children()}
 </div>
diff --git a/src/lib/components/editor/panels/properties-panel.svelte b/src/lib/components/editor/panels/properties-panel.svelte
index d7c66a4..1bfc43c 100644
--- a/src/lib/components/editor/panels/properties-panel.svelte
+++ b/src/lib/components/editor/panels/properties-panel.svelte
@@ -2,55 +2,31 @@
   import { getEditorState } from '$lib/contexts/editor.svelte';
   import { Label } from '$lib/components/ui/label';
   import { Input } from '$lib/components/ui/input';
-  import { Button } from '$lib/components/ui/button';
   import { Separator } from '$lib/components/ui/separator';
-  import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
-  import {
-    ArrowUpLeft,
-    ArrowUp,
-    ArrowUpRight,
-    ArrowLeft,
-    Locate,
-    ArrowRight,
-    ArrowDownLeft,
-    ArrowDown,
-    ArrowDownRight,
-    ChevronDown,
-    Sparkles,
-    Link,
-    Unlink
-  } from '@lucide/svelte';
   import { nanoid } from 'nanoid';
-  import type {
-    AnimatableProperty,
-    Transform,
-    LayerStyle,
-    AnchorPoint
-  } from '$lib/types/animation';
+  import type { AnimatableProperty, LayerStyle } from '$lib/types/animation';
   import {
     getAnimatedTransform,
     getAnimatedStyle,
     getAnimatedProps
   } from '$lib/engine/interpolation';
-  import { getLayerDefinition, getLayerSchema } from '$lib/layers/registry';
+  import { getLayerSchema } from '$lib/layers/registry';
   import { extractPropertyMetadata } from '$lib/layers/base';
-  import { animationPresets } from '$lib/engine/presets';
-  import InputWrapper from './input-wrapper.svelte';
-
-  import ScrubXyz from './scrub-xyz.svelte';
-  import ScrubInput from './scrub-input.svelte';
-
-  import { SvelteSet } from 'svelte/reactivity';
   import PropertiesGroup from './properties-group.svelte';
-  import InputsWrapper from './inputs-wrapper.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';
   import { scaleMiddleware } from '$lib/schemas/size';
   import { isProjectLayer, mapProjectLayerPropsToProject } from '$lib/layers/project-layer';
   import type { Layer } from '$lib/schemas/animation';
   import { getDefaultInterpolationForProperty } from '$lib/utils/interpolation-utils';
+  import { defaultLayerStyle, defaultTransform } from '$lib/schemas/base';
+
+  // Property group components
+  import TimeRangeGroup from './properties/groups/time-range-group.svelte';
+  import TransformGroup from './properties/groups/transform-group.svelte';
+  import StyleGroup from './properties/groups/style-group.svelte';
+  import AnimationPresetsGroup from './properties/groups/animation-presets-group.svelte';
+  import KeyframesGroup from './properties/groups/keyframes-group.svelte';
+  import LayerPropertiesGroup from './properties/groups/layer-properties-group.svelte';
 
   const editorState = $derived(getEditorState());
   const projectStore = $derived(editorState.project);
@@ -66,48 +42,6 @@
     return extractPropertyMetadata(schema);
   });
 
-  const layerDefinition = $derived.by(() => {
-    if (!selectedLayer) return null;
-    return getLayerDefinition(selectedLayer.type);
-  });
-
-  const layerCustomPropertyComponents = $derived.by(() => {
-    if (!selectedLayer || !layerDefinition) return [];
-    return Object.entries(layerDefinition.customPropertyComponents ?? {});
-  });
-
-  // Pre-compute property rendering layout: groups + ungrouped fields
-  const propertyLayout = $derived.by(() => {
-    if (!layerPropertyMetadata.length) return { items: [] };
-    const groups = layerDefinition?.propertyGroups ?? [];
-    const renderedGroupIds = new SvelteSet<string>();
-    const items: Array<
-      | { kind: 'field'; field: (typeof layerPropertyMetadata)[number] }
-      | {
-          kind: 'group';
-          group: (typeof groups)[number];
-          fields: typeof layerPropertyMetadata;
-        }
-    > = [];
-
-    for (const meta of layerPropertyMetadata) {
-      if (meta.meta?.hidden) continue;
-      const groupId = meta.meta?.group;
-      if (groupId) {
-        if (renderedGroupIds.has(groupId)) continue;
-        renderedGroupIds.add(groupId);
-        const group = groups.find((g) => g.id === groupId);
-        if (group) {
-          const groupFields = layerPropertyMetadata.filter((m) => m.meta?.group === groupId);
-          items.push({ kind: 'group', group, fields: groupFields });
-          continue;
-        }
-      }
-      items.push({ kind: 'field', field: meta });
-    }
-    return { items };
-  });
-
   // Unified current values: transform + style + props (animated when keyframes exist)
   const currentValues = $derived.by((): Pick<Layer, 'transform' | 'style' | 'props'> | null => {
     if (!selectedLayer) return null;
@@ -115,24 +49,8 @@
     // For the project settings layer, there are no keyframes, so just use static props
     if (isProjectSettings) {
       return {
-        transform: {
-          position: {
-            x: 0,
-            y: 0,
-            z: 0
-          },
-          rotation: {
-            x: 0,
-            y: 0,
-            z: 0
-          },
-          scale: {
-            x: 1,
-            y: 1
-          },
-          anchor: 'center'
-        },
-        style: { opacity: 1 },
+        transform: defaultTransform(),
+        style: defaultLayerStyle(),
         props: { ...selectedLayer.props }
       };
     }
@@ -162,7 +80,16 @@
         }
       },
       style: {
-        opacity: animatedStyle.opacity ?? selectedLayer.style.opacity
+        opacity: animatedStyle.opacity ?? selectedLayer.style.opacity,
+        blur: animatedStyle.blur ?? selectedLayer.style.blur ?? 0,
+        brightness: animatedStyle.brightness ?? selectedLayer.style.brightness ?? 1,
+        contrast: animatedStyle.contrast ?? selectedLayer.style.contrast ?? 1,
+        saturate: animatedStyle.saturate ?? selectedLayer.style.saturate ?? 1,
+        dropShadowX: animatedStyle.dropShadowX ?? selectedLayer.style.dropShadowX ?? 0,
+        dropShadowY: animatedStyle.dropShadowY ?? selectedLayer.style.dropShadowY ?? 0,
+        dropShadowBlur: animatedStyle.dropShadowBlur ?? selectedLayer.style.dropShadowBlur ?? 0,
+        dropShadowColor:
+          animatedStyle.dropShadowColor ?? selectedLayer.style.dropShadowColor ?? 'transparent'
       },
       props: getAnimatedProps(
         selectedLayer.keyframes,
@@ -173,30 +100,6 @@
     };
   });
 
-  const anchorOptions: { value: AnchorPoint; label: string; icon: typeof ArrowUpLeft }[] = [
-    { value: 'top-left', label: 'Top Left', icon: ArrowUpLeft },
-    { value: 'top-center', label: 'Top Center', icon: ArrowUp },
-    { value: 'top-right', label: 'Top Right', icon: ArrowUpRight },
-    { value: 'center-left', label: 'Center Left', icon: ArrowLeft },
-    { value: 'center', label: 'Center', icon: Locate },
-    { value: 'center-right', label: 'Center Right', icon: ArrowRight },
-    { value: 'bottom-left', label: 'Bottom Left', icon: ArrowDownLeft },
-    { value: 'bottom-center', label: 'Bottom Center', icon: ArrowDown },
-    { value: 'bottom-right', label: 'Bottom Right', icon: ArrowDownRight }
-  ];
-
-  const currentAnchorLabel = $derived.by(() => {
-    if (!selectedLayer) return 'Center';
-    const option = anchorOptions.find((opt) => opt.value === selectedLayer.transform.anchor);
-    return option?.label || 'Center';
-  });
-
-  function updateAnchor(anchor: AnchorPoint) {
-    if (!selectedLayer) return;
-    const newTransform: Transform = { ...selectedLayer.transform, anchor };
-    projectStore.updateLayer(selectedLayer.id, { transform: newTransform });
-  }
-
   function updateLayerProperty<K extends keyof Pick<TypedLayer, 'name'>>(
     property: K,
     value: TypedLayer[K]
@@ -299,24 +202,6 @@
       return;
     }
 
-    if (target === 'props' && layerDefinition?.middleware && currentValues) {
-      // Run middleware for props - may return multiple updates
-      const updates = layerDefinition.middleware(propertyName, value, {
-        transform: { ...selectedLayer.transform, ...currentValues.transform },
-        style: { ...selectedLayer.style, ...currentValues.style },
-        props: currentValues.props
-      });
-
-      for (const [prop, val] of Object.entries(updates)) {
-        const animatable = mapToAnimatable('props', prop);
-        updateAnimatableValue(selectedLayer, animatable, val as number | string | boolean, () => {
-          const newProps = { ...selectedLayer.props, [prop]: val };
-          projectStore.updateLayer(selectedLayer.id, { props: newProps });
-        });
-      }
-      return;
-    }
-
     const animatable = mapToAnimatable(target, propertyName);
 
     if (target === 'transform' && currentValues) {
@@ -357,7 +242,7 @@
   function addKeyframe(property: AnimatableProperty) {
     if (!selectedLayer || !currentValues) return;
 
-    const propertyValueMap: Record<string, number> = {
+    const propertyValueMap: Record<string, number | string> = {
       'position.x': currentValues.transform.position.x,
       'position.y': currentValues.transform.position.y,
       'position.z': currentValues.transform.position.z,
@@ -366,7 +251,15 @@
       'rotation.z': currentValues.transform.rotation.z,
       'scale.x': currentValues.transform.scale.x,
       'scale.y': currentValues.transform.scale.y,
-      opacity: currentValues.style.opacity
+      opacity: currentValues.style.opacity,
+      blur: currentValues.style.blur,
+      brightness: currentValues.style.brightness,
+      contrast: currentValues.style.contrast,
+      saturate: currentValues.style.saturate,
+      dropShadowX: currentValues.style.dropShadowX,
+      dropShadowY: currentValues.style.dropShadowY,
+      dropShadowBlur: currentValues.style.dropShadowBlur,
+      dropShadowColor: currentValues.style.dropShadowColor
     };
 
     let currentValue: number | string | boolean;
@@ -384,20 +277,7 @@
     updateAnimatableValue(selectedLayer, property, currentValue);
   }
 
-  // Preset application state
-  let selectedPresetId = $state<string>('');
-  let presetDuration = $state<number>(1);
-
-  function applyPreset() {
-    if (!selectedLayer || !selectedPresetId) return;
-
-    const startTime = projectStore.currentTime;
-    projectStore.applyPreset(selectedLayer.id, selectedPresetId, startTime, presetDuration);
-
-    // Reset selection after applying
-    selectedPresetId = '';
-    presetDuration = 1;
-  }
+  const hasLayerProperties = $derived(layerPropertyMetadata.length > 0);
 </script>
 
 <div
@@ -420,10 +300,10 @@
       {#if !isProjectSettings}
         <Separator />
 
-        <!-- Enter/Exit Time -->
+        <!-- Time Range -->
         <PropertiesGroup>
           {#snippet label()}
-            <div class="flex items-center justify-between">
+            <div class="flex w-full items-center justify-between">
               <Label class="font-semibold">Time Range</Label>
               {#if selectedLayer.contentDuration !== undefined}
                 {@const contentDuration = selectedLayer.contentDuration}
@@ -435,382 +315,40 @@
               {/if}
             </div>
           {/snippet}
-          <div class="grid grid-cols-2 gap-2">
-            <div class="space-y-1">
-              <Label class="text-xs text-muted-foreground">Enter (s)</Label>
-              <ScrubInput
-                id="enter-time"
-                value={selectedLayer.enterTime ?? 0}
-                min={0}
-                max={selectedLayer.contentDuration !== undefined
-                  ? Math.min(
-                      projectStore.state.duration,
-                      projectStore.state.duration -
-                        (selectedLayer.contentDuration - (selectedLayer.contentOffset ?? 0))
-                    )
-                  : projectStore.state.duration}
-                step={0.1}
-                onchange={(v) => projectStore.setLayerEnterTime(selectedLayer.id, v)}
-              />
-            </div>
-            <div class="space-y-1">
-              <Label class="text-xs text-muted-foreground">Exit (s)</Label>
-              <ScrubInput
-                id="exit-time"
-                value={selectedLayer.exitTime ?? projectStore.state.duration}
-                min={0}
-                max={projectStore.state.duration}
-                step={0.1}
-                onchange={(v) => projectStore.setLayerExitTime(selectedLayer.id, v)}
-              />
-            </div>
-          </div>
-
-          <!-- Content offset control for time-based layers -->
-          <!-- TODO: manage like audio/video middleware -->
-          {#if selectedLayer.type === 'video' || selectedLayer.type === 'audio'}
-            {@const contentDuration = selectedLayer.contentDuration ?? 0}
-            {@const contentOffset = selectedLayer.contentOffset ?? 0}
-            {@const hasDuration = contentDuration > 0}
-            <div class="space-y-2">
-              <div class="flex items-center justify-between">
-                <Label class="text-xs text-muted-foreground">Content Trim</Label>
-                {#if hasDuration}
-                  <span class="text-[10px] text-muted-foreground/60">
-                    Duration: {contentDuration.toFixed(1)}s
-                  </span>
-                {/if}
-              </div>
-              <div class="space-y-1">
-                <Label class="text-[10px] text-muted-foreground">Start offset (s)</Label>
-                <ScrubInput
-                  id="content-offset"
-                  value={contentOffset}
-                  min={0}
-                  max={hasDuration ? contentDuration - 0.1 : undefined}
-                  step={0.1}
-                  onchange={(v) => {
-                    const clamped = hasDuration
-                      ? Math.min(v, contentDuration - 0.1)
-                      : Math.max(0, v);
-                    projectStore.updateLayer(selectedLayer.id, { contentOffset: clamped });
-
-                    // Auto-adjust exitTime if it would exceed available content
-                    if (hasDuration && selectedLayer.exitTime !== undefined) {
-                      const enterTime = selectedLayer.enterTime ?? 0;
-                      const maxVisibleDuration = contentDuration - clamped;
-                      const maxExitTime = enterTime + maxVisibleDuration;
-                      if (selectedLayer.exitTime > maxExitTime) {
-                        projectStore.setLayerExitTime(selectedLayer.id, maxExitTime);
-                      }
-                    }
-                  }}
-                />
-                <p class="text-[10px] text-muted-foreground/70">
-                  Where to start playing in the source media
-                </p>
-              </div>
-              {#if !hasDuration && selectedLayer.props.src}
-                <p class="text-[10px] text-muted-foreground/70">
-                  Upload a new file to detect duration
-                </p>
-              {/if}
-              <Button
-                variant="outline"
-                size="sm"
-                class="w-full text-xs"
-                onclick={() => projectStore.splitLayer(selectedLayer.id)}
-              >
-                Split at Playhead
-              </Button>
-            </div>
-          {/if}
+          <TimeRangeGroup layer={selectedLayer} />
         </PropertiesGroup>
 
         <Separator />
 
         <!-- Transform -->
         <PropertiesGroup label="Transform">
-          <!-- Position -->
-          <!-- TODO: manage like groups -->
-          <InputsWrapper
-            fields={[
-              { 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) => ({
-              for: f.id,
-              labels: f.label,
-              property: f.prop,
-              addKeyframe: addKeyframe,
-              hasKeyframes: selectedLayer?.keyframes.some((k) => k.property === f.prop)
-            }))}
-          >
-            {#snippet prefix()}
-              <Label class="text-xs text-muted-foreground">Position</Label>
-              <ScrubXyz
-                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')}
-                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.position.x ?? 0}
-              onchange={(v) => updateProperty('position.x', v, 'transform')}
-            />
-
-            <ScrubInput
-              id="transform.position.y"
-              value={currentValues?.transform.position.y ?? 0}
-              onchange={(v) => updateProperty('position.y', v, 'transform')}
-            />
-            <ScrubInput
-              id="transform.position.z"
-              value={currentValues?.transform.position.z ?? 0}
-              onchange={(v) => updateProperty('position.z', v, 'transform')}
-            />
-          </InputsWrapper>
-
-          <!-- Rotation -->
-          <InputsWrapper
-            fields={[
-              { 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) => ({
-              for: f.id,
-              labels: f.label,
-              property: f.prop,
-              addKeyframe: addKeyframe,
-              hasKeyframes: selectedLayer?.keyframes.some((k) => k.property === f.prop)
-            }))}
-          >
-            {#snippet prefix()}
-              <Label class="text-xs text-muted-foreground">Rotation</Label>
-              <ScrubXyz
-                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('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.rotation.x ?? 0}
-              step={0.1}
-              onchange={(v) => updateProperty('rotation.x', v, 'transform')}
-            />
-            <ScrubInput
-              id="transform.rotation.y"
-              value={currentValues?.transform.rotation.y ?? 0}
-              step={0.1}
-              onchange={(v) => updateProperty('rotation.y', v, 'transform')}
-            />
-            <ScrubInput
-              id="transform.rotation.z"
-              value={currentValues?.transform.rotation.z ?? 0}
-              step={0.1}
-              onchange={(v) => updateProperty('rotation.z', v, 'transform')}
-            />
-          </InputsWrapper>
-
-          <!-- Scale -->
-          {@const scaleLocked = selectedLayer?.props._scaleLocked ?? false}
-          {@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' },
-              { prop: 'scale.y' as AnimatableProperty, label: 'Y', id: 'transform.scale.y' }
-            ].map((f) => ({
-              for: f.id,
-              labels: f.label,
-              property: f.prop,
-              addKeyframe: addKeyframe,
-              hasKeyframes: selectedLayer?.keyframes.some((k) => k.property === f.prop)
-            }))}
-          >
-            {#snippet prefix()}
-              <Label class="text-xs text-muted-foreground">Scale</Label>
-              <ScrubXyz
-                valueX={currentScaleX}
-                valueY={currentScaleY}
-                valueZ={0}
-                stepXY={0.1}
-                stepZ={0.1}
-                onchangeX={(v: number) => updateProperty('scale.x', v || 1, 'transform')}
-                onchangeY={(v: number) => updateProperty('scale.y', v || 1, 'transform')}
-                onchangeZ={() => {}}
-              />
-              <Button
-                variant="ghost"
-                size="sm"
-                class="ml-auto h-6 px-2 text-xs"
-                title={scaleLocked ? 'Unlock proportions' : 'Lock proportions'}
-                onclick={() => {
-                  const newLocked = !scaleLocked;
-                  const ratio = currentScaleX / currentScaleY;
-                  const newProps = {
-                    ...selectedLayer.props,
-                    _scaleLocked: newLocked,
-                    _scaleRatio: ratio
-                  };
-                  projectStore.updateLayer(selectedLayer.id, { props: newProps });
-                }}
-              >
-                {#if scaleLocked}
-                  <Link class="size-3" />
-                {:else}
-                  <Unlink class="size-3" />
-                {/if}
-              </Button>
-            {/snippet}
-            <ScrubInput
-              id="transform.scale.x"
-              value={currentScaleX}
-              step={0.1}
-              onchange={(v) => updateProperty('scale.x', v || 1, 'transform')}
-            />
-            <ScrubInput
-              id="transform.scale.y"
-              value={currentScaleY}
-              step={0.1}
-              onchange={(v) => updateProperty('scale.y', v || 1, 'transform')}
-            />
-          </InputsWrapper>
-
-          <!-- Anchor Point -->
-          <InputWrapper for="anchor-point" label="Anchor Point">
-            <DropdownMenu.Root>
-              <DropdownMenu.Trigger>
-                {#snippet child({ props })}
-                  <Button variant="outline" class="w-full justify-between" {...props}>
-                    {currentAnchorLabel}
-                    <ChevronDown class="ml-2 h-4 w-4 opacity-50" />
-                  </Button>
-                {/snippet}
-              </DropdownMenu.Trigger>
-              <DropdownMenu.Content class="w-56" align="end">
-                <div class="grid grid-cols-3 gap-0">
-                  {#each anchorOptions as option (option.value)}
-                    {@const isSelected = selectedLayer?.transform.anchor === option.value}
-                    {@const Icon = option.icon}
-                    <DropdownMenu.Item onclick={() => updateAnchor(option.value)}>
-                      {#snippet child({ props })}
-                        <Button variant={isSelected ? 'outline' : 'ghost'} icon={Icon} {...props} />
-                      {/snippet}
-                    </DropdownMenu.Item>
-                  {/each}
-                </div>
-              </DropdownMenu.Content>
-            </DropdownMenu.Root>
-          </InputWrapper>
+          {#if currentValues}
+            <TransformGroup layer={selectedLayer} {currentValues} {updateProperty} {addKeyframe} />
+          {/if}
         </PropertiesGroup>
 
         <Separator />
 
         <!-- Style -->
         <PropertiesGroup label="Style">
-          <InputWrapper for="style.opacity" label="Opacity" property="opacity" {addKeyframe}>
-            <ScrubInput
-              id="style.opacity"
-              value={currentValues?.style.opacity ?? 1}
-              step={0.1}
-              min={0}
-              max={1}
-              onchange={(v) => updateProperty('opacity', v || 0, 'style')}
-            />
-          </InputWrapper>
+          {#if currentValues}
+            <StyleGroup {currentValues} layer={selectedLayer} {updateProperty} {addKeyframe} />
+          {/if}
         </PropertiesGroup>
       {/if}
 
       <!-- Layer-specific properties (dynamic based on schema) -->
-      {#if propertyLayout.items.length > 0}
+      {#if hasLayerProperties}
         <Separator />
         <PropertiesGroup label={isProjectSettings ? 'Project Properties' : 'Layer Properties'}>
-          {#each propertyLayout.items as item (item.kind === 'group' ? `group:${item.group.id}` : `field:${item.field.name}`)}
-            {#if item.kind === 'group'}
-              <InputsWrapper
-                fields={item.fields.map((field) => ({
-                  for: `props.${field.name}`,
-                  labels: field.description || field.name,
-
-                  ...(isProjectSettings
-                    ? {
-                        property: undefined,
-                        addKeyframe: undefined,
-                        hasKeyframes: false
-                      }
-                    : {
-                        property: `props.${field.name}` as AnimatableProperty,
-                        addKeyframe,
-                        hasKeyframes: selectedLayer.keyframes.some(
-                          (k) => k.property === `props.${field.name}`
-                        )
-                      })
-                }))}
-              >
-                {#snippet prefix()}
-                  <Label class="text-xs text-muted-foreground">{item.group.label}</Label>
-                  {#if item.group.widget && currentValues}
-                    {@const groupValues = Object.fromEntries(
-                      item.fields.map((f) => [f.name, currentValues.props[f.name]])
-                    )}
-                    {@const Widget = item.group.widget}
-                    <Widget
-                      layer={selectedLayer}
-                      groupId={item.group.id}
-                      currentValues={groupValues}
-                      onUpdate={(prop, val) => updateProperty(prop, val, 'props')}
-                    />
-                  {/if}
-                {/snippet}
-
-                {#each item.fields as field (field.name)}
-                  <InputProperty
-                    metadata={field}
-                    value={currentValues?.props[field.name]}
-                    onUpdateProp={(name, v) => updateProperty(name, v, 'props')}
-                    layer={selectedLayer}
-                  />
-                {/each}
-              </InputsWrapper>
-            {:else}
-              <InputWrapper
-                for={`props.${item.field.name}`}
-                label={item.field.description || item.field.name}
-                {...isProjectSettings
-                  ? { property: undefined, addKeyframe: undefined }
-                  : { property: `props.${item.field.name}`, addKeyframe }}
-              >
-                <InputProperty
-                  metadata={item.field}
-                  value={currentValues?.props[item.field.name]}
-                  onUpdateProp={(name, v) => updateProperty(name, v, 'props')}
-                  layer={selectedLayer}
-                />
-              </InputWrapper>
-            {/if}
-          {/each}
-          {#each layerCustomPropertyComponents as [name, { component: CustomPropertyComponent }] (name)}
-            <CustomPropertyComponent
+          {#if currentValues}
+            <LayerPropertiesGroup
               layer={selectedLayer}
-              onUpdateProp={(name, v) => updateProperty(name, v, 'props')}
+              {currentValues}
+              {updateProperty}
               {addKeyframe}
             />
-          {/each}
+          {/if}
         </PropertiesGroup>
       {/if}
 
@@ -819,48 +357,14 @@
 
         <!-- Animation Presets -->
         <PropertiesGroup label="Animation Presets">
-          <InputsWrapper
-            fields={[
-              {
-                for: 'animation-presets',
-                labels: 'Animation'
-              },
-              {
-                for: 'preset-duration',
-                labels: 'Duration (s)'
-              }
-            ]}
-          >
-            <Select
-              bind:value={selectedPresetId}
-              options={animationPresets.map((preset) => ({ label: preset.name, value: preset.id }))}
-              trigger={{ class: 'w-full' }}
-            />
-            <ScrubInput
-              id="preset-duration"
-              value={presetDuration}
-              min={0.1}
-              step={0.1}
-              onchange={(v) => (presetDuration = v)}
-            />
-          </InputsWrapper>
-
-          <Button
-            variant="default"
-            class="w-full"
-            onclick={applyPreset}
-            disabled={!selectedPresetId}
-          >
-            <Sparkles class="mr-2 h-4 w-4" />
-            Apply Preset
-          </Button>
+          <AnimationPresetsGroup layer={selectedLayer} />
         </PropertiesGroup>
 
         <Separator />
 
         <!-- Keyframes -->
         <PropertiesGroup label={`Keyframes (${selectedLayer.keyframes.length})`}>
-          <LayerKeyframes layer={selectedLayer} />
+          <KeyframesGroup layer={selectedLayer} />
         </PropertiesGroup>
       {/if}
     </div>
diff --git a/src/lib/components/editor/panels/properties/groups/animation-presets-group.svelte b/src/lib/components/editor/panels/properties/groups/animation-presets-group.svelte
new file mode 100644
index 0000000..393839b
--- /dev/null
+++ b/src/lib/components/editor/panels/properties/groups/animation-presets-group.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+  import { Button } from '$lib/components/ui/button';
+  import { Select } from '$lib/components/ui/select';
+  import { Sparkles } from '@lucide/svelte';
+  import { animationPresets } from '$lib/engine/presets';
+  import { getEditorState } from '$lib/contexts/editor.svelte';
+  import ScrubInput from '../../scrub-input.svelte';
+  import InputsWrapper from '../../inputs-wrapper.svelte';
+  import type { TypedLayer } from '$lib/layers/typed-registry';
+
+  const { layer }: { layer: TypedLayer } = $props();
+
+  const editorState = $derived(getEditorState());
+  const projectStore = $derived(editorState.project);
+
+  let selectedPresetId = $state<string>('');
+  let presetDuration = $state<number>(1);
+
+  function applyPreset() {
+    if (!selectedPresetId) return;
+
+    const startTime = projectStore.currentTime;
+    projectStore.applyPreset(layer.id, selectedPresetId, startTime, presetDuration);
+
+    // Reset selection after applying
+    selectedPresetId = '';
+    presetDuration = 1;
+  }
+</script>
+
+<InputsWrapper
+  fields={[
+    {
+      for: 'animation-presets',
+      labels: 'Animation'
+    },
+    {
+      for: 'preset-duration',
+      labels: 'Duration (s)'
+    }
+  ]}
+>
+  <Select
+    bind:value={selectedPresetId}
+    options={animationPresets.map((preset) => ({ label: preset.name, value: preset.id }))}
+    trigger={{ class: 'w-full' }}
+  />
+  <ScrubInput
+    id="preset-duration"
+    value={presetDuration}
+    min={0.1}
+    step={0.1}
+    onchange={(v) => (presetDuration = v)}
+  />
+</InputsWrapper>
+
+<Button variant="default" class="w-full" onclick={applyPreset} disabled={!selectedPresetId}>
+  <Sparkles class="mr-2 h-4 w-4" />
+  Apply Preset
+</Button>
diff --git a/src/lib/components/editor/panels/properties/groups/keyframes-group.svelte b/src/lib/components/editor/panels/properties/groups/keyframes-group.svelte
new file mode 100644
index 0000000..f7fca2c
--- /dev/null
+++ b/src/lib/components/editor/panels/properties/groups/keyframes-group.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+  import type { TypedLayer } from '$lib/layers/typed-registry';
+  import LayerKeyframes from '../../layer-keyframes.svelte';
+
+  const { layer }: { layer: TypedLayer } = $props();
+</script>
+
+<LayerKeyframes {layer} />
diff --git a/src/lib/components/editor/panels/properties/groups/layer-properties-group.svelte b/src/lib/components/editor/panels/properties/groups/layer-properties-group.svelte
new file mode 100644
index 0000000..d002dfd
--- /dev/null
+++ b/src/lib/components/editor/panels/properties/groups/layer-properties-group.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { getLayerDefinition, getLayerSchema } from '$lib/layers/registry';
+  import { extractPropertyMetadata } from '$lib/layers/base';
+  import { isProjectLayer } from '$lib/layers/project-layer';
+  import type { PropertyGroupProps } from './types';
+  import PropertyGroupRenderer from './property-group-renderer.svelte';
+
+  const {
+    layer,
+    currentValues,
+    updateProperty,
+    addKeyframe
+  }: PropertyGroupProps & { isProjectSettings?: boolean } = $props();
+
+  const isProjectSettings = $derived(isProjectLayer(layer.id));
+
+  // Extract property metadata from the layer's Zod schema
+  const layerPropertyMetadata = $derived.by(() => {
+    const schema = getLayerSchema(layer.type);
+    return extractPropertyMetadata(schema);
+  });
+
+  const layerDefinition = $derived.by(() => {
+    return getLayerDefinition(layer.type);
+  });
+</script>
+
+<PropertyGroupRenderer
+  {layer}
+  {currentValues}
+  {updateProperty}
+  {addKeyframe}
+  propertyMetadata={layerPropertyMetadata}
+  propertyGroups={layerDefinition?.propertyGroups}
+  targetPath="props"
+  showKeyframes={!isProjectSettings}
+  customPropertyComponents={layerDefinition.customPropertyComponents}
+/>
diff --git a/src/lib/components/editor/panels/properties/groups/property-group-renderer.svelte b/src/lib/components/editor/panels/properties/groups/property-group-renderer.svelte
new file mode 100644
index 0000000..f7d2816
--- /dev/null
+++ b/src/lib/components/editor/panels/properties/groups/property-group-renderer.svelte
@@ -0,0 +1,151 @@
+<script lang="ts">
+  import { Label } from '$lib/components/ui/label';
+  import InputsWrapper from '../../inputs-wrapper.svelte';
+  import InputWrapper from '../../input-wrapper.svelte';
+  import InputProperty from '../../input-property.svelte';
+  import { SvelteSet } from 'svelte/reactivity';
+  import type { AnimatableProperty } from '$lib/schemas/animation';
+  import type { PropertyGroupProps } from './types';
+  import type { CustomPropertyComponents, PropertyGroup } from '$lib/layers/registry';
+  import type { PropertyMetadata } from '$lib/layers/base';
+
+  interface PropertyGroupRendererProps extends PropertyGroupProps {
+    /** Extracted property metadata from Zod schema */
+    propertyMetadata: PropertyMetadata[];
+    /** Property groups (optional) */
+    propertyGroups?: PropertyGroup[];
+    /** Target path for property updates ('props' | 'style' | 'transform') */
+    targetPath: 'props' | 'style' | 'transform';
+    /** Whether to show keyframe controls (disabled for project settings) */
+    showKeyframes?: boolean;
+    /** Optional custom property components */
+    customPropertyComponents?: CustomPropertyComponents;
+  }
+
+  const {
+    layer,
+    currentValues,
+    updateProperty,
+    addKeyframe,
+    propertyMetadata,
+    propertyGroups = [],
+    targetPath,
+    showKeyframes = true,
+    customPropertyComponents = {}
+  }: PropertyGroupRendererProps = $props();
+
+  // Pre-compute property rendering layout: groups + ungrouped fields
+  const propertyLayout = $derived.by(() => {
+    if (!propertyMetadata.length) return { items: [] };
+    const renderedGroupIds = new SvelteSet<string>();
+    const items: Array<
+      | { kind: 'field'; field: (typeof propertyMetadata)[number] }
+      | {
+          kind: 'group';
+          group: (typeof propertyGroups)[number];
+          fields: typeof propertyMetadata;
+        }
+    > = [];
+
+    for (const meta of propertyMetadata) {
+      if (meta.meta?.hidden) continue;
+      const groupId = meta.meta?.group;
+      if (groupId) {
+        if (renderedGroupIds.has(groupId)) continue;
+        renderedGroupIds.add(groupId);
+        const group = propertyGroups.find((g) => g.id === groupId);
+        if (group) {
+          const groupFields = propertyMetadata.filter((m) => m.meta?.group === groupId);
+          items.push({ kind: 'group', group, fields: groupFields });
+          continue;
+        }
+      }
+      items.push({ kind: 'field', field: meta });
+    }
+    return { items };
+  });
+
+  // Helper to get current value from the target path
+  const getCurrentValue = (fieldName: string) => {
+    const target = currentValues?.[targetPath];
+    return (target as Record<string, unknown>)?.[fieldName];
+  };
+
+  const customComponents = $derived.by(() => {
+    if (!customPropertyComponents) return [];
+    return Object.entries(customPropertyComponents);
+  });
+</script>
+
+{#each propertyLayout.items as item (item.kind === 'group' ? `group:${item.group.id}` : `field:${item.field.name}`)}
+  {#if item.kind === 'group'}
+    <InputsWrapper
+      fields={item.fields.map((field) => ({
+        for: `${targetPath}.${field.name}`,
+        labels: field.description || field.name,
+        ...(showKeyframes
+          ? {
+              property: `${targetPath}.${field.name}` as AnimatableProperty,
+              addKeyframe,
+              hasKeyframes: layer.keyframes.some(
+                (k) => k.property === `${targetPath}.${field.name}`
+              )
+            }
+          : {
+              property: undefined,
+              addKeyframe: undefined,
+              hasKeyframes: false
+            })
+      }))}
+    >
+      {#snippet prefix()}
+        <Label class="text-xs text-muted-foreground">{item.group.label}</Label>
+        {#if item.group.widget && currentValues}
+          {@const groupValues = Object.fromEntries(
+            item.fields.map((f) => [f.name, getCurrentValue(f.name)])
+          )}
+          {@const Widget = item.group.widget}
+          <Widget
+            {layer}
+            groupId={item.group.id}
+            currentValues={groupValues}
+            onUpdate={(prop, val) => updateProperty(prop, val, targetPath)}
+          />
+        {/if}
+      {/snippet}
+
+      {#each item.fields as field (field.name)}
+        <InputProperty
+          metadata={field}
+          value={getCurrentValue(field.name)}
+          onUpdateProp={(name, v) => updateProperty(name, v, targetPath)}
+          {layer}
+          {targetPath}
+        />
+      {/each}
+    </InputsWrapper>
+  {:else}
+    <InputWrapper
+      for={`${targetPath}.${item.field.name}`}
+      label={item.field.description || item.field.name}
+      {...showKeyframes
+        ? { property: `${targetPath}.${item.field.name}`, addKeyframe }
+        : { property: undefined, addKeyframe: undefined }}
+    >
+      <InputProperty
+        metadata={item.field}
+        value={getCurrentValue(item.field.name)}
+        onUpdateProp={(name, v) => updateProperty(name, v, targetPath)}
+        {layer}
+        {targetPath}
+      />
+    </InputWrapper>
+  {/if}
+{/each}
+{#each customComponents as [name, { component: CustomPropertyComponent }] (name)}
+  <CustomPropertyComponent
+    {layer}
+    onUpdateProp={(name, v) => updateProperty(name, v, targetPath)}
+    {addKeyframe}
+  />
+{/each}
diff --git a/src/lib/components/editor/panels/properties/groups/style-group.svelte b/src/lib/components/editor/panels/properties/groups/style-group.svelte
new file mode 100644
index 0000000..233e446
--- /dev/null
+++ b/src/lib/components/editor/panels/properties/groups/style-group.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  import type { PropertyGroupProps } from './types';
+  import { extractPropertyMetadata } from '$lib/layers/base';
+  import { LayerStyleSchema, stylePropertyGroups } from '$lib/schemas/base';
+  import PropertyGroupRenderer from './property-group-renderer.svelte';
+
+  const { currentValues, updateProperty, addKeyframe, layer }: PropertyGroupProps = $props();
+
+  const stylePropertyMetadata = $derived.by(() => {
+    return extractPropertyMetadata(LayerStyleSchema);
+  });
+</script>
+
+<PropertyGroupRenderer
+  {layer}
+  {currentValues}
+  {updateProperty}
+  {addKeyframe}
+  propertyMetadata={stylePropertyMetadata}
+  propertyGroups={stylePropertyGroups}
+  targetPath="style"
+/>
diff --git a/src/lib/components/editor/panels/properties/groups/time-range-group.svelte b/src/lib/components/editor/panels/properties/groups/time-range-group.svelte
new file mode 100644
index 0000000..8d86386
--- /dev/null
+++ b/src/lib/components/editor/panels/properties/groups/time-range-group.svelte
@@ -0,0 +1,95 @@
+<script lang="ts">
+  import { Label } from '$lib/components/ui/label';
+  import { Button } from '$lib/components/ui/button';
+  import ScrubInput from '../../scrub-input.svelte';
+  import { getEditorState } from '$lib/contexts/editor.svelte';
+  import type { TypedLayer } from '$lib/layers/typed-registry';
+
+  const { layer }: { layer: TypedLayer } = $props();
+
+  const editorState = $derived(getEditorState());
+  const projectStore = $derived(editorState.project);
+</script>
+
+<div class="grid grid-cols-2 gap-2">
+  <div class="space-y-1">
+    <Label class="text-xs text-muted-foreground">Enter (s)</Label>
+    <ScrubInput
+      id="enter-time"
+      value={layer.enterTime ?? 0}
+      min={0}
+      max={layer.contentDuration !== undefined
+        ? Math.min(
+            projectStore.state.duration,
+            projectStore.state.duration - (layer.contentDuration - (layer.contentOffset ?? 0))
+          )
+        : projectStore.state.duration}
+      step={0.1}
+      onchange={(v) => projectStore.setLayerEnterTime(layer.id, v)}
+    />
+  </div>
+  <div class="space-y-1">
+    <Label class="text-xs text-muted-foreground">Exit (s)</Label>
+    <ScrubInput
+      id="exit-time"
+      value={layer.exitTime ?? projectStore.state.duration}
+      min={0}
+      max={projectStore.state.duration}
+      step={0.1}
+      onchange={(v) => projectStore.setLayerExitTime(layer.id, v)}
+    />
+  </div>
+</div>
+
+<!-- Content offset control for time-based layers -->
+{#if layer.type === 'video' || layer.type === 'audio'}
+  {@const contentDuration = layer.contentDuration ?? 0}
+  {@const contentOffset = layer.contentOffset ?? 0}
+  {@const hasDuration = contentDuration > 0}
+  <div class="space-y-2">
+    <div class="flex items-center justify-between">
+      <Label class="text-xs text-muted-foreground">Content Trim</Label>
+      {#if hasDuration}
+        <span class="text-[10px] text-muted-foreground/60">
+          Duration: {contentDuration.toFixed(1)}s
+        </span>
+      {/if}
+    </div>
+    <div class="space-y-1">
+      <Label class="text-[10px] text-muted-foreground">Start offset (s)</Label>
+      <ScrubInput
+        id="content-offset"
+        value={contentOffset}
+        min={0}
+        max={hasDuration ? contentDuration - 0.1 : undefined}
+        step={0.1}
+        onchange={(v) => {
+          const clamped = hasDuration ? Math.min(v, contentDuration - 0.1) : Math.max(0, v);
+          projectStore.updateLayer(layer.id, { contentOffset: clamped });
+
+          // Auto-adjust exitTime if it would exceed available content
+          if (hasDuration && layer.exitTime !== undefined) {
+            const enterTime = layer.enterTime ?? 0;
+            const maxVisibleDuration = contentDuration - clamped;
+            const maxExitTime = enterTime + maxVisibleDuration;
+            if (layer.exitTime > maxExitTime) {
+              projectStore.setLayerExitTime(layer.id, maxExitTime);
+            }
+          }
+        }}
+      />
+      <p class="text-[10px] text-muted-foreground/70">Where to start playing in the source media</p>
+    </div>
+    {#if !hasDuration && layer.props.src}
+      <p class="text-[10px] text-muted-foreground/70">Upload a new file to detect duration</p>
+    {/if}
+    <Button
+      variant="outline"
+      size="sm"
+      class="w-full text-xs"
+      onclick={() => projectStore.splitLayer(layer.id)}
+    >
+      Split at Playhead
+    </Button>
+  </div>
+{/if}
diff --git a/src/lib/components/editor/panels/properties/groups/transform-group.svelte b/src/lib/components/editor/panels/properties/groups/transform-group.svelte
new file mode 100644
index 0000000..822f486
--- /dev/null
+++ b/src/lib/components/editor/panels/properties/groups/transform-group.svelte
@@ -0,0 +1,240 @@
+<script lang="ts">
+  import { Label } from '$lib/components/ui/label';
+  import { Button } from '$lib/components/ui/button';
+  import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
+  import {
+    ArrowUpLeft,
+    ArrowUp,
+    ArrowUpRight,
+    ArrowLeft,
+    Locate,
+    ArrowRight,
+    ArrowDownLeft,
+    ArrowDown,
+    ArrowDownRight,
+    ChevronDown,
+    Link,
+    Unlink
+  } from '@lucide/svelte';
+  import type { AnchorPoint, AnimatableProperty, Transform } from '$lib/schemas/animation';
+  import ScrubXyz from '../../scrub-xyz.svelte';
+  import ScrubInput from '../../scrub-input.svelte';
+  import InputsWrapper from '../../inputs-wrapper.svelte';
+  import InputWrapper from '../../input-wrapper.svelte';
+  import { getEditorState } from '$lib/contexts/editor.svelte';
+  import type { PropertyGroupProps } from './types';
+
+  const { layer, currentValues, updateProperty, addKeyframe }: PropertyGroupProps = $props();
+
+  const editorState = $derived(getEditorState());
+  const projectStore = $derived(editorState.project);
+
+  const anchorOptions: { value: AnchorPoint; label: string; icon: typeof ArrowUpLeft }[] = [
+    { value: 'top-left', label: 'Top Left', icon: ArrowUpLeft },
+    { value: 'top-center', label: 'Top Center', icon: ArrowUp },
+    { value: 'top-right', label: 'Top Right', icon: ArrowUpRight },
+    { value: 'center-left', label: 'Center Left', icon: ArrowLeft },
+    { value: 'center', label: 'Center', icon: Locate },
+    { value: 'center-right', label: 'Center Right', icon: ArrowRight },
+    { value: 'bottom-left', label: 'Bottom Left', icon: ArrowDownLeft },
+    { value: 'bottom-center', label: 'Bottom Center', icon: ArrowDown },
+    { value: 'bottom-right', label: 'Bottom Right', icon: ArrowDownRight }
+  ];
+
+  const currentAnchorLabel = $derived.by(() => {
+    const option = anchorOptions.find((opt) => opt.value === layer.transform.anchor);
+    return option?.label || 'Center';
+  });
+
+  function updateAnchor(anchor: AnchorPoint) {
+    const newTransform: Transform = { ...layer.transform, anchor };
+    projectStore.updateLayer(layer.id, { transform: newTransform });
+  }
+
+  const scaleLocked = $derived(layer.props._scaleLocked ?? false);
+  const currentScaleX = $derived(currentValues?.transform.scale.x ?? 1);
+  const currentScaleY = $derived(currentValues?.transform.scale.y ?? 1);
+</script>
+
+<!-- Position -->
+<InputsWrapper
+  fields={[
+    { 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) => ({
+    for: f.id,
+    labels: f.label,
+    property: f.prop,
+    addKeyframe: addKeyframe,
+    hasKeyframes: layer.keyframes.some((k) => k.property === f.prop)
+  }))}
+>
+  {#snippet prefix()}
+    <Label class="text-xs text-muted-foreground">Position</Label>
+    <ScrubXyz
+      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')}
+      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.position.x ?? 0}
+    onchange={(v) => updateProperty('position.x', v, 'transform')}
+  />
+
+  <ScrubInput
+    id="transform.position.y"
+    value={currentValues?.transform.position.y ?? 0}
+    onchange={(v) => updateProperty('position.y', v, 'transform')}
+  />
+  <ScrubInput
+    id="transform.position.z"
+    value={currentValues?.transform.position.z ?? 0}
+    onchange={(v) => updateProperty('position.z', v, 'transform')}
+  />
+</InputsWrapper>
+
+<!-- Rotation -->
+<InputsWrapper
+  fields={[
+    { 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) => ({
+    for: f.id,
+    labels: f.label,
+    property: f.prop,
+    addKeyframe: addKeyframe,
+    hasKeyframes: layer.keyframes.some((k) => k.property === f.prop)
+  }))}
+>
+  {#snippet prefix()}
+    <Label class="text-xs text-muted-foreground">Rotation</Label>
+    <ScrubXyz
+      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('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.rotation.x ?? 0}
+    step={0.1}
+    onchange={(v) => updateProperty('rotation.x', v, 'transform')}
+  />
+  <ScrubInput
+    id="transform.rotation.y"
+    value={currentValues?.transform.rotation.y ?? 0}
+    step={0.1}
+    onchange={(v) => updateProperty('rotation.y', v, 'transform')}
+  />
+  <ScrubInput
+    id="transform.rotation.z"
+    value={currentValues?.transform.rotation.z ?? 0}
+    step={0.1}
+    onchange={(v) => updateProperty('rotation.z', v, 'transform')}
+  />
+</InputsWrapper>
+
+<!-- Scale -->
+<InputsWrapper
+  fields={[
+    { prop: 'scale.x' as AnimatableProperty, label: 'X', id: 'transform.scale.x' },
+    { prop: 'scale.y' as AnimatableProperty, label: 'Y', id: 'transform.scale.y' }
+  ].map((f) => ({
+    for: f.id,
+    labels: f.label,
+    property: f.prop,
+    addKeyframe: addKeyframe,
+    hasKeyframes: layer.keyframes.some((k) => k.property === f.prop)
+  }))}
+>
+  {#snippet prefix()}
+    <Label class="text-xs text-muted-foreground">Scale</Label>
+    <ScrubXyz
+      valueX={currentScaleX}
+      valueY={currentScaleY}
+      valueZ={0}
+      stepXY={0.1}
+      stepZ={0.1}
+      onchangeX={(v: number) => updateProperty('scale.x', v || 1, 'transform')}
+      onchangeY={(v: number) => updateProperty('scale.y', v || 1, 'transform')}
+      onchangeZ={() => {}}
+    />
+    <Button
+      variant="ghost"
+      size="sm"
+      class="ml-auto h-6 px-2 text-xs"
+      title={scaleLocked ? 'Unlock proportions' : 'Lock proportions'}
+      onclick={() => {
+        const newLocked = !scaleLocked;
+        const ratio = currentScaleX / currentScaleY;
+        const newProps = {
+          ...layer.props,
+          _scaleLocked: newLocked,
+          _scaleRatio: ratio
+        };
+        projectStore.updateLayer(layer.id, { props: newProps });
+      }}
+    >
+      {#if scaleLocked}
+        <Link class="size-3" />
+      {:else}
+        <Unlink class="size-3" />
+      {/if}
+    </Button>
+  {/snippet}
+  <ScrubInput
+    id="transform.scale.x"
+    value={currentScaleX}
+    step={0.1}
+    onchange={(v) => updateProperty('scale.x', v || 1, 'transform')}
+  />
+  <ScrubInput
+    id="transform.scale.y"
+    value={currentScaleY}
+    step={0.1}
+    onchange={(v) => updateProperty('scale.y', v || 1, 'transform')}
+  />
+</InputsWrapper>
+
+<!-- Anchor Point -->
+<InputWrapper for="anchor-point" label="Anchor Point">
+  <DropdownMenu.Root>
+    <DropdownMenu.Trigger>
+      {#snippet child({ props })}
+        <Button variant="outline" class="w-full justify-between" {...props}>
+          {currentAnchorLabel}
+          <ChevronDown class="ml-2 h-4 w-4 opacity-50" />
+        </Button>
+      {/snippet}
+    </DropdownMenu.Trigger>
+    <DropdownMenu.Content class="w-56" align="end">
+      <div class="grid grid-cols-3 gap-0">
+        {#each anchorOptions as option (option.value)}
+          {@const isSelected = layer.transform.anchor === option.value}
+          {@const Icon = option.icon}
+          <DropdownMenu.Item onclick={() => updateAnchor(option.value)}>
+            {#snippet child({ props })}
+              <Button variant={isSelected ? 'outline' : 'ghost'} icon={Icon} {...props} />
+            {/snippet}
+          </DropdownMenu.Item>
+        {/each}
+      </div>
+    </DropdownMenu.Content>
+  </DropdownMenu.Root>
+</InputWrapper>
diff --git a/src/lib/components/editor/panels/properties/groups/types.ts b/src/lib/components/editor/panels/properties/groups/types.ts
new file mode 100644
index 0000000..e88ae6c
--- /dev/null
+++ b/src/lib/components/editor/panels/properties/groups/types.ts
@@ -0,0 +1,16 @@
+import type { AnimatableProperty } from '$lib/schemas/animation';
+import type { TypedLayer } from '$lib/layers/typed-registry';
+
+/**
+ * Common props passed to all property group components
+ */
+export type PropertyGroupProps = {
+  layer: TypedLayer;
+  currentValues: Pick<TypedLayer, 'transform' | 'style' | 'props'> | null;
+  updateProperty: (
+    propertyName: string,
+    value: unknown,
+    target: 'transform' | 'props' | 'style'
+  ) => void;
+  addKeyframe: (property: AnimatableProperty) => void;
+};
diff --git a/src/lib/engine/interpolation.ts b/src/lib/engine/interpolation.ts
index ce293a3..2824466 100644
--- a/src/lib/engine/interpolation.ts
+++ b/src/lib/engine/interpolation.ts
@@ -2,7 +2,7 @@
  * Animation interpolation and easing functions
  */
 import BezierEasing from 'bezier-easing';
-import type { Interpolation, Keyframe, AnimatableProperty } from '$lib/types/animation';
+import type { Interpolation, Keyframe, AnimatableProperty, LayerStyle } from '$lib/types/animation';
 import type { PropertyMetadata } from '$lib/layers/base';
 import type { ContinuousInterpolationStrategy } from '$lib/schemas/animation';
 
@@ -169,23 +169,126 @@ function interpolateText(
   }
 }
 
+/**
+ * Bounce easing helper (easeOutBounce is the base, others derive from it)
+ */
+function easeOutBounce(t: number): number {
+  const n1 = 7.5625;
+  const d1 = 2.75;
+  if (t < 1 / d1) return n1 * t * t;
+  if (t < 2 / d1) return n1 * (t -= 1.5 / d1) * t + 0.75;
+  if (t < 2.5 / d1) return n1 * (t -= 2.25 / d1) * t + 0.9375;
+  return n1 * (t -= 2.625 / d1) * t + 0.984375;
+}
+
 /**
  * Get easing function for continuous interpolation strategies
  */
 function getEasingFunction(strategy: ContinuousInterpolationStrategy): (t: number) => number {
   switch (strategy) {
+    // CSS standard
     case 'linear':
       return (t) => t;
-
     case 'ease-in':
       return BezierEasing(0.42, 0, 1.0, 1.0);
-
     case 'ease-out':
       return BezierEasing(0, 0, 0.58, 1.0);
-
     case 'ease-in-out':
       return BezierEasing(0.42, 0, 0.58, 1.0);
 
+    // Quad (power of 2)
+    case 'ease-in-quad':
+      return BezierEasing(0.55, 0.085, 0.68, 0.53);
+    case 'ease-out-quad':
+      return BezierEasing(0.25, 0.46, 0.45, 0.94);
+    case 'ease-in-out-quad':
+      return BezierEasing(0.455, 0.03, 0.515, 0.955);
+
+    // Cubic (power of 3)
+    case 'ease-in-cubic':
+      return BezierEasing(0.55, 0.055, 0.675, 0.19);
+    case 'ease-out-cubic':
+      return BezierEasing(0.215, 0.61, 0.355, 1);
+    case 'ease-in-out-cubic':
+      return BezierEasing(0.645, 0.045, 0.355, 1);
+
+    // Quart (power of 4)
+    case 'ease-in-quart':
+      return BezierEasing(0.895, 0.03, 0.685, 0.22);
+    case 'ease-out-quart':
+      return BezierEasing(0.165, 0.84, 0.44, 1);
+    case 'ease-in-out-quart':
+      return BezierEasing(0.77, 0, 0.175, 1);
+
+    // Quint (power of 5)
+    case 'ease-in-quint':
+      return BezierEasing(0.755, 0.05, 0.855, 0.06);
+    case 'ease-out-quint':
+      return BezierEasing(0.23, 1, 0.32, 1);
+    case 'ease-in-out-quint':
+      return BezierEasing(0.86, 0, 0.07, 1);
+
+    // Sine
+    case 'ease-in-sine':
+      return BezierEasing(0.47, 0, 0.745, 0.715);
+    case 'ease-out-sine':
+      return BezierEasing(0.39, 0.575, 0.565, 1);
+    case 'ease-in-out-sine':
+      return BezierEasing(0.445, 0.05, 0.55, 0.95);
+
+    // Expo
+    case 'ease-in-expo':
+      return BezierEasing(0.95, 0.05, 0.795, 0.035);
+    case 'ease-out-expo':
+      return BezierEasing(0.19, 1, 0.22, 1);
+    case 'ease-in-out-expo':
+      return BezierEasing(1, 0, 0, 1);
+
+    // Circ
+    case 'ease-in-circ':
+      return BezierEasing(0.6, 0.04, 0.98, 0.335);
+    case 'ease-out-circ':
+      return BezierEasing(0.075, 0.82, 0.165, 1);
+    case 'ease-in-out-circ':
+      return BezierEasing(0.785, 0.135, 0.15, 0.86);
+
+    // Back (overshoots)
+    case 'ease-in-back':
+      return BezierEasing(0.6, -0.28, 0.735, 0.045);
+    case 'ease-out-back':
+      return BezierEasing(0.175, 0.885, 0.32, 1.275);
+    case 'ease-in-out-back':
+      return BezierEasing(0.68, -0.55, 0.265, 1.55);
+
+    // Bounce (custom math — cannot be represented as cubic bezier)
+    case 'ease-out-bounce':
+      return easeOutBounce;
+    case 'ease-in-bounce':
+      return (t) => 1 - easeOutBounce(1 - t);
+    case 'ease-in-out-bounce':
+      return (t) =>
+        t < 0.5 ? (1 - easeOutBounce(1 - 2 * t)) / 2 : (1 + easeOutBounce(2 * t - 1)) / 2;
+
+    // Elastic (custom math — cannot be represented as cubic bezier)
+    case 'ease-in-elastic':
+      return (t) => {
+        if (t === 0 || t === 1) return t;
+        return -Math.pow(2, 10 * t - 10) * Math.sin((t * 10 - 10.75) * ((2 * Math.PI) / 3));
+      };
+    case 'ease-out-elastic':
+      return (t) => {
+        if (t === 0 || t === 1) return t;
+        return Math.pow(2, -10 * t) * Math.sin((t * 10 - 0.75) * ((2 * Math.PI) / 3)) + 1;
+      };
+    case 'ease-in-out-elastic':
+      return (t) => {
+        if (t === 0 || t === 1) return t;
+        const c5 = (2 * Math.PI) / 4.5;
+        return t < 0.5
+          ? -(Math.pow(2, 20 * t - 10) * Math.sin((20 * t - 11.125) * c5)) / 2
+          : (Math.pow(2, -20 * t + 10) * Math.sin((20 * t - 11.125) * c5)) / 2 + 1;
+      };
+
     default:
       return (t) => t;
   }
@@ -259,18 +362,60 @@ export function getAnimatedStyle(
   currentTime: number
 ): {
   opacity?: number;
-  color?: string;
+  blur?: number;
+  brightness?: number;
+  contrast?: number;
+  saturate?: number;
+  dropShadowX?: number;
+  dropShadowY?: number;
+  dropShadowBlur?: number;
+  dropShadowColor?: string;
 } {
-  const style: { opacity?: number; color?: string } = {};
+  const style: Partial<LayerStyle> = {};
 
   const opacity = getPropertyValue(keyframes, 'opacity', currentTime);
   if (opacity !== null) {
     style.opacity = opacity as number;
   }
 
-  const color = getPropertyValue(keyframes, 'color', currentTime);
-  if (color !== null) {
-    style.color = color as string;
+  // CSS filter properties
+  const blur = getPropertyValue(keyframes, 'blur', currentTime);
+  if (blur !== null) {
+    style.blur = blur as number;
+  }
+
+  const brightness = getPropertyValue(keyframes, 'brightness', currentTime);
+  if (brightness !== null) {
+    style.brightness = brightness as number;
+  }
+  const contrast = getPropertyValue(keyframes, 'contrast', currentTime);
+  if (contrast !== null) {
+    style.contrast = contrast as number;
+  }
+
+  const saturate = getPropertyValue(keyframes, 'saturate', currentTime);
+  if (saturate !== null) {
+    style.saturate = saturate as number;
+  }
+
+  const dropShadowX = getPropertyValue(keyframes, 'dropShadowX', currentTime);
+  if (dropShadowX !== null) {
+    style.dropShadowX = dropShadowX as number;
+  }
+
+  const dropShadowY = getPropertyValue(keyframes, 'dropShadowY', currentTime);
+  if (dropShadowY !== null) {
+    style.dropShadowY = dropShadowY as number;
+  }
+
+  const dropShadowBlur = getPropertyValue(keyframes, 'dropShadowBlur', currentTime);
+  if (dropShadowBlur !== null) {
+    style.dropShadowBlur = dropShadowBlur as number;
+  }
+
+  const dropShadowColor = getPropertyValue(keyframes, 'dropShadowColor', currentTime);
+  if (dropShadowColor !== null) {
+    style.dropShadowColor = dropShadowColor as string;
   }
 
   return style;
diff --git a/src/lib/engine/layer-factory.ts b/src/lib/engine/layer-factory.ts
index b856487..0ef339a 100644
--- a/src/lib/engine/layer-factory.ts
+++ b/src/lib/engine/layer-factory.ts
@@ -8,6 +8,7 @@ import { extractDefaultValues } from '$lib/layers/base';
 import type { LayerProps, LayerTypeString } from '$lib/layers/layer-types';
 import type { TypedLayer } from '$lib/layers/typed-registry';
 import { calculateCoverDimensions, ASPECT_RATIOS } from '$lib/utils/media';
+import { defaultLayerStyle, defaultTransform } from '$lib/schemas/base';
 
 /**
  * Default interpolation for initial keyframes
@@ -71,15 +72,10 @@ export function createLayer<T extends LayerTypeString>(
     name: definition.label,
     type,
     transform: {
-      position: { x, y, z: 0 },
-      rotation: { x: 0, y: 0, z: 0 },
-      scale: { x: 1, y: 1 },
-      anchor: 'center',
+      ...defaultTransform(),
       ...override?.transform
     },
-    style: {
-      opacity: 1
-    },
+    style: defaultLayerStyle(),
     visible: true,
     locked: false,
     keyframes: initialKeyframes,
diff --git a/src/lib/engine/layer-rendering.ts b/src/lib/engine/layer-rendering.ts
index 3d45c5e..c222b26 100644
--- a/src/lib/engine/layer-rendering.ts
+++ b/src/lib/engine/layer-rendering.ts
@@ -40,7 +40,15 @@ export function getLayerStyle(layer: TypedLayer, currentTime: number) {
   const animatedStyle = getAnimatedStyle(layer.keyframes, currentTime);
 
   return {
-    opacity: animatedStyle.opacity ?? layer.style.opacity
+    opacity: animatedStyle.opacity ?? layer.style.opacity,
+    blur: animatedStyle.blur ?? layer.style.blur ?? 0,
+    brightness: animatedStyle.brightness ?? layer.style.brightness ?? 1,
+    contrast: animatedStyle.contrast ?? layer.style.contrast ?? 1,
+    saturate: animatedStyle.saturate ?? layer.style.saturate ?? 1,
+    dropShadowX: animatedStyle.dropShadowX ?? layer.style.dropShadowX ?? 0,
+    dropShadowY: animatedStyle.dropShadowY ?? layer.style.dropShadowY ?? 0,
+    dropShadowBlur: animatedStyle.dropShadowBlur ?? layer.style.dropShadowBlur ?? 0,
+    dropShadowColor: animatedStyle.dropShadowColor ?? layer.style.dropShadowColor ?? 'transparent'
   };
 }
 
diff --git a/src/lib/layers/LayerWrapper.svelte b/src/lib/layers/LayerWrapper.svelte
index 26fc461..a4494fb 100644
--- a/src/lib/layers/LayerWrapper.svelte
+++ b/src/lib/layers/LayerWrapper.svelte
@@ -40,6 +40,20 @@
 
   const transformCSS = $derived(generateTransformCSS(transform));
 
+  const filterCSS = $derived.by(() => {
+    const parts: string[] = [];
+    if (style.blur > 0) parts.push(`blur(${style.blur}px)`);
+    if (style.brightness !== 1) parts.push(`brightness(${style.brightness})`);
+    if (style.contrast !== 1) parts.push(`contrast(${style.contrast})`);
+    if (style.saturate !== 1) parts.push(`saturate(${style.saturate})`);
+    if (style.dropShadowBlur > 0 || style.dropShadowX !== 0 || style.dropShadowY !== 0) {
+      parts.push(
+        `drop-shadow(${style.dropShadowX}px ${style.dropShadowY}px ${style.dropShadowBlur}px ${style.dropShadowColor})`
+      );
+    }
+    return parts.length > 0 ? parts.join(' ') : undefined;
+  });
+
   // Drag state
   let isDragging = $state(false);
   let dragStart = $state({ x: 0, y: 0 });
@@ -241,7 +255,7 @@
   style:--primary-color={BRAND_COLORS.blue}
   style:visibility={visible ? 'visible' : 'hidden'}
 >
-  <div class="layer-content" style:opacity={style.opacity}>
+  <div class="layer-content" style:opacity={style.opacity} style:filter={filterCSS}>
     <C {...customProps} />
   </div>
 </div>
diff --git a/src/lib/layers/base.ts b/src/lib/layers/base.ts
index df7cffb..f623bb9 100644
--- a/src/lib/layers/base.ts
+++ b/src/lib/layers/base.ts
@@ -13,7 +13,8 @@ import {
   type Transform,
   type LayerStyle
 } from '$lib/schemas/base';
-import type { TypedLayer } from './typed-registry';
+import type { FieldMeta } from './properties/field-registry';
+import { fieldRegistry } from './properties/field-registry';
 
 export type LayerCategory = 'media' | 'text' | 'shape' | 'ui' | 'code' | 'browser';
 
@@ -22,45 +23,6 @@ export type LayerCategory = 'media' | 'text' | 'shape' | 'ui' | 'code' | 'browse
  */
 export type InterpolationFamily = 'continuous' | 'discrete' | 'quantized' | 'text';
 
-export type CustomPropertyComponentProps = {
-  value: unknown;
-  onChange: (value: unknown) => void;
-  layer: TypedLayer;
-};
-
-/**
- * Per-field UI metadata that layer schemas can opt into via .register(fieldRegistry, …).
- * Keeps UI-rendering hints out of validation logic and out of .describe() strings.
- */
-export type FieldMeta = {
-  hidden?: boolean;
-  readOnly?: boolean;
-  /** Assign this field to a property group (e.g., 'size') for grouped rendering */
-  group?: string;
-  /** Supported interpolation families for this field (e.g., ['continuous', 'quantized']) */
-  interpolationFamily?: InterpolationFamily | InterpolationFamily[];
-} & (
-  | {
-      /** Override the default input widget rendered for this field */
-      widget?: 'textarea' | 'background' | 'color';
-    }
-  | {
-      widget: 'upload';
-      mediaType: 'image' | 'video' | 'audio';
-    }
-  | {
-      widget: 'custom';
-      component: Component<CustomPropertyComponentProps>;
-    }
-);
-
-/**
- * Global registry for FieldMeta.  Individual schema fields call
- *   .register(fieldRegistry, { widget: 'textarea' })
- * to opt into a non-default widget.
- */
-export const fieldRegistry = z.registry<FieldMeta>();
-
 // Re-export shared schemas for convenience (with backward-compatible aliases)
 export { AnchorPointSchema };
 export { TransformSchema as BaseTransformSchema };
diff --git a/src/lib/layers/components/AudioLayer.svelte b/src/lib/layers/components/AudioLayer.svelte
index ba2a23c..ad0917d 100644
--- a/src/lib/layers/components/AudioLayer.svelte
+++ b/src/lib/layers/components/AudioLayer.svelte
@@ -1,10 +1,11 @@
 <script module lang="ts">
   import { z } from 'zod';
   import type { LayerMeta } from '../registry';
-  import { fieldRegistry } from '../base';
+
   import { Music } from '@lucide/svelte';
   import GenerateCaption from '../properties/GenerateCaption.svelte';
   import { sizeMiddleware } from '$lib/schemas/size';
+  import { fieldRegistry } from '$lib/layers/properties/field-registry';
 
   import type { Layer } from '$lib/schemas/animation';
 
diff --git a/src/lib/layers/components/BrowserLayer.svelte b/src/lib/layers/components/BrowserLayer.svelte
index acc0ebd..8f1900b 100644
--- a/src/lib/layers/components/BrowserLayer.svelte
+++ b/src/lib/layers/components/BrowserLayer.svelte
@@ -2,7 +2,7 @@
   import { z } from 'zod';
   import type { LayerMeta } from '../registry';
   import { Globe } from '@lucide/svelte';
-  import { fieldRegistry } from '../base';
+  import { fieldRegistry } from '$lib/layers/properties/field-registry';
   import { sizeMiddleware } from '$lib/schemas/size';
   import AspectRatioToggle from '../properties/AspectRatioToggle.svelte';
 
diff --git a/src/lib/layers/components/ButtonLayer.svelte b/src/lib/layers/components/ButtonLayer.svelte
index a4d789e..aab9950 100644
--- a/src/lib/layers/components/ButtonLayer.svelte
+++ b/src/lib/layers/components/ButtonLayer.svelte
@@ -3,7 +3,7 @@
   import type { LayerMeta } from '../registry';
   import { Zap } from '@lucide/svelte';
   import { BRAND_COLORS } from '$lib/constants/branding';
-  import { fieldRegistry } from '../base';
+  import { fieldRegistry } from '$lib/layers/properties/field-registry';
   import { sizeMiddleware } from '$lib/schemas/size';
   import AspectRatioToggle from '../properties/AspectRatioToggle.svelte';
   import { googleFontValues } from '$lib/utils/fonts';
@@ -119,7 +119,7 @@
     propertyGroups: [
       { id: 'size', label: 'Size', widget: AspectRatioToggle },
       { id: 'typography', label: 'Typography' },
-      { id: ' appearance', label: 'Appearance' },
+      { id: 'appearance', label: 'Appearance' },
       { id: 'style', label: 'Style' }
     ],
 
diff --git a/src/lib/layers/components/CaptionsLayer.svelte b/src/lib/layers/components/CaptionsLayer.svelte
index f761bb9..95d8f03 100644
--- a/src/lib/layers/components/CaptionsLayer.svelte
+++ b/src/lib/layers/components/CaptionsLayer.svelte
@@ -2,7 +2,7 @@
   import { z } from 'zod';
   import type { LayerMeta } from '../registry';
   import { Captions } from '@lucide/svelte';
-  import { fieldRegistry } from '../base';
+  import { fieldRegistry } from '$lib/layers/properties/field-registry';
   import SourceLayerRef from '../properties/SourceLayerRef.svelte';
   import { googleFontValues } from '$lib/utils/fonts';
   import AspectRatioToggle from '../properties/AspectRatioToggle.svelte';
diff --git a/src/lib/layers/components/HtmlLayer.svelte b/src/lib/layers/components/HtmlLayer.svelte
index 4726bba..e5d132f 100644
--- a/src/lib/layers/components/HtmlLayer.svelte
+++ b/src/lib/layers/components/HtmlLayer.svelte
@@ -2,7 +2,7 @@
   /* eslint-disable svelte/no-at-html-tags */
   import { z } from 'zod';
   import type { LayerMeta } from '../registry';
-  import { fieldRegistry } from '../base';
+  import { fieldRegistry } from '$lib/layers/properties/field-registry';
   import { Code2 } from '@lucide/svelte';
   import { sizeMiddleware } from '$lib/schemas/size';
   import AspectRatioToggle from '../properties/AspectRatioToggle.svelte';
diff --git a/src/lib/layers/components/ImageLayer.svelte b/src/lib/layers/components/ImageLayer.svelte
index 5ada557..8450125 100644
--- a/src/lib/layers/components/ImageLayer.svelte
+++ b/src/lib/layers/components/ImageLayer.svelte
@@ -2,7 +2,7 @@
   import { z } from 'zod';
   import type { LayerMeta } from '../registry';
   import { Image } from '@lucide/svelte';
-  import { fieldRegistry } from '../base';
+  import { fieldRegistry } from '$lib/layers/properties/field-registry';
   import { sizeMiddleware } from '$lib/schemas/size';
   import AspectRatioToggle from '../properties/AspectRatioToggle.svelte';
 
diff --git a/src/lib/layers/components/MouseLayer.svelte b/src/lib/layers/components/MouseLayer.svelte
index d3a4a19..67c917c 100644
--- a/src/lib/layers/components/MouseLayer.svelte
+++ b/src/lib/layers/components/MouseLayer.svelte
@@ -2,7 +2,7 @@
   import { z } from 'zod';
   import type { LayerMeta } from '../registry';
   import { MousePointer } from '@lucide/svelte';
-  import { fieldRegistry } from '../base';
+  import { fieldRegistry } from '$lib/layers/properties/field-registry';
 
   /**
    * Schema for Mouse Layer custom properties
diff --git a/src/lib/layers/components/PhoneLayer.svelte b/src/lib/layers/components/PhoneLayer.svelte
index 46fad01..53a20b1 100644
--- a/src/lib/layers/components/PhoneLayer.svelte
+++ b/src/lib/layers/components/PhoneLayer.svelte
@@ -2,7 +2,7 @@
   import { z } from 'zod';
   import type { LayerMeta } from '../registry';
   import { Smartphone } from '@lucide/svelte';
-  import { fieldRegistry } from '../base';
+  import { fieldRegistry } from '$lib/layers/properties/field-registry';
   import { sizeMiddleware } from '$lib/schemas/size';
   import AspectRatioToggle from '../properties/AspectRatioToggle.svelte';
 
diff --git a/src/lib/layers/components/ProjectSettingsLayer.svelte b/src/lib/layers/components/ProjectSettingsLayer.svelte
index 7426a5a..18864b7 100644
--- a/src/lib/layers/components/ProjectSettingsLayer.svelte
+++ b/src/lib/layers/components/ProjectSettingsLayer.svelte
@@ -2,7 +2,7 @@
   import { z } from 'zod';
   import type { LayerMeta } from '../registry';
   import { Settings } from '@lucide/svelte';
-  import { fieldRegistry } from '../base';
+  import { fieldRegistry } from '$lib/layers/properties/field-registry';
   import { BackgroundValueSchema } from '$lib/schemas/background';
   import { googleFontValues } from '$lib/utils/fonts';
   import FontProperty from '../properties/FontProperty.svelte';
diff --git a/src/lib/layers/components/ShapeLayer.svelte b/src/lib/layers/components/ShapeLayer.svelte
index 273bccf..aa3f08e 100644
--- a/src/lib/layers/components/ShapeLayer.svelte
+++ b/src/lib/layers/components/ShapeLayer.svelte
@@ -3,7 +3,7 @@
   import type { LayerMeta } from '../registry';
   import { Square } from '@lucide/svelte';
   import { BackgroundValueSchema, getStyleProperties } from '$lib/schemas/background';
-  import { fieldRegistry } from '../base';
+  import { fieldRegistry } from '$lib/layers/properties/field-registry';
   import AspectRatioToggle from '../properties/AspectRatioToggle.svelte';
   import { SizeWithAspectRatioSchema, sizeMiddleware } from '$lib/schemas/size';
 
@@ -18,7 +18,7 @@
    */
   const schema = SizeWithAspectRatioSchema.extend({
     shapeType: z
-      .enum(['rectangle', 'circle', 'triangle', 'polygon'])
+      .enum(['rectangle', 'ellipse', 'circle', 'triangle', 'polygon'])
       .default('rectangle')
       .describe('Shape type')
       .register(fieldRegistry, { interpolationFamily: 'discrete' }),
@@ -39,6 +39,14 @@
       .default(2)
       .describe('Stroke width (px)')
       .register(fieldRegistry, { group: 'stroke', interpolationFamily: 'continuous' }),
+    borderRadius: z
+      .number()
+      .min(0)
+      .max(500)
+      .default(0)
+      .optional()
+      .describe('Corner radius (px)')
+      .register(fieldRegistry, { interpolationFamily: 'continuous' }),
     radius: z
       .number()
       .min(0)
@@ -64,7 +72,7 @@
     label: 'Shape',
     icon: Square,
     description:
-      'Geometric shapes (rectangle, circle, triangle, polygon) with background and stroke',
+      'Geometric shapes (rectangle, ellipse, circle, triangle, polygon) with background and stroke',
 
     propertyGroups: [
       { id: 'size', label: 'Size', widget: AspectRatioToggle },
@@ -85,6 +93,7 @@
     background,
     stroke,
     strokeWidth,
+    borderRadius = 0,
     radius = 100,
     sides = 6
   }: Props = $props();
@@ -124,7 +133,16 @@
         return {
           ...base,
           width: `${width}px`,
-          height: `${height}px`
+          height: `${height}px`,
+          borderRadius: borderRadius > 0 ? `${borderRadius}px` : undefined
+        };
+
+      case 'ellipse':
+        return {
+          ...base,
+          width: `${width}px`,
+          height: `${height}px`,
+          borderRadius: '50%'
         };
 
       case 'circle':
diff --git a/src/lib/layers/components/TerminalLayer.svelte b/src/lib/layers/components/TerminalLayer.svelte
index ef05c9f..fc497b4 100644
--- a/src/lib/layers/components/TerminalLayer.svelte
+++ b/src/lib/layers/components/TerminalLayer.svelte
@@ -2,7 +2,7 @@
   import { z } from 'zod';
   import type { LayerMeta } from '../registry';
   import { Terminal } from '@lucide/svelte';
-  import { fieldRegistry } from '../base';
+  import { fieldRegistry } from '$lib/layers/properties/field-registry';
   import { sizeMiddleware } from '$lib/schemas/size';
   import AspectRatioToggle from '../properties/AspectRatioToggle.svelte';
 
diff --git a/src/lib/layers/components/TextLayer.svelte b/src/lib/layers/components/TextLayer.svelte
index a42d3e1..1f647b9 100644
--- a/src/lib/layers/components/TextLayer.svelte
+++ b/src/lib/layers/components/TextLayer.svelte
@@ -2,7 +2,7 @@
   import { z } from 'zod';
   import type { LayerMeta } from '../registry';
   import { Type } from '@lucide/svelte';
-  import { fieldRegistry } from '../base';
+  import { fieldRegistry } from '$lib/layers/properties/field-registry';
   import { googleFontValues } from '$lib/utils/fonts';
   import ApplyFont from '$lib/components/font/apply-font.svelte';
   import FontProperty from '../properties/FontProperty.svelte';
@@ -42,6 +42,20 @@
       interpolationFamily: 'continuous',
       widget: 'color'
     }),
+    letterSpacing: z
+      .number()
+      .min(-10)
+      .max(100)
+      .default(0)
+      .describe('Letter spacing (px)')
+      .register(fieldRegistry, { group: 'spacing', interpolationFamily: 'continuous' }),
+    lineHeight: z
+      .number()
+      .min(0.5)
+      .max(5)
+      .default(1.4)
+      .describe('Line height')
+      .register(fieldRegistry, { group: 'spacing', interpolationFamily: 'continuous' }),
     autoWidth: z
       .boolean()
       .default(true)
@@ -71,6 +85,7 @@
 
     propertyGroups: [
       { id: 'typography', label: 'Typography' },
+      { id: 'spacing', label: 'Spacing' },
       { id: 'layout', label: 'Layout' }
     ]
   } as const satisfies LayerMeta;
@@ -79,8 +94,18 @@
 </script>
 
 <script lang="ts">
-  let { content, fontSize, fontFamily, fontWeight, autoWidth, width, textAlign, color }: Props =
-    $props();
+  let {
+    content,
+    fontSize,
+    fontFamily,
+    fontWeight,
+    color,
+    letterSpacing,
+    lineHeight,
+    autoWidth,
+    width,
+    textAlign
+  }: Props = $props();
 </script>
 
 <ApplyFont {fontFamily}>
@@ -90,6 +115,8 @@
     style:font-size="{fontSize}px"
     style:font-weight={fontWeight}
     style:color
+    style:letter-spacing="{letterSpacing}px"
+    style:line-height={lineHeight}
     style:width={autoWidth ? 'auto' : `${width}px`}
     style:text-align={textAlign}
   >
diff --git a/src/lib/layers/components/VideoLayer.svelte b/src/lib/layers/components/VideoLayer.svelte
index a92f029..2a76c47 100644
--- a/src/lib/layers/components/VideoLayer.svelte
+++ b/src/lib/layers/components/VideoLayer.svelte
@@ -1,7 +1,7 @@
 <script module lang="ts">
   import { z } from 'zod';
   import type { LayerMeta } from '../registry';
-  import { fieldRegistry } from '../base';
+  import { fieldRegistry } from '$lib/layers/properties/field-registry';
   import { Video } from '@lucide/svelte';
   import { sizeMiddleware } from '$lib/schemas/size';
   import AspectRatioToggle from '../properties/AspectRatioToggle.svelte';
diff --git a/src/lib/layers/layer-schemas.ts b/src/lib/layers/layer-schemas.ts
deleted file mode 100644
index 6a32b9c..0000000
--- a/src/lib/layers/layer-schemas.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Layer schemas - separated from components to avoid circular dependencies
- * Import and use these schemas in your layer components
- */
-
-import { fieldRegistry } from './base';
-
-// Re-export so layers can import from here
-export { fieldRegistry };
-
-/**
- * Placeholder - each layer should define and export its own schema here
- * This file will be populated by moving schemas from layer components
- *
- * Example structure:
- * export const audioLayerSchema = z.object({ ... });
- * export const videoLayerSchema = z.object({ ... });
- */
-
-// For now, we'll use a simpler approach - keep manual types in typed-registry
diff --git a/src/lib/layers/project-layer.ts b/src/lib/layers/project-layer.ts
index afb6d58..a7cde33 100644
--- a/src/lib/layers/project-layer.ts
+++ b/src/lib/layers/project-layer.ts
@@ -8,6 +8,7 @@
  */
 import type { TypedLayer } from './typed-registry';
 import type { Project } from '$lib/schemas/animation';
+import { defaultLayerStyle, defaultTransform } from '$lib/schemas/base';
 
 /** Well-known layer ID for the project settings layer */
 export const PROJECT_LAYER_ID = '__project__';
@@ -29,24 +30,8 @@ export function createVirtualProjectLayer(project: Project): TypedLayer {
     id: PROJECT_LAYER_ID,
     name: project.name,
     type: PROJECT_LAYER_TYPE,
-    transform: {
-      position: {
-        x: 0,
-        y: 0,
-        z: 0
-      },
-      rotation: {
-        x: 0,
-        y: 0,
-        z: 0
-      },
-      scale: {
-        x: 1,
-        y: 1
-      },
-      anchor: 'center'
-    },
-    style: { opacity: 1 },
+    transform: defaultTransform(),
+    style: defaultLayerStyle(),
     visible: true,
     locked: false,
     keyframes: [],
diff --git a/src/lib/layers/properties/FontProperty.svelte b/src/lib/layers/properties/FontProperty.svelte
index af63d6d..c570bbc 100644
--- a/src/lib/layers/properties/FontProperty.svelte
+++ b/src/lib/layers/properties/FontProperty.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import type { CustomPropertyComponentProps } from '../base';
   import FontSelector from '$lib/components/font/font-selector.svelte';
   import type { GoogleFont } from '$lib/utils/fonts';
+  import type { CustomPropertyComponentProps } from './field-registry';
 
   const { value, onChange }: CustomPropertyComponentProps = $props();
 
diff --git a/src/lib/layers/properties/SourceLayerRef.svelte b/src/lib/layers/properties/SourceLayerRef.svelte
index 4dea4a5..adcd77a 100644
--- a/src/lib/layers/properties/SourceLayerRef.svelte
+++ b/src/lib/layers/properties/SourceLayerRef.svelte
@@ -2,7 +2,7 @@
   import Button from '$lib/components/ui/button/button.svelte';
   import { getEditorState } from '$lib/contexts/editor.svelte';
   import { Link } from '@lucide/svelte';
-  import type { CustomPropertyComponentProps } from '../base';
+  import type { CustomPropertyComponentProps } from './field-registry';
 
   const editorState = $derived(getEditorState());
   const projectStore = $derived(editorState.project);
diff --git a/src/lib/layers/properties/field-registry.ts b/src/lib/layers/properties/field-registry.ts
new file mode 100644
index 0000000..916f9c9
--- /dev/null
+++ b/src/lib/layers/properties/field-registry.ts
@@ -0,0 +1,43 @@
+import type { InterpolationFamily } from '$lib/types/animation';
+import type { Component } from 'svelte';
+import type { TypedLayer } from '../typed-registry';
+import z from 'zod';
+
+export type CustomPropertyComponentProps = {
+  value: unknown;
+  onChange: (value: unknown) => void;
+  layer: TypedLayer;
+};
+
+/**
+ * Per-field UI metadata that layer schemas can opt into via .register(fieldRegistry, …).
+ * Keeps UI-rendering hints out of validation logic and out of .describe() strings.
+ */
+export type FieldMeta = {
+  hidden?: boolean;
+  readOnly?: boolean;
+  /** Assign this field to a property group (e.g., 'size') for grouped rendering */
+  group?: string;
+  /** Supported interpolation families for this field (e.g., ['continuous', 'quantized']) */
+  interpolationFamily?: InterpolationFamily | InterpolationFamily[];
+} & (
+  | {
+      /** Override the default input widget rendered for this field */
+      widget?: 'textarea' | 'background' | 'color';
+    }
+  | {
+      widget: 'upload';
+      mediaType: 'image' | 'video' | 'audio';
+    }
+  | {
+      widget: 'custom';
+      component: Component<CustomPropertyComponentProps>;
+    }
+);
+
+/**
+ * Global registry for FieldMeta.  Individual schema fields call
+ *   .register(fieldRegistry, { widget: 'textarea' })
+ * to opt into a non-default widget.
+ */
+export const fieldRegistry = z.registry<FieldMeta>();
diff --git a/src/lib/layers/registry.ts b/src/lib/layers/registry.ts
index c1b8bca..b6f46d0 100644
--- a/src/lib/layers/registry.ts
+++ b/src/lib/layers/registry.ts
@@ -32,6 +32,14 @@ export type PropertyMiddleware = (
   }
 ) => Record<string, unknown>;
 
+export type CustomPropertyComponent = Component<{
+  layer: Layer;
+  onUpdateProp: (name: string, value: unknown) => void;
+  addKeyframe: (property: AnimatableProperty) => void;
+}>;
+
+export type CustomPropertyComponents = Record<string, { component: CustomPropertyComponent }>;
+
 export type LayerMeta = {
   category: LayerCategory;
   schema: z.ZodObject<z.ZodRawShape>;
@@ -43,16 +51,7 @@ export type LayerMeta = {
   propertyGroups?: PropertyGroup[];
   /** Middleware for linked property updates (e.g., aspect ratio) */
   middleware?: PropertyMiddleware;
-  customPropertyComponents?: Record<
-    string,
-    {
-      component: Component<{
-        layer: Layer;
-        onUpdateProp: (name: string, value: unknown) => void;
-        addKeyframe: (property: AnimatableProperty) => void;
-      }>;
-    }
-  >;
+  customPropertyComponents?: CustomPropertyComponents;
 };
 
 type LayerModule = {
diff --git a/src/lib/schemas/animation.ts b/src/lib/schemas/animation.ts
index 6b71491..367d7bc 100644
--- a/src/lib/schemas/animation.ts
+++ b/src/lib/schemas/animation.ts
@@ -16,7 +16,52 @@ import type { LiteralUnion } from 'type-fest';
 // Continuous interpolation (smooth numeric transitions with easing)
 const ContinuousInterpolationSchema = z.object({
   family: z.literal('continuous'),
-  strategy: z.enum(['linear', 'ease-in', 'ease-out', 'ease-in-out'])
+  strategy: z.enum([
+    'linear',
+    'ease-in',
+    'ease-out',
+    'ease-in-out',
+    // Quad
+    'ease-in-quad',
+    'ease-out-quad',
+    'ease-in-out-quad',
+    // Cubic
+    'ease-in-cubic',
+    'ease-out-cubic',
+    'ease-in-out-cubic',
+    // Quart
+    'ease-in-quart',
+    'ease-out-quart',
+    'ease-in-out-quart',
+    // Quint
+    'ease-in-quint',
+    'ease-out-quint',
+    'ease-in-out-quint',
+    // Sine
+    'ease-in-sine',
+    'ease-out-sine',
+    'ease-in-out-sine',
+    // Expo
+    'ease-in-expo',
+    'ease-out-expo',
+    'ease-in-out-expo',
+    // Circ
+    'ease-in-circ',
+    'ease-out-circ',
+    'ease-in-out-circ',
+    // Back (overshoots)
+    'ease-in-back',
+    'ease-out-back',
+    'ease-in-out-back',
+    // Bounce
+    'ease-in-bounce',
+    'ease-out-bounce',
+    'ease-in-out-bounce',
+    // Elastic
+    'ease-in-elastic',
+    'ease-out-elastic',
+    'ease-in-out-elastic'
+  ])
 });
 
 export type ContinuousInterpolation = z.infer<typeof ContinuousInterpolationSchema>;
@@ -75,8 +120,7 @@ export const BuiltInAnimatablePropertySchema = z.enum([
   'rotation.x',
   'rotation.y',
   'rotation.z',
-  'opacity',
-  'color'
+  ...LayerStyleSchema.keyof().options
 ]);
 
 // For props properties like props.fontSize, props.fill
diff --git a/src/lib/schemas/base.ts b/src/lib/schemas/base.ts
index 8623bfd..46a0e45 100644
--- a/src/lib/schemas/base.ts
+++ b/src/lib/schemas/base.ts
@@ -3,6 +3,8 @@
  * These are the foundation schemas used by both layer components and animation data.
  * Extracted here to avoid circular dependencies and reduce duplication.
  */
+import { fieldRegistry } from '$lib/layers/properties/field-registry';
+import type { PropertyGroup } from '$lib/layers/registry';
 import { z } from 'zod';
 
 // ============================================
@@ -131,20 +133,125 @@ export const TransformSchema = z
 
 export type Transform = z.infer<typeof TransformSchema>;
 
+export function defaultTransform(): Transform {
+  return {
+    position: { x: 0, y: 0, z: 0 },
+    rotation: { x: 0, y: 0, z: 0 },
+    scale: { x: 1, y: 1 },
+    anchor: 'center'
+  };
+}
+
 // ============================================
 // Style
 // ============================================
 
 /**
  * Base style properties shared by all layers.
- * Currently contains opacity, but may expand to include other visual properties.
+ * Contains opacity and CSS filter properties (blur, brightness, contrast, etc.)
  */
 export const LayerStyleSchema = z.object({
-  opacity: z.number().min(0).max(1).describe('Opacity (0-1)')
+  opacity: z
+    .number()
+    .min(0)
+    .max(1)
+    .multipleOf(0.01)
+    .default(1)
+    .describe('Opacity (0-1)')
+    .register(fieldRegistry, { interpolationFamily: 'continuous' }),
+  // CSS filter properties
+  blur: z
+    .number()
+    .min(0)
+    .default(0)
+    .describe('Blur (px)')
+    .register(fieldRegistry, { group: 'filters-1', interpolationFamily: 'continuous' }),
+  brightness: z
+    .number()
+    .min(0)
+    .max(10)
+    .default(1)
+    .describe('Brightness')
+    .register(fieldRegistry, { group: 'filters-1', interpolationFamily: 'continuous' }),
+  contrast: z
+    .number()
+    .min(0)
+    .max(10)
+    .multipleOf(0.1)
+    .default(1)
+    .describe('Contrast')
+    .register(fieldRegistry, { group: 'filters-2', interpolationFamily: 'continuous' }),
+  saturate: z
+    .number()
+    .min(0)
+    .max(10)
+    .multipleOf(0.1)
+    .default(1)
+    .describe('Saturate')
+    .register(fieldRegistry, { group: 'filters-2', interpolationFamily: 'continuous' }),
+  // CSS drop-shadow filter
+  dropShadowX: z
+    .number()
+    .default(0)
+    .describe('Shadow offset X (px)')
+    .register(fieldRegistry, { group: 'shadow-offset', interpolationFamily: 'continuous' }),
+  dropShadowY: z
+    .number()
+    .default(0)
+    .describe('Shadow offset Y (px)')
+    .register(fieldRegistry, { group: 'shadow-offset', interpolationFamily: 'continuous' }),
+  dropShadowBlur: z
+    .number()
+    .min(0)
+    .default(0)
+    .describe('Shadow blur (px)')
+    .register(fieldRegistry, { group: 'shadow-style', interpolationFamily: 'continuous' }),
+  dropShadowColor: z
+    .string()
+    .default('transparent')
+    .describe('Shadow color')
+    .register(fieldRegistry, {
+      group: 'shadow-style',
+      interpolationFamily: 'discrete',
+      widget: 'color'
+    })
 });
 
+export const stylePropertyGroups: PropertyGroup[] = [
+  {
+    id: 'filters-1',
+    label: 'Filters'
+  },
+  {
+    id: 'filters-2',
+    label: 'Filters'
+  },
+  {
+    id: 'shadow-offset',
+    label: 'Shadow Offset'
+  },
+  {
+    id: 'shadow-style',
+    label: 'Shadow Style'
+  }
+];
+
 export type LayerStyle = z.infer<typeof LayerStyleSchema>;
 
+export function defaultLayerStyle(): LayerStyle {
+  return {
+    opacity: 1,
+    blur: 0,
+    brightness: 1,
+    contrast: 1,
+    saturate: 1,
+    dropShadowX: 0,
+    dropShadowY: 0,
+    dropShadowBlur: 0,
+    dropShadowColor: 'transparent'
+  };
+}
+
 // ============================================
 // Base Layer Fields
 // ============================================
diff --git a/src/lib/schemas/size.ts b/src/lib/schemas/size.ts
index 2183d60..5550949 100644
--- a/src/lib/schemas/size.ts
+++ b/src/lib/schemas/size.ts
@@ -1,4 +1,4 @@
-import { fieldRegistry } from '$lib/layers/base';
+import { fieldRegistry } from '$lib/layers/properties/field-registry';
 import type { PropertyMiddleware } from '$lib/layers/registry';
 import { z } from 'zod';
 
diff --git a/src/lib/stores/project.svelte.ts b/src/lib/stores/project.svelte.ts
index 785f5bf..4ada644 100644
--- a/src/lib/stores/project.svelte.ts
+++ b/src/lib/stores/project.svelte.ts
@@ -3,7 +3,13 @@
  * Manages project state and operations without persistence logic
  */
 import { getPresetById } from '$lib/engine/presets';
-import type { Project, Keyframe, ViewportSettings, Transform } from '$lib/types/animation';
+import {
+  type Project,
+  type Keyframe,
+  type ViewportSettings,
+  type Transform,
+  type LayerStyle
+} from '$lib/types/animation';
 import { nanoid } from 'nanoid';
 import { SvelteSet } from 'svelte/reactivity';
 import { getLayerTransform, getLayerStyle, getLayerProps } from '$lib/engine/layer-rendering';
@@ -14,15 +20,14 @@ import {
   isProjectLayer,
   createVirtualProjectLayer
 } from '$lib/layers/project-layer';
+import { defaultLayerStyle, defaultTransform } from '$lib/schemas/base';
 
 /**
  * Cached layer data for a single frame
  */
 interface LayerFrameCache {
   transform: Transform;
-  style: {
-    opacity: number;
-  };
+  style: LayerStyle;
   customProps: Record<string, unknown>;
 }
 
@@ -188,13 +193,8 @@ export class ProjectStore {
       id: groupId,
       name: 'Group',
       type: 'group',
-      transform: {
-        position: { x: 0, y: 0, z: 0 },
-        rotation: { x: 0, y: 0, z: 0 },
-        scale: { x: 1, y: 1 },
-        anchor: 'center'
-      },
-      style: { opacity: 1 },
+      transform: defaultTransform(),
+      style: defaultLayerStyle(),
       visible: true,
       locked: false,
       keyframes: [],
diff --git a/src/lib/utils/interpolation-utils.ts b/src/lib/utils/interpolation-utils.ts
index f36e1ed..d8e94c9 100644
--- a/src/lib/utils/interpolation-utils.ts
+++ b/src/lib/utils/interpolation-utils.ts
@@ -16,7 +16,47 @@ export const interpolationLabels = {
     linear: 'Linear',
     'ease-in': 'Ease In',
     'ease-out': 'Ease Out',
-    'ease-in-out': 'Ease In-Out'
+    'ease-in-out': 'Ease In-Out',
+    // Quad
+    'ease-in-quad': 'Ease In (Quad)',
+    'ease-out-quad': 'Ease Out (Quad)',
+    'ease-in-out-quad': 'Ease In-Out (Quad)',
+    // Cubic
+    'ease-in-cubic': 'Ease In (Cubic)',
+    'ease-out-cubic': 'Ease Out (Cubic)',
+    'ease-in-out-cubic': 'Ease In-Out (Cubic)',
+    // Quart
+    'ease-in-quart': 'Ease In (Quart)',
+    'ease-out-quart': 'Ease Out (Quart)',
+    'ease-in-out-quart': 'Ease In-Out (Quart)',
+    // Quint
+    'ease-in-quint': 'Ease In (Quint)',
+    'ease-out-quint': 'Ease Out (Quint)',
+    'ease-in-out-quint': 'Ease In-Out (Quint)',
+    // Sine
+    'ease-in-sine': 'Ease In (Sine)',
+    'ease-out-sine': 'Ease Out (Sine)',
+    'ease-in-out-sine': 'Ease In-Out (Sine)',
+    // Expo
+    'ease-in-expo': 'Ease In (Expo)',
+    'ease-out-expo': 'Ease Out (Expo)',
+    'ease-in-out-expo': 'Ease In-Out (Expo)',
+    // Circ
+    'ease-in-circ': 'Ease In (Circ)',
+    'ease-out-circ': 'Ease Out (Circ)',
+    'ease-in-out-circ': 'Ease In-Out (Circ)',
+    // Back
+    'ease-in-back': 'Ease In (Back)',
+    'ease-out-back': 'Ease Out (Back)',
+    'ease-in-out-back': 'Ease In-Out (Back)',
+    // Bounce
+    'ease-in-bounce': 'Ease In (Bounce)',
+    'ease-out-bounce': 'Ease Out (Bounce)',
+    'ease-in-out-bounce': 'Ease In-Out (Bounce)',
+    // Elastic
+    'ease-in-elastic': 'Ease In (Elastic)',
+    'ease-out-elastic': 'Ease Out (Elastic)',
+    'ease-in-out-elastic': 'Ease In-Out (Elastic)'
   },
   discrete: {
     'step-end': 'Step End',