{label}

)} ); }; // Animation phases const PHASE_1_END = 0.2; // Base approach const PHASE_2_END = 0.7; // Bond breaking/forming const PHASE_3_END = 1.0; // Product stabilization // Molecular geometry calculations // Reactant: anti-periplanar conformation (H-C-C-Br dihedral = 180°) const tetrahedralAngle = 109.5 * (Math.PI / 180); // Carbon positions (initial sp3 tetrahedral) const c1Initial = [-C_C_BOND / 2, 0, 0]; const c2Initial = [C_C_BOND / 2, 0, 0]; // Calculate tetrahedral positions for substituents // For anti-periplanar: H on C1 and Br on C2 are on opposite sides (180°) const h1Cyan = [-C_C_BOND / 2 - C_H_BOND * Math.sin(tetrahedralAngle), C_H_BOND * Math.cos(tetrahedralAngle), 0]; const br1 = [-C_C_BOND / 2, -C_BR_BOND * Math.cos(tetrahedralAngle), C_BR_BOND * Math.sin(tetrahedralAngle)]; const ph1Pos = [-C_C_BOND / 2 - 1.5, 0, 1.5]; // C2 substituents (anti-periplanar Br opposite to H1) const br2Pink = [C_C_BOND / 2 + C_BR_BOND * Math.sin(tetrahedralAngle), -C_BR_BOND * Math.cos(tetrahedralAngle), 0]; const h2 = [C_C_BOND / 2, C_H_BOND * Math.cos(tetrahedralAngle), -C_H_BOND * Math.sin(tetrahedralAngle)]; const ph2Pos = [C_C_BOND / 2 + 1.5, 0, 1.5]; // Base position (approaches from above) const baseInitial = [h1Cyan[0] - 3, h1Cyan[1] + 3, 0]; const baseFinal = [h1Cyan[0] - 1.5, h1Cyan[1] + 1.5, 0]; // Animate base approach const baseProgress = Math.min(progress / PHASE_1_END, 1); const basePos = [ baseInitial[0] + (baseFinal[0] - baseInitial[0]) * baseProgress, baseInitial[1] + (baseFinal[1] - baseInitial[1]) * baseProgress, 0 ]; // Bond stretching during E2 transition const bondStretch = progress > PHASE_1_END ? 1 + (progress - PHASE_1_END) / (PHASE_2_END - PHASE_1_END) * 0.5 : 1; // C-H bond breaking const chBondOpacity = progress < PHASE_1_END ? 1 : Math.max(1 - (progress - PHASE_1_END) / (PHASE_2_END - PHASE_1_END) * 1.5, 0); // C-Br bond breaking const cbrBondOpacity = progress < PHASE_2_END - 0.1 ? 1 : Math.max(1 - (progress - (PHASE_2_END - 0.1)) / 0.3, 0); // Carbon hybridization transition (sp3 → sp2) const hybridProgress = Math.max((progress - PHASE_1_END) / (PHASE_2_END - PHASE_1_END), 0); const sp3Angle = tetrahedralAngle; const sp2Angle = 120 * (Math.PI / 180); const currentAngle = sp3Angle + (sp2Angle - sp3Angle) * Math.min(hybridProgress, 1); // Product geometry (planar, sp2) const planarProgress = Math.max((progress - PHASE_2_END) / (PHASE_3_END - PHASE_2_END), 0); // Final carbon positions (alkene) const c1Final = [-C_C_BOND / 2 * 0.9, 0, 0]; // Slightly shorter C=C bond (~1.34 Å) const c2Final = [C_C_BOND / 2 * 0.9, 0, 0]; const c1Current = [ c1Initial[0] + (c1Final[0] - c1Initial[0]) * planarProgress, 0, 0 ]; const c2Current = [ c2Initial[0] + (c2Final[0] - c2Initial[0]) * planarProgress, 0, 0 ]; // Pi bond formation const piBondOpacity = Math.min(hybridProgress * 1.5, 1); // Departed proton and bromide const protonPos = progress > PHASE_2_END ? [h1Cyan[0] - 2, h1Cyan[1] + 4 + (progress - PHASE_2_END) * 3, 0] : [h1Cyan[0] + (basePos[0] - h1Cyan[0]) * hybridProgress * 0.3, h1Cyan[1] + (basePos[1] - h1Cyan[1]) * hybridProgress * 0.3, 0]; const bromidePos = progress > PHASE_2_END ? [br2Pink[0] + 3 + (progress - PHASE_2_END) * 5, br2Pink[1] - 3, 0] : br2Pink; // Phenyl ring representation (simplified hexagon) const PhenylRing = ({ position, rotation, opacity = 1 }) => { const ringRadius = 0.8; const hexPoints = []; for (let i = 0; i < 6; i++) { const angle = (i * 60) * (Math.PI / 180); hexPoints.push([ringRadius * Math.cos(angle), ringRadius * Math.sin(angle), 0]); } return ( {/* Ring bonds */} {hexPoints.map((pt, i) => ( ))} {/* Carbon atoms on ring */} {hexPoints.map((pt, i) => ( ))} {/* Inner circle for aromaticity */} ); }; // Newman projection (inset) const NewmanProjection = () => { const newmanRadius = 1.2; const frontCircleRadius = 0.8; return ( {/* Label */}

