F Kitchen Sink

UX audit rules

Motion intentionality

Rule handbook metadata

Rule
AI.MOTION.INTENTIONALITY · lane ai
Page status
current
page_version
a261f721a1ba9ed64cd1c21c23e779a0922ea4df4ac2197b859711fda156715d
generated_at
2026-05-19T22:30:00.000Z
registry_fingerprint
aef1de6082cf0f50d463783c843dee0ffb9132fbd5ed4ea6e5bb3f031f359c72

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

Before (failing example)

Governed agent delivery

Intent, delegation, review gates, and evidence—for teams shipping with human-owned control.

42
Handbook pages
Always pulsing
12
Methodologies

Failing KS markup: landing band stacks multiple infinite loops and autoplay fly-ins on explanatory copy and CTAs.

After example

After (passing example)

Governed agent delivery

Intent, delegation, review gates, and evidence—for teams shipping with human-owned control.

Start the methodology tour
42
Handbook pages
12
Methodologies
99%
Coverage

Diagram motion activates on hover—see Breathe patterns.

Passing KS markup: subtle ambient, one hover-gated accent, static stats, and no fly-in loop over the reading column.

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).