🌌 From the Big Bang to Today

A perspective on time: the entire history of the universe compressed into one scrollable view.

Epoch 1: Cosmic & Geologic (13.8 Billion YA → 250 Million YA)

Epoch 2: Ancient History (250 Million YA → 1500 AD)

Epoch 3: Modern Era (1500 AD → 2020 AD)

h2 { border-left: 6px solid #3b82f6; padding-left: 10px; margin-bottom: 20px; color: #1d4ed8; } .timeline-segment { position: relative; width: 94%; margin: 50px auto 100px; min-height: 300px; border-radius: 12px; background: white; border: 1px solid #d1d5db; box-shadow: 0 4px 10px rgba(0,0,0,0.05); padding: 20px; overflow: visible; } .timeline-line { height: 6px; border-radius: 3px; position: absolute; top: 100px; width: 100%; } .cosmic .timeline-line { background: linear-gradient(to right, #1e3a8a, #16a34a); } .ancient .timeline-line { background: linear-gradient(to right, #facc15, #e67e22); } .modern .timeline-line { background: linear-gradient(to right, #3b82f6, #06b6d4); } .event { position: absolute; width: 14px; height: 14px; border-radius: 50%; cursor: pointer; top: 97px; transform: translateX(-50%); transition: transform 0.2s ease; } .event:hover { transform: translateX(-50%) scale(1.3); z-index: 100; } .cosmic .event { background: #7e22ce; border: 2px solid #581c87; } .ancient .event { background: #f59e0b; border: 2px solid #b45309; } .modern .event { background: #3b82f6; border: 2px solid #1e40af; } .event-label { position: absolute; width: 200px; padding: 6px 10px; border-radius: 6px; font-size: 13px; font-weight: 500; background: #f9fafb; color: #1e293b; text-align: center; line-height: 1.3; border: 1px solid #cbd5e1; box-shadow: 0 2px 4px rgba(0,0,0,0.08); transition: all 0.3s ease; opacity: 0.95; } .label-top { bottom: 40px; border-bottom: 3px solid #3b82f6; } .label-bottom { top: 110px; border-top: 3px solid #f97316; } @media (max-width: 768px) { .event-label { width: 140px; font-size: 12px; } } document.addEventListener("DOMContentLoaded", () => { const eventsData = [ { name: "Big Bang", year: -13800000000, epoch: 'cosmic' }, { name: "Earth Forms", year: -4540000000, epoch: 'cosmic' }, { name: "Pangaea Supercontinent", year: -335000000, epoch: 'cosmic' }, { name: "First Dinosaurs", year: -252000000, epoch: 'cosmic' }, { name: "Dinosaurs Go Extinct", year: -66000000, epoch: 'ancient' }, { name: "Indus Valley Civilisation", year: -3300, epoch: 'ancient' }, { name: "Written Language", year: -3100, epoch: 'ancient' }, { name: "Sanskrit Spoken", year: -1500, epoch: 'ancient' }, { name: "Alexander the Great", year: -356, epoch: 'ancient' }, { name: "Jesus of Nazareth", year: 1, epoch: 'ancient' }, { name: "Fall of Rome", year: 476, epoch: 'ancient' }, { name: "Islam", year: 632, epoch: 'ancient' }, { name: "Fall of Constantinople", year: 1453, epoch: 'ancient' }, { name: "Mona Lisa Painted", year: 1503, epoch: 'modern' }, { name: "Mughals in India", year: 1526, epoch: 'modern' }, { name: "Galileo Born", year: 1564, epoch: 'modern' }, { name: "Chatrapati Shivaji Maharaj Born", year: 1630, epoch: 'modern' }, { name: "Taj Mahal Completed", year: 1653, epoch: 'modern' }, { name: "Newton Born", year: 1643, epoch: 'modern' }, { name: "United States Founded", year: 1776, epoch: 'modern' }, { name: "Napoleon Born", year: 1769, epoch: 'modern' }, { name: "Einstein Born", year: 1879, epoch: 'modern' }, { name: "World War I", year: 1914, epoch: 'modern' }, { name: "World War II", year: 1939, epoch: 'modern' }, { name: "India Independence", year: 1947, epoch: 'modern' }, { name: "Internet (WWW)", year: 1990, epoch: 'modern' }, { name: "Coronavirus Pandemic", year: 2020, epoch: 'modern' }, ]; const epochSpans = { 'cosmic': { start: -13800000000, end: -250000000, positions: [] }, 'ancient': { start: -250000000, end: 1500, positions: [] }, 'modern': { start: 1500, end: 2020, positions: [] } }; const LABEL_HEIGHT = 50, LABEL_WIDTH = 200, BASE_Y_OFFSET = 40; function getStaggeredPosition(event, posPercent, container, isTop) { const span = epochSpans[event.epoch]; const containerWidth = container.clientWidth; const x = (posPercent / 100) * containerWidth; const finalX = x - (LABEL_WIDTH / 2); let overlap = true, level = 0; while (overlap) { overlap = false; for (const prev of span.positions) { const overlapX = finalX < prev.xEnd && prev.xStart < finalX + LABEL_WIDTH; const overlapY = level === prev.level && isTop === prev.isTop; if (overlapX && overlapY) { level++; overlap = true; break; } } } span.positions.push({ xStart: finalX, xEnd: finalX + LABEL_WIDTH, level, isTop }); return { level }; } function formatYear(year) { if (year <= -1000000000) return `${(Math.abs(year)/1e9).toFixed(1)} BYA`; if (year <= -1000000) return `${(Math.abs(year)/1e6).toFixed(1)} MYA`; if (year < 0) return `${Math.abs(year)} BC`; return year.toLocaleString(); } function plotEvent(event, i) { const container = document.getElementById(`${event.epoch}-timeline`); const span = epochSpans[event.epoch]; let rel, total; if (event.epoch === 'cosmic' || event.epoch === 'ancient') { rel = Math.abs(span.start) - Math.abs(event.year); total = Math.abs(span.start) - Math.abs(span.end); } else { rel = event.year - span.start; total = span.end - span.start; } const posPercent = (rel / total) * 100; const ev = document.createElement('div'); ev.className = 'event'; ev.style.left = `${posPercent}%`; const lbl = document.createElement('div'); lbl.className = 'event-label'; lbl.textContent = `${event.name} (${formatYear(event.year)})`; const isTop = i % 2 === 0; const { level } = getStaggeredPosition(event, posPercent, container, isTop); if (isTop) { lbl.classList.add('label-top'); lbl.style.bottom = `${BASE_Y_OFFSET + level * LABEL_HEIGHT}px`; } else { lbl.classList.add('label-bottom'); lbl.style.top = `${BASE_Y_OFFSET + level * LABEL_HEIGHT + 70}px`; } ev.appendChild(lbl); container.appendChild(ev); requestAnimationFrame(() => { const rect = lbl.getBoundingClientRect(); const containerRect = container.getBoundingClientRect(); if (rect.right > containerRect.right - 10) { const overflow = rect.right - containerRect.right + 10; lbl.style.transform = `translateX(-${overflow}px)`; } if (rect.left < containerRect.left + 10) { const overflow = containerRect.left - rect.left + 10; lbl.style.transform = `translateX(${overflow}px)`; } }); } eventsData.forEach(plotEvent); });