motion-pages

motion-pages — a Claude Code skill for award-site motion

Immersive Three.js worlds, liquid-glass shader typography, springy poster walls — single-file pages, screenshot-verified.

🌐 Showcase: https://motion-pages.pages.dev (mirror: https://jiangyurong609.github.io/motion-pages/)

On the showcase you can:

• ▶ Run every demo inline — each gallery card plays its world right in the grid;
• 🎛 Use the Bench — type a brand name + tagline, paste your brand hex (or pick a hue), choose dark or light, and pick any of eleven archetypes: three rebuild live as you type, the rest show their reference plate. Copy the prompt and it is the plate's full build-spec with a THEME block for your brand on top. Every card has a "↻ Remix for my brand" link that lands in the bench pre-selected, and every configuration is a shareable URL;
• ⧉ Copy full build-spec prompts — not one-liners: each example's prompt pins the layer stack, palette values, geometry parameters, shader math, timings, responsive rules, and the self-verify recipe (they live in docs/prompts/);
• 🔎 Clone the feel of any site — hand it a reference URL: scripts/study.mjs storyboards the page at several scroll depths, pixel-probes what reacts to pointer, drag, scroll and wheel, extracts palette and type, maps it all to the skill's recipes, and writes a build-spec prompt; the agent then rebuilds that motion language as original code for your brand;
• 🤖 Hand it to any agent — llms.txt links the full skill and every live example for AI agents outside Claude Code.

A Claude Code skill that teaches the agent to build award-site-style motion pages as a single HTML file with no build step. Thirteen archetypes, each a recipe + a bundled demo + a full build-spec prompt:

• Three.js worlds (+ a vendored three.js): the Sylva-style foggy hero (organic geometry, crisp DOM overlay UI, mouse-orbit parallax, pointer particles, Death-Stranding wireframe scan intro, glass cards, a living creature), a glass product stage with sonar rings (AETHER:1-style), a drag-orbit dome gallery with click-to-focus camera flights (OpenPurpose-style), a scroll-driven camera journey (Igloo-Inc-style), and a standalone particle shape morph;
• Raw WebGL: liquid-glass ripple typography — a fragment shader warps giant serif type under the cursor;
• Pure DOM: a springy draggable poster wall (MISC-style), a cursor-trail image reveal, a horizontal scroll-snap story, a scroll-to-build process reveal for a business, and the easing grammar as an interactive reference — plus recipes for cursor mask reveals (Lando Norris) and webcam gesture control.

Everything is responsive down to phones, touch- and reduced-motion-aware, verified via a multi-viewport headless-Chrome screenshot loop **plus a design-review (aesthetic

• conversion) pass** and a zero-dependency design audit, so the result is ready to mount in a production webapp on day 1.

Install

In Claude Code, two commands:

/plugin marketplace add jiangyurong609/motion-pages
/plugin install motion-pages@motion-pages

Or copy the skill in manually (works for forks and offline machines):

git clone https://github.com/jiangyurong609/motion-pages.git
cp -r motion-pages/motion-pages ~/.claude/skills/

Then in Claude Code, prompts like these will route through the skill:

• "Build me a 3D landing page for my brand, orbit using the mouse, add particles to pointer"
• "Build a liquid-glass hero — the headline ripples under the cursor"
• "Make a draggable poster wall where the posters flex like paper"
• "Clone the feel of <URL> for my brand — rebuild its motion language as original code"
• "Give the hero a wireframe intro like the field-scanning effect in Death Stranding"
• "Add a butterfly that lands on the branch and flies away on mouse-over"

Or skip prompt-writing entirely: grab a full build-spec prompt from the showcase gallery or generate a personalized one in the Bench.

What the skill encodes

