create a production-grade 3d website inspired by the attached reference image, using the installed `SKILL.md` as the governing implementation standard.

do not recreate the reference literally. preserve the core interaction idea, a scientific expedition interface layered around a central 3d terrain scene, but create a completely new visual system, layout, data model, and environment.

## project

build a website for:

**ORBITAL FIELD UNIT**

an autonomous planetary research platform for remote terrain analysis, mineral mapping, atmospheric observation, and expedition planning.

the website should feel like a live scientific instrument rather than a marketing landing page.

## core experience

the viewport is a full-screen mission interface.

a large interactive 3d planetary environment occupies the center.

scientific modules are positioned around the environment as semi-transparent interface surfaces.

the ui should feel physically connected to the scene.

changing a control should visibly change the 3d environment.

the 3d scene is the product.

## environment

create a procedural alien desert basin.

scene elements:

* large eroded mountain ridge in the distance
* shallow crater basin
* dry sediment channels
* scattered dark mineral formations
* one central geological specimen
* volumetric atmospheric haze
* low sun angle
* long hard shadows
* subtle suspended dust
* terrain variation generated from noise or displacement
* no earth vegetation
* no sci-fi buildings
* no spacecraft in the hero

the landscape should feel scientifically plausible rather than fantasy.

## central specimen

place one large geological formation near the center foreground.

dimensions in virtual scale:

* approximately 2.4m wide
* 1.7m tall
* asymmetrical silhouette
* rough oxidized surface
* darker mineral seams
* partially embedded in terrain

the specimen is the main inspection target.

show a thin targeting reticle around it.

when hovered or selected:

* camera moves slightly closer
* specimen receives a subtle rim light
* geological labels appear
* terrain around it remains stable

do not spin the rock.

## visual direction

palette:

background:
#171511

surface:
warm sand, oxidized brown, dusty beige

ui:
#eee5dc

text:
#171511

secondary text:
rgba(23,21,17,.55)

accent:
burnt orange / solar amber

style:

* scientific
* editorial
* architectural
* minimal
* warm
* tactile
* high-end industrial design
* restrained futurism
* no cyberpunk
* no neon
* no blue holographic hud
* no generic nasa aesthetic
* no glowing grid covering the entire scene

the interface should feel like a physical research terminal designed in 2035.

## desktop composition

reference viewport:

1600 × 900

outer margin:
48px

main application frame:
approximately 1504 × 804

corner radius:
0 to 6px maximum

the entire experience should read as one composed instrument.

### top navigation

top left:

ORBITAL FIELD UNIT

small geometric mark beside it.

center navigation:

MISSION
SURFACE
COMPOSITION
SYSTEM

top right:

SYNC 04:58 AGO

small notification control

operator profile

navigation should stay visually quiet.

## center title

above the scene:

EXPEDITION 07

main heading:

KEPLER BASIN
SECTOR C4

font size approximately 64px desktop.

use tight leading.

the title should sit in open negative space and never compete with the terrain.

## left instrumentation panel

create a translucent warm-white scientific panel approximately:

340px wide
610px tall

positioned inside the left edge of the scene.

do not use generic cards stacked inside cards.

this should read as one continuous instrumentation surface.

### module 01 / environment

show:

22 KM/H
SURFACE WIND

-46°C
GROUND TEMP

### module 02 / stellar exposure

title:

SOLAR EXPOSURE

subtitle:

CLASS M2

display a radial energy visualization.

value:

64%

additional value:

+0.42 SV/H

the radial system should react slightly to mission time and sun direction.

### module 03 / terrain scan

title:

SUBSURFACE PROJECTION

build a small interactive wireframe geological chart.

three material layers:

BASALT
SILICATE
IRON OXIDE

the graph should be derived from the same terrain dataset used by the 3d scene where practical.

## right instrumentation panel

same width and visual language as the left.

### module 01

show:

0.31 PSI
PRESSURE

63%
DUST DENSITY

### module 02 / terrain view

title:

SURFACE MODEL

controls:

TOPOLOGY
COMPOSITION

include a compact elevation graph.

show:

MIN
0.8 CM

CURRENT
2.9 CM

MAX
6.4 CM

changing between topology and composition should change the central 3d terrain rendering.

topology mode:

physical shaded terrain

composition mode:

geological classification overlay

this transition should happen through the actual material system rather than swapping images.

### module 03 / mineral composition

title:

MINERAL COMPOSITION

display a semicircular segmented meter.

composition:

54% Fe₂O₃
28% MgO
18% SiO₂

button:

GENERATE ANALYSIS

## 3d interaction model

the 3d world must respond to the interface.

examples:

solar exposure module:
changes sun position and shadow strength.

topology mode:
shows neutral physically lit terrain.

