Skip to content

feat(viewer): make intent-trace-flow animation loop continuously - #339

Open
sanpatricky wants to merge 1 commit into
tt-a1i:mainfrom
sanpatricky:feat/continuous-trace-animation
Open

feat(viewer): make intent-trace-flow animation loop continuously#339
sanpatricky wants to merge 1 commit into
tt-a1i:mainfrom
sanpatricky:feat/continuous-trace-animation

Conversation

@sanpatricky

Copy link
Copy Markdown

Problem and value

When meta.animation: "trace" is enabled and the viewer is in Live mode, hovering over a node triggers the intent-trace-flow animation on connected edges. The animation plays once (1.15s) with a fade-in/fade-out (opacity 0.28 → 0.94 → 0), then disappears. Users expect continuous flow while hovering — the single play requires repeatedly moving the mouse to re-trigger, making it hard to observe data flow direction and connectivity.

Fixes #337

Scope

  • What changed:
    • archify/assets/template.html line 4417: animation-iteration-count from 1 both to infinite — loops continuously while trace is active.
    • archify/assets/template.html lines 4747–4751: simplified @keyframes archify-intent-trace-flow to maintain constant opacity: 0.94 throughout (removed fade-in from 0.28 and fade-out to 0).
  • What deliberately did not change:
    • All existing motion guards preserved: data-motion="still", data-document-hidden="true", data-motion-capable, reduced-motion preference, and export states still set animation: none !important.
    • Other animation keyframes (story-trail-flow, route-probe-flow, route-journey-flow, semantic-lens-flow) are untouched.
    • No schema, validator, or renderer logic changes.
  • No unrelated changes: confirmed.

Stability impact

  • Compatibility and migration risk: None. Only affects Live mode behavior when meta.animation: "trace" is explicitly authored. Still mode (default), reduced motion, export, and print are unaffected.
  • Renderer, validator, package, or generated-artifact risk: Low. CSS-only change in template. Validator does not inspect animation CSS. Generated artifacts from deliver will include the new animation behavior.
  • Failure behavior and rollback path: Revert the single commit. Previously delivered HTML is unaffected (self-contained).

Tests run

Not applicable for CSS animation behavior — no existing test exercises animation iteration count. Manual verification: opened a workflow diagram with animation: "trace" in Chrome, switched to Live mode, hovered over nodes, confirmed continuous flow animation that stops correctly when switching to Still mode.

Visual evidence

Not applicable for a looping CSS animation change — screenshots cannot convey animation continuity. Reproducible steps:

  1. Author a workflow JSON with "animation": "trace" in meta
  2. deliver and open the HTML
  3. Click Live in the bottom toolbar
  4. Hover over any node
  5. Before: flow plays once (1.15s) and fades out
  6. After: flow loops continuously while hovering, stops on Still/unhover
  • Automated or browser checks: N/A for animation iteration behavior
  • Perceptual visual review: passed (manual, Chrome 137, macOS)

Generated artifacts

Template change affects all future deliver outputs. No existing Gallery, guide, or README artifacts need regeneration — they are delivered artifacts frozen at their build time.

The archify.zip package would need rebuilding if this change is accepted, since assets/template.html is a packaged source.

Checklist

  • I used a minimal focused change and preserved existing typed JSON behavior unless the issue requires a contract change.
  • I ran the relevant targeted tests and npm test in archify/. — CSS-only change; no test covers animation iteration count
  • I added or updated a regression test for behavioral changes. — No existing test seam for CSS animation looping; noted as a gap
  • I checked generated artifacts and package freshness when their sources changed. — archify.zip rebuild needed if accepted
  • I removed secrets, private repository content, and customer data from fixtures and screenshots.

Change animation-iteration-count from 1 to infinite so the flow
animation keeps running while the trace is active, rather than
playing once and fading out.

Simplify keyframes to maintain constant opacity (0.94) throughout
the loop for smooth continuous flow visualization.

Existing motion guards (Still mode, reduced-motion, document-hidden,
export) are preserved and continue to disable the animation.

Closes tt-a1i#337
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Feature: continuous looping animation for intent-trace-flow

1 participant