Using a prompt
Every layer page has a Copy the prompt button. The prompt is one text file, 30 to 45 KB, that describes the layer completely: the DOM section by section with its copy, the design tokens, every numeric constant of the motion and the scene, any shaders verbatim, the runtime API, the responsive rules and an acceptance checklist.
- Pick a look on the layer page. Its values are written into the prompt’s parameter block.
- Copy the prompt and paste it as the first message of a new session in Claude Code, Cursor or v0.
- Ask for one HTML file with everything in it first. It is the easiest thing to check against the preview.
- Then change the brand name, the copy, the colours and the fonts. Every placeholder is marked in the prompt.
- Run the acceptance checklist at the end of the prompt before you ship.
Porting to a framework
Once the HTML build matches the preview, ask your tool to move it into your stack. The layers keep their markup, styles and one ES module together, so a Next.js, Astro or Vue port is mostly a matter of where the module runs.
Looks and the runtime API
A look is a named set of parameter values. Every layer ships with nine, and all of them drive the same page, so switching looks never changes the structure.
Every layer exposes window.DUSKLAYER with params, set(values), pause(), resume() and a ready promise. The library’s preview uses set() to recolour the page live; your own site can do the same. The URL accepts ?preset=001 to 008, ?reduced=1 to force the reduced motion version and ?quality=low for slower devices.
Inside an iframe a layer also listens for postMessage from its host ({source: 'dusklayer-host', type: 'set' | 'pause' | 'resume'}) and reports when it is ready and how fast it is running ({source: 'dusklayer', type: 'ready' | 'fps'}).
Fidelity Score
The score says how closely a blind rebuild matches the original. A fresh model is given the prompt and nothing else, with no access to the original files, and asked to build the layer. Both pages are then captured with the same clock, pointer path and scroll keyframes: five moments each on desktop and on a phone, ten frame pairs in all.
Each pair is compared with structural similarity on greyscale frames, and the five dominant colours of each page are compared as a palette. The score is 80% similarity and 20% palette, rounded to a whole number. Layers ship at 85 and above; the contact sheet of every comparison is published with the score.
Scores marked In review belong to layers whose prompt has been written but not yet rebuilt and measured.
Performance receipts
Each layer lists its mobile Lighthouse performance and accessibility scores, measured with Lighthouse 13 on a simulated midrange phone over a slow 4G connection. Weight is the size of the layer’s own files, not counting fonts and CDN libraries. Product films load their frames lazily after first paint and only for the screen size in use.
Every layer also honours the reduced motion setting with a still or crossfade version, keeps real text in the DOM, and holds contrast in every state, not only at the top of the page.
| Layer | Kind | Mobile performance | Accessibility | Weight | Fidelity |
|---|---|---|---|---|---|
| Monolith Bloom | Scene | Measuring | 100 | 35 KB | 93 |
| Magnet Marquee | Section | Measuring | 100 | 35 KB | 99 |
| Liquid Pricing | Section | Measuring | Measuring | 34 KB | In review |
| Suspended Splash | Product film | 100 | 100 | 7.8 MB | In review |
| Material Shift | Product film | 99 | 100 | 3.8 MB | In review |
| Orbit & Explode | Product film | 99 | 100 | 7.6 MB | In review |
| Silk Mesh | Gradient | 100 | 100 | 41 KB | In review |
| Thread Process | Section | 100 | 100 | 44 KB | In review |
| Quote Constellation | Section | 100 | 100 | 46 KB | In review |
| Night Loom | Scene | 100 | 100 | 80 KB | In review |
| Halation | Gradient | 100 | 100 | 49 KB | In review |
| Sonar Field | Scene | 100 | 100 | 58 KB | In review |
| Pollen Drift | Scene | 100 | 100 | 132 KB | In review |
| Paper Atlas | Scene | 100 | 100 | 100 KB | In review |
| Cathedral Grid | Scene | 100 | 100 | 95 KB | In review |
| Clinic Noir | Template | 100 | 100 | 125 KB | In review |
| Signal Orchard | Scene | 100 | 100 | 66 KB | In review |
| Ferro Mark | Scene | 100 | 100 | 70 KB | In review |
| Launch Orchard | Template | 100 | 100 | 127 KB | In review |
| Chrome Script | Scene | 100 | 100 | 86 KB | In review |
| Ledger Swiss | Template | 100 | 100 | 115 KB | In review |
| Tidal Glass | Scene | 100 | 100 | 80 KB | In review |
Dusklayer MCP
The connector puts the library inside your coding agent: search layers by kind, tone and industry, read a layer’s parameters, fetch its prompt with a chosen look applied, and on Studio, fetch the source files and plan a whole page from one sentence. It is in testing now and opens with the launch for Pro and Studio, with free layers available to everyone.
Plans
Free layers come with the full prompt and all nine looks. Pro opens every layer and the connector. Studio adds the source files, the site planner and unlimited brand remix. See the pricing page for the full table.
Licence
Every layer is original work with invented brands. Your plan lets you use the layers, prompts and, on Studio, the source files in your own projects and in client work, as many as you like. You may not resell or redistribute them as layers, templates or prompts. The licence has the details, and the terms and refund policy cover plans and billing.
Support
Something wrong with a layer, or a question these docs do not answer: write through the contact page and we reply by email, usually within two working days. Every layer page also has a link to report a problem with that layer, which fills in the details for you.