Thumbnail Factory
Title + theme - batch ImageResponse thumbnail URLs (square, wide, story) with no AI required.
Run this experiment yourself
Demos are not embedded on this site. Deploy a standalone copy on Vercel or run the experiment app locally.
Local development
cd apps/experiments/thumbnail-factory pnpm install pnpm dev
Then open http://localhost:3010.
This is an experimental demo. Use it as a starting point for your own projects.
Thumbnail Factory is a Wave 3 Batch H composition lab. The UI builds batch URLs in logic.ts; GET /api/thumb renders each size with ImageResponse.
Features
- Batch size variants
- Theme color accents
- Pure ImageResponse
UI Reference
| Control | Behavior |
|---|---|
| Title | Length-capped via normalizeTitle |
| Theme | One of ocean / forest / dusk / slate |
| Build batch | Builds preview URLs via batchUrls |
URL helpers live in the client - there is no JSON batch API.
API Reference
GET /api/thumb
Query: title, theme, w, h. Returns an ImageResponse PNG for that size.
| Status | Cause |
|---|---|
200 | Thumbnail rendered |
400 | Invalid input |
Implementation Details
Build URLs in the UI
batchUrls maps square / wide / story sizes to /api/thumb?... query strings.
Render with ImageResponse
Each preview <img> hits GET /api/thumb with theme colors from THEMES.
Limitations
- No CDN asset pipeline.
- System fonts only.
- Demo themes only.
Use in your project
Copy app/api/thumb/route.tsx and logic.ts from apps/experiments/thumbnail-factory/.
Deployment
Local Development
cd apps/experiments/thumbnail-factory
pnpm install
pnpm devConfiguration
| Variable | Required | Purpose |
|---|---|---|
— | — | No secrets required |