ai-ui-ux-motion-engine

AI UI/UX Motion Engine

Create a project-specific experience from evidence. Treat references as structural, visual and interaction inputs, never as permission to clone branding, copy, code or protected assets.

Non-negotiable rules

• Read applicable AGENTS.md, source-of-truth documents, design systems and current working-tree changes before editing.
• Define the bounded target, acceptance criteria, dependencies, spend and validation plan.
• Use the fastest route that can meet the accuracy target. For real products, default to evidence-accurate when authoritative sources exist; never trade accuracy silently for spectacle. State early when CAD, compositing or real footage is required.
• Preserve the existing stack unless the user explicitly authorises a change.
• Label observations, facts, proposals, generated visualisations and unknowns.
• Keep content and actions usable without motion, JavaScript or unrestricted data use.
• Never claim cinematic parity, product accuracy, accessibility, performance or release readiness without direct evidence.
• Never configure a paid service, accept provider terms or spend credits without user authority.
• Never downgrade a requested full-screen, homepage or signature cinematic journey to a supporting shot. A camera rotation, dolly, zoom, parallax or static-image reveal is not a flagship.

Mandatory cinematic-intent gate

Activate this gate whenever the request or reference implies any of:

• a cinematic, premium or immersive scroll experience;
• a product opening, assembling, exploding, bursting or transforming;
• a camera orbit, dolly, macro inspection or authored product journey;
• photographic motion controlled by scrolling;
• a reference whose impact comes from changing viewpoint or object state.

The user does not need to use a trigger word or know which tool is required.

Before editing the page:

1. Copy the user's requested outcome into intent.requestSummary; record the signature moment, progression, payoff, required effects and unacceptable substitutes. Do not rewrite the request around the easiest available asset.
2. Classify truth mode:
   • illustrative: invented details are acceptable;
   • identity-locked: the same fictional or concept product must stay stable;
   • evidence-accurate: visible counts, geometry, labels and mechanics must match authoritative product evidence.
3. Confirm the reference or desired scenes, available source images or CAD, number and placement of flagship/supporting moments, target devices, media provider access and permitted credit/attempt cap. If the reference is a video, inspect keyframes plus any available transcript, prompt pack and description links; do not reconstruct its workflow from a summary or isolated screenshot.
4. State the dependency plainly. Photographic camera movement or physical transformation requires suitable source media plus an image/video generation, 3D or compositing route. CSS cannot invent unseen product views.
5. If the required provider or source material is unavailable, stop the cinematic asset work. Offer the static layout/fallback honestly; never substitute fades, zooms or stock background video and call it equivalent.
6. Create a cinematic brief from assets/cinematic-brief.example.json, validate it with scripts/validate-cinematic-brief.mjs, and obtain spend/terms authority before generation. Do not upload or spend after a failed validation.
7. Produce one isolated private proof of the signature moment before redesigning the page or generating the full library.
8. Reject drift with automated technical checks and an overview contact sheet. Sample only risky transitions densely; inspect every frame only for a detected defect or evidence-critical mechanics. Use at most the approved attempts; then simplify the action, change technique or report the blocker.
9. Create a creative-review JSON from assets/creative-acceptance.example.json and run scripts/validate-creative-acceptance.mjs. Technical media validation does not prove narrative, impact or creative acceptance.
10. Integrate only an owner-approved asset after the creative validator passes with --stage integration. Never put a weak proof into a live hero to see whether surrounding UI rescues it.