Astral Decay
When I first opened this repo I expected a simple landing page, but Astral Decay turned out to be a lovingly crafted teaser for an indie immersive-sim. The page is all static assets—just HTML, CSS, and a single script tag—but that script spins up a full Three.js scene that feels like the intro to a PlayStation-era space epic. Here’s what stood out while I poked around the code.
Retro-futurist visuals powered by Three.js
The main entry point is index.html, which loads Three.js and the GLTFLoader straight from a CDN. From there, the site builds a self-contained WebGL scene inside a fixed <div id="scene-container">. The ship model (ship.glb) is scaled, rotated, and lit using a cocktail of ambient, directional, spot, and point lights to get that “neon blue against deep space” look. There’s even a custom applyBlueGlow helper that walks the GLTF’s meshes, inspects their textures, and generates emissive maps on the fly to add a warm bloom without having to edit the source assets.
To sell the sense of motion, the page synthesizes two different star fields: slow, distant points for parallax and streaking particles that wrap around the ship like a tunnel. The streaks use a PointsMaterial with a bespoke on-the-fly shader patch that adds per-particle alpha falloff, so they fade in and out based on their offset along the flight path. Everything runs inside a custom animation loop with damped camera rigging, subtle bobbing, and PS1-style low-resolution rendering (the renderer intentionally downsamples to around 320 pixels tall, then stretches to fill the viewport).
Minimal UI chrome with tasteful typography
While the ship steals the show, the actual UI is intentionally restrained. styles.css defines a small palette of CSS custom properties for glow accents, muted body text, and two Google Fonts (Space Grotesk for body copy and Unica One for the logotype). The layout is just a flexbox column anchored with a “Coming Soon” badge, the title and subtitle, and a tiny footer. Plenty of blur filters and gradient overlays give the hero text a soft sci-fi halo without hiding the background animation.
Tooling: Tiny but effective
Even though it’s a single-page site, there’s a repeatable build pipeline defined in build.mjs. Running npm run build kicks off esbuild for JS/CSS minification, html-minifier-terser for compacting markup, and fast-glob to copy only whitelisted assets (like GLB files, textures, and fonts) into dist/. It’s a refreshing reminder that you can get a production-ready deployment without pulling in a heavyweight framework when you only need a static teaser page.
Takeaways
Astral Decay is a perfect example of how far you can push “just HTML and a script tag”. The repo blends classic web fundamentals with modern WebGL techniques to deliver a vibe-heavy microsite: cinematic camera work, shader hacks, and tasteful typography, all in about a single file of JavaScript. It’s a great reference if you want to ship something atmospheric without the overhead of a full SPA.