@rdna/radiants 0.1.1 → 0.1.3

package/dist/remotion/index.d.mts

@@ -1,252 +0,0 @@
-import { Easing, SpringConfig } from 'remotion';
-
-/**
- * @dna/radiants - Remotion Duration Utilities
- *
- * Maps DNA motion tokens to Remotion frame counts.
- * Aligns with CSS duration tokens from animations.css.
- */
-/** Duration tokens in milliseconds, matching DNA motion spec */
-declare const DURATION_MS: {
-    readonly instant: 0;
-    readonly fast: 100;
-    readonly base: 150;
-    readonly moderate: 200;
-    readonly slow: 300;
-};
-type DurationToken = keyof typeof DURATION_MS;
-/**
- * Convert a DNA duration token to frame count for Remotion.
- *
- * @param token - DNA duration token or milliseconds
- * @param fps - Frames per second (default: 30)
- * @returns Number of frames
- *
- * @example
- * ```ts
- * durationToFrames('fast', 30);     // 3 frames
- * durationToFrames('base', 60);     // 9 frames
- * durationToFrames(200, 30);        // 6 frames (raw ms)
- * ```
- */
-declare function durationToFrames(token: DurationToken | number, fps?: number): number;
-/**
- * Convert frame count back to milliseconds.
- *
- * @param frames - Number of frames
- * @param fps - Frames per second (default: 30)
- * @returns Duration in milliseconds
- */
-declare function framesToMs(frames: number, fps?: number): number;
-/**
- * Get the closest DNA duration token for a given millisecond value.
- *
- * @param ms - Duration in milliseconds
- * @returns Closest DNA duration token
- */
-declare function msToToken(ms: number): DurationToken;
-
-/**
- * @dna/radiants - Remotion Easing Curves
- *
- * DNA easing curves implemented via Remotion's Easing.bezier().
- * Matches CSS custom properties: --easing-default, --easing-out, --easing-in
- */
-
-/**
- * DNA easing curves for Remotion interpolations.
- *
- * These match the CSS custom properties defined in the DNA spec:
- * - default/out: cubic-bezier(0, 0, 0.2, 1) - ease-out curve for most animations
- * - in: cubic-bezier(0.4, 0, 1, 1) - ease-in for exit animations
- *
- * @example
- * ```ts
- * import { interpolate } from 'remotion';
- * import { dnaEasing } from '@dna/radiants/remotion';
- *
- * const opacity = interpolate(frame, [0, 30], [0, 1], {
- *   easing: dnaEasing.default,
- * });
- * ```
- */
-declare const dnaEasing: {
-    /** Standard ease-out curve (--easing-default) */
-    readonly default: (t: number) => number;
-    /** Ease-out curve for enter animations (--easing-out) */
-    readonly out: (t: number) => number;
-    /** Ease-in curve for exit animations (--easing-in) */
-    readonly in: (t: number) => number;
-    /** Linear easing for constant-rate animations */
-    readonly linear: typeof Easing.linear;
-};
-type EasingToken = keyof typeof dnaEasing;
-/**
- * Get an easing function by token name.
- *
- * @param token - Easing token name
- * @returns Remotion easing function
- */
-declare function getEasing(token: EasingToken): (t: number) => number;
-
-/**
- * @dna/radiants - Remotion Spring Presets
- *
- * Pre-configured spring configurations for physics-based animations.
- * These provide natural motion that aligns with DNA timing guidelines.
- */
-
-/**
- * DNA spring presets for Remotion's spring() function.
- *
- * Each preset is tuned to approximate DNA duration tokens:
- * - snappy: ~100-150ms feel, for quick micro-interactions
- * - gentle: ~150-200ms feel, for standard UI transitions
- * - stiff: ~200-300ms feel, for deliberate/heavy elements
- *
- * @example
- * ```ts
- * import { spring, useCurrentFrame, useVideoConfig } from 'remotion';
- * import { dnaSpring } from '@dna/radiants/remotion';
- *
- * const { fps } = useVideoConfig();
- * const frame = useCurrentFrame();
- *
- * const scale = spring({
- *   frame,
- *   fps,
- *   config: dnaSpring.snappy,
- * });
- * ```
- */
-declare const dnaSpring: {
-    /** Fast, responsive spring (~100-150ms) for micro-interactions */
-    readonly snappy: {
-        damping: number;
-        mass: number;
-        stiffness: number;
-        overshootClamping: false;
-    };
-    /** Balanced spring (~150-200ms) for standard transitions */
-    readonly gentle: {
-        damping: number;
-        mass: number;
-        stiffness: number;
-        overshootClamping: false;
-    };
-    /** Slower spring (~200-300ms) for deliberate, weighty motion */
-    readonly stiff: {
-        damping: number;
-        mass: number;
-        stiffness: number;
-        overshootClamping: false;
-    };
-    /** Bouncy spring for playful, attention-grabbing animations */
-    readonly bouncy: {
-        damping: number;
-        mass: number;
-        stiffness: number;
-        overshootClamping: false;
-    };
-};
-type SpringPreset = keyof typeof dnaSpring;
-/**
- * Get a spring configuration by preset name.
- *
- * @param preset - Spring preset name
- * @returns Remotion SpringConfig object
- */
-declare function getSpringConfig(preset: SpringPreset): SpringConfig;
-
-/**
- * @dna/radiants - useMotion Hook
- *
- * High-level animation hook that provides DNA-styled motion for Remotion compositions.
- * Supports both easing-based and spring-based animations.
- */
-
-/** Supported animation types */
-type MotionType = 'fade' | 'slideUp' | 'slideDown' | 'slideLeft' | 'slideRight' | 'scale' | 'scaleUp';
-/** Configuration for useMotion hook */
-interface UseMotionConfig {
-    /** Animation type to apply */
-    type: MotionType;
-    /** Duration as DNA token or milliseconds (default: 'base') */
-    duration?: DurationToken | number;
-    /** Easing curve token (default: 'default') */
-    easing?: EasingToken;
-    /** Spring preset for physics-based motion */
-    spring?: SpringPreset;
-    /** Animation mode: 'easing' for bezier curves, 'spring' for physics (default: 'easing') */
-    mode?: 'easing' | 'spring';
-    /** Delay in frames before animation starts (default: 0) */
-    delay?: number;
-    /** Custom start frame (default: uses delay) */
-    from?: number;
-}
-/** Return type for useMotion hook */
-interface UseMotionResult {
-    /** Current opacity value (0-1) */
-    opacity: number;
-    /** Current transform string */
-    transform: string;
-    /** Combined style object ready for use */
-    style: React.CSSProperties;
-    /** Current animation progress (0-1) */
-    progress: number;
-    /** Whether animation has completed */
-    isComplete: boolean;
-}
-/**
- * High-level animation hook for DNA-styled motion in Remotion.
- *
- * Provides pre-configured animation patterns that match DNA motion guidelines.
- * Supports both easing-based (bezier curves) and spring-based (physics) animations.
- *
- * @example
- * ```tsx
- * // Simple fade animation
- * const { style } = useMotion({ type: 'fade' });
- * return <div style={style}>Content</div>;
- *
- * // Slide up with custom duration
- * const { style } = useMotion({
- *   type: 'slideUp',
- *   duration: 'slow',
- *   easing: 'out',
- * });
- *
- * // Spring-based scale animation
- * const { style } = useMotion({
- *   type: 'scale',
- *   mode: 'spring',
- *   spring: 'snappy',
- * });
- *
- * // Staggered list items
- * const delay = durationToFrames('fast', fps);
- * items.map((item, i) => (
- *   <Item style={useMotion({ type: 'slideUp', delay: i * delay }).style} />
- * ));
- * ```
- */
-declare function useMotion(config: UseMotionConfig): UseMotionResult;
-/**
- * Create a stagger delay calculator for list animations.
- *
- * @param staggerMs - Delay between each item in milliseconds
- * @param fps - Frames per second
- * @returns Function that returns delay in frames for a given index
- *
- * @example
- * ```tsx
- * const getDelay = createStagger(50, fps);
- *
- * items.map((item, i) => (
- *   <Item style={useMotion({ type: 'slideUp', delay: getDelay(i) }).style} />
- * ));
- * ```
- */
-declare function createStagger(staggerMs: number, fps: number): (index: number) => number;
-
-export { DURATION_MS, type DurationToken, type EasingToken, type MotionType, type SpringPreset, type UseMotionConfig, type UseMotionResult, createStagger, dnaEasing, dnaSpring, durationToFrames, framesToMs, getEasing, getSpringConfig, msToToken, useMotion };

