Marc Mintel
2113055a90
Some checks failed
Build & Deploy Mintel Blog / build-and-deploy (push) Failing after 2m19s
255 lines
11 KiB
TypeScript
255 lines
11 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
AbsoluteFill,
|
|
interpolate,
|
|
useCurrentFrame,
|
|
useVideoConfig,
|
|
Easing,
|
|
Img,
|
|
staticFile,
|
|
spring,
|
|
random,
|
|
} from 'remotion';
|
|
import { MouseCursor } from '../components/MouseCursor';
|
|
import { Button } from '@/src/components/Button';
|
|
import { Loader2, Check, UserCheck, ShieldCheck } from 'lucide-react';
|
|
|
|
// Import logo using the alias setup in remotion.config.ts
|
|
// We'll use the staticFile helper if it's in public, but these are in src/assets
|
|
// So we can try to import them directly if the bundler allows, or move them to public.
|
|
// Given Header.tsx imports them, they should be importable.
|
|
// import IconWhite from '@/src/assets/logo/Icon White Transparent.svg'; // Not used in this version
|
|
// Import black logo for light mode
|
|
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();
|
|
|
|
// Animate in/out based on 'show' prop would require state tracking or precise frame logic
|
|
// We'll trust the parent to mount/unmount or pass an animatable value
|
|
// For video, deterministic frame-based spring is best.
|
|
|
|
// We'll actually control position purely by parent for simplicity in this demo context
|
|
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);
|
|
}
|
|
|
|
// Button Width Morph (Optional: Make it circle on load? Keeping it wide for consistency is safer)
|
|
|
|
// 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>
|
|
);
|
|
};
|