@vibecuting/video-project-core 0.1.27 → 0.1.29

package/src/storybook/remotion-preview.tsx

@@ -61,12 +61,8 @@ type SpringConfig = {
 }
 
 function clamp01(value: number) {
-  if (value < 0) {
-    return 0
-  }
-  if (value > 1) {
-    return 1
-  }
+  if (value < 0) return 0
+  if (value > 1) return 1
   return value
 }
 
@@ -91,6 +87,116 @@ export function spring({
   return clamp01(eased + wobble)
 }
 
+type Extrapolate = 'clamp' | 'extend' | 'identity'
+
+type EasingFunction = (value: number) => number
+
+function clamp(value: number, min: number, max: number) {
+  if (value < min) return min
+  if (value > max) return max
+  return value
+}
+
+function wrapInOut(easing: EasingFunction): EasingFunction {
+  return (value) => {
+    if (value <= 0.5) {
+      return easing(value * 2) / 2
+    }
+    return 1 - easing((1 - value) * 2) / 2
+  }
+}
+
+function wrapOut(easing: EasingFunction): EasingFunction {
+  return (value) => 1 - easing(1 - value)
+}
+
+function wrapIn(easing: EasingFunction): EasingFunction {
+  return (value) => easing(value)
+}
+
+export const Easing = {
+  linear: (value: number) => value,
+  quad: (value: number) => value * value,
+  cubic: (value: number) => value * value * value,
+  quart: (value: number) => value * value * value * value,
+  quint: (value: number) => value * value * value * value * value,
+  sin: (value: number) => 1 - Math.cos((value * Math.PI) / 2),
+  exp: (value: number) => (value === 0 ? 0 : 2 ** (10 * (value - 1))),
+  circle: (value: number) => 1 - Math.sqrt(1 - value * value),
+  back: (value: number) => {
+    const overshoot = 1.70158
+    return value * value * ((overshoot + 1) * value - overshoot)
+  },
+  in: wrapIn,
+  out: wrapOut,
+  inOut: wrapInOut,
+}
+
+export function interpolate(
+  input: number,
+  inputRange: number[],
+  outputRange: number[],
+  options?: {
+    extrapolateLeft?: Extrapolate
+    extrapolateRight?: Extrapolate
+    easing?: EasingFunction
+  },
+) {
+  if (inputRange.length !== outputRange.length || inputRange.length < 2) {
+    throw new Error('interpolate() expects inputRange and outputRange of the same length >= 2')
+  }
+
+  const leftMode = options?.extrapolateLeft ?? 'extend'
+  const rightMode = options?.extrapolateRight ?? 'extend'
+  const easing = options?.easing
+
+  const firstInput = inputRange[0]
+  const lastInput = inputRange[inputRange.length - 1]
+
+  if (input < firstInput) {
+    if (leftMode === 'identity') return input
+    if (leftMode === 'clamp') return outputRange[0]
+  }
+
+  if (input > lastInput) {
+    if (rightMode === 'identity') return input
+    if (rightMode === 'clamp') return outputRange[outputRange.length - 1]
+  }
+
+  let segmentIndex = 0
+  for (let index = 0; index < inputRange.length - 1; index += 1) {
+    if (inputRange[index + 1] >= input) {
+      segmentIndex = index
+      break
+    }
+    segmentIndex = inputRange.length - 2
+  }
+
+  const inputStart = inputRange[segmentIndex]
+  const inputEnd = inputRange[segmentIndex + 1]
+  const outputStart = outputRange[segmentIndex]
+  const outputEnd = outputRange[segmentIndex + 1]
+  const span = inputEnd - inputStart
+  const rawProgress = span === 0 ? 0 : (input - inputStart) / span
+  const progress = clamp(easing ? easing(clamp(rawProgress, 0, 1)) : rawProgress, 0, 1)
+
+  return outputStart + (outputEnd - outputStart) * progress
+}
+
+export function Img({
+  src,
+  alt,
+  style,
+  ...rest
+}: {
+  src: string
+  alt?: string
+  style?: CSSProperties
+  [key: string]: unknown
+}) {
+  return <img {...rest} src={src} alt={alt} style={style} />
+}
+
 export function AbsoluteFill({
   children,
   style,