package/dist/remotion/index.mjs

@@ -1,170 +0,0 @@
-import { Easing, useCurrentFrame, useVideoConfig, spring, interpolate } from 'remotion';
-
-// remotion/durations.ts
-var DURATION_MS = {
-  instant: 0,
-  fast: 100,
-  base: 150,
-  moderate: 200,
-  slow: 300
-};
-function durationToFrames(token, fps = 30) {
-  const ms = typeof token === "number" ? token : DURATION_MS[token];
-  return Math.round(ms / 1e3 * fps);
-}
-function framesToMs(frames, fps = 30) {
-  return Math.round(frames / fps * 1e3);
-}
-function msToToken(ms) {
-  const tokens = Object.entries(DURATION_MS);
-  let closest = tokens[0];
-  for (const [token, value] of tokens) {
-    if (Math.abs(value - ms) < Math.abs(closest[1] - ms)) {
-      closest = [token, value];
-    }
-  }
-  return closest[0];
-}
-var dnaEasing = {
-  /** Standard ease-out curve (--easing-default) */
-  default: Easing.bezier(0, 0, 0.2, 1),
-  /** Ease-out curve for enter animations (--easing-out) */
-  out: Easing.bezier(0, 0, 0.2, 1),
-  /** Ease-in curve for exit animations (--easing-in) */
-  in: Easing.bezier(0.4, 0, 1, 1),
-  /** Linear easing for constant-rate animations */
-  linear: Easing.linear
-};
-function getEasing(token) {
-  return dnaEasing[token];
-}
-
-// remotion/springs.ts
-var dnaSpring = {
-  /** Fast, responsive spring (~100-150ms) for micro-interactions */
-  snappy: {
-    damping: 20,
-    mass: 0.5,
-    stiffness: 400,
-    overshootClamping: false
-  },
-  /** Balanced spring (~150-200ms) for standard transitions */
-  gentle: {
-    damping: 25,
-    mass: 1,
-    stiffness: 200,
-    overshootClamping: false
-  },
-  /** Slower spring (~200-300ms) for deliberate, weighty motion */
-  stiff: {
-    damping: 30,
-    mass: 1.2,
-    stiffness: 150,
-    overshootClamping: false
-  },
-  /** Bouncy spring for playful, attention-grabbing animations */
-  bouncy: {
-    damping: 12,
-    mass: 0.8,
-    stiffness: 300,
-    overshootClamping: false
-  }
-};
-function getSpringConfig(preset) {
-  return dnaSpring[preset];
-}
-var SLIDE_DISTANCE = 20;
-var SCALE_FROM = 0.95;
-function useMotion(config) {
-  const {
-    type,
-    duration = "base",
-    easing = "default",
-    spring: springPreset = "gentle",
-    mode = "easing",
-    delay = 0,
-    from
-  } = config;
-  const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
-  const startFrame = from ?? delay;
-  const adjustedFrame = Math.max(0, frame - startFrame);
-  let progress;
-  if (mode === "spring") {
-    progress = spring({
-      frame: adjustedFrame,
-      fps,
-      config: dnaSpring[springPreset]
-    });
-  } else {
-    const durationFrames = durationToFrames(duration, fps);
-    progress = interpolate(adjustedFrame, [0, durationFrames], [0, 1], {
-      easing: dnaEasing[easing],
-      extrapolateRight: "clamp"
-    });
-  }
-  const { opacity, transform } = getAnimationValues(type, progress);
-  const isComplete = progress >= 1;
-  return {
-    opacity,
-    transform,
-    style: {
-      opacity,
-      transform
-    },
-    progress,
-    isComplete
-  };
-}
-function getAnimationValues(type, progress) {
-  switch (type) {
-    case "fade":
-      return {
-        opacity: progress,
-        transform: "none"
-      };
-    case "slideUp":
-      return {
-        opacity: progress,
-        transform: `translateY(${interpolate(progress, [0, 1], [SLIDE_DISTANCE, 0])}px)`
-      };
-    case "slideDown":
-      return {
-        opacity: progress,
-        transform: `translateY(${interpolate(progress, [0, 1], [-SLIDE_DISTANCE, 0])}px)`
-      };
-    case "slideLeft":
-      return {
-        opacity: progress,
-        transform: `translateX(${interpolate(progress, [0, 1], [SLIDE_DISTANCE, 0])}px)`
-      };
-    case "slideRight":
-      return {
-        opacity: progress,
-        transform: `translateX(${interpolate(progress, [0, 1], [-SLIDE_DISTANCE, 0])}px)`
-      };
-    case "scale":
-      return {
-        opacity: progress,
-        transform: `scale(${interpolate(progress, [0, 1], [SCALE_FROM, 1])})`
-      };
-    case "scaleUp":
-      return {
-        opacity: progress,
-        transform: `scale(${interpolate(progress, [0, 1], [SCALE_FROM, 1])}) translateY(${interpolate(progress, [0, 1], [SLIDE_DISTANCE / 2, 0])}px)`
-      };
-    default:
-      return {
-        opacity: 1,
-        transform: "none"
-      };
-  }
-}
-function createStagger(staggerMs, fps) {
-  const staggerFrames = durationToFrames(staggerMs, fps);
-  return (index) => index * staggerFrames;
-}
-
-export { DURATION_MS, createStagger, dnaEasing, dnaSpring, durationToFrames, framesToMs, getEasing, getSpringConfig, msToToken, useMotion };
-//# sourceMappingURL=index.mjs.map
-//# sourceMappingURL=index.mjs.map

