The Concept
Every studio needs a front door. For 4worlds, that meant building something that could hold four very different creative directions under one roof: tools, gallery, blog, and publishing, without looking like a generic SaaS landing page.
The answer was a quadrant navigation system backed by a procedural nebula shader that responds to which world you hover over.
Stack Decisions
We chose Astro 5 for its island architecture. The homepage is a single React island (HomeOverlay) that manages the nebula background and quadrant HUD. Every other page can be pure Astro, zero JavaScript gets shipped unless specifically needed.
Astro Islands
Zero JS by default
React 19
Concurrent Rendering
Every other page can be pure Astro, this allows the heavy lifting of the 3D entry point to coexist with a lightning-fast technical blog.
The Nebula System
The background is not a pre-rendered video or a static image. It’s a three-layered system that runs in real-time:
- StarfieldCanvas — 2,500 twinkling stars with color temperature variation
- NebulaShader — GPU fragment shader with domain-warped FBM noise, per-world color presets
- DustParticles — 250 floating luminous motes with edge-fade and pulse animation
// Each world gets its own accent color for the nebula
const SECTIONS = [
{ id: "studio", accent: "rgba(224,60,88,0.4)" },
{ id: "gallery", accent: "rgba(0,180,216,0.4)" },
{ id: "lore", accent: "rgba(240,160,48,0.4)" },
{ id: "publishing", accent: "rgba(124,58,237,0.4)" },
];All three layers receive parallax offset from mouse position, plus an ambient Lissajous drift so the scene breathes even without interaction.
The Shader
The nebula fragment shader uses Quilez-style quad domain warping on top of a 6-octave FBM. Three gas layers — crimson (Ha emission), teal (OIII), and violet (overlap) — are composited with separate density thresholds. A sparse smoothstep and aggressive pow(density, 4.0) keep most of the frame void, with only bright peaks surviving.
float density = smoothstep(0.48, 0.74, raw);
density = pow(density, 4.0);This gives the nebula its characteristic wispy, high-contrast look without banding artifacts.
Deployment
Static output via @astrojs/cloudflare. The build produces vanilla HTML, CSS, and JS with no server functions needed. Sitemap is auto-generated. SEO meta tags and JSON-LD structured data live in the base layout.
Final Observation
“It won’t make you a better designer tomorrow, but knowing how these things work under the hood ensures you aren’t just guessing.”
What Comes Next
- Lore aesthetic — the page you are reading right now
- Publishing SEO — structured data for AI agent discoverability
- Gallery design — TBD
- Code splitting — the HomeOverlay bundle is 901kb and needs attention
QED ∎