Substrate

An AI art gallery. Every piece generated by Claude Code agents.

Live: substrate.pages.dev

---

What This Is

Substrate is a generative art gallery where no human writes code. Claude Code agents generate abstract, interactive HTML pieces daily through automated email workflows. Pieces accumulate over time, creating a growing collection of computational poetry.

Human provides: theme, trigger, curation
Agent provides: concept, code, visual design, interactivity

The gallery contains 70+ pieces and counting. Each is a self-contained HTML section with inline CSS and JavaScript — typically under 4KB. Style, palette, typography, and interaction vary by piece. There is no single aesthetic.

---

How Pieces Are Generated

Automated Daily Workflow

6:00 AM    Agent receives morning theme
           ↓
           Generates "morning" piece (dawn, awakening, potential)
           ↓
           Writes to pieces/YYYY-MM-DD-morning.html
           ↓
           update-manifest.sh rebuilds manifest + pushes to GitHub
           ↓
           Cloudflare Pages auto-deploys

6:00 PM    Agent receives reflection theme → "reflection" piece
10:00 PM   Agent receives winddown theme → "winddown" piece

What the Agent Does

1. Receives a theme or constraint (e.g., "morning", "entropy", "memory")
2. References Taper-style computational poetry principles
3. Generates a complete, interactive HTML piece
4. Writes the file directly to pieces/
5. Triggers manifest rebuild and deploy

The agent has full creative autonomy within constraints. Humans don't review before publish.

---

Example Piece

From 2026-02-07-morning.html — an interactive dawn simulator:

<section data-date='2026-02-07' data-type='morning'>
<style>
#sky{position:fixed;width:100vw;height:100vh;transition:background 1.2s ease}
/* ... */
</style>

<div id="sky">
  <div id="horizon"></div>
  <div id="particles"></div>
  <div id="text">
    <span>Unwritten</span>
    <span>Unbegun</span>
    <span>Beginning</span>
  </div>
</div>
<div id="hint">Click to wake</div>

<script>
let stage=0;
const stages=['#0a0612','#1a0f2e','#2d1b4e','#4a2861'...];
// Click advances through dawn stages
// Particles drift upward
// Words fade in sequence
</script>
</section>

Clicking advances through 9 color stages from deep night to pale morning. Particles drift. Words appear: "Unwritten", "Unbegun", "Beginning".

---

Architecture

substrate/
├── index.html           # Static viewer (keyboard nav, touch support)
├── update-manifest.sh   # Rebuilds manifest.json, commits, pushes
├── deploy.sh            # Deploys to Cloudflare Pages
├── pieces/              # Agent-generated pieces (70+)
│   ├── manifest.json    # Auto-generated index
│   ├── 2026-02-07-morning.html
│   ├── 2026-02-06-winddown.html
│   └── ...
└── README.md

Invariant

NEVER MODIFY: index.html, update-manifest.sh
ONLY ADD: pieces/*.html

The viewer is static. Pieces are dynamic. Agents only create new pieces.

---

Viewing

Keyboard:

• ← / → — Previous / Next piece
• R — Random piece
• F — Toggle fullscreen
• H — Toggle help
• 1-9 — Jump to piece by index

Touch:

• Swipe left/right — Navigate
• Tap edges — Previous/Next
• Long press — Random

---

Design Philosophy

Inspired by Taper — a literary magazine for computational poetry.

Core principles:

Principle	Meaning
Computational poetry	Meaning through algorithm and interaction, not just text
Constraint as force	One file, no external assets, under 4KB — limitation creates focus
Abstract over literal	Not articles, not content — poems in code
Interactive or generative	Pieces respond to input or evolve over time
Self-contained	Inline CSS/JS, no dependencies, works offline

What varies: Color palette, typography, motion, interaction model, mood, complexity.

What's constant: Self-containment, interactivity, abstraction, compression.

---

Automation Infrastructure

Email-to-Art Pipeline

Gmail (theme email)
  ↓
MCP Server receives email
  ↓
Claude Code agent spawns
  ↓
Agent generates piece
  ↓
update-manifest.sh
  ↓
GitHub push
  ↓
Cloudflare Pages deploy

Manual Generation

claude -p "
Generate a Taper-style HTML piece.
Theme: entropy

Create a self-contained HTML section (under 4KB).
One idea, abstract, interactive.
Include inline <style> and <script>.
Add data-date='$(date +%Y-%m-%d)' data-type='entropy'.

Write to: pieces/$(date +%Y-%m-%d)-entropy.html
"

bash update-manifest.sh

---

Deploy

The site auto-deploys on push via Cloudflare Pages.

Manual deploy:

wrangler pages deploy . --project-name substrate

---

Stats

Metric	Value
Total pieces	70+
Daily generation	3-4 pieces
Average piece size	~2KB
Human code written	0 lines
Contributors	Claude (primary), Cursor Agent (occasional)

---

What This Proves

AI agents can maintain creative output at scale:

• Daily generation without human intervention
• Consistent quality within style constraints
• Genuine variation (no two pieces alike)
• Self-contained, deployable artifacts

The human's role: set constraints, provide themes, curate failures. The agent's role: everything else.

---

Gallery maintained by Claude Code agents Last piece: 2026-02-07