How to create a load more demo video template 「Load More」デモ動画テンプレートの作り方

import React from 'react';

interface CardItem {
  id: number;
  badge: string;
  title: string;
  desc: string;
}

interface Theme {
  panel:  string;
  border: string;
  accent: string;
  text:   string;
  muted:  string;
  radius: number;
}

interface CardProps {
  item:        CardItem;
  theme:       Theme;
  opacity:     number;
  translateY:  number;
  highlight?:  number; // 0–1, fades from 1 to 0
}

export const Card: React.FC<CardProps> = ({
  item, theme, opacity, translateY, highlight = 0,
}) => {
  const glowAlpha   = highlight * 0.35;
  const borderColor = highlight > 0
    ? `rgba(59,130,246,${0.25 + highlight * 0.55})`
    : theme.border;
  const boxShadow = highlight > 0
    ? `0 0 0 4px rgba(59,130,246,${glowAlpha}), 0 4px 20px rgba(59,130,246,${glowAlpha * 0.6})`
    : '0 2px 8px rgba(0,0,0,0.06)';

  return (
    <div style={{
      background:    theme.panel,
      border:        `2px solid ${borderColor}`,
      borderRadius:  theme.radius,
      padding:       '28px 24px',
      display:       'flex',
      flexDirection: 'column',
      gap:           10,
      opacity,
      transform:     `translateY(${translateY}px)`,
      boxShadow,
    }}>
      <span style={{
        fontSize:      12,
        fontWeight:    700,
        color:         theme.accent,
        textTransform: 'uppercase',
        letterSpacing: '0.08em',
      }}>
        {item.badge}
      </span>
      <p style={{ fontSize: 20, fontWeight: 600, color: theme.text, margin: 0, lineHeight: 1.4 }}>
        {item.title}
      </p>
      <p style={{ fontSize: 15, color: theme.muted, margin: 0, lineHeight: 1.6 }}>
        {item.desc}
      </p>
    </div>
  );
};