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 012 / product / sequence

Rushlight Pillar

A beeswax pillar candle from a one product candle maker

Download
Open demo full screen

Specification

Enginesequence + kinetic-type
Mobile fallbackposter-parallax
Placementright-mid
Hero cameraorbit-slow
Scroll cameradolly-out-reveal
Lightingstudio-3pt
Interactionsmagnetic-cta, hover-play
Sectionshero, options, look, made, care, enquire

Measured

LCP0.3s
GLB0.0 MB
JS236 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/candle/desktop/*.webp
  • assets/seq/candle/manifest.json
  • assets/seq/candle/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/reference/camera-path.json
  • site/src/sequence-init.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 product website titled "Rushlight Pillar" from the files in this folder. Do not invent structure; the structure is in spec.json.

READ FIRST
- spec.json (layout, engine, camera, interactions, sections, budgets)
- reference/tokens.json (all colours, fonts, spacing, motion durations; never hardcode values that exist here)
- reference/layout.png (subject bounding box and text safe area)
- reference/camera-path.json (scroll camera keyframes)
- reference/scene-brief.json (how the 3D scene was staged: subject size, lights, hero camera)
- reference/interaction-map.md (pointer and scroll behaviours with mobile and reduced-motion substitutes)
- site/ (a working reference implementation; prefer adapting it to rewriting it)
Get the full prompt free