chre: v4 website changes

[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	Error			Nov 15, 2025 2:22am

3 Skipped Deployments

Project	Deployment	Preview	Comments	Updated (UTC)
rivet-cloud	Ignored			Nov 15, 2025 2:22am
rivet-inspector	Ignored			Nov 15, 2025 2:22am
rivetkit-serverless	Skipped			Nov 15, 2025 2:22am

[NicholasKissel]

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

• chre: v4 website changes #3472 👈 (View in Graphite)
• chore: create branch for v3 website changes on v2 #3304 : 1 other dependent PR (#3453 )
• chore(website): flatten actors docs structure #3280
• chore(rivetkit): switch dynamic node imports to use require #3461 : 1 other dependent PR (#3455 )
• chore(rivetkit-typescript): remove dependency on node modules #3460
• feat(site): add typedoc docs #3446
• chore(rivetkit): remove deprecated packages #3447
• chore(rivetkit): add support for conn params on onRequest and onWebSocket #3445
• feat(rivetkit): add asyncapi spec #3442
• chore(rivetkit): add actor router to the openapi spec #3441
• fix(rivetkit): skip sending RivetKit messages to conns that do not support it #3440
• fix(rivetkit): fix race condition with websocket open events #3439
• fix(rivetkit): standardize error metadata return type #3438
• fix(rivetkit): remove incorrect getEndpoint call in metadata handler #3433 : 1 other dependent PR (#3451 )
• feat(rivetkit): add json protocol support #3432
• chore(rivetkit): add required zod validation for json encoding #3431
• chore(rivetkit): add listing actors by only name to manager api #3430
• refactor(rivetkit): extract WebSocket protocol parsing to shared utility #3429
• refactor(rivetkit): restructure connection lifecycle contexts #3428
• chore(rivetkit): add WebSocketContext and RequestContext #3427
• chore(rivetkit): add conn type #3426
• chore(rivetkit): add connection for raw http #3425
• chore(rivetkit): rename onFetch to onRequest #3424
• refactor(rivetkit): add state manager for conn with symbol-based access #3423
• fix(rivetkit): use loggerWithoutContext for websocket error when actor undefined #3412
• feat(rivetkit): add GET /actors/names #3411
• feat(api-public): expose actor kv api #3410
• chore(rivetkit): auto-generate inspector token for engine driver #3409
• chore(rivetkit): close websockets on out of sequence messages #3404
• fix(rivetkit): properly apply clientEndpoint from metadata lookup #3402
• fix(rivetkit): properly handle msgIndex for hibernatable websocket reconnection #3401
• chore(rivetkit): rename onstart/onstop to onwake/onsleep #3422
• chore(rivetkit): split ActorInstance logic in to multiple classes #3421
• chore(rivetkit): move conns to separate persisted kv keys #3420
• chore(rivetkit): remove deprecated conn tokens & sse support #3419
• 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: v4 Website Changes

Overall Assessment: This is a comprehensive website redesign with modern interactive components. The code quality is generally good, but there are several areas that need attention before merging.

CRITICAL ISSUES:

1. Memory Leak in NewHeroSection.tsx (lines 192-232)
   The useEffect hook in ActorAnimation has missing cleanup that will cause memory leaks. The effect depends on step state that changes within the timeout itself, creating a new timer on every step change without properly cleaning up when component unmounts during mid-sequence.

Fix: Track if component is mounted and prevent state updates after unmount.

2. Unused Component (line 128)
   DatabaseNode component is defined but never used. Either remove it or use it instead of the inline database node markup at lines 322-331.

PERFORMANCE CONCERNS:

3. Injecting Styles via dangerouslySetInnerHTML (lines 6-113)
   Issues: No deduplication if multiple instances mount, SSR/CSR mismatch, CSS re-parsed on every render, external Google Fonts import adds network request.
   Recommendation: Move all styles to v2.css or CSS module.

4. Missing Animation Cleanup in NewFeaturesBento (lines 6-30)
   Event listeners added to .bento-box elements but the return statement is inside forEach instead of useEffect. Cleanup never runs - memory leak.

5. RequestAnimationFrame Leak in NewUseCases (lines 41-66)
   Old animation frame could still run when effect re-executes with new dependencies.

CODE QUALITY ISSUES:

6. Hardcoded Magic Numbers (lines 164-165, 178-179)
   Magic pixel values like 366px, 211px, 376px make code fragile. Use constants or CSS custom properties.

7. String-Based State Management (line 189)
   Using string literals for state is error-prone. Consider TypeScript enums or constants.

8. Accessibility Issues

• Missing aria-label on SVG icons
• No keyboard navigation for drag scrolling
• No prefers-reduced-motion support

POSITIVE OBSERVATIONS:

• Clean component structure
• Proper TypeScript usage
• Responsive design with Tailwind
• Smooth animations with good timing
• Proper use of IntersectionObserver

ACTION ITEMS:

1. Fix memory leak in ActorAnimation (BLOCKER)
2. Fix event listener cleanup in NewFeaturesBento (BLOCKER)
3. Move inline styles to CSS files
4. Add accessibility features
5. Remove unused DatabaseNode component

Estimated effort: 1-2 hours

Let me know if you need help implementing these fixes!