motion-pages*
an open-source skill for Claude Code · MIT
Award-site motion

MOTIONPAGES

one prompt away

Every plate below was built and screenshot-verified by the agent this skill teaches. This field is plate 000.

Browse the index ↓
Move the cursorthe field parts. Click to re-form.
One file

No build, no deps. Every page ships as a single self-contained HTML file. Open it, it runs.

Agent-verified

The agent screenshots desktop, tablet and phone and iterates until its own review passes.

9 archetypes

Nine finished worlds below, each with the full build-spec prompt that produces it.

Audit gate

A headless pixel audit hunts blank frames, dead motion, low contrast and AI-slop tells.

Any agent

Built for Claude Code, and SKILL.md pastes into any coding agent's context.

The index

Nine worlds. Run them here.

Each entry is a finished single-file page. RUN plays it inside its plate. COPY THE PROMPT hands you the full build spec: layer stack, palette, geometry, shader math, timings, and the self-verify loop, round-trip tested against the skill.

The composing bench

Type a brand. Get a world.

This is the input box. The plate on the right is live: it rebuilds as you type. When it feels like yours, copy the prompt. It carries your name, palette, and archetype into Claude Code.

Open fullscreen ↗

The preview is the real page — cursor parallax, ripples, swirl all work.

Every configuration is a shareable URL

Study anything. Copy nothing.

Clone the feel of a site

Paste a URL into the prompt. The agent browses the reference, storyboards it at five scroll depths, greps its bundles for tech signals, maps what it sees to this skill's recipes — then rebuilds that motion language as original code for your brand. It studies patterns. It never copies code, assets, or content.

Using the motion-pages skill: clone the feel of <URL> for my brand <NAME + one-line pitch> — browse it, storyboard it at several scroll depths, identify its motion patterns, then rebuild that motion language as an original single-file page with my brand's palette and copy. Self-verify until perfect.

The review every page must pass

Rendering correctly is not being designed well. Before anything ships, the skill makes the agent re-read its own screenshots against this checklist. It is why the plates above look the way they do:

  • 5-second value scan — what, for whom, what do I get
  • Squint test — the CTA pops first, headline second
  • Risk-reversal ✓s touch the CTA, never orphaned
  • No dead micro-text — big type or cut it
  • Ghost wordmark readable, occluded, never cropped
  • Visible light — blooms and vignette, no flat fills
  • One winner per region of the frame
  • Settled in ≤ 2.5 s, never blank under UI
  • Every control works — honest labels, real routes
  • Hover everything: surfaces respond like lit objects

Read the full skill — SKILL.md ↗

Two commands, then just ask.

Install the skill into Claude Code with the commands on the right: one clone, one copy.

Copy any prompt from the index, compose one at the bench, or hand a reference URL to the field method.

Watch it verify itself: the agent screenshots desktop, tablet, and phone, and iterates until the page passes the review.

# install git clone https://github.com/jiangyurong609/motion-pages.git cp -r motion-pages/motion-pages ~/.claude/skills/ # then, in Claude Code: "Build me a 3D landing page for my brand. Self-verify until perfect."