'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1200; const VIEW_HEIGHT = 800; const BG_COLOR = '#0f172a'; const HONEY_COLOR = '#fbbf24'; const TECH_BLUE = '#22d3ee'; const TEXT_COLOR = '#e2e8f0'; // Math Helpers const toRad = (deg: number) => (deg * Math.PI) / 180; const lerp = (start: number, end: number, t: number) => start + (end - start) * t; const easeOutCubic = (t: number): number => 1 - Math.pow(1 - t, 3); const easeInOutSine = (x: number): number => -(Math.cos(Math.PI * x) - 1) / 2; // 3D Projection Helper const project = (x: number, y: number, z: number, angleX: number, angleY: number) => { const scale = 1000 / (1000 + z); // Perspective // Simple rotation matrices const cosX = Math.cos(angleX); const sinX = Math.sin(angleX); const cosY = Math.cos(angleY); const sinY = Math.sin(angleY); // Rotate Y const x1 = x * cosY - z * sinY; const z1 = x * sinY + z * cosY; // Rotate X const y2 = y * cosX - z1 * sinX; // const z2 = y * sinX + z1 * cosX; // Not needed for 2D project return { x: VIEW_WIDTH / 2 + x1 * scale, y: VIEW_HEIGHT / 2 + y2 * scale, scale }; }; export const HoneycombGeometry = () => { const [time, setTime] = useState(0); const requestRef = useRef(); const startTimeRef = useRef(); // Animation Loop const animate = (timestamp: number) => { if (!startTimeRef.current) startTimeRef.current = timestamp; const elapsed = timestamp - startTimeRef.current; setTime(elapsed); requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current!); }, []); // Animation Phases // 0-3s: Hexagon Formation // 3-6s: Prism Extrusion // 6-10s: Bottom Rhombi Formation & Analysis // 10-14s: Angles Highlight // 14s+: Grid Tessellation & Loop const totalCycle = 18000; // 18 seconds loop const t = (time % totalCycle) / 1000; // seconds // --- Geometry Calculations --- const hexRadius = 120; const prismHeight = 200; const pyramidDepth = 50; // Depth of the bottom center // Dynamic Camera const camRotY = useMemo(() => { if (t < 3) return 0; if (t < 6) return lerp(0, toRad(30), easeOutCubic((t - 3) / 3)); if (t < 14) return toRad(30) + Math.sin(t * 0.5) * 0.05; return lerp(toRad(30), 0, easeInOutSine((t - 14) / 2)); }, [t]); const camRotX = useMemo(() => { if (t < 3) return 0; if (t < 6) return lerp(0, toRad(-20), easeOutCubic((t - 3) / 3)); if (t < 14) return toRad(-20) + Math.cos(t * 0.5) * 0.05; return lerp(toRad(-20), 0, easeInOutSine((t - 14) / 2)); }, [t]); // Vertices const getHexPoints = (yOffset: number, r: number = hexRadius) => { return Array.from({ length: 6 }).map((_, i) => { const angle = toRad(60 * i - 30); // Start at -30 to have flat top return { x: r * Math.cos(angle), y: yOffset, z: r * Math.sin(angle) }; }); }; const topPoints = getHexPoints(-prismHeight / 2); // Bottom prism edge (before pyramid) const basePoints = getHexPoints(prismHeight / 2); // The absolute bottom center (apex of the 3 rhombi) const bottomCenter = { x: 0, y: prismHeight / 2 + pyramidDepth, z: 0 }; // Project points const pTop = topPoints.map(p => project(p.x, p.y, p.z, camRotX, camRotY)); const pBase = basePoints.map(p => project(p.x, p.y, p.z, camRotX, camRotY)); const pCenter = project(bottomCenter.x, bottomCenter.y, bottomCenter.z, camRotX, camRotY); // Animation Progress vars const showPrism = t > 3; const prismProgress = t > 3 && t < 5 ? easeOutCubic((t - 3) / 2) : (t >= 5 ? 1 : 0); const showBottom = t > 6; const bottomProgress = t > 6 && t < 8 ? easeOutCubic((t - 6) / 2) : (t >= 8 ? 1 : 0); const showAngles = t > 9; const showGrid = t > 14; const gridOpacity = t > 14 && t < 16 ? (t - 14) / 2 : (t >= 16 ? 1 : 0); // --- Drawing Helpers --- // Rhombus Construction: // The bottom is formed by 3 rhombi. // Rhombus 1: Center -> Base[0] -> Base[1] -> Base[2] (Wait, physically it's Center -> V0 -> V1 -> V2 is wrong. // A standard honeycomb bottom connects center to alternating vertices? // Actually, the Maraldi bottom consists of 3 rhombi meeting at the apex. // Let's visualize Rhombus A: Apex, V0, V1, V2? No, that's a quad. // In a rhombic dodecahedron context (honeycomb cap), the rhombi connect the apex to the prism walls. // Correct topology for visual: Apex connects to V0, V2, V4. // Rhombus 1: Apex, V0, V1, V2. // Rhombus 2: Apex, V2, V3, V4. // Rhombus 3: Apex, V4, V5, V0. const rhombi = [ [pCenter, pBase[0], pBase[1], pBase[2]], [pCenter, pBase[2], pBase[3], pBase[4]], [pCenter, pBase[4], pBase[5], pBase[0]] ]; return ( ); }; // Sub-component for sidebar labels const RectLabel = ({ text, active, delay }: { text: string, active: boolean, delay: number }) => ( {text} ); export default HoneycombGeometry;