Animations: Keyframe Timeline with 30+ Motion Presets

// From types/animation.ts

export type EasingFunction =
  | 'linear'
  | 'ease-in'
  | 'ease-out'
  | 'ease-in-out'
  | 'ease-in-cubic'
  | 'ease-out-cubic'
  | 'ease-in-expo'
  | 'ease-out-expo';

export interface AnimatableProperties {
  perspective: number;  // CSS perspective distance in px
  rotateX: number;      // Degrees
  rotateY: number;      // Degrees
  rotateZ: number;      // Degrees
  translateX: number;   // Percentage offset
  translateY: number;   // Percentage offset
  scale: number;        // Multiplier (1 = original)
  imageOpacity: number; // 0–1
}

export interface Keyframe {
  id: string;
  time: number;                          // Milliseconds from start
  properties: Partial<AnimatableProperties>;
  easing: EasingFunction;
}

export interface AnimationTrack {
  id: string;
  name: string;
  type: 'transform' | 'opacity';
  keyframes: Keyframe[];
  isLocked: boolean;
  isVisible: boolean;
  clipId?: string;           // Links this track to an AnimationClip
  originalDuration?: number; // Original preset duration for time-scaling
}

export interface AnimationClip {
  id: string;
  presetId: string;
  name: string;
  startTime: number; // ms
  duration: number;  // ms
  color: string;     // Clip color for timeline display
}

export interface TimelineState {
  duration: number;        // Total timeline duration in ms
  playhead: number;        // Current position in ms
  isPlaying: boolean;
  isLooping: boolean;
  tracks: AnimationTrack[];
  zoom: number;            // Timeline zoom level (1 = 100%)
  snapToKeyframes: boolean;
}

// From lib/animation/interpolation.ts
export const easingFunctions: Record<EasingFunction, (t: number) => number> = {
  linear: (t) => t,
  'ease-in': (t) => t * t,
  'ease-out': (t) => 1 - (1 - t) * (1 - t),
  'ease-in-out': (t) => t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2,
  'ease-in-cubic': (t) => t * t * t,
  'ease-out-cubic': (t) => 1 - Math.pow(1 - t, 3),
  'ease-in-expo': (t) => t === 0 ? 0 : Math.pow(2, 10 * t - 10),
  'ease-out-expo': (t) => t === 1 ? 1 : 1 - Math.pow(2, -10 * t),
};