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 anywayVEIL/09
A cinematic scroll site where one pleated acoustic textile unfolds from object to threshold to room-scale canopy.
Specification
| Engine | sequence |
| Mobile fallback | poster with CSS parallax |
In the zip
- veil-09-codex-package/
- veil-09-codex-package/spec.json
- veil-09-codex-package/.cursor/
- veil-09-codex-package/.cursor/rules/
- veil-09-codex-package/.cursor/rules/motion.mdc
- veil-09-codex-package/START-HERE.md
- veil-09-codex-package/manifest.json
- veil-09-codex-package/production/
- veil-09-codex-package/production/transition-01-sealed-to-unfurl.txt
- veil-09-codex-package/production/frame-01-sealed.png
- veil-09-codex-package/production/frame-02-unfurl.png
- veil-09-codex-package/production/frame-03-canopy.png
- veil-09-codex-package/production/production-pack.md
- veil-09-codex-package/production/transition-02-unfurl-to-canopy.txt
- veil-09-codex-package/prompts/
- veil-09-codex-package/prompts/claude-code.md
- veil-09-codex-package/prompts/replit.md
- veil-09-codex-package/prompts/chatgpt-sites.md
- veil-09-codex-package/prompts/cursor.md
- veil-09-codex-package/prompts/lovable.md
- veil-09-codex-package/site/
- veil-09-codex-package/site/index.html
- veil-09-codex-package/site/app/
- veil-09-codex-package/site/app/layout.tsx
- veil-09-codex-package/site/app/page.tsx
- veil-09-codex-package/site/app/globals.css
- veil-09-codex-package/site/.oxlintrc.json
- veil-09-codex-package/site/next-env.d.ts
- veil-09-codex-package/site/public/
- veil-09-codex-package/site/public/images/
- veil-09-codex-package/site/public/images/frame-01-sealed.png
- veil-09-codex-package/site/public/images/frame-02-unfurl.png
- veil-09-codex-package/site/public/images/frame-03-canopy.png
- veil-09-codex-package/site/package-lock.json
- veil-09-codex-package/site/package.json
- veil-09-codex-package/site/components.json
- veil-09-codex-package/site/tsconfig.json
- veil-09-codex-package/site/.openai/
- veil-09-codex-package/site/.openai/hosting.json
- veil-09-codex-package/site/vite.config.ts
- veil-09-codex-package/site/.oxfmtrc.json
- veil-09-codex-package/site/favicon.svg
- veil-09-codex-package/site/next.config.ts
- veil-09-codex-package/site/src/
- veil-09-codex-package/site/src/main.ts
- veil-09-codex-package/AGENTS.md
- veil-09-codex-package/LICENSE.txt
- veil-09-codex-package/assets/
- veil-09-codex-package/assets/poster.webp
- veil-09-codex-package/CLAUDE.md
- veil-09-codex-package/reference/
- veil-09-codex-package/reference/camera-path.json
- veil-09-codex-package/reference/layout.png
- veil-09-codex-package/reference/tokens.json
- veil-09-codex-package/reference/interaction-map.md
Works with
| Tool | Tested with |
|---|---|
| OpenAI Sites | |
| ImageGen | |
| React | |
| CSS |
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.
VEIL/09 is an original scroll-led concept site for a fictional architectural acoustic-textile system. It was designed and implemented with OpenAI Sites and uses three original generated keyframes—no stock photography or runtime image API.
Run the site
cd site
npm install
npm run dev
Open the local URL shown in the terminal. For a production build, run npm run build.
Package map
site/— complete Sites source and generated visual assets.production/— creative direction, continuity ledger, exact frame prompts, transition prompts and scroll map.manifest.json— storefront metadata used by the Codex publishing workflow.
The visual sequence is reversible and controlled by page scroll. Copy and navigation remain semantic HTML. If the visitor prefers reduced motion, decorative movement is suppressed without hiding content.
Adaptation guidance
Keep the camera, set, textile identity, graphite/ivory/vermilion palette and left-side copy field consistent. Replace copy and commercial details freely. If generating video transitions, use the supplied frame pairs and transition prompts as locked start/end anchors.
The prompt
The opening of the prompt. The full text, with the assets it refers to, comes with the download.
# Build or adapt VEIL/09 with ChatGPT Sites Use the existing site as the implementation base. Preserve the continuity-locked textile sequence and the editorial black/graphite/ivory/vermilion art direction. Keep the opening hero pinned and reversible: sealed monolith → S-curve threshold → overhead canopy. All navigation, headlines and descriptions must remain semantic live HTML. Retain responsive cropping and a useful reduced-motion experience. Before editing imagery, read `production/production-pack.md`. Use its exact image and transition prompts so the room, camera, textile material, pleat density, lighting and negative-space composition remain stable. Do not introduce stock photography, generic SaaS cards, glassmorphism, baked-in text, people, extra props or multicolour neon effects. Adapt the offer, copy and specification details to the new brand, then run the production build. The finished site should still feel like a spatial narrative rather than a conventional landing-page template.