Pause offscreen homepage adapter motion

[tannerlinsley]

What changed

Pause the homepage framework-adapter proof's timer and animation-frame loop unless the graph intersects the viewport and the visitor allows motion.

Evidence and impact

FrameworkAdapterGraph, added in #1075, mounted several sections below the fold but immediately started:

• a 1.15-second interval that updates the active adapter
• a continuous animation-frame loop that commits React state about every 33ms

The animation-frame loop therefore drove roughly 30 React renders per second from initial homepage load even when the proof had never entered the viewport. The active-adapter interval also continued offscreen and for reduced-motion visitors.

The graph now remains static until visible, stops both loops when it leaves the viewport, and keeps the existing animation unchanged while visible. Reduced-motion visitors get the same static proof without either state loop.

Validation

• pnpm test
• TypeScript and type-aware lint clean
• 143 tests passed; 1 environment-gated docs smoke test skipped
• Commit hook reran formatting and the full test gate successfully
• git diff --check

Risk

Low. This changes only when the decorative proof runs; its visible motion, geometry, and content are unchanged.

Summary by CodeRabbit

• Accessibility

  • Respects reduced-motion preferences by disabling animated graph transitions when requested.

• Performance

  • Runs graph cycling and flow animations only while the graph is visible.
  • Improves cleanup of animation resources when the graph is removed or no longer active.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: c2db442a-12dc-4656-b9ea-b19c760b1224

📥 Commits

Reviewing files that changed from the base of the PR and between 9b4d4a1 and 45726e7.

📒 Files selected for processing (1)

• src/routes/index.tsx

---

📝 Walkthrough

Walkthrough

FrameworkAdapterGraph now uses usePrefersReducedMotion and viewport visibility to control adapter cycling and flow animation. Effects clean up timers, animation frames, and the intersection observer when they stop or unmount.

Changes

Graph animation controls

Layer / File(s)	Summary
Visibility and motion gating src/routes/index.tsx	The graph observes viewport visibility and reduced-motion preference before running adapter rotation and flow animation. The rendered container receives the root ref, and animation effects use the updated dependencies.

Estimated code review effort: 2 (Simple) | ~10 minutes

Suggested reviewers: abeuty

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes pausing homepage adapter motion when it is offscreen.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch agent/pause-offscreen-home-adapter-motion

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	tanstack-com	45726e7	Commit Preview URL Branch Preview URL	Aug 02 2026, 03:03 PM