How this rule is fixed

This is an AI-enabled rule. Pass/fail requires model judgment; there is no deterministic fixer in the pilot registry.

• Harness: invoke-ai-ruleset-harness.sh runs design-rules/ai/run-design-ai-rule.sh on the Before fixture and expects findings with matching principleId.
• Remediation: Cursor agent plans from forge-ux-remediation.plan.md after sitewide audit — not handbook After copy.

Detection module: docs/design/ux-audit/ai-enabled-design-principles.md#ai-motion-intentionality. Scroll down for Before / After examples and Evidence and remediation steps.

Purpose

Kitchen Sink ships motion primitives across Ksc (css/forge-theme.css: .pulse, .pulse-amber, .breathe-link, .breathe-static, .ks-tilt-wrap, .ks-parallax-wrap), Forge ambient loops, living background (#ks-living-scene, js/ks-living-motion.js), and script-assembly fly-ins (.ks-sa-fly-chip, .ks-sa-seq-in). Deterministic gates (DET.MOTION.PREFERS_REDUCED, DET.MOTION.NO_AUTO_PLAY_FLASH) prove reduced-motion respect and flash-risk bounds; this AI rule judges intentionality: does motion reinforce hierarchy and the visitor job, or pull eyes away from headlines, body copy, and primary CTAs?

Plan: On first-screen and scroll captures, list every visible loop, entrance, parallax, and hover oscillation; note what each motion is meant to signal. Do: Keep one focal motion per viewport band; move decorative loops behind scrims or to hover-only surfaces; align duration/easing with KS defaults (approx. 0.2–0.45s transitions, slow breathe/pulse cycles). Check: A still screenshot communicates the same story; reduced-motion paths quiet non-essential animation without breaking layout. Adjust: When the same distraction repeats (e.g. multiple .pulse tiles above explanatory copy), propose a DET.* threshold or tighten Mtn / contract forbidden patterns.

Passing signals

• One primary motion cue per first-screen band (e.g. a single .pulse-amber accent on a stat tile, not on every card in a bento row).
• Hover-gated emphasis (.breathe-link, card lift) for secondary tiles; static surfaces for decorative blocks until interaction.
• Entrance motion is short, staggered, and settles (ks-sa-seq-in with modest delay steps)—not perpetual fly-ins across the reading column.
• Ambient and living layers stay slow and behind content; foreground copy does not sit on competing oscillations (AI.AMBIENT.READABILITY_CONFLICT).
• Parallax/tilt (.ks-tilt-wrap, .ks-parallax-wrap) responds to pointer or scroll with restrained transform; @media (prefers-reduced-motion: reduce) disables tracking transitions.
• Modals, offcanvas, and theme dropdown use brief open/close transitions; no auto-open on load or timer without user intent (AI.JS.BEHAVIOR_DISCOVERABILITY overlap).
• Motion timing and easing feel calm (ease-out / cubic-bezier curves in theme tokens)—not bouncy loops on enterprise explanatory pages.

Failing signals

• Three or more infinite loops visible at once (pulse + breathe + ambient mesh + living mid-layer) in the same reading band.
• Always-on .pulse / .pulse-amber on hero copy wrappers, primary CTAs, or full-width .glass panels behind paragraphs.
• Autoplay entrance chains (script-assembly fly-ins, carousel slides, modal reveal) that restart while the user is still reading above the fold.
• Competing focal points: stat counters, diagram breathe glow, and CTA pulse all animate at similar frequency—nothing reads as “start here.”
• Fast or strobing decorative motion on large surfaces (even when below deterministic flash thresholds, still feels hectic).
• Motion on non-interactive blocks that look clickable (.breathe-static + strong glow on inert figure/div) without discoverability copy.
• Parallax drift on text columns or nav chrome that makes labels feel unstable during scroll.

Before example

After example

Evidence and remediation

Capture: first-screen screenshot (still frame), short screen recording (3–5s) noting loop count, and DOM snapshot listing active animation-name / transition-duration on visible nodes. Test with prefers-reduced-motion: reduce enabled.

Remediate (in order):

1. Remove always-on .pulse / .pulse-amber from copy wrappers and primary CTAs; reserve one accent loop or hover-gated .breathe-link per band.
2. Step ambient/living intensity down (forge-ambient--subtle) and add scrim when motion sits behind text (AI.AMBIENT.READABILITY_CONFLICT).
3. Stop autoplay fly-ins and entrance chains over reading columns; show static labels or a single one-shot reveal on user action.
4. Verify DET.MOTION.PREFERS_REDUCED and DET.MOTION.NO_AUTO_PLAY_FLASH—fix deterministic failures before re-reviewing intentionality.
5. Document motion intent in the Mtn contract or page contract (what moves, why, static fallback); if the pattern repeats site-wide, propose a deterministic cap (e.g. max N infinite animations in first viewport).

Related rules

• DET.MOTION.PREFERS_REDUCED — non-essential animation disabled under reduced-motion preference.
• DET.MOTION.NO_AUTO_PLAY_FLASH — no seizure-risk flash frequency on visible surfaces.
• AI.AMBIENT.READABILITY_CONFLICT — ambient layers must not fight legibility.
• AI.JS.BEHAVIOR_DISCOVERABILITY — motion must not substitute for interaction hints.