mintel.me/apps/web/video/compositions/ButtonShowcase.tsx

import React from "react";
import {
  AbsoluteFill,
  interpolate,
  useCurrentFrame,
  useVideoConfig,
  Easing,
  Img,
  spring,
} from "remotion";
import { MouseCursor } from "../components/MouseCursor";
import { Button } from "@/src/components/Button";
import { Loader2, Check, ShieldCheck } from "lucide-react";

 

// Import logo using the alias setup in remotion.config.ts
import IconBlack from "@/src/assets/logo/Icon Black Transparent.svg";

const Background: React.FC<{ loadingOpacity: number }> = ({
  loadingOpacity,
}) => {
  return (
    <AbsoluteFill className="bg-white">
      {/* Website-Matching Grid */}
      <div className="absolute inset-0">
        <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
          <defs>
            <pattern
              id="lightGrid"
              width="40"
              height="40"
              patternUnits="userSpaceOnUse"
            >
              <path
                d="M 40 0 L 0 0 0 40"
                fill="none"
                stroke="#f1f5f9"
                strokeWidth="1"
              />
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#lightGrid)" />
        </svg>
      </div>

      {/* Subtle Gradient Overlay */}
      <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,transparent_0%,rgba(255,255,255,0.8)_100%)]" />

      {/* Dynamic "Processing" Rings (Background Activity during loading) */}
      <div
        className="absolute inset-0 flex items-center justify-center pointer-events-none"
        style={{ opacity: loadingOpacity * 0.1 }}
      >
        <div className="w-[500px] h-[500px] border border-slate-900 rounded-full animate-[spin_10s_linear_infinite] opacity-20 border-t-transparent" />
        <div className="absolute w-[400px] h-[400px] border border-slate-900 rounded-full animate-[spin_7s_linear_infinite_reverse] opacity-20 border-b-transparent" />
      </div>

      {/* STATIC Logo - Strictly no animation on the container */}
      <div className="absolute top-12 left-12 z-0">
        <div className="flex items-center gap-4">
          <div className="w-14 h-14 flex items-center justify-center bg-white rounded-xl border border-slate-200 shadow-sm">
            <Img src={IconBlack} className="w-8 h-8 opacity-90" />
          </div>
          <div className="flex flex-col opacity-80">
            <span className="text-slate-900 font-sans font-bold text-lg tracking-tight leading-none">
              Mintel.me
            </span>
            <span className="text-slate-400 font-serif italic text-xs mt-1">
              Component Library
            </span>
          </div>
        </div>
      </div>
    </AbsoluteFill>
  );
};

// Toast Notification Component
const Toast: React.FC<{ _show: boolean; _text: string }> = ({
  _show,
  _text,
}) => {
  const _frame = useCurrentFrame();
  const _fps = useVideoConfig();

  return (
    <div className="flex items-center gap-3 bg-slate-900 text-white px-6 py-4 rounded-xl shadow-2xl border border-slate-800">
      <div className="w-8 h-8 rounded-full bg-green-500/20 flex items-center justify-center text-green-400">
        <ShieldCheck size={18} />
      </div>
      <div className="flex flex-col">
        <span className="font-bold text-sm tracking-wide">
          Authentication Successful
        </span>
        <span className="text-slate-400 text-xs font-medium">
          Access granted to secure portal
        </span>
      </div>
    </div>
  );
};

