Recorded on desktop
This one is built to be scrolled with a mouse on a wide screen. Here is what it does.
Open the live demo anywayKIT 003 / salon / layers-2d
Salon Editorial Layers
Depth layers and tilt for a high-contrast editorial salon page
Specification
| Engine | layers-2d + kinetic-type |
| Mobile fallback | poster-parallax |
| Placement | right-mid |
| Hero camera | pointer-parallax |
| Scroll camera | section-reveal |
| Lighting | clinical |
| Interactions | tilt-layers |
| Sections | hero, services, before-after, book |
Measured
| LCP | 0.9s |
| GLB | 0.0 MB |
| TRIS | 0 |
| DRAWS | 0 |
| JS | 140 KB |
In the zip
- START-HERE.md with 60 second run instructions
- prompts/ for ChatGPT (Codex or Work with @Sites), Claude Code, Cursor, Lovable, Replit
- AGENTS.md, CLAUDE.md and .cursor/rules so every agent reads the same rules
- spec.json, tokens.json, layout.png, camera-path.json, interaction-map.md
- assets/: compressed GLB, poster, HDR, layers
- site/: working Vite boilerplate with the layer model
- kit-adapt skill for changing subject, palette and copy
- LICENSE.txt in your name
Works with
ChatGPT SitesClaude CodeCursorLovableReplit
| Tool | Tested with |
|---|---|
| ChatGPT Sites | Set in config |
| Claude Code | Set in config |
| Cursor | Set in config |
| Lovable | Default agent |
| Replit | Default agent |
Licence
One end product per kit on Free, Single and Builder. Agency licence on Studio and Lifetime. No redistribution of prompts or assets. Full terms.