diff --git a/src/lib/ai/mutations.ts b/src/lib/ai/mutations.ts
index a249b65..7c71a80 100644
--- a/src/lib/ai/mutations.ts
+++ b/src/lib/ai/mutations.ts
@@ -131,6 +131,26 @@ export function mutateCreateLayer(
       layer.contentOffset = input.contentOffset;
     }
 
+    // Set enter/exit transitions if provided
+    if (input.enterTransition) {
+      const preset = getPresetById(input.enterTransition.presetId);
+      if (preset) {
+        layer.enterTransition = {
+          presetId: input.enterTransition.presetId,
+          duration: input.enterTransition.duration
+        };
+      }
+    }
+    if (input.exitTransition) {
+      const preset = getPresetById(input.exitTransition.presetId);
+      if (preset) {
+        layer.exitTransition = {
+          presetId: input.exitTransition.presetId,
+          duration: input.exitTransition.duration
+        };
+      }
+    }
+
     // Mutate project
     ctx.project.layers.push(layer);
 
@@ -252,6 +272,34 @@ export function mutateEditLayer(ctx: MutationContext, input: EditLayerInput): Ed
       layer.contentOffset = Math.max(0, input.contentOffset);
     }
 
+    // Update enter/exit transitions
+    if (input.enterTransition !== undefined) {
+      if (input.enterTransition) {
+        const preset = getPresetById(input.enterTransition.presetId);
+        if (preset) {
+          layer.enterTransition = {
+            presetId: input.enterTransition.presetId,
+            duration: input.enterTransition.duration
+          };
+        }
+      } else {
+        layer.enterTransition = undefined;
+      }
+    }
+    if (input.exitTransition !== undefined) {
+      if (input.exitTransition) {
+        const preset = getPresetById(input.exitTransition.presetId);
+        if (preset) {
+          layer.exitTransition = {
+            presetId: input.exitTransition.presetId,
+            duration: input.exitTransition.duration
+          };
+        }
+      } else {
+        layer.exitTransition = undefined;
+      }
+    }
+
     return {
       success: true,
       layerId: resolvedId,
diff --git a/src/lib/ai/schemas.ts b/src/lib/ai/schemas.ts
index 21bd425..8ea98f7 100644
--- a/src/lib/ai/schemas.ts
+++ b/src/lib/ai/schemas.ts
@@ -45,6 +45,19 @@ const TimingFieldsSchema = z.object({
     .describe('Start offset for trimming media content (seconds)')
 });
 
+// ============================================
+// Layer Transition (enter/exit preset)
+// ============================================
+
+const LayerTransitionFieldSchema = z
+  .object({
+    presetId: AnimationPresetIdSchema.describe('Animation preset ID to apply as transition'),
+    duration: z.number().positive().describe('Transition duration in seconds (typically 0.3-0.8)')
+  })
+  .describe(
+    'Automatic animation applied at layer enter/exit. Position presets are relative offsets from the layer base position. Scale/opacity are factors (0→1 means invisible→visible).'
+  );
+
 // ============================================
 // Layer Type + Props Union
 // ============================================
@@ -123,9 +136,17 @@ export const CreateLayerInputSchema = z
     // Layer type and properties
     layer: LayerTypePropsUnion,
 
-    // Animation (preset OR custom keyframes)
+    // Transitions (automatic enter/exit animations, no keyframes created)
+    enterTransition: LayerTransitionFieldSchema.optional().describe(
+      'Auto-play animation when layer enters (e.g., fade-in, slide-in-left). Applied as offset/factor on base transform.'
+    ),
+    exitTransition: LayerTransitionFieldSchema.optional().describe(
+      'Auto-play animation when layer exits (e.g., fade-out, slide-out-right). Applied as offset/factor on base transform.'
+    ),
+
+    // Animation (preset OR custom keyframes - baked as keyframes)
     animation: CreateLayerAnimationSchema.optional().describe(
-      'Animation: preset OR custom keyframes'
+      'Animation as keyframes: preset (baked at startTime) OR custom keyframes'
     )
   })
   .refine(
@@ -199,7 +220,15 @@ export const EditLayerInputSchema = z
       .describe('Layer-specific properties to update (merged with existing)'),
 
     // Timing fields
-    ...TimingFieldsSchema.shape
+    ...TimingFieldsSchema.shape,
+
+    // Transitions (automatic enter/exit animations)
+    enterTransition: LayerTransitionFieldSchema.optional().describe(
+      'Set enter transition preset. Omit to keep existing, set to null to remove.'
+    ),
+    exitTransition: LayerTransitionFieldSchema.optional().describe(
+      'Set exit transition preset. Omit to keep existing, set to null to remove.'
+    )
   })
   .refine(
     (data) => {
@@ -295,11 +324,12 @@ export const animationTools = {
 - Position, rotation, scale, anchor point
 - Layer-specific props (text content, colors, sizes, etc.)
 - Style (opacity, blur, filters, drop shadow)
-- Animation via preset OR custom keyframes
+- Enter/exit transitions (automatic preset animations at layer boundaries)
+- Animation via preset (baked as keyframes) OR custom keyframes
 - Timing (enter/exit times, content duration/offset)
 
-Example: Create a text layer with animation:
-{ "layer": { "type": "text", "props": { "content": "Hello World", "fontSize": 48, "fill": "#ffffff" } }, "transform": { "position": { "x": 0, "y": -200 } }, "animation": { "preset": { "id": "fade-in", "startTime": 0, "duration": 0.5 } } }`,
+Example with enter transition:
+{ "layer": { "type": "text", "props": { "content": "Hello", "fontSize": 48, "fill": "#fff" } }, "transform": { "position": { "x": 0, "y": -200 } }, "enterTransition": { "presetId": "fade-in", "duration": 0.5 }, "exitTransition": { "presetId": "fade-out", "duration": 0.3 } }`,
     inputSchema: CreateLayerInputSchema
   }),
 
@@ -308,6 +338,7 @@ Example: Create a text layer with animation:
 - Provide only the fields you want to change
 - transform/style sections replace entire object if provided
 - props are merged with existing props
+- enterTransition/exitTransition: set automatic enter/exit animations
 - Use layer ID from create_layer response or layer name`,
     inputSchema: EditLayerInputSchema
   }),
diff --git a/src/lib/ai/system-prompt.ts b/src/lib/ai/system-prompt.ts
index 8e0eb37..dc7587a 100644
--- a/src/lib/ai/system-prompt.ts
+++ b/src/lib/ai/system-prompt.ts
@@ -3,9 +3,11 @@
  *
  * Tools: create_layer, edit_layer, remove_layer, configure_project, group_layers, ungroup_layers
  * Animation: can use preset AND/OR custom keyframes in create_layer.
+ * Transitions: can set enterTransition/exitTransition on layers via edit_layer.
  */
 import type { Project } from '$lib/types/animation';
 import { projectDataSchema } from '$lib/schemas/animation';
+import { getPresetsSummaryForAI } from '$lib/engine/presets';
 import goodExampleRaw from '$lib/good-example.json';
 
 const exampleProject = projectDataSchema.parse(goodExampleRaw);
@@ -29,12 +31,47 @@ Steps: present plan (if full video) → execute tool calls → conclude with a f
 
 ## Tools
 
-- **create_layer**: Layer type + props + transform + style + animation + timing
-- **edit_layer**: Modify existing layer (provide fields to change)
+- **create_layer**: Layer type + props + transform + style + animation + timing + enterTransition/exitTransition
+- **edit_layer**: Modify existing layer (provide fields to change, including enterTransition/exitTransition)
 - **remove_layer**: Delete layer by ID or name
 - **configure_project**: Project settings (name, dimensions, duration, background)
 - **group_layers** / **ungroup_layers**: Group/ungroup layers
 
+## Animation System
+
+Two complementary ways to animate layers:
+
+### 1. Transitions (enterTransition / exitTransition)
+Automatic enter/exit animations applied at runtime (no keyframes created).
+Set via create_layer or edit_layer. Position presets are relative offsets from the layer's base position.
+Scale and opacity presets are applied as factors (e.g., scale 0→1 means from invisible to full size).
+When the transition finishes, the layer returns to its base values.
+
+\`\`\`json
+{ "enterTransition": { "presetId": "fade-in", "duration": 0.5 } }
+{ "exitTransition": { "presetId": "slide-out-left", "duration": 0.3 } }
+\`\`\`
+
+### 2. Keyframe Presets (animation.preset in create_layer)
+Bakes preset keyframes onto the layer at a specific time. Good for emphasis effects or custom timing.
+Position values are added as offsets to the layer's current base position.
+
+\`\`\`json
+{ "animation": { "preset": { "id": "pulse", "startTime": 1.0, "duration": 0.5 } } }
+\`\`\`
+
+### 3. Custom Keyframes (animation.keyframes in create_layer)
+Full control over individual property animations. Can be combined with presets.
+
+### When to use which:
+- **Transitions**: Best for entrance/exit effects. No keyframes cluttering the timeline. Automatically tied to layer enter/exit time.
+- **Keyframe presets**: Best for emphasis effects (pulse, shake, bounce) at specific moments.
+- **Custom keyframes**: Best for unique, hand-crafted animations.
+
+## Available Presets
+
+${getPresetsSummaryForAI()}
+
 ## Graphic Style - MANDATORY DIRECTIVES
 
 ### Backgrounds
@@ -106,8 +143,8 @@ ${JSON.stringify(exampleProject)}
 
 When the user gives no specific animation directions, apply at minimum:
 
-- **Entrances/Exits**: Fade in from opacity:0 + slight scale (0.95→1) + blur (filter.blur 8→0). Add a gentle slide (20-40px) from a direction. Reverse for exits.
-- **Text layers**: At minimum, appear from opacity:0 with a subtle slide-up on Y (~20px). Titles can add scale+blur for more impact.
+- **Entrances/Exits**: Use enterTransition/exitTransition with appropriate presets (fade-in, slide-in-*, scale-in for entrances; fade-out, slide-out-*, scale-out for exits). Default duration 0.3-0.6s.
+- **Text layers**: At minimum, use enterTransition with fade-in or slide-in-bottom (duration 0.4s). Titles can use pop or bounce-in for more impact.
 - **Flat backgrounds**: If a background feels too plain, add 1-2 decorative circle shapes (≈200x200, high blur ≈150, low opacity ≈0.15-0.25) as soft ambient blobs with gentle position drift.
 
 These are sensible defaults — override freely when the user provides specific creative direction.
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..4221d03
--- /dev/null
+++ b/src/lib/components/editor/panels/properties/animation-preset-select.svelte
@@ -0,0 +1,208 @@
+<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, PresetKeyframe } from '$lib/engine/presets';
+  import { interpolateValue } from '$lib/engine/interpolation';
+
+  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));
+
+  /**
+   * Interpolate preset keyframes at a given normalized time (0-1).
+   * Returns computed CSS transform and opacity for the preview box.
+   */
+  function interpolatePresetAt(
+    keyframes: PresetKeyframe[],
+    time: number
+  ): { transform: string; opacity: number } {
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    const byProperty = new Map<string, PresetKeyframe[]>();
+    for (const kf of keyframes) {
+      const existing = byProperty.get(kf.property) ?? [];
+      byProperty.set(kf.property, [...existing, kf]);
+    }
+
+    let tx = 0,
+      ty = 0;
+    let sx = 1,
+      sy = 1;
+    let rz = 0,
+      rx = 0,
+      ry = 0;
+    let opacity = 1;
+
+    for (const [property, kfs] of byProperty) {
+      const sorted = [...kfs].sort((a, b) => a.time - b.time);
+
+      let prev = sorted[0];
+      let next = sorted[sorted.length - 1];
+      for (let i = 0; i < sorted.length - 1; i++) {
+        if (time >= sorted[i].time && time <= sorted[i + 1].time) {
+          prev = sorted[i];
+          next = sorted[i + 1];
+          break;
+        }
+      }
+
+      const progress = prev.time === next.time ? 1 : (time - prev.time) / (next.time - prev.time);
+      const clamped = Math.max(0, Math.min(1, progress));
+
+      const val = interpolateValue(
+        prev.value,
+        next.value,
+        clamped,
+        next.interpolation ?? { family: 'continuous', strategy: 'ease-in-out' }
+      ) as number;
+
+      // Scale position values for preview (500px → ~20px in the small box)
+      const posScale = 0.04;
+
+      switch (property) {
+        case 'position.x':
+          tx = val * posScale;
+          break;
+        case 'position.y':
+          ty = val * posScale;
+          break;
+        case 'scale.x':
+          sx = val;
+          break;
+        case 'scale.y':
+          sy = val;
+          break;
+        case 'rotation.z':
+          rz = val;
+          break;
+        case 'rotation.x':
+          rx = val;
+          break;
+        case 'rotation.y':
+          ry = val;
+          break;
+        case 'opacity':
+          opacity = val;
+          break;
+      }
+    }
+
+    const parts: string[] = [];
+    parts.push(`translate(${tx}px, ${ty}px)`);
+    if (rx !== 0) parts.push(`rotateX(${rx}rad)`);
+    if (ry !== 0) parts.push(`rotateY(${ry}rad)`);
+    if (rz !== 0) parts.push(`rotateZ(${rz}rad)`);
+    if (sx !== 1 || sy !== 1) parts.push(`scale(${sx}, ${sy})`);
+
+    return { transform: parts.join(' '), opacity };
+  }
+
+  const previewValues = $derived.by(() => {
+    if (!hoveredPreset) return { transform: 'none', opacity: 1 };
+    return interpolatePresetAt(hoveredPreset.keyframes, previewTime);
+  });
+
+  function startPreview(presetId: string) {
+    hoveredPresetId = presetId;
+    previewTime = 0;
+
+    const startTime = performance.now();
+    const duration = 1200;
+
+    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>
+    <Button variant="outline" class="w-full justify-between">
+      {selectedPreset?.name ?? placeholder}
+      <ChevronDown class="ml-2 h-4 w-4 opacity-50" />
+    </Button>
+  </Popover.Trigger>
+  <Popover.Content class="w-72 p-2" align="start">
+    <div class="grid grid-cols-1 gap-0.5">
+      {#each options as preset (preset.id)}
+        {@const isSelected = value === preset.id}
+        {@const isHovered = hoveredPresetId === preset.id}
+        <button
+          class="flex items-center gap-2 rounded px-2 py-1.5 text-sm transition-colors hover:bg-accent"
+          class:bg-accent={isSelected}
+          onmouseenter={() => startPreview(preset.id)}
+          onmouseleave={stopPreview}
+          onclick={() => selectPreset(preset.id)}
+        >
+          <!-- Preview box -->
+          <div
+            class="flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded border border-border bg-background"
+            style:perspective="200px"
+          >
+            {#if isHovered}
+              <div
+                style:transform={previewValues.transform}
+                style:opacity={previewValues.opacity}
+                style:transform-style="preserve-3d"
+              >
+                <div class="h-5 w-5 rounded-sm bg-primary"></div>
+              </div>
+            {:else}
+              <div class="h-5 w-5 rounded-sm bg-primary/40"></div>
+            {/if}
+          </div>
+          <!-- Label + description -->
+          <div class="flex-1 text-left">
+            <div class="text-xs font-medium">{preset.name}</div>
+            {#if preset.description}
+              <div class="text-[10px] leading-tight text-muted-foreground">
+                {preset.description}
+              </div>
+            {/if}
+          </div>
+        </button>
+      {/each}
+    </div>
+  </Popover.Content>
+</Popover.Root>
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
index 393839b..a344159 100644
--- a/src/lib/components/editor/panels/properties/groups/animation-presets-group.svelte
+++ b/src/lib/components/editor/panels/properties/groups/animation-presets-group.svelte
@@ -1,11 +1,13 @@
 <script lang="ts">
   import { Button } from '$lib/components/ui/button';
-  import { Select } from '$lib/components/ui/select';
+  import { Label } from '$lib/components/ui/label';
   import { Sparkles } from '@lucide/svelte';
   import { animationPresets } from '$lib/engine/presets';
+  import type { TypedAnimationPreset } from '$lib/engine/presets';
   import { getEditorState } from '$lib/contexts/editor.svelte';
   import ScrubInput from '../../scrub-input.svelte';
   import InputsWrapper from '../../inputs-wrapper.svelte';
+  import AnimationPresetSelect from '../animation-preset-select.svelte';
   import type { TypedLayer } from '$lib/layers/typed-registry';
 
   const { layer }: { layer: TypedLayer } = $props();
@@ -16,45 +18,50 @@
   let selectedPresetId = $state<string>('');
   let presetDuration = $state<number>(1);
 
+  // All presets available for keyframe application (all categories)
+  const allPresets: TypedAnimationPreset[] = animationPresets;
+
   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>
+<div class="space-y-2">
+  <Label class="text-xs text-muted-foreground">Apply as Keyframes</Label>
+  <InputsWrapper
+    fields={[
+      { for: 'animation-presets', labels: 'Animation' },
+      { for: 'preset-duration', labels: 'Duration (s)' }
+    ]}
+  >
+    <AnimationPresetSelect
+      value={selectedPresetId}
+      options={allPresets}
+      placeholder="Select preset"
+      onchange={(v) => (selectedPresetId = v)}
+    />
+    <ScrubInput
+      id="preset-duration"
+      value={presetDuration}
+      min={0.1}
+      step={0.1}
+      onchange={(v) => (presetDuration = v)}
+    />
+  </InputsWrapper>
+  <Button
+    variant="default"
+    size="sm"
+    class="w-full"
+    onclick={applyPreset}
+    disabled={!selectedPresetId}
+  >
+    <Sparkles class="mr-2 h-3.5 w-3.5" />
+    Apply at {projectStore.currentTime.toFixed(1)}s
+  </Button>
+</div>
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..ad4d8ef 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,49 @@
 <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 = [
+    { id: '', name: 'None', description: '', category: 'enter' as const, keyframes: [] },
+    ...getEnterPresets()
+  ];
+
+  const exitPresets = [
+    { id: '', name: 'None', description: '', category: 'exit' as const, keyframes: [] },
+    ...getExitPresets()
+  ];
+
+  // Derived read-only values from the layer
+  const enterPresetId = $derived(layer.enterTransition?.presetId ?? '');
+  const enterDuration = $derived(layer.enterTransition?.duration ?? 0.5);
+  const exitPresetId = $derived(layer.exitTransition?.presetId ?? '');
+  const exitDuration = $derived(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 +57,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 +65,60 @@
       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) => updateTransition('enter', v, enterDuration)}
+      />
+      {#if enterPresetId}
+        <ScrubInput
+          id="enter-duration"
+          value={enterDuration}
+          min={0.1}
+          max={5}
+          step={0.1}
+          onchange={(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) => updateTransition('exit', v, exitDuration)}
+      />
+      {#if exitPresetId}
+        <ScrubInput
+          id="exit-duration"
+          value={exitDuration}
+          min={0.1}
+          max={5}
+          step={0.1}
+          onchange={(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..25ced25 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);
@@ -142,7 +137,15 @@
     window.removeEventListener('mouseup', handleDragEnd);
   });
 
-  const isGroupLayer = $derived(layer.type === 'group');
+  // Transition markers
+  const enterTransitionWidth = $derived(
+    layer.enterTransition ? layer.enterTransition.duration * pixelsPerSecond : 0
+  );
+  const exitTransitionWidth = $derived(
+    layer.exitTransition ? layer.exitTransition.duration * pixelsPerSecond : 0
+  );
+
+  const _isGroupLayer = $derived(layer.type === 'group');
 
   // Color for the duration bar based on layer type
   const barColor = $derived.by(() => {
@@ -164,9 +167,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 +184,74 @@
   >
     <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 -->
+        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>
+
+      <!-- Enter transition zone -->
+      {#if enterTransitionWidth > 0}
         <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>
+          class="pointer-events-none absolute top-0 bottom-0 left-0 rounded-l-sm bg-sky-400/25"
+          style:width="{Math.min(enterTransitionWidth, barWidth)}px"
+        >
+          {#if enterTransitionWidth > 20}
+            <span class="absolute top-1/2 left-1 -translate-y-1/2 text-[8px] text-sky-300/70">
+              In
+            </span>
+          {/if}
+        </div>
+      {/if}
 
-        <!-- Exit handle -->
-        <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <!-- Exit transition zone -->
+      {#if exitTransitionWidth > 0}
         <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="pointer-events-none absolute top-0 right-0 bottom-0 rounded-r-sm bg-orange-400/25"
+          style:width="{Math.min(exitTransitionWidth, barWidth)}px"
+        >
+          {#if exitTransitionWidth > 20}
+            <span class="absolute top-1/2 right-1 -translate-y-1/2 text-[8px] text-orange-300/70">
+              Out
+            </span>
+          {/if}
+        </div>
+      {/if}
+
+      <!-- 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..5c7fef1 100644
--- a/src/lib/engine/layer-rendering.ts
+++ b/src/lib/engine/layer-rendering.ts
@@ -4,47 +4,78 @@
  */
 import type { Transform } from '$lib/types/animation';
 import type { TypedLayer } from '$lib/layers/typed-registry';
-import { getAnimatedTransform, getAnimatedStyle, getAnimatedProps } from './interpolation';
+import type { PresetKeyframe } from './presets';
+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.
+ *
+ * Priority: transition presets > keyframe animations > base layer values.
+ * Position and rotation preset values are offsets added to the base.
+ * Scale and opacity preset values are multiplicative with the base.
  */
-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 transition = computeTransitionValues(layer, currentTime, projectDuration);
+
+  const baseX = animatedTransform.position?.x ?? layer.transform.position.x;
+  const baseY = animatedTransform.position?.y ?? layer.transform.position.y;
+  const baseZ = animatedTransform.position?.z ?? layer.transform.position.z;
+
+  const baseRotX = animatedTransform.rotation?.x ?? layer.transform.rotation.x;
+  const baseRotY = animatedTransform.rotation?.y ?? layer.transform.rotation.y;
+  const baseRotZ = animatedTransform.rotation?.z ?? layer.transform.rotation.z;
+
+  const baseSX = animatedTransform.scale?.x ?? layer.transform.scale.x;
+  const baseSY = animatedTransform.scale?.y ?? layer.transform.scale.y;
 
   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: baseX + (transition.positionOffset?.x ?? 0),
+      y: baseY + (transition.positionOffset?.y ?? 0),
+      z: baseZ + (transition.positionOffset?.z ?? 0)
     },
     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: baseRotX + (transition.rotationOffset?.x ?? 0),
+      y: baseRotY + (transition.rotationOffset?.y ?? 0),
+      z: baseRotZ + (transition.rotationOffset?.z ?? 0)
     },
     scale: {
-      x: animatedTransform.scale?.x ?? layer.transform.scale.x,
-      y: animatedTransform.scale?.y ?? layer.transform.scale.y
+      x: baseSX * (transition.scaleFactor?.x ?? 1),
+      y: baseSY * (transition.scaleFactor?.y ?? 1)
     },
     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.
+ * Opacity from transitions is multiplied with the base opacity.
  */
-export function getLayerStyle(layer: TypedLayer, currentTime: number) {
+export function getLayerStyle(layer: TypedLayer, currentTime: number, projectDuration: number) {
   const animatedStyle = getAnimatedStyle(layer.keyframes, currentTime);
+  const transition = computeTransitionValues(layer, currentTime, projectDuration);
+
+  const baseOpacity = animatedStyle.opacity ?? layer.style.opacity;
 
   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: baseOpacity * (transition.opacityFactor ?? 1),
+    blur: transition.blur ?? animatedStyle.blur ?? layer.style.blur ?? 0,
+    brightness: transition.brightness ?? animatedStyle.brightness ?? layer.style.brightness ?? 1,
+    contrast: transition.contrast ?? animatedStyle.contrast ?? layer.style.contrast ?? 1,
+    saturate: transition.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 +91,192 @@ export function getLayerProps(layer: TypedLayer, currentTime: number): Record<st
   const propsMetadata = extractPropertyMetadata(schema);
   return getAnimatedProps(layer.keyframes, layer.props, propsMetadata, currentTime);
 }
+
+// ============================================
+// Transition system
+// ============================================
+
+/**
+ * Computed transition values as offsets/factors to apply on top of base values.
+ * Position/rotation = additive offsets. Scale/opacity = multiplicative factors.
+ */
+interface TransitionValues {
+  positionOffset?: { x: number; y: number; z: number };
+  rotationOffset?: { x: number; y: number; z: number };
+  scaleFactor?: { x: number; y: number };
+  opacityFactor?: number;
+  blur?: number;
+  brightness?: number;
+  contrast?: number;
+  saturate?: number;
+}
+
+/**
+ * Compute transition values from enter/exit presets.
+ * Returns offsets and factors that should be applied to the base values.
+ */
+function computeTransitionValues(
+  layer: TypedLayer,
+  currentTime: number,
+  projectDuration: number
+): TransitionValues {
+  const enterTime = layer.enterTime ?? 0;
+  const exitTime = layer.exitTime ?? projectDuration;
+
+  let result: TransitionValues = {};
+
+  // Apply enter transition if within its duration
+  if (layer.enterTransition && currentTime >= enterTime) {
+    const timeSinceEnter = currentTime - enterTime;
+    if (timeSinceEnter <= layer.enterTransition.duration) {
+      const preset = getPresetById(layer.enterTransition.presetId);
+      if (preset) {
+        result = mergeTransitionValues(
+          result,
+          interpolatePresetKeyframes(
+            preset.keyframes,
+            timeSinceEnter,
+            layer.enterTransition.duration
+          )
+        );
+      }
+    }
+  }
+
+  // Apply exit transition if within its duration
+  if (layer.exitTransition && currentTime <= exitTime) {
+    const timeUntilExit = exitTime - currentTime;
+    if (timeUntilExit <= layer.exitTransition.duration) {
+      const preset = getPresetById(layer.exitTransition.presetId);
+      if (preset) {
+        const transitionProgress = layer.exitTransition.duration - timeUntilExit;
+        result = mergeTransitionValues(
+          result,
+          interpolatePresetKeyframes(
+            preset.keyframes,
+            transitionProgress,
+            layer.exitTransition.duration
+          )
+        );
+      }
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Interpolate preset keyframes at a given absolute time within a duration.
+ * Returns transition values as offsets/factors relative to the layer's resting state.
+ *
+ * Convention: preset keyframe values at time=1 represent the "resting" state:
+ * - position 0 = no offset from base position
+ * - scale 1 = 100% of base scale
+ * - opacity 1 = 100% of base opacity
+ * - rotation 0 = no offset from base rotation
+ */
+function interpolatePresetKeyframes(
+  presetKeyframes: PresetKeyframe[],
+  currentTime: number,
+  duration: number
+): TransitionValues {
+  const result: TransitionValues = {};
+
+  // Scale preset keyframe times to actual duration
+  const scaledKeyframes = presetKeyframes.map((kf) => ({
+    ...kf,
+    time: kf.time * duration
+  }));
+
+  // Group by property
+  const byProperty = new Map<string, typeof scaledKeyframes>();
+  for (const kf of scaledKeyframes) {
+    const existing = byProperty.get(kf.property) ?? [];
+    byProperty.set(kf.property, [...existing, kf]);
+  }
+
+  for (const [property, keyframes] of byProperty) {
+    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;
+      }
+    }
+
+    const progress =
+      prevKf.time === nextKf.time ? 1 : (currentTime - prevKf.time) / (nextKf.time - prevKf.time);
+
+    const value = interpolateValue(
+      prevKf.value,
+      nextKf.value,
+      Math.max(0, Math.min(1, progress)),
+      nextKf.interpolation ?? { family: 'continuous', strategy: 'ease-in-out' }
+    ) as number;
+
+    // Map to offsets/factors
+    // Position: value IS the offset (at rest = 0)
+    if (property === 'position.x') {
+      if (!result.positionOffset) result.positionOffset = { x: 0, y: 0, z: 0 };
+      result.positionOffset.x = value;
+    } else if (property === 'position.y') {
+      if (!result.positionOffset) result.positionOffset = { x: 0, y: 0, z: 0 };
+      result.positionOffset.y = value;
+    } else if (property === 'position.z') {
+      if (!result.positionOffset) result.positionOffset = { x: 0, y: 0, z: 0 };
+      result.positionOffset.z = value;
+    }
+    // Scale: value IS the factor (at rest = 1)
+    else if (property === 'scale.x') {
+      if (!result.scaleFactor) result.scaleFactor = { x: 1, y: 1 };
+      result.scaleFactor.x = value;
+    } else if (property === 'scale.y') {
+      if (!result.scaleFactor) result.scaleFactor = { x: 1, y: 1 };
+      result.scaleFactor.y = value;
+    }
+    // Rotation: value IS the offset (at rest = 0)
+    else if (property === 'rotation.x') {
+      if (!result.rotationOffset) result.rotationOffset = { x: 0, y: 0, z: 0 };
+      result.rotationOffset.x = value;
+    } else if (property === 'rotation.y') {
+      if (!result.rotationOffset) result.rotationOffset = { x: 0, y: 0, z: 0 };
+      result.rotationOffset.y = value;
+    } else if (property === 'rotation.z') {
+      if (!result.rotationOffset) result.rotationOffset = { x: 0, y: 0, z: 0 };
+      result.rotationOffset.z = value;
+    }
+    // Opacity: value IS the factor (at rest = 1)
+    else if (property === 'opacity') {
+      result.opacityFactor = value;
+    }
+    // Style filters: absolute replacement
+    else if (property === 'blur') result.blur = value;
+    else if (property === 'brightness') result.brightness = value;
+    else if (property === 'contrast') result.contrast = value;
+    else if (property === 'saturate') result.saturate = value;
+  }
+
+  return result;
+}
+
+function mergeTransitionValues(a: TransitionValues, b: TransitionValues): TransitionValues {
+  return {
+    positionOffset: b.positionOffset ?? a.positionOffset,
+    rotationOffset: b.rotationOffset ?? a.rotationOffset,
+    scaleFactor: b.scaleFactor ?? a.scaleFactor,
+    opacityFactor:
+      a.opacityFactor !== undefined && b.opacityFactor !== undefined
+        ? a.opacityFactor * b.opacityFactor
+        : (b.opacityFactor ?? a.opacityFactor),
+    blur: b.blur ?? a.blur,
+    brightness: b.brightness ?? a.brightness,
+    contrast: b.contrast ?? a.contrast,
+    saturate: b.saturate ?? a.saturate
+  };
+}
diff --git a/src/lib/engine/presets.ts b/src/lib/engine/presets.ts
index 253c738..1d4ada9 100644
--- a/src/lib/engine/presets.ts
+++ b/src/lib/engine/presets.ts
@@ -1,928 +1,455 @@
 /**
  * Animation presets - reusable animation patterns
- * These can be applied to any layer by the AI using create_layer tool
+ * Centralized configuration: single source of truth for UI, AI, and rendering.
  */
 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' | 'emphasis';
+
+/**
+ * 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 and description
+ */
+export interface TypedAnimationPreset {
+  id: string;
+  name: string;
+  description: 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,
+  description: string,
+  category: PresetCategory,
+  keyframes: PresetKeyframe[]
+): TypedAnimationPreset {
+  return { id, name, description, 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', 'Gradually appears from transparent to fully visible', 'enter', [
+    kf(0, 'opacity', 0, { family: 'continuous', strategy: 'ease-out' }),
+    kf(1, 'opacity', 1, { family: 'continuous', strategy: 'linear' })
+  ]),
+  preset('fade-out', 'Fade Out', 'Gradually disappears from visible to transparent', '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' }
-      }
+  preset(
+    'slide-in-left',
+    'Slide In from Left',
+    'Slides in from 500px left with fade, ending at original position',
+    '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' })
     ]
-  },
-  {
-    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' }
-      }
+  ),
+  preset(
+    'slide-in-right',
+    'Slide In from Right',
+    'Slides in from 500px right with fade, ending at original position',
+    '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' })
     ]
-  },
-  {
-    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' }
-      }
+  ),
+  preset(
+    'slide-in-top',
+    'Slide In from Top',
+    'Slides in from 400px above with fade, ending at original position',
+    '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' })
     ]
-  },
-  {
-    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' }
-      }
+  ),
+  preset(
+    'slide-in-bottom',
+    'Slide In from Bottom',
+    'Slides in from 400px below with fade, ending at original position',
+    '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' })
     ]
-  },
-  {
-    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' }
-      }
+  ),
+  preset(
+    'slide-out-left',
+    'Slide Out to Left',
+    'Slides out 500px to the left with fade, from original position',
+    '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' })
     ]
-  },
-  {
-    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-out-right',
+    'Slide Out to Right',
+    'Slides out 500px to the right with fade, from original position',
+    '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-top',
+    'Slide Out to Top',
+    'Slides out 400px upward with fade, from original position',
+    'exit',
+    [
+      kf(0, 'position.y', 0, { family: 'continuous', strategy: 'ease-in' }),
+      kf(0, 'opacity', 1, { family: 'continuous', strategy: 'ease-in' }),
+      kf(1, 'position.y', -400, { family: 'continuous', strategy: 'linear' }),
+      kf(1, 'opacity', 0, { family: 'continuous', strategy: 'linear' })
+    ]
+  ),
+  preset(
+    'slide-out-bottom',
+    'Slide Out to Bottom',
+    'Slides out 400px downward with fade, from original position',
+    'exit',
+    [
+      kf(0, 'position.y', 0, { family: 'continuous', strategy: 'ease-in' }),
+      kf(0, 'opacity', 1, { family: 'continuous', strategy: 'ease-in' }),
+      kf(1, 'position.y', 400, { 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' }
-      }
+  preset(
+    'scale-in',
+    'Scale In',
+    'Grows from 0 to full size with fade, uniform scale on both axes',
+    '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' })
     ]
-  },
-  {
-    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' }
-      }
+  ),
+  preset(
+    'scale-out',
+    'Scale Out',
+    'Shrinks from full size to 0 with fade, uniform scale on both axes',
+    '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' })
     ]
-  },
-  {
-    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(
+    'pop',
+    'Pop (Scale with Overshoot)',
+    'Scales up with a bouncy overshoot to 115% then settles at 100%',
+    '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' }
-      }
+  preset(
+    'bounce',
+    'Bounce',
+    'Bounces vertically with decreasing amplitude (scale.y: 1 → 1.2 → 0.9 → 1.05 → 1)',
+    'emphasis',
+    [
+      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' })
     ]
-  },
-  {
-    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-in',
+    'Bounce In',
+    'Enters with bouncing scale overshoot (0 → 1.2 → 0.9 → 1.05 → 1)',
+    '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',
+    'Rotates 180° while scaling from 50% to 100% with fade',
+    '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)', 'Completes one full 360° clockwise rotation', 'emphasis', [
+    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' }
-      }
+  preset(
+    'pulse',
+    'Pulse',
+    'Gently scales up to 110% and back to 100%, drawing attention',
+    'emphasis',
+    [
+      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' })
     ]
-  },
-  {
-    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' }
-      }
+  ),
+  preset(
+    'shake',
+    'Shake',
+    'Rapid horizontal shaking with decreasing intensity (±10px → ±2px)',
+    'emphasis',
+    [
+      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' })
     ]
-  },
-  {
-    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' }
-      }
+  ),
+  preset(
+    'float',
+    'Float (Subtle Up/Down)',
+    'Gentle vertical drift of 15px up and back, loopable',
+    'emphasis',
+    [
+      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' })
     ]
-  },
-  {
-    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(
+    'glow',
+    'Glow (Opacity Pulse)',
+    'Fades opacity down to 60% and back, creating a glowing effect',
+    'emphasis',
+    [
+      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' }
-      }
+  preset(
+    'zoom-in',
+    'Zoom In (from far)',
+    'Scales from 30% to 100% with fade, simulating approach from distance',
+    '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' })
     ]
-  },
-  {
-    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-out',
+    'Zoom Out (to far)',
+    'Scales from 100% to 30% with fade, simulating retreat to distance',
+    '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' }
-      }
+  preset(
+    'flip-in-x',
+    'Flip In (Horizontal)',
+    'Flips 90° around Y axis into view with fade',
+    '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' })
     ]
-  },
-  {
-    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' }
-      }
+  ),
+  preset(
+    'flip-in-y',
+    'Flip In (Vertical)',
+    'Flips 90° around X axis into view with fade',
+    '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' })
     ]
-  },
-  {
-    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(
+    'swing',
+    'Swing',
+    'Pendulum-like rotation swinging ±15° with decreasing amplitude',
+    'emphasis',
+    [
+      kf(0, 'rotation.z', 0, { family: 'continuous', strategy: 'ease-in-out' }),
+      kf(0.2, 'rotation.z', 0.26, { family: 'continuous', strategy: 'ease-in-out' }),
+      kf(0.4, 'rotation.z', -0.17, { family: 'continuous', strategy: 'ease-in-out' }),
+      kf(0.6, 'rotation.z', 0.09, { family: 'continuous', strategy: 'ease-in-out' }),
+      kf(0.8, 'rotation.z', -0.05, { family: 'continuous', strategy: 'ease-in-out' }),
+      kf(1, 'rotation.z', 0, { family: 'continuous', strategy: 'ease-in-out' })
     ]
-  }
+  )
 ];
 
 /**
@@ -933,10 +460,11 @@ export const AnimationPresetIdSchema = z.enum(
 );
 
 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 +474,47 @@ 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 emphasis animation presets (shake, pulse, etc.)
+ */
+export function getEmphasisPresets(): TypedAnimationPreset[] {
+  return animationPresets.filter((p) => p.category === 'emphasis');
+}
+
+/**
+ * Get a human-readable summary of all presets for AI prompt injection
+ */
+export function getPresetsSummaryForAI(): string {
+  const sections = [
+    {
+      title: 'Enter presets (use for layer entrances or enterTransition)',
+      presets: getEnterPresets()
+    },
+    { title: 'Exit presets (use for layer exits or exitTransition)', presets: getExitPresets() },
+    {
+      title: 'Emphasis presets (use as keyframe animations at any time)',
+      presets: getEmphasisPresets()
+    }
+  ];
+
+  return sections
+    .map(
+      (s) => `### ${s.title}\n${s.presets.map((p) => `- **${p.id}**: ${p.description}`).join('\n')}`
+    )
+    .join('\n\n');
+}
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)
         };
       }