Loading…
Live page · scroll inside
Premiumscuba dive centre · dark · landing page · gsap · lenis · html
Lanternfish
A dive centre's site in deep blue-black with condensed instrument type: the hero is a tall photo of a strobe-lit soft-coral reef with a depth gauge down its edge; dragging it (or a handle, a preset or the arrow keys) sinks the reef from the surface to 40 m and six colour-matrix copies of the photo cross-fade so red goes by 5 m, orange by 10 and yellow by 20, while a dive computer beside it reads depth, absolute pressure, the no-stop limit, how long the air lasts and the sunlight left per colour, and a torch button gives the colours back in a pool of light; then six dive sites drawn as columns hanging from the surface to their depth, four courses keyed to the depth they unlock, a dive day as a timed log beside a boat photo, and a booking block with sea temperature by month.
Placeholder photos by Pascal van de Vendel, Olga ga and Thomas Ashlock on Unsplash. Replace them with your own before launch.
What's inside
- 01Lanternfish wordmark barTurns solid with a hairline after 80 px; link underlines grow with scaleX.
- 02Reef that loses its colours with depthHeadline lines rise; the reef sinks from the surface to 18 m once; dragging, presets and keys change depth; the torch fades the true colours back in.
- 03Dive sites hung by depthColumns hang down in turn and their labels drop in; photo and copy rise.
- 04Courses keyed to depthColumns rise in turn; depth bars fill with scaleX.
- 05A dive day as a logEntries rise in turn.
- 06Booking with sea temperaturesBars grow from the baseline in turn.
- 07Single-line footerNone.
Utility pages in the same file: 404 · Style guide · Password · Changelog
How to use it
From prompt to a live page.
- 01Walk the page
The preview is the real template: loader, scene, scroll choreography. Scroll inside it or open it full-screen.
- 02Pick a palette
Token sets re-tint the whole page live, scene included. The prompt carries the one you chose.
- 03Pick your stack
Single HTML, Next.js, React, Vue, Astro, WordPress blocks, Shopify sections or a Webflow build guide.
- 04Copy the prompt
It carries the art direction, the tokens, the motion system and every section's layout, motion and content, in order.
- 05Make it yours, then iterate
Swap copy and images first, keeping the structure. Then refine section by section rather than re-running the whole prompt.
