From 7bef33f90c3f01e7f9d51ccda38cc5ac43293486 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 6 Apr 2026 05:36:59 +0000 Subject: [PATCH 1/2] =?UTF-8?q?Add=20complete=20=C3=86THER=20interactive?= =?UTF-8?q?=20cosmic=20experience=20and=20update=20README?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Agent-Logs-Url: https://github.com/mlauenborg/aether/sessions/b983e0ca-826e-4dc2-b934-a507e5f45c08 Co-authored-by: mlauenborg <255930324+mlauenborg@users.noreply.github.com> --- README.md | 68 ++++- index.html | 861 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 928 insertions(+), 1 deletion(-) create mode 100644 index.html 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..654497e --- /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.

+
+ +
+ + + + From c7138bd20aad9db85cccb9362ceedb0207c99386 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 6 Apr 2026 05:37:38 +0000 Subject: [PATCH 2/2] Replace user-agent sniffing with matchMedia feature detection Agent-Logs-Url: https://github.com/mlauenborg/aether/sessions/b983e0ca-826e-4dc2-b934-a507e5f45c08 Co-authored-by: mlauenborg <255930324+mlauenborg@users.noreply.github.com> --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 654497e..43a0f91 100644 --- a/index.html +++ b/index.html @@ -650,7 +650,7 @@

Shooting Stars

(function () { const canvas = document.getElementById('starfield'); const ctx = canvas.getContext('2d'); - const isMobile = /iPhone|iPad|Android/i.test(navigator.userAgent); + const isMobile = window.matchMedia('(pointer: coarse)').matches; let W, H; function resize() { @@ -779,7 +779,7 @@

Shooting Stars

CUSTOM CURSOR ───────────────────────────────────────────────────── */ (function () { - if (/iPhone|iPad|Android/i.test(navigator.userAgent)) return; + if (window.matchMedia('(pointer: coarse)').matches) return; const dot = document.getElementById('cursorDot'); const ring = document.getElementById('cursorRing');