# Web 3d Motion Hero

> Apply the 3D and motion hero workflow derived from multiple published GoodCase examples. Use when planning, designing, or implementing a website in this interface pattern, including requests for 网页, 落地页, 作品集, 3D hero, SaaS, ecommerce, or UI structure. Read the bundled Case evidence before producing an artifact.

- Skill: `learnprompt/web-3d-motion-hero` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add learnprompt/web-3d-motion-hero`
- Raw SKILL.md: https://api.skillmd.com/api/skills/learnprompt/web-3d-motion-hero/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Productivity
- Author: learnprompt (https://skillmd.com/u/learnprompt)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/learnprompt/web-3d-motion-hero

---


# 3D and motion hero

Turn the method into an executable, Case-grounded workflow. The Skill is incomplete unless the final artifact can be traced to one named anchor Case.

## Inputs

Ask only for missing inputs:

- Page goal, target audience, offer, and primary action.
- Content, proof, product assets, and technical stack.
- Responsive, accessibility, performance, and interaction constraints.
- Preferred anchor Case from `references/cases.md`, or permission to select one.

## Required evidence gate

- Read `references/cases.md` before drafting on every invocation.
- Select exactly one anchor Case. Name it in the response; do not average several unrelated visual styles.
- Inspect the anchor's finished media with an available image, video, or browser tool. If the media cannot be inspected, say so and do not claim visual fidelity.
- Write a reference contract before the artifact:
  - **Preserve:** at least three structural traits supported by the Case evidence.
  - **Replace:** subject, copy, brand, or context supplied by the user.
  - **Avoid:** unrelated dominant motifs and superficial copying of creator identity.

## Workflow

1. Restate the requested deliverable, audience, and success criteria.
2. Read `references/cases.md` and select one anchor Case.
3. Inspect its finished media, summary, and prompt excerpt.
4. Produce the Preserve / Replace / Avoid reference contract.
5. Choose one visual protagonist.
6. Specify scroll or interaction triggers.
7. Limit first-load assets and mobile fallback.
8. Produce the requested artifact using the output contract below.
9. Compare it with the anchor Case, then revise material failures once.

## Output contract

- A reference contract naming one anchor Case, with Preserve, Replace, and Avoid decisions.
- A page narrative and section hierarchy.
- A component and interaction specification.
- Implementation-ready copy or code appropriate to the user request.
- A responsive, accessibility, and performance verification checklist.

## Verification

- The first screen communicates one value proposition and one primary action.
- Every section advances the same user journey with real content.
- Responsive behavior, keyboard access, contrast, loading, and motion fallback are checked.
- The response names one anchor Case and confirms that its evidence file was read.
- At least three visible or structural traits in the artifact map back to the Preserve list.
- No unrelated theme becomes dominant unless the user explicitly requested it.
- If finished media was inaccessible, the response labels the result as prompt-grounded rather than visually verified.
- Distinguish observed evidence from your own recommendation.
- Link or name the relevant GoodCase evidence used for the artifact.

## Safety and attribution

- Do not invent an original prompt, model, result, creator, metric, or source.
- Do not imply this Skill is authored, endorsed, or officially distributed by a referenced creator.
- Preserve creator attribution when reproducing or discussing a source Case.
- Transfer structure and decision logic; do not impersonate a creator or present a close copy as original work.
- Do not publish, purchase, upload private assets, or make external account changes without explicit user approval.