SpatialSites
Sign inSign up
All kits
Download free

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 anyway
KIT 068 / logistics / sequence

Kettle First

A removals firm that packs a house the way it was lived in and unpacks it the same way

Download free
Open demo full screen

Specification

Enginesequence
Mobile fallbackposter-parallax
Placementcenter-mid
Hero cameradolly-in
Scroll camerapath-spline
Lightingstudio-3pt
Interactionsmagnetic-cta
Sectionschapter-1, chapter-2, chapter-3, chapter-4, rooms, said, costs, quote

Measured

LCP0.6s
GLB0.0 MB
JS245 KB

In the zip

  • .claude/skills/kit-adapt/SKILL.md
  • .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
  • assets/seq/seq-2/desktop/*.webp
  • assets/seq/seq-2/manifest.json
  • assets/seq/seq-2/mobile/*.webp
  • assets/seq/seq-3/desktop/*.webp
  • assets/seq/seq-3/manifest.json
  • assets/seq/seq-3/mobile/*.webp
  • assets/seq/seq-4/desktop/*.webp
  • assets/seq/seq-4/manifest.json
  • assets/seq/seq-4/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/index.html
  • site/package-lock.json
  • site/package.json
  • site/privacy.html
  • site/public/favicon.svg
  • site/scripts/check.mjs
  • site/scripts/copy-decoders.mjs
  • site/spec.json
  • site/src/config.ts
  • site/src/dom/sections.ts
  • site/src/fallback.ts
  • site/src/fonts.css
  • site/src/main.ts
  • site/src/prop-hero.ts
  • site/src/reference/camera-path.json
  • site/src/sequence-init.ts
  • site/src/sequence-worker.ts
  • site/src/sequence.ts
  • site/src/styles.css
  • site/src/tokens.css
  • site/src/webgl/camera-path.ts
  • site/src/webgl/interactions.ts
  • site/src/webgl/scene.ts
  • site/terms.html
  • site/tsconfig.json
  • site/vite.config.ts
  • spec.json

Works with

ChatGPT SitesClaude CodeCursorLovableReplit
ToolTested with
ChatGPT SitesSet in config
Claude CodeSet in config
CursorSet in config
LovableDefault agent
ReplitDefault 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/src/webgl/.

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: open Claude Code in this folder and say "use kit-adapt to change the paint colour to #hex and the headline to ...". The skill in .claude/skills/kit-adapt edits tokens.json and spec.json and re-renders.

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 a single-page logistics website for "Kettle First" (Kettle First) from the files in this folder. The structure is in spec.json; do not invent one. This brief is written for a coding agent: every value below is exact, and the DO NOT ADD list is not negotiable.

READ FIRST
- spec.json (engine, sections, chapters and beats, interactions, budgets)
- reference/tokens.json (all colours, fonts, spacing and motion; never hardcode a value that exists here)
- reference/layout.png (subject bounding box and text safe area)
- reference/interaction-map.md (pointer and scroll behaviours with phone and reduced-motion substitutes)
- assets/seq/ (the film frames; never re-encode them)
- site/ (a working reference implementation; adapt it rather than rewriting it)

1. DEPENDENCIES AND SETUP
Get the full prompt free