SpatialSites
Sign inSign up
All kits
Download

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 061 / food / sequence

Croze

A cooperage raising and firing oak casks to order

Download
Open demo full screen

Specification

Enginesequence
Mobile fallbackposter-parallax
Placementleft-mid
Hero cameradolly-out-reveal
Scroll camerasection-reveal
Lightingnoir
Interactionsmagnetic-cta
Sectionschapter-1, toast, raising, sizes, asked, enquire

Measured

LCP0.7s
GLB0.0 MB
JS244 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
  • 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.

You have three ways to use this kit.

  1. Run the boilerplate as is: cd site && npm install && npm run dev. Open the local URL. This is the reference build.
  2. Rebuild it in your AI tool with your own copy and colours: open the prompt for your tool in prompts/, paste it, and keep this folder open so the tool can read spec.json, reference/ and assets/.
  3. Adapt only parts: ask your tool to "use the hero from this kit inside my existing site" and point it at site/src/webgl/.

Which tool, which file:

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 food website for "Croze" (Croze) 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