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.
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.
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.tsRecut it
- Rename the brand and rewrite the pitch
src/components/HeroOverlay.tsx → HeroOverlay - Recolor the glowing fissures
src/shaders/monolithShader.ts → cyan - Move or reshape the fault line
src/shaders/monolithShader.ts → fissure() - Place the stone left, right, or centered
src/components/MonolithScene.tsx → useLayout() - Slow down or speed up the whole scene
src/lib/loop.ts → LOOP
Also in the vault
Kinetics
Scroll HeroA dark SaaS hero where giant type slides with scroll inertia, glass stat cards tick like a live dashboard, and a frosted dock magnifies under the pointer. Pure DOM and Framer Motion — no canvas, no images.
CodePulse
Video GeneratorPaste a snippet and export a glowing, typed-out code clip as MP4 — square for X, vertical for Reels, Shorts, and TikTok. A Remotion composition with VS Code-grade highlighting and a live browser preview.