composition mode:
maps mineral data onto terrain.

subsurface projection:
activates a sectional visualization below the selected area.

mineral composition:
highlights matching regions on the specimen.

the ui cannot be fake decoration.

every major visualization should correspond to an actual state in the scene.

## pointer behavior

pointer movement should create restrained depth.

camera response:

yaw:
maximum ±2°

pitch:
maximum ±1.2°

use damping.

do not directly map pointer coordinates.

different ui planes can move between approximately:

2px
5px
8px

depending on depth.

the scene itself should move less than the interface foreground.

## scroll behavior

this site should primarily behave as a controlled application viewport, but scrolling should reveal deeper analysis states.

### state 01 / survey

full terrain view.

all environmental modules visible.

### state 02 / specimen

camera approaches central geological formation.

terrain panels simplify.

specimen analysis becomes dominant.

### state 03 / subsurface

surface partially fades.

a sectional geological volume appears beneath the terrain.

show three stratified layers.

### state 04 / composition

terrain returns.

different mineral regions become visible through restrained material mapping.

### state 05 / report

camera pulls upward.

the environment becomes a topographic map.

data modules reorganize into a compact mission summary.

final CTA:

EXPORT FIELD REPORT

scroll transitions should interpolate the same 3d scene.

do not replace the scene with separate sections.

## technical system

use:

* three.js or react three fiber
* procedural terrain
* physically based materials
* instancing for repeated geological debris
* shader-based terrain classification if needed
* one coordinated animation loop
* normalized scroll progress
* deterministic scene states
* css variables for lightweight ui parallax
* semantic html for interface controls
* progressive enhancement

avoid:

* excessive post-processing
* bloom-heavy visuals
* loading enormous textures unnecessarily
* hundreds of independent draw calls
* separate animation loops for every widget
* per-frame react state updates

## terrain generation

build the environment from a controlled heightfield or procedural noise system.

terrain should contain:

macro scale:
mountain ridge and basin

medium scale:
erosion channels and sediment shelves

micro scale:
surface roughness

use seeded randomness so the same mission terrain is reproducible.

## atmospheric system

keep it subtle.

use:

* scene fog
* depth haze
* soft dust sprites or gpu particles
* low-angle sunlight

dust must not become a visual effect covering the interface.

## lighting

one dominant directional source representing the system star.

one weak environmental fill.

very subtle specimen rim illumination only when inspecting.

shadows should be important to terrain readability.

## ui material

panels should feel like translucent physical surfaces.

use:

rgba warm whites

very light borders

extremely restrained blur

do not place expensive backdrop-filter across large areas if it damages performance.

prefer carefully layered transparency and gradients.

## responsive behavior

mobile should become a field instrument rather than a compressed desktop dashboard.

mobile:

* 3d scene occupies top 55 to 65vh
* mission title stays over scene
* instrumentation modules become vertically scrollable below
* selected metrics can remain floating over scene
* no tiny desktop panels
* touch targets at least 44px
* no pointer-only behavior
* lower geometry density
* lower particle count
* lower dpr
* preserve terrain interaction

tablet may retain one side panel at a time.

## performance

implement quality tiers:

high:
desktop gpu

medium:
standard laptop

low:
mobile / constrained gpu

adjust:

* terrain resolution
* debris count
* dust count
* shadow map resolution
* post processing
* device pixel ratio

cap dpr.

avoid allocating vectors or objects every frame.

pause unnecessary updates when tab visibility changes.

render the first meaningful frame intentionally.

## fallback

if webgl fails:

show a static terrain composition or simplified css background.

all core mission data and navigation must remain readable.

do not show an empty black canvas.

## accessibility

support:

* prefers-reduced-motion
* keyboard navigation
* visible focus states
* semantic buttons
* proper labels
* readable contrast
* touch interactions

reduced motion should freeze camera/parallax effects while keeping scene state changes understandable.

## implementation order

before coding, define:

1. application layout
2. dom/webgl depth hierarchy
3. terrain generation system
4. specimen generation
5. scene lighting
6. camera model
7. interaction state machine
8. data-to-scene mapping
9. scroll state model
10. responsive composition
11. quality tiers
12. performance budget

then build the complete experience.

## success criteria

do not declare completion until:

* the terrain is actually 3d
* the central specimen is real geometry
* ui controls change the scene
* topology/composition states genuinely differ
* pointer movement is damped
* scroll transforms one persistent scene
* dom and webgl layers have intentional depth
* mobile is recomposed
* dpr is capped
* repeated debris uses an efficient strategy
* reduced-motion works
* webgl failure has a usable fallback
* no major panel is decorative-only
* the result feels like an actual planetary research product
* the design clearly draws inspiration from the attached reference without reproducing it