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.
  • Provides smoother, less distracting experiences for visitors who prefer reduced motion.

• Performance

  • Runs graph cycling, flow animations, and chart autoplay only while visuals are visible.
  • Improves cleanup of animation resources when visualizations leave the screen or become inactive.
  • Enhances viewport-aware behavior across landing-page graphics.

[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: 4a7f108f-1c32-4674-9aa6-90d6dd717de9

📥 Commits

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

📒 Files selected for processing (4)

• src/components/landing/ChartsCatalogGallery.tsx
• src/components/landing/ChartsLandingGraphics.tsx
• src/hooks/useInView.ts
• src/routes/index.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• src/routes/index.tsx

---

📝 Walkthrough

Walkthrough

Landing-page chart animations now use shared viewport tracking. FrameworkAdapterGraph runs adapter cycling and flow animation only when visible and when reduced motion is not preferred. Animation resources are cleaned up when effects stop or unmount.

Changes

Visibility-aware landing animations

Layer / File(s)	Summary
Shared viewport tracking src/hooks/useInView.ts	Adds the configurable useInView hook with unsupported-browser fallback and observer cleanup.
Landing gallery integration src/components/landing/ChartsCatalogGallery.tsx, src/components/landing/ChartsLandingGraphics.tsx	Replaces local intersection-observer state with useInView thresholds while preserving animation visibility conditions.
Graph animation gating src/routes/index.tsx	Uses graph visibility and reduced-motion state to control adapter cycling and flow animation. The graph ref and animation effect dependencies are updated.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant FrameworkAdapterGraph
  participant useInView
  participant usePrefersReducedMotion
  FrameworkAdapterGraph->>useInView: observe graph container visibility
  FrameworkAdapterGraph->>usePrefersReducedMotion: read motion preference
  useInView-->>FrameworkAdapterGraph: visibility state
  usePrefersReducedMotion-->>FrameworkAdapterGraph: reduced-motion state
  FrameworkAdapterGraph->>FrameworkAdapterGraph: run or stop adapter cycling and flow animation

Loading

🚥 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 summarizes the main change: 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 💡 1

🛠️ Fix failing CI checks 💡

• Create stacked PR
• Commit on current branch

📝 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	c1bd7ba	Commit Preview URL Branch Preview URL	Aug 04 2026, 10:06 PM