N° 0012ScenePro

Sonar Field

A slow radar sweep crosses a dark grid, six live readings ping as it passes, and scrolling tilts the plane away.

40 KB of text that builds one HTML file. Paste it into Claude Code, Cursor or v0 to rebuild this page.

Open full page Live. Scroll inside the preview to play it.

Loading the layer

LooksShowing AbyssEach look changes the colours of the live preview and goes into the prompt you copy.

Make it yoursYour brand, copy and colours go into the prompt you copy. Colours change the preview live.

Brand nameDomainEyebrowHeadline strongHeadlineButtonPricePlaceBackground#070B14Text#E6EAF2Accent#5B9BFFColor ping#8CC0FFDisplay fontBody font

Brand remix is a Pro feature at launch. It is open in the preview.

Overview

A hairline grid recedes into the dark under a slow radar sweep; six live readings from an uptime product sit on the grid and ping with two expanding rings when the sweep passes them, and scrolling tilts the plane away and lowers the camera before the page below reads as a normal site.

Signature momentThe sweep's edge just past the status card: two thin ellipses expanding from its foot on the grid, the card's border and value lit in the ping colour, the lines behind the edge still glowing.

The grid
One full screen WebGL2 fragment shader: a plane seen from a camera 1.3 units up and pitched 34 degrees, cells of 0.12 units with a major line every 5, fract based lines antialiased by fwidth, and an exponential fade that starts 1.2 units out at a 2.4 unit scale.
The sweep
A leading edge 1.6 px wide turning once every 7.5 s, an exponential trail 0.4 radians wide and an afterglow four times as long at 35%. Inside the trail the grid lines take the ping colour and the ground gets a 12% wash, out to 1.3 units from the origin.
Six readings on the grid
A status card, two metrics, two region labels and a four row node list are DOM callouts whose feet are unprojected to plane points once; every frame they are projected back, so they slide with the plane and dim as scrolling carries them away.
The ping
When the edge crosses a callout's angle, at the exact crossing time, two 1.25 px ellipses sized to the plane's foreshortening expand over 1.0 s, 180 ms apart; the border and value rise to the ping colour in 140 ms and settle over 1.4 s; the number ticks four times in 400 ms to a seeded new value.
Phones in Canvas 2D
Under 760 px the same camera draws the grid into a static canvas and the sweep as 120 pattern filled fan slices on a transparent one, redrawing only when the clock or the camera moves, with four callouts and rings of 0.2 units.
A monitoring site around it
Six figure rows, a three plan table with a monthly and yearly toggle, three FAQ entries, an email start band, five dated status rows and a four group footer. 58 KB of HTML with no images; Lighthouse mobile 100 / 100 / 100.

Build details

Kind: Scene
Plan: Pro
Tone: Dark, Light
Industries: SaaS, AI and tech, Web3
Technique: Shaders
Built with: Lenis 1.3.27, plain HTML, CSS and one ES module
Looks: 9
Weight: 58 KB, layer files only
Mobile performance: 100
Accessibility: 100
Fidelity Score: In review
Licence: Commercial, including client work. No redistribution. Read it
Version: 1, updated 3 November 2026
Released: 3 November 2026

Parameters, 15 of them, all live through DUSKLAYER.set()

Control	Key	Range	Default
Sweep speed	`sweepSpeed`	0.3 to 2.5	1
Sweep trail	`sweepWidth`	0.1 to 1	0.4
Afterglow	`afterglow`	0 to 1	0.5
Grid density	`gridScale`	0.5 to 3	1
Grid contrast	`gridContrast`	0.04 to 0.3	0.13
Fade distance	`fadeDistance`	0.8 to 5	2.4
Camera tilt (degrees)	`tilt`	16 to 60	34
Rings per ping	`ringCount`	1 to 3	2
Label density	`labelDensity`	0.25 to 1	1
Ping and sweep colour	`pingColor`	color	#8CC0FF
Accent	`accent`	color	#5B9BFF
Page	`page`	color	#070B14
Ink	`ink`	color	#E6EAF2
Grain	`grain`	0 to 0.12	0
Readings seed	`seed`	1 to 9999	7

Something wrong with this layer? Report a problem and we fix it in the next version.

The prompt

One text file, 40 KB, 10 sections. Every number the page uses is in it, so another model can rebuild the layer without seeing this one.

Role
Output contract
Design tokens
Layout
Scene
Presets
Motion
Responsive and performance
Acceptance checklist
Customize

How to use it

Pick a look. The look you choose above is written into the prompt’s parameter block.
Copy the prompt. Paste it into Claude Code, Cursor or v0 as the first message of a new session.
Make it yours. Change the brand name, copy, colours and fonts first; every placeholder is marked. Keep the structure.
Check it. The prompt ends with an acceptance checklist. Run through it before you ship.

Read the opening of the prompt

# Sonar Field: build prompt

## Role
You are a senior creative front-end developer. Build the layer below as one self-contained `index.html`: the home page of {{BRAND_NAME}}, a small company that sells uptime and network monitoring to software teams. A real page: a fixed header, a full viewport hero, three sections and a footer. The hero is the layer. A hairline grid lies on a plane seen from a camera pitched down at it and fades into the page colour with distance. A radar sweep turns slowly on it: a thin leading edge, a soft trail, a faint afterglow that decays over most of a turn. Six of the product's own readings (a status card, two small metrics, two region labels, a short node list) stand on the grid as DOM callouts pinned to plane points. When the edge passes a callout's point it pings: two thin rings expand from its foot over one second and fade, its number ticks to a new plausible value, its border and value brighten and settle. Scrolling the first viewport tilts the plane further away and lowers the camera, the callouts sliding with their points; then the page below reads as a normal site. Grid and sweep are one full screen WebGL2 fragment shader on desktop and a Canvas 2D drawing on phones, with the same callouts and pings on both. The feel is an instrument: one accent, hairlines at low contrast, a sweep you notice rather than watch, labels in sentence case with real units. Nothing on the page is a HUD.

## Output contract
- One file `index.html`, no build step, no framework, no GSAP, no Three: plain HTML, CSS and one ES module. Under 64 KB. No images.
- Import map with one exact version: `"lenis": "https://cdn.jsdelivr.net/npm/lenis@1.3.27/dist/lenis.mjs"`. `import('lenis')` after boot (ignore failures), never under `?capture=1` or reduced motion; drive it from the rAF loop (`lenis.raf(now)`, `autoRaf: false`).

[37,686 more characters. Copy the prompt to get all of it.]