Chadbox landing page
Marketing site for Chadbox, the sandbox for running untrusted code. It's plain HTML, CSS and JavaScript, with no framework, no dependencies and no build step.
Run it locally
Open index.html in a browser, or serve the folder:
npx serve .
# or
python3 -m http.server 8080
Deploy
The folder deploys as-is to any static host. On Vercel, import the repo and leave the framework preset on "Other": there's no build command and the output directory is the project root.
Project structure
.
├── index.html Page markup. Each section is labelled with an HTML comment.
├── css/
│ └── styles.css All styles. Design tokens live in :root at the top.
└── js/
├── iso.js Isometric scene engine: draws and animates the illustrations.
├── main.js Page code: one numbered block per section.
└── game.js "Contain the breach", the full-screen pixel-art game below the footer.
Load order matters: iso.js defines window.ChadboxIso, and main.js reads from it. game.js stands alone and loads last.
Common edits
Colours and fonts. Change the tokens in :root at the top of css/styles.css. --accent (amber) drives every highlight, including the illustrations.
Copy. All text is in index.html. Labels inside the illustrations (for example 'Sealed box', 'Code in') are in the labels arrays in js/main.js; CSS displays them in uppercase.
Illustrations. Every scene is a spec object passed to new Scene(host, spec) in js/main.js. The format, the part types and the animation API are documented at the top of js/iso.js. For example, a sealed box holding code on a small grid:
new Scene(document.getElementById('my-host'), {
k: 26, grid: 1, alt: 'A sealed box with code inside',
items: sealed('box', 0, 0, 0.6, 1.2)
});
Motion. Timelines are functions of t (0 to 1) handed to play(). Loops only run while on screen. Visitors with "reduce motion" turned on see a still frame, set by still.
Get started code samples. The cURL, Python and local-install snippets are the three <pre class="code-block"> elements in the #start section. Visitors can edit them; they reset when focus leaves. Their footer text lives in the meta object in block 10 of js/main.js.
Before launch
