Ocean Dive Scroll-Driven
Built for Hadal descent, the sample brand inside the template
A web-studio site that dives from sunlit water to the trench as you scroll, with one real glass or pearl object in each depth band.
It builds, or it's free. If this prompt doesn't rebuild the site you saw in its live demo, email us within 14 days of buying for a full refund.
How it moves
It opens under the surface: sun through ripples, god rays, kelp swaying at the edges, and the word 'Hadal' standing in the 3D scene behind a clear glass crystal that bends it, with small copy at the lower left and a depth reading of 0,000 m at the lower right. Scrolling sinks the camera through twilight (200 m, an iridescent pearl), midnight (1,000 m, a frosted shard lit from inside) and the abyss (4,000 m, a glass lens over the lit floor); each photographic plate dissolves into the next from below, with its own midground layer, light and fog. It ends in black water at 6,000 m with a glowing glass octopus above one large link, 'Start a dive', then releases into a short list and a footer.
What you get
- A tested build prompt · 16.6k wordsPaste it into Claude Code, Cursor, Codex or Lovable and it builds the landing page section by section.
- The working projectVite + React.
npm install && npm run devand it runs, no keys or accounts. - The assets and their promptsEvery image and loop, plus the exact prompts that made them, so you can make your own.
Inside the prompt
A one-page site for Hadal, an invented immersive web studio, built as a scroll-scrubbed dive from the sunlit water under the surface to the trench. The first screen is underwater light: the sun as a soft disc through the rippled surface, god rays falling into teal water, kelp silhouettes swaying at both edges, and the word "Hadal" standing inside the 3D scene behind a clear glass crystal that bends the letters and the water behind it. Small copy sits at the lower left and a depth reading ("0,000 m", leading zeros dimmed) at the lower right. Scrolling sinks the camera through four depth bands (sunlight 0 m, twilight 200 m, midnight 1,000 m, abyss 4,000 m), each with its own photographic plate, a midground subject on its own plane, its own light and one real three.js object; the next plate dissolves in from below through soft noise. It ends in near-black water at 6,000 m with a glowing glass octopus over one large link, "Start a dive", then releases into a short list and a footer.
- What it is
- Style collection
- Build steps
- Assets
- Motion
- Make it yours
- Launch checklist
- Acceptance checks
