Live page · scroll inside

Number 724, Template, Free

Abyss

A product site in deep-ocean navy for a fictional AI research assistant that reads your sources and answers with citations: a procedural three.js creature of light (a displaced bell with a fresnel rim and a violet core that pulses as it swims, 36 trailing tentacles of light, marine snow, god-rays) drawn over a graded deep-water photograph. It swims toward the pointer in strokes, a click sends a pulse of light down its tentacles, and as you scroll the camera sinks with it until four tentacles reach out and light the feature cards. Around it, the dense chrome of a shipped SaaS site: announcement bar, nav, a live chat-with-citations product mock in the hero, a logo strip, feature cards, use-case tabs with worked examples, a full-bleed sources band with counters, a working ask demo, three plans with a billing switch and a comparison table, testimonials, FAQ, a closing CTA and a five-column footer; five lights re-tint the page, the water and the creature.

PaletteMidnight

Token sets re-tint the page live; the prompt carries the one you chose.

Kind: Template
Industry: AI research assistant
Mood: DeepLuminousCinematic
Tone: Dark
Built with: three.jsGSAPLenisHTML
Prompt: 153 KB · html, next, react, vue, astro, wordpress, shopify, webflow
Licence: Personal use on Freecommercial with Pro or Lifetime

What's inside

01
Descent preloader
The ring fills with load progress and the depth counts to 1,000 m; it wipes up as the creature rises and glows up.
02
Announcement bar
Static.
03
Product nav
Solid with a blur after 40 px.
04
Creature hero with a product mock
The creature rises in and swims toward the pointer; a click sends light down its tentacles; the mock is full on load and plays its reading once (citations light their sources in turn, the last sentence types on); hovering a citation lights its source and quotes the passage.
05
How it reads
The camera sinks with the creature to the left; as each card comes up a tentacle reaches its left edge, the tip lights and the card's gradient border and anchor dot glow.
06
Use cases
Tabs switch panels (arrow keys move between tabs); the creature swims to the right.
07
Sources band
The figures count on entry; from here the solid sections cover the canvas and the loop stops.
08
Ask demo
A chip or a typed question fills the answer card with a cited answer; anything outside the demo library answers ‘Not in your sources’.
09
Plans
The switch swaps the prices; cards rise in sequence.
10
Testimonials
Cards rise in sequence.
11
FAQ
Rows open and close natively.
12
Closing card
Reveals only.
13
Footer
The newsletter form answers inline.

Utility pages in the same file: 404 · Style guide · Password · Changelog

3D assets: Abyss hero backplate, empty deep water with god-rays by Tileio (Generated for Tileio (Gemini, from ops/immersive/abyss-prompts.md), Tileio), Abyss being, portrait of the creature of light by Tileio (Generated for Tileio (Gemini, from ops/immersive/abyss-prompts.md), Tileio), Abyss tentacle close-up by Tileio (Generated for Tileio (Gemini, from ops/immersive/abyss-prompts.md), Tileio) and Abyss deep water, wide, with the being far away by Tileio (Generated for Tileio (Gemini, from ops/immersive/abyss-prompts.md), Tileio).

How it works

01
Walk the page
The preview is the real template: loader, scene, scroll choreography. Scroll inside it or open it full-screen.
02
Pick a palette
Token sets re-tint the whole page live, scene included. The prompt carries the one you chose.
03
Pick your stack
Single HTML, Next.js, React, Vue, Astro, WordPress blocks, Shopify sections or a Webflow build guide.
04
Copy the prompt
It carries the art direction, the tokens, the motion system and every section's layout, motion and content, in order.
05
Make it yours, then iterate
Swap copy and images first, keeping the structure. Then refine section by section rather than re-running the whole prompt.

More like this

Lanternfish

PRO

N° 0723 · scuba dive centre

Pollard

FREE

N° 0722 · arborist and tree surgeons

Fairlead

PRO

N° 0721 · sailing school

Abacus

FREE

N° 0670 · Accountancy practice

Kittiwake Air

PRO

N° 0671 · travel/regional airline

Laneline

PRO

N° 0672 · sport/mobile app

Beacon

FREE

N° 0673 · Feature flags

Dewlight

PRO

N° 0674 · home cleaning service

Loading…

Abyss

What's inside

Descent preloader

The ring fills with load progress and the depth counts to 1,000 m; it wipes up as the creature rises and glows up.

Announcement bar

Static.

Product nav

Solid with a blur after 40 px.

Creature hero with a product mock

The creature rises in and swims toward the pointer; a click sends light down its tentacles; the mock is full on load and plays its reading once (citations light their sources in turn, the last sentence types on); hovering a citation lights its source and quotes the passage.

How it reads

The camera sinks with the creature to the left; as each card comes up a tentacle reaches its left edge, the tip lights and the card's gradient border and anchor dot glow.

Use cases

Tabs switch panels (arrow keys move between tabs); the creature swims to the right.

Sources band

The figures count on entry; from here the solid sections cover the canvas and the loop stops.

Ask demo

A chip or a typed question fills the answer card with a cited answer; anything outside the demo library answers ‘Not in your sources’.

Plans

The switch swaps the prices; cards rise in sequence.

Testimonials

Cards rise in sequence.

FAQ

Rows open and close natively.

Closing card

Reveals only.

Footer

The newsletter form answers inline.

How it works

Walk the page

The preview is the real template: loader, scene, scroll choreography. Scroll inside it or open it full-screen.

Pick a palette

Token sets re-tint the whole page live, scene included. The prompt carries the one you chose.

Pick your stack

Single HTML, Next.js, React, Vue, Astro, WordPress blocks, Shopify sections or a Webflow build guide.

Copy the prompt

It carries the art direction, the tokens, the motion system and every section's layout, motion and content, in order.

Make it yours, then iterate

Swap copy and images first, keeping the structure. Then refine section by section rather than re-running the whole prompt.