• Architecture: 3 fixed layers — ghost brand wordmark (z0), transparent WebGL canvas (z1), DOM overlay UI (z2). Text is always DOM, never 3D.
• The one fog trick: scene.fog color == page background color ⇒ infinite depth.
• The transform trap: parallax, entrance animations, centering, and card tilt must live on separate elements / separate CSS properties (translate, rotate) or they silently clobber each other.
• Time rules: intro driven by elapsed time (never accumulated per-frame deltas), plus a ?still URL mode so headless screenshots are deterministic.
• Effect recipes: tube-geometry limbs + instanced fuzz (14k cones), pointer-biased particle drift, low-poly wireframe scan clones, scan-line card reveals, creature state machine (fly → rest → flee), traveling pulses.
• Self-verify loop: headless Chrome + SwiftShader screenshots at desktop, tablet, and phone sizes; how to catch silent JS/shader failures; and the headless traps that fake failures (--disable-gpu kills WebGL, Chrome's ~500px minimum window width silently crops narrow shots — use an iframe harness for true phone renders).
• Design-review pass: after the technical loop, re-read the still as a principal designer + CRO lead — value scan test, CTA squint test, trust-line adjacency, no dead micro-text, wordmark integrity, visible light, intro ≤ ~2.5 s, and a click- through audit of every link/button (honest labels, real destinations).
• Production loading: vendored three.module.js with local-first import + CDN fallback (never blank-void on a slow CDN, never dead on file:// CORS), UI reveal keyed to the first rendered frame with a plain-script failsafe.
• Responsive + touch: phone/tablet breakpoints (single-column phone layout with one peeking card), idle camera drift for pointer-less touch devices, prefers-reduced-motion support.
• Fluid UI layer: Meng-To-style shader buttons (glass gradient + idle specular sweep + cursor-following light + hover bloom), cursor-lit nav glass, card lift with tilt-flatten and art zoom, rippling play rings, an expo-out easing system — pure CSS + ~10 lines of JS, with the stagger-delay trap and still-mode/reduced-motion guards documented.
• Expanded archetypes: glass product stage (fake-glass shells — transmission is an opaque-gray trap under SwiftShader — sonar rings, orbital arcs, audio-reactive toggle), dome media gallery (density rules, seeded canvas thumbnails, drag-vs-click disambiguation, raycast fly-to-focus), scroll-driven camera rails (smoothed scrub, clearing-vs-terrain rule, caption scrims), multi-target particle morphs (stagger + mid-flight scatter), cursor mask reveals, paper poster walls, cursor-trail image reveals, horizontal scroll-snap stories, scroll-to-build process reveals, live procedural game worlds with HUD chrome, gesture control.
• The fake-bloom kit: baked canvas glow sprites (never bare square Points), a halo-ring gradient texture that IS the bloom, fresnel-edge glass shaders instead of transmission, sparkle sub-clouds, film grain — award-site light with no post-processing, rendering even under headless SwiftShader.
• Motion beyond Three.js: raw-WebGL liquid-glass ripple typography (analytic ripples, no FBO sim — survives old GPUs) and pure-DOM springy poster walls (bend from drag lag, per-poster spring stiffness) — same architecture, no 3D library.
• Study-a-reference workflow: given a URL — scripts/study.mjs storyboards it at five scroll depths, pixel-diffs what reacts to pointer / drag / scroll / wheel, extracts palette + type, greps its script bundles for tech signals, maps it all to the recipe catalog and writes a build-spec prompt; the agent rebuilds the motion language as original code for the user's brand (never copying the reference's code, assets, or content).
• Forcing params for verification: any state only user input can reach gets a query param that pins it (?still, ?p=0.5, ?focus=40) so every keyframe and interaction is a plain headless screenshot.
• Ship checklist: mounting into a real app — static assets, verified routes and anchors, meta/OG, a11y, perf sanity.

Runtime tooling

Zero-dependency (Node ≥22 + Chrome), lives in scripts/:

node scripts/study.mjs https://site.you.love   # "clone the feel of this URL" → study/<host>/spec.md
node scripts/audit.mjs mypage.html             # design lint: ~22 rules × 3 viewports
node scripts/audit.mjs mypage.html --json      # exit 1 on blockers → CI pre-deploy gate
node scripts/check-catalog.mjs                 # repo hygiene: the demo list agrees everywhere

The study turns a reference URL into a measured spec instead of a guess: a storyboard at 0/25/50/75/100 % scroll on desktop and phone, pixel-diff probes that tell whether the world drifts on its own, follows the cursor, drags with inertia, or is scrubbed by scroll or wheel; the palette from rendered pixels; display and body type from computed styles; a grep of the script bundles (chunks followed) for three / gsap / lenis / shaders / postprocessing; and a mapping onto the skill's archetypes with a confidence per match. It ends with a build-spec prompt you paste into the agent after swapping in your brand. It even copes with award sites that seal their DOM in a closed shadow root — the canvas and motion are still measured over the protocol.

The audit makes the skill's review passes executable: AI-slop tells (Inter display type, blue-purple gradient text, default ease .2s…), easing grammar, reduced-motion handling, the stagger-delay hover-lag trap, console errors, blank-frame and canvas-alive pixel checks, rendered text contrast, phone overflow, tap targets, ?still=1 determinism, a11y names. All thirteen bundled demos pass it.

scripts/picker.js is the live loop: paste it into the DevTools console on your page, click an element, and a precise context block (selector + markup + computed styles) lands on your clipboard — paste it to your agent and the skill answers with 3 genuinely distinct variants and waits for your pick.

Bundled examples

• motion-pages/examples/sylva-replica.html — replica study of the original nature scene (open it in a browser, move the mouse, hover the butterfly).
• motion-pages/examples/fernline-hero.html — the same recipe re-themed for a SaaS brand (Fernline, a fictional AI phone receptionist): the mossy branches become glowing call-wires, the butterfly becomes a message spark, call pulses flow into a receptionist orb. This one shows the full production treatment — conversion- first hero column, working demo modal, glass stat chips, atmosphere + vignette, phone/tablet layouts, touch idle-drift, reduced-motion support.
• motion-pages/examples/sona-product-hero.html — glass product stage (studied from the AETHER:1 earbuds site): a fake-glass capsule (no transmission — it renders opaque under SwiftShader) with glowing buds inside, thin additive sonar ring pulses, tilted orbital arcs with traveling dots, a wireframe geodesic backdrop, and a working WebAudio sound toggle that makes the rings react. Product sits beside the copy on desktop, floats above it on phones.
• motion-pages/examples/dome-gallery.html — drag-orbit dome gallery (studied from OpenPurpose®): ~100 canvas-generated site thumbnails on the inside of a sphere, inertial drag, click a card and the camera flies to it while the rest dim (Esc / "Back to dome" returns). Try ?focus=40 to jump straight to a focused card.
• motion-pages/examples/boreal-journey.html — scroll-driven camera journey + particle morphs (studied from Igloo Inc): scrolling scrubs the camera along a spline over foggy noise terrain while a 6k-point cloud morphs dome → ring portal → particle creature, with per-segment captions. Try ?p=0.5 or ?p=0.95 to pin any point of the journey.
• motion-pages/examples/pura-liquid-hero.html — liquid-glass ripple typography (no three.js — raw WebGL): a fragment shader turns the whole editorial page liquid; cursor ripples, a glass lens, and chromatic aberration warp giant serif type painted on an offscreen canvas.
• motion-pages/examples/paperworks-posterwall.html — springy draggable poster wall (no WebGL at all): an infinite wrapped grid of canvas-painted posters that flex like paper — spring tilts driven by drag lag, momentum, click-to-enlarge modal.
• motion-pages/examples/halde-trail.html — cursor-trail image reveal (pure DOM): a field studio's archive surfaces wherever the pointer goes — pooled print nodes spawn by distance travelled, land soft, then peel away along the pointer's own direction; seeded canvas duotones, click burst, idle autopilot, headline that multiplies through the prints.
• motion-pages/examples/kiln-horizontal.html — horizontal scroll-snap story (pure DOM): the wheel drives a sideways rail of five chapters (clay → wheel → glaze → kiln → table) with three-speed parallax from each chapter's local progress, soft snapping, dots + arrow keys, and canvas-lathed vessels. Try ?p=0.5 to pin the hand-off between chapters.
• motion-pages/examples/alder-build.html — scroll-scrubbed process reveal (pure DOM + canvas): a pinned hero raises a timber cabin as you scroll (stakes → piers → deck → frame → shell → lights-on at dusk), drawn isometrically from one drawScene(p, t) timeline with zero image assets, five crossfading captions and a ticked bar, then hands off to the business page — stats, three projects rendered by the same scene, process, quote form. Try ?p=0.69 for the roof mid-drop.
• motion-pages/examples/hollowmere-world.html — live game-world hero (three.js, zero image assets): an indie isometric RPG's landing page that is level one — a procedural weald where every texture is painted on a canvas at load (ground, bark, stone, leaves, grass, water normals), canopies are clouds of alpha-tested leaf cards that sway in a vertex shader, one soft shadow map, a painted-sky environment so the armour reads as steel, a pond, pollen, light shafts — and a knight built from primitives that walks where you click, lights three waystones for the HUD's quest, swings on J, dodges on Space; a day/night cycle; the trailer is the same scene through a perspective camera in three letterboxed shots, and the press screenshots are rendered by the same renderer. Try ?tod=0.8 for night, ?lite on a weak GPU.
• motion-pages/examples/volera-morph.html — particle shape morph (the standalone archetype): 6k seeded glow particles dissolve between a soaring crane (parametric wing sweeps), a quantized V-formation and a moon-gate ring — per-particle stagger plus mid-flight scatter is what makes it read as dissolution, and the cursor repels the flock locally.
• motion-pages/examples/tempo-easing.html — the easing grammar, interactive (pure DOM, zero requests): five curves × five jobs as replayable exhibit cards — entrances ease-out, exits ease-in, moves ease-in-out, loops linear, one signature overshoot — with a CTA that copies the whole curve set. The page demonstrates the grammar on itself.

Verify any file locally:

CHROME="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
"$CHROME" --headless=new --enable-unsafe-swiftshader --window-size=1440,900 \
  --screenshot=out.png --virtual-time-budget=8000 \
  "file://$PWD/motion-pages/examples/sylva-replica.html?still"

Contributing

New archetypes welcome — a recipe section in SKILL.md + a single-file demo + a build-spec prompt + a passing audit, as a set. See CONTRIBUTING.md.

Credits

• The expanded archetypes are original-code studies of interaction patterns seen on the AETHER:1 earbuds concept, OpenPurpose®, Igloo Inc (Awwwards Site of the Year), the official Lando Norris site, MISC, and the ITOM sketch portfolio — no code or assets were taken from any of them; every brand in the demos (Fernline, SONA, Archive°, BOREAL, PURA, Paperworks, VOLERA, HALDE, KILN, TEMPO, ALDER, HOLLOWMERE) is fictional.
• Built and verified with Claude Code.

License

MIT — see LICENSE. The Sylva visual design belongs to its original author; the replica is included as an educational study.