N° 0018ScenePro

Ferro Mark

A chrome C forms from liquid metal, bristles into ferrofluid spikes near your cursor and slumps into a pool on scroll.

35 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 ChromeEach 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 nameLegal nameCityStreetEyebrowHeadline strongHeadlineSubheadSubhead moreButtonLinkColor backdrop#1D1E21Color metal#D4D8DDAccent#C9A266Display fontBody font

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

Overview

A chrome C for an invented London treasury company forms out of a puddle of liquid metal on a charcoal studio floor; near the cursor it bristles into a hexagonal field of ferrofluid spikes that lean toward the pointer and melt back, scrolling slumps the mark into a pool with loose droplets, and at the call to action the pool rises back into the mark.

Signature momentThe formed chrome C on the charcoal studio floor, its left stroke bristling into a cluster of mirrored ferrofluid spikes under the cursor while the headline sits to its left.

A mark from primitives
The Cupel C is an elliptical tube 0.52 wide and 0.42 deep on an arc of radius 0.78, open 50 degrees either side, with a 0.27 chrome bead in its bowl. A ring, a cast ingot with drafted faces and a domed coin are the other shapes, each a few distance primitives with no font or SVG parsing.
Liquid that pools
One spring (omega 2.6, damping 0.7) takes the metal from puddle to mark in about 2 s: the mark squashes up to 6 to 1 toward the floor, erodes and smooth unions with a domed, lobed pool, while three to seven metaballs roll in from droplets on the floor.
Ferrofluid on a lattice
Cones on a hexagonal lattice 0.136 apart rise as a bell around the pointer and lean toward it along their height. They bristle in about 0.25 s with a small overshoot and melt back over 1.5 s, slower as viscosity rises; inside the field the march step drops to a tenth to stay stable.
A studio without textures
Seven soft boxes in direction space (key 3.2, fill 1.3, overhead 1.7, a floor card, rim strips at 5.0 and 3.6) and a dark photographer's side give the chrome its banding. Roughness widens every box, Schlick Fresnel and three AO taps finish the metal, with a contact shadow and a glossy floor.
Scroll melts, the form mends
A 165svh hero slumps the mark into the pool between 12% and 80% of its pin; at the call to action the pool rises back into the mark between 50% and 97% of a screen, riding with its copy. One fixed canvas is drawn only while either shows.
Light enough for phones
64 steps at 0.75 resolution on laptops, 48 at half resolution with three metaballs and spikes on tap on phones, a Worker on an OffscreenCanvas on normal visits, and one HTML file with no assets.

Build details

Kind: Scene
Plan: Pro
Tone: Dark, Light
Industries: Fintech, Web3, Agency
Technique: Fluid, WebGL 3D
Built with: Lenis 1.3.27, plain HTML, CSS and one ES module
Looks: 9
Weight: 70 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
Mark shape	`markShape`	select: monogram, ring, ingot, coin	monogram
Metaballs	`blobCount`	3 to 7	5
Viscosity	`viscosity`	0.1 to 1	0.5
Morph speed	`morphSpeed`	0.3 to 2	1
Spike height (mark units)	`spikeHeight`	0.04 to 0.3	0.22
Spike field radius (mark units)	`spikeRadius`	0.2 to 0.8	0.42
Metal tint	`metalTint`	color	#D4D8DD
Roughness	`roughness`	0.02 to 0.6	0.07
Oil film	`iridescence`	0 to 1	0
Studio warmth	`envWarmth`	0 to 1	0.35
Studio colour	`backdrop`	color	#1D1E21
Accent	`accent`	color	#C9A266
Page tone	`pageTone`	select: light, dark	light
Grain	`grain`	0 to 0.1	0
Seed	`seed`	1 to 99	7

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

The prompt

One text file, 35 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

# Ferro Mark: build prompt

## Role

Build one self contained `index.html` for {{BRAND_NAME}}, an invented {{CITY}} treasury company that holds company cash in sterling, euros and dollars, pays suppliers over instant rails and sweeps idle cash into UK Treasury bills. The hero is a studio product shot rendered live: a liquid chrome monogram (a thick C with a mirrored bead in its bowl) on a charcoal floor. On load it rises out of a puddle; near the cursor it bristles into a hexagonal field of ferrofluid spikes that lean toward the pointer, then melts back. Scrolling slumps it into a pool with loose droplets; at the call to action the pool rises back into the mark. Below sits the page a real treasury company would publish. One hand written WebGL2 fragment shader: no three.js, no textures, no images.

## Output contract

- One file, CSS and scripts inline, the scene in an ES module; no build step, framework or GSAP. Lenis only, by import map `{"imports":{"lenis":"https://cdn.jsdelivr.net/npm/lenis@1.3.27/dist/lenis.mjs"}}`, imported after the scene starts, never under capture or reduced motion.
- {{FONT_DISPLAY}} from Google Fonts, weights 300, 400, 500 in one request, `media="print" onload="this.media='all'"` plus `<noscript>`. Fallback `'Mona Sans Fallback'` from `local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo')`: 300 size-adjust 103.1%, ascent 105.8%, descent 31%; 400 104.8%, 104%, 30.5%; 500 106.7%, 102.1%, 30%; line gap 0. Use default proportional figures: the tabular zero is slashed and would print “£Ø”.
- Presets in `<script type="application/json" id="dusklayer-presets">/*PRESETS*/[…]/*/PRESETS*/</script>`, equal to presets.json; params from the default, then `?preset=001` to `008`, then `?seed=n`. A classic head script defines `window.FM` and applies the preset’s CSS variables, `data-shape` and `theme-color` before first paint.
- `window.DUSKLAYER = { version: 1, params, set(values), pause(), resume(), ready, quality, scrollTo(p) }`; `set` applies every param live; `ready` resolves after the first frame; under `?capture=1` each `scrollTo` advances time 1/30 s and the first one starts every spring at its target.

[32,332 more characters. Copy the prompt to get all of it.]