package/dist/remotion/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../remotion/durations.ts","../../remotion/easing.ts","../../remotion/springs.ts","../../remotion/useMotion.ts"],"names":[],"mappings":"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","file":"index.mjs","sourcesContent":["/**\n * @dna/radiants - Remotion Duration Utilities\n *\n * Maps DNA motion tokens to Remotion frame counts.\n * Aligns with CSS duration tokens from animations.css.\n */\n\n/** Duration tokens in milliseconds, matching DNA motion spec */\nexport const DURATION_MS = {\n  instant: 0,\n  fast: 100,\n  base: 150,\n  moderate: 200,\n  slow: 300,\n} as const;\n\nexport type DurationToken = keyof typeof DURATION_MS;\n\n/**\n * Convert a DNA duration token to frame count for Remotion.\n *\n * @param token - DNA duration token or milliseconds\n * @param fps - Frames per second (default: 30)\n * @returns Number of frames\n *\n * @example\n * ```ts\n * durationToFrames('fast', 30);     // 3 frames\n * durationToFrames('base', 60);     // 9 frames\n * durationToFrames(200, 30);        // 6 frames (raw ms)\n * ```\n */\nexport function durationToFrames(\n  token: DurationToken | number,\n  fps: number = 30\n): number {\n  const ms = typeof token === 'number' ? token : DURATION_MS[token];\n  return Math.round((ms / 1000) * fps);\n}\n\n/**\n * Convert frame count back to milliseconds.\n *\n * @param frames - Number of frames\n * @param fps - Frames per second (default: 30)\n * @returns Duration in milliseconds\n */\nexport function framesToMs(frames: number, fps: number = 30): number {\n  return Math.round((frames / fps) * 1000);\n}\n\n/**\n * Get the closest DNA duration token for a given millisecond value.\n *\n * @param ms - Duration in milliseconds\n * @returns Closest DNA duration token\n */\nexport function msToToken(ms: number): DurationToken {\n  const tokens = Object.entries(DURATION_MS) as [DurationToken, number][];\n  let closest = tokens[0];\n\n  for (const [token, value] of tokens) {\n    if (Math.abs(value - ms) < Math.abs(closest[1] - ms)) {\n      closest = [token, value];\n    }\n  }\n\n  return closest[0];\n}\n","/**\n * @dna/radiants - Remotion Easing Curves\n *\n * DNA easing curves implemented via Remotion's Easing.bezier().\n * Matches CSS custom properties: --easing-default, --easing-out, --easing-in\n */\n\nimport { Easing } from 'remotion';\n\n/**\n * DNA easing curves for Remotion interpolations.\n *\n * These match the CSS custom properties defined in the DNA spec:\n * - default/out: cubic-bezier(0, 0, 0.2, 1) - ease-out curve for most animations\n * - in: cubic-bezier(0.4, 0, 1, 1) - ease-in for exit animations\n *\n * @example\n * ```ts\n * import { interpolate } from 'remotion';\n * import { dnaEasing } from '@dna/radiants/remotion';\n *\n * const opacity = interpolate(frame, [0, 30], [0, 1], {\n *   easing: dnaEasing.default,\n * });\n * ```\n */\nexport const dnaEasing = {\n  /** Standard ease-out curve (--easing-default) */\n  default: Easing.bezier(0, 0, 0.2, 1),\n\n  /** Ease-out curve for enter animations (--easing-out) */\n  out: Easing.bezier(0, 0, 0.2, 1),\n\n  /** Ease-in curve for exit animations (--easing-in) */\n  in: Easing.bezier(0.4, 0, 1, 1),\n\n  /** Linear easing for constant-rate animations */\n  linear: Easing.linear,\n} as const;\n\nexport type EasingToken = keyof typeof dnaEasing;\n\n/**\n * Get an easing function by token name.\n *\n * @param token - Easing token name\n * @returns Remotion easing function\n */\nexport function getEasing(token: EasingToken): (t: number) => number {\n  return dnaEasing[token];\n}\n","/**\n * @dna/radiants - Remotion Spring Presets\n *\n * Pre-configured spring configurations for physics-based animations.\n * These provide natural motion that aligns with DNA timing guidelines.\n */\n\nimport type { SpringConfig } from 'remotion';\n\n/**\n * DNA spring presets for Remotion's spring() function.\n *\n * Each preset is tuned to approximate DNA duration tokens:\n * - snappy: ~100-150ms feel, for quick micro-interactions\n * - gentle: ~150-200ms feel, for standard UI transitions\n * - stiff: ~200-300ms feel, for deliberate/heavy elements\n *\n * @example\n * ```ts\n * import { spring, useCurrentFrame, useVideoConfig } from 'remotion';\n * import { dnaSpring } from '@dna/radiants/remotion';\n *\n * const { fps } = useVideoConfig();\n * const frame = useCurrentFrame();\n *\n * const scale = spring({\n *   frame,\n *   fps,\n *   config: dnaSpring.snappy,\n * });\n * ```\n */\nexport const dnaSpring = {\n  /** Fast, responsive spring (~100-150ms) for micro-interactions */\n  snappy: {\n    damping: 20,\n    mass: 0.5,\n    stiffness: 400,\n    overshootClamping: false,\n  } satisfies SpringConfig,\n\n  /** Balanced spring (~150-200ms) for standard transitions */\n  gentle: {\n    damping: 25,\n    mass: 1,\n    stiffness: 200,\n    overshootClamping: false,\n  } satisfies SpringConfig,\n\n  /** Slower spring (~200-300ms) for deliberate, weighty motion */\n  stiff: {\n    damping: 30,\n    mass: 1.2,\n    stiffness: 150,\n    overshootClamping: false,\n  } satisfies SpringConfig,\n\n  /** Bouncy spring for playful, attention-grabbing animations */\n  bouncy: {\n    damping: 12,\n    mass: 0.8,\n    stiffness: 300,\n    overshootClamping: false,\n  } satisfies SpringConfig,\n} as const;\n\nexport type SpringPreset = keyof typeof dnaSpring;\n\n/**\n * Get a spring configuration by preset name.\n *\n * @param preset - Spring preset name\n * @returns Remotion SpringConfig object\n */\nexport function getSpringConfig(preset: SpringPreset): SpringConfig {\n  return dnaSpring[preset];\n}\n","/**\n * @dna/radiants - useMotion Hook\n *\n * High-level animation hook that provides DNA-styled motion for Remotion compositions.\n * Supports both easing-based and spring-based animations.\n */\n\nimport { useCurrentFrame, useVideoConfig, spring, interpolate } from 'remotion';\nimport { DURATION_MS, durationToFrames, type DurationToken } from './durations';\nimport { dnaEasing, type EasingToken } from './easing';\nimport { dnaSpring, type SpringPreset } from './springs';\n\n/** Supported animation types */\nexport type MotionType =\n  | 'fade'\n  | 'slideUp'\n  | 'slideDown'\n  | 'slideLeft'\n  | 'slideRight'\n  | 'scale'\n  | 'scaleUp';\n\n/** Configuration for useMotion hook */\nexport interface UseMotionConfig {\n  /** Animation type to apply */\n  type: MotionType;\n  /** Duration as DNA token or milliseconds (default: 'base') */\n  duration?: DurationToken | number;\n  /** Easing curve token (default: 'default') */\n  easing?: EasingToken;\n  /** Spring preset for physics-based motion */\n  spring?: SpringPreset;\n  /** Animation mode: 'easing' for bezier curves, 'spring' for physics (default: 'easing') */\n  mode?: 'easing' | 'spring';\n  /** Delay in frames before animation starts (default: 0) */\n  delay?: number;\n  /** Custom start frame (default: uses delay) */\n  from?: number;\n}\n\n/** Return type for useMotion hook */\nexport interface UseMotionResult {\n  /** Current opacity value (0-1) */\n  opacity: number;\n  /** Current transform string */\n  transform: string;\n  /** Combined style object ready for use */\n  style: React.CSSProperties;\n  /** Current animation progress (0-1) */\n  progress: number;\n  /** Whether animation has completed */\n  isComplete: boolean;\n}\n\n/** Transform distances for slide animations */\nconst SLIDE_DISTANCE = 20;\n\n/** Scale values for scale animations */\nconst SCALE_FROM = 0.95;\n\n/**\n * High-level animation hook for DNA-styled motion in Remotion.\n *\n * Provides pre-configured animation patterns that match DNA motion guidelines.\n * Supports both easing-based (bezier curves) and spring-based (physics) animations.\n *\n * @example\n * ```tsx\n * // Simple fade animation\n * const { style } = useMotion({ type: 'fade' });\n * return <div style={style}>Content</div>;\n *\n * // Slide up with custom duration\n * const { style } = useMotion({\n *   type: 'slideUp',\n *   duration: 'slow',\n *   easing: 'out',\n * });\n *\n * // Spring-based scale animation\n * const { style } = useMotion({\n *   type: 'scale',\n *   mode: 'spring',\n *   spring: 'snappy',\n * });\n *\n * // Staggered list items\n * const delay = durationToFrames('fast', fps);\n * items.map((item, i) => (\n *   <Item style={useMotion({ type: 'slideUp', delay: i * delay }).style} />\n * ));\n * ```\n */\nexport function useMotion(config: UseMotionConfig): UseMotionResult {\n  const {\n    type,\n    duration = 'base',\n    easing = 'default',\n    spring: springPreset = 'gentle',\n    mode = 'easing',\n    delay = 0,\n    from,\n  } = config;\n\n  const frame = useCurrentFrame();\n  const { fps } = useVideoConfig();\n\n  const startFrame = from ?? delay;\n  const adjustedFrame = Math.max(0, frame - startFrame);\n\n  let progress: number;\n\n  if (mode === 'spring') {\n    // Spring-based animation\n    progress = spring({\n      frame: adjustedFrame,\n      fps,\n      config: dnaSpring[springPreset],\n    });\n  } else {\n    // Easing-based animation\n    const durationFrames = durationToFrames(duration, fps);\n    progress = interpolate(adjustedFrame, [0, durationFrames], [0, 1], {\n      easing: dnaEasing[easing],\n      extrapolateRight: 'clamp',\n    });\n  }\n\n  // Calculate animation values based on type\n  const { opacity, transform } = getAnimationValues(type, progress);\n\n  const isComplete = progress >= 1;\n\n  return {\n    opacity,\n    transform,\n    style: {\n      opacity,\n      transform,\n    },\n    progress,\n    isComplete,\n  };\n}\n\n/**\n * Calculate opacity and transform values for a given animation type and progress.\n */\nfunction getAnimationValues(\n  type: MotionType,\n  progress: number\n): { opacity: number; transform: string } {\n  switch (type) {\n    case 'fade':\n      return {\n        opacity: progress,\n        transform: 'none',\n      };\n\n    case 'slideUp':\n      return {\n        opacity: progress,\n        transform: `translateY(${interpolate(progress, [0, 1], [SLIDE_DISTANCE, 0])}px)`,\n      };\n\n    case 'slideDown':\n      return {\n        opacity: progress,\n        transform: `translateY(${interpolate(progress, [0, 1], [-SLIDE_DISTANCE, 0])}px)`,\n      };\n\n    case 'slideLeft':\n      return {\n        opacity: progress,\n        transform: `translateX(${interpolate(progress, [0, 1], [SLIDE_DISTANCE, 0])}px)`,\n      };\n\n    case 'slideRight':\n      return {\n        opacity: progress,\n        transform: `translateX(${interpolate(progress, [0, 1], [-SLIDE_DISTANCE, 0])}px)`,\n      };\n\n    case 'scale':\n      return {\n        opacity: progress,\n        transform: `scale(${interpolate(progress, [0, 1], [SCALE_FROM, 1])})`,\n      };\n\n    case 'scaleUp':\n      return {\n        opacity: progress,\n        transform: `scale(${interpolate(progress, [0, 1], [SCALE_FROM, 1])}) translateY(${interpolate(progress, [0, 1], [SLIDE_DISTANCE / 2, 0])}px)`,\n      };\n\n    default:\n      return {\n        opacity: 1,\n        transform: 'none',\n      };\n  }\n}\n\n/**\n * Create a stagger delay calculator for list animations.\n *\n * @param staggerMs - Delay between each item in milliseconds\n * @param fps - Frames per second\n * @returns Function that returns delay in frames for a given index\n *\n * @example\n * ```tsx\n * const getDelay = createStagger(50, fps);\n *\n * items.map((item, i) => (\n *   <Item style={useMotion({ type: 'slideUp', delay: getDelay(i) }).style} />\n * ));\n * ```\n */\nexport function createStagger(\n  staggerMs: number,\n  fps: number\n): (index: number) => number {\n  const staggerFrames = durationToFrames(staggerMs, fps);\n  return (index: number) => index * staggerFrames;\n}\n"]}