Created
August 15, 2025 23:35
-
-
Save b5/3dc0fbaba113aeafbb88bbf3488aef24 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Internet 2 Timeline - DWeb Seminar Visions</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| min-height: 100vh; | |
| padding: 20px; | |
| color: #333; | |
| } | |
| .container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| background: rgba(255, 255, 255, 0.95); | |
| border-radius: 20px; | |
| padding: 30px; | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); | |
| backdrop-filter: blur(10px); | |
| } | |
| .header { | |
| text-align: center; | |
| margin-bottom: 40px; | |
| } | |
| .header h1 { | |
| font-size: 2.5rem; | |
| font-weight: 700; | |
| background: linear-gradient(45deg, #667eea, #764ba2); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| margin-bottom: 10px; | |
| } | |
| .header p { | |
| font-size: 1.1rem; | |
| color: #666; | |
| max-width: 600px; | |
| margin: 0 auto; | |
| } | |
| .timeline-container { | |
| position: relative; | |
| overflow-x: auto; | |
| padding: 40px 0; | |
| } | |
| .timeline { | |
| position: relative; | |
| min-width: 1200px; | |
| height: 400px; | |
| margin: 0 auto; | |
| } | |
| .timeline-axis { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| height: 2px; | |
| background: linear-gradient(90deg, #667eea, #764ba2); | |
| border-radius: 1px; | |
| } | |
| .year-marker { | |
| position: absolute; | |
| bottom: -30px; | |
| font-weight: 600; | |
| font-size: 0.9rem; | |
| color: #555; | |
| transform: translateX(-50%); | |
| } | |
| .event { | |
| position: absolute; | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| transform: translateX(-50%); | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| border: 2px solid white; | |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); | |
| } | |
| .event:hover { | |
| transform: translateX(-50%) scale(1.5); | |
| box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); | |
| z-index: 10; | |
| } | |
| .event-line { | |
| position: absolute; | |
| width: 1px; | |
| background: rgba(102, 126, 234, 0.3); | |
| left: 50%; | |
| transform: translateX(-50%); | |
| transition: all 0.3s ease; | |
| } | |
| .event:hover .event-line { | |
| background: rgba(102, 126, 234, 0.6); | |
| width: 2px; | |
| } | |
| .tooltip { | |
| position: absolute; | |
| background: rgba(0, 0, 0, 0.9); | |
| color: white; | |
| padding: 12px 16px; | |
| border-radius: 8px; | |
| font-size: 0.85rem; | |
| max-width: 300px; | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: all 0.3s ease; | |
| pointer-events: none; | |
| z-index: 1000; | |
| line-height: 1.4; | |
| } | |
| .tooltip.visible { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| .tooltip::after { | |
| content: ''; | |
| position: absolute; | |
| top: 100%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| border: 6px solid transparent; | |
| border-top-color: rgba(0, 0, 0, 0.9); | |
| } | |
| .tooltip-author { | |
| font-weight: 600; | |
| margin-bottom: 4px; | |
| font-size: 0.9rem; | |
| } | |
| .tooltip-date { | |
| font-size: 0.75rem; | |
| opacity: 0.8; | |
| margin-bottom: 6px; | |
| } | |
| .legend { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| gap: 15px; | |
| margin-top: 30px; | |
| padding-top: 20px; | |
| border-top: 1px solid #eee; | |
| } | |
| .legend-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-size: 0.85rem; | |
| color: #666; | |
| } | |
| .legend-color { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| border: 2px solid white; | |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); | |
| } | |
| .stats { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 20px; | |
| margin-top: 30px; | |
| } | |
| .stat-card { | |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); | |
| padding: 20px; | |
| border-radius: 10px; | |
| text-align: center; | |
| } | |
| .stat-number { | |
| font-size: 2rem; | |
| font-weight: 700; | |
| color: #667eea; | |
| margin-bottom: 5px; | |
| } | |
| .stat-label { | |
| font-size: 0.9rem; | |
| color: #666; | |
| } | |
| @media (max-width: 768px) { | |
| .container { | |
| padding: 20px; | |
| } | |
| .header h1 { | |
| font-size: 2rem; | |
| } | |
| .timeline { | |
| min-width: 800px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="header"> | |
| <h1>Internet 2 Timeline</h1> | |
| <p>Collective visions from the DWeb Seminar 2025 - A roadmap to a decentralized future</p> | |
| </div> | |
| <div class="timeline-container"> | |
| <div class="timeline" id="timeline"> | |
| <div class="timeline-axis"></div> | |
| </div> | |
| </div> | |
| <div class="legend" id="legend"></div> | |
| <div class="stats"> | |
| <div class="stat-card"> | |
| <div class="stat-number" id="totalEvents">0</div> | |
| <div class="stat-label">Total Predictions</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-number" id="totalAuthors">0</div> | |
| <div class="stat-label">Contributors</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-number" id="timeSpan">0</div> | |
| <div class="stat-label">Year Span</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-number" id="nearTermEvents">0</div> | |
| <div class="stat-label">Next 5 Years</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="tooltip" id="tooltip"> | |
| <div class="tooltip-author"></div> | |
| <div class="tooltip-date"></div> | |
| <div class="tooltip-description"></div> | |
| </div> | |
| <script> | |
| const timelineData = [ | |
| { year: 2025, month: "January", author: "Eric", description: "Decentralization Nodulation Coherence Apocalypse - Surface area for social coherence between Dweb projects crosses aggregation threshold" }, | |
| { year: 2025, month: "September", author: "b5", description: "25 Protocol developers are using simulation testing to iterate on protocols 50% faster" }, | |
| { year: 2025, month: "", author: "Rae", description: "Internet 2 Consortium is formed" }, | |
| { year: 2026, month: "March", author: "b5", description: "The number of active p2p protocol developers has reached least 250" }, | |
| { year: 2026, month: "June", author: "b5", description: "At least 4 internet 2 JAM stacks are growing their adoption at least 20% quarter-over-quarter" }, | |
| { year: 2026, month: "August", author: "Eric", description: "Local-first Normalization Apocalypse - Threshold event where local-first ad-hoc network self-assembly reveals deep power of horizontal scaling" }, | |
| { year: 2026, month: "September", author: "b5", description: "At least one internet 2 JAM stack has 5 active adopters and meets technical criteria (10k TPS locally on smartphone)" }, | |
| { year: 2026, month: "September", author: "b5", description: "iroh is publicly adopted by a fortune 100 company" }, | |
| { year: 2026, month: "September", author: "b5", description: "250M devices are running at least one app running a p2p protocol" }, | |
| { year: 2026, month: "September", author: "Eric", description: "Commons Enabling Infrastructure Emergence Apocalypse - Composability event where social & physical infrastructure meets information infrastructure" }, | |
| { year: 2026, month: "December", author: "b5", description: "iroh connections can saturate a 5Gbps link" }, | |
| { year: 2026, month: "", author: "Dave", description: "DWeb community converges on shared terminology (1 year prediction)" }, | |
| { year: 2026, month: "", author: "Rae", description: "Major news article that references Internet 2" }, | |
| { year: 2027, month: "January", author: "Eric", description: "Post-monetary Apocalypse - Information fabric combined with value accounting crosses threshold of adoptability" }, | |
| { year: 2027, month: "June", author: "b5", description: "A network of at least 10M devices is updated via a hot-patch release" }, | |
| { year: 2027, month: "August", author: "Eric", description: "Commons at scale Apocalypse - Self-assembly threshold event reveals operating commons" }, | |
| { year: 2027, month: "", author: "Dave", description: "Better distributed debugging tools and mature p2p libraries/frameworks (2 years prediction)" }, | |
| { year: 2027, month: "", author: "Rae", description: "Internet 2 infrastructure is deployed and used by at least 100 organizations in production" }, | |
| { year: 2028, month: "", author: "Dmitri", description: "Userland key management and permissioned encrypted local-first storage usable (within ~3 years prediction)" }, | |
| { year: 2028, month: "", author: "Dave", description: "OCapN standardization and mainstreaming of capability security model (3 years prediction)" }, | |
| { year: 2028, month: "", author: "cft", description: "P2P bible textbook is published (2 years prediction)" }, | |
| { year: 2028, month: "", author: "Matthew", description: "Desktop app shell and acceptable UX for decentralized apps (next 3 years prediction)" }, | |
| { year: 2028, month: "", author: "cft", description: "5 major US universities have CRDTs in their CS undergrad studies (3 years prediction)" }, | |
| { year: 2029, month: "January", author: "b5", description: "30% of internet traffic worldwide is running over p2p channels" }, | |
| { year: 2029, month: "", author: "Dave", description: "Local naming systems gain support as DNS alternative and TLS without CAs becomes possible (4 years prediction)" }, | |
| { year: 2029, month: "", author: "Duke", description: "Hack of several high profile Agentic AI companies allows foreign nation-state attack disrupting supply chain" }, | |
| { year: 2030, month: "January", author: "b5", description: "dial-by-public-key / iroh is formalized as an IETF spec" }, | |
| { year: 2030, month: "", author: "Dave", description: "non-WebRTC peer-to-peer communication on the web reaches all major browsers (5 years prediction)" }, | |
| { year: 2030, month: "", author: "cft", description: "P2P stack saves 100000 lives (5 years prediction)" }, | |
| { year: 2030, month: "", author: "Duke", description: "Mutual Credit established in p2p enclaves throughout the world with vibe-conscious clearing house" }, | |
| { year: 2031, month: "", author: "Duke", description: "Generative AI realistic enough that we can't tell difference from full video; causes mass flocking to user-owned-key-based attestation systems" }, | |
| { year: 2033, month: "", author: "Duke", description: "Social Networks pareto-optimal tipping point measured - enough people use user-owned tech to break platform monopolies" }, | |
| { year: 2035, month: "", author: "Dave", description: "IPv6 adoption (10 years prediction)" }, | |
| { year: 2035, month: "", author: "cft", description: "All major universities on each continent have CRDTs in undergrad studies (10 years prediction)" }, | |
| { year: 2035, month: "", author: "cft", description: "Global/local non-IP connectivity fabric starts to be usable (10 years prediction)" }, | |
| { year: 2036, month: "", author: "Duke", description: "Mesh deployed worldwide with ubiquitous rainbow-radio networking and encrypted base stations" }, | |
| { year: 2038, month: "", author: "Santi", description: "Decentralized techniques maturation cycle completes (20 year cycle 7 years in)" }, | |
| { year: 2040, month: "", author: "cft", description: "P2P stack runs in your brain implant (15 years prediction)" } | |
| ]; | |
| // Author colors | |
| const authorColors = { | |
| 'Eric': '#FF6B6B', | |
| 'b5': '#4ECDC4', | |
| 'Rae': '#45B7D1', | |
| 'Dave': '#96CEB4', | |
| 'Dmitri': '#FFEAA7', | |
| 'cft': '#DDA0DD', | |
| 'Matthew': '#98D8C8', | |
| 'Duke': '#F7DC6F', | |
| 'Santi': '#BB8FCE' | |
| }; | |
| const timeline = document.getElementById('timeline'); | |
| const tooltip = document.getElementById('tooltip'); | |
| const legend = document.getElementById('legend'); | |
| const minYear = Math.min(...timelineData.map(d => d.year)); | |
| const maxYear = Math.max(...timelineData.map(d => d.year)); | |
| const yearSpan = maxYear - minYear; | |
| // Add year markers | |
| for (let year = minYear; year <= maxYear; year += 2) { | |
| const marker = document.createElement('div'); | |
| marker.className = 'year-marker'; | |
| marker.textContent = year; | |
| const position = ((year - minYear) / yearSpan) * 100; | |
| marker.style.left = `${position}%`; | |
| timeline.appendChild(marker); | |
| } | |
| // Create events | |
| timelineData.forEach((event, index) => { | |
| const eventEl = document.createElement('div'); | |
| eventEl.className = 'event'; | |
| const position = ((event.year - minYear) / yearSpan) * 100; | |
| const heightPosition = 30 + (index % 8) * 40; // Stagger heights to avoid overlap | |
| eventEl.style.left = `${position}%`; | |
| eventEl.style.bottom = `${heightPosition}px`; | |
| eventEl.style.backgroundColor = authorColors[event.author]; | |
| // Create connecting line | |
| const line = document.createElement('div'); | |
| line.className = 'event-line'; | |
| line.style.height = `${heightPosition}px`; | |
| line.style.bottom = '0px'; | |
| eventEl.appendChild(line); | |
| // Add hover events | |
| eventEl.addEventListener('mouseenter', (e) => { | |
| const rect = eventEl.getBoundingClientRect(); | |
| const containerRect = timeline.getBoundingClientRect(); | |
| tooltip.querySelector('.tooltip-author').textContent = event.author; | |
| tooltip.querySelector('.tooltip-date').textContent = event.month ? | |
| `${event.month} ${event.year}` : event.year; | |
| tooltip.querySelector('.tooltip-description').textContent = event.description; | |
| tooltip.style.left = `${rect.left - containerRect.left}px`; | |
| tooltip.style.bottom = `${window.innerHeight - rect.top + 20}px`; | |
| tooltip.classList.add('visible'); | |
| }); | |
| eventEl.addEventListener('mouseleave', () => { | |
| tooltip.classList.remove('visible'); | |
| }); | |
| timeline.appendChild(eventEl); | |
| }); | |
| // Create legend | |
| Object.entries(authorColors).forEach(([author, color]) => { | |
| const legendItem = document.createElement('div'); | |
| legendItem.className = 'legend-item'; | |
| const colorDot = document.createElement('div'); | |
| colorDot.className = 'legend-color'; | |
| colorDot.style.backgroundColor = color; | |
| const label = document.createElement('span'); | |
| label.textContent = author; | |
| legendItem.appendChild(colorDot); | |
| legendItem.appendChild(label); | |
| legend.appendChild(legendItem); | |
| }); | |
| // Update stats | |
| const uniqueAuthors = new Set(timelineData.map(d => d.author)).size; | |
| const nearTermEvents = timelineData.filter(d => d.year <= 2030).length; | |
| document.getElementById('totalEvents').textContent = timelineData.length; | |
| document.getElementById('totalAuthors').textContent = uniqueAuthors; | |
| document.getElementById('timeSpan').textContent = `${yearSpan} years`; | |
| document.getElementById('nearTermEvents').textContent = nearTermEvents; | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Internet 2 Timeline - Detailed Predictions</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; | |
| background: linear-gradient(180deg, #667eea 0%, #764ba2 50%, #667eea 100%); | |
| background-attachment: fixed; | |
| min-height: 100vh; | |
| line-height: 1.6; | |
| color: #333; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 40px 20px; | |
| } | |
| .header { | |
| text-align: center; | |
| margin-bottom: 60px; | |
| background: rgba(255, 255, 255, 0.95); | |
| padding: 40px; | |
| border-radius: 20px; | |
| backdrop-filter: blur(10px); | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); | |
| } | |
| .header h1 { | |
| font-size: 2.5rem; | |
| font-weight: 700; | |
| background: linear-gradient(45deg, #667eea, #764ba2); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| margin-bottom: 15px; | |
| } | |
| .header p { | |
| font-size: 1.1rem; | |
| color: #666; | |
| max-width: 600px; | |
| margin: 0 auto; | |
| } | |
| .timeline-wrapper { | |
| position: relative; | |
| } | |
| .timeline-line { | |
| position: absolute; | |
| left: 60px; | |
| top: 0; | |
| bottom: 0; | |
| width: 4px; | |
| background: linear-gradient(180deg, #667eea 0%, #764ba2 50%, #667eea 100%); | |
| border-radius: 2px; | |
| z-index: 1; | |
| } | |
| .timeline-item { | |
| position: relative; | |
| margin-bottom: 40px; | |
| padding-left: 140px; | |
| animation: fadeInUp 0.6s ease-out; | |
| animation-fill-mode: both; | |
| } | |
| .timeline-item:nth-child(odd) { | |
| animation-delay: 0.1s; | |
| } | |
| .timeline-item:nth-child(even) { | |
| animation-delay: 0.2s; | |
| } | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .timeline-marker { | |
| position: absolute; | |
| left: 45px; | |
| top: 15px; | |
| width: 34px; | |
| height: 34px; | |
| border-radius: 50%; | |
| border: 4px solid white; | |
| z-index: 2; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: 700; | |
| font-size: 0.7rem; | |
| color: white; | |
| text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); | |
| } | |
| .timeline-content { | |
| background: rgba(255, 255, 255, 0.95); | |
| border-radius: 15px; | |
| padding: 25px; | |
| box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); | |
| backdrop-filter: blur(10px); | |
| border-left: 5px solid; | |
| transition: all 0.3s ease; | |
| } | |
| .timeline-content:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15); | |
| } | |
| .timeline-header { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| gap: 15px; | |
| margin-bottom: 15px; | |
| padding-bottom: 10px; | |
| border-bottom: 1px solid #eee; | |
| } | |
| .timeline-date { | |
| font-size: 1.2rem; | |
| font-weight: 700; | |
| color: #333; | |
| } | |
| .timeline-author { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 4px 12px; | |
| border-radius: 20px; | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| color: white; | |
| text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); | |
| } | |
| .timeline-author::before { | |
| content: ''; | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: rgba(255, 255, 255, 0.8); | |
| } | |
| .timeline-description { | |
| font-size: 1rem; | |
| color: #555; | |
| line-height: 1.7; | |
| } | |
| .year-divider { | |
| display: flex; | |
| align-items: center; | |
| margin: 60px 0 40px 0; | |
| padding-left: 140px; | |
| } | |
| .year-divider-line { | |
| flex: 1; | |
| height: 2px; | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent); | |
| margin-left: 20px; | |
| } | |
| .year-divider-text { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| color: white; | |
| text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); | |
| background: rgba(255, 255, 255, 0.1); | |
| padding: 8px 20px; | |
| border-radius: 25px; | |
| backdrop-filter: blur(5px); | |
| } | |
| .stats-footer { | |
| margin-top: 80px; | |
| background: rgba(255, 255, 255, 0.95); | |
| border-radius: 20px; | |
| padding: 30px; | |
| backdrop-filter: blur(10px); | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); | |
| text-align: center; | |
| } | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); | |
| gap: 20px; | |
| margin-top: 20px; | |
| } | |
| .stat-item { | |
| padding: 15px; | |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); | |
| border-radius: 10px; | |
| } | |
| .stat-number { | |
| font-size: 1.8rem; | |
| font-weight: 700; | |
| color: #667eea; | |
| margin-bottom: 5px; | |
| } | |
| .stat-label { | |
| font-size: 0.9rem; | |
| color: #666; | |
| } | |
| /* Author color scheme */ | |
| .author-eric { background-color: #FF6B6B; border-left-color: #FF6B6B; } | |
| .author-b5 { background-color: #4ECDC4; border-left-color: #4ECDC4; } | |
| .author-rae { background-color: #45B7D1; border-left-color: #45B7D1; } | |
| .author-dave { background-color: #96CEB4; border-left-color: #96CEB4; } | |
| .author-dmitri { background-color: #FFEAA7; border-left-color: #FFEAA7; color: #333; } | |
| .author-cft { background-color: #DDA0DD; border-left-color: #DDA0DD; } | |
| .author-matthew { background-color: #98D8C8; border-left-color: #98D8C8; } | |
| .author-duke { background-color: #F7DC6F; border-left-color: #F7DC6F; color: #333; } | |
| .author-santi { background-color: #BB8FCE; border-left-color: #BB8FCE; } | |
| @media (max-width: 768px) { | |
| .container { | |
| padding: 20px 10px; | |
| } | |
| .timeline-line { | |
| left: 30px; | |
| } | |
| .timeline-marker { | |
| left: 15px; | |
| width: 30px; | |
| height: 30px; | |
| } | |
| .timeline-item { | |
| padding-left: 80px; | |
| } | |
| .year-divider { | |
| padding-left: 80px; | |
| } | |
| .header h1 { | |
| font-size: 2rem; | |
| } | |
| .timeline-content { | |
| padding: 20px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="header"> | |
| <h1>Internet 2 Detailed Timeline</h1> | |
| <p>Complete predictions from the DWeb Seminar 2025 participants - A comprehensive view of our decentralized future</p> | |
| </div> | |
| <div class="timeline-wrapper"> | |
| <div class="timeline-line"></div> | |
| <div id="timeline-content"></div> | |
| </div> | |
| <div class="stats-footer"> | |
| <h3>Timeline Statistics</h3> | |
| <div class="stats-grid"> | |
| <div class="stat-item"> | |
| <div class="stat-number" id="totalPredictions">0</div> | |
| <div class="stat-label">Total Predictions</div> | |
| </div> | |
| <div class="stat-item"> | |
| <div class="stat-number" id="totalContributors">0</div> | |
| <div class="stat-label">Contributors</div> | |
| </div> | |
| <div class="stat-item"> | |
| <div class="stat-number" id="timelineSpan">0</div> | |
| <div class="stat-label">Years Covered</div> | |
| </div> | |
| <div class="stat-item"> | |
| <div class="stat-number" id="nearTermCount">0</div> | |
| <div class="stat-label">Next 5 Years</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| const timelineData = [ | |
| { year: 2025, month: "January", author: "Eric", description: "Decentralization Nodulation Coherence Apocalypse - Surface area for social coherence between Dweb projects crosses aggregation threshold" }, | |
| { year: 2025, month: "September", author: "b5", description: "25 Protocol developers are using simulation testing to iterate on protocols 50% faster" }, | |
| { year: 2025, month: "", author: "Rae", description: "Internet 2 Consortium is formed" }, | |
| { year: 2026, month: "March", author: "b5", description: "The number of active p2p protocol developers has reached least 250" }, | |
| { year: 2026, month: "June", author: "b5", description: "At least 4 internet 2 JAM stacks are growing their adoption at least 20% quarter-over-quarter" }, | |
| { year: 2026, month: "August", author: "Eric", description: "Local-first Normalization Apocalypse - Threshold event where local-first ad-hoc network self-assembly reveals deep power of horizontal scaling" }, | |
| { year: 2026, month: "September", author: "b5", description: "At least one internet 2 JAM stack has 5 active adopters and meets technical criteria (10k TPS locally on smartphone)" }, | |
| { year: 2026, month: "September", author: "b5", description: "iroh is publicly adopted by a fortune 100 company" }, | |
| { year: 2026, month: "September", author: "b5", description: "250M devices are running at least one app running a p2p protocol" }, | |
| { year: 2026, month: "September", author: "Eric", description: "Commons Enabling Infrastructure Emergence Apocalypse - Composability event where social & physical infrastructure meets information infrastructure" }, | |
| { year: 2026, month: "December", author: "b5", description: "iroh connections can saturate a 5Gbps link" }, | |
| { year: 2026, month: "", author: "Dave", description: "DWeb community converges on shared terminology (1 year prediction)" }, | |
| { year: 2026, month: "", author: "Rae", description: "Major news article that references Internet 2" }, | |
| { year: 2027, month: "January", author: "Eric", description: "Post-monetary Apocalypse - Information fabric combined with value accounting crosses threshold of adoptability" }, | |
| { year: 2027, month: "June", author: "b5", description: "A network of at least 10M devices is updated via a hot-patch release" }, | |
| { year: 2027, month: "August", author: "Eric", description: "Commons at scale Apocalypse - Self-assembly threshold event reveals operating commons" }, | |
| { year: 2027, month: "", author: "Dave", description: "Better distributed debugging tools and mature p2p libraries/frameworks (2 years prediction)" }, | |
| { year: 2027, month: "", author: "Rae", description: "Internet 2 infrastructure is deployed and used by at least 100 organizations in production" }, | |
| { year: 2028, month: "", author: "Dmitri", description: "Userland key management and permissioned encrypted local-first storage usable (within ~3 years prediction)" }, | |
| { year: 2028, month: "", author: "Dave", description: "OCapN standardization and mainstreaming of capability security model (3 years prediction)" }, | |
| { year: 2028, month: "", author: "cft", description: "P2P bible textbook is published (2 years prediction)" }, | |
| { year: 2028, month: "", author: "Matthew", description: "Desktop app shell and acceptable UX for decentralized apps (next 3 years prediction)" }, | |
| { year: 2028, month: "", author: "cft", description: "5 major US universities have CRDTs in their CS undergrad studies (3 years prediction)" }, | |
| { year: 2029, month: "January", author: "b5", description: "30% of internet traffic worldwide is running over p2p channels" }, | |
| { year: 2029, month: "", author: "Dave", description: "Local naming systems gain support as DNS alternative and TLS without CAs becomes possible (4 years prediction)" }, | |
| { year: 2029, month: "", author: "Duke", description: "Hack of several high profile Agentic AI companies allows foreign nation-state attack disrupting supply chain" }, | |
| { year: 2030, month: "January", author: "b5", description: "dial-by-public-key / iroh is formalized as an IETF spec" }, | |
| { year: 2030, month: "", author: "Dave", description: "non-WebRTC peer-to-peer communication on the web reaches all major browsers (5 years prediction)" }, | |
| { year: 2030, month: "", author: "cft", description: "P2P stack saves 100000 lives (5 years prediction)" }, | |
| { year: 2030, month: "", author: "Duke", description: "Mutual Credit established in p2p enclaves throughout the world with vibe-conscious clearing house" }, | |
| { year: 2031, month: "", author: "Duke", description: "Generative AI realistic enough that we can't tell difference from full video; causes mass flocking to user-owned-key-based attestation systems" }, | |
| { year: 2033, month: "", author: "Duke", description: "Social Networks pareto-optimal tipping point measured - enough people use user-owned tech to break platform monopolies" }, | |
| { year: 2035, month: "", author: "Dave", description: "IPv6 adoption (10 years prediction)" }, | |
| { year: 2035, month: "", author: "cft", description: "All major universities on each continent have CRDTs in undergrad studies (10 years prediction)" }, | |
| { year: 2035, month: "", author: "cft", description: "Global/local non-IP connectivity fabric starts to be usable (10 years prediction)" }, | |
| { year: 2036, month: "", author: "Duke", description: "Mesh deployed worldwide with ubiquitous rainbow-radio networking and encrypted base stations" }, | |
| { year: 2038, month: "", author: "Santi", description: "Decentralized techniques maturation cycle completes (20 year cycle 7 years in)" }, | |
| { year: 2040, month: "", author: "cft", description: "P2P stack runs in your brain implant (15 years prediction)" } | |
| ]; | |
| // Sort data by year and month | |
| timelineData.sort((a, b) => { | |
| if (a.year !== b.year) return a.year - b.year; | |
| if (a.month && b.month) { | |
| const months = ['January', 'February', 'March', 'April', 'May', 'June', | |
| 'July', 'August', 'September', 'October', 'November', 'December']; | |
| return months.indexOf(a.month) - months.indexOf(b.month); | |
| } | |
| return a.month ? -1 : 1; // Items with months come first | |
| }); | |
| function generateTimeline() { | |
| const container = document.getElementById('timeline-content'); | |
| let currentYear = null; | |
| timelineData.forEach((item, index) => { | |
| // Add year divider if this is a new year | |
| if (item.year !== currentYear) { | |
| if (currentYear !== null) { | |
| const divider = document.createElement('div'); | |
| divider.className = 'year-divider'; | |
| divider.innerHTML = ` | |
| <div class="year-divider-text">${item.year}</div> | |
| <div class="year-divider-line"></div> | |
| `; | |
| container.appendChild(divider); | |
| } | |
| currentYear = item.year; | |
| } | |
| // Create timeline item | |
| const timelineItem = document.createElement('div'); | |
| timelineItem.className = 'timeline-item'; | |
| const authorClass = `author-${item.author.toLowerCase()}`; | |
| const displayDate = item.month ? `${item.month} ${item.year}` : item.year; | |
| timelineItem.innerHTML = ` | |
| <div class="timeline-marker ${authorClass}"> | |
| ${item.author.charAt(0)} | |
| </div> | |
| <div class="timeline-content ${authorClass}"> | |
| <div class="timeline-header"> | |
| <div class="timeline-date">${displayDate}</div> | |
| <div class="timeline-author ${authorClass}"> | |
| ${item.author} | |
| </div> | |
| </div> | |
| <div class="timeline-description"> | |
| ${item.description} | |
| </div> | |
| </div> | |
| `; | |
| container.appendChild(timelineItem); | |
| }); | |
| } | |
| function updateStats() { | |
| const uniqueAuthors = new Set(timelineData.map(d => d.author)).size; | |
| const minYear = Math.min(...timelineData.map(d => d.year)); | |
| const maxYear = Math.max(...timelineData.map(d => d.year)); | |
| const nearTermEvents = timelineData.filter(d => d.year <= 2030).length; | |
| document.getElementById('totalPredictions').textContent = timelineData.length; | |
| document.getElementById('totalContributors').textContent = uniqueAuthors; | |
| document.getElementById('timelineSpan').textContent = `${maxYear - minYear + 1}`; | |
| document.getElementById('nearTermCount').textContent = nearTermEvents; | |
| } | |
| // Initialize the timeline | |
| generateTimeline(); | |
| updateStats(); | |
| // Add scroll animation | |
| const observerOptions = { | |
| threshold: 0.1, | |
| rootMargin: '0px 0px -50px 0px' | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.style.animationPlayState = 'running'; | |
| } | |
| }); | |
| }, observerOptions); | |
| // Observe all timeline items | |
| document.querySelectorAll('.timeline-item').forEach(item => { | |
| observer.observe(item); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment