import React from 'react'; import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig, } from 'remotion'; export interface HardwareDeviceFrameProps { deviceType?: 'smart-card' | 'phone' | 'terminal'; eyebrow?: string; label?: string; subtitle?: string; showEmission?: boolean; floatAnimation?: boolean; accentColor?: string; surfaceColor?: string; textColor?: string; layout?: 'column' | 'row'; cardWidth?: string; springConfig?: { damping?: number; mass?: number; stiffness?: number; }; } export const HardwareDeviceFrame: React.FC = ({ deviceType = 'smart-card', eyebrow = 'PHYSICAL HARDWARE', label = 'TAP-TO-PAY CARD', subtitle = '13.56 MHz Passive NFC Transponder', showEmission = true, floatAnimation = true, accentColor = '#38bdf8', surfaceColor = '#070d1a', textColor = '#f8fafc', layout = 'column', cardWidth = '92%', springConfig = { damping: 16, stiffness: 120, mass: 0.9 }, }) => { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); // Stage 1: Primary structural entrance spring const entrance = spring({ frame, fps, config: springConfig, }); const cardEntrance = spring({ frame: Math.max(0, frame - 4), fps, config: { damping: 15, stiffness: 140, mass: 0.8 }, }); const telemetryEntrance = spring({ frame: Math.max(0, frame - 12), fps, config: { damping: 14, stiffness: 160 }, }); // Stage 4: Continuous ambient floating & specular sheen const floatY = floatAnimation ? Math.sin((frame / (fps * 1.2)) * Math.PI) * 8 : 0; const floatRotate = floatAnimation ? Math.cos((frame / (fps * 1.5)) * Math.PI) * 1.2 : 0; const sheenProgress = (frame % (fps * 3.5)) / (fps * 3.5); const sheenX = interpolate(sheenProgress, [0, 1], [-150, 250], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }); // Stage 4: RF magnetic induction field wave rings const cycleTime = fps * 2.2; const waveCycle1 = (frame % cycleTime) / cycleTime; const waveCycle2 = ((frame + cycleTime * 0.33) % cycleTime) / cycleTime; const waveCycle3 = ((frame + cycleTime * 0.66) % cycleTime) / cycleTime; const r1 = interpolate(waveCycle1, [0, 1], [40, 280], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }); const op1 = interpolate(waveCycle1, [0, 0.4, 0.85, 1], [0.85, 0.6, 0.15, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }); const r2 = interpolate(waveCycle2, [0, 1], [40, 280], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }); const op2 = interpolate(waveCycle2, [0, 0.4, 0.85, 1], [0.85, 0.6, 0.15, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }); const r3 = interpolate(waveCycle3, [0, 1], [40, 280], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }); const op3 = interpolate(waveCycle3, [0, 0.4, 0.85, 1], [0.85, 0.6, 0.15, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }); const blurAmount = interpolate(entrance, [0, 1], [12, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }); const tiltX = interpolate(entrance, [0, 1], [10, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }); return ( {/* Architectural Dot Grid Background */}

{/* Main Presentation Stage */}

{/* Eyebrow Pill */} {eyebrow && (

{eyebrow}

)} {/* Outer Chassis Card */}

{/* Subtle Ambient Accent Rim */}

{/* Device Showcase Stage with Concentric RF Field Rings */}

{/* Concentric RF Waves */} {showEmission && ( )} {/* Smart Card Visual */} {deviceType === 'smart-card' && (

{/* Diagonal Specular Glass Sheen */}

{/* Card Top Row: EMV Gold Contact Chip + NFC Symbol */}

{/* Detailed EMV Chip Architecture */}

{/* Chip Trace Segments */}

{/* Contactless Wave Glyph */}

{/* Card Middle: Bank Identification / Token */}

•••• 8829 4012

{/* Card Bottom Row: Token Protocol + Secure Enclave Badge */}

NFC ISO/IEC 14443-A

SECURE ELEMENT

)} {/* Smartphone Visual */} {deviceType === 'phone' && (

{/* Dynamic Island */}

{/* Phone NFC Pay Screen */}

READY TO TRANSMIT

)} {/* Terminal Visual */} {deviceType === 'terminal' && (

{/* 4 Status LEDs */}

{[0, 1, 2, 3].map((led) => (

))}

{/* Terminal Screen */}

TAP / INSERT CARD $48.50 USD

)}

{/* Typography & Broadcast Telemetry Block */}

{label}

{subtitle}

{/* Hardware Telemetry Monospace Badges */}

CARRIER: 13.56 MHz

| INDUCTION: ACTIVE | CRC16: OK

); }; export default HardwareDeviceFrame;