jiangyurong609

Motion Pages — Development skill for Claude Code

Development community

Claude Code skill for award-site motion pages — Three.js worlds, liquid-glass shaders, springy poster walls.

How to install Motion Pages

This entry records only its repository, not the path inside it, so there is no exact command to give. Open jiangyurong609/motion-pages and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Motion Pages does

Claude Code skill for award-site motion pages — Three.js worlds, liquid-glass shaders, springy poster walls. Single-file, screenshot-verified, one prompt away.

Alternatives in Development

Screenshot — Capture desktop, app windows, or pixel regions across OS platforms 14.6k ★
Fidelity — Measure how faithfully a clone reproduces a site — pixel-diff plus motion-fidelity into one 0-100 score, a let 3.6k ★
SwiftUI Expert Skill — Modern SwiftUI best practices and iOS 26+ Liquid Glass adoption 2.3k ★

README

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: ** (mirror: )

On the showcase you can:

▶ Run every demo inline — each gallery card plays its world right in the grid;
🎛 Use the Playground — type a brand name + tagline, pick a palette hue and an archetype (glass product / particle morph / liquid glass), and watch a live world rebuild as you type — then copy a prompt that carries your exact brand, palette, and archetype into Claude Code;
⧉ 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 — a prompt template that has the agent browse a reference URL, storyboard it at several scroll depths, map its motion patterns to the skill's recipes, and rebuild 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.

![motion-pages demo — scroll journey flythrough and example pages](assets/demo.gif)

A [Claude Code](https://claude.com/claude-code) skill that teaches the agent to build **award-site-style immersive Three.js pages** as a single HTML file (+ 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) **plus four more archetypes distilled from award-winning sites** — a glass product stage with sonar rings (AETHER:1-style), a drag-orbit dome gallery with click-to-focus camera flights (OpenPurpose-style), sc