import React from 'react'; import { interpolate, spring, useCurrentFrame, useVideoConfig } from 'remotion'; export interface DatabaseNodeProps { title?: string; engine?: string; activity?: 'idle' | 'read' | 'write' | 'scan' | 'locked'; status?: 'ready' | 'querying' | 'syncing' | 'error' | 'idle' | 'read' | 'write' | 'scan' | 'locked'; recordCount?: string; activeConnections?: number; iops?: number; latencyMs?: number; highlight?: boolean; width?: number; accentColor?: string; surfaceColor?: string; springConfig?: { damping?: number; mass?: number; stiffness?: number; }; } const ACTIVITY_CONFIGS = { idle: { color: '#38bdf8', label: 'STANDBY', lock: 'SHARED_READ' }, read: { color: '#06b6d4', label: 'INDEX SCAN (L2)', lock: 'ACCESS_SHARED' }, write: { color: '#10b981', label: 'WAL FLUSH (SYNC)', lock: 'ROW_EXCLUSIVE' }, scan: { color: '#a855f7', label: 'PARALLEL SEQ SCAN', lock: 'TABLE_SHARED' }, locked: { color: '#f43f5e', label: 'LOCK CONTENDED', lock: 'EXCLUSIVE_LOCK' }, }; export const DatabaseNode: React.FC = ({ title = 'PostgreSQL Primary', engine = 'sql', activity, status, recordCount = '1,450,200 records', activeConnections = 128, iops = 14200, latencyMs = 0.8, highlight = false, width = 680, accentColor = '#06b6d4', surfaceColor = '#060a14', springConfig = { damping: 15, mass: 0.85, stiffness: 160 }, }) => { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); // Normalize activity mode from activity or status props const resolvedMode: 'idle' | 'read' | 'write' | 'scan' | 'locked' = activity || (status === 'querying' ? 'write' : status === 'syncing' ? 'scan' : status === 'error' ? 'locked' : status === 'ready' ? 'read' : 'read'); const act = ACTIVITY_CONFIGS[resolvedMode] || ACTIVITY_CONFIGS.read; const brandAccent = accentColor || act.color; // Beat 1: Primary Structural Entrance (0 - 0.5s) const entrance = spring({ frame, fps, config: springConfig, }); const entranceScale = interpolate(entrance, [0, 1], [0.88, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }); const entranceRotateX = interpolate(entrance, [0, 1], [8, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }); const entranceBlur = interpolate(entrance, [0, 1], [12, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }); const entranceOpacity = interpolate(entrance, [0, 0.4], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', }); // Beat 2: Structural Vector Draw-In (0.15s - 0.8s) const vectorProgress = interpolate( frame, [Math.round(fps * 0.15), Math.round(fps * 0.8)], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' } ); const strokeOffset = interpolate(vectorProgress, [0, 1], [400, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }); // Beat 3: Staggered Sub-elements (0.3s - 1.2s) const badgeSpring = spring({ frame: Math.max(0, frame - Math.round(fps * 0.3)), fps, config: { damping: 12, stiffness: 200 }, }); const telemetrySpring = spring({ frame: Math.max(0, frame - Math.round(fps * 0.45)), fps, config: { damping: 12, stiffness: 200 }, }); // Beat 4: Continuous Ambient Life (1.0s - End) const floatDrift = Math.sin(frame / (fps * 0.8)) * 4; const laserAngle = ((frame % (fps * 2)) / (fps * 2)) * Math.PI * 2; const laserX = 90 + Math.cos(laserAngle) * 58; const laserY = 48 + Math.sin(laserAngle) * 14; const busPulse = ((frame % (fps * 1.2)) / (fps * 1.2)); const glowBreathing = interpolate(Math.sin((frame / fps) * Math.PI * 2), [-1, 1], [16, 32], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }); return (

{/* Specular Ambient Rim Light */}

{/* Header Bar */}

{/* Cylindrical Storage Icon with Specular Glass */}

{title}

{engine.toUpperCase()} · {recordCount}

{/* Live Lock-State & Activity Badge */}

{act.label}

LOCK: {act.lock}

{/* True 3D Isometric SVG Cylinder Stack Architecture */}

{/* Real Quantitative Telemetry Readouts Bar */}

IOPS CAPACITY {(iops / 1000).toFixed(1)}k/s

P99 LATENCY {latencyMs} ms

ACTIVE CONNS {activeConnections}

); }; export default DatabaseNode;