'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const BG_COLOR = "#0f172a"; const PRIMARY_COLOR = "#38bdf8"; // Sky 400 const ACCENT_COLOR = "#f43f5e"; // Rose 500 const METAL_COLOR = "#94a3b8"; // Slate 400 const FLUID_COLOR_LOW = "#0ea5e9"; // Sky 500 const FLUID_COLOR_HIGH = "#fbbf24"; // Amber 400 (High pressure) export default function HydraulicBrakeAnimation() { // Animation State const [frame, setFrame] = useState(0); // Simulation Variables const animationRef = useRef(); const startTimeRef = useRef(Date.now()); // Physics State (Derived from time loop) const [state, setState] = useState({ leverSqueeze: 0, // 0 to 1 pressure: 0, // 0 to 1 rotorSpeed: 1, // 1 (full speed) to 0 (stopped) padGap: 1, // 1 (open) to 0 (clamped) heat: 0, // 0 to 1 phase: 'idle' // idle, braking, holding, releasing }); // Animation Loop useEffect(() => { const loop = () => { const now = Date.now(); const totalCycleTime = 8000; // 8 seconds per loop const t = (now - startTimeRef.current) % totalCycleTime; let newState = { ...state }; // Phase 1: Cruising (0ms - 2000ms) if (t < 2000) { newState.phase = 'idle'; newState.leverSqueeze = 0; newState.pressure = 0; newState.rotorSpeed = 1; newState.padGap = 1; newState.heat = Math.max(0, newState.heat - 0.05); } // Phase 2: Braking Input (2000ms - 3000ms) else if (t < 3000) { newState.phase = 'braking'; const progress = (t - 2000) / 1000; // Ease out cubic const ease = 1 - Math.pow(1 - progress, 3); newState.leverSqueeze = ease; newState.pressure = ease; newState.padGap = 1 - ease; newState.rotorSpeed = 1; // Still moving fast until clamped } // Phase 3: Deceleration & Heat (3000ms - 5000ms) else if (t < 5000) { newState.phase = 'holding'; const progress = (t - 3000) / 2000; newState.leverSqueeze = 1; newState.pressure = 1; newState.padGap = 0; // Speed decays newState.rotorSpeed = Math.max(0, 1 - Math.pow(progress, 0.5)); // Heat rises as speed drops newState.heat = Math.min(1, Math.sin(progress * Math.PI)); } // Phase 4: Release (5000ms - 6000ms) else if (t < 6000) { newState.phase = 'releasing'; const progress = (t - 5000) / 1000; const ease = 1 - Math.pow(1 - progress, 3); newState.leverSqueeze = 1 - ease; newState.pressure = 1 - ease; newState.padGap = ease; newState.rotorSpeed = 0; // Stopped newState.heat = Math.max(0, newState.heat - 0.02); } // Phase 5: Acceleration (6000ms - 8000ms) else { newState.phase = 'accelerating'; const progress = (t - 6000) / 2000; newState.leverSqueeze = 0; newState.pressure = 0; newState.padGap = 1; newState.rotorSpeed = progress; // Speeding up newState.heat = Math.max(0, newState.heat - 0.05); } setState(newState); setFrame(prev => prev + 1); // Force render animationRef.current = requestAnimationFrame(loop); }; animationRef.current = requestAnimationFrame(loop); return () => cancelAnimationFrame(animationRef.current!); }, []); // Visual Calculations const fluidColor = interpolateColor(FLUID_COLOR_LOW, FLUID_COLOR_HIGH, state.pressure); const rotorColor = interpolateColor("#cbd5e1", "#ef4444", state.heat); // Particles for flow visualization const particles = useMemo(() => Array.from({ length: 20 }, (_, i) => ({ id: i, offset: Math.random() * 1000, speed: Math.random() * 2 + 1 })), []); return (

); } // Helper function interpolateColor(color1: string, color2: string, factor: number) { if (typeof window === 'undefined') return color1; // Simple hex interpolation logic could go here, but for brevity using canvas or simple switching // For this example, we will stick to returning hex strings. // A proper implementation would parse hex to RGB, interpolate, and convert back. // Here is a simplified version: const r1 = parseInt(color1.substring(1, 3), 16); const g1 = parseInt(color1.substring(3, 5), 16); const b1 = parseInt(color1.substring(5, 7), 16); const r2 = parseInt(color2.substring(1, 3), 16); const g2 = parseInt(color2.substring(3, 5), 16); const b2 = parseInt(color2.substring(5, 7), 16); const r = Math.round(r1 + factor * (r2 - r1)); const g = Math.round(g1 + factor * (g2 - g1)); const b = Math.round(b1 + factor * (b2 - b1)); return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); }