export const ButtonShowcase: React.FC = () => {
  const frame = useCurrentFrame();
  const { width, height, fps } = useVideoConfig();

  // ---- SEQUENCE TIMELINE (300 frames / 5s) ----
  const ENTER_START = 20;
  const HOVER_START = 70;
  const CLICK_FRAME = 90;
  const LOADING_START = 95;
  const SUCCESS_START = 180;
  const TOAST_START = 190;
  const TOAST_END = 260;
  const EXIT_START = 220;

  // 1. Mouse Animation (Bézier Path)
  const getMousePos = (f: number) => {
    const startX = width * 1.2;
    const startY = height * 1.2;
    const targetX = width / 2;
    const targetY = height / 2;

    if (f < ENTER_START) return { x: startX, y: startY, vx: 0 };

    // Approach
    if (f < HOVER_START) {
      const t = interpolate(f, [ENTER_START, HOVER_START], [0, 1], {
        extrapolateRight: "clamp",
      });
      const ease = Easing.bezier(0.16, 1, 0.3, 1)(t);
      const x = interpolate(ease, [0, 1], [startX, targetX]);
      const y = interpolate(ease, [0, 1], [startY, targetY]);
      return { x, y, vx: -10 }; // Approximate Velocity
    }

    // Hover
    if (f < EXIT_START) {
      const noise = Math.sin(f * 0.1) * 2;
      return { x: targetX + noise, y: targetY + noise, vx: 0 };
    }

    // Exit
    const t = interpolate(f, [EXIT_START, EXIT_START + 30], [0, 1], {
      extrapolateLeft: "clamp",
    });
    const ease = Easing.exp(t);
    return {
      x: interpolate(ease, [0, 1], [targetX, width * 0.9]),
      y: interpolate(ease, [0, 1], [targetY, -100]),
      vx: 10,
    };
  };

  const { x: mouseX, y: mouseY, vx } = getMousePos(frame);

  // 3D Cursor Skew
  const cursorSkew = interpolate(vx, [-20, 20], [20, -20], {
    extrapolateRight: "clamp",
    extrapolateLeft: "clamp",
  });
  const isClicking = frame >= CLICK_FRAME && frame < CLICK_FRAME + 8;
  const clickRotate = isClicking ? 30 : 0;

  // 2. Button State Logic
  const isLoading = frame >= LOADING_START && frame < SUCCESS_START;
  const isSuccess = frame >= SUCCESS_START;

  // Loading Spinner Rotation
  const spinnerRot = interpolate(
    frame,
    [LOADING_START, SUCCESS_START],
    [0, 720],
  );

  // Button Scale Physics
  const pressSpring = spring({
    frame: frame - CLICK_FRAME,
    fps,
    config: { stiffness: 400, damping: 20 },
  });
  const successSpring = spring({
    frame: frame - SUCCESS_START,
    fps,
    config: { stiffness: 200, damping: 15 },
  });

  // Morph scale: Click(Compress) -> Loading(Normal) -> Success(Pop)
  let buttonScale = 1;
  if (frame >= CLICK_FRAME && frame < LOADING_START) {
    buttonScale = 1 - pressSpring * 0.05;
  } else if (isSuccess) {
    buttonScale = 1 + successSpring * 0.05;
  }

  // 3. Toast Animation
  const toastSpring = spring({
    frame: frame - TOAST_START,
    fps,
    config: { stiffness: 100, damping: 15 },
  });
  const toastExit = spring({
    frame: frame - TOAST_END,
    fps,
    config: { stiffness: 100, damping: 20 },
  });
  const toastY =
    interpolate(toastSpring, [0, 1], [100, -80]) +
    interpolate(toastExit, [0, 1], [0, 200]);
  const toastOpacity =
    interpolate(toastSpring, [0, 1], [0, 1]) -
    interpolate(toastExit, [0, 0.5], [0, 1]);

  return (
    <AbsoluteFill className="items-center justify-center overflow-hidden bg-white">
      <Background loadingOpacity={isLoading ? 1 : 0} />

      {/* Main Stage */}
      <div style={{ perspective: "1000px", zIndex: 10 }}>
        {/* Button Container */}
        <div
          style={{
            transform: `scale(${buttonScale})`,
            transition: "transform 0.1s",
          }}
        >
          <Button
            href="#"
            variant="primary"
            showArrow={!isLoading && !isSuccess}
            className={`
                            !transition-all !duration-500 
                            !px-16 !py-8 !text-2xl !font-bold 
                            ${
                              isSuccess
                                ? "!bg-white !text-slate-900 !border-slate-900 shadow-none" // Success: Outline/Minimal
                                : "!bg-slate-900 !text-white !border-none !shadow-2xl !shadow-slate-300" // Default/Load: Solid
                            }
                            !rounded-full
                        `}
          >
            <div className="flex items-center gap-4 min-w-[240px] justify-center text-center">
              {/* Default State */}
              {!isLoading && !isSuccess && (
                <span className="animate-fade-in">Start Verification</span>
              )}

              {/* Loading State */}
              {isLoading && (
                <div className="absolute inset-0 flex items-center justify-center">
                  <Loader2
                    className="animate-spin text-slate-400"
                    size={32}
                    style={{ transform: `rotate(${spinnerRot}deg)` }}
                  />
                </div>
              )}

              {/* Success State */}
              {isSuccess && (
                <div className="flex items-center gap-3 animate-slide-up text-slate-900">
                  <Check size={28} strokeWidth={3} />
                  <span>Verified</span>
                </div>
              )}
            </div>
          </Button>
        </div>
      </div>

      {/* Toast Notification Layer - Bottom Center */}
      <div
        className="absolute bottom-0 left-0 right-0 flex justify-center pb-20"
        style={{
          transform: `translateY(${toastY}px)`,
          opacity: Math.max(0, toastOpacity),
        }}
      >
        <Toast _show={true} _text="" />
      </div>

      {/* 3D Cursor */}
      <div
        style={{
          position: "absolute",
          top: 0,
          left: 0,
          transform: `translate(${mouseX}px, ${mouseY}px) skewX(${cursorSkew}deg) rotateX(${clickRotate}deg)`,
          zIndex: 1000,
          pointerEvents: "none",
        }}
      >
        <MouseCursor x={0} y={0} isClicking={isClicking} />
      </div>
    </AbsoluteFill>
  );
};