feat: Integrate Remotion for video generation, add video compositions, and adapt ContactForm for Remotion compatibility.

video/compositions/ButtonShowcase.tsx

@@ -0,0 +1,254 @@
+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>
+    );
+};

video/compositions/ContactFormShowcase.tsx

@@ -0,0 +1,209 @@
+import React, { useMemo, useEffect, useState, useRef } from 'react';
+import {
+    AbsoluteFill,
+    interpolate,
+    useCurrentFrame,
+    useVideoConfig,
+    Easing,
+    Img,
+    delayRender,
+    continueRender,
+    spring,
+} from 'remotion';
+import { MouseCursor } from '../components/MouseCursor';
+import { ContactForm } from '@/src/components/ContactForm';
+import { BackgroundGrid } from '@/src/components/Layout';
+import { initialState } from '@/src/components/ContactForm/constants';
+
+// Brand Assets
+import IconWhite from '@/src/assets/logo/Icon White Transparent.svg';
+
+export const ContactFormShowcase: React.FC = () => {
+    const frame = useCurrentFrame();
+    const { width, height, fps } = useVideoConfig();
+    const [handle] = useState(() => delayRender('Initializing Smart Camera'));
+
+    useEffect(() => {
+        if (typeof window !== 'undefined') (window as any).isRemotion = true;
+        const timer = setTimeout(() => continueRender(handle), 500);
+        return () => clearTimeout(timer);
+    }, [handle]);
+
+    // ---- SMART ANCHOR SYSTEM ----
+    // We define which target the camera should follow at each frame
+    const activeTargetId = useMemo(() => {
+        if (frame < 60) return 'overview';
+        if (frame < 160) return 'focus-target-web-app';
+        if (frame < 260) return 'focus-target-next';
+        if (frame < 300) return 'overview';
+        if (frame < 550) return 'focus-target-company';
+        if (frame < 650) return 'focus-target-next';
+        if (frame < 800) return 'overview';
+        return 'overview';
+    }, [frame]);
+
+    // Pre-calculated coordinates for common targets in the 1200px scaled form
+    // Since real-time DOM measurements can be jittery during a render, 
+    // we use "Systematic Virtual Anchors" calibrated to the layout.
+    const anchors = useMemo(() => ({
+        'overview': { z: 0.85, x: 0, y: 0 },
+        'focus-target-web-app': { z: 1.3, x: 300, y: 0 },
+        'focus-target-next': { z: 1.1, x: -380, y: -280 },
+        'focus-target-company': { z: 1.45, x: 50, y: 220 },
+    }), []);
+
+    // ---- UNIFIED SPRING PHYSICS ----
+    const camera = useMemo(() => {
+        // Find the target state
+        const target = (anchors as any)[activeTargetId] || anchors.overview;
+
+        // We use a "Continuous Follow" spring that always chases the activeTargetId
+        // but we need to know when the target changed to reset the spring animation.
+        // Actually, for smoothness, we'll just use the frame globally and let the spring settle.
+
+        // Let's create a transition system
+        const points = [
+            { f: 0, t: 'overview' },
+            { f: 80, t: 'focus-target-web-app' },
+            { f: 200, t: 'focus-target-next' },
+            { f: 280, t: 'overview' },
+            { f: 380, t: 'focus-target-company' },
+            { f: 580, t: 'focus-target-next' },
+            { f: 700, t: 'overview' },
+        ];
+
+        let idx = 0;
+        for (let i = 0; i < points.length; i++) {
+            if (frame >= points[i].f) idx = i;
+        }
+
+        const start = (anchors as any)[points[idx].t];
+        const end = (anchors as any)[(points[idx + 1] || points[idx]).t];
+
+        const s = spring({
+            frame: frame - points[idx].f,
+            fps,
+            config: { stiffness: 45, damping: 18, mass: 1 },
+        });
+
+        return {
+            z: interpolate(s, [0, 1], [start.z, end.z]),
+            x: interpolate(s, [0, 1], [start.x, end.x]),
+            y: interpolate(s, [0, 1], [start.y, end.y]),
+        };
+    }, [frame, anchors, fps]);
+
+    // ---- MOUSE HANDLER (Sticks to targets) ----
+    const mouse = useMemo(() => {
+        const path = [
+            { f: 10, x: width * 1.5, y: height * 1.2 }, // Offscreen
+            { f: 80, x: width * 0.35, y: height * 0.45 }, // Move to Web App
+            { f: 210, x: width * 0.85, y: height * 0.68 }, // Move to Next
+            { f: 380, x: width * 0.50, y: height * 0.35 }, // Move to Input
+            { f: 590, x: width * 0.85, y: height * 0.68 }, // Move to Next
+            { f: 850, x: width * 1.5, y: height * 1.2 },  // Exit
+        ];
+
+        let idx = 0;
+        for (let i = 0; i < path.length; i++) {
+            if (frame >= path[i].f) idx = i;
+        }
+
+        const p1 = path[idx];
+        const p2 = path[idx + 1] || p1;
+
+        const s = spring({
+            frame: frame - p1.f,
+            fps,
+            config: { stiffness: 40, damping: 22 },
+        });
+
+        return {
+            x: interpolate(s, [0, 1], [p1.x, p2.x]),
+            y: interpolate(s, [0, 1], [p1.y, p2.y]),
+        };
+    }, [frame, width, height, fps]);
+
+    // ---- UI PROGRESSION ----
+    const ui = useMemo(() => {
+        let step = 0;
+        let type = 'website';
+        let name = '';
+
+        if (frame > 140) type = 'web-app';
+        if (frame > 260) step = 1;
+
+        if (frame > 400) {
+            const txt = "Mintel Studios";
+            const chars = Math.min(Math.floor((frame - 400) / 4), txt.length);
+            name = txt.substring(0, chars);
+        }
+
+        if (frame > 620) step = 2;
+
+        return { step, type, name };
+    }, [frame]);
+
+    const formState = useMemo(() => ({
+        ...initialState,
+        projectType: ui.type as any,
+        companyName: ui.name,
+    }), [ui]);
+
+    // Click triggers
+    const isClicking = (frame > 135 && frame < 150) || (frame > 255 && frame < 270) || (frame > 615 && frame < 630);
+
+    return (
+        <AbsoluteFill className="bg-white">
+            <BackgroundGrid />
+
+            <style>{`
+                * { transition: none !important; animation: none !important; -webkit-font-smoothing: antialiased; }
+                .focus-layer { transform-style: preserve-3d; backface-visibility: hidden; will-change: transform; }
+            `}</style>
+
+            <div
+                className="absolute inset-0 flex items-center justify-center focus-layer"
+                style={{
+                    transform: `translate3d(${Math.round(camera.x)}px, ${Math.round(camera.y)}px, 0) scale(${camera.z.toFixed(4)})`,
+                }}
+            >
+                {/* Scale factor 0.85 for the base container */}
+                <div
+                    style={{ transform: 'scale(0.85) translate3d(0,0,0)', width: '1200px' }}
+                    className="focus-layer"
+                >
+                    <ContactForm
+                        initialStepIndex={ui.step}
+                        initialState={formState}
+                    />
+                </div>
+
+                {/* Mouse Cursor */}
+                <div
+                    style={{
+                        position: 'absolute',
+                        top: 0, left: 0,
+                        transform: `translate3d(${Math.round(mouse.x)}px, ${Math.round(mouse.y)}px, 0)`,
+                        zIndex: 1000,
+                    }}
+                    className="focus-layer"
+                >
+                    <MouseCursor isClicking={isClicking} x={0} y={0} />
+                </div>
+            </div>
+
+            {/* Branding Logo HUD */}
+            <div className="absolute top-28 left-28 z-50 focus-layer">
+                <div className="w-40 h-40 bg-black rounded-[3.5rem] flex items-center justify-center border-4 border-white/5 shadow-2xl">
+                    <Img src={IconWhite} className="w-24 h-24" />
+                </div>
+            </div>
+
+            <AbsoluteFill
+                className="bg-white pointer-events-none"
+                style={{ opacity: interpolate(frame, [0, 15], [1, 0], { extrapolateRight: 'clamp' }) }}
+            />
+        </AbsoluteFill>
+    );
+};