The build plan: what we copy conceptually from motionsites.ai, what we deliberately do differently, and the exact architecture of what is in this repository.
1. The one-line thesis
MotionSites sells prompts on vibes. LandingPagePrompts gives them away with receipts.
A prompt library is only worth as much as its prompts are trustworthy. The original proves nothing: you see a looping GIF, you pay, you paste, you hope. We keep the thing that makes the category valuable — hyper-specific, art-directed prompt text — and add the three things that make it verifiable: model attribution, exact token cost, and automated test results.
That reframes the whole product. It is not "cheaper MotionSites". It is an evidence-backed prompt library, which is a different and defensible thing.
2. What we copy (conceptually), and what we change
| MotionSites does | We do | Why |
|---|---|---|
| Curated prompt gallery with category tabs | Same gallery, same tabs | It is the correct information architecture for browsing prompts |
| Preview per prompt | Live, running iframe preview of the actual generated page | A GIF can be faked; a running page cannot |
| "Copy prompt" | Same, plus the full prompt is visible inline and as .md | Copying blind is bad UX |
| Free tier of 3 prompts, paid unlimited | All prompts free, MIT, no account | Removes the reason to pirate it |
| Animated Backgrounds as a free SEO surface | Same surface, 16 procedural backgrounds, copy-CSS | Proven top-of-funnel play, and genuinely useful |
| MCP server as a paid hook | A static prompts.json any agent can read for free | Distribution without a paywall or a server bill |
| Academy videos | how-it-works.html documenting the actual pipeline | We have no video budget; we have transparency |
| Custom prompt service ($99/$249) | Not offered | Out of scope for a free static site |
| Supabase + Cloudflare Workers + Mux | Static files only | $0 hosting, nothing to break, nothing to maintain |
3. Architecture
landingpageprompts/
├── index.html # prompt library: filters, search, live previews, modal
├── backgrounds.html # 16 procedural animated backgrounds, copy CSS/HTML
├── how-it-works.html # the verification pipeline, explained honestly
├── mcp.html # how to point any agent at prompts.json
├── 404.html
│
├── assets/
│ ├── css/site.css # the entire design system, one file
│ ├── js/data.js # GENERATED: window.LANDINGPAGEPROMPTS (catalog + evidence)
│ ├── js/app.js # rendering, filtering, live previews, modal, clipboard
│ └── previews/*.png # verification screenshots (desktop + mobile per demo)
│
├── demos/<slug>/index.html # GENERATED: the six demo pages. One file each.
├── prompts/
│ ├── _contract.mjs # shared technical contract
│ ├── specs.mjs # the six design briefs (source of truth)
│ ├── <slug>.md # GENERATED: published prompt doc + verification block
│ └── index.json # GENERATED: agent-readable prompt index
│
├── data/
│ ├── catalog.json # GENERATED: what the prompts are
│ ├── jobs.json # GENERATED: runner input
│ ├── ledger.jsonl # APPEND-ONLY: every model call, with exact usage
│ ├── raw/<id>.txt # raw model responses, reasoning + content, untouched
│ ├── verification.json # GENERATED: per-check browser results
│ ├── crosscheck.json # GENERATED: independent model reviews
│ └── last-run.json # GENERATED: last runner summary
│
├── reports/
│ ├── 01-research.md/.html # what motionsites.ai is and how it is built
│ ├── 02-blueprint.md/.html # this file
│ ├── 03-verification.md/.html# generated evidence
│ └── 04-crosscheck.md/.html # generated evidence
│
└── tools/
├── runner.mjs # multi-platform model runner + exact token ledger
├── build_jobs.mjs # specs -> prompt docs + jobs + catalog
├── verify.mjs # Playwright/Chromium verification harness
├── crosscheck.mjs # independent adversarial model review
├── render_site.mjs # joins catalog + evidence into assets/js/data.js
└── reports.mjs # renders the Markdown/HTML evidence reportsHard constraint honoured everywhere: no build step, no framework, no bundler, no dependencies, no external media. Open index.html from disk and it works. Push the folder to GitHub Pages or Cloudflare Pages and it is live for $0.
4. The generation pipeline
prompts/specs.mjs ──► build_jobs.mjs ──► data/jobs.json
│
▼
tools/runner.mjs
(streams to Workbuddy :8788 / cmd-code :3050)
│
┌──────────────────────┼──────────────────────┐
▼ ▼ ▼
demos/<slug>/index.html data/raw/<id>.txt data/ledger.jsonl
(the artifact) (raw response) (exact token usage)
│
▼
tools/verify.mjs
(Playwright + Chromium, 14–15 checks)
│
▼
data/verification.json
│
▼
tools/crosscheck.mjs
(a DIFFERENT model reviews brief vs. code)
│
▼
data/crosscheck.json
│
▼
render_site.mjs + reports.mjs
(assets/js/data.js, prompts/*.md, reports/*)Every arrow is a script in tools/ that can be re-run. Nothing is hand-waved.
Why the runner streams
A 40 000-token generation held on an idle HTTP connection gets dropped by the proxy. The runner therefore uses SSE on both wire protocols — OpenAI chat.completions for the Workbuddy proxy and Anthropic messages for cmd-code — and reassembles the stream. Token usage arrives in the terminal chunk of each stream, so the accounting is exact rather than estimated.
Why raw responses are kept
The first run failed silently: one model returned 1 130 completion tokens and 60 characters of content. Without the raw response that is unexplainable. Now every attempt is written to data/raw/<id>.attempt<n>.txt with the reasoning block and the content block separated, and a generation that does not yield a real HTML document is treated as a failure and retried, not written out as a result.
5. The design system
Deliberately neutral, so six very different demo palettes remain the loudest thing on the page. Near-black shell, one accent, no gradients on the chrome.
| Token | Value | Use |
|---|---|---|
--bg | #0a0a0b | page |
--bg-elev | #111113 | raised surfaces |
--card | #16161a | cards |
--border | #242429 | hairlines |
--fg | #f5f5f7 | primary text |
--fg-dim / --muted / --faint | #b9b9c2 / #8b8b96 / #5c5c66 | secondary → tertiary |
--accent | #d4ff4f | "verified", primary CTAs |
--ok / --warn / --bad | #4ade80 / #fbbf24 / #f87171 | check results |
--serif | Instrument Serif | display headings only |
--sans | Inter + system stack | everything else |
The accent is used for exactly one semantic job — this has been verified — which is why it never feels decorative.
6. The six prompts
Each targets one distinct motion effect, so the library is a survey of techniques rather than six variations on "fade in on scroll". Each is executed by a different model, which also makes the library a small model-comparison study.
| Prompt | Effect | Platform | Model |
|---|---|---|---|
| Liquid Glass Voyage | liquid-glass morphism over a procedural cinematic film | Workbuddy | hy4-preview-f |
| Scroll Atlas | pinned scroll-scrubbed narrative + progress rail | cmd-code | xiaomi/mimo-v2.6-pro |
| Magnetic Orbit | cursor-reactive magnetism, spotlight, custom cursor | Workbuddy | glm-5.3 |
| Neural Drift | canvas constellation field, depth parallax, repulsion | Workbuddy | kimi-k3 |
| Kinetic Type | split-text reveal, velocity-skewed marquees, scroll-linked scale | Workbuddy | gemini-3.5-flash |
| Stack Deck | pinned 3D card deck that stacks then fans into a bento | Workbuddy | gpt-5.6-terra |
gpt-6-astra and gpt-5.6-sol were excluded by request and are used nowhere.
The shared technical contract
Every prompt ends with the same 10-clause contract: one self-contained file, vanilla only, no external media, Google Fonts as the only permitted request, responsive at 390/768/1440, one h1 plus real landmarks, prefers-reduced-motion support, 60fps discipline, a window.__DEMO__ telemetry hook, and zero console noise. This is what makes the output verifiable — the contract is written so that a machine can check it.
7. Cost model
| MotionSites | LandingPagePrompts | |
|---|---|---|
| Prompts | ~500, 3 free | 6, all free, MIT |
| Hosting | Cloudflare + Supabase + Mux | any static host, $0 |
| Build | React 19 + Vite + Tailwind 4 | plain files |
| Running cost | subscription | the tokens you choose to spend |
| Evidence | none | ledger + verification + cross-check |
The only real cost in this project is inference, and it is published to the token.