/** * UIToast - 通知アニメーション - トースト */ import { AbsoluteFill, useCurrentFrame, useVideoConfig, spring } from "remotion"; import { C, EASE, lerp, font } from "@/remotion-vendor/common"; export const UIToast = ({ startDelay = 0 }: { startDelay?: number; }) => { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); const toasts = [ { type: "success", message: "File uploaded successfully", icon: "✓", color: C.success, delay: 0 }, { type: "warning", message: "Storage almost full", icon: "⚠", color: C.warning, delay: 25 }, { type: "error", message: "Connection failed", icon: "✕", color: C.danger, delay: 50 }, ]; return ( {/* 背景 */}

Notifications

{/* トースト */}

{toasts.map((toast) => { const showFrame = startDelay + toast.delay; const hideFrame = showFrame + 60; const isVisible = frame >= showFrame && frame < hideFrame; const enterProgress = spring({ frame: frame - showFrame, fps, config: { damping: 15, stiffness: 200 }, }); const exitProgress = frame >= hideFrame - 10 ? lerp(frame, [hideFrame - 10, hideFrame], [1, 0], EASE.out) : 1; if (!isVisible && frame >= hideFrame) return null; return (

{toast.icon}

{toast.message}

); })}

); };

UI Toast

Install