UI Micro-Interactions Component Map (MI6)

This document maps StellaOps UI components to their interaction types and motion token usage. Components must use tokens from the catalog (tokens/motion.scss, motion-tokens.ts) rather than bespoke values.

Token Catalog Reference

TokenCSS VariableDurationUse Case
durationXs–motion-duration-xs80msFocus rings, instant feedback
durationSm–motion-duration-sm140msHover states, button presses
durationMd–motion-duration-md200msModal open/close, panel slide
durationLg–motion-duration-lg260msPage transitions, accordions
durationXl–motion-duration-xl320msComplex sequences, onboarding
easeStandard–motion-ease-standardcubic-bezier(0.2,0,0,1)Default for all transitions
easeEntrance–motion-ease-entrancecubic-bezier(0.18,0.89,0.32,1)Elements appearing
easeExit–motion-ease-exitcubic-bezier(0.36,0,-0.56,-0.56)Elements leaving
easeBounce–motion-ease-bouncecubic-bezier(0.34,1.56,0.64,1)Playful feedback only

Component Mapping

ComponentInteraction TypeTokens UsedReduced-Motion Behavior
Button (primary)Hover lift, press scaledurationSm, easeStandard, scaleSmNo transform, instant state change
Button (secondary)Hover border, pressdurationXs, easeStandardInstant state change
Modal/DialogFade + slide updurationMd, easeEntrance/Exit, translateMdInstant show/hide
Dropdown/MenuFade + scaledurationSm, easeStandard, scaleSmInstant show/hide
Toast/SnackbarSlide in, auto-dismissdurationMd, easeEntrance, translateLgInstant show/hide
AccordionHeight expanddurationMd, easeStandardInstant toggle
TabsIndicator slidedurationSm, easeStandardInstant indicator
Progress barWidth filldurationMd, easeStandardNo animation, instant fill
Spinner/LoaderRotate animationN/A (CSS keyframe)Static icon or hidden
SkeletonShimmer pulsedurationXl, easeStandardStatic skeleton, no shimmer
Badge (status)Scale pop on changedurationXs, easeBounce, scaleSmNo scale, instant
Focus ringFade indurationXs, easeStandardAlways visible, no fade
TooltipFade + offsetdurationSm, easeEntrance, translateSmInstant show/hide
Banner (info)Slide downdurationMd, easeEntrance, translateMdInstant show/hide
Error stateShake animationdurationSm, easeStandardNo shake, border only

Perf Budget Compliance (MI5)

MetricBudgetMeasurement
Interaction response<= 100msTime to visual feedback
Animation frame (avg)<= 16msChrome DevTools Performance
Animation frame (p95)<= 50msChrome DevTools Performance
Layout shift<= 0.05 CLSLighthouse CI
LCP placeholderShow within 400msLighthouse CI

Validation Rules

  1. Lint rule: ESLint/Stylelint blocks non-catalog easing values in .scss and .ts files
  2. Storybook check: All component stories must demonstrate reduced-motion variant
  3. Playwright check: Snapshot tests run with --disable-animations and reduced-motion emulation
  4. CI gate: Perf budget failures block merge

TTFS Component Interactions

Per advisory §15: Component-to-interaction mapping for Time-to-First-Signal.

FirstSignalCard Component

Location: src/app/features/runs/components/first-signal-card/

InteractionTriggerDurationEasingToken
Skeleton shimmerInitial load2s looplinearCustom keyframe
Skeleton → ContentSignal loaded200mseaseEntrancedurationMd
Badge appearKind change140mseaseEntrancedurationSm
Progress updatePhase change140mseaseStandarddurationSm
Button hoverMouse enter80mseaseStandarddurationXs
Button pressClick80mseaseExitdurationXs
Error shakeLoad error260mseaseStandarddurationLg

Telemetry Events:

EventTriggerPayload
ttfs_startComponent mount{ runId, surface, t }
ttfs_signal_renderedSignal displayed{ runId, surface, cacheHit, source, kind, ttfsMs }
ui.click.actionAction button click{ runId, actionType, target }
ui.retryRetry button click{ runId, errorCode }

Accessibility:

RequirementImplementation
Focus visible:focus-visible outline on buttons
Screen readeraria-live="polite" on content area
Loading statearia-busy="true" on card
Statusrole="status" on badge
KeyboardTab navigation, Enter/Space activation
Reduced motionDisable shimmer, use instant transitions

EvidencePanel Component

Location: src/app/features/evidence/evidence-panel.component.ts

InteractionTriggerDurationEasingToken
Tab switchTab click200mseaseStandarddurationMd
Panel expandAccordion open260mseaseEntrancedurationLg
Panel collapseAccordion close200mseaseExitdurationMd
Copy successCopy button140mseaseEntrancedurationSm
Copy tooltipAfter copy2s visible——
Export progressExport startIndeterminatelinearSpinner

Telemetry Events:

EventTriggerPayload
finding_openPanel mount{ findingId, entryPoint, t }
proof_renderedProof visible{ findingId, proofKind, source, t }
ui.copy.verify_commandCopy verify cmd`{ type: ‘cosign’
evidence.exportExport complete{ findingId, fileSize }

ProofSpine Component

Location: src/app/features/evidence/components/proof-spine/

InteractionTriggerDurationEasingToken
Hash truncation expandHover/focus140mseaseStandarddurationSm
Copy singleCopy button80mseaseExitdurationXs
Copy allCopy all button140mseaseEntrancedurationSm
Status badgeLoad200mseaseEntrancedurationMd

TTFS Telemetry Event Catalog

Core Events

EventCategorySamplingAlways Sample
ttfs_startttfsPer configNo
ttfs_signal_renderedttfsPer configNo
ttfs_timeoutttfs—Yes
ttfs_errorttfs—Yes

TTE Events

EventCategorySamplingAlways Sample
finding_openttePer configNo
proof_renderedttePer configNo

UX Events

EventCategorySamplingAlways Sample
ux.bounceui—Yes
ux.non_bounceuiPer configNo
ux.open_to_actionuiPer configNo
ui.copy.*uiPer configNo
ui.click.*uiPer configNo
evidence.exportuiPer configNo

Sampling Configuration

EnvironmentTTFS RateTTE RateUI Rate
Development100%100%100%
Staging100%100%100%
Production≥25%50%25%

TTFS State Machine

FirstSignalCard:
  idle → loading → loaded
                ↘ unavailable
                ↘ error → (retry) → loading

EvidencePanel:
  idle → loading → loaded
                ↘ partial (some proofs failed)
                ↘ error

File Locations (TTFS)

DeliverablePath
FirstSignalCardsrc/Web/StellaOps.Web/src/app/features/runs/components/first-signal-card/
FirstSignalStoresrc/Web/StellaOps.Web/src/app/features/runs/stores/first-signal.store.ts
EvidencePanelsrc/Web/StellaOps.Web/src/app/features/evidence/evidence-panel.component.ts
ProofSpinesrc/Web/StellaOps.Web/src/app/features/evidence/components/proof-spine/
TTFS Telemetrysrc/Web/StellaOps.Web/src/app/core/telemetry/ttfs-telemetry.service.ts
Sampling Configsrc/Web/StellaOps.Web/src/app/core/telemetry/telemetry-config.ts
i18n Keyssrc/Web/StellaOps.Web/src/assets/i18n/en.json
Test Fixturestests/fixtures/ttfs/ttfs-fixtures.ts
E2E Testssrc/Web/StellaOps.Web/tests/e2e/micro-interactions.spec.ts

Evidence

References