/** * UIModal - モーダルアニメーション */ import { AbsoluteFill, useCurrentFrame, useVideoConfig, spring } from "remotion"; import { C, lerp, font } from "@/remotion-vendor/common"; export const UIModal = ({ startDelay = 0 }: { startDelay?: number; }) => { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); const openStart = startDelay + 20; const closeStart = startDelay + 70; const isOpen = frame >= openStart && frame < closeStart; const backdropOpacity = isOpen ? lerp(frame, [openStart, openStart + 10], [0, 0.8]) : lerp(frame, [closeStart, closeStart + 10], [0.8, 0]); const modalProgress = spring({ frame: isOpen ? frame - openStart : closeStart - frame + 10, fps, config: { damping: 15, stiffness: 200 }, }); return ( {/* 背景コンテンツ */}

Dashboard

{[1, 2, 3].map((i) => (

))}

{/* バックドロップ */} {/* モーダル */} {(isOpen || frame < closeStart + 15) && (

{/* 閉じるボタン */}

{/* チェックマークアイコン（SVG） */}

Account Created

Your account has been successfully created. You can now access all features.

)} ); };

UI Modal

Install