diff --git a/src/lib/components/ai/model-selector.svelte b/src/lib/components/ai/model-selector.svelte
index 8db0d44..e366f1d 100644
--- a/src/lib/components/ai/model-selector.svelte
+++ b/src/lib/components/ai/model-selector.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { ChevronDown, Lock } from '@lucide/svelte';
+  import { ChevronDown } from '@lucide/svelte';
   import { AI_MODELS, getModel } from '$lib/ai/models';
   import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
   import { getUser } from '$lib/functions/auth.remote';
diff --git a/src/lib/components/editor/canvas/layers-renderer.svelte b/src/lib/components/editor/canvas/layers-renderer.svelte
index 71bda74..e1bc6b0 100644
--- a/src/lib/components/editor/canvas/layers-renderer.svelte
+++ b/src/lib/components/editor/canvas/layers-renderer.svelte
@@ -46,8 +46,8 @@
     }
     // Otherwise compute using shared rendering functions
     return {
-      transform: getLayerTransform(layer, currentTime),
-      style: getLayerStyle(layer, currentTime),
+      transform: getLayerTransform(layer, currentTime, duration),
+      style: getLayerStyle(layer, currentTime, duration),
       customProps: getLayerProps(layer, currentTime)
     };
   }
diff --git a/src/lib/components/editor/panels/properties-panel.svelte b/src/lib/components/editor/panels/properties-panel.svelte
index addfd33..b85b74b 100644
--- a/src/lib/components/editor/panels/properties-panel.svelte
+++ b/src/lib/components/editor/panels/properties-panel.svelte
@@ -19,15 +19,15 @@
   import type { Layer } from '$lib/schemas/animation';
   import { getDefaultInterpolationForProperty } from '$lib/utils/interpolation-utils';
   import { defaultLayerStyle, defaultTransform } from '$lib/schemas/base';
-  import { Clock, Move, Palette, Layers, Sparkles, Boxes } from '@lucide/svelte';
+  import { Clock, Move, Palette, Layers, Boxes } from '@lucide/svelte';
 
   // 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';
+  import AnimationPresetsGroup from './properties/groups/animation-presets-group.svelte';
 
   const editorState = $derived(getEditorState());
   const projectStore = $derived(editorState.project);
@@ -334,11 +334,11 @@
 
         <Separator />
 
