diff --git a/README.md b/README.md index 96c7e99..148832f 100644 --- a/README.md +++ b/README.md @@ -1 +1,67 @@ -# aether \ No newline at end of file +# ✦ ÆTHER — Experience the Cosmos + +An interactive cosmic experience built with pure code. + +**Zero images. Zero frameworks. Zero dependencies. One file.** + +## 🌌 Live Demo + +[https://mlauenborg.github.io/aether/](https://mlauenborg.github.io/aether/) + +## ✨ Features + +- 🌌 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 + +## 🛠 Tech + +Everything is contained in a single `index.html` file: + +- **Canvas API** — procedural starfield and shooting stars +- **CSS animations** — morphing orb, aurora drift, nebula float, film grain +- **SVG filters** — fractal noise for film grain texture +- **IntersectionObserver** — scroll-triggered reveal animations +- **Google Fonts** — Inter + Playfair Display + +No build step. No dependencies. No bundler. Just open the file. + +## 🚀 Deploy + +This site is designed for **GitHub Pages**: + +1. Go to your repository **Settings → Pages** +2. Set source to **Deploy from a branch** +3. Select the **main** branch and **/ (root)** folder +4. Save — your site will be live at `https://.github.io/aether/` + +Or simply open `index.html` in any browser. + +## 📁 Structure + +``` +aether/ +├── index.html ← The entire experience +└── README.md ← You are here +``` + +## 🎨 Color Palette + +| Color | Hex | Usage | +|---------|-----------|----------------| +| Space | `#030014` | Background | +| Indigo | `#6366f1` | Primary accent | +| Purple | `#8b5cf6` | Gradients | +| Cyan | `#06b6d4` | Highlights | +| Rose | `#f43f5e` | Warm accents | +| Amber | `#f59e0b` | Subtle warmth | + +## 📝 License + +MIT \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..43a0f91 --- /dev/null +++ b/index.html @@ -0,0 +1,861 @@ + + + + + + ÆTHER — Experience the Cosmos + + + + + + + + + + + + + + +
+
+
+ + + + + +
+
+
+
+
+ + +
+ + + + + + + + + + +
+ + +
+ Beyond the Horizon +

ÆTHER

+

Where light bends and time dissolves

+ Explore the Unknown +
+ Scroll +
+
+
+ + +
+
+
+
+
+
+
+
+

Built from pure light

+

Every star, every glow, every grain of noise — generated in real time. No images. No frameworks. No libraries. Just mathematics, canvas, and CSS painting directly onto your screen.

+
+
+ + +
+

Crafted with Intention

+
+
+
+
🌌
+

Procedural Starfield

+

Three depth layers of stars rendered on canvas, each twinkling independently with sine-wave oscillation. Colored giant stars pulse in blue and red hues across the deep field.

+
+
+
+
🌈
+

Living Aurora

+

Multi-color radial gradients drift and breathe across the viewport, simulating atmospheric light phenomena from far-off worlds.

+
+
+
+
✨
+

Fluid Cursor

+

A three-layer custom cursor system — dot, ring, and radial glow — follows your movement with smooth interpolation and reacts to interactive elements.

+
+
+
+
🔮
+

Morphing Geometry

+

An organic orb continuously morphs its shape through keyframe-animated border-radius values, surrounded by concentric ring borders. Mouse proximity triggers 3D perspective tilt for an immersive parallax effect.

+
+
+
+
🎞️
+

Film Grain & Cinematic Feel

+

An animated SVG noise texture overlays the entire viewport, adding a subtle analog film quality that ties all the digital elements together.

+
+
+
+
☄️
+

Shooting Stars

+

Randomly spawning meteors streak across the canvas with glowing gradient trails that fade as they burn through the atmosphere.

+
+
+
+ + +
+
+
+ “The cosmos is within us. We are made of star-stuff. We are a way for the universe to know itself.” +
+ — Carl Sagan +
+ + +
+ +

Zero images. Zero frameworks. Pure code.

+
+ +
+ + + +