Sportstime/marketing-videos/src/videos/TheSquad/ResultsReveal.tsx

import React from "react";
import {
  AbsoluteFill,
  useCurrentFrame,
  useVideoConfig,
  spring,
  interpolate,
} from "remotion";
import { theme } from "../../components/shared/theme";

// Confetti particles
const Confetti: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps, width, height } = useVideoConfig();

  const particles = React.useMemo(() => {
    const colors = [theme.colors.accent, theme.colors.secondary, theme.colors.gold, "#9B59B6"];
    return Array.from({ length: 25 }, (_, i) => ({
      id: i,
      x: Math.random() * width,
      color: colors[Math.floor(Math.random() * colors.length)],
      size: 6 + Math.random() * 10,
      rotation: Math.random() * 360,
      speed: 0.4 + Math.random() * 0.4,
      delay: Math.random() * 8,
    }));
  }, [width]);

  return (
    <>
      {particles.map((particle) => {
        const localFrame = frame - particle.delay;
        if (localFrame < 0) return null;

        const y = interpolate(
          localFrame,
          [0, fps * 2],
          [-50, height + 100],
          { extrapolateRight: "clamp" }
        ) * particle.speed;

        const rotation = particle.rotation + localFrame * 4;
        const opacity = interpolate(
          localFrame,
          [0, fps * 0.3, fps * 1.5, fps * 2],
          [0, 1, 1, 0],
          { extrapolateRight: "clamp" }
        );

        return (
          <div
            key={particle.id}
            style={{
              position: "absolute",
              left: particle.x,
              top: y,
              width: particle.size,
              height: particle.size,
              background: particle.color,
              borderRadius: 2,
              transform: `rotate(${rotation}deg)`,
              opacity,
            }}
          />
        );
      })}
    </>
  );
};

export const ResultsReveal: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // Winner card entrance
  const cardProgress = spring({
    frame,
    fps,
    config: { damping: 15, stiffness: 120 },
  });

  const cardScale = interpolate(cardProgress, [0, 1], [0.8, 1]);
  const cardOpacity = interpolate(cardProgress, [0, 1], [0, 1]);

  // "Democracy wins" text entrance
  const textProgress = spring({
    frame: frame - fps * 0.6,
    fps,
    config: theme.animation.smooth,
  });

  const textOpacity = interpolate(textProgress, [0, 1], [0, 1]);
  const textY = interpolate(textProgress, [0, 1], [20, 0]);

  return (
    <AbsoluteFill
      style={{
        background: theme.colors.background,
      }}
    >
      {/* Confetti */}
      <Confetti />

      <AbsoluteFill
        style={{
          justifyContent: "center",
          alignItems: "center",
          padding: 40,
        }}
      >
        {/* Winner card */}
        <div
          style={{
            transform: `scale(${cardScale})`,
            opacity: cardOpacity,
            width: "90%",
            maxWidth: 600,
          }}
        >
          <div
            style={{
              background: "#1C1C1E",
              borderRadius: 28,
              padding: 40,
              border: `3px solid ${theme.colors.accent}`,
              boxShadow: `0 20px 60px rgba(255, 107, 53, 0.3)`,
            }}
          >
            {/* Winner badge */}
            <div
              style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                gap: 12,
                marginBottom: 24,
              }}
            >
              <div
                style={{
                  width: 48,
                  height: 48,
                  borderRadius: "50%",
                  background: theme.colors.accent,
                  display: "flex",
                  justifyContent: "center",
                  alignItems: "center",
                }}
              >
                <svg width="24" height="24" viewBox="0 0 24 24" fill="white">
                  <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
                </svg>
              </div>
              <span
                style={{
                  fontFamily: theme.fonts.display,
                  fontSize: 24,
                  fontWeight: 700,
                  color: theme.colors.accent,
                  textTransform: "uppercase",
                  letterSpacing: 2,
                }}
              >
                Winner
              </span>
            </div>

            {/* Winning game */}
            <div style={{ textAlign: "center", marginBottom: 24 }}>
              <span
                style={{
                  fontFamily: theme.fonts.text,
                  fontSize: 14,
                  color: theme.colors.textMuted,
                  background: "rgba(255,107,53,0.2)",
                  padding: "6px 12px",
                  borderRadius: 8,
                }}
              >
                NBA
              </span>
            </div>

            <div
              style={{
                fontFamily: theme.fonts.display,
                fontSize: 36,
                fontWeight: 700,
                color: theme.colors.text,
                textAlign: "center",
                marginBottom: 16,
              }}
            >
              Lakers vs Celtics
            </div>

            {/* Vote count */}
            <div
              style={{
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                gap: 16,
              }}
            >
              {/* Voter avatars */}
              <div style={{ display: "flex" }}>
                {["#FF6B6B", "#4ECDC4", "#45B7D1"].map((color, i) => (
                  <div
                    key={i}
                    style={{
                      width: 36,
                      height: 36,
                      borderRadius: "50%",
                      background: color,
                      border: `2px solid #1C1C1E`,
                      marginLeft: i > 0 ? -10 : 0,
                    }}
                  />
                ))}
              </div>
              <span
                style={{
                  fontFamily: theme.fonts.text,
                  fontSize: 18,
                  color: theme.colors.textSecondary,
                }}
              >
                3 votes • 100%
              </span>
            </div>
          </div>
        </div>

        {/* "Democracy wins" text */}
        <div
          style={{
            position: "absolute",
            bottom: 150,
            opacity: textOpacity,
            transform: `translateY(${textY}px)`,
          }}
        >
          <span
            style={{
              fontFamily: theme.fonts.display,
              fontSize: 32,
              fontWeight: 600,
              color: theme.colors.textSecondary,
            }}
          >
            Democracy wins.
          </span>
        </div>
      </AbsoluteFill>
    </AbsoluteFill>
  );
};