Cosmos – A Spacetime Odyssey: Interactive HTML, CSS & JavaScript Experience

Cosmos – A Spacetime Odyssey is an immersive, scroll-driven microsite that re-imagines key moments from the award-winning science documentary in real-time, interactive form. As visitors scroll or swipe, they pilot a CSS-and-WebGL-powered “Ship of the Imagination” that glides through galaxies, dives into DNA, and warps across the cosmic calendar. Each chapter combines atmospheric CSS animations, lightweight JavaScript physics, and custom shaders to deliver parallax star-fields, gravitational lensing, and subtle 3-D planet rotation—while keeping bundle size under 150 KB (gzipped) and achieving 60 fps on modern mobile browsers.

Technical highlights

1. Layer-cake architecture – Semantic HTML supplies the narrative text; CSS variables theme star colors and nebula gradients; JavaScript (ES Modules, no framework) orchestrates scroll-timeline animations via the Web Animations API.

2. WebGL star-field – A tiny Three.js scene renders 5 000 instanced particles with additive blending for infinite-depth star flicker, dynamically blurred for users who prefer reduced motion.

3. SVG cosmic calendar – An inline SVG timeline animates the 13.8-billion-year scale with progressive stroke-dasharray reveals and IntersectionObserver triggers.

4. Audio ambience – The Web Audio API streams looping space ambience that gently cross-fades between chapters (muted by default and respecting prefers-reduced-motion).

5. Accessibility – Keyboard arrow navigation mirrors scroll actions; captions and alt text describe every visual; high-contrast theme toggled by a single class.

6. Offline-ready – A service-worker pre-caches the critical path, letting the experience run in airplane mode for classroom demos.

Ideal use-cases

• Portfolio show-piece demonstrating advanced CSS, WebGL, and progressive enhancement

• STEM outreach microsite that teachers can embed or mirror

• Proof-of-concept for scroll-driven documentaries or brand storytelling