-        <!-- Time Range -->
+        <!-- Time Range & Transitions -->
         <PropertiesGroup icon={Clock}>
           {#snippet label()}
             <div class="flex w-full items-center justify-between">
-              <Label class="font-semibold">Time Range</Label>
+              <Label class="font-semibold">Time & Transitions</Label>
               {#if selectedLayer.contentDuration !== undefined}
                 {@const contentDuration = selectedLayer.contentDuration}
                 {@const contentOffset = selectedLayer.contentOffset ?? 0}
@@ -350,14 +350,6 @@
             </div>
           {/snippet}
           <TimeRangeGroup layer={selectedLayer} />
-        </PropertiesGroup>
-      {/if}
-
-      {#if !isProjectSettings}
-        <Separator />
-
-        <!-- Animation Presets -->
-        <PropertiesGroup label="Animation Presets" icon={Sparkles}>
           <AnimationPresetsGroup layer={selectedLayer} />
         </PropertiesGroup>
 
diff --git a/src/lib/components/editor/panels/properties/animation-preset-select.svelte b/src/lib/components/editor/panels/properties/animation-preset-select.svelte
new file mode 100644
index 0000000..e31411b
--- /dev/null
+++ b/src/lib/components/editor/panels/properties/animation-preset-select.svelte
@@ -0,0 +1,157 @@
+<script lang="ts">
+  import * as Popover from '$lib/components/ui/popover';
+  import { Button } from '$lib/components/ui/button';
+  import { ChevronDown } from '@lucide/svelte';
+  import type { TypedAnimationPreset } from '$lib/engine/presets';
+  import { getLayerTransform, getLayerStyle } from '$lib/engine/layer-rendering';
+  import { generateTransformCSS, generateFilterCSS } from '$lib/layers/base';
+
+  const {
+    value,
+    options,
+    placeholder = 'Select animation',
+    onchange
+  }: {
+    value: string;
+    options: TypedAnimationPreset[];
+    placeholder?: string;
+    onchange: (value: string) => void;
+  } = $props();
+
+  let open = $state(false);
+  let hoveredPresetId = $state<string | null>(null);
+  let previewTime = $state(0);
+  let animationFrameId = $state<number | null>(null);
+
+  const selectedPreset = $derived(options.find((opt) => opt.id === value));
+  const hoveredPreset = $derived(options.find((opt) => opt.id === hoveredPresetId));
+
+  // Create a dummy layer for preview
+  const previewLayer = $derived(
+    createLayer('rectangle', {
+      name: 'Preview',
+      transform: {
+        position: { x: 0, y: 0, z: 0 },
+        rotation: { x: 0, y: 0, z: 0 },
+        scale: { x: 1, y: 1, z: 1 },
+        anchor: 'center'
+      },
+      style: { opacity: 1 },
+      props: {
+        width: 60,
+        height: 60,
+        fill: '#3b82f6',
+        stroke: '#2563eb',
+        strokeWidth: 2,
+        borderRadius: 8
+      }
+    })
+  );
+
+  // Apply preset keyframes to preview layer
+  const previewLayerWithKeyframes = $derived.by(() => {
+    if (!hoveredPreset) return previewLayer;
+
+    const keyframes = hoveredPreset.keyframes.map((kf) => ({
+      id: crypto.randomUUID(),
+      time: kf.time,
+      property: kf.property as any,
+      value: kf.value,
+      interpolation: kf.interpolation
+    }));
+
+    return { ...previewLayer, keyframes };
+  });
+
+  // Get current transform and style for preview at current time
+  const previewTransform = $derived(getLayerTransform(previewLayerWithKeyframes, previewTime, 1));
+  const previewStyle = $derived(getLayerStyle(previewLayerWithKeyframes, previewTime, 1));
+  const previewTransformCSS = $derived(generateTransformCSS(previewTransform));
+  const previewFilterCSS = $derived(generateFilterCSS(previewStyle));
+
+  function startPreview(presetId: string) {
+    hoveredPresetId = presetId;
+    previewTime = 0;
+
+    // Animate preview
+    const startTime = performance.now();
+    const duration = 1000; // 1 second loop
+
+    function animate(currentTime: number) {
+      const elapsed = currentTime - startTime;
+      previewTime = (elapsed % duration) / duration;
+      animationFrameId = requestAnimationFrame(animate);
+    }
+
+    animationFrameId = requestAnimationFrame(animate);
+  }
+
+  function stopPreview() {
+    hoveredPresetId = null;
+    previewTime = 0;
+    if (animationFrameId !== null) {
+      cancelAnimationFrame(animationFrameId);
+      animationFrameId = null;
+    }
+  }
+
+  function selectPreset(presetId: string) {
+    onchange(presetId);
+    open = false;
+    stopPreview();
+  }
+
+  $effect(() => {
+    if (!open) {
+      stopPreview();
+    }
+  });
+</script>
+
+<Popover.Root bind:open>
+  <Popover.Trigger asChild let:props>
+    <Button variant="outline" class="w-full justify-between" {...props}>
+      {selectedPreset?.name ?? placeholder}
+      <ChevronDown class="ml-2 h-4 w-4 opacity-50" />
+    </Button>
+  </Popover.Trigger>
+  <Popover.Content class="w-80 p-2" align="start">
+    <div class="grid grid-cols-1 gap-1">
+      {#each options as preset (preset.id)}
+        {@const isSelected = value === preset.id}
+        {@const isHovered = hoveredPresetId === preset.id}
+        <button
+          class="flex items-center justify-between rounded px-3 py-2 text-sm transition-colors hover:bg-accent"
+          class:bg-accent={isSelected}
+          onmouseenter={() => startPreview(preset.id)}
+          onmouseleave={stopPreview}
+          onclick={() => selectPreset(preset.id)}
+        >
+          <span class="flex-1 text-left">{preset.name}</span>
+          {#if isHovered}
+            <div
+              class="relative ml-2 flex h-16 w-16 items-center justify-center overflow-hidden rounded border border-border bg-background"
+            >
+              <div
+                class="absolute top-1/2 left-1/2"
+                style:transform={previewTransformCSS}
+                style:filter={previewFilterCSS}
+                style:opacity={previewStyle.opacity}
+              >
+                <div
+                  class="rounded"
+                  style:width="{previewLayer.props.width}px"
+                  style:height="{previewLayer.props.height}px"
+                  style:background={previewLayer.props.fill}
+                  style:border="{previewLayer.props.strokeWidth}px solid {previewLayer.props
+                    .stroke}"
+                  style:border-radius="{previewLayer.props.borderRadius}px"
+                ></div>
+              </div>
+            </div>
+          {/if}
+        </button>
+      {/each}
+    </div>
+  </Popover.Content>
+</Popover.Root>
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
index 8d86386..1021996 100644
--- a/src/lib/components/editor/panels/properties/groups/time-range-group.svelte
+++ b/src/lib/components/editor/panels/properties/groups/time-range-group.svelte
@@ -1,19 +1,48 @@
 <script lang="ts">
-  import { Label } from '$lib/components/ui/label';
   import { Button } from '$lib/components/ui/button';
-  import ScrubInput from '../../scrub-input.svelte';
+  import { Label } from '$lib/components/ui/label';
   import { getEditorState } from '$lib/contexts/editor.svelte';
   import type { TypedLayer } from '$lib/layers/typed-registry';
+  import { getEnterPresets, getExitPresets } from '$lib/engine/presets';
+  import type { LayerTransition } from '$lib/schemas/animation';
+  import InputsWrapper from '../../inputs-wrapper.svelte';
+  import ScrubInput from '../../scrub-input.svelte';
+  import AnimationPresetSelect from '../animation-preset-select.svelte';
 
   const { layer }: { layer: TypedLayer } = $props();
 
   const editorState = $derived(getEditorState());
   const projectStore = $derived(editorState.project);
+
+  const enterPresets = $derived([
+    { id: '', name: 'None', category: 'enter' as const, keyframes: [] },
+    ...getEnterPresets()
+  ]);
+
+  const exitPresets = $derived([
+    { id: '', name: 'None', category: 'exit' as const, keyframes: [] },
+    ...getExitPresets()
+  ]);
+
+  let enterPresetId = $derived<string>(layer.enterTransition?.presetId ?? '');
+  let enterDuration = $derived<number>(layer.enterTransition?.duration ?? 0.5);
+  let exitPresetId = $derived<string>(layer.exitTransition?.presetId ?? '');
+  let exitDuration = $derived<number>(layer.exitTransition?.duration ?? 0.5);
+
+  function updateTransition(type: 'enter' | 'exit', presetId: string, duration: number) {
+    const transition: LayerTransition | undefined = presetId ? { presetId, duration } : undefined;
+    const key = type === 'enter' ? 'enterTransition' : 'exitTransition';
+    projectStore.updateLayer(layer.id, { [key]: transition });
+  }
 </script>
 
-<div class="grid grid-cols-2 gap-2">
-  <div class="space-y-1">
-    <Label class="text-xs text-muted-foreground">Enter (s)</Label>
+<div class="space-y-3">
+  <InputsWrapper
+    fields={[
+      { for: 'enter-time', labels: 'Enter (s)' },
+      { for: 'exit-time', labels: 'Exit (s)' }
+    ]}
+  >
     <ScrubInput
       id="enter-time"
       value={layer.enterTime ?? 0}
@@ -27,9 +56,6 @@
       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}
@@ -38,6 +64,72 @@
       step={0.1}
       onchange={(v) => projectStore.setLayerExitTime(layer.id, v)}
     />
+  </InputsWrapper>
+
+  <div class="space-y-2">
+    <Label class="text-xs text-muted-foreground">Enter Transition</Label>
+    <InputsWrapper
+      fields={[
+        { for: 'enter-preset', labels: 'Animation' },
+        { for: 'enter-duration', labels: 'Duration (s)' }
+      ]}
+    >
+      <AnimationPresetSelect
+        value={enterPresetId}
+        options={enterPresets}
+        placeholder="None"
+        onchange={(v) => {
+          enterPresetId = v;
+          updateTransition('enter', v, enterDuration);
+        }}
+      />
+      {#if enterPresetId}
+        <ScrubInput
+          id="enter-duration"
+          value={enterDuration}
+          min={0.1}
+          max={5}
+          step={0.1}
+          onchange={(v) => {
+            enterDuration = v;
+            updateTransition('enter', enterPresetId, v);
+          }}
+        />
+      {/if}
+    </InputsWrapper>
+  </div>
+
+  <div class="space-y-2">
+    <Label class="text-xs text-muted-foreground">Exit Transition</Label>
+    <InputsWrapper
+      fields={[
+        { for: 'exit-preset', labels: 'Animation' },
+        { for: 'exit-duration', labels: 'Duration (s)' }
+      ]}
+    >
+      <AnimationPresetSelect
+        value={exitPresetId}
+        options={exitPresets}
+        placeholder="None"
+        onchange={(v) => {
+          exitPresetId = v;
+          updateTransition('exit', v, exitDuration);
+        }}
+      />
+      {#if exitPresetId}
+        <ScrubInput
+          id="exit-duration"
+          value={exitDuration}
+          min={0.1}
+          max={5}
+          step={0.1}
+          onchange={(v) => {
+            exitDuration = v;
+            updateTransition('exit', exitPresetId, v);
+          }}
+        />
+      {/if}
+    </InputsWrapper>
   </div>
 </div>
 
diff --git a/src/lib/components/editor/timeline/timeline-layer.svelte b/src/lib/components/editor/timeline/timeline-layer.svelte
index 12e66c2..07709d3 100644
--- a/src/lib/components/editor/timeline/timeline-layer.svelte
+++ b/src/lib/components/editor/timeline/timeline-layer.svelte
@@ -21,11 +21,6 @@
   // Enter/exit time for the layer
   const enterTime = $derived(layer.enterTime ?? 0);
   const exitTime = $derived(layer.exitTime ?? projectStore.state.duration);
-  const hasTimeRange = $derived(enterTime > 0 || exitTime < projectStore.state.duration);
-
-  const isMediaLayer = $derived(
-    layer.type === 'video' || layer.type === 'audio' || layer.type === 'captions'
-  );
 
   // Duration bar position and width
   const barLeft = $derived(enterTime * pixelsPerSecond);
@@ -164,9 +159,6 @@
     if (layer.type === 'group') return 'Group';
     return '';
   });
-
-  // Always show the bar for groups so users can drag the group range
-  const showBar = $derived(hasTimeRange || isMediaLayer || isGroupLayer);
 </script>
 
 <div
@@ -184,50 +176,46 @@
   >
     <div class="flex flex-col">
       <span class="truncate">{layer.name}</span>
-      {#if hasTimeRange || isMediaLayer || isGroupLayer}
-        <span class="text-[10px] text-muted-foreground">
-          {enterTime.toFixed(1)}s – {exitTime.toFixed(1)}s
-        </span>
-      {/if}
+      <span class="text-[10px] text-muted-foreground">
+        {enterTime.toFixed(1)}s – {exitTime.toFixed(1)}s
+      </span>
     </div>
   </div>
 
   <!-- Keyframes area -->
   <div class="relative h-12 min-h-12 flex-1">
     <!-- Duration bar (shown for all layers with enter/exit times, and groups) -->
-    {#if showBar}
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      class="absolute top-1 bottom-1 rounded-sm border {barColor}"
+      style:left="{barLeft}px"
+      style:width="{barWidth}px"
+      style:cursor={isDraggingBar ? 'grabbing' : 'grab'}
+      onmousedown={startDragBar}
+    >
+      <!-- Enter handle -->
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <div
+        class="absolute top-0 bottom-0 left-0 w-1.5 cursor-col-resize rounded-l-sm bg-white/30 hover:bg-white/50"
+        onmousedown={startDragEnter}
+      ></div>
+
+      <!-- Exit handle -->
       <!-- svelte-ignore a11y_no_static_element_interactions -->
       <div
-        class="absolute top-1 bottom-1 rounded-sm border {barColor}"
-        style:left="{barLeft}px"
-        style:width="{barWidth}px"
-        style:cursor={isDraggingBar ? 'grabbing' : 'grab'}
-        onmousedown={startDragBar}
-      >
-        <!-- Enter handle -->
-        <!-- svelte-ignore a11y_no_static_element_interactions -->
-        <div
-          class="absolute top-0 bottom-0 left-0 w-1.5 cursor-col-resize rounded-l-sm bg-white/30 hover:bg-white/50"
-          onmousedown={startDragEnter}
-        ></div>
-
-        <!-- Exit handle -->
-        <!-- svelte-ignore a11y_no_static_element_interactions -->
-        <div
-          class="absolute top-0 right-0 bottom-0 w-1.5 cursor-col-resize rounded-r-sm bg-white/30 hover:bg-white/50"
-          onmousedown={startDragExit}
-        ></div>
-
-        <!-- Label -->
-        {#if barLabel && barWidth > 40}
-          <span
-            class="pointer-events-none absolute top-1/2 left-2 -translate-y-1/2 text-[9px] font-medium text-white/60"
-          >
-            {barLabel}
-          </span>
-        {/if}
-      </div>
-    {/if}
+        class="absolute top-0 right-0 bottom-0 w-1.5 cursor-col-resize rounded-r-sm bg-white/30 hover:bg-white/50"
+        onmousedown={startDragExit}
+      ></div>
+
+      <!-- Label -->
+      {#if barLabel && barWidth > 40}
+        <span
+          class="pointer-events-none absolute top-1/2 left-2 -translate-y-1/2 text-[9px] font-medium text-white/60"
+        >
+          {barLabel}
+        </span>
+      {/if}
+    </div>
 
     <!-- Keyframes -->
     {#each keyframeGroups as group (group.time)}
diff --git a/src/lib/engine/layer-rendering.ts b/src/lib/engine/layer-rendering.ts
index c222b26..130dd59 100644
--- a/src/lib/engine/layer-rendering.ts
+++ b/src/lib/engine/layer-rendering.ts
@@ -2,49 +2,84 @@
  * Shared layer rendering utilities
  * Used by both canvas rendering and frame cache preparation
  */
-import type { Transform } from '$lib/types/animation';
+import type { Transform, Keyframe, LayerStyle } from '$lib/types/animation';
 import type { TypedLayer } from '$lib/layers/typed-registry';
-import { getAnimatedTransform, getAnimatedStyle, getAnimatedProps } from './interpolation';
+import {
+  getAnimatedTransform,
+  getAnimatedStyle,
+  getAnimatedProps,
+  interpolateValue
+} from './interpolation';
 import { getLayerSchema } from '$lib/layers/registry';
 import { extractPropertyMetadata } from '$lib/layers/base';
+import { getPresetById } from './presets';
 
 /**
- * Get animated transform for a layer, merging base transform with animated values
+ * Get animated transform for a layer, merging base transform with animated values and transitions
  */
-export function getLayerTransform(layer: TypedLayer, currentTime: number): Transform {
+export function getLayerTransform(
+  layer: TypedLayer,
+  currentTime: number,
+  projectDuration: number
+): Transform {
   const animatedTransform = getAnimatedTransform(layer.keyframes, currentTime);
+  const { transform: transitionTransform } = applyTransitionPresets(
+    layer,
+    currentTime,
+    projectDuration
+  );
 
   return {
     position: {
-      x: animatedTransform.position?.x ?? layer.transform.position.x,
-      y: animatedTransform.position?.y ?? layer.transform.position.y,
-      z: animatedTransform.position?.z ?? layer.transform.position.z
+      x:
+        transitionTransform.position?.x ??
+        animatedTransform.position?.x ??
+        layer.transform.position.x,
+      y:
+        transitionTransform.position?.y ??
+        animatedTransform.position?.y ??
+        layer.transform.position.y,
+      z:
+        transitionTransform.position?.z ??
+        animatedTransform.position?.z ??
+        layer.transform.position.z
     },
     rotation: {
-      x: animatedTransform.rotation?.x ?? layer.transform.rotation.x,
-      y: animatedTransform.rotation?.y ?? layer.transform.rotation.y,
-      z: animatedTransform.rotation?.z ?? layer.transform.rotation.z
+      x:
+        transitionTransform.rotation?.x ??
+        animatedTransform.rotation?.x ??
+        layer.transform.rotation.x,
+      y:
+        transitionTransform.rotation?.y ??
+        animatedTransform.rotation?.y ??
+        layer.transform.rotation.y,
+      z:
+        transitionTransform.rotation?.z ??
+        animatedTransform.rotation?.z ??
+        layer.transform.rotation.z
     },
     scale: {
-      x: animatedTransform.scale?.x ?? layer.transform.scale.x,
-      y: animatedTransform.scale?.y ?? layer.transform.scale.y
+      x: transitionTransform.scale?.x ?? animatedTransform.scale?.x ?? layer.transform.scale.x,
+      y: transitionTransform.scale?.y ?? animatedTransform.scale?.y ?? layer.transform.scale.y
     },
     anchor: layer.transform.anchor ?? 'center'
   };
 }
 
 /**
- * Get animated style for a layer
+ * Get animated style for a layer, merging base style with animated values and transitions
  */
-export function getLayerStyle(layer: TypedLayer, currentTime: number) {
+export function getLayerStyle(layer: TypedLayer, currentTime: number, projectDuration: number) {
   const animatedStyle = getAnimatedStyle(layer.keyframes, currentTime);
+  const { style: transitionStyle } = applyTransitionPresets(layer, currentTime, projectDuration);
 
   return {
-    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,
+    opacity: transitionStyle.opacity ?? animatedStyle.opacity ?? layer.style.opacity,
+    blur: transitionStyle.blur ?? animatedStyle.blur ?? layer.style.blur ?? 0,
+    brightness:
+      transitionStyle.brightness ?? animatedStyle.brightness ?? layer.style.brightness ?? 1,
+    contrast: transitionStyle.contrast ?? animatedStyle.contrast ?? layer.style.contrast ?? 1,
+    saturate: transitionStyle.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,
@@ -60,3 +95,151 @@ export function getLayerProps(layer: TypedLayer, currentTime: number): Record<st
   const propsMetadata = extractPropertyMetadata(schema);
   return getAnimatedProps(layer.keyframes, layer.props, propsMetadata, currentTime);
 }
+
+/**
+ * Apply transition presets to transform/style based on enter/exit time
+ * Returns additional transform/style modifications to merge with base values
+ */
+export function applyTransitionPresets(
+  layer: TypedLayer,
+  currentTime: number,
+  projectDuration: number
+): {
+  transform: Partial<Transform>;
+  style: Partial<LayerStyle>;
+} {
+  const enterTime = layer.enterTime ?? 0;
+  const exitTime = layer.exitTime ?? projectDuration;
+
+  let transitionTransform: Partial<Transform> = {};
+  let transitionStyle: Partial<LayerStyle> = {};
+
+  // Apply enter transition if within duration
+  if (layer.enterTransition && currentTime >= enterTime) {
+    const timeSinceEnter = currentTime - enterTime;
+    if (timeSinceEnter <= layer.enterTransition.duration) {
+      const preset = getPresetById(layer.enterTransition.presetId);
+      if (preset) {
+        const { transform, style } = applyPresetAtTime(
+          preset.keyframes,
+          timeSinceEnter,
+          layer.enterTransition.duration
+        );
+        transitionTransform = { ...transitionTransform, ...transform };
+        transitionStyle = { ...transitionStyle, ...style };
+      }
+    }
+  }
+
+  // Apply exit transition if within duration
+  if (layer.exitTransition && currentTime <= exitTime) {
+    const timeUntilExit = exitTime - currentTime;
+    if (timeUntilExit <= layer.exitTransition.duration) {
+      const preset = getPresetById(layer.exitTransition.presetId);
+      if (preset) {
+        // For exit transitions, we interpolate from end backwards
+        const transitionProgress = layer.exitTransition.duration - timeUntilExit;
+        const { transform, style } = applyPresetAtTime(
+          preset.keyframes,
+          transitionProgress,
+          layer.exitTransition.duration
+        );
+        transitionTransform = { ...transitionTransform, ...transform };
+        transitionStyle = { ...transitionStyle, ...style };
+      }
+    }
+  }
+
+  return { transform: transitionTransform, style: transitionStyle };
+}
+
+/**
+ * Apply a preset's keyframes at a specific normalized time
+ */
+function applyPresetAtTime(
+  presetKeyframes: Omit<Keyframe, 'id'>[],
+  currentTime: number,
+  duration: number
+): {
+  transform: Partial<Transform>;
+  style: Partial<LayerStyle>;
+} {
+  const transform: Partial<Transform> = {};
+  const style: Partial<LayerStyle> = {};
+
+  // Scale preset keyframe times to actual duration
+  const scaledKeyframes = presetKeyframes.map((kf) => ({
+    ...kf,
+    time: kf.time * duration
+  }));
+
+  // Group keyframes by property
+  const propertiesByName = new Map<string, typeof scaledKeyframes>();
+  for (const kf of scaledKeyframes) {
+    const existing = propertiesByName.get(kf.property) ?? [];
+    propertiesByName.set(kf.property, [...existing, kf]);
+  }
+
+  // Interpolate each property
+  for (const [property, keyframes] of propertiesByName) {
+    // Sort by time
+    keyframes.sort((a, b) => a.time - b.time);
+
+    // Find surrounding keyframes
+    let prevKf = keyframes[0];
+    let nextKf = keyframes[keyframes.length - 1];
+
+    for (let i = 0; i < keyframes.length - 1; i++) {
+      if (currentTime >= keyframes[i].time && currentTime <= keyframes[i + 1].time) {
+        prevKf = keyframes[i];
+        nextKf = keyframes[i + 1];
+        break;
+      }
+    }
+
+    // Calculate progress between keyframes (0-1)
+    const progress =
+      prevKf.time === nextKf.time ? 1 : (currentTime - prevKf.time) / (nextKf.time - prevKf.time);
+
+    // Interpolate value using the interpolation function
+    const value = interpolateValue(
+      prevKf.value,
+      nextKf.value,
+      Math.max(0, Math.min(1, progress)),
+      nextKf.interpolation ?? { family: 'continuous', strategy: 'ease-in-out' }
+    );
+
+    // Map to transform or style
+    if (property === 'position.x') {
+      if (!transform.position) transform.position = { x: 0, y: 0, z: 0 };
+      transform.position.x = value as number;
+    } else if (property === 'position.y') {
+      if (!transform.position) transform.position = { x: 0, y: 0, z: 0 };
+      transform.position.y = value as number;
+    } else if (property === 'position.z') {
+      if (!transform.position) transform.position = { x: 0, y: 0, z: 0 };
+      transform.position.z = value as number;
+    } else if (property === 'scale.x') {
+      if (!transform.scale) transform.scale = { x: 1, y: 1 };
+      transform.scale.x = value as number;
+    } else if (property === 'scale.y') {
+      if (!transform.scale) transform.scale = { x: 1, y: 1 };
+      transform.scale.y = value as number;
+    } else if (property === 'rotation.x') {
+      if (!transform.rotation) transform.rotation = { x: 0, y: 0, z: 0 };
+      transform.rotation.x = value as number;
+    } else if (property === 'rotation.y') {
+      if (!transform.rotation) transform.rotation = { x: 0, y: 0, z: 0 };
+      transform.rotation.y = value as number;
+    } else if (property === 'rotation.z') {
+      if (!transform.rotation) transform.rotation = { x: 0, y: 0, z: 0 };
+      transform.rotation.z = value as number;
+    } else if (property === 'opacity') style.opacity = value as number;
+    else if (property === 'blur') style.blur = value as number;
+    else if (property === 'brightness') style.brightness = value as number;
+    else if (property === 'contrast') style.contrast = value as number;
+    else if (property === 'saturate') style.saturate = value as number;
+  }
+
+  return { transform, style };
+}
diff --git a/src/lib/engine/presets.ts b/src/lib/engine/presets.ts
index 253c738..bef246a 100644
--- a/src/lib/engine/presets.ts
+++ b/src/lib/engine/presets.ts
@@ -3,926 +3,301 @@
  * These can be applied to any layer by the AI using create_layer tool
  */
 import { z } from 'zod';
-import type { AnimationPreset } from '$lib/types/animation';
+import type { Paths } from 'type-fest';
+import type { Interpolation } from '$lib/types/animation';
+import type { Transform, LayerStyle } from '$lib/schemas/base';
+
+// ============================================
+// Type-safe preset system
+// ============================================
+
+/**
+ * Animatable transform properties - auto-inferred from Transform type
+ * Excludes 'anchor' and parent objects, only includes leaf paths (e.g., 'position.x')
+ */
+export type TransformProperty = Extract<Paths<Transform>, `${string}.${string}`>;
+
+/**
+ * Animatable style properties - extracted from LayerStyle type
+ */
+export type StyleProperty = keyof LayerStyle;
+
+/**
+ * All base animatable properties (transform + style)
+ */
+export type BaseAnimatableProperty = TransformProperty | StyleProperty;
+
+/**
+ * Preset category based on usage context
+ */
+export type PresetCategory = 'enter' | 'exit' | 'generic';
+
+/**
+ * Type-safe keyframe for presets
+ * Only allows valid transform and style properties with correct value types
+ */
+export type PresetKeyframe<P extends BaseAnimatableProperty = BaseAnimatableProperty> = {
+  time: number;
+  property: P;
+  value: P extends TransformProperty
+    ? number
+    : P extends
+          | 'opacity'
+          | 'blur'
+          | 'brightness'
+          | 'contrast'
+          | 'saturate'
+          | 'dropShadowX'
+          | 'dropShadowY'
+          | 'dropShadowBlur'
+      ? number
+      : P extends 'dropShadowColor'
+        ? string
+        : never;
+  interpolation?: Interpolation;
+};
+
+/**
+ * Type-safe animation preset with category
+ */
+export interface TypedAnimationPreset {
+  id: string;
+  name: string;
+  category: PresetCategory;
+  keyframes: PresetKeyframe[];
+}
+
+/**
+ * Helper to create type-safe preset keyframes
+ */
+function kf<P extends BaseAnimatableProperty>(
+  time: number,
+  property: P,
+  value: PresetKeyframe<P>['value'],
+  interpolation?: Interpolation
+): PresetKeyframe<P> {
+  return { time, property, value, interpolation } as PresetKeyframe<P>;
+}
+
+/**
+ * Helper to create a type-safe preset
+ */
+function preset(
+  id: string,
+  name: string,
+  category: PresetCategory,
+  keyframes: PresetKeyframe[]
+): TypedAnimationPreset {
+  return { id, name, category, keyframes };
+}
 
 /**
  * All available animation presets
  * Keyframe times are normalized (0-1) and will be scaled by duration when applied
  */
-export const animationPresets: AnimationPreset[] = [
+export const animationPresets: TypedAnimationPreset[] = [
   // ============================================
   // Fade animations
   // ============================================
-  {
-    id: 'fade-in',
-    name: 'Fade In',
-    keyframes: [
-      {
-        time: 0,
-        property: 'opacity',
-        value: 0,
-        interpolation: { family: 'continuous', strategy: 'ease-out' }
-      },
-      {
-        time: 1,
-        property: 'opacity',
-        value: 1,
-        interpolation: { family: 'continuous', strategy: 'linear' }
-      }
-    ]
-  },
-  {
-    id: 'fade-out',
-    name: 'Fade Out',
-    keyframes: [
-      {
-        time: 0,
-        property: 'opacity',
-        value: 1,
-        interpolation: { family: 'continuous', strategy: 'ease-in' }
-      },
-      {
-        time: 1,
-        property: 'opacity',
-        value: 0,
-        interpolation: { family: 'continuous', strategy: 'linear' }
-      }
-    ]
-  },
+  preset('fade-in', 'Fade In', 'enter', [
+    kf(0, 'opacity', 0, { family: 'continuous', strategy: 'ease-out' }),
+    kf(1, 'opacity', 1, { family: 'continuous', strategy: 'linear' })
+  ]),
+  preset('fade-out', 'Fade Out', 'exit', [
+    kf(0, 'opacity', 1, { family: 'continuous', strategy: 'ease-in' }),
+    kf(1, 'opacity', 0, { family: 'continuous', strategy: 'linear' })
+  ]),
 
   // ============================================
   // Slide animations
   // ============================================
-  {
-    id: 'slide-in-left',
-    name: 'Slide In from Left',
-    keyframes: [
-      {
-        time: 0,
-        property: 'position.x',
-        value: -500,
-        interpolation: { family: 'continuous', strategy: 'ease-out' }
-      },
-      {
-        time: 0,
-        property: 'opacity',
-        value: 0,
-        interpolation: { family: 'continuous', strategy: 'ease-out' }
-      },
-      {
-        time: 1,
-        property: 'position.x',
-        value: 0,
-        interpolation: { family: 'continuous', strategy: 'linear' }
-      },
-      {
-        time: 1,
-        property: 'opacity',
-        value: 1,
-        interpolation: { family: 'continuous', strategy: 'linear' }
-      }
-    ]
-  },
-  {
-    id: 'slide-in-right',
-    name: 'Slide In from Right',
-    keyframes: [
-      {
-        time: 0,
-        property: 'position.x',
-        value: 500,
-        interpolation: { family: 'continuous', strategy: 'ease-out' }
-      },
-      {
-        time: 0,
-        property: 'opacity',
-        value: 0,
-        interpolation: { family: 'continuous', strategy: 'ease-out' }
-      },
-      {
-        time: 1,
-        property: 'position.x',
-        value: 0,
-        interpolation: { family: 'continuous', strategy: 'linear' }
-      },
-      {
-        time: 1,
-        property: 'opacity',
-        value: 1,
-        interpolation: { family: 'continuous', strategy: 'linear' }
-      }
-    ]
-  },
-  {
-    id: 'slide-in-top',
-    name: 'Slide In from Top',
-    keyframes: [
-      {
-        time: 0,
-        property: 'position.y',
-        value: -400,
-        interpolation: { family: 'continuous', strategy: 'ease-out' }
-      },
-      {
-        time: 0,
-        property: 'opacity',
-        value: 0,
-        interpolation: { family: 'continuous', strategy: 'ease-out' }
-      },
-      {
-        time: 1,
-        property: 'position.y',
-        value: 0,
-        interpolation: { family: 'continuous', strategy: 'linear' }
-      },
-      {
-        time: 1,
-        property: 'opacity',
-        value: 1,
-        interpolation: { family: 'continuous', strategy: 'linear' }
-      }
-    ]
-  },
-  {
-    id: 'slide-in-bottom',
-    name: 'Slide In from Bottom',
-    keyframes: [
-      {
-        time: 0,
-        property: 'position.y',
-        value: 400,
-        interpolation: { family: 'continuous', strategy: 'ease-out' }
-      },
-      {
-        time: 0,
-        property: 'opacity',
-        value: 0,
-        interpolation: { family: 'continuous', strategy: 'ease-out' }
-      },
-      {
-        time: 1,
-        property: 'position.y',
-        value: 0,
-        interpolation: { family: 'continuous', strategy: 'linear' }
-      },
-      {
-        time: 1,
-        property: 'opacity',
-        value: 1,
-        interpolation: { family: 'continuous', strategy: 'linear' }
-      }
-    ]
-  },
-  {
-    id: 'slide-out-left',
-    name: 'Slide Out to Left',
-    keyframes: [
-      {
-        time: 0,
-        property: 'position.x',
-        value: 0,
-        interpolation: { family: 'continuous', strategy: 'ease-in' }
-      },
-      {
-        time: 0,
-        property: 'opacity',
-        value: 1,
-        interpolation: { family: 'continuous', strategy: 'ease-in' }
-      },
-      {
-        time: 1,
-        property: 'position.x',
-        value: -500,
-        interpolation: { family: 'continuous', strategy: 'linear' }
-      },
-      {
-        time: 1,
-        property: 'opacity',
-        value: 0,
-        interpolation: { family: 'continuous', strategy: 'linear' }
-      }
-    ]
-  },
-  {
-    id: 'slide-out-right',
-    name: 'Slide Out to Right',
-    keyframes: [
-      {
-        time: 0,
-        property: 'position.x',
-        value: 0,
-        interpolation: { family: 'continuous', strategy: 'ease-in' }
-      },
-      {
-        time: 0,
-        property: 'opacity',
-        value: 1,
-        interpolation: { family: 'continuous', strategy: 'ease-in' }
-      },
-      {
-        time: 1,
-        property: 'position.x',
-        value: 500,
-        interpolation: { family: 'continuous', strategy: 'linear' }
-      },
-      {
-        time: 1,
-        property: 'opacity',
-        value: 0,
-        interpolation: { family: 'continuous', strategy: 'linear' }
-      }
-    ]
-  },
+  preset('slide-in-left', 'Slide In from Left', 'enter', [
+    kf(0, 'position.x', -500, { family: 'continuous', strategy: 'ease-out' }),
+    kf(0, 'opacity', 0, { family: 'continuous', strategy: 'ease-out' }),
+    kf(1, 'position.x', 0, { family: 'continuous', strategy: 'linear' }),
+    kf(1, 'opacity', 1, { family: 'continuous', strategy: 'linear' })
+  ]),
+  preset('slide-in-right', 'Slide In from Right', 'enter', [
+    kf(0, 'position.x', 500, { family: 'continuous', strategy: 'ease-out' }),
+    kf(0, 'opacity', 0, { family: 'continuous', strategy: 'ease-out' }),
+    kf(1, 'position.x', 0, { family: 'continuous', strategy: 'linear' }),
+    kf(1, 'opacity', 1, { family: 'continuous', strategy: 'linear' })
+  ]),
+  preset('slide-in-top', 'Slide In from Top', 'enter', [
+    kf(0, 'position.y', -400, { family: 'continuous', strategy: 'ease-out' }),
+    kf(0, 'opacity', 0, { family: 'continuous', strategy: 'ease-out' }),
+    kf(1, 'position.y', 0, { family: 'continuous', strategy: 'linear' }),
+    kf(1, 'opacity', 1, { family: 'continuous', strategy: 'linear' })
+  ]),
+  preset('slide-in-bottom', 'Slide In from Bottom', 'enter', [
+    kf(0, 'position.y', 400, { family: 'continuous', strategy: 'ease-out' }),
+    kf(0, 'opacity', 0, { family: 'continuous', strategy: 'ease-out' }),
+    kf(1, 'position.y', 0, { family: 'continuous', strategy: 'linear' }),
+    kf(1, 'opacity', 1, { family: 'continuous', strategy: 'linear' })
+  ]),
+  preset('slide-out-left', 'Slide Out to Left', 'exit', [
+    kf(0, 'position.x', 0, { family: 'continuous', strategy: 'ease-in' }),
+    kf(0, 'opacity', 1, { family: 'continuous', strategy: 'ease-in' }),
+    kf(1, 'position.x', -500, { family: 'continuous', strategy: 'linear' }),
+    kf(1, 'opacity', 0, { family: 'continuous', strategy: 'linear' })
+  ]),
+  preset('slide-out-right', 'Slide Out to Right', 'exit', [
+    kf(0, 'position.x', 0, { family: 'continuous', strategy: 'ease-in' }),
+    kf(0, 'opacity', 1, { family: 'continuous', strategy: 'ease-in' }),
+    kf(1, 'position.x', 500, { family: 'continuous', strategy: 'linear' }),
+    kf(1, 'opacity', 0, { family: 'continuous', strategy: 'linear' })
+  ]),
 
   // ============================================
   // Scale animations
   // ============================================
-  {
-    id: 'scale-in',
-    name: 'Scale In',
-    keyframes: [
-      {
-        time: 0,
-        property: 'scale.x',
-        value: 0,
-        interpolation: { family: 'continuous', strategy: 'ease-out' }
-      },
-      {
-        time: 0,
-        property: 'scale.y',
-        value: 0,
-        interpolation: { family: 'continuous', strategy: 'ease-out' }
-      },
-      {
-        time: 0,
-        property: 'opacity',
-        value: 0,
-        interpolation: { family: 'continuous', strategy: 'ease-out' }
-      },
-      {
-        time: 1,
-        property: 'scale.x',
-        value: 1,
-        interpolation: { family: 'continuous', strategy: 'linear' }
-      },
-      {
-        time: 1,
-        property: 'scale.y',
-        value: 1,
-        interpolation: { family: 'continuous', strategy: 'linear' }
-      },
-      {
-        time: 1,
-        property: 'opacity',
-        value: 1,
-        interpolation: { family: 'continuous', strategy: 'linear' }
-      }
-    ]
-  },
-  {
-    id: 'scale-out',
-    name: 'Scale Out',
-    keyframes: [
-      {
-        time: 0,
-        property: 'scale.x',
-        value: 1,
-        interpolation: { family: 'continuous', strategy: 'ease-in' }
-      },
-      {
-        time: 0,
-        property: 'scale.y',
-        value: 1,
-        interpolation: { family: 'continuous', strategy: 'ease-in' }
-      },
-      {
-        time: 0,
-        property: 'opacity',
-        value: 1,
-        interpolation: { family: 'continuous', strategy: 'ease-in' }
-      },
-      {
-        time: 1,
-        property: 'scale.x',
-        value: 0,
-        interpolation: { family: 'continuous', strategy: 'linear' }
-      },
-      {
-        time: 1,
-        property: 'scale.y',
-        value: 0,
-        interpolation: { family: 'continuous', strategy: 'linear' }
-      },
-      {
-        time: 1,
-        property: 'opacity',
-        value: 0,
-        interpolation: { family: 'continuous', strategy: 'linear' }
-      }
-    ]
-  },
-  {
-    id: 'pop',
-    name: 'Pop (Scale with Overshoot)',
-    keyframes: [
-      {
-        time: 0,
-        property: 'scale.x',
-        value: 0,
-        interpolation: { family: 'continuous', strategy: 'ease-out' }
-      },
-      {
-        time: 0,
-        property: 'scale.y',
-        value: 0,
-        interpolation: { family: 'continuous', strategy: 'ease-out' }
-      },
-      {
-        time: 0,
-        property: 'opacity',
-        value: 0,
-        interpolation: { family: 'continuous', strategy: 'ease-out' }
-      },
-      {
-        time: 0.6,
-        property: 'scale.x',
-        value: 1.15,
-        interpolation: { family: 'continuous', strategy: 'ease-out' }
-      },
-      {
-        time: 0.6,
-        property: 'scale.y',
-        value: 1.15,
-        interpolation: { family: 'continuous', strategy: 'ease-out' }
-      },
-      {
-        time: 0.6,
-        property: 'opacity',
-        value: 1,
-        interpolation: { family: 'continuous', strategy: 'ease-out' }
-      },
-      {
-        time: 1,
-        property: 'scale.x',
-        value: 1,
-        interpolation: { family: 'continuous', strategy: 'ease-in-out' }
-      },
-      {
-        time: 1,
-        property: 'scale.y',
-        value: 1,
-        interpolation: { family: 'continuous', strategy: 'ease-in-out' }
-      }
-    ]
-  },
+  preset('scale-in', 'Scale In', 'enter', [
+    kf(0, 'scale.x', 0, { family: 'continuous', strategy: 'ease-out' }),
+    kf(0, 'scale.y', 0, { family: 'continuous', strategy: 'ease-out' }),
+    kf(0, 'opacity', 0, { family: 'continuous', strategy: 'ease-out' }),
+    kf(1, 'scale.x', 1, { family: 'continuous', strategy: 'linear' }),
+    kf(1, 'scale.y', 1, { family: 'continuous', strategy: 'linear' }),
+    kf(1, 'opacity', 1, { family: 'continuous', strategy: 'linear' })
+  ]),
+  preset('scale-out', 'Scale Out', 'exit', [
+    kf(0, 'scale.x', 1, { family: 'continuous', strategy: 'ease-in' }),
+    kf(0, 'scale.y', 1, { family: 'continuous', strategy: 'ease-in' }),
+    kf(0, 'opacity', 1, { family: 'continuous', strategy: 'ease-in' }),
+    kf(1, 'scale.x', 0, { family: 'continuous', strategy: 'linear' }),
+    kf(1, 'scale.y', 0, { family: 'continuous', strategy: 'linear' }),
+    kf(1, 'opacity', 0, { family: 'continuous', strategy: 'linear' })
+  ]),
+  preset('pop', 'Pop (Scale with Overshoot)', 'enter', [
+    kf(0, 'scale.x', 0, { family: 'continuous', strategy: 'ease-out' }),
+    kf(0, 'scale.y', 0, { family: 'continuous', strategy: 'ease-out' }),
+    kf(0, 'opacity', 0, { family: 'continuous', strategy: 'ease-out' }),
+    kf(0.6, 'scale.x', 1.15, { family: 'continuous', strategy: 'ease-out' }),
+    kf(0.6, 'scale.y', 1.15, { family: 'continuous', strategy: 'ease-out' }),
+    kf(0.6, 'opacity', 1, { family: 'continuous', strategy: 'ease-out' }),
+    kf(1, 'scale.x', 1, { family: 'continuous', strategy: 'ease-in-out' }),
+    kf(1, 'scale.y', 1, { family: 'continuous', strategy: 'ease-in-out' })
+  ]),
 
   // ============================================
   // Bounce animations
   // ============================================
-  {
-    id: 'bounce',
-    name: 'Bounce',
-    keyframes: [
-      {
-        time: 0,
-        property: 'scale.y',
-        value: 1,
-        interpolation: { family: 'continuous', strategy: 'ease-in-out' }
-      },
-      {
-        time: 0.25,
-        property: 'scale.y',
-        value: 1.2,
-        interpolation: { family: 'continuous', strategy: 'ease-in-out' }
-      },
-      {
-        time: 0.5,
-        property: 'scale.y',
-        value: 0.9,
-        interpolation: { family: 'continuous', strategy: 'ease-in-out' }
-      },
-      {
-        time: 0.75,
-        property: 'scale.y',
-        value: 1.05,
-        interpolation: { family: 'continuous', strategy: 'ease-in-out' }
-      },
-      {
-        time: 1,
-        property: 'scale.y',
-        value: 1,
-        interpolation: { family: 'continuous', strategy: 'linear' }
-      }
-    ]
-  },
-  {
-    id: 'bounce-in',
-    name: 'Bounce In',
-    keyframes: [
-      {
-        time: 0,
-        property: 'scale.x',
-        value: 0,
-        interpolation: { family: 'continuous', strategy: 'ease-out' }
-      },
-      {
-        time: 0,
-        property: 'scale.y',
-        value: 0,
-        interpolation: { family: 'continuous', strategy: 'ease-out' }
-      },
-      {
-        time: 0,
-        property: 'opacity',
-        value: 0,
-        interpolation: { family: 'continuous', strategy: 'ease-out' }
-      },
-      {
-        time: 0.4,
-        property: 'scale.x',
-        value: 1.2,
-        interpolation: { family: 'continuous', strategy: 'ease-out' }
-      },
-      {
-        time: 0.4,
-        property: 'scale.y',
-        value: 1.2,
-        interpolation: { family: 'continuous', strategy: 'ease-out' }
-      },
-      {
-        time: 0.4,
-        property: 'opacity',
-        value: 1,
-        interpolation: { family: 'continuous', strategy: 'linear' }
-      },
-      {
-        time: 0.6,
-        property: 'scale.x',
-        value: 0.9,
-        interpolation: { family: 'continuous', strategy: 'ease-in-out' }
-      },
-      {
-        time: 0.6,
-        property: 'scale.y',
-        value: 0.9,
-        interpolation: { family: 'continuous', strategy: 'ease-in-out' }
-      },
-      {
-        time: 0.8,
-        property: 'scale.x',
-        value: 1.05,
-        interpolation: { family: 'continuous', strategy: 'ease-in-out' }
-      },
-      {
-        time: 0.8,
-        property: 'scale.y',
-        value: 1.05,
-        interpolation: { family: 'continuous', strategy: 'ease-in-out' }
-      },
-      {
-        time: 1,
-        property: 'scale.x',
-        value: 1,
-        interpolation: { family: 'continuous', strategy: 'ease-in-out' }
-      },
-      {
-        time: 1,
-        property: 'scale.y',
-        value: 1,
-        interpolation: { family: 'continuous', strategy: 'ease-in-out' }
-      }
-    ]
-  },
+  preset('bounce', 'Bounce', 'generic', [
+    kf(0, 'scale.y', 1, { family: 'continuous', strategy: 'ease-in-out' }),
+    kf(0.25, 'scale.y', 1.2, { family: 'continuous', strategy: 'ease-in-out' }),
+    kf(0.5, 'scale.y', 0.9, { family: 'continuous', strategy: 'ease-in-out' }),
+    kf(0.75, 'scale.y', 1.05, { family: 'continuous', strategy: 'ease-in-out' }),
+    kf(1, 'scale.y', 1, { family: 'continuous', strategy: 'linear' })
+  ]),
+  preset('bounce-in', 'Bounce In', 'enter', [
+    kf(0, 'scale.x', 0, { family: 'continuous', strategy: 'ease-out' }),
+    kf(0, 'scale.y', 0, { family: 'continuous', strategy: 'ease-out' }),
+    kf(0, 'opacity', 0, { family: 'continuous', strategy: 'ease-out' }),
+    kf(0.4, 'scale.x', 1.2, { family: 'continuous', strategy: 'ease-out' }),
+    kf(0.4, 'scale.y', 1.2, { family: 'continuous', strategy: 'ease-out' }),
+    kf(0.4, 'opacity', 1, { family: 'continuous', strategy: 'linear' }),
+    kf(0.6, 'scale.x', 0.9, { family: 'continuous', strategy: 'ease-in-out' }),
+    kf(0.6, 'scale.y', 0.9, { family: 'continuous', strategy: 'ease-in-out' }),
+    kf(0.8, 'scale.x', 1.05, { family: 'continuous', strategy: 'ease-in-out' }),
+    kf(0.8, 'scale.y', 1.05, { family: 'continuous', strategy: 'ease-in-out' }),
+    kf(1, 'scale.x', 1, { family: 'continuous', strategy: 'ease-in-out' }),
+    kf(1, 'scale.y', 1, { family: 'continuous', strategy: 'ease-in-out' })
+  ]),
 
   // ============================================
   // Rotation animations
   // ============================================
-  {
-    id: 'rotate-in',
-    name: 'Rotate In',
-    keyframes: [
-      {
-        time: 0,
-        property: 'rotation.z',
-        value: -Math.PI,
-        interpolation: { family: 'continuous', strategy: 'ease-out' }
-      },
-      {
-        time: 0,
-        property: 'opacity',
-        value: 0,
-        interpolation: { family: 'continuous', strategy: 'ease-out' }
-      },
-      {
-        time: 0,
-        property: 'scale.x',
-        value: 0.5,
-        interpolation: { family: 'continuous', strategy: 'ease-out' }
-      },
-      {
-        time: 0,
-        property: 'scale.y',
-        value: 0.5,
-        interpolation: { family: 'continuous', strategy: 'ease-out' }
-      },
-      {
-        time: 1,
-        property: 'rotation.z',
-        value: 0,
-        interpolation: { family: 'continuous', strategy: 'linear' }
-      },
-      {
-        time: 1,
-        property: 'opacity',
-        value: 1,
-        interpolation: { family: 'continuous', strategy: 'linear' }
-      },
-      {
-        time: 1,
-        property: 'scale.x',
-        value: 1,
-        interpolation: { family: 'continuous', strategy: 'linear' }
-      },
-      {
-        time: 1,
-        property: 'scale.y',
-        value: 1,
-        interpolation: { family: 'continuous', strategy: 'linear' }
-      }
-    ]
-  },
-  {
-    id: 'spin',
-    name: 'Spin (Full Rotation)',
-    keyframes: [
-      {
-        time: 0,
-        property: 'rotation.z',
-        value: 0,
-        interpolation: { family: 'continuous', strategy: 'linear' }
-      },
-      {
-        time: 1,
-        property: 'rotation.z',
-        value: Math.PI * 2,
-        interpolation: { family: 'continuous', strategy: 'linear' }
-      }
-    ]
-  },
+  preset('rotate-in', 'Rotate In', 'enter', [
+    kf(0, 'rotation.z', -Math.PI, { family: 'continuous', strategy: 'ease-out' }),
+    kf(0, 'opacity', 0, { family: 'continuous', strategy: 'ease-out' }),
+    kf(0, 'scale.x', 0.5, { family: 'continuous', strategy: 'ease-out' }),
+    kf(0, 'scale.y', 0.5, { family: 'continuous', strategy: 'ease-out' }),
+    kf(1, 'rotation.z', 0, { family: 'continuous', strategy: 'linear' }),
+    kf(1, 'opacity', 1, { family: 'continuous', strategy: 'linear' }),
+    kf(1, 'scale.x', 1, { family: 'continuous', strategy: 'linear' }),
+    kf(1, 'scale.y', 1, { family: 'continuous', strategy: 'linear' })
+  ]),
+  preset('spin', 'Spin (Full Rotation)', 'generic', [
+    kf(0, 'rotation.z', 0, { family: 'continuous', strategy: 'linear' }),
+    kf(1, 'rotation.z', Math.PI * 2, { family: 'continuous', strategy: 'linear' })
+  ]),
 
   // ============================================
   // Attention/emphasis animations
   // ============================================
-  {
-    id: 'pulse',
-    name: 'Pulse',
-    keyframes: [
-      {
-        time: 0,
-        property: 'scale.x',
-        value: 1,
-        interpolation: { family: 'continuous', strategy: 'ease-in-out' }
-      },
-      {
-        time: 0,
-        property: 'scale.y',
-        value: 1,
-        interpolation: { family: 'continuous', strategy: 'ease-in-out' }
-      },
-      {
-        time: 0.5,
-        property: 'scale.x',
-        value: 1.1,
-        interpolation: { family: 'continuous', strategy: 'ease-in-out' }
-      },
-      {
-        time: 0.5,
-        property: 'scale.y',
-        value: 1.1,
-        interpolation: { family: 'continuous', strategy: 'ease-in-out' }
-      },
-      {
-        time: 1,
-        property: 'scale.x',
-        value: 1,
-        interpolation: { family: 'continuous', strategy: 'ease-in-out' }
-      },
-      {
-        time: 1,
-        property: 'scale.y',
-        value: 1,
-        interpolation: { family: 'continuous', strategy: 'ease-in-out' }
-      }
-    ]
-  },
-  {
-    id: 'shake',
-    name: 'Shake',
-    keyframes: [
-      {
-        time: 0,
-        property: 'position.x',
-        value: 0,
-        interpolation: { family: 'continuous', strategy: 'linear' }
-      },
-      {
-        time: 0.1,
-        property: 'position.x',
-        value: -10,
-        interpolation: { family: 'continuous', strategy: 'linear' }
-      },
-      {
-        time: 0.2,
-        property: 'position.x',
-        value: 10,
-        interpolation: { family: 'continuous', strategy: 'linear' }
-      },
-      {
-        time: 0.3,
-        property: 'position.x',
-        value: -10,
-        interpolation: { family: 'continuous', strategy: 'linear' }
-      },
-      {
-        time: 0.4,
-        property: 'position.x',
-        value: 10,
-        interpolation: { family: 'continuous', strategy: 'linear' }
-      },
-      {
-        time: 0.5,
-        property: 'position.x',
-        value: -5,
-        interpolation: { family: 'continuous', strategy: 'linear' }
-      },
-      {
-        time: 0.6,
-        property: 'position.x',
-        value: 5,
-        interpolation: { family: 'continuous', strategy: 'linear' }
-      },
-      {
-        time: 0.7,
-        property: 'position.x',
-        value: -2,
-        interpolation: { family: 'continuous', strategy: 'linear' }
-      },
-      {
-        time: 0.8,
-        property: 'position.x',
-        value: 2,
-        interpolation: { family: 'continuous', strategy: 'linear' }
-      },
-      {
-        time: 1,
-        property: 'position.x',
-        value: 0,
-        interpolation: { family: 'continuous', strategy: 'linear' }
-      }
-    ]
-  },
-  {
-    id: 'float',
-    name: 'Float (Subtle Up/Down)',
-    keyframes: [
-      {
-        time: 0,
-        property: 'position.y',
-        value: 0,
-        interpolation: { family: 'continuous', strategy: 'ease-in-out' }
-      },
-      {
-        time: 0.5,
-        property: 'position.y',
-        value: -15,
-        interpolation: { family: 'continuous', strategy: 'ease-in-out' }
-      },
-      {
-        time: 1,
-        property: 'position.y',
-        value: 0,
-        interpolation: { family: 'continuous', strategy: 'ease-in-out' }
-      }
-    ]
-  },
-  {
-    id: 'glow',
-    name: 'Glow (Opacity Pulse)',
-    keyframes: [
-      {
-        time: 0,
-        property: 'opacity',
-        value: 1,
-        interpolation: { family: 'continuous', strategy: 'ease-in-out' }
-      },
-      {
-        time: 0.5,
-        property: 'opacity',
-        value: 0.6,
-        interpolation: { family: 'continuous', strategy: 'ease-in-out' }
-      },
-      {
-        time: 1,
-        property: 'opacity',
-        value: 1,
-        interpolation: { family: 'continuous', strategy: 'ease-in-out' }
-      }
-    ]
-  },
+  preset('pulse', 'Pulse', 'generic', [
+    kf(0, 'scale.x', 1, { family: 'continuous', strategy: 'ease-in-out' }),
+    kf(0, 'scale.y', 1, { family: 'continuous', strategy: 'ease-in-out' }),
+    kf(0.5, 'scale.x', 1.1, { family: 'continuous', strategy: 'ease-in-out' }),
+    kf(0.5, 'scale.y', 1.1, { family: 'continuous', strategy: 'ease-in-out' }),
+    kf(1, 'scale.x', 1, { family: 'continuous', strategy: 'ease-in-out' }),
+    kf(1, 'scale.y', 1, { family: 'continuous', strategy: 'ease-in-out' })
+  ]),
+  preset('shake', 'Shake', 'generic', [
+    kf(0, 'position.x', 0, { family: 'continuous', strategy: 'linear' }),
+    kf(0.1, 'position.x', -10, { family: 'continuous', strategy: 'linear' }),
+    kf(0.2, 'position.x', 10, { family: 'continuous', strategy: 'linear' }),
+    kf(0.3, 'position.x', -10, { family: 'continuous', strategy: 'linear' }),
+    kf(0.4, 'position.x', 10, { family: 'continuous', strategy: 'linear' }),
+    kf(0.5, 'position.x', -5, { family: 'continuous', strategy: 'linear' }),
+    kf(0.6, 'position.x', 5, { family: 'continuous', strategy: 'linear' }),
+    kf(0.7, 'position.x', -2, { family: 'continuous', strategy: 'linear' }),
+    kf(0.8, 'position.x', 2, { family: 'continuous', strategy: 'linear' }),
+    kf(1, 'position.x', 0, { family: 'continuous', strategy: 'linear' })
+  ]),
+  preset('float', 'Float (Subtle Up/Down)', 'generic', [
+    kf(0, 'position.y', 0, { family: 'continuous', strategy: 'ease-in-out' }),
+    kf(0.5, 'position.y', -15, { family: 'continuous', strategy: 'ease-in-out' }),
+    kf(1, 'position.y', 0, { family: 'continuous', strategy: 'ease-in-out' })
+  ]),
+  preset('glow', 'Glow (Opacity Pulse)', 'generic', [
+    kf(0, 'opacity', 1, { family: 'continuous', strategy: 'ease-in-out' }),
+    kf(0.5, 'opacity', 0.6, { family: 'continuous', strategy: 'ease-in-out' }),
+    kf(1, 'opacity', 1, { family: 'continuous', strategy: 'ease-in-out' })
+  ]),
 
   // ============================================
   // Zoom animations
   // ============================================
-  {
-    id: 'zoom-in',
-    name: 'Zoom In (from far)',
-    keyframes: [
-      {
-        time: 0,
-        property: 'scale.x',
-        value: 0.3,
-        interpolation: { family: 'continuous', strategy: 'ease-out' }
-      },
-      {
-        time: 0,
-        property: 'scale.y',
-        value: 0.3,
-        interpolation: { family: 'continuous', strategy: 'ease-out' }
-      },
-      {
-        time: 0,
-        property: 'opacity',
-        value: 0,
-        interpolation: { family: 'continuous', strategy: 'ease-out' }
-      },
-      {
-        time: 1,
-        property: 'scale.x',
-        value: 1,
-        interpolation: { family: 'continuous', strategy: 'linear' }
-      },
-      {
-        time: 1,
-        property: 'scale.y',
-        value: 1,
-        interpolation: { family: 'continuous', strategy: 'linear' }
-      },
-      {
-        time: 1,
-        property: 'opacity',
-        value: 1,
-        interpolation: { family: 'continuous', strategy: 'linear' }
-      }
-    ]
-  },
-  {
-    id: 'zoom-out',
-    name: 'Zoom Out (to far)',
-    keyframes: [
-      {
-        time: 0,
-        property: 'scale.x',
-        value: 1,
-        interpolation: { family: 'continuous', strategy: 'ease-in' }
-      },
-      {
-        time: 0,
-        property: 'scale.y',
-        value: 1,
-        interpolation: { family: 'continuous', strategy: 'ease-in' }
-      },
-      {
-        time: 0,
-        property: 'opacity',
-        value: 1,
-        interpolation: { family: 'continuous', strategy: 'ease-in' }
-      },
-      {
-        time: 1,
-        property: 'scale.x',
-        value: 0.3,
-        interpolation: { family: 'continuous', strategy: 'linear' }
-      },
-      {
-        time: 1,
-        property: 'scale.y',
-        value: 0.3,
-        interpolation: { family: 'continuous', strategy: 'linear' }
-      },
-      {
-        time: 1,
-        property: 'opacity',
-        value: 0,
-        interpolation: { family: 'continuous', strategy: 'linear' }
-      }
-    ]
-  },
+  preset('zoom-in', 'Zoom In (from far)', 'enter', [
+    kf(0, 'scale.x', 0.3, { family: 'continuous', strategy: 'ease-out' }),
+    kf(0, 'scale.y', 0.3, { family: 'continuous', strategy: 'ease-out' }),
+    kf(0, 'opacity', 0, { family: 'continuous', strategy: 'ease-out' }),
+    kf(1, 'scale.x', 1, { family: 'continuous', strategy: 'linear' }),
+    kf(1, 'scale.y', 1, { family: 'continuous', strategy: 'linear' }),
+    kf(1, 'opacity', 1, { family: 'continuous', strategy: 'linear' })
+  ]),
+  preset('zoom-out', 'Zoom Out (to far)', 'exit', [
+    kf(0, 'scale.x', 1, { family: 'continuous', strategy: 'ease-in' }),
+    kf(0, 'scale.y', 1, { family: 'continuous', strategy: 'ease-in' }),
+    kf(0, 'opacity', 1, { family: 'continuous', strategy: 'ease-in' }),
+    kf(1, 'scale.x', 0.3, { family: 'continuous', strategy: 'linear' }),
+    kf(1, 'scale.y', 0.3, { family: 'continuous', strategy: 'linear' }),
+    kf(1, 'opacity', 0, { family: 'continuous', strategy: 'linear' })
+  ]),
 
   // ============================================
   // Special effects
   // ============================================
-  {
-    id: 'flip-in-x',
-    name: 'Flip In (Horizontal)',
-    keyframes: [
-      {
-        time: 0,
-        property: 'rotation.y',
-        value: Math.PI / 2,
-        interpolation: { family: 'continuous', strategy: 'ease-out' }
-      },
-      {
-        time: 0,
-        property: 'opacity',
-        value: 0,
-        interpolation: { family: 'continuous', strategy: 'ease-out' }
-      },
-      {
-        time: 1,
-        property: 'rotation.y',
-        value: 0,
-        interpolation: { family: 'continuous', strategy: 'linear' }
-      },
-      {
-        time: 1,
-        property: 'opacity',
-        value: 1,
-        interpolation: { family: 'continuous', strategy: 'linear' }
-      }
-    ]
-  },
-  {
-    id: 'flip-in-y',
-    name: 'Flip In (Vertical)',
-    keyframes: [
-      {
-        time: 0,
-        property: 'rotation.x',
-        value: Math.PI / 2,
-        interpolation: { family: 'continuous', strategy: 'ease-out' }
-      },
-      {
-        time: 0,
-        property: 'opacity',
-        value: 0,
-        interpolation: { family: 'continuous', strategy: 'ease-out' }
-      },
-      {
-        time: 1,
-        property: 'rotation.x',
-        value: 0,
-        interpolation: { family: 'continuous', strategy: 'linear' }
-      },
-      {
-        time: 1,
-        property: 'opacity',
-        value: 1,
-        interpolation: { family: 'continuous', strategy: 'linear' }
-      }
-    ]
-  },
-  {
-    id: 'swing',
-    name: 'Swing',
-    keyframes: [
-      {
-        time: 0,
-        property: 'rotation.z',
-        value: 0,
-        interpolation: { family: 'continuous', strategy: 'ease-in-out' }
-      },
-      {
-        time: 0.2,
-        property: 'rotation.z',
-        value: 0.26,
-        interpolation: { family: 'continuous', strategy: 'ease-in-out' }
-      }, // ~15deg
-      {
-        time: 0.4,
-        property: 'rotation.z',
-        value: -0.17,
-        interpolation: { family: 'continuous', strategy: 'ease-in-out' }
-      }, // ~-10deg
-      {
-        time: 0.6,
-        property: 'rotation.z',
-        value: 0.09,
-        interpolation: { family: 'continuous', strategy: 'ease-in-out' }
-      }, // ~5deg
-      {
-        time: 0.8,
-        property: 'rotation.z',
-        value: -0.05,
-        interpolation: { family: 'continuous', strategy: 'ease-in-out' }
-      }, // ~-3deg
-      {
-        time: 1,
-        property: 'rotation.z',
-        value: 0,
-        interpolation: { family: 'continuous', strategy: 'ease-in-out' }
-      }
-    ]
-  }
+  preset('flip-in-x', 'Flip In (Horizontal)', 'enter', [
+    kf(0, 'rotation.y', Math.PI / 2, { family: 'continuous', strategy: 'ease-out' }),
+    kf(0, 'opacity', 0, { family: 'continuous', strategy: 'ease-out' }),
+    kf(1, 'rotation.y', 0, { family: 'continuous', strategy: 'linear' }),
+    kf(1, 'opacity', 1, { family: 'continuous', strategy: 'linear' })
+  ]),
+  preset('flip-in-y', 'Flip In (Vertical)', 'enter', [
+    kf(0, 'rotation.x', Math.PI / 2, { family: 'continuous', strategy: 'ease-out' }),
+    kf(0, 'opacity', 0, { family: 'continuous', strategy: 'ease-out' }),
+    kf(1, 'rotation.x', 0, { family: 'continuous', strategy: 'linear' }),
+    kf(1, 'opacity', 1, { family: 'continuous', strategy: 'linear' })
+  ]),
+  preset('swing', 'Swing', 'generic', [
+    kf(0, 'rotation.z', 0, { family: 'continuous', strategy: 'ease-in-out' }),
+    kf(0.2, 'rotation.z', 0.26, { family: 'continuous', strategy: 'ease-in-out' }), // ~15deg
+    kf(0.4, 'rotation.z', -0.17, { family: 'continuous', strategy: 'ease-in-out' }), // ~-10deg
+    kf(0.6, 'rotation.z', 0.09, { family: 'continuous', strategy: 'ease-in-out' }), // ~5deg
+    kf(0.8, 'rotation.z', -0.05, { family: 'continuous', strategy: 'ease-in-out' }), // ~-3deg
+    kf(1, 'rotation.z', 0, { family: 'continuous', strategy: 'ease-in-out' })
+  ])
 ];
 
 /**
@@ -936,7 +311,7 @@ export type AnimationPresetId = z.infer<typeof AnimationPresetIdSchema>;
 /**
  * Get a preset by ID
  */
-export function getPresetById(id: string): AnimationPreset | undefined {
+export function getPresetById(id: string): TypedAnimationPreset | undefined {
   return animationPresets.find((p) => p.id === id);
 }
 
@@ -946,3 +321,24 @@ export function getPresetById(id: string): AnimationPreset | undefined {
 export function getPresetIds(): string[] {
   return animationPresets.map((p) => p.id);
 }
+
+/**
+ * Get presets suitable for enter transitions (fade-in, slide-in, etc.)
+ */
+export function getEnterPresets(): TypedAnimationPreset[] {
+  return animationPresets.filter((p) => p.category === 'enter');
+}
+
+/**
+ * Get presets suitable for exit transitions (fade-out, slide-out, etc.)
+ */
+export function getExitPresets(): TypedAnimationPreset[] {
+  return animationPresets.filter((p) => p.category === 'exit');
+}
+
+/**
+ * Get generic animation presets (shake, pulse, etc.)
+ */
+export function getGenericPresets(): TypedAnimationPreset[] {
+  return animationPresets.filter((p) => p.category === 'generic');
+}
diff --git a/src/lib/schemas/animation.ts b/src/lib/schemas/animation.ts
index f20318b..16917f9 100644
--- a/src/lib/schemas/animation.ts
+++ b/src/lib/schemas/animation.ts
@@ -222,6 +222,19 @@ export const KeyframeSchema = z.object({
 
 export const LayerTypeSchema = z.enum(getAvailableLayerTypes());
 
+// ============================================
+// Layer Transitions
+// ============================================
+
+/**
+ * Layer transition configuration
+ * Defines an animation preset to apply automatically at layer enter/exit
+ */
+export const LayerTransitionSchema = z.object({
+  presetId: z.string().describe('ID of the animation preset to apply'),
+  duration: z.number().positive().describe('Duration of the transition in seconds')
+});
+
 // ============================================
 // Layer
 // ============================================
@@ -259,7 +272,17 @@ export const LayerSchema = BaseLayerFieldsSchema.extend({
    * Combined with enter/exit times, this determines what portion of content is shown.
    * Only applicable when contentDuration is defined.
    */
-  contentOffset: z.number().min(0).optional()
+  contentOffset: z.number().min(0).optional(),
+  /**
+   * Enter transition - animation preset to apply automatically when layer enters
+   * Applied at runtime without creating keyframes
+   */
+  enterTransition: LayerTransitionSchema.optional(),
+  /**
+   * Exit transition - animation preset to apply automatically when layer exits
+   * Applied at runtime without creating keyframes
+   */
+  exitTransition: LayerTransitionSchema.optional()
 }).refine(
   (data) => {
     // Validate contentOffset doesn't exceed contentDuration
@@ -368,4 +391,5 @@ export type ProjectData = z.infer<typeof projectDataSchema>;
 
 export type ViewportSettings = z.infer<typeof ViewportSettingsSchema>;
 export type AnimationPreset = z.infer<typeof AnimationPresetSchema>;
+export type LayerTransition = z.infer<typeof LayerTransitionSchema>;
 export type ExportSettings = z.infer<typeof ExportSettingsSchema>;
diff --git a/src/lib/stores/project.svelte.ts b/src/lib/stores/project.svelte.ts
index 9d6109c..171b1e2 100644
--- a/src/lib/stores/project.svelte.ts
+++ b/src/lib/stores/project.svelte.ts
@@ -896,8 +896,8 @@ export class ProjectStore {
       // Pre-calculate values for all layers using shared rendering functions
       for (const layer of this.state.layers) {
         frameData[layer.id] = {
-          transform: getLayerTransform(layer, time),
-          style: getLayerStyle(layer, time),
+          transform: getLayerTransform(layer, time, this.state.duration),
+          style: getLayerStyle(layer, time, this.state.duration),
           customProps: getLayerProps(layer, time)
         };
       }