Autonomous Intelligence AI Robot AI website prompt
Cinematic scroll driven landing page where a 126 frame AI robot assembles itself as you scroll, with live theme shifts, spec bento, signal pipeline and an auto typing command field.
Now put it in WordPress
You have a site. Now make it yours.
An AI build hands you a front end and stops there. No CMS, no client login, no real ownership: you cannot hand it over, and you cannot change it without going back and re-prompting. UiChemy turns that build into native, editable WordPress you own, in the builder you already use.
Bolt to WordPressClaude to WordPressCodex to WordPressCursor to WordPressLovable to WordPressv0 to WordPressAI to WordPress
Get Started
More prompts
Showing 6 prompts
Frequently asked questions
What does the Autonomous Intelligence AI Robot prompt build?
Cinematic scroll driven landing page where a 126 frame AI robot assembles itself as you scroll, with live theme shifts, spec bento, signal pipeline and an auto typing command field.
Which AI tools does the Autonomous Intelligence AI Robot prompt work with?
It's written for Claude. Paste the whole prompt into Claude and it builds the complete site for you, then bring the result into WordPress with UiChemy. This prompt also has a WordPress version: with the UiChemy MCP connected, Claude builds the page straight into WordPress.
How do I turn the result into a WordPress site?
After the AI builds your site, UiChemy Composer rebuilds it as native, editable WordPress in Elementor or Gutenberg (Bricks coming soon) — you own it and edit it in your builder. See AI to WordPress.
Is the Autonomous Intelligence AI Robot prompt free?
Yes — it's free to copy, no account needed.
Can I edit the website after it's built?
Yes. Once it's in WordPress with UiChemy, every section is native and editable — no re-prompting, no lock-in.
Copy prompt
Copy code
Coming soon
Copy SKILL.md
Coming soon
Autonomous Intelligence AI Robot · Section prompt
# MASTER PROMPT — Autonomous Intelligence — AI Robot
### Plain HTML, CSS and JavaScript. No WordPress, no page builder, no framework, no build step.
## ▶ HOW TO USE THIS PROMPT
**Paste this whole document into Claude. Nothing to attach.** It carries the complete source of the site plus the address of every image, so Claude can assemble a folder that owns its own assets and hand it back as a zip.
**INSTRUCTION TO CLAUDE — BUILD IT, DO NOT ASK.** Every decision is already made in this document. Do not stop to ask the user questions, do not offer options, and do not ask for confirmation before starting. Write the files, zip them, hand over the archive, then report what you built.
1. Create a folder named `axiom-001-robot-scroll` and write out every file in the appendix below **exactly as written** — do not reformat, rename, shorten, reorder or "improve" anything.
2. **Download the 126 images and 3 fonts into `assets/`.** The code already points at `assets/…` — nothing in it references a remote host. Run this from inside the folder; it reads the ASSET MANIFEST at the end of this document:
```bash
mkdir -p assets
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-001.webp' -o 'assets/axiom-frame-001.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-002.webp' -o 'assets/axiom-frame-002.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-003.webp' -o 'assets/axiom-frame-003.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-004.webp' -o 'assets/axiom-frame-004.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-005.webp' -o 'assets/axiom-frame-005.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-006.webp' -o 'assets/axiom-frame-006.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-007.webp' -o 'assets/axiom-frame-007.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-008.webp' -o 'assets/axiom-frame-008.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-009.webp' -o 'assets/axiom-frame-009.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-010.webp' -o 'assets/axiom-frame-010.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-011.webp' -o 'assets/axiom-frame-011.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-012.webp' -o 'assets/axiom-frame-012.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-013.webp' -o 'assets/axiom-frame-013.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-014.webp' -o 'assets/axiom-frame-014.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-015.webp' -o 'assets/axiom-frame-015.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-016.webp' -o 'assets/axiom-frame-016.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-017.webp' -o 'assets/axiom-frame-017.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-018.webp' -o 'assets/axiom-frame-018.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-019.webp' -o 'assets/axiom-frame-019.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-020.webp' -o 'assets/axiom-frame-020.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-021.webp' -o 'assets/axiom-frame-021.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-022.webp' -o 'assets/axiom-frame-022.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-023.webp' -o 'assets/axiom-frame-023.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-024.webp' -o 'assets/axiom-frame-024.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-025.webp' -o 'assets/axiom-frame-025.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-026.webp' -o 'assets/axiom-frame-026.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-027.webp' -o 'assets/axiom-frame-027.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-028.webp' -o 'assets/axiom-frame-028.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-029.webp' -o 'assets/axiom-frame-029.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-030.webp' -o 'assets/axiom-frame-030.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-031.webp' -o 'assets/axiom-frame-031.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-032.webp' -o 'assets/axiom-frame-032.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-033.webp' -o 'assets/axiom-frame-033.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-034.webp' -o 'assets/axiom-frame-034.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-035.webp' -o 'assets/axiom-frame-035.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-036.webp' -o 'assets/axiom-frame-036.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-037.webp' -o 'assets/axiom-frame-037.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-038.webp' -o 'assets/axiom-frame-038.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-039.webp' -o 'assets/axiom-frame-039.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-040.webp' -o 'assets/axiom-frame-040.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-041.webp' -o 'assets/axiom-frame-041.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-042.webp' -o 'assets/axiom-frame-042.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-043.webp' -o 'assets/axiom-frame-043.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-044.webp' -o 'assets/axiom-frame-044.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-045.webp' -o 'assets/axiom-frame-045.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-046.webp' -o 'assets/axiom-frame-046.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-047.webp' -o 'assets/axiom-frame-047.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-048.webp' -o 'assets/axiom-frame-048.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-049.webp' -o 'assets/axiom-frame-049.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-050.webp' -o 'assets/axiom-frame-050.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-051.webp' -o 'assets/axiom-frame-051.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-052.webp' -o 'assets/axiom-frame-052.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-053.webp' -o 'assets/axiom-frame-053.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-054.webp' -o 'assets/axiom-frame-054.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-055.webp' -o 'assets/axiom-frame-055.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-056.webp' -o 'assets/axiom-frame-056.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-057.webp' -o 'assets/axiom-frame-057.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-058.webp' -o 'assets/axiom-frame-058.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-059.webp' -o 'assets/axiom-frame-059.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-060.webp' -o 'assets/axiom-frame-060.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-061.webp' -o 'assets/axiom-frame-061.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-062.webp' -o 'assets/axiom-frame-062.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-063.webp' -o 'assets/axiom-frame-063.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-064.webp' -o 'assets/axiom-frame-064.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-065.webp' -o 'assets/axiom-frame-065.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-066.webp' -o 'assets/axiom-frame-066.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-067.webp' -o 'assets/axiom-frame-067.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-068.webp' -o 'assets/axiom-frame-068.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-069.webp' -o 'assets/axiom-frame-069.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-070.webp' -o 'assets/axiom-frame-070.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-071.webp' -o 'assets/axiom-frame-071.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-072.webp' -o 'assets/axiom-frame-072.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-073.webp' -o 'assets/axiom-frame-073.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-074.webp' -o 'assets/axiom-frame-074.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-075.webp' -o 'assets/axiom-frame-075.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-076.webp' -o 'assets/axiom-frame-076.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-077.webp' -o 'assets/axiom-frame-077.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-078.webp' -o 'assets/axiom-frame-078.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-079.webp' -o 'assets/axiom-frame-079.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-080.webp' -o 'assets/axiom-frame-080.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-081.webp' -o 'assets/axiom-frame-081.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-082.webp' -o 'assets/axiom-frame-082.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-083.webp' -o 'assets/axiom-frame-083.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-084.webp' -o 'assets/axiom-frame-084.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-085.webp' -o 'assets/axiom-frame-085.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-086.webp' -o 'assets/axiom-frame-086.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-087.webp' -o 'assets/axiom-frame-087.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-088.webp' -o 'assets/axiom-frame-088.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-089.webp' -o 'assets/axiom-frame-089.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-090.webp' -o 'assets/axiom-frame-090.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-091.webp' -o 'assets/axiom-frame-091.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-092.webp' -o 'assets/axiom-frame-092.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-093.webp' -o 'assets/axiom-frame-093.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-094.webp' -o 'assets/axiom-frame-094.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-095.webp' -o 'assets/axiom-frame-095.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-096.webp' -o 'assets/axiom-frame-096.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-097.webp' -o 'assets/axiom-frame-097.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-098.webp' -o 'assets/axiom-frame-098.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-099.webp' -o 'assets/axiom-frame-099.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-100.webp' -o 'assets/axiom-frame-100.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-101.webp' -o 'assets/axiom-frame-101.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-102.webp' -o 'assets/axiom-frame-102.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-103.webp' -o 'assets/axiom-frame-103.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-104.webp' -o 'assets/axiom-frame-104.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-105.webp' -o 'assets/axiom-frame-105.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-106.webp' -o 'assets/axiom-frame-106.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-107.webp' -o 'assets/axiom-frame-107.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-108.webp' -o 'assets/axiom-frame-108.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-109.webp' -o 'assets/axiom-frame-109.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-110.webp' -o 'assets/axiom-frame-110.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-111.webp' -o 'assets/axiom-frame-111.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-112.webp' -o 'assets/axiom-frame-112.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-113.webp' -o 'assets/axiom-frame-113.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-114.webp' -o 'assets/axiom-frame-114.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-115.webp' -o 'assets/axiom-frame-115.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-116.webp' -o 'assets/axiom-frame-116.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-117.webp' -o 'assets/axiom-frame-117.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-118.webp' -o 'assets/axiom-frame-118.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-119.webp' -o 'assets/axiom-frame-119.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-120.webp' -o 'assets/axiom-frame-120.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-121.webp' -o 'assets/axiom-frame-121.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-122.webp' -o 'assets/axiom-frame-122.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-123.webp' -o 'assets/axiom-frame-123.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-124.webp' -o 'assets/axiom-frame-124.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-125.webp' -o 'assets/axiom-frame-125.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-126.webp' -o 'assets/axiom-frame-126.webp'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-oxanium.woff2' -o 'assets/axiom-oxanium.woff2'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-manrope.woff2' -o 'assets/axiom-manrope.woff2'
curl -fsSL 'https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-jetbrains-mono.woff2' -o 'assets/axiom-jetbrains-mono.woff2'
```
Then check every file arrived and none is a zero-byte or HTML error page:
```bash
ls assets | wc -l # expect 129 files
find assets -size -1k # expect no output
```
If any download fails, retry it — hosts occasionally drop a request. Do **not** fall back to hotlinking the remote URL: the whole point is a folder that works offline.
3. **Zip that folder and give the user the archive.** Its contents:
```
axiom-001-robot-scroll/
index.html
app.js
style.css
assets/
axiom-frame-001.webp
axiom-frame-002.webp
axiom-frame-003.webp
axiom-frame-004.webp
… 125 more
```
```bash
zip -r axiom-001-robot-scroll.zip axiom-001-robot-scroll -x '*.DS_Store'
```
Then hand over `axiom-001-robot-scroll.zip` as a file the user can download, not as text in the chat.
4. Before handing it over, serve the folder and confirm it runs:
```bash
cd axiom-001-robot-scroll && python3 -m http.server 8000 # then open http://localhost:8000
```
Check the page renders, the images load from `assets/` with the network throttled or offline, and scrolling drives the animations.
The finished folder needs no network for its images — they are in `assets/`; only the motion libraries load from a CDN.
Do not rebuild the design from the description below. The description is there so a person can understand and edit the code. The appendix is the deliverable.
---
## ▶ WHAT YOU GET
Scrolling assembles intelligence — a cinematic AI robot experience.
**3 code files plus an `assets/` folder holding 126 images and 3 fonts, delivered as `axiom-001-robot-scroll.zip`.**
| File | What it is |
|---|---|
| `index.html` | a page, 18 KB |
| `app.js` | the script, 28 KB |
| `style.css` | the stylesheet, 41 KB |
| `assets/` | 126 images and 3 fonts, downloaded at build time |
**Libraries, from a CDN, already referenced in the HTML:** `gsap.min.js`, `ScrollTrigger.min.js`, `lenis.min.js`. No npm install, no bundler, no framework.
**Sections (4):** `#system` · `#specs` · `#pipeline` · `#interface`.
---
## ▶ WHERE THE MEDIA COMES FROM
All 129 files (126 images and 3 fonts) live in `assets/` inside the folder, and every reference in the markup, the CSS and the script is a relative `assets/…` path. Once the folder is assembled it owns its own media: no CDN, no media library, no external image host. Open it on a laptop with the wifi off and every image and font still loads (only GSAP, ScrollTrigger and Lenis come from jsDelivr).
They are fetched **once, at build time**, from the WordPress media library on `demo.uichemy.com` — the same `axiom-frame-001.webp` … `axiom-frame-126.webp` and `axiom-*.woff2` files the WordPress build of this page uses. That is only how they travel into the folder; nothing in the delivered code points back at that host. Replacing an image means dropping a new file into `assets/` under the same name.
The manifest at the end of this document lists every source URL against the filename it is saved as, so the download step is reproducible and checkable.
---
## ▶ HOW THE MOTION IS PUT TOGETHER
Nearly every visual effect is scroll-driven: 16 GSAP calls and 4 ScrollTrigger attachments.
- Reveals generally run both ways, so scrolling back up replays them in reverse rather than leaving them finished.
- Pinned sections own their scroll distance in the markup, so the document height is authored rather than grown by script.
- `prefers-reduced-motion` is honoured: every animated block checks it and falls back to the finished state, so the page stays readable with motion off.
- The numbers are inline — durations, eases, stagger, parallax speeds. There is no config layer and no control panel; it is plain GSAP.
---
## ▶ WHAT THIS PROMPT DELIBERATELY DOES NOT CONTAIN
- No WordPress, no page builder, and none of the wrapper classes or compatibility CSS a builder needs. The WordPress build is a separate prompt.
- No framework, no TypeScript, no bundler, no `package.json`.
- No backend. Any form here validates and replies in place; it posts nowhere.
- No CMS. The content lives in the files.
- No external image host. The images ship inside the zip; nothing in the code calls out to a media library at runtime.
---
## ASSET MANIFEST — download these into `assets/`
Source is the media library on `demo.uichemy.com`. Save each one under the name in the second column; the code already refers to it by that name.
| Download from | Save as |
|---|---|
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-001.webp` | `assets/axiom-frame-001.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-002.webp` | `assets/axiom-frame-002.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-003.webp` | `assets/axiom-frame-003.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-004.webp` | `assets/axiom-frame-004.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-005.webp` | `assets/axiom-frame-005.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-006.webp` | `assets/axiom-frame-006.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-007.webp` | `assets/axiom-frame-007.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-008.webp` | `assets/axiom-frame-008.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-009.webp` | `assets/axiom-frame-009.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-010.webp` | `assets/axiom-frame-010.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-011.webp` | `assets/axiom-frame-011.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-012.webp` | `assets/axiom-frame-012.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-013.webp` | `assets/axiom-frame-013.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-014.webp` | `assets/axiom-frame-014.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-015.webp` | `assets/axiom-frame-015.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-016.webp` | `assets/axiom-frame-016.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-017.webp` | `assets/axiom-frame-017.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-018.webp` | `assets/axiom-frame-018.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-019.webp` | `assets/axiom-frame-019.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-020.webp` | `assets/axiom-frame-020.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-021.webp` | `assets/axiom-frame-021.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-022.webp` | `assets/axiom-frame-022.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-023.webp` | `assets/axiom-frame-023.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-024.webp` | `assets/axiom-frame-024.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-025.webp` | `assets/axiom-frame-025.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-026.webp` | `assets/axiom-frame-026.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-027.webp` | `assets/axiom-frame-027.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-028.webp` | `assets/axiom-frame-028.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-029.webp` | `assets/axiom-frame-029.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-030.webp` | `assets/axiom-frame-030.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-031.webp` | `assets/axiom-frame-031.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-032.webp` | `assets/axiom-frame-032.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-033.webp` | `assets/axiom-frame-033.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-034.webp` | `assets/axiom-frame-034.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-035.webp` | `assets/axiom-frame-035.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-036.webp` | `assets/axiom-frame-036.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-037.webp` | `assets/axiom-frame-037.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-038.webp` | `assets/axiom-frame-038.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-039.webp` | `assets/axiom-frame-039.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-040.webp` | `assets/axiom-frame-040.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-041.webp` | `assets/axiom-frame-041.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-042.webp` | `assets/axiom-frame-042.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-043.webp` | `assets/axiom-frame-043.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-044.webp` | `assets/axiom-frame-044.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-045.webp` | `assets/axiom-frame-045.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-046.webp` | `assets/axiom-frame-046.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-047.webp` | `assets/axiom-frame-047.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-048.webp` | `assets/axiom-frame-048.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-049.webp` | `assets/axiom-frame-049.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-050.webp` | `assets/axiom-frame-050.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-051.webp` | `assets/axiom-frame-051.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-052.webp` | `assets/axiom-frame-052.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-053.webp` | `assets/axiom-frame-053.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-054.webp` | `assets/axiom-frame-054.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-055.webp` | `assets/axiom-frame-055.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-056.webp` | `assets/axiom-frame-056.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-057.webp` | `assets/axiom-frame-057.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-058.webp` | `assets/axiom-frame-058.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-059.webp` | `assets/axiom-frame-059.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-060.webp` | `assets/axiom-frame-060.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-061.webp` | `assets/axiom-frame-061.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-062.webp` | `assets/axiom-frame-062.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-063.webp` | `assets/axiom-frame-063.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-064.webp` | `assets/axiom-frame-064.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-065.webp` | `assets/axiom-frame-065.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-066.webp` | `assets/axiom-frame-066.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-067.webp` | `assets/axiom-frame-067.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-068.webp` | `assets/axiom-frame-068.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-069.webp` | `assets/axiom-frame-069.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-070.webp` | `assets/axiom-frame-070.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-071.webp` | `assets/axiom-frame-071.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-072.webp` | `assets/axiom-frame-072.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-073.webp` | `assets/axiom-frame-073.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-074.webp` | `assets/axiom-frame-074.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-075.webp` | `assets/axiom-frame-075.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-076.webp` | `assets/axiom-frame-076.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-077.webp` | `assets/axiom-frame-077.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-078.webp` | `assets/axiom-frame-078.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-079.webp` | `assets/axiom-frame-079.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-080.webp` | `assets/axiom-frame-080.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-081.webp` | `assets/axiom-frame-081.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-082.webp` | `assets/axiom-frame-082.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-083.webp` | `assets/axiom-frame-083.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-084.webp` | `assets/axiom-frame-084.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-085.webp` | `assets/axiom-frame-085.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-086.webp` | `assets/axiom-frame-086.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-087.webp` | `assets/axiom-frame-087.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-088.webp` | `assets/axiom-frame-088.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-089.webp` | `assets/axiom-frame-089.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-090.webp` | `assets/axiom-frame-090.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-091.webp` | `assets/axiom-frame-091.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-092.webp` | `assets/axiom-frame-092.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-093.webp` | `assets/axiom-frame-093.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-094.webp` | `assets/axiom-frame-094.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-095.webp` | `assets/axiom-frame-095.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-096.webp` | `assets/axiom-frame-096.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-097.webp` | `assets/axiom-frame-097.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-098.webp` | `assets/axiom-frame-098.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-099.webp` | `assets/axiom-frame-099.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-100.webp` | `assets/axiom-frame-100.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-101.webp` | `assets/axiom-frame-101.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-102.webp` | `assets/axiom-frame-102.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-103.webp` | `assets/axiom-frame-103.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-104.webp` | `assets/axiom-frame-104.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-105.webp` | `assets/axiom-frame-105.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-106.webp` | `assets/axiom-frame-106.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-107.webp` | `assets/axiom-frame-107.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-108.webp` | `assets/axiom-frame-108.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-109.webp` | `assets/axiom-frame-109.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-110.webp` | `assets/axiom-frame-110.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-111.webp` | `assets/axiom-frame-111.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-112.webp` | `assets/axiom-frame-112.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-113.webp` | `assets/axiom-frame-113.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-114.webp` | `assets/axiom-frame-114.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-115.webp` | `assets/axiom-frame-115.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-116.webp` | `assets/axiom-frame-116.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-117.webp` | `assets/axiom-frame-117.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-118.webp` | `assets/axiom-frame-118.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-119.webp` | `assets/axiom-frame-119.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-120.webp` | `assets/axiom-frame-120.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-121.webp` | `assets/axiom-frame-121.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-122.webp` | `assets/axiom-frame-122.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-123.webp` | `assets/axiom-frame-123.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-124.webp` | `assets/axiom-frame-124.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-125.webp` | `assets/axiom-frame-125.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-frame-126.webp` | `assets/axiom-frame-126.webp` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-oxanium.woff2` | `assets/axiom-oxanium.woff2` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-manrope.woff2` | `assets/axiom-manrope.woff2` |
| `https://demo.uichemy.com/wp-content/uploads/2026/09/axiom-jetbrains-mono.woff2` | `assets/axiom-jetbrains-mono.woff2` |
---
# APPENDIX · VERBATIM SOURCE
The complete source of every file. **Write them out exactly** — do not change a value, a comment, a class name, or the order of a declaration. Recreate this file layout:
```
index.html
app.js
style.css
```
## `index.html`
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Autonomous Intelligence — AI Robot</title>
<meta name="description" content="Scrolling assembles intelligence — a cinematic AI robot experience." />
<!-- Preload the very first frame so it can paint immediately -->
<link rel="preload" as="image" href="assets/axiom-frame-001.webp" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="axiom-robot">
<header class="nav">
<div class="nav__inner container">
<a class="nav__brand" href="#top" aria-label="AI 001 — home">
<svg class="nav__logo" width="30" height="30" viewBox="0 0 32 32" fill="none" aria-hidden="true">
<rect x="3.5" y="8" width="25" height="16" rx="6" stroke="currentColor" stroke-width="2" />
<circle class="nav__eye" cx="12" cy="16" r="2.7" />
<circle class="nav__eye" cx="20" cy="16" r="2.7" />
<path d="M16 8V4.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
<circle cx="16" cy="3" r="1.6" fill="currentColor" />
</svg>
<span class="nav__wordmark">AXIOM<span class="nav__wordmark-num">001</span></span>
</a>
<nav class="nav__links mono">
<a href="#system">SYSTEM</a>
<a href="#capabilities">CAPABILITIES</a>
<a href="#interface">INTERFACE</a>
</nav>
<div class="nav__right">
<a class="nav__enter mono" href="#interface">
ENTER <span aria-hidden="true">→</span>
</a>
<button class="nav__toggle" aria-label="Open menu" aria-expanded="false"><span></span><span></span></button>
</div>
</div>
</header>
</div>
<div class="axiom-robot" id="top">
<!-- Unsharp-mask filter to crisp up the upscaled robot frames -->
<svg width="0" height="0" style="position:absolute" aria-hidden="true">
<filter id="robot-sharpen">
<feConvolveMatrix order="3" preserveAlpha="true" kernelMatrix="0 -0.35 0 -0.35 2.4 -0.35 0 -0.35 0" />
</filter>
</svg>
<section class="robot-sequence" id="system">
<div class="robot-sticky">
<canvas class="robot-canvas" aria-hidden="true"></canvas>
<!-- Layered HTML content — the meaningful, accessible copy. -->
<div class="stage-layer">
<!-- Stage 01 — Frames 001-025 — Hero -->
<div class="stage stage--hero" data-stage="hero" aria-hidden="false">
<div class="scrim scrim--left" aria-hidden="true"></div>
<div class="hero-block">
<p class="hero-eyebrow mono">
<span class="dot"></span> Autonomous Intelligence / 01
</p>
<h1 class="hero-title display" aria-label="Intelligence takes shape.">
<span class="tw-line"></span>
<br />
<span class="tw-line"> </span>
</h1>
<p class="hero-body">
Vision. Memory. Reasoning. Action. Separate capabilities become one
intelligent system.
</p>
</div>
<p class="hero-scroll mono">Scroll to assemble ↓</p>
<aside class="hero-card">
<p class="hero-card__eyebrow mono"><span class="dot"></span> System spec</p>
<p class="hero-card__title display">42 systems,<br />one mind.</p>
<ul class="hero-card__rows mono">
<li><span>Sensors</span><span>42 fused</span></li>
<li><span>Inference</span><span>On-device</span></li>
<li><span>Control loop</span><span>8 ms</span></li>
</ul>
</aside>
</div>
<!-- Stage 02 — Frames 026-055 — Intelligence modules -->
<div class="stage stage--intel" data-stage="intelligence">
<div class="scrim scrim--topleft" aria-hidden="true"></div>
<div class="intel-heading">
<h2 class="intel-title display">
Intelligence is never
<br />
just one thing.
</h2>
</div>
<div class="card-grid">
<article class="card m--tl">
<span class="card__idx"><span class="dot"></span> 01</span>
<h3 class="card__title">VISION</h3>
<p class="card__body">Understand environments, objects and context.</p>
</article>
<article class="card m--tr">
<span class="card__idx"><span class="dot"></span> 02</span>
<h3 class="card__title">REASONING</h3>
<p class="card__body">Turn information into decisions.</p>
</article>
<article class="card m--bl">
<span class="card__idx"><span class="dot"></span> 03</span>
<h3 class="card__title">MEMORY</h3>
<p class="card__body">Retain knowledge across interactions.</p>
</article>
<article class="card m--br">
<span class="card__idx"><span class="dot"></span> 04</span>
<h3 class="card__title">ACTION</h3>
<p class="card__body">Transform decisions into outcomes.</p>
</article>
</div>
</div>
<!-- Stage 03 — Frames 056-085 — From components to intelligence -->
<div class="stage stage--assembly" data-stage="assembly">
<div class="scrim scrim--assembly" aria-hidden="true"></div>
<div class="assembly-words">
<div class="aword" data-word="0">
<span class="aword__count mono">01 / 03</span>
<span class="aword__text display">PERCEPTION</span>
</div>
<div class="aword" data-word="1">
<span class="aword__count mono">02 / 03</span>
<span class="aword__text display">REASONING</span>
</div>
<div class="aword" data-word="2">
<span class="aword__count mono">03 / 03</span>
<span class="aword__text display">ACTION</span>
</div>
</div>
</div>
<!-- Stage 04 — Frames 086-108 — One system, infinite missions -->
<div class="stage stage--capability" data-stage="capability">
<div class="scrim scrim--left" aria-hidden="true"></div>
<div class="cap-heading">
<h2 class="cap-title display">
One system.
<br />
Infinite missions.
</h2>
<p class="cap-lede">
AI adapts to the task instead of forcing the task to adapt.
</p>
</div>
<div class="card-grid">
<article class="card p--a">
<span class="card__idx"><span class="dot"></span> 01</span>
<h3 class="card__title">ANALYZE</h3>
<p class="card__body">Understand complex information.</p>
</article>
<article class="card p--b">
<span class="card__idx"><span class="dot"></span> 02</span>
<h3 class="card__title">CREATE</h3>
<p class="card__body">Transform ideas into output.</p>
</article>
<article class="card p--c">
<span class="card__idx"><span class="dot"></span> 03</span>
<h3 class="card__title">AUTOMATE</h3>
<p class="card__body">Turn repetition into systems.</p>
</article>
<article class="card p--d">
<span class="card__idx"><span class="dot"></span> 04</span>
<h3 class="card__title">COLLABORATE</h3>
<p class="card__body">Work alongside human intent.</p>
</article>
</div>
</div>
<!-- Stage 05 — Frames 109-126 — Future reveal -->
<div class="stage stage--reveal" data-stage="reveal">
<div class="scrim scrim--left" aria-hidden="true"></div>
<div class="reveal-block">
<p class="reveal-micro mono">Human ideas × Machine intelligence</p>
<h2 class="reveal-primary display">
The next system
<br />
is already taking shape.
</h2>
<p class="reveal-secondary">Build what comes next.</p>
<div class="reveal-ctas">
<a class="btn btn--ghost" href="#interface">
Explore AI
</a>
<a class="btn btn--solid" href="#interface">
Start Building <span aria-hidden="true">→</span>
</a>
</div>
</div>
</div>
</div>
<!-- Small persistent system micro-label. -->
<div class="sys-status mono" aria-hidden="true">
<span class="dot"></span> System online
</div>
<div class="loader" aria-hidden="true">
<div class="loader__inner">
<p class="loader__label mono">Initializing AI</p>
<div class="loader__bar">
<span class="loader__fill" style="width:6%"></span>
</div>
<p class="loader__pct mono">00%</p>
</div>
</div>
</div>
</section>
</div>
<div class="axiom-robot">
<section class="bento" id="specs">
<div class="container">
<header class="bento__head">
<p class="bento__eyebrow mono"><span class="dot"></span> Under the hood</p>
<h2 class="bento__title display">Engineered<br />to the edge.</h2>
<p class="bento__lede">
Every subsystem is fused into one body — sensing, compute and motion
working as a single reflex.
</p>
</header>
<div class="bento__grid">
<article class="bento__tile bento__tile--feature">
<span class="bento__idx mono"><span class="dot"></span> Core</span>
<h3 class="bento__tileTitle display">On-device neural core</h3>
<p class="bento__tileText">
Perception, planning and control run locally — no round-trip to the
cloud, no lag between seeing and doing.
</p>
<div class="bento__big">
<span class="bento__bigNum display">60</span>
<span class="bento__bigUnit mono">fps inference</span>
</div>
</article>
<article class="bento__tile bento__stat">
<span class="bento__num display">42</span>
<span class="bento__label mono">Sensors fused</span>
</article>
<article class="bento__tile bento__stat">
<span class="bento__num display">8<i>ms</i></span>
<span class="bento__label mono">Control loop</span>
</article>
<article class="bento__tile bento__stat">
<span class="bento__num display">18<i>h</i></span>
<span class="bento__label mono">Field endurance</span>
</article>
<article class="bento__tile bento__stat">
<span class="bento__num display">6<i>-DOF</i></span>
<span class="bento__label mono">Articulation</span>
</article>
<article class="bento__tile bento__stat">
<span class="bento__num display">IP67</span>
<span class="bento__label mono">Sealed chassis</span>
</article>
</div>
</div>
</section>
</div>
<div class="axiom-robot">
<section class="pipe" id="pipeline">
<div class="container">
<header class="pipe__head">
<p class="pipe__eyebrow mono"><span class="dot"></span> Signal path</p>
<h2 class="pipe__title display">From signal to action.</h2>
</header>
<ol class="pipe__track">
<span class="pipe__railbg" aria-hidden="true"></span>
<span class="pipe__rail" aria-hidden="true"></span>
<li class="pipe__step">
<span class="pipe__node" aria-hidden="true"></span>
<span class="pipe__n mono">01</span>
<h3 class="pipe__stepTitle display">Perceive</h3>
<p class="pipe__stepBody">Fuse stereo vision and LiDAR into one live depth model of the world.</p>
</li>
<li class="pipe__step">
<span class="pipe__node" aria-hidden="true"></span>
<span class="pipe__n mono">02</span>
<h3 class="pipe__stepTitle display">Reason</h3>
<p class="pipe__stepBody">Plan the next move on-device, weighing options in milliseconds.</p>
</li>
<li class="pipe__step">
<span class="pipe__node" aria-hidden="true"></span>
<span class="pipe__n mono">03</span>
<h3 class="pipe__stepTitle display">Act</h3>
<p class="pipe__stepBody">Drive closed-loop motion that adapts across any terrain.</p>
</li>
<li class="pipe__step">
<span class="pipe__node" aria-hidden="true"></span>
<span class="pipe__n mono">04</span>
<h3 class="pipe__stepTitle display">Learn</h3>
<p class="pipe__stepBody">Every rollout sharpens the next decision it makes.</p>
</li>
</ol>
</div>
</section>
</div>
<div class="axiom-robot">
<section class="command" id="interface">
<div class="container command__inner">
<p class="command__eyebrow mono"><span class="dot"></span> Interface / Direct</p>
<h2 class="command__title display">Give intelligence<br />a direction.</h2>
<div class="command__field" role="group" aria-label="Command input">
<span class="command__prompt mono">›</span>
<span class="command__text"><span class="command__placeholder">What should we build today?</span><span class="command__caret" aria-hidden="true"></span></span>
<span class="command__status mono status--idle"></span>
</div>
<ul class="command__utils mono" aria-label="Utilities">
<li>RESEARCH</li>
<li>CREATE</li>
<li>ANALYZE</li>
<li>AUTOMATE</li>
</ul>
</div>
</section>
</div>
<div class="axiom-robot">
<footer class="footer" id="capabilities">
<div class="footer__card">
<div class="footer__top">
<div class="footer__intro">
<p class="footer__logo display">Autonomous</p>
<p class="footer__desc">
Autonomous systems for the next generation of human–machine
collaboration — vision, memory, reasoning and action unified into
one intelligent system.
</p>
<div class="footer__socials">
<a href="#" aria-label="Facebook">
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M13.5 21v-7h2.35l.35-2.73H13.5V9.53c0-.79.22-1.33 1.35-1.33h1.44V5.76c-.25-.03-1.1-.11-2.1-.11-2.08 0-3.5 1.27-3.5 3.6v2.02H8.3V14h2.39v7h2.81z"/></svg>
</a>
<a href="#" aria-label="X">
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M17.5 3h3l-6.55 7.48L21.7 21h-5.86l-4.28-5.6L6.6 21H3.6l7-8L2.6 3h6l3.87 5.12L17.5 3zm-1.05 16h1.63L8.02 4.6H6.28L16.45 19z"/></svg>
</a>
<a href="#" aria-label="LinkedIn">
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M6.94 7.5a1.94 1.94 0 11-.02-3.88 1.94 1.94 0 01.02 3.88zM5.3 9h3.3v10.5H5.3V9zM10.4 9h3.1v1.43h.05c.43-.8 1.49-1.64 3.06-1.64 3.27 0 3.87 2.15 3.87 4.94v5.77h-3.3v-5.11c0-1.22-.02-2.79-1.7-2.79-1.7 0-1.96 1.33-1.96 2.7v5.2h-3.3V9z"/></svg>
</a>
<a href="#" aria-label="Instagram">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><rect x="3.5" y="3.5" width="17" height="17" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.2" cy="6.8" r="1.1" fill="currentColor" stroke="none"/></svg>
</a>
</div>
</div>
<nav class="footer__menu" aria-label="Quick menu">
<p class="footer__label">Quick Menu</p>
<ul>
<li><a href="#top">Home</a></li>
<li><a href="#system">System</a></li>
<li><a href="#capabilities">Capabilities</a></li>
<li><a href="#interface">Interface</a></li>
<li><a href="mailto:[email protected]">Contact us</a></li>
</ul>
</nav>
<div class="footer__company">
<p class="footer__label">Company</p>
<p>Remote-first · Global lab network</p>
<p><a href="mailto:[email protected]">[email protected]</a></p>
<p><a href="tel:+18144139191">(814) 413-9191</a></p>
</div>
</div>
<div class="footer__wordmark" data-text="Autonomous" aria-hidden="true">Autonomous</div>
<div class="footer__bottom">
<div class="footer__legal">
<a href="#">Privacy policy</a>
<a href="#">Terms of Use</a>
</div>
<p class="footer__copy">© 2026 AI / 001 — Autonomous Intelligence</p>
</div>
</div>
</footer>
</div>
<!-- GSAP 3.15.0 + ScrollTrigger and Lenis 1.3.26: the versions the source pins -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lenis.min.js"></script>
<script src="app.js"></script>
</body>
</html>
```
## `app.js`
```js
/* ===========================================================================
Axiom 001 — "Autonomous Intelligence" robot scroll landing.
The React/Vite source ported to one plain classic script.
One engine for the whole page: the sequence's scroll choreography is a single
program (one canvas, one timeline, one theme crossfade shared by every stage).
GSAP, ScrollTrigger and Lenis are loaded by index.html before this file.
Everything is tracked and torn down before a rebuild, so AxiomEngine.rebuild()
can be called at any time without leaving duplicate listeners or triggers.
=========================================================================== */
(function () {
'use strict';
if (window.AxiomEngine) return;
// Frames live in the local assets/ folder (1920x1080 WebP, 126 of them).
var FRAME_BASE = 'assets/axiom-frame-';
var FRAME_EXT = '.webp';
// The source's own values; window.AXIOM_MOTION, if set before this file, overrides them.
var DEFAULTS = {
sequence_length: 500, // .robot-sequence min-height, vh
scroll_scrub: 1.1,
lenis_lerp: 0.085,
hero_type_speed: 90, // ms per character
bento_stagger: 0.15,
pipe_scrub: 0.4,
command_type_speed: 55
};
var REQUIRED = ['.axiom-robot .robot-sequence', '.robot-sequence .robot-sticky',
'.robot-canvas', '.stage--hero .hero-title', '.stage--intel .intel-title',
'.assembly-words', '.stage--capability .cap-title', '.stage--reveal .reveal-primary',
'.loader'];
var state = { gen: 0, current: null };
/* ---------------- sequence config (src/config/sequence.js) ---------------- */
var FRAME_COUNT = 126;
var FRAME_WIDTH = 1920;
var FRAME_HEIGHT = 1080;
var STAGES = {
hero: { start: 1, end: 25 },
intelligence: { start: 26, end: 55 },
assembly: { start: 56, end: 85 },
capability: { start: 86, end: 108 },
reveal: { start: 109, end: 126 }
};
function framePath(index) {
var n = String(index);
while (n.length < 3) n = '0' + n;
return FRAME_BASE + n + FRAME_EXT;
}
function progressToFrame(progress) {
return Math.max(0, Math.min(FRAME_COUNT - 1, Math.round(progress * (FRAME_COUNT - 1))));
}
function frameToProgress(frame) { return (frame - 1) / (FRAME_COUNT - 1); }
// Measured average luminance (0..1) of every frame, in order 001..126.
var FRAME_LUMA = [
0.755, 0.753, 0.75, 0.746, 0.743, 0.739, 0.733, 0.727, 0.721, 0.713, 0.703,
0.69, 0.69, 0.677, 0.662, 0.644, 0.622, 0.6, 0.576, 0.549, 0.519, 0.492,
0.467, 0.441, 0.412, 0.386, 0.367, 0.352, 0.337, 0.323, 0.31, 0.297, 0.283,
0.271, 0.258, 0.246, 0.234, 0.234, 0.224, 0.213, 0.203, 0.193, 0.184, 0.176,
0.165, 0.158, 0.151, 0.143, 0.137, 0.13, 0.125, 0.119, 0.114, 0.109, 0.106,
0.102, 0.098, 0.094, 0.092, 0.088, 0.085, 0.081, 0.081, 0.079, 0.076, 0.074,
0.072, 0.071, 0.069, 0.069, 0.068, 0.069, 0.068, 0.07, 0.071, 0.073, 0.074,
0.076, 0.078, 0.081, 0.083, 0.086, 0.089, 0.094, 0.097, 0.1, 0.103, 0.103,
0.108, 0.111, 0.116, 0.12, 0.125, 0.128, 0.132, 0.135, 0.139, 0.142, 0.145,
0.148, 0.151, 0.153, 0.155, 0.157, 0.159, 0.161, 0.163, 0.168, 0.185, 0.206,
0.236, 0.268, 0.268, 0.314, 0.351, 0.396, 0.439, 0.488, 0.528, 0.567, 0.607,
0.65, 0.686, 0.723, 0.76, 0.794
];
var THEME_LO = 0.3; // luma at/below -> fully dark theme
var THEME_HI = 0.6; // luma at/above -> fully light theme
function themeForFrame(index) {
var luma = FRAME_LUMA[Math.max(0, Math.min(FRAME_LUMA.length - 1, index))];
var t = (luma - THEME_LO) / (THEME_HI - THEME_LO);
return Math.max(0, Math.min(1, t));
}
function stageProgress(progress, stage) {
var s = frameToProgress(stage.start);
var e = frameToProgress(stage.end);
if (progress <= s) return 0;
if (progress >= e) return 1;
return (progress - s) / (e - s);
}
/* ---------------- theme crossfade (RobotScrollExperience) ---------------- */
var DARK = { bg: '#070708', fg: '#f5f5f2', muted: '#96989d' };
var LIGHT = { bg: '#f5f5f2', fg: '#0c0d12', muted: '#5c5e64' };
var THEME_VARS = ['--t', '--bg', '--fg', '--fg-muted', '--bg-rgb', '--fg-rgb', '--hairline'];
function hexToRgb(h) {
return [parseInt(h.slice(1, 3), 16), parseInt(h.slice(3, 5), 16), parseInt(h.slice(5, 7), 16)];
}
function lerp(a, b, t) { return Math.round(a + (b - a) * t); }
function lerpRgb(h1, h2, t) {
var a = hexToRgb(h1), b = hexToRgb(h2);
return lerp(a[0], b[0], t) + ', ' + lerp(a[1], b[1], t) + ', ' + lerp(a[2], b[2], t);
}
function lerpHex(h1, h2, t) { return 'rgb(' + lerpRgb(h1, h2, t) + ')'; }
/* ---------------- frame sequence (src/hooks/useFrameSequence.js) ----------
Decoded frames are cached for the life of the page: a rebuild re-uses
them instead of re-downloading 126 images. */
var IMG_CACHE = {};
function createSequence(canvas, track, onProgress) {
var loaded = new Array(FRAME_COUNT); // boolean flags
var images = new Array(FRAME_COUNT); // HTMLImageElement | null
var lastDrawn = -1;
var target = 0;
var raf = 0;
var cancelled = false;
var loadedCount = 0;
var firstFrameReady = false;
function sizeCanvas() {
var rect = canvas.getBoundingClientRect();
// Cap DPR to keep memory/GPU cost sane on retina displays.
var dpr = Math.min(window.devicePixelRatio || 1, 2);
canvas.width = Math.max(1, Math.round(rect.width * dpr));
canvas.height = Math.max(1, Math.round(rect.height * dpr));
}
function nearestLoaded(t) {
for (var r = 0; r < FRAME_COUNT; r++) {
if (loaded[t - r] && t - r >= 0) return t - r;
if (loaded[t + r] && t + r < FRAME_COUNT) return t + r;
}
return -1;
}
function paint(frameIndex) {
var ctx = canvas.getContext('2d');
if (!ctx) return;
ctx.imageSmoothingEnabled = true;
ctx.imageSmoothingQuality = 'high';
// If the exact frame isn't decoded yet, fall back to the nearest loaded
// one so we never flash a blank canvas.
var idx = frameIndex;
if (!loaded[idx]) {
idx = nearestLoaded(frameIndex);
if (idx < 0) return;
}
var img = images[idx];
if (!img) return;
var cw = canvas.width, ch = canvas.height;
var iw = FRAME_WIDTH, ih = FRAME_HEIGHT;
var scale = Math.max(cw / iw, ch / ih); // cover
var dw = iw * scale, dh = ih * scale;
var dx = (cw - dw) / 2, dy = (ch - dh) / 2;
// Fill matches the frame background so any sub-pixel gaps blend in.
var styles = getComputedStyle(document.body);
ctx.fillStyle = styles.backgroundColor || '#070708';
ctx.fillRect(0, 0, cw, ch);
ctx.drawImage(img, dx, dy, dw, dh);
lastDrawn = frameIndex;
}
function tick() {
if (cancelled) return;
if (target !== lastDrawn) paint(target);
raf = requestAnimationFrame(tick);
}
function drawFrame(frameIndex) {
target = Math.max(0, Math.min(FRAME_COUNT - 1, frameIndex));
}
function paintCurrent() { lastDrawn = -1; paint(target); }
function adopt(i, img) {
images[i] = img;
loaded[i] = true;
loadedCount++;
if (onProgress) onProgress(loadedCount, firstFrameReady);
if (i === 0 && !firstFrameReady) {
firstFrameReady = true;
sizeCanvas();
paint(0);
if (onProgress) onProgress(loadedCount, true);
}
}
function loadOne(i) {
return new Promise(function (resolve) {
if (i < 0 || i >= FRAME_COUNT || images[i]) return resolve();
var src = framePath(i + 1); // frames are 1-indexed on disk
var cached = IMG_CACHE[src];
if (cached && cached.complete && cached.naturalWidth > 0) {
if (!cancelled) adopt(i, cached);
return resolve();
}
var img = cached || new Image();
IMG_CACHE[src] = img;
img.decoding = 'async';
var settled = false;
var done = function () {
if (settled) return;
settled = true;
if (cancelled) return resolve();
adopt(i, img);
resolve();
};
var finish = function () {
// decode() keeps the paint off the main thread, but a throttled tab can
// leave it pending forever; the timer keeps the queue moving either way
// (drawImage decodes on its own if it has to).
if (img.decode) {
Promise.race([
img.decode(),
new Promise(function (r) { setTimeout(r, 400); })
]).then(done, done); // graceful per-frame recovery
} else done();
};
// Attach handlers BEFORE setting src: a cached image can fire load
// synchronously, and a late handler would miss it.
img.onload = finish;
img.onerror = function () { resolve(); }; // skip a bad frame, keep the queue moving
if (!img.src) img.src = src;
if (img.complete && img.naturalWidth > 0) finish();
});
}
// Priority-ordered load plan, then a limited-concurrency queue.
var order = [];
for (var i = 0; i <= 11; i++) order.push(i); // high priority 001-012
for (var j = 12; j <= 34; j++) order.push(j); // then 013-035
for (var k = 35; k < FRAME_COUNT; k++) order.push(k); // background fill
var cursor = 0;
function worker() {
if (cancelled || cursor >= order.length) return Promise.resolve();
return loadOne(order[cursor++]).then(worker);
}
for (var w = 0; w < 6; w++) worker();
sizeCanvas();
paint(target);
raf = requestAnimationFrame(tick);
var onResize = function () {
sizeCanvas();
lastDrawn = -1; // force a repaint at the new size
paint(target);
};
track.on(window, 'resize', onResize);
track.on(window, 'orientationchange', onResize);
if ('ResizeObserver' in window) {
var ro = new ResizeObserver(onResize);
ro.observe(canvas);
track.observers.push(ro);
}
track.cleanups.push(function () {
cancelled = true;
cancelAnimationFrame(raf);
});
return {
drawFrame: drawFrame,
paintCurrent: paintCurrent,
frameCount: FRAME_COUNT,
isReady: function () { return firstFrameReady; }
};
}
/* ---------------- loader (src/components/SequenceLoader.jsx) ------------- */
function createLoader(root, track) {
var el = root.querySelector('.loader');
if (!el) return function () {};
var label = el.querySelector('.loader__label');
var fill = el.querySelector('.loader__fill');
var pctEl = el.querySelector('.loader__pct');
var dismissed = false;
return function update(loadedCount, ready) {
var pct = Math.round((loadedCount / FRAME_COUNT) * 100);
if (label) label.textContent = ready ? 'System ready' : 'Initializing AI';
if (fill) fill.style.width = (ready ? 100 : Math.max(pct, 6)) + '%';
if (pctEl) {
var shown = String(ready ? 100 : pct);
pctEl.textContent = (shown.length < 2 ? '0' + shown : shown) + '%';
}
if (ready && !dismissed) {
dismissed = true;
// Small beat on SYSTEM READY, then dismiss.
track.wait(function () { el.classList.add('is-hidden'); }, 480);
}
};
}
/* ---------------- nav (src/components/MinimalFloatingNav.jsx) ------------ */
function initNav(track) {
var nav = document.querySelector('.axiom-robot .nav');
if (!nav) return;
var links = nav.querySelector('.nav__links');
var toggle = nav.querySelector('.nav__toggle');
if (!links || !toggle) return;
function setOpen(open) {
links.classList.toggle('is-open', open);
toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
toggle.setAttribute('aria-label', open ? 'Close menu' : 'Open menu');
}
track.on(toggle, 'click', function () {
setOpen(!links.classList.contains('is-open'));
});
track.on(window, 'resize', function () {
if (window.innerWidth > 860) setOpen(false);
});
track.cleanups.push(function () { setOpen(false); });
}
/* ---------------- hero typewriter (stages/Stage01HeroCopy.jsx) ----------- */
function initHeroTypewriter(root, track, M) {
var title = root.querySelector('.stage--hero .hero-title');
if (!title) return;
var lines = title.querySelectorAll('.tw-line');
if (lines.length < 2) return;
var LINE1 = 'Intelligence';
var LINE2 = 'takes shape.';
var FULL = LINE1 + '\n' + LINE2;
var caret = document.createElement('span');
caret.className = 'type-caret';
caret.setAttribute('aria-hidden', 'true');
function paint(text) {
var parts = text.split('\n');
var line1 = parts[0] || '';
var line2 = parts.length > 1 ? parts[1] : '';
var onLine2 = parts.length > 1;
lines[0].textContent = line1;
lines[1].textContent = line2 || ' ';
(onLine2 ? lines[1] : lines[0]).appendChild(caret);
}
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
paint(FULL);
return;
}
var i = 0, dir = 1;
var speed = M.hero_type_speed;
function step() {
i += dir;
paint(FULL.slice(0, i));
if (dir > 0 && i >= FULL.length) { dir = -1; track.wait(step, 1600); return; }
if (dir < 0 && i <= 0) { dir = 1; track.wait(step, 520); return; }
track.wait(step, dir > 0 ? speed : Math.round(speed * 42 / 90));
}
paint('');
track.wait(step, 450);
}
/* ---------------- command field (components/AICommandSection.jsx) -------- */
function initCommand(track, M) {
var section = document.querySelector('.axiom-robot .command');
if (!section) return;
var textEl = section.querySelector('.command__text');
var statusEl = section.querySelector('.command__status');
if (!textEl || !statusEl) return;
var SAMPLES = [
'Design an autonomous workflow...',
'Analyze the sensor telemetry...',
'Automate the assembly line...',
'Draft a mission plan...'
];
var caret = document.createElement('span');
caret.className = 'command__caret';
caret.setAttribute('aria-hidden', 'true');
function render(typed, phase) {
textEl.textContent = '';
if (typed) {
textEl.appendChild(document.createTextNode(typed));
} else {
var ph = document.createElement('span');
ph.className = 'command__placeholder';
ph.textContent = 'What should we build today?';
textEl.appendChild(ph);
}
textEl.appendChild(caret);
statusEl.className = 'command__status mono status--' + phase;
statusEl.textContent = '';
if (phase === 'thinking') {
var dots = document.createElement('span');
dots.className = 'thinking';
for (var d = 0; d < 3; d++) dots.appendChild(document.createElement('span'));
statusEl.appendChild(dots);
statusEl.appendChild(document.createTextNode('Thinking...'));
} else if (phase === 'ready') {
var dot = document.createElement('span');
dot.className = 'dot';
statusEl.appendChild(dot);
statusEl.appendChild(document.createTextNode(' Mission ready'));
}
}
render('', 'idle');
var started = false;
var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var speed = M.command_type_speed;
function typeIn(k) {
var s = SAMPLES[k], i = 0;
(function step() {
i += 1;
render(s.slice(0, i), 'typing');
if (i < s.length) { track.wait(step, speed); return; }
render(s, 'thinking');
track.wait(function () {
render(s, 'ready');
track.wait(function () { eraseOut(k); }, 1500);
}, 1100);
})();
}
function eraseOut(k) {
var s = SAMPLES[k], i = s.length;
(function step() {
i -= 1;
render(s.slice(0, Math.max(0, i)), 'typing');
if (i > 0) { track.wait(step, Math.round(speed * 26 / 55)); return; }
track.wait(function () { typeIn((k + 1) % SAMPLES.length); }, 500);
})();
}
if (reduce) { render(SAMPLES[0], 'ready'); return; }
var io = new IntersectionObserver(function (entries) {
if (entries[0].isIntersecting && !started) {
started = true;
typeIn(0);
}
}, { threshold: 0.4 });
io.observe(section);
track.observers.push(io);
}
/* ---------------- footer wordmark spotlight (ModernSystemFooter.jsx) ----- */
function initFooter(track) {
var wm = document.querySelector('.axiom-robot .footer__wordmark');
if (!wm) return;
track.on(wm, 'mousemove', function (e) {
var r = wm.getBoundingClientRect();
wm.style.setProperty('--mx', (e.clientX - r.left) + 'px');
wm.style.setProperty('--my', (e.clientY - r.top) + 'px');
});
}
/* ---------------- spec bento (components/SpecBentoSection.jsx) ----------- */
function initBento(M) {
var el = document.querySelector('.axiom-robot .bento');
if (!el) return;
// cards slide in, one after another, as the section enters
gsap.fromTo(el.querySelectorAll('.bento__tile'),
{ autoAlpha: 0, y: 70 },
{
autoAlpha: 1, y: 0,
duration: 0.7, stagger: M.bento_stagger, ease: 'power3.out',
scrollTrigger: {
trigger: el,
start: 'top 65%', // fire once the section is properly in view
toggleActions: 'play none none reverse'
}
});
}
/* ---------------- pipeline (components/PipelineSection.jsx) -------------- */
function initPipeline(M) {
var el = document.querySelector('.axiom-robot .pipe');
if (!el) return;
// progress rail fills as you scroll through the section (scrubbed)
gsap.fromTo(el.querySelectorAll('.pipe__track'),
{ '--p': 0 },
{
'--p': 1,
ease: 'none',
scrollTrigger: { trigger: el, start: 'top 72%', end: 'bottom 62%', scrub: M.pipe_scrub }
});
// steps reveal one-by-one as the section enters
gsap.fromTo(el.querySelectorAll('.pipe__step'),
{ autoAlpha: 0, y: 26 },
{
autoAlpha: 1, y: 0, duration: 0.6, stagger: 0.16, ease: 'power2.out',
scrollTrigger: { trigger: el, start: 'top 70%' }
});
}
/* ---------------- the scroll experience (RobotScrollExperience.jsx) ------ */
function axiomMain(env, track) {
var M = env.M;
var widget = document.querySelector('.axiom-robot .robot-sequence').closest('.axiom-robot');
var sequenceEl = widget.querySelector('.robot-sequence');
var canvas = widget.querySelector('.robot-canvas');
var root = document.documentElement;
// Panel override: only write it when it differs from the source value, so the
// stylesheet's own responsive min-height (340vh on phones) still applies.
if (M.sequence_length !== DEFAULTS.sequence_length) {
sequenceEl.style.minHeight = M.sequence_length + 'vh';
track.cleanups.push(function () { sequenceEl.style.minHeight = ''; });
}
var loaderUpdate = createLoader(widget, track);
var seq = createSequence(canvas, track, loaderUpdate);
var drawFrame = seq.drawFrame;
// Continuously crossfade the runtime theme tokens. Cards keep their fixed
// surface (dark, translucent) since they only appear over dark frames.
function applyTheme(t) {
root.style.setProperty('--t', String(t));
root.style.setProperty('--bg', lerpHex(DARK.bg, LIGHT.bg, t));
root.style.setProperty('--fg', lerpHex(DARK.fg, LIGHT.fg, t));
root.style.setProperty('--fg-muted', lerpHex(DARK.muted, LIGHT.muted, t));
root.style.setProperty('--bg-rgb', lerpRgb(DARK.bg, LIGHT.bg, t));
root.style.setProperty('--fg-rgb', lerpRgb(DARK.fg, LIGHT.fg, t));
var v = Math.round(255 * (1 - t));
root.style.setProperty('--hairline', 'rgba(' + v + ', ' + v + ', ' + v + ', 0.16)');
document.body.classList.toggle('theme-light', t > 0.55);
}
track.cleanups.push(function () {
THEME_VARS.forEach(function (v) { root.style.removeProperty(v); });
document.body.classList.remove('theme-light');
});
initNav(track);
initHeroTypewriter(widget, track, M);
initCommand(track, M);
initFooter(track);
var prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
// ---------- Reduced motion: static, readable sections ----------
if (prefersReduced) {
sequenceEl.classList.add('is-reduced');
track.cleanups.push(function () { sequenceEl.classList.remove('is-reduced'); });
applyTheme(0);
drawFrame(Math.round(seq.frameCount * 0.8)); // a strong, near-complete frame
track.wait(seq.paintCurrent, 200);
return true;
}
// ---------- Full scroll choreography ----------
var lenis = new Lenis({ lerp: M.lenis_lerp, wheelMultiplier: 1, smoothWheel: true });
lenis.on('scroll', ScrollTrigger.update);
var lenisRaf = function (time) { lenis.raf(time * 1000); };
track.tick(lenisRaf);
gsap.ticker.lagSmoothing(0);
track.lenis = lenis;
track.cleanups.push(function () { gsap.ticker.lagSmoothing(500, 33); });
track.ctx = gsap.context(function () {
var q = function (sel) { return Array.prototype.slice.call(sequenceEl.querySelectorAll(sel)); };
var one = function (sel) { return q(sel)[0]; };
// Hide every non-hero stage up front so nothing flashes on load.
gsap.set([
'.stage--intel .intel-title',
'.stage--intel .card',
'.stage--assembly .assembly-words',
'.stage--capability .cap-title',
'.stage--capability .cap-lede',
'.stage--capability .card',
'.stage--reveal .reveal-micro',
'.stage--reveal .reveal-primary',
'.stage--reveal .reveal-secondary',
'.stage--reveal .reveal-ctas'
].reduce(function (all, s) { return all.concat(q(s)); }, []), { autoAlpha: 0 });
// --- Stage 01: hero is present on load; holds, then exits upward ---
var heroEls = q('.stage--hero .hero-eyebrow, .stage--hero .hero-title, .stage--hero .hero-body, .stage--hero .hero-scroll, .stage--hero .hero-card');
var heroTl = gsap.timeline({ paused: true });
heroTl
.to({}, { duration: 0.6 }) // hold
.to(heroEls, { autoAlpha: 0, y: -24, duration: 0.28, stagger: 0.03 });
// --- Stage 02: heading + four cards; cards enter directionally:
// left cards from the left, right cards from the right, with a small blur.
var intelTitle = one('.intel-title');
var modules = q('.stage--intel .card');
var sideX = function (i, el) {
return el.classList.contains('m--tr') || el.classList.contains('m--br') ? 44 : -44;
};
var intelTl = gsap.timeline({ paused: true });
intelTl
.fromTo(intelTitle, { autoAlpha: 0, y: 28 }, { autoAlpha: 1, y: 0, duration: 0.18 })
.fromTo(modules,
{ autoAlpha: 0, x: sideX, filter: 'blur(10px)' },
{ autoAlpha: 1, x: 0, filter: 'blur(0px)', duration: 0.42, stagger: 0.5, ease: 'power2.out' },
'>-0.02')
.to({}, { duration: 0.18 })
.to([intelTitle].concat(modules), { autoAlpha: 0, y: -16, duration: 0.2 });
// --- Stage 03: giant words block fades in / out ---
var wordsBlock = q('.assembly-words');
var words = q('.aword');
var assemblyTl = gsap.timeline({ paused: true });
assemblyTl
.fromTo(wordsBlock, { autoAlpha: 0 }, { autoAlpha: 1, duration: 0.14 })
.to({}, { duration: 0.72 })
.to(wordsBlock, { autoAlpha: 0, duration: 0.16 });
// --- Stage 04: left column + right cards (from right) + lower-left card ---
var capTitle = one('.cap-title');
var capLede = one('.cap-lede');
var panels = q('.stage--capability .card');
var capSideX = function (i, el) { return el.classList.contains('p--d') ? -160 : 160; };
var capTl = gsap.timeline({ paused: true });
capTl
.fromTo([capTitle, capLede], { autoAlpha: 0, y: 28 }, { autoAlpha: 1, y: 0, duration: 0.12, stagger: 0.05 })
.fromTo(panels,
{ autoAlpha: 0, x: capSideX, filter: 'blur(10px)' },
{ autoAlpha: 1, x: 0, filter: 'blur(0px)', duration: 0.42, stagger: 0.5, ease: 'power2.out' },
'>-0.02')
.to({}, { duration: 0.18 })
.to([capTitle, capLede].concat(panels), { autoAlpha: 0, y: -16, duration: 0.2 });
// --- Stage 05: final message enters and stays ---
var revealEls = q('.reveal-micro, .reveal-primary, .reveal-secondary, .reveal-ctas');
var revealTl = gsap.timeline({ paused: true });
revealTl
.fromTo(revealEls, { autoAlpha: 0, y: 30 }, { autoAlpha: 1, y: 0, duration: 0.24, stagger: 0.07 })
.to({}, { duration: 0.35 });
// Master render pass — driven by a scrubbed proxy so movement feels
// cinematic. No state on the scroll hot path.
function render(p) {
var frame = progressToFrame(p);
drawFrame(frame);
heroTl.progress(stageProgress(p, STAGES.hero));
intelTl.progress(stageProgress(p, STAGES.intelligence));
var alp = stageProgress(p, STAGES.assembly);
assemblyTl.progress(alp);
// Exactly ONE dominant word at a time — inactive words are fully hidden,
// never stacked as ghosts behind the active one.
var active = Math.min(2, Math.max(0, Math.floor(alp * 3)));
words.forEach(function (el, i) { el.style.opacity = i === active ? '0.94' : '0'; });
capTl.progress(stageProgress(p, STAGES.capability));
revealTl.progress(stageProgress(p, STAGES.reveal));
// Theme tracks the actual brightness of the current frame so text and
// chrome stay readable and coordinated across the whole sequence.
applyTheme(themeForFrame(frame));
}
var proxy = { p: 0 };
gsap.to(proxy, {
p: 1,
ease: 'none',
onUpdate: function () { render(proxy.p); },
scrollTrigger: {
trigger: sequenceEl,
start: 'top top',
end: 'bottom bottom',
scrub: M.scroll_scrub,
invalidateOnRefresh: true,
onRefresh: function (self) { render(self.progress); } // repaint at the right progress
}
});
render(0); // hero visible, correct theme
initBento(M);
initPipeline(M);
// Keep ScrollTrigger measurements correct across font load, resize,
// orientation change, and the tab being shown after being hidden.
var refresh = function () { ScrollTrigger.refresh(); };
requestAnimationFrame(refresh);
track.on(window, 'load', refresh);
track.on(document, 'visibilitychange', refresh);
if (document.fonts && document.fonts.ready) document.fonts.ready.then(refresh);
}, sequenceEl);
return true;
}
/* ---------------- lifecycle ---------------- */
function makeTrack() {
var t = {
listeners: [], timers: [], tickers: [], observers: [], cleanups: [],
ctx: null, lenis: null
};
t.on = function (target, type, fn, opts) {
if (!target) return;
target.addEventListener(type, fn, opts);
t.listeners.push([target, type, fn, opts]);
};
t.wait = function (fn, ms) {
var id = setTimeout(fn, ms);
t.timers.push(id);
return id;
};
t.tick = function (fn) { gsap.ticker.add(fn); t.tickers.push(fn); };
return t;
}
function teardown(t) {
if (!t) return;
t.cleanups.forEach(function (fn) { try { fn(); } catch (e) { console.warn('[Axiom]', e); } });
t.timers.forEach(clearTimeout);
t.listeners.forEach(function (l) { l[0].removeEventListener(l[1], l[2], l[3]); });
t.tickers.forEach(function (fn) { gsap.ticker.remove(fn); });
t.observers.forEach(function (o) { o.disconnect(); });
try { if (t.ctx) t.ctx.revert(); } catch (e) { console.warn('[Axiom] revert', e); }
try { if (t.lenis && t.lenis.destroy) t.lenis.destroy(); } catch (e) {}
document.documentElement.classList.remove('lenis', 'lenis-smooth', 'lenis-stopped', 'lenis-scrolling');
}
function missing() {
return REQUIRED.filter(function (s) { return !document.querySelector(s); });
}
function rebuild() {
var gen = ++state.gen;
teardown(state.current);
state.current = null;
var gone = missing();
if (gone.length) { console.info('[Axiom] engine off, missing:', gone.join(', ')); return; }
var t = makeTrack();
var env = {
gen: gen,
M: Object.assign({}, DEFAULTS, window.AXIOM_MOTION || {})
};
try {
if (axiomMain(env, t)) state.current = t;
} catch (err) {
console.error('[Axiom]', err);
teardown(t);
}
}
/* ---------------- boot ---------------- */
function start() {
if (!window.gsap || !window.ScrollTrigger || !window.Lenis) {
console.error('[Axiom] GSAP, ScrollTrigger and Lenis must load before app.js');
return;
}
gsap.registerPlugin(ScrollTrigger);
rebuild();
}
window.AxiomEngine = { rebuild: rebuild, version: 1 };
if (document.querySelector('.axiom-robot')) start();
})();
```
## `style.css`
```css
/* ===========================================================================
Axiom 001 — "Autonomous Intelligence" robot scroll landing.
The source's CSS (tokens + global + experience + sections). Every selector
carries `html:has(.axiom-robot)`, a uniform +(0,1,1), so the source's own
ordering still decides. The element-level resets sit inside
`:where(.axiom-robot …)`, which adds nothing.
Fonts are self-hosted (latin subset, one variable file per family, exactly
what Google serves).
=========================================================================== */
/* Oxanium — display */
@font-face { font-family: 'Oxanium'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/axiom-oxanium.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Oxanium'; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/axiom-oxanium.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Oxanium'; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/axiom-oxanium.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Oxanium'; font-style: normal; font-weight: 800; font-display: swap; src: url(assets/axiom-oxanium.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Manrope — body */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/axiom-manrope.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/axiom-manrope.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* JetBrains Mono — mono/system labels */
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/axiom-jetbrains-mono.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/axiom-jetbrains-mono.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* ---------------------------------------------------------------------------
Design tokens — colors, spacing, surfaces, typography, stage safe zones.
From the Master Prompt V2.
--------------------------------------------------------------------------- */
html:has(.axiom-robot) {
/* Color palette */
--void-black: #070708;
--carbon: #111214;
--graphite: #24262a;
--ai-white: #f5f5f2;
--soft-silver: #dadad5;
--muted-grey: #96989d;
--signal-orange: #ff6a00;
--signal-orange-hover: #ff8533;
/* Spacing rhythm */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 16px;
--sp-4: 24px;
--sp-5: 32px;
--sp-6: 48px;
--sp-7: 64px;
--sp-8: 96px;
--sp-9: 128px;
--sp-10: 160px;
/* Container */
--max-w: 1440px;
--gutter: clamp(32px, 5vw, 88px);
/* Radius */
--r-sm: 12px;
--r-card: 19px;
/* Cards on dark frames (V2 §6/§15) — secondary to the robot. */
--card-surface: rgba(10, 10, 12, 0.58);
--card-border: 1px solid rgba(255, 255, 255, 0.08);
/* Robotic typography system (V2 §5) */
--font-display: 'Oxanium', system-ui, -apple-system, sans-serif;
--font-body: 'Manrope', system-ui, -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', 'SFMono-Regular', ui-monospace, monospace;
/* Runtime theme tokens — crossfaded with frame luminance.
0 = dark UI / light text, 1 = light UI / dark text. */
--t: 0;
--bg: var(--void-black);
--fg: var(--ai-white);
--fg-muted: var(--muted-grey);
--hairline: rgba(255, 255, 255, 0.12);
/* RGB components for building readability gradients (transparent toward robot) */
--bg-rgb: 7, 7, 8;
--fg-rgb: 245, 245, 242;
}
/* Lenis smooth-scroll base rules */
html:has(.axiom-robot).lenis,
html:has(.axiom-robot).lenis body { height: auto; }
html:has(.axiom-robot) .lenis.lenis-smooth { scroll-behavior: auto !important; }
html:has(.axiom-robot) .lenis.lenis-stopped { overflow: hidden; }
html:has(.axiom-robot) .lenis.lenis-smooth iframe { pointer-events: none; }
/* ---------------------------------------------------------------------------
Global layout & base styles.
--------------------------------------------------------------------------- */
html:has(.axiom-robot) :where(.axiom-robot, .axiom-robot *),
html:has(.axiom-robot) :where(.axiom-robot, .axiom-robot *)::before,
html:has(.axiom-robot) :where(.axiom-robot, .axiom-robot *)::after {
box-sizing: border-box;
}
html:has(.axiom-robot) {
scroll-behavior: auto; /* GSAP/ScrollTrigger owns scroll choreography */
}
html:has(.axiom-robot) body {
margin: 0;
background: var(--bg);
color: var(--fg);
font-family: var(--font-body);
font-size: 18px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
/* Background follows the theme crossfade so page bg matches frame bg. */
transition: background-color 0.05s linear;
}
html:has(.axiom-robot) :where(.axiom-robot, .axiom-robot *)::selection {
background: var(--signal-orange);
color: #fff;
}
html:has(.axiom-robot) :where(.axiom-robot) a {
color: inherit;
text-decoration: none;
}
html:has(.axiom-robot) :where(.axiom-robot) h1,
html:has(.axiom-robot) :where(.axiom-robot) h2,
html:has(.axiom-robot) :where(.axiom-robot) h3,
html:has(.axiom-robot) :where(.axiom-robot) p {
margin: 0;
}
html:has(.axiom-robot) :where(.axiom-robot) button {
font-family: inherit;
cursor: pointer;
}
html:has(.axiom-robot) :where(.axiom-robot, .axiom-robot *):focus-visible {
outline: 2px solid var(--signal-orange);
outline-offset: 3px;
border-radius: 4px;
}
html:has(.axiom-robot) .container {
width: 100%;
max-width: var(--max-w);
margin-inline: auto;
padding-inline: var(--gutter);
}
/* Shared helpers ---------------------------------------------------------- */
html:has(.axiom-robot) .eyebrow,
html:has(.axiom-robot) .mono {
font-family: var(--font-mono);
font-size: clamp(11px, 0.85vw, 13px);
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--fg-muted);
}
html:has(.axiom-robot) .dot {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--signal-orange);
vertical-align: middle;
}
html:has(.axiom-robot) .display {
font-family: var(--font-display);
font-weight: 500;
line-height: 0.94;
letter-spacing: -0.02em;
}
/* Reduced-motion: static, readable sections. */
@media (prefers-reduced-motion: reduce) {
html:has(.axiom-robot) * {
animation-duration: 0.001ms !important;
transition-duration: 0.001ms !important;
}
}
/* ===========================================================================
Stack order (V2 §22.07): canvas < readability layers < stage content < header
======================================================================== */
/* ===========================================================================
Navigation / SiteHeader
======================================================================== */
html:has(.axiom-robot) .nav {
position: fixed;
inset: 0 0 auto 0;
z-index: 50;
padding-block: var(--sp-3);
color: var(--fg);
pointer-events: none;
}
html:has(.axiom-robot) .nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
pointer-events: auto;
padding: 12px 20px;
border-radius: 16px;
background: rgba(var(--bg-rgb), 0.5);
-webkit-backdrop-filter: blur(16px) saturate(1.4);
backdrop-filter: blur(16px) saturate(1.4);
border: 1px solid var(--hairline);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.22);
}
html:has(.axiom-robot) .nav__inner > * {
pointer-events: auto;
}
html:has(.axiom-robot) .nav__brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--fg);
}
html:has(.axiom-robot) .nav__logo { flex: none; color: var(--fg); }
html:has(.axiom-robot) .nav__eye { fill: var(--signal-orange); }
html:has(.axiom-robot) .nav__wordmark {
font-family: var(--font-display);
font-weight: 700;
font-size: 17px;
letter-spacing: 0.02em;
color: var(--fg);
display: inline-flex;
align-items: baseline;
gap: 4px;
}
html:has(.axiom-robot) .nav__wordmark-num { font-size: 12px; letter-spacing: 0.12em; color: var(--signal-orange); }
html:has(.axiom-robot) .nav__slash {
color: var(--signal-orange);
}
html:has(.axiom-robot) .nav__links {
display: flex;
gap: clamp(24px, 3vw, 48px);
font-size: 12px;
}
html:has(.axiom-robot) .nav__links a {
color: var(--fg);
opacity: 0.74;
letter-spacing: 0.18em;
transition: opacity 0.2s ease;
}
html:has(.axiom-robot) .nav__links a:hover {
opacity: 1;
}
html:has(.axiom-robot) .nav__right {
display: flex;
align-items: center;
gap: var(--sp-3);
}
html:has(.axiom-robot) .nav__enter {
color: var(--fg);
font-size: 12px;
letter-spacing: 0.18em;
padding: 8px 15px;
border: 1px solid var(--hairline);
border-radius: 999px;
transition: color 0.2s ease, border-color 0.2s ease;
}
html:has(.axiom-robot) .nav__enter:hover {
color: var(--signal-orange);
border-color: var(--signal-orange);
}
html:has(.axiom-robot) .nav__toggle {
display: none;
flex-direction: column;
gap: 5px;
width: 34px;
height: 34px;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid var(--hairline);
border-radius: 8px;
}
html:has(.axiom-robot) .nav__toggle span {
display: block;
width: 16px;
height: 1.5px;
background: var(--fg);
}
/* ===========================================================================
Sticky sequence + canvas (SequenceCanvas)
======================================================================== */
html:has(.axiom-robot) .robot-sequence {
position: relative;
min-height: 500vh;
}
html:has(.axiom-robot) .robot-sticky {
position: sticky;
top: 0;
height: 100vh;
height: 100dvh; /* fit the actual visible viewport on mobile browsers */
width: 100%;
overflow: hidden;
}
html:has(.axiom-robot) .robot-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
z-index: 0;
filter: url(#robot-sharpen) contrast(1.05) saturate(1.05);
}
html:has(.axiom-robot) .stage-layer {
position: absolute;
inset: 0;
z-index: 2;
}
html:has(.axiom-robot) .wm-mask {
position: absolute;
top: 0;
right: 0;
z-index: 1;
width: 320px;
height: 104px;
pointer-events: none;
-webkit-backdrop-filter: blur(22px) brightness(1.02);
backdrop-filter: blur(22px) brightness(1.02);
-webkit-mask-image: radial-gradient(130% 130% at 92% 12%, #000 44%, transparent 82%);
mask-image: radial-gradient(130% 130% at 92% 12%, #000 44%, transparent 82%);
}
@media (max-width: 640px) {
html:has(.axiom-robot) .wm-mask { width: 210px; height: 72px; }
}
/* Every stage fills the sticky viewport; only interactive copy catches pointer. */
html:has(.axiom-robot) .stage {
position: absolute;
inset: 0;
pointer-events: none;
}
html:has(.axiom-robot) .stage a,
html:has(.axiom-robot) .stage button {
pointer-events: auto;
}
/* Localized directional readability gradient — transparent toward the robot.
z-index 1 sits above the canvas but below stage content. */
html:has(.axiom-robot) .scrim {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
html:has(.axiom-robot) .scrim--left {
background: linear-gradient(
90deg,
rgba(var(--bg-rgb), 0.62) 0%,
rgba(var(--bg-rgb), 0.28) 30%,
rgba(var(--bg-rgb), 0) 52%
);
}
html:has(.axiom-robot) .scrim--topleft {
background: radial-gradient(
75% 55% at 22% 24%,
rgba(var(--bg-rgb), 0.55),
rgba(var(--bg-rgb), 0) 70%
);
}
html:has(.axiom-robot) .scrim--assembly {
background: radial-gradient(
60% 34% at 50% 62%,
rgba(var(--bg-rgb), 0.5),
rgba(var(--bg-rgb), 0) 72%
);
}
/* Persistent micro status label */
html:has(.axiom-robot) .sys-status {
position: absolute;
left: var(--gutter);
bottom: 22px;
z-index: 3;
color: var(--fg-muted);
font-size: 11px;
letter-spacing: 0.2em;
opacity: 0.8;
}
/* ---------------------------------------------------------------------------
Cards & surfaces (shared by modules + capability panels) — V2 §15
--------------------------------------------------------------------------- */
/* Card grid wrapper: transparent on desktop (cards keep absolute perimeter
positioning), becomes a real grid on mobile/tablet so ALL cards show. */
html:has(.axiom-robot) .card-grid { display: contents; }
html:has(.axiom-robot) .card {
position: absolute;
z-index: 2;
width: clamp(300px, 23vw, 410px);
padding: 30px 32px;
background: var(--card-surface);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: var(--r-card);
box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 0 26px rgba(255,255,255,0.16), 0 16px 50px rgba(0,0,0,0.28);
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
html:has(.axiom-robot) .card:hover { border-color: rgba(255,255,255,0.75); box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 0 34px rgba(255,255,255,0.2), 0 16px 44px rgba(0,0,0,0.34); }
html:has(.axiom-robot) .card__idx {
display: block;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.22em;
color: rgba(245, 245, 242, 0.7);
margin-bottom: 10px;
}
html:has(.axiom-robot) .card__idx .dot {
margin-right: 4px;
}
html:has(.axiom-robot) .card__title {
font-family: var(--font-display);
font-weight: 600;
font-size: 19px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--ai-white);
margin-bottom: 10px;
}
html:has(.axiom-robot) .card__body {
font-size: 16px;
line-height: 1.5;
color: rgba(245, 245, 242, 0.74);
max-width: 26ch;
}
/* ---------------------------------------------------------------------------
Stage 01 — Hero (safe zone x6-40%, y16-72%)
--------------------------------------------------------------------------- */
html:has(.axiom-robot) .hero-block {
position: absolute;
left: 6%;
top: 16%;
width: min(34vw, 540px);
z-index: 2;
}
html:has(.axiom-robot) .hero-eyebrow {
margin-bottom: var(--sp-4);
color: var(--fg-muted);
}
html:has(.axiom-robot) .hero-title {
font-size: clamp(58px, 7vw, 104px);
line-height: 0.92;
letter-spacing: -0.02em;
color: var(--fg);
max-width: 8.5ch;
}
html:has(.axiom-robot) .type-caret {
display: inline-block;
width: 0.055em;
height: 0.82em;
margin-left: 0.05em;
background: var(--signal-orange);
vertical-align: -0.06em;
animation: tw-blink 1s steps(1) infinite;
}
@keyframes tw-blink { 50% { opacity: 0; } }
html:has(.axiom-robot) .hero-body {
margin-top: var(--sp-5);
max-width: 30ch;
color: var(--fg-muted);
font-size: clamp(17px, 1.3vw, 19px);
line-height: 1.52;
}
html:has(.axiom-robot) .hero-scroll {
position: absolute;
left: 6%;
bottom: 9%;
z-index: 2;
color: var(--fg-muted);
font-size: 11px;
letter-spacing: 0.24em;
}
html:has(.axiom-robot) .hero-card {
position: absolute; right: 5%; bottom: 8%; z-index: 3;
width: min(30vw, 300px); padding: 22px 24px; border-radius: 18px;
background: rgba(10, 10, 12, 0.55);
-webkit-backdrop-filter: blur(18px) saturate(1.3);
backdrop-filter: blur(18px) saturate(1.3);
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 0 26px rgba(255,255,255,0.18), 0 16px 50px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.22);
color: #f5f5f2;
}
html:has(.axiom-robot) .hero-card .hero-card__eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--signal-orange); margin-bottom: 14px;
}
html:has(.axiom-robot) .hero-card__title { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.05; letter-spacing: -0.01em; color: #fff; margin-bottom: 16px; }
html:has(.axiom-robot) .hero-card__rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; font-size: 12px; letter-spacing: 0.04em; }
html:has(.axiom-robot) .hero-card__rows li { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, 0.1); }
html:has(.axiom-robot) .hero-card__rows li span:first-child { color: rgba(245, 245, 242, 0.55); }
html:has(.axiom-robot) .hero-card__rows li span:last-child { color: #fff; }
@media (max-width: 860px) {
html:has(.axiom-robot) .hero-card { display: none; }
}
/* ---------------------------------------------------------------------------
Stage 02 — Intelligence modules (perimeter cards, robot corridor free)
--------------------------------------------------------------------------- */
html:has(.axiom-robot) .intel-heading {
position: absolute;
left: 5%;
top: 11%;
width: min(34vw, 560px);
z-index: 2;
}
/* Sized to finish inside the y11-27% heading band and clear the VISION card
(top 33%) by >48px — anti-overlap gate (V2 §4/§10). */
html:has(.axiom-robot) .intel-title {
font-size: clamp(30px, 3.3vw, 46px);
line-height: 1;
letter-spacing: -0.01em;
color: var(--fg);
max-width: 22ch;
text-wrap: balance;
}
/* Card safe zones (V2 §10) */
html:has(.axiom-robot) .m--tl { left: 4%; top: 33%; }
/* VISION */
html:has(.axiom-robot) .m--bl { left: 4%; top: 63%; }
/* MEMORY */
html:has(.axiom-robot) .m--tr { right: 5%; top: 28%; }
/* REASONING */
html:has(.axiom-robot) .m--br { right: 5%; top: 60%; }
/* ACTION */
/* ---------------------------------------------------------------------------
Stage 03 — Assembly word (exactly one dominant word at a time)
--------------------------------------------------------------------------- */
html:has(.axiom-robot) .assembly-words {
position: absolute;
left: 50%;
top: 62%;
transform: translate(-50%, -50%);
width: 100%;
display: grid;
place-items: center;
z-index: 2;
}
html:has(.axiom-robot) .aword {
grid-area: 1 / 1; /* stacked; JS reveals only the active one */
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
html:has(.axiom-robot) .aword__count {
color: var(--signal-orange);
font-size: clamp(24px, 2vw, 32px);
margin-bottom: 14px;
letter-spacing: 0.3em;
}
html:has(.axiom-robot) .aword__text {
font-size: clamp(76px, 9.5vw, 150px);
line-height: 0.9;
letter-spacing: -0.03em;
color: var(--fg);
white-space: nowrap;
max-width: 70vw;
}
/* ---------------------------------------------------------------------------
Stage 04 — Capabilities (left editorial column + right card system)
--------------------------------------------------------------------------- */
html:has(.axiom-robot) .cap-heading {
position: absolute;
left: 5%;
top: 17%;
width: min(26vw, 460px);
z-index: 2;
}
html:has(.axiom-robot) .cap-title {
font-size: clamp(40px, 4.4vw, 64px);
line-height: 0.96;
color: var(--fg);
max-width: 9ch;
}
html:has(.axiom-robot) .cap-lede {
margin-top: var(--sp-4);
color: var(--fg-muted);
max-width: 26ch;
font-size: clamp(16px, 1.2vw, 18px);
line-height: 1.5;
}
/* Right card zones + optional lower-left COLLABORATE (V2 §12) */
html:has(.axiom-robot) .p--a { right: 6%; top: 24%; }
/* ANALYZE */
html:has(.axiom-robot) .p--b { right: 12%; top: 46%; }
/* CREATE */
html:has(.axiom-robot) .p--c { right: 4%; top: 64%; }
/* AUTOMATE */
html:has(.axiom-robot) .p--d { left: 6%; top: 73%; }
/* COLLABORATE */
/* ---------------------------------------------------------------------------
Stage 05 — Future reveal (airy, left-aligned, dark text on light frame)
--------------------------------------------------------------------------- */
html:has(.axiom-robot) .reveal-block {
position: absolute;
left: 6%;
top: 18%;
width: min(52vw, 760px);
z-index: 2;
}
html:has(.axiom-robot) .reveal-micro {
color: var(--signal-orange);
margin-bottom: var(--sp-4);
font-size: 12px;
letter-spacing: 0.22em;
}
html:has(.axiom-robot) .reveal-primary {
font-size: clamp(48px, 5.4vw, 92px);
line-height: 0.96;
letter-spacing: -0.02em;
color: var(--fg);
max-width: 12ch;
}
html:has(.axiom-robot) .reveal-secondary {
margin-top: var(--sp-6);
font-size: clamp(18px, 1.5vw, 22px);
color: var(--fg-muted);
max-width: 30ch;
}
html:has(.axiom-robot) .reveal-ctas {
margin-top: var(--sp-6);
display: flex;
gap: var(--sp-3);
flex-wrap: wrap;
}
/* ===========================================================================
Loader
======================================================================== */
html:has(.axiom-robot) .loader {
position: absolute;
inset: 0;
z-index: 20;
display: grid;
place-items: center;
background: var(--void-black);
transition: opacity 0.5s ease, visibility 0.5s ease;
}
html:has(.axiom-robot) .loader.is-hidden {
opacity: 0;
visibility: hidden;
}
html:has(.axiom-robot) .loader__inner {
width: min(320px, 70vw);
text-align: center;
}
html:has(.axiom-robot) .loader__label {
color: var(--ai-white);
font-size: 12px;
letter-spacing: 0.28em;
margin-bottom: var(--sp-3);
}
html:has(.axiom-robot) .loader__bar {
height: 2px;
background: rgba(255, 255, 255, 0.12);
border-radius: 2px;
overflow: hidden;
}
html:has(.axiom-robot) .loader__fill {
display: block;
height: 100%;
background: var(--signal-orange);
transition: width 0.25s ease;
}
html:has(.axiom-robot) .loader__pct {
margin-top: var(--sp-2);
font-size: 11px;
color: var(--muted-grey);
}
/* ===========================================================================
Reduced motion — static stacked presentation (ReducedMotionFallback)
======================================================================== */
html:has(.axiom-robot) .robot-sequence.is-reduced {
min-height: 0;
}
html:has(.axiom-robot) .is-reduced .robot-sticky {
position: relative;
height: 62vh;
}
html:has(.axiom-robot) .is-reduced .stage-layer {
position: static;
}
html:has(.axiom-robot) .is-reduced .scrim {
display: none;
}
html:has(.axiom-robot) .is-reduced .stage {
position: static;
display: block;
padding: var(--sp-7) var(--gutter);
}
html:has(.axiom-robot) .is-reduced .stage :where(.hero-block, .hero-scroll, .intel-heading, .cap-heading, .reveal-block, .assembly-words) {
position: static;
transform: none;
width: auto;
max-width: 640px;
}
html:has(.axiom-robot) .is-reduced .card {
position: static;
width: auto;
max-width: 420px;
margin: var(--sp-3) 0;
}
/* Keep the card grid transparent in reduced motion so cards stack in flow. */
html:has(.axiom-robot) .is-reduced .card-grid {
display: contents;
position: static;
}
/* ===========================================================================
Responsive choreography (re-composed, not scaled) — V2 §19
======================================================================== */
html:has(.axiom-robot) @media (max-width: 1199px) {
/* Tablet: pull cards toward the edges, tighten heading scale. */
.hero-block { width: min(46vw, 480px); }
.hero-title { font-size: clamp(48px, 7.4vw, 76px); }
.intel-heading { width: 44vw; }
.cap-heading { width: 34vw; }
.m--tl, .m--bl { left: 2.5%; }
.m--tr, .m--br { right: 2.5%; }
.p--a { right: 3%; }
.p--b { right: 4%; top: 47%; }
.p--c { right: 3%; }
.card { width: clamp(220px, 24vw, 300px); }
}
@media (max-width: 860px) {
html:has(.axiom-robot) .nav__links {
position: fixed;
top: 58px;
right: var(--gutter);
left: var(--gutter);
flex-direction: column;
gap: var(--sp-3);
padding: var(--sp-4);
background: rgba(7, 7, 8, 0.94);
border: 1px solid var(--hairline);
border-radius: var(--r-card);
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
html:has(.axiom-robot) .nav__links.is-open {
opacity: 1;
visibility: visible;
transform: none;
}
html:has(.axiom-robot) .nav__enter { display: none; }
html:has(.axiom-robot) .nav__toggle { display: flex; }
/* Mobile: shorter sequence, one content block at a time, single card. */
html:has(.axiom-robot) .robot-sequence { min-height: 340vh; }
html:has(.axiom-robot) .hero-block { left: 6%; top: 12%; width: 82vw; }
html:has(.axiom-robot) .hero-title { font-size: clamp(40px, 12vw, 60px); max-width: 12ch; }
html:has(.axiom-robot) .hero-body { font-size: 16px; max-width: 34ch; }
html:has(.axiom-robot) .intel-heading { left: 6%; top: 8%; width: 82vw; }
html:has(.axiom-robot) .intel-title { font-size: clamp(30px, 8.5vw, 44px); }
/* Show ALL four cards as a 2-column grid anchored to the lower stage,
instead of collapsing to a single card. Applies to both the intelligence
modules and the capability panels. */
html:has(.axiom-robot) .card-grid {
display: grid;
position: absolute;
z-index: 2;
left: 6%;
right: 6%;
bottom: 7%;
grid-template-columns: 1fr 1fr;
gap: 12px;
align-items: start;
}
html:has(.axiom-robot) .card-grid .card {
position: static;
width: auto;
padding: 18px 18px;
}
html:has(.axiom-robot) .card-grid .card__title { font-size: 17px; }
html:has(.axiom-robot) .card-grid .card__body { font-size: 14px; }
html:has(.axiom-robot) .assembly-words { top: 58%; }
/* Size so the longest word (PERCEPTION ~ 5.71x font-size) fits the viewport
instead of overflowing and getting clipped. */
html:has(.axiom-robot) .aword__text { font-size: clamp(44px, 15vw, 92px); max-width: 92vw; }
html:has(.axiom-robot) .cap-heading { left: 6%; top: 9%; width: 82vw; }
html:has(.axiom-robot) .cap-title { font-size: clamp(30px, 8vw, 44px); }
html:has(.axiom-robot) .reveal-block { left: 6%; top: 14%; width: 86vw; }
html:has(.axiom-robot) .reveal-primary { font-size: clamp(38px, 11vw, 60px); max-width: 14ch; }
}
/* Small phones: a 2-column card grid gets too tight for long titles
(e.g. COLLABORATE), so stack the four cards in a single column. */
html:has(.axiom-robot) @media (max-width: 560px) {
.card-grid {
grid-template-columns: 1fr;
bottom: 5%;
gap: 10px;
}
.card-grid .card { padding: 16px 18px; }
.card-grid .card__title { font-size: 16px; }
}
/* ===========================================================================
Shared buttons
======================================================================== */
html:has(.axiom-robot) .btn {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 14px 22px;
border-radius: 999px;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
html:has(.axiom-robot) .btn--solid {
background: var(--fg);
color: var(--bg);
border: 1px solid var(--fg);
}
html:has(.axiom-robot) .btn--solid:hover {
background: var(--signal-orange);
border-color: var(--signal-orange);
color: #fff;
}
html:has(.axiom-robot) .btn--ghost {
color: var(--fg);
border: 1px solid var(--hairline);
background: transparent;
}
html:has(.axiom-robot) .btn--ghost:hover {
border-color: var(--signal-orange);
color: var(--signal-orange);
}
/* ===========================================================================
Command interface section (bridges light reveal -> dark footer)
======================================================================== */
html:has(.axiom-robot) .command {
position: relative;
background: var(--bg);
color: var(--fg);
padding-block: clamp(96px, 16vh, 200px);
border-top: 1px solid var(--hairline);
}
html:has(.axiom-robot) .command__inner {
max-width: 1040px;
}
html:has(.axiom-robot) .command__eyebrow {
color: var(--fg-muted);
font-size: 12px;
letter-spacing: 0.2em;
margin-bottom: var(--sp-4);
}
html:has(.axiom-robot) .command__title {
font-size: clamp(40px, 5.4vw, 80px);
line-height: 0.96;
letter-spacing: -0.02em;
}
html:has(.axiom-robot) .command__field {
margin-top: var(--sp-7);
display: flex;
align-items: center;
gap: var(--sp-3);
flex-wrap: wrap;
padding: clamp(20px, 3vw, 32px);
background: rgba(var(--fg-rgb), 0.04);
border: 1px solid var(--hairline);
border-radius: var(--r-card);
}
html:has(.axiom-robot) .command__prompt {
color: var(--signal-orange);
font-size: 22px;
}
html:has(.axiom-robot) .command__text {
flex: 1;
min-width: 240px;
font-family: var(--font-mono);
font-size: clamp(18px, 2.2vw, 28px);
color: var(--fg);
}
html:has(.axiom-robot) .command__placeholder {
color: var(--fg-muted);
}
html:has(.axiom-robot) .command__caret {
display: inline-block;
width: 2px;
height: 1.1em;
margin-left: 4px;
background: var(--signal-orange);
vertical-align: -0.15em;
animation: caret-blink 1s steps(1) infinite;
}
@keyframes caret-blink {
50% { opacity: 0; }
}
html:has(.axiom-robot) .command__status {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--fg-muted);
letter-spacing: 0.16em;
min-height: 1em;
}
html:has(.axiom-robot) .status--ready {
color: var(--fg);
}
html:has(.axiom-robot) .thinking {
display: inline-flex;
gap: 4px;
}
html:has(.axiom-robot) .thinking span {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--signal-orange);
animation: thinking-pulse 1s ease-in-out infinite;
}
html:has(.axiom-robot) .thinking span:nth-child(2) { animation-delay: 0.15s; }
html:has(.axiom-robot) .thinking span:nth-child(3) { animation-delay: 0.3s; }
@keyframes thinking-pulse {
0%, 100% { opacity: 0.25; transform: translateY(0); }
50% { opacity: 1; transform: translateY(-3px); }
}
html:has(.axiom-robot) .command__utils {
margin: var(--sp-6) 0 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
gap: clamp(20px, 4vw, 56px);
font-size: 12px;
color: var(--fg-muted);
letter-spacing: 0.2em;
}
/* ===========================================================================
Footer (Collabora-style layout)
======================================================================== */
html:has(.axiom-robot) .footer { position: relative; padding: 0; background: #0a0a0c; }
html:has(.axiom-robot) .footer__card { position: relative; overflow: hidden; background: #0a0a0c; border-radius: 0; padding: clamp(44px, 5vw, 64px) clamp(24px, 5vw, 60px) 34px; color: #fff; }
html:has(.axiom-robot) .footer__top { position: relative; z-index: 2; display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: clamp(28px, 4vw, 64px); }
html:has(.axiom-robot) .footer__logo { font-size: clamp(28px, 3vw, 40px); font-weight: 700; letter-spacing: -0.01em; margin-bottom: 16px; }
html:has(.axiom-robot) .footer__desc { color: rgba(255, 255, 255, 0.55); font-size: 15px; line-height: 1.6; max-width: 42ch; }
html:has(.axiom-robot) .footer__socials { display: flex; gap: 12px; margin-top: 26px; }
html:has(.axiom-robot) .footer__socials a { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.72); transition: background-color .2s ease, color .2s ease, transform .2s ease; }
html:has(.axiom-robot) .footer__socials a:hover { background: rgba(255,255,255,0.14); color: #fff; transform: translateY(-2px); }
html:has(.axiom-robot) .footer__socials svg { width: 18px; height: 18px; }
html:has(.axiom-robot) .footer__label { color: rgba(255,255,255,0.5); font-size: 15px; margin-bottom: 20px; }
html:has(.axiom-robot) .footer__menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
html:has(.axiom-robot) .footer__menu a { color: rgba(255,255,255,0.86); font-size: 15px; transition: color .2s ease; }
html:has(.axiom-robot) .footer__menu a:hover { color: #fff; }
html:has(.axiom-robot) .footer__company p { color: #fff; font-size: 15px; margin-bottom: 14px; }
html:has(.axiom-robot) .footer__company a { color: #fff; }
html:has(.axiom-robot) .footer__wordmark { position: absolute; left: clamp(24px, 5vw, 60px); right: 0; bottom: 52px; z-index: 1; font-family: var(--font-display); font-weight: 800; font-size: clamp(88px, 20vw, 300px); line-height: 0.8; letter-spacing: -0.04em; white-space: nowrap; user-select: none; cursor: default; --mx: 50%; --my: 50%; background: linear-gradient(180deg, #1d1d21, #34343b 50%, #1d1d21); -webkit-background-clip: text; background-clip: text; color: transparent; }
html:has(.axiom-robot) .footer__wordmark::after { content: attr(data-text); position: absolute; left: 0; top: 0; pointer-events: none; color: transparent; background: radial-gradient(260px 260px at var(--mx) var(--my), #eef5ff 0%, #a9ccff 38%, rgba(120,160,255,0) 72%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 22px rgba(140,190,255,0.5)); opacity: 0; transition: opacity 300ms ease; }
html:has(.axiom-robot) .footer__wordmark:hover::after { opacity: 1; }
html:has(.axiom-robot) .footer__bottom { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: clamp(150px, 22vw, 300px); font-size: 14px; color: rgba(255,255,255,0.6); }
html:has(.axiom-robot) .footer__legal { display: flex; gap: 30px; }
html:has(.axiom-robot) .footer__legal a { color: #fff; transition: opacity .2s ease; }
html:has(.axiom-robot) .footer__legal a:hover { opacity: 0.7; }
@media (max-width: 860px) {
html:has(.axiom-robot) .footer__top { grid-template-columns: 1fr 1fr; }
html:has(.axiom-robot) .footer__intro { grid-column: 1 / -1; }
html:has(.axiom-robot) .footer__wordmark { font-size: clamp(40px, 15vw, 130px); }
}
@media (max-width: 560px) {
html:has(.axiom-robot) .footer__top { grid-template-columns: 1fr; }
/* Flow the decorative wordmark into the layout (it sits between the contact
block and the legal row in the DOM): fills the empty gap and sits ABOVE
the legal text instead of overlapping it. position:relative keeps the
hover spotlight (::after) aligned. */
html:has(.axiom-robot) .footer__wordmark {
position: relative;
left: auto;
right: auto;
bottom: auto;
margin: 40px 0 0;
}
html:has(.axiom-robot) .footer__bottom { justify-content: flex-start; margin-top: 24px; }
}
/* ===========================================================================
Spec bento grid (#specs) — light, blends with the page
======================================================================== */
html:has(.axiom-robot) .bento { position: relative; background: #f5f5f2; color: #0c0d12; padding-block: clamp(90px, 14vh, 160px); border-top: 1px solid rgba(12,13,18,0.08); }
html:has(.axiom-robot) .bento__head { max-width: 640px; margin-bottom: clamp(40px, 6vw, 64px); }
html:has(.axiom-robot) .bento__eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--signal-orange); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 20px; }
html:has(.axiom-robot) .bento__title { font-size: clamp(34px, 5vw, 64px); line-height: 0.98; letter-spacing: -0.02em; color: #0c0d12; }
html:has(.axiom-robot) .bento__lede { margin-top: 20px; color: rgba(12,13,18,0.6); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; max-width: 46ch; }
html:has(.axiom-robot) .bento__grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(148px, auto); gap: 16px; }
html:has(.axiom-robot) .bento__tile {
position: relative; border-radius: 20px; padding: 26px;
background: #ffffff; border: 1px solid rgba(12,13,18,0.09);
box-shadow: 0 1px 2px rgba(12,13,18,0.04), 0 12px 30px rgba(12,13,18,0.06);
transition: border-color .3s ease, box-shadow .3s ease;
opacity: 0;
}
html:has(.axiom-robot) .bento__tile:hover { border-color: rgba(12,13,18,0.22); box-shadow: 0 2px 6px rgba(12,13,18,0.06), 0 18px 44px rgba(12,13,18,0.11); }
html:has(.axiom-robot) .bento__tile--feature { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; background: linear-gradient(160deg, #ffffff, #eaeef5); }
html:has(.axiom-robot) .bento__stat { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }
html:has(.axiom-robot) .bento__idx { display: inline-flex; align-items: center; gap: 8px; color: var(--signal-orange); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; }
html:has(.axiom-robot) .bento__tileTitle { margin-top: 14px; font-size: clamp(22px, 2vw, 30px); letter-spacing: -0.01em; color: #0c0d12; }
html:has(.axiom-robot) .bento__tileText { margin-top: 12px; color: rgba(12,13,18,0.6); font-size: 15px; line-height: 1.55; max-width: 34ch; }
html:has(.axiom-robot) .bento__big { margin-top: auto; padding-top: 24px; display: flex; align-items: baseline; gap: 12px; }
html:has(.axiom-robot) .bento__bigNum { font-size: clamp(56px, 7vw, 96px); line-height: 1; letter-spacing: -0.03em; background: linear-gradient(180deg, #0c0d12, #3b6bd6); -webkit-background-clip: text; background-clip: text; color: transparent; }
html:has(.axiom-robot) .bento__bigUnit { color: rgba(12,13,18,0.5); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; }
html:has(.axiom-robot) .bento__num { font-size: clamp(34px, 3.4vw, 52px); line-height: 1; letter-spacing: -0.02em; color: #0c0d12; }
html:has(.axiom-robot) .bento__num i { font-style: normal; font-size: 0.42em; color: rgba(12,13,18,0.45); margin-left: 2px; letter-spacing: 0.04em; }
html:has(.axiom-robot) .bento__label { color: rgba(12,13,18,0.5); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }
@media (max-width: 860px) {
html:has(.axiom-robot) .bento__grid { grid-template-columns: repeat(2, 1fr); }
html:has(.axiom-robot) .bento__tile--feature { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 520px) {
html:has(.axiom-robot) .bento__grid { grid-template-columns: 1fr; }
html:has(.axiom-robot) .bento__tile--feature { grid-column: span 1; }
}
/* ===========================================================================
Signal-path pipeline (#pipeline) — light, scroll-scrubbed rail
======================================================================== */
html:has(.axiom-robot) .pipe { position: relative; background: #f5f5f2; color: #0c0d12; padding-block: clamp(90px, 14vh, 160px); border-top: 1px solid rgba(12,13,18,0.08); }
html:has(.axiom-robot) .pipe__head { text-align: center; max-width: 720px; margin: 0 auto clamp(56px, 7vw, 84px); }
html:has(.axiom-robot) .pipe__eyebrow { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: var(--signal-orange); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 18px; }
html:has(.axiom-robot) .pipe__title { font-size: clamp(30px, 4.4vw, 58px); line-height: 1; letter-spacing: -0.02em; color: #0c0d12; }
html:has(.axiom-robot) .pipe__track { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; --p: 0; }
html:has(.axiom-robot) .pipe__railbg { position: absolute; left: 8px; right: 8px; top: 15px; height: 2px; background: rgba(12,13,18,0.12); }
html:has(.axiom-robot) .pipe__rail { position: absolute; left: 8px; right: 8px; top: 15px; height: 2px; transform-origin: left; transform: scaleX(var(--p)); background: linear-gradient(90deg, #6f9bff, #ff6a00); box-shadow: 0 0 10px rgba(120,160,255,0.5); }
html:has(.axiom-robot) .pipe__step { position: relative; padding-top: 44px; opacity: 0; }
html:has(.axiom-robot) .pipe__node { position: absolute; top: 8px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: #ffffff; border: 2px solid rgba(90,130,230,0.9); box-shadow: 0 0 0 4px rgba(120,160,255,0.14), 0 0 12px rgba(120,160,255,0.45); }
html:has(.axiom-robot) .pipe__n { display: block; color: var(--signal-orange); font-size: 12px; letter-spacing: 0.2em; }
html:has(.axiom-robot) .pipe__stepTitle { margin-top: 10px; font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -0.01em; color: #0c0d12; }
html:has(.axiom-robot) .pipe__stepBody { margin-top: 10px; color: rgba(12,13,18,0.6); font-size: 15px; line-height: 1.55; max-width: 26ch; }
@media (max-width: 820px) {
html:has(.axiom-robot) .pipe__track { grid-template-columns: 1fr; gap: 6px; }
html:has(.axiom-robot) .pipe__railbg { left: 7px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; }
html:has(.axiom-robot) .pipe__rail { left: 7px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; transform-origin: top; transform: scaleY(var(--p)); background: linear-gradient(180deg, #6f9bff, #ff6a00); }
html:has(.axiom-robot) .pipe__step { padding-top: 0; padding-left: 36px; padding-bottom: 30px; }
html:has(.axiom-robot) .pipe__node { top: 2px; }
}
/* ---------- Page-level overflow ---------- */
/* The sticky sequence needs its ancestors to keep their overflow visible. */
html:has(.axiom-robot) :where(.axiom-robot) {
overflow: visible;
}
/* The source sets `overflow-x: hidden` on <body>, which turns <body> into a
scroll container in some browsers and breaks `position: sticky`. `clip` hides
the same overflow without creating one. */
html:has(.axiom-robot) body {
overflow-x: clip;
}
```