A spatial, depth-driven aesthetic that transforms flat browser windows into navigable three-dimensional environments with parallax depth, volumetric lighting, and cinematic scroll-driven animation.
Typography
wide tracking, uppercase HUD style, legible against depth
Display / Exo 2 800
Enter the Void
Heading / Space Grotesk 600
Spatial Interface Design
Subheading / Outfit 500
Depth-Driven Visual Storytelling
Body / Inter 400
Clean, geometric body text optimized for readability against complex 3D backdrops. Generous line height and consistent stroke widths ensure legibility at any depth layer.
Monospace / JetBrains Mono
const scene = new THREE.Scene();
Gradient / Animated
Chromatic Motion
Exo 2 700 + Inter 400
Cinematic spatial interface
Space Grotesk 600 + Inter 400
Technical 3D dashboard
Outfit 700 + Space Grotesk 400
Clean immersive product showcase
Color Palette
deep space blacks, rich indigos, neon focal points
Components
frosted overlays floating above dimensional scenes
Multiple content planes move at different scroll speeds, creating z-depth illusion. Background scrolls slower than foreground, producing a three-dimensional feel on a flat screen.
Scroll CSSSoft fog, bloom, god rays, and ambient occlusion create atmosphere and spatial depth. Light sources become narrative devices that guide the eye through the scene.
WebGL ShaderFloating particles, dust motes, star fields, and data-driven point clouds add ambient motion and spatial density to otherwise empty dimensional space.
GPU MotionSemi-transparent UI panels with backdrop-filter blur float above 3D scenes, anchoring readable content over dynamic backgrounds while maintaining atmosphere.
Blur LayoutGSAP ScrollTrigger binds scroll position to camera movement, object rotation, and material transitions, turning page navigation into a cinematic sequence.
GSAP CameraCustom GLSL shaders produce distortion, ripple, noise, and post-processing effects like chromatic aberration, film grain, and depth of field blur.
GLSL Post-FXVisual Effects
volumetric glow, depth grids, nebulae — no image assets
Box-shadow cascades and gradient lines simulate god rays piercing through atmospheric depth.
CSS grid lines with perspective transform create the illusion of a ground plane receding into the distance.
Radial gradient dot fields layered with ambient color produce a floating cosmic particle cloud.
Backdrop-filter blur with subtle borders creates frosted glass surfaces for readable content overlays.
Offset color channels simulate lens distortion, a signature post-processing effect in 3D scenes.
Animated multi-color gradient with shifting background-position creates iridescent surface treatment.
Interactive Elements
glowing borders, sweep animations, spatial hover states
The difference between a flat webpage and an immersive experience is depth — not just visual depth, but emotional depth. When users feel like they are moving through a space rather than scrolling a page, content becomes a journey.— The Philosophy of Spatial Design
3D Immersive design transforms passive browsing into active spatial exploration. Dark atmospheric environments, luminous accents, glassmorphic panels, and scroll-triggered cinematics create experiences that unfold like directed visual narratives.
Back to Origin