Newman Projection (Anti)

{/* Back circle */} {/* Front circle */} {/* Back substituents (C2) */} {/* Br (pink) - at top */}

{/* Ph (orange) - left back */}

{/* H - right back */}

{/* Front substituents (C1) */} {/* Cyan H - at bottom (180° from Br) */}

{/* Br (front) */} {/* Ph (front) */} {/* Central carbon */} {/* Anti-periplanar indicator */}

H-C-C-Br: 180°

); }; // Reaction arrows const ReactionArrows = () => { if (progress < PHASE_1_END) return null; const arrowProgress = Math.min((progress - PHASE_1_END) / (PHASE_2_END - PHASE_1_END), 1); return ( {/* Arrow 1: Base → H (cyan) */} {/* Arrow 2: C-H → C=C (pink) */} {arrowProgress > 0.3 && ( )} {/* Arrow 3: C-Br cleavage (pink) */} {arrowProgress > 0.5 && ( )} ); }; // Base particle const BaseParticle = () => ( PHASE_2_END ? 0.3 : 0.8} />

Base: B⁻

{/* Proton after abstraction */} {progress > PHASE_2_END && ( )} ); // Main molecule const Molecule = () => ( {/* Carbon atoms */} {/* C-C bond (sigma) */} {/* Pi bond (forming) */} {piBondOpacity > 0 && ( )} {/* Cyan hydrogen (abstracted) */} {/* C1-Br (pink - stays) */} {/* C1-H (other) */} {/* C2-Br (pink - leaving) */} PHASE_2_END ? "Br⁻" : "Br"} opacity={cbrBondOpacity + (progress > PHASE_2_END ? 0.5 : 0)} /> {/* C2-H */} {/* Phenyl rings */} {/* Phenyl labels */}

); // Product label const ProductLabel = () => { if (progress < PHASE_2_END + 0.1) return null; return (

(E)-1-bromo-1,2-diphenylethylene
Trans stereochemistry confirmed

); }; // Title and phase indicator const TitleOverlay = () => (

E2 Elimination Mechanism
meso-1,2-dibromo-1,2-diphenylethane → (E)-1-bromo-1,2-diphenylethylene

); const PhaseIndicator = () => { let phase = "Phase 1: Base Approach"; let phaseColor = BASE_BLUE; if (progress > PHASE_1_END && progress < PHASE_2_END) { phase = "Phase 2: Concerted Transition"; phaseColor = BROMINE_PINK; } else if (progress > PHASE_2_END) { phase = "Phase 3: Product Formation"; phaseColor = "#00ff00"; } return (

{phase}
Progress: {(progress * 100).toFixed(0)}%

); }; // Angle annotations const AngleAnnotations = () => ( {/* 109.5° annotation (reactant) */} {progress < PHASE_2_END && (

sp³: 109.5°

)} {/* 120° annotation (product) */} {progress > PHASE_2_END + 0.1 && (

sp²: 120° (planar)

)} {/* Anti-periplanar indicator */} {progress < PHASE_1_END && (

Anti-periplanar Conformation
H-C-C-Br dihedral: 180°

)} ); // Trans stereochemistry confirmation (product) const TransIndicator = () => { if (progress < PHASE_2_END + 0.15) return null; return ( {/* Line connecting Ph positions */}

Ph rings: trans (E)

); }; return ( {/* Lighting */} {/* Main scene components */} {/* Grid for reference */} {/* Camera controls hint */}

Drag to orbit • Scroll to zoom

);