An interactive cosmic experience built with pure code.
Zero images. Zero frameworks. Zero dependencies.
https://mlauenborg.github.io/aether/
- 🌌 Procedural 3-layer starfield with parallax scrolling and twinkling
- ☄️ Randomly spawning shooting stars with gradient trails
- 🔮 Drifting nebula clouds and aurora overlay
- 🟣 Morphing orb with concentric rings and mouse-reactive 3D tilt
- ✨ Custom three-layer cursor system (dot, ring, glow)
- 🎞️ Animated SVG film grain for cinematic texture
- 📜 Scroll-triggered reveal animations via IntersectionObserver
- 📱 Fully responsive — optimized star counts and cursor on mobile
- 🎨 Glassmorphism bento grid with animated gradient borders
- 🧭 Auto-hiding glassmorphism navigation bar across all pages
- 🎨 Gallery of 6 live generative art canvas experiments
- 📡 Interactive particle playground
- 📬 Contact form with cosmic particle burst animation
Every page is self-contained — all CSS and JS inline, no shared external files:
- Canvas API — procedural starfield, generative art, signal animations
- CSS animations — morphing orb, aurora drift, nebula float, film grain
- SVG filters — fractal noise for film grain texture
- IntersectionObserver — scroll-triggered reveals and canvas pause/resume
- Web Animations API — particle burst on form submit
- Google Fonts — Inter + Playfair Display
No build step. No dependencies. No bundler. Just open any file.
This site is designed for GitHub Pages:
- Go to your repository Settings → Pages
- Set source to Deploy from a branch
- Select the main branch and / (root) folder
- Save — your site will be live at
https://<username>.github.io/aether/
Or simply open any HTML file in a browser.
aether/
├── index.html ← Home — The cosmic experience
├── about.html ← The Manifesto — Philosophy & story
├── gallery.html ← Cosmic Gallery — Generative art experiments
├── contact.html ← Transmit — Contact form with cosmic theming
└── README.md ← Documentation
| Color | Hex | Usage |
|---|---|---|
| Space | #030014 |
Background |
| Indigo | #6366f1 |
Primary accent |
| Purple | #8b5cf6 |
Gradients |
| Cyan | #06b6d4 |
Highlights |
| Rose | #f43f5e |
Warm accents |
| Amber | #f59e0b |
Subtle warmth |
MIT