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 anywayHeavy Haulage Film
Heavy haulage film page: one film that plays as the page scrolls, then the business
Specification
| Engine | sequence |
| Mobile fallback | poster-parallax |
| Placement | center-mid |
| Hero camera | dolly-in |
| Scroll camera | path-spline |
| Lighting | studio-3pt |
| Interactions | magnetic-cta |
| Sections | chapter-1, trust, transport-solutions, industries, about, hauliers, contact |
Measured
| LCP | 0.4s |
| GLB | 0.0 MB |
| JS | 4 KB |
In the zip
- .cursor/rules/motion.mdc
- AGENTS.md
- CLAUDE.md
- LICENSE.txt
- START-HERE.md
- assets/poster.webp
- assets/seq/seq-1/desktop/*.webp
- assets/seq/seq-1/manifest.json
- assets/seq/seq-1/mobile/*.webp
- prompts/chatgpt-sites.md
- prompts/claude-code.md
- prompts/cursor.md
- prompts/lovable.md
- prompts/replit.md
- reference/camera-path.json
- reference/depth.webp
- reference/interaction-map.md
- reference/layout.png
- reference/scene-brief.json
- reference/tokens.json
- site/assets/fonts/archivo-latin-wght-normal.woff2
- site/assets/fonts/ibm-plex-mono-latin-500-normal.woff2
- site/assets/fonts/instrument-sans-latin-wght-normal.woff2
- site/assets/poster.webp
- site/assets/site.css
- site/assets/site.js
- site/favicon.svg
- site/index.html
- site/package.json
- site/prebuilt
- site/spec.json
- site/src/main.ts
- spec.json
Works with
| 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.
Start here
The readme that ships in the zip.
The short way
Drag this folder into Claude Code, Codex, Cursor or whichever coding agent you use, and say:
Build this site
That is it. The agent reads AGENTS.md and CLAUDE.md in this folder on its own, finds the reference build in
site/, and gets on with it. Drag the folder rather than the zip: most agents will not look inside a zip.
To make it yours, say what you want in the same breath: "Build this site, call it Halden Joinery, and make the accent colour a deep green." It will change the copy and the tokens for you.
If you would rather do it by hand
Run the reference build as it is: cd site && npm install && npm run dev, then open the local URL.
Or take one piece into a site you already have: ask your agent to "use the hero from this kit inside my existing
site" and point it at site/index.html and site/assets/site.js.
Tool specific prompts, if you want more control
These are longer and more prescriptive than "build this site". Use them when you want the agent held to a particular order of work.
| Tool | File | Where to paste | Recommended model |
|---|---|---|---|
| ChatGPT | prompts/chatgpt-sites.md | Codex or ChatGPT Work, not the plain chat window | Set in config |
| Claude Code | prompts/claude-code.md | Terminal in this folder | Set in config |
| Cursor | prompts/cursor.md | Agent panel, this folder open | Set in config |
| Lovable | prompts/lovable.md | Knowledge file first, then chat | Default agent |
| Replit | prompts/replit.md | Agent, after uploading the folder | Default agent |
Customising: tell your agent what to change. The copy is in site/index.html, the colours and type are the variables at the top of site/assets/site.css, and site/assets/site.js explains how the page moves.
Copy: written for a fictional business as a demonstration. Replace every name, headline and figure with your own before launch. Licence: see LICENSE.txt. One end product per licence. Do not redistribute the prompts or assets.
The prompt
The opening of the prompt. The full text, with the assets it refers to, comes with the download.
# ChatGPT (Codex or ChatGPT Work with Sites) Paste this into Codex or ChatGPT Work, not the plain chat window. Sites needs the agent runtime. Open or upload this kit folder first so the agent can read spec.json, reference/ and assets/. Sites is available on Plus, Pro, Business and Enterprise plans (UK and EEA included since July 2026), not on Free or Go. Recommended model: Set in config. @Sites Build and publish a website from the files in this folder. Publish visibility: anyone with the link. Keep assets/ in the project and reference them relatively. Then follow the PROJECT brief below exactly. PROJECT Build the single-page website for "Northgate Haulage" (Heavy Haulage Film) that is already in site/. It is a finished page: site/index.html is the page, site/assets/site.css its only stylesheet and site/assets/site.js its only script, with its fonts self-hosted in site/assets/fonts and the film's frames in site/assets/seq (npm run dev and npm run build copy them there from ../assets/seq). There is no framework and no build step. Serve it as it is unless the person asks for a framework; if you move it into one, keep every behaviour, value and breakpoint exactly as the page has them. READ FIRST - site/index.html: the sections in order, with all of their copy - site/assets/site.css: every colour, size and breakpoint, as variables on :root - site/assets/site.js: the behaviour; its opening comment explains how the film follows the scroll - spec.json: the sections, the film and its lines of copy, as data WHAT IS ON THE PAGE 1. #chapter-1. The film: pinned for 820vh, 212 frames drawn on a canvas as it scrolls. Its lines of copy by scroll progress: