How to create a toast notification sequence トースト通知シーケンスの作り方

import React from 'react';
import { interpolate, spring } from 'remotion';
import type { ToastDef, ToastType } from '../compositions/ToastDemo';

interface Theme {
  text:   string;
  radius: number;
}

interface ToastProps {
  def:        ToastDef;
  frame:      number;
  fps:        number;
  toastWidth: number;
  toastY:     number;
  theme:      Theme;
}

// ── Per-type visual config ───────────────────────────────────────────────────
const TYPE_CFG: Record<ToastType, {
  bg: string; border: string; iconBg: string;
  icon: string; label: string; symbol: string; progress: string;
}> = {
  success: {
    bg: '#f0fdf4', border: '#86efac', iconBg: '#dcfce7',
    icon: '#16a34a', label: '#15803d', symbol: '✓', progress: '#22c55e',
  },
  warning: {
    bg: '#fffbeb', border: '#fde68a', iconBg: '#fef3c7',
    icon: '#d97706', label: '#92400e', symbol: '!', progress: '#f59e0b',
  },
  error: {
    bg: '#fef2f2', border: '#fca5a5', iconBg: '#fee2e2',
    icon: '#dc2626', label: '#991b1b', symbol: '✕', progress: '#ef4444',
  },
};

export const Toast: React.FC<ToastProps> = ({
  def, frame, fps, toastWidth, toastY, theme,
}) => {
  const { appearFrame, exitFrame, type, title, message } = def;
  const cfg = TYPE_CFG[type];

  // ── Entrance: spring slide from right ────────────────────────────────────
  const entranceSpring = spring({
    frame: frame - appearFrame,
    fps,
    config: { damping: 22, stiffness: 100, mass: 0.9 },
  });

  // ── Exit: spring slide back right ────────────────────────────────────────
  const isExiting  = frame >= exitFrame;
  const exitSpring = isExiting
    ? spring({ frame: frame - exitFrame, fps,
        config: { damping: 18, stiffness: 120, mass: 0.7 } })
    : 0;

  const slideX = interpolate(entranceSpring, [0, 1], [toastWidth + 60, 0])
               + interpolate(exitSpring,     [0, 1], [0, toastWidth + 80]);
  const opacity = interpolate(entranceSpring, [0, 0.4], [0, 1], { extrapolateRight: 'clamp' })
                * interpolate(exitSpring,     [0, 0.6], [1, 0], { extrapolateLeft:  'clamp' });

  // ── Auto-dismiss progress bar ────────────────────────────────────────────
  const duration  = exitFrame - appearFrame;
  const elapsed   = Math.max(0, Math.min(frame - appearFrame, duration));
  const barWidth  = (1 - elapsed / duration) * toastWidth;

  return (
    <div style={{
      position: 'absolute',
      top: toastY,
      right: 60,
      width: toastWidth,
      opacity,
      transform: `translateX(${slideX}px)`,
      background: cfg.bg,
      border: `2px solid ${cfg.border}`,
      borderRadius: theme.radius,
      padding: '20px 22px 16px',
      display: 'flex',
      gap: 16,
      alignItems: 'flex-start',
      boxShadow: '0 8px 40px rgba(0,0,0,0.10)',
      overflow: 'hidden',
    }}>

      {/* Icon bubble */}
      <div style={{
        width: 44, height: 44,
        borderRadius: '50%',
        background: cfg.iconBg,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 22, fontWeight: 800, color: cfg.icon,
        flexShrink: 0,
      }}>
        {cfg.symbol}
      </div>

      {/* Text */}
      <div style={{ flex: 1, minWidth: 0 }}>
        <p style={{ fontSize: 20, fontWeight: 700, color: cfg.label, margin: 0, lineHeight: 1.3 }}>
          {title}
        </p>
        <p style={{ fontSize: 16, color: '#374151', margin: '5px 0 0', lineHeight: 1.5 }}>
          {message}
        </p>
      </div>

      {/* Dismiss icon (decorative) */}
      <div style={{ fontSize: 18, color: '#9ca3af', flexShrink: 0 }}>✕</div>

      {/* Auto-dismiss progress bar */}
      <div style={{
        position: 'absolute',
        bottom: 0, left: 0,
        height: 4,
        width: barWidth,
        background: cfg.progress,
      }} />

    </div>
  );
};