// platform-hinge-rise — 平台建立后，两块主体从相邻底部铰点反向翻起，最后结论台升入。
// 从独立 motion-blocking 研究中整理为纯 DOM/SVG 的通用 Remotion demo。
import React from 'react';
import { Easing, interpolate, useCurrentFrame } from 'remotion';
import { DesignStage } from '../../_fixtures/Motion';
export const PLATFORM_HINGE_RISE_DURATION = 104;
const CLAMP = { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' } as const;
const ease = (frame: number, start: number, end: number, from = 0, to = 1) =>
interpolate(frame, [start, Math.max(start + 1, end)], [from, to], {
...CLAMP,
easing: Easing.bezier(0.16, 1, 0.3, 1),
});
const hingeEase = (frame: number, start: number, end: number) =>
interpolate(frame, [start, Math.max(start + 1, end)], [0, 1], {
...CLAMP,
easing: Easing.bezier(0.4, 0, 0.2, 1),
});
const dampedWobble = (frame: number, start: number, duration: number, amplitude: number) => {
if (frame <= start || frame >= start + duration) return 0;
const p = (frame - start) / duration;
return amplitude * Math.sin(p * Math.PI * 3) * Math.pow(1 - p, 2);
};
const SubjectPanel: React.FC<{
side: 'left' | 'right';
progress: number;
wobble: number;
}> = ({ side, progress, wobble }) => {
const isLeft = side === 'left';
const x = isLeft ? 165 : 249;
const w = isLeft ? 92 : 78;
const h = isLeft ? 72 : 59;
const rise = isLeft ? 112 : 90;
const startRotation = isLeft ? -18 : 18;
return (
SUBJECT
);
};
export const PlatformHingeRise: React.FC = () => {
const frame = useCurrentFrame();
const platform = ease(frame, 0, 15, 0.012, 1);
const context = ease(frame, 12, 32);
const left = hingeEase(frame, 14, 30);
const right = hingeEase(frame, 14, 30);
const conclusion = ease(frame, 52, 74);
const leftWobble = dampedWobble(frame, 30, 16, 1.5);
const rightWobble = dampedWobble(frame, 31, 16, -1.2);
return (
);
};