```javascript 'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; // --- Constants & Config --- const VIEW_WIDTH = 1200; const VIEW_HEIGHT = 675; // 16:9 Aspect Ratio const TOTAL_DURATION = 35000; // 35 seconds total // Colors const COLORS = { bg: "#0f172a", cellMembrane: "#cbd5e1", // Slate 300 nucleus: "rgba(255, 255, 255, 0.2)", dnaStrand: "#94a3b8", geneRed: "#ef4444", // Hemoglobin geneBlue: "#3b82f6", // Muscle geneGreen: "#22c55e", // Nerve switchOff: "#64748b", textMain: "#f8fafc", textSub: "#94a3b8", }; // --- Helper Functions --- const easeOutBack = (x) => { const c1 = 1.70158; const c3 = c1 + 1; return 1 + c3 * Math.pow(x - 1, 3) + c1 * Math.pow(x - 1, 2); }; const easeInOutCubic = (x) => { return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2; }; // --- Sub-Components --- // 1. DNA Helix Component const DNAHelix = ({ x, y, scale = 1, activeGene, time }) => { // Simple sine wave simulation for DNA const numBasePairs = 12; const height = 120; const width = 40; const strands = useMemo(() => { return Array.from({ length: numBasePairs }).map((_, i) => ({ id: i, y: (i / (numBasePairs - 1)) * height - height / 2, })); }, []); return ( {/* Helix Line */} {strands.map((strand, i) => { const offset = time * 0.003 + i * 0.5; const xPos = Math.sin(offset) * (width / 2); const zIndex = Math.cos(offset); // Fake 3D depth const opacity = zIndex > 0 ? 1 : 0.4; // Determine if this is a gene location let geneColor = COLORS.dnaStrand; let isGene = false; // Map specific indices to genes if (i === 2) { geneColor = COLORS.geneRed; isGene = true; } // Red Gene if (i === 6) { geneColor = COLORS.geneBlue; isGene = true; } // Blue Gene if (i === 9) { geneColor = COLORS.geneGreen; isGene = true; } // Green Gene const isActive = (activeGene === 'red' && i === 2) || (activeGene === 'blue' && i === 6); return ( {/* Gene Dot */} {isGene && ( {isActive && ( )} )} {/* Switch Icon (Floating near gene) */} {isGene && zIndex > 0 && ( {/* Switch Background */} {/* Switch Toggle */} )} ); })} ); }; // 2. Protein Particles System const ProteinParticles = ({ active, color, sourceX, sourceY, targetRadius, time }) => { // Use pseudo-random based on time to show particles flowing const particleCount = 15; if (!active) return null; return ( {Array.from({ length: particleCount }).map((_, i) => { // Create a looping flow effect const speed = 0.002; const offset = i * (1 / particleCount); let progress = (time * speed + offset) % 1; // Ease out motion const dist = progress * targetRadius; const angle = (i * 137.5) * (Math.PI / 180); // Golden angle for distribution const x = sourceX + Math.cos(angle) * dist; const y = sourceY + Math.sin(angle) * dist; const opacity = 1 - progress; // Fade out as they reach membrane return ( ); })} ); }; // 3. Thinking Bubble const ThinkingBubble = ({ x, y, visible }) => { if (!visible) return null; return ( {/* Spacer */} {/* Gear / Idea Icon inside bubble */} ); }; // 4. The Cell Component const Cell = ({ type, // 'stem', 'red', 'muscle' x, y, scale = 1, membraneColor, activeGene, showParticles, time, label }) => { // Morphing Shapes const shapes = { circle: "M 0 -80 C 45 -80 80 -45 80 0 C 80 45 45 80 0 80 C -45 80 -80 45 -80 0 C -80 -45 -45 -80 0 -80", rbc: "M 0 -70 C 50 -70 90 -40 90 0 C 90 40 50 70 0 70 C -50 70 -90 40 -90 0 C -90 -40 -50 -70 0 -70", // Slightly squashed muscle: "M -120 0 Q -60 -40 0 -40 Q 60 -40 120 0 Q 60 40 0 40 Q -60 40 -120 0", // Fusiform }; let currentPath = shapes.circle; if (type === 'red') currentPath = shapes.rbc; if (type === 'muscle') currentPath = shapes.muscle; // Inner glow color based on gene let glowColor = "white"; if (activeGene === 'red') glowColor = COLORS.geneRed; if (activeGene === 'blue') glowColor = COLORS.geneBlue; return ( {/* Label */} {label && ( {label} )} {/* Membrane */} {activeGene && } {/* Cytoplasm Glow */} {activeGene && ( )} {/* Particles */} {/* Nucleus */} {/* DNA */} ); }; // --- Main Animation Component --- export default function CellDifferentiationAnimation() { const [time, setTime] = useState(0); const requestRef = useRef(); const startTimeRef = useRef(); // Animation Loop useEffect(() => { const animate = (timestamp) => { if (!startTimeRef.current) startTimeRef.current = timestamp; const progress = timestamp - startTimeRef.current; if (progress <= TOTAL_DURATION) { setTime(progress); requestRef.current = requestAnimationFrame(animate); } else { // Loop or stop? Let's hold at end setTime(TOTAL_DURATION); } }; requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, []); // --- Phase Logic --- // Phase 1: 0-5s (Intro) // Phase 2: 5-20s (Expression) // Phase 3: 20-30s (Split) // Phase 4: 30-35s (End) const isPhase1 = time < 5000; const isPhase2 = time >= 5000 && time < 20000; const isPhase3 = time >= 20000 && time < 30000; const isPhase4 = time >= 30000; // Sub-timings for Phase 2 const showThinking = time > 6000 && time < 9000; const redGeneActive = (time > 8000 && time < 20000) || (time >= 20000); // Always active for left cell const showRedParticles = time > 9000 && time < 19000; // Transition value for Split Screen (0 to 1) let splitProgress = 0; if (time >= 20000 && time < 22000) { splitProgress = easeInOutCubic((time - 20000) / 2000); } else if (time >= 22000) { splitProgress = 1; } // --- Derived View State --- // Cell 1 Position (Center -> Left) const cell1X = VIEW_WIDTH / 2 - (splitProgress * (VIEW_WIDTH / 4)); const cell1Type = splitProgress > 0.5 ? 'red' : 'stem'; const cell1Color = redGeneActive && time > 15000 ? "#fca5a5" : COLORS.cellMembrane; // Turning red // Cell 2 Position (Center -> Right), Opacity 0 -> 1 const cell2X = VIEW_WIDTH / 2 + (splitProgress * (VIEW_WIDTH / 4)); const cell2Opacity = splitProgress; const cell2Active = isPhase3 || isPhase4; // Blue gene active in new cell const cell2Type = splitProgress > 0.8 ? 'muscle' : 'stem'; return (

); } ```