| name | motion-web-site-builder |
| description | Build a motion website implementation plan (and optional starter structure) from motion prompt briefs using accessible 3D/animated UI patterns. |
| license | MIT |
Motion Web Site Builder
I am helping create a usable 3D motion website so the user gets a fast, readable, visually distinctive page instead of a static mockup.
Scope
This skill produces implementation guidance and starter structure for motion-first web pages.
It is intended for:
- React or plain HTML/CSS/JS stacks
- 3D-inspired depth, parallax, and camera-aware interactions
- Landing sections with strong CTA clarity
Inputs
- Prompt direction from
decisions-motionsites-prompt-researcher
- Target stack and file structure
- Performance/accessibility constraints
Delivery format
- Decision board: what motion patterns are enabled/disabled and why.
- Token set: spacing, palette, font, duration, easing.
- Component map:
- hero
- feature reveal section
- CTA block
- footer
- Motion plan:
- scroll response rules
- hover response rules
- reduced-motion behavior
- Starter implementation:
- if asked for HTML-only: provide
<index>.html plus CSS + JS
- if asked for React: provide component + stylesheet scaffold
Must-follow constraints
- Keep one primary call to action visible in each major section.
- Avoid motion loops that repeat faster than one full cycle every 6s unless user requests it.
- Always include low-motion fallback states.
- Respect user accessibility: contrast and readable copy first, decorative movement second.
Quality checks
- Can a first-time visitor identify the value proposition in 2 seconds?
- Do motion transitions clarify meaning instead of adding noise?
- Can keyboard users reach primary CTA without waiting on animation?
- Are transitions smooth on mid-tier hardware (no continuous heavy filters)?
Output examples
- Provide a concise “implementation packet” with file names and snippets.
- Include clear next steps to move from concept to shipped page.
