Monolith

Field notes

A floating hexagonal basalt monolith split by glowing cyan fissures, with drifting debris, a light shaft, and pointer parallax. Procedural GLSL stone — no textures, no models, no network.

• 3D
• WebGL shader
• Pointer interaction
• Dark theme

Monolith is a single-screen hero built around one object: a hexagonal basalt column hanging in the dark, split by a fault line that glows from inside. The stone, the fractures, and the light are all procedural GLSL — there is not a single texture, model, or HDR file to download.

Everything moves on a 10-second loop — a slow sway, a gentle rise and fall, energy travelling up the cracks — so the page feels alive without ever feeling busy. Pointer parallax tilts the column toward the visitor, and the whole scene rests for anyone who prefers reduced motion.

How it's built

• Stone that keeps its lighting: the basalt is a stock MeshStandardMaterial patched through onBeforeCompile, not a custom ShaderMaterial. The procedural color, roughness and glowing cracks go into three.js’s own PBR pipeline, so the spot light, rim light and fog still apply. Each injection throws if its #include anchor is missing, so a three.js upgrade that renames a chunk fails loudly.
• Cracks that stay put: the fissures are computed from the vertex’s object-space position, so they stay fixed on the stone as it sways. The main fault is a noise-wobbled plane, and the branch fractures come from a Voronoi edge distance that fades out away from the fault.
• One NaN blacks out the frame: pow() of a negative number returns NaN, and bloom spreads it until the whole frame turns black. So the fault falloff uses d*d, and the light-shaft shader clamps its UV before squaring it, because MSAA can push it slightly below 0 at the edge.

Inside the prompt

Every file below is written out in full, so your agent creates the project exactly — no guessing, no missing pieces.

monolith-3d/
├─ .gitignore
├─ index.html
├─ package.json
├─ tsconfig.json
├─ vite.config.ts
└─ src/
   ├─ App.tsx
   ├─ index.css
   ├─ main.tsx
   ├─ vite-env.d.ts
   ├─ components/
   │  ├─ HeroOverlay.tsx
   │  └─ MonolithScene.tsx
   ├─ lib/
   │  └─ loop.ts
   └─ shaders/
      └─ monolithShader.ts

Recut it

• Rename the brand and rewrite the pitchsrc/components/HeroOverlay.tsx → HeroOverlay
• Recolor the glowing fissuressrc/shaders/monolithShader.ts → cyan
• Move or reshape the fault linesrc/shaders/monolithShader.ts → fissure()
• Place the stone left, right, or centeredsrc/components/MonolithScene.tsx → useLayout()
• Slow down or speed up the whole scenesrc/lib/loop.ts → LOOP