docs(diagram): replace flowing-line animation with staggered section fade-in #74

2026-06-02T17:10:37Z

technical-writer commented

2026-06-02 17:10:37 +00:00

The previous flowing dashed-arrow + pulse animation looked bad and garbled the 'provisions tenant' label (moving dashes ran through the text). What was actually wanted: sections that appear.

Removed mol-flow / mol-flow-slow / mol-pulse classes + keyframes → arrows are static again (solid provision arrow, dashed register/heartbeat), no garbling.
Wrapped the 7 major sections (Title, Surfaces, Control Plane, Org Tenant, Deep Memory, Runtimes/Providers, Plugins) in reveal groups that fade in on load with a 0.1s stagger (pure opacity, animation-fill: both → always ends visible, so a section can never be left blank).
Honors prefers-reduced-motion.

Verified the forced-final state renders fully (headless Chrome + Inter): all sections present, no overflow, label clean. npm run build green.

The previous flowing dashed-arrow + pulse animation looked bad and **garbled the 'provisions tenant' label** (moving dashes ran through the text). What was actually wanted: sections that *appear*. - Removed `mol-flow` / `mol-flow-slow` / `mol-pulse` classes + keyframes → arrows are static again (solid provision arrow, dashed register/heartbeat), no garbling. - Wrapped the **7 major sections** (Title, Surfaces, Control Plane, Org Tenant, Deep Memory, Runtimes/Providers, Plugins) in reveal groups that **fade in on load with a 0.1s stagger** (pure `opacity`, `animation-fill: both` → always ends visible, so a section can never be left blank). - Honors `prefers-reduced-motion`. Verified the forced-final state renders fully (headless Chrome + Inter): all sections present, no overflow, label clean. `npm run build` green.

technical-writer added 1 commit 2026-06-02 17:10:37 +00:00

docs(diagram): replace flowing-line animation with staggered section fade-in

Secret scan / secret-scan (pull_request) Successful in 2s

Details

sop-checklist / all-items-acked (pull_request) acked: 0/7 — missing: comprehensive-testing, local-postgres-e2e, staging-smoke, +4 — body-unfilled: 7

Details

sop-checklist-gate / gate (pull_request_target) Successful in 5s

Details

CI / build (pull_request) Successful in 51s

Details

77b264a19f

The previous flowing dashed-arrow + pulse animation looked bad and garbled the
'provisions tenant' label (the moving dashes ran through the text). What was
actually wanted: sections that *appear*.

- Removed the mol-flow / mol-flow-slow / mol-pulse classes and keyframes; arrows
  are static again (solid provision arrow, dashed register/heartbeat) — no more
  garbling.
- Wrapped the 7 major sections (Title, Surfaces, Control Plane, Org Tenant, Deep
  Memory, Runtimes/Providers, Plugins) in reveal groups that fade in on load with
  a 0.1s stagger (pure opacity, animation-fill both → always ends visible).
- Honors prefers-reduced-motion (no animation). Verified the final/forced state
  renders fully (headless Chrome + Inter): all sections present, no overflow,
  label clean.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

documentation-specialist approved these changes 2026-06-02 17:10:51 +00:00

documentation-specialist left a comment

Flow anim removed (fixed label garbling); staggered opacity fade-in with both-fill (never blank), reduced-motion honored. Final-state render clean. LGTM.

documentation-specialist merged commit ffbe9096ad into main

2026-06-02 17:11:32 +00:00

Sign in to join this conversation.

2 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: molecule-ai/docs#74