chore(site):animations, buttons, and layout

[NicholasKissel]

No description provided.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
rivet-site	Ready	Preview	Comment	Dec 6, 2025 2:08am

3 Skipped Deployments

Project	Deployment	Preview	Comments	Updated (UTC)
rivet-cloud	Ignored			Dec 6, 2025 2:08am
rivet-inspector	Ignored	Preview		Dec 6, 2025 2:08am
rivetkit-serverless	Skipped			Dec 6, 2025 2:08am

[NicholasKissel]

• chore(site):animations, buttons, and layout #3601 👈 (View in Graphite)
• main

---

How to use the Graphite Merge Queue

Add the label merge-queue to this PR to add it to the merge queue.

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has enabled the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

This stack of pull requests is managed by Graphite. Learn more about stacking.

[claude]

PR Review: chore(site):animations, buttons, and layout

Summary

This PR refactors animation patterns in three marketing section components, optimizing the animation approach by moving from per-card animations to container-level animations, and removes an unused button.

✅ Positive Aspects

1. Performance Optimization: Moving animations from individual cards to the container level reduces the number of animation observers, which can improve rendering performance, especially on lower-end devices.

2. Cleaner Code: The refactoring reduces nested motion components and simplifies the component structure.

3. Consistent Patterns: The same optimization pattern is applied across multiple sections (HostingSection and SolutionsSection), maintaining consistency.

4. Dead Code Removal: Removing the unused "Watch Demo" button in ObservabilitySection cleans up the UI and removes the unused Play import.

🔍 Code Quality Notes

Good:

• The changes maintain the same visual behavior while simplifying the implementation
• Animation properties (initial, whileInView, viewport, transition) are preserved
• The delay timings were appropriately removed since the container animates as one unit now

Consider:

1. Animation Timing Impact: The original implementation had staggered delays (0.2, 0.3, 0.4 for HostingSection cards and 0.05 * idx for SolutionsSection). The new implementation animates all cards simultaneously. This changes the visual effect:

   • Before: Cards appeared in sequence, creating a cascading effect
   • After: All cards fade in together as one unit

   While this is likely intentional for simplification, consider if the staggered effect was part of the design language. If the cascade was desired, you could add stagger to the container's children using Framer Motion's staggerChildren:

   <motion.div
     initial={{ opacity: 0, y: 20 }}
     whileInView={{ opacity: 1, y: 0 }}
     viewport={{ once: true }}
     transition={{ duration: 0.5, staggerChildren: 0.1 }}
     className='grid grid-cols-1 gap-8 md:grid-cols-3'
   >
     {/* Each child would need initial/animate props for stagger to work */}

2. Semantic HTML: The conversion from <motion.div> and <motion.a> to plain <div> and <a> is appropriate since the motion is now on the parent. However, for the card elements, ensure they don't need individual hover animations or other motion properties in the future.

🎯 Recommendations

1. Test Visual Consistency: Verify that the simultaneous animation of all cards (vs. the previous staggered effect) matches the intended design. If not, consider using staggerChildren as mentioned above.

2. Cross-browser Testing: Test the animations across different browsers and devices to ensure the container-level animation performs well.

3. Accessibility: Ensure prefers-reduced-motion is respected. Framer Motion should handle this automatically, but verify the behavior.

🐛 Potential Issues

None identified. The changes are straightforward refactoring with no obvious bugs.

🔒 Security Concerns

None. This PR only modifies client-side UI components.

🧪 Test Coverage

This is a frontend UI change. Manual testing of the animations would be appropriate. Consider:

• Visual regression testing if available
• Testing on mobile devices
• Verifying animation performance

Verdict

✅ Approved - This is a clean refactoring that simplifies the code while maintaining functionality. The main consideration is whether the loss of staggered card animations was intentional. If the design calls for simultaneous animations, this PR is good to merge.

[pkg-pr-new]

More templates

• example-ai-agent
• example-ai-and-user-generated-actors-freestyle
• chat-room
• example-cloudflare-workers
• example-cloudflare-workers-hono
• example-cloudflare-workers-inline-client
• example-counter
• example-counter-next-js
• example-counter-serverless
• example-cursors
• example-cursors-raw-websocket
• example-deno
• example-sqlite
• example-elysia
• example-express
• example-hono
• example-hono-bun
• example-hono-react
• example-kitchen-sink
• example-next-js
• quickstart-actions
• quickstart-cross-actor-actions
• quickstart-multi-region
• quickstart-raw-websockets
• quickstart-realtime
• quickstart-scheduling
• quickstart-state
• example-raw-fetch-handler
• example-raw-websocket-handler
• example-raw-websocket-handler-proxy
• example-react
• starter
• example-stream
• example-trpc

@rivetkit/cloudflare-workers

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/cloudflare-workers@3601

@rivetkit/db

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/db@3601

@rivetkit/framework-base

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/framework-base@3601

@rivetkit/next-js

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/next-js@3601

@rivetkit/react

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/react@3601

rivetkit

pnpm add https://pkg.pr.new/rivet-dev/rivet/rivetkit@3601

@rivetkit/sql-loader

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/sql-loader@3601

@rivetkit/engine-runner

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/engine-runner@3601

@rivetkit/engine-runner-protocol

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/engine-runner-protocol@3601

commit: acdc65f

[graphite-app]

Merge activity

• Dec 6, 2:10 AM UTC: NicholasKissel added this pull request to the Graphite merge queue.
• Dec 6, 2:10 AM UTC: CI is running for this pull request on a draft pull request (#3602) due to your merge queue CI optimization settings.
• Dec 6, 2:11 AM UTC: Merged by the Graphite merge queue via draft